/* ================================================================
   Icons pattern — Material Symbols Outlined (curated)
   ================================================================
   Förutsätter att tokens-filen, fonts/pattern.css och
   typography-scale/pattern.css är laddade. Material Symbols-fonten
   laddas i index.html (preview-only, samma som övriga patterns).
================================================================ */

/* Search bar */
.icon-search {
  display: flex;
  align-items: center;
  gap: var(--spc-04);
  padding: var(--spc-04) var(--spc-05);
  background: var(--background-secondary);
  border-radius: var(--shp-md);
}

.icon-search__icon {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--content-tertiary);
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--type-family-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--content-primary);
  outline: none;
  padding: 0;
  min-width: 0;
}

.icon-search__input::placeholder {
  color: var(--content-tertiary);
}

/* Hide the default WebKit search clear button — it visually clashes */
.icon-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.icon-search__count {
  font-family: var(--type-family-code);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-tertiary);
  white-space: nowrap;
}

/* Size-toggle — segmented control för 24 / 48 px ikon-rendering */
.icon-size-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--background-tertiary);
  border-radius: var(--shp-sm);
}

.icon-size-toggle__btn {
  border: none;
  background: transparent;
  color: var(--content-tertiary);
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  padding: var(--spc-03) var(--spc-04);
  border-radius: calc(var(--shp-sm) - 2px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.icon-size-toggle__btn:hover {
  color: var(--content-primary);
}

.icon-size-toggle__btn[aria-pressed="true"] {
  background: var(--background-secondary);
  color: var(--content-primary);
}

.icon-size-toggle__btn:focus-visible {
  outline: var(--spacing-outline-focus-width) solid var(--content-primary);
  outline-offset: var(--spacing-outline-focus-offset);
}

/* Groups (rendered by JS) */
.icon-groups {
  display: flex;
  flex-direction: column;
  gap: var(--spc-08);
  margin-top: var(--spc-08);
}

.icon-group {
  display: flex;
  flex-direction: column;
  gap: var(--spc-05);
}

.icon-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spc-04);
  padding-bottom: var(--spc-03);
  border-bottom: 1px solid var(--border-tertiary);
}

.icon-group__title {
  margin: 0;
  color: var(--content-primary);
}

.icon-group__count {
  font-family: var(--type-family-code);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-tertiary);
  white-space: nowrap;
}

.icon-group--empty {
  display: none;
}

/* Prose-not — för dolda asset-paket (flaggor) som inte renderas som kort.
   Visas som en informativ panel under de aktuella grupperna. */
.icon-group--note .icon-group__note {
  margin: 0;
  padding: var(--spc-05) var(--spc-06);
  background: var(--background-secondary);
  border-radius: var(--shp-md);
  font-family: var(--type-family-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--content-tertiary);
}

.icon-group--note .icon-group__note strong {
  color: var(--content-primary);
  font-weight: 700;
}

.icon-group--note .icon-group__note code {
  font-family: var(--type-family-code);
  background: var(--background-tertiary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--shp-xs);
  color: var(--content-primary);
  font-size: 0.8125rem;
}

/* Card grid */
.icon-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--spc-03);
}

/* Korten i 48 px-läget får mer luft så glyfen får andas */
.icon-card-grid--48 {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.icon-card-grid--48 .icon-card {
  padding: var(--spc-07) var(--spc-04);
}

.icon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spc-03);
  padding: var(--spc-05) var(--spc-03);
  background: var(--background-secondary);
  border-radius: var(--shp-sm);
  border: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.icon-card:hover {
  background: var(--background-tertiary);
}

.icon-card:active {
  transform: translateY(1px);
}

.icon-card:focus-visible {
  outline: var(--spacing-outline-focus-width) solid var(--content-primary);
  outline-offset: var(--spacing-outline-focus-offset);
}

/* SVG (default) — hostas på cdn.futur.se i två varianter: 24 px (UI) och
   48 px (illustrativt). JS swappar mask-URL vid storleksbyte. */
.icon-card__svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Mask-rendering för material+custom: SVG:n används som silhuett-stencil,
   bakgrundsfärgen kommer från --content-primary så ikonerna themar
   automatiskt (svart i light, off-white i dark). SVG-filerna själva
   behöver inte rewrite:as.

   mask-image (URL:en) deklareras INTE här — det sker i icon-urls.css
   (genererad fil) där både url-deklaration och mask-image-konsumtion
   ligger i samma stylesheet. Det löser cross-file url()-resolution-
   problemet i Chrome/Safari. Vi äger bara de mask-friendly properties
   som inte beror på URL (background-color, mask-size, etc.). */
.icon-card__svg--mask {
  background-color: var(--content-primary);
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

.icon-card-grid--48 .icon-card__svg {
  width: 48px;
  height: 48px;
}

/* Full-color custom-ikoner (futur_default) — bevara originalfärger.
   Renderas som <img> så CSS mask inte appliceras. */
.icon-card__svg--full-color {
  background: transparent;
}

/* Flat grid (single-size, wide-format) — flaggor i 20×15.
   Tightare grid eftersom korten är bredare per höjd. Flagg-SVG:erna
   är full-color och renderas som <img> (inte mask) för att bevara färg. */
.icon-card-grid--flat {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.icon-card--flat {
  padding: var(--spc-04) var(--spc-03);
}

.icon-card--flat .icon-card__svg {
  width: 40px;
  height: 30px;
  /* 20×15 native — render i 2× för crispness på retina utan att skala upp glyfen */
}

/* Font-fallback — visas av onerror-handler om SVG 404:ar.
   Ligature-syntax via Material Symbols Outlined (self-hosted, Google fallback). */
.icon-card__symbol--fallback {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--content-primary);
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-card-grid--48 .icon-card__symbol--fallback {
  font-size: 48px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.icon-card__name {
  font-family: var(--type-family-code);
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--content-tertiary);
  word-break: break-all;
  user-select: text;
}

/* Display-label för custom-ikoner med land/symbol (ex. flaggor, futur-brand).
   Visas under ikon-namnet med snabb visuell hierarki. */
.icon-card__label {
  font-family: var(--type-family-body);
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--content-primary);
  word-break: break-word;
}

/* Missing-glyf: custom-ikoner som 404:ar (ingen font-fallback).
   Visas som dämpad ikon-symbol i samma rute som SVG. */
.icon-card__symbol--missing {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--content-tertiary);
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  opacity: 0.4;
}

.icon-card-grid--48 .icon-card__symbol--missing {
  font-size: 48px;
}

.icon-card__copied {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spc-02);
  background: var(--background-tertiary);
  border-radius: var(--shp-sm);
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--content-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.icon-card__copied::before {
  content: 'check';
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}

.icon-card--copied .icon-card__copied {
  opacity: 1;
}

/* Empty state */
.icon-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--spc-04);
  padding: var(--spc-08);
  margin-top: var(--spc-08);
  text-align: center;
  background: var(--background-secondary);
  border-radius: var(--shp-md);
  color: var(--content-tertiary);
}

.icon-empty-state--visible {
  display: flex;
}

.icon-empty-state__icon {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--content-tertiary);
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}

.icon-empty-state__text {
  margin: 0;
  font-family: var(--type-family-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--content-tertiary);
}

.icon-empty-state__text code {
  font-family: var(--type-family-code);
  background: var(--background-tertiary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--shp-xs);
  color: var(--content-primary);
}

/* Smal viewport: tightare cards så fler får plats per rad */
@media (max-width: 600px) {
  .icon-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--spc-02);
  }
  .icon-card-grid--48 {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .icon-card {
    padding: var(--spc-04) var(--spc-02);
    gap: var(--spc-02);
  }
  .icon-card-grid--48 .icon-card {
    padding: var(--spc-05) var(--spc-03);
  }
  .icon-card__name { font-size: 0.625rem; }
}