/*
 * Copyright (c) Biovisuals Private Limited. All rights reserved.
 *
 * This software is the confidential and proprietary information of Biovisuals Private Limited.
 * You shall not disclose such Confidential Information and shall use it only in accordance
 * with the terms of the license agreement you entered into with Biovisuals Private Limited.
 */

/*
 * ICON HUB V2 (Icon Hub Modernization, Phase 1) — scoped styles only.
 *
 * Every rule is scoped to markup that only `public/src/iconHub/` creates (`.bv-iconhub`,
 * `.bv-ih-*`, `#iconHubHeader`, `#iconHubSubheader`), or to the shared panel WHILE that markup is
 * mounted (`#sliderContainer:has(> #sliderContent > .bv-iconhub)`). Nothing here changes the
 * panel's width, position, dock track, portrait sheet geometry or z-index, and none of the shared
 * `.category` / `.subcategory` / `.preview-item` rules are touched — Brush, Upload, Symbols and
 * the legacy Icon Hub render exactly as before.
 *
 * Neutral UI; the illustrations carry the colour. The Studio accent tokens (`--bv-accent*`, the
 * same ones the rail's active state uses) are reserved for focus, hover and active emphasis.
 */

/* ── the two header nodes are inert unless Icon Hub v2 owns the panel ─────────── */
#iconHubHeader,
#iconHubSubheader {
  display: none;
}

#sliderContainer:has(> #sliderContent > .bv-iconhub) #iconHubHeader {
  display: block;
}

#sliderContainer:has(> #sliderContent > .bv-iconhub) #iconHubSubheader:not([hidden]) {
  display: block;
}

/* The compact header replaces the shared breadcrumb + Back/Close row for Icons only. The shared
   nodes stay in the DOM with their handlers (other panels, and the portrait grip, still use them). */
#sliderContainer:has(> #sliderContent > .bv-iconhub) > .slider-header-container > .breadcrumb-nav,
#sliderContainer:has(> #sliderContent > .bv-iconhub) > .slider-header-container > .slider-header {
  display: none;
}

/* THE HEADER OWNS THE TOP EDGE OF THE PANEL (desktop dock).
   Here the panel itself is the scroller and carries its own top padding (10px; 8px on small screens),
   and the sticky header sticks BELOW that padding. Scrolled content therefore passed through the strip
   above the header and showed between the global Studio header and Icon Hub's. The padding is moved
   INTO the header: the panel's top padding becomes 0 and the header carries it instead, so at rest
   nothing moves, and the header's box (now opaque) covers the panel from its very first pixel whatever
   the padding value. Portrait is unaffected (its scroller is `#sliderContent`, below the grip). */
#app-studio:not([data-bv-mode="portrait"]) #sliderContainer:has(> #sliderContent > .bv-iconhub) {
  padding-top: 0;
}

#app-studio:not([data-bv-mode="portrait"]) #sliderContainer:has(> #sliderContent > .bv-iconhub) > .slider-header-container {
  padding-top: 10px;
  background: #ffffff;
}

@media (max-width: 767px) {
  #app-studio:not([data-bv-mode="portrait"]) #sliderContainer:has(> #sliderContent > .bv-iconhub) > .slider-header-container {
    padding-top: 8px;
  }
}

/* Portrait: the header container is opaque too, so nothing shows through it. */
#app-studio[data-bv-mode="portrait"] #sliderContainer:has(> #sliderContent > .bv-iconhub) > .slider-header-container {
  background: #ffffff;
}
/* PORTRAIT: the bottom sheet's grip already carries the title, Back and Close (bottomSheet.js
   moves the shared controls there and titles it from `lastPermanentSliderState`). Icon Hub adapts
   to that rather than adding a second header. */
#app-studio[data-bv-mode="portrait"] #sliderContainer:has(> #sliderContent > .bv-iconhub) #iconHubHeader {
  display: none;
}

/* The portrait sheet lays `#sliderContent`'s children out on an icon-tile grid; the Icon Hub root
   is one full-width child, like the other non-tile panels listed in slider-container.css. */
#app-studio[data-bv-mode="portrait"] #sliderContent > .bv-iconhub {
  grid-column: 1 / -1;
}

/* ── header ───────────────────────────────────────────────────────────────────── */
.bv-ih-header {
  padding: 2px 0 6px;
}

.bv-ih-header__bar {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 36px;
}

.bv-ih-header__titles {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 4px;
}

.bv-ih-header__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #1f2933;
  overflow-wrap: anywhere;
}

.bv-ih-header__subtitle {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: #6b7280;
  overflow-wrap: anywhere;
}

.bv-ih-icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #4b5563;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bv-ih-icon-btn:hover {
  background: var(--bv-surface-hover, #f2f4f8);
  color: #1f2933;
}

/* ── shared visual language ───────────────────────────────────────────────────── */
.bv-iconhub {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1f2933;
  padding-bottom: 8px;
}

.bv-iconhub :is(button, [role="button"], select):focus-visible,
.bv-ih-header :is(button):focus-visible,
.bv-ih-subheader :is(button, select):focus-visible {
  outline: 2px solid var(--bv-accent-bright, #f97316);
  outline-offset: 2px;
}

.bv-ih-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bv-ih-section {
  margin-top: 10px;
}

.bv-ih-section__title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

/* ── quick access (Phase 1, presentational) ───────────────────────────────────── */
/* THREE EQUAL TILES ON ONE ROW: icon above label, lightweight navigation shortcuts rather than CTAs.
   A three-column grid gives equal widths at any panel width without wrapping; the label keeps its
   12px size and the tile height, not the type, absorbs the breathing room. */
.bv-ih-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.bv-ih-chip {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  padding: 6px 4px;
  border: 1px solid #e4e7eb;
  border-radius: 10px;
  background: #ffffff;
  color: #374151;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bv-ih-chip:hover {
  border-color: var(--bv-accent-border, #fbd3b8);
  background: var(--bv-accent-soft, #fff4ec);
}

.bv-ih-chip__icon {
  /* A reserved 1em square, so the tile keeps its shape before the icon font loads (or if it never does);
     the glyph is centred in it and may overhang slightly, symmetrically. */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 15px;
  line-height: 1;
  color: #6b7280;
  transition: color 0.15s ease;
}

.bv-ih-chip:hover .bv-ih-chip__icon,
.bv-ih-chip:focus-visible .bv-ih-chip__icon {
  color: var(--bv-accent, #c2410c);
}

/* The portrait sheet's `button { min-height: 40px }` rule out-ranks a bare class rule, so the tile height
   is restated here, anchored on #sliderContent (an id) to win. */
#app-studio[data-bv-mode="portrait"] #sliderContent .bv-ih-chip {
  min-height: 52px;
}

/* ── taxonomy rows ────────────────────────────────────────────────────────────── */
.bv-ih-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bv-ih-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid #eceff3;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2933;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bv-ih-row:hover {
  border-color: var(--bv-accent-border, #fbd3b8);
  background: #fffdfb;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

/* Neutral placeholder visual — Phase 2 replaces it with an admin-configured preview. */
.bv-ih-row__visual {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #9ca3af;
  font-size: 13px;
  overflow: hidden;
}

/* Phase 2 — the admin-chosen representative preview fills the SAME fixed box; the placeholder glyph
   stays underneath until the image has loaded, and returns if it fails (the image is removed). */
.bv-ih-row__img {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: contain;
  pointer-events: none;
}

.bv-ih-row__visual[data-preview="loaded"] {
  background: #ffffff;
}

.bv-ih-row__visual[data-preview="loaded"] .bv-ih-row__glyph {
  visibility: hidden;
}

.bv-ih-row__label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bv-ih-row__chevron {
  flex: 0 0 auto;
  font-size: 11px;
  color: #9ca3af;
}

.bv-ih-row:hover .bv-ih-row__chevron {
  color: var(--bv-accent, #c2410c);
}

/* ── icon grid ────────────────────────────────────────────────────────────────── */
.bv-ih-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#app-studio[data-bv-mode="portrait"] .bv-ih-grid {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}

.bv-ih-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 6px 4px;
  border: 1px solid #eceff3;
  border-radius: 8px;
  background: #ffffff;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bv-ih-card:hover {
  border-color: var(--bv-accent-border, #fbd3b8);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

.bv-ih-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.bv-ih-card__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Phase 2 — lazy previews. The thumbnail box keeps its square size in every state, so a card never
   changes size; until its preview arrives the box is a quiet neutral tile, and a preview that
   fails (or is absent) shows a neutral glyph in the same box. Which of the three is shown is
   decided by the DOM (view.js::cardThumb), not by toggling `display` here: Font Awesome's
   stylesheet loads after this one and would override a `display` rule on the glyph. */
.bv-ih-card__thumb {
  position: relative;
  border-radius: 6px;
}

.bv-ih-card__thumb[data-preview="pending"] {
  background: #f6f7f9;
}

.bv-ih-card__img:not([src]) {
  visibility: hidden;
}

.bv-ih-card__fallback {
  font-size: 18px;
  color: #c4c9d1;
}

.bv-ih-card__thumb[data-preview="failed"] {
  background: #f6f7f9;
}

.bv-ih-card__name {
  width: 100%;
  font-size: 11px;
  line-height: 1.25;
  color: #374151;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ── Phase 4B: the Favorites star ─────────────────────────────────────────────── */
/* The star is the card's SIBLING inside the grid item (view.js::renderIconCard), laid over the
   card's top-right corner, so the item is its positioning context. Quiet until favorited; always
   visible (touch has no hover). The outline colour keeps 3:1 against the white tile. */
.bv-ih-grid__item {
  position: relative;
}

.bv-ih-fav {
  position: absolute;
  top: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: #6b7280;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* No button chrome in any state: only the star glyph shows (the focus ring is an outline, kept). */
.bv-ih-fav:hover,
.bv-ih-fav:focus,
.bv-ih-fav:active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.bv-ih-fav:hover {
  color: var(--bv-accent, #c2410c);
}

.bv-ih-fav[aria-pressed="true"] {
  color: #d97706;
}

.bv-ih-fav[aria-busy="true"] {
  cursor: progress;
}

.bv-ih-fav__icon {
  pointer-events: none;
}

/* The portrait sheet's `button { min-height: 40px }` rule out-ranks a bare class rule; restate the
   (larger, touch-sized) star box anchored on #sliderContent, as the Quick Access tiles do. */
#app-studio[data-bv-mode="portrait"] #sliderContent .bv-ih-fav {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

/* ── loading / empty / error ──────────────────────────────────────────────────── */
.bv-ih-status {
  margin-top: 10px;
}

.bv-ih-status--loading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bv-ih-skeleton {
  display: block;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f3f4f6 0%, #e9ebef 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: bvIhShimmer 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bv-ih-skeleton {
    animation: none;
  }
}

@keyframes bvIhShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.bv-ih-status__text {
  margin: 0 2px 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #4b5563;
}

.bv-ih-status--error .bv-ih-status__text {
  color: #b3261e;
}

/* Phase 3: the compact Recent empty state — one line of status, one quieter line of guidance.
   Phase 4B: the Favorites empty state uses the same shape. */
.bv-ih-recent-empty .bv-ih-status__text,
.bv-ih-favorites-empty .bv-ih-status__text {
  margin-bottom: 2px;
  font-weight: 600;
  color: #374151;
}

.bv-ih-status__hint {
  margin: 0 2px 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}

.bv-ih-text-btn {
  padding: 4px 8px;
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2933;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.bv-ih-text-btn:hover {
  border-color: var(--bv-accent-border, #fbd3b8);
  background: var(--bv-accent-soft, #fff4ec);
}

/* ── sub-header (below the shared search field) ───────────────────────────────── */
.bv-ih-subheader {
  padding: 0 0 6px;
}

.bv-ih-select {
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2933;
  font-size: 12.5px;
  cursor: pointer;
}

.bv-ih-scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

#app-studio[data-bv-mode="portrait"] #sliderContent .bv-ih-row,
#app-studio[data-bv-mode="portrait"] .bv-ih-select {
  min-height: 44px;
}

/* ── search clear (inline, right side of the shared search field) ─────────────── */
/* The anchor is a zero-height box inserted just before `#searchIconsInput`; the button overlays the
   field's right edge. Height follows the field (set from its measured height by the controller). */
.bv-ih-clear-anchor {
  position: relative;
  height: 0;
}

.bv-ih-clear-anchor[hidden] {
  display: none;
}

#sliderContainer:not(:has(> #sliderContent > .bv-iconhub)) .bv-ih-clear-anchor {
  display: none;
}

.bv-ih-clear {
  position: absolute;
  top: 0;
  right: 2px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: var(--bv-ih-search-h, 30px);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8b939d;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.bv-ih-clear:hover {
  color: var(--bv-accent, #c2410c);
  background: var(--bv-accent-soft, #fff4ec);
}

.bv-ih-clear:focus-visible {
  outline: 2px solid var(--bv-accent-bright, #f97316);
  outline-offset: -2px;
  color: var(--bv-accent, #c2410c);
}

/* Room for the clear control, so typed text never runs underneath it. */
#searchIconsInput.bv-ih-has-clear {
  padding-right: 34px;
}

#app-studio[data-bv-mode="portrait"] .bv-ih-clear {
  width: 44px;
}

#app-studio[data-bv-mode="portrait"] #searchIconsInput.bv-ih-has-clear {
  padding-right: 48px;
}