@layer tokens, legacy, components, adapter, responsive, utilities;

@import url("./styles/foundation-tokens.css") layer(tokens);
@import url("./styles/ui-tokens.css") layer(tokens);
@import url("./styles/panel-palette.css") layer(tokens);
@import url("./superadmin.css") layer(legacy);
@import url("./styles/ui-components.css") layer(components);
@import url("./styles/adapters/superadmin.css") layer(adapter);
@import url("./styles/ui-responsive.css") layer(responsive);
@import url("./scrollbars.css") layer(utilities);

@layer utilities {
  :where(.table-scroll, [data-collection-strategy]) {
    --collection-gutter-inline: var(--ui-collection-gutter-inline);
    --collection-gutter-block: var(--ui-collection-gutter-block);
  }

  :where(html, body, .app, .main, .page-section) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  :where(.topbar, .page-heading, .data-card__head) {
    gap: clamp(var(--ui-space-3), 2vw, var(--ui-space-5));
  }

  .topbar {
    background: var(--ui-paper);
    backdrop-filter: none;
    border-end-start-radius: var(--ui-radius-lg);
    border-end-end-radius: var(--ui-radius-lg);
  }

  :where(.topbar__heading, .page-heading > *, .data-card__head > *) {
    min-inline-size: 0;
  }

  :where(.topbar h1, .page-heading h2, .data-card h3, .data-card h4,
    .dialog-heading h2, .dialog-heading h3) {
    font-style: normal;
    text-wrap: balance;
  }

  :where(.data-card, .metric-card, .analytics-card, .site-settings-card,
    .site-faq-card, .auth-card) {
    min-inline-size: 0;
    border-color: var(--ui-line);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-resting);
    border-radius: var(--ui-radius-lg);
  }

  :where(input, select, textarea, .button, .btn, .status-badge, .session-status,
    .operator-badge, .user-badge) {
    border-radius: var(--ui-radius-sm);
  }

  :where(.filter-chip, .pill, .godmode-pill) {
    border-radius: var(--ui-radius-pill);
  }

  .filter-block {
    display: grid;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: color-mix(in srgb, var(--ui-surface) 88%, var(--ui-surface-muted));
  }

  .filter-fieldset {
    display: grid;
    gap: var(--ui-space-2);
    padding: 0;
    border: 0;
  }

  .filter-fieldset legend {
    margin-block-end: var(--ui-space-2);
    color: var(--ui-ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  :where(.dialog-card, dialog, .drawer, .detail-card, .audit-detail) {
    border-radius: var(--ui-radius-lg);
  }

  :where(.dialog-card, dialog) :where(.form-grid, .form-stack) {
    gap: var(--ui-space-5);
  }

  :where(.dialog-card, dialog) .field {
    display: grid;
    align-content: start;
    gap: var(--ui-space-2);
  }

  :where(.data-card, .analytics-card, .site-settings-card, .site-faq-card) {
    padding: clamp(var(--ui-space-4), 2.4vw, var(--ui-space-6));
  }

  /* S5c (MRR hero): the four count cards share a row and the MRR card (.stats__accent, the last one) takes the next row
     whole as the overview's hero metric. The grid is its own query container, so the columns follow the overview width with
     or without the sidebar: four per row, then two, then one. */
  .stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ui-space-4);
    container-type: inline-size;
  }

  .stats > .stats__accent {
    grid-column: 1 / -1;
  }

  @container (max-width: 48rem) {
    .stats > article {
      grid-column: span 2;
    }
  }

  @container (max-width: 26rem) {
    .stats > article {
      grid-column: 1 / -1;
    }
  }

  .filter-block--form:not([data-filter-toolbar-scope]),
  :where(.form-grid, .form-stack) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--ui-space-4);
    align-items: end;
    min-inline-size: 0;
  }

  :where(.filter-block, .filter-fieldset, .filter-row, .filter-actions,
    .field, .field > *, .form-grid > *, .form-stack > *) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  :where(input, select, textarea) {
    max-inline-size: 100%;
  }

  :where(.button, .btn, .menu-button, .sidebar-close, .nav-link, .filter-chip,
    .text-button, button:not([hidden]), [role="button"]:not([hidden])) {
    min-block-size: var(--ui-target-min);
    transition: transform var(--ui-duration-fast) ease,
      color var(--ui-duration-fast) ease,
      background-color var(--ui-duration-fast) ease,
      border-color var(--ui-duration-fast) ease,
      box-shadow var(--ui-duration-fast) ease;
  }

  :where(.button, .btn, .menu-button, .sidebar-close, .nav-link, .filter-chip,
    .text-button, button, input, select, textarea, [role="button"]):focus-visible {
    outline: var(--ui-focus-size) solid var(--ui-focus-color);
    outline-offset: 3px;
  }

  :where(.button, .btn, .menu-button, .sidebar-close, .nav-link, .filter-chip,
    .text-button, button:not(:disabled), [role="button"]):active {
    transform: scale(.96);
  }

  :where([aria-busy="true"], [data-state="loading"]) {
    border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-line));
  }

  /* T5b (gui-panels-alignment, item 6): `.message` is already a symmetric 999px pill with its
     own border/color voice (superadmin.css, incl. the .is-success variant); this generic alert
     accent used to also match it, adding a lopsided 4px start border AND forcing the danger
     color/background over .is-success (utilities beats legacy regardless of specificity).
     Excluding .message leaves the other role="alert" consumers (.field-message, the platform
     funnel error state) on the accent unchanged. Judgment-day correction (F7): the always
     non-empty #busy overlay (.busy) is excluded too; the accent turned its dark legacy backdrop
     into an opaque pale sheet with an invisible white spinner. */
  :where([role="alert"]:not(.message):not(.busy):not(:empty), .field-error:not(:empty), .message--error) {
    border-inline-start: 4px solid var(--ui-danger);
    background: color-mix(in srgb, var(--ui-danger) 7%, var(--ui-surface));
    color: var(--ui-danger);
  }

  :where(.empty-state, .table-empty, .filter-row:empty, tbody:empty) {
    min-block-size: 4.5rem;
    padding: var(--ui-space-5);
    border: 1px dashed var(--ui-line-strong);
    background: var(--ui-surface-muted);
    color: var(--ui-ink-muted);
  }

  .table-scroll {
    max-inline-size: 100%;
    overscroll-behavior-inline: contain;
  }

  .sidebar__nav {
    display: grid;
    gap: var(--ui-space-1);
  }

  @media (max-width: 56rem) {
    .topbar {
      flex-wrap: wrap;
      align-items: center;
    }

    .topbar__heading {
      flex: 1 1 12rem;
    }

    :where(.operator-badge, .session-status) {
      min-inline-size: 0;
    }
  }

  @media (max-width: 30rem) {
    html,
    body,
    .app,
    .main,
    .page-section {
      inline-size: 100%;
      overflow-x: clip;
    }

    .main {
      padding-inline: clamp(var(--ui-space-3), 4vw, var(--ui-space-4));
    }

    .sidebar {
      inline-size: min(19rem, calc(100vw - var(--ui-space-4)));
      max-inline-size: calc(100vw - var(--ui-space-4));
    }

    .topbar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "menu heading session";
      padding-inline: var(--ui-space-3);
    }

    .topbar__heading {
      grid-area: heading;
    }

    .session-status {
      grid-area: session;
    }

    .operator-badge {
      display: none;
    }

    .filter-block--form:not([data-filter-toolbar-scope]),
    :where(.form-grid, .form-stack) {
      grid-template-columns: minmax(0, 1fr);
    }

    .filter-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    .filter-actions > * {
      inline-size: 100%;
    }

    .table-scroll {
      overflow-x: clip;
    }
  }
}

.platform-support-unread {
  align-self: flex-start;
  margin-top: .25rem;
}

.platform-support-new-messages {
  position: sticky;
  bottom: .5rem;
  z-index: 1;
  margin-inline: auto;
  min-height: 44px;
}

/* S6 (user review 19.10, item 1): scrollbars.css's `*::-webkit-scrollbar` lives in the `utilities` layer (declared
   last in @layer tokens, legacy, components, adapter, responsive, utilities), so it beats
   .filter-toolbar__track::-webkit-scrollbar { display: none } (styles/ui-components.css, the earlier `components`
   layer) regardless of selector specificity, and the audit filter toolbar's native scrollbar renders over the chip
   row. This is unlayered on purpose (matching the .platform-support-unread/-new-messages rules above): unlayered
   content always wins over every cascade layer, including `utilities`. */
[data-filter-toolbar-track] {
  scrollbar-width: none;
}

[data-filter-toolbar-track]::-webkit-scrollbar {
  display: none;
}

@layer utilities {
  /* Keep every operational form on the same premium component language as the tenant panel. */
  :where(.data-card, .form-card, .summary-card, .metric-card, .filter-group) {
    border-radius: var(--ui-radius-lg);
  }

  :where(.data-card, .form-card) :where(input, select, textarea) {
    border-radius: var(--ui-radius-sm);
  }
}

@layer utilities {
  /* Operational modules keep one clear surface instead of nested padded frames. */
  :where(#accounts-section, #inbox-section, #audit-section) > .data-card {
    padding: 0;
    overflow: clip;
  }

  :where(#accounts-section, #inbox-section, #audit-section) .filter-block {
    margin: 0;
    border: 0;
    border-block-end: 1px solid var(--ui-line);
    border-radius: 0;
    background: color-mix(in srgb, var(--ui-surface-muted) 72%, var(--ui-surface));
  }

  :where(#accounts-section, #inbox-section, #audit-section) .section-status:not(:empty) {
    margin: var(--ui-space-3) var(--ui-space-4) 0;
    padding: var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-muted);
  }

  .console-table--audit .audit-summary {
    display: block;
    max-inline-size: 30rem;
    color: var(--ui-ink-muted);
    font-size: .74rem;
    line-height: 1.45;
  }

  :where(#accounts-section, #inbox-section, #audit-section) .table-foot:has(> [hidden]:only-child) {
    display: none;
  }
}

@layer utilities {
  .page-section > :where(.page-heading, .stats, .data-card, .analytics-card, .site-settings-card, .site-faq-card, .filter-block) +
  :where(.stats, .data-card, .analytics-card, .site-settings-card, .site-faq-card, .filter-block) {
    margin-block-start: clamp(var(--ui-space-5), 3vw, var(--ui-space-7));
  }

  :where(.data-card, .analytics-card, .site-settings-card, .site-faq-card) > :where(header, .data-card__head) {
    margin-block-end: var(--ui-space-5);
    padding-block-end: var(--ui-space-4);
    border-block-end: 1px solid var(--ui-line);
  }

  :where(.filter-block, .data-card, .analytics-card, .site-settings-card, .site-faq-card) {
    overflow: clip;
  }

  .filter-block :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, button),
  .data-card :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, button) {
    min-block-size: 44px;
  }

  .table-scroll {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
  }

  @media (max-width: 40rem) {
    :where(.data-card, .analytics-card, .site-settings-card, .site-faq-card, .filter-block) {
      padding: var(--ui-space-4);
    }
  }
}

@layer utilities {
  /* R7-D: shared settings rhythm for governed configuration forms. */
  .analytics-grid {
    grid-template-columns: minmax(20rem, 0.85fr) minmax(26rem, 1.15fr);
    gap: clamp(var(--ui-space-4), 2vw, var(--ui-space-6));
  }

  .analytics-readiness {
    grid-column: 1 / -1;
  }

  /* S5b (F-measurement-grid): a zero-minimum field track next to the 14rem toggle card squeezed the field to 24-67px between
     ~1121 and ~1600px; every track now keeps a floor and the card wraps under the field instead. */
  .settings-grid--measurement {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  /* S5b (F-measurement-grid, same cause): the 12rem + 18rem tracks outgrew the consent fieldset at desktop widths and pushed
     the wide explanation field past the card; the tracks now wrap instead. */
  .settings-grid--consent-copy {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  .settings-grid--consent-actions,
  .settings-grid--contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-form > .message:not(:empty) {
    min-block-size: auto;
    margin-inline: var(--ui-space-5);
    padding: var(--ui-space-3);
    border: 1px solid currentColor;
    border-radius: var(--ui-radius-sm);
    background: color-mix(in srgb, currentColor 6%, var(--ui-surface));
  }

  .switch-field > input[type="checkbox"] {
    inline-size: 1.25rem;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    min-block-size: 1.25rem;
    margin: 0;
    padding: 0;
    flex: 0 0 1.25rem;
    accent-color: var(--ui-accent-strong);
  }

  .site-settings-grid {
    grid-template-columns: minmax(26rem, 0.95fr) minmax(24rem, 1.05fr);
    gap: clamp(var(--ui-space-4), 2vw, var(--ui-space-6));
  }

  .search-visibility-setting {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    align-items: stretch;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .search-visibility-setting__control {
    justify-content: flex-start;
    padding-block-start: var(--ui-space-3);
    border-block-start: 0;
  }

  .operations-toolbar__note,
  #audit-filter-message {
    margin-inline: var(--ui-space-4);
  }

  @media (min-width: 56.01rem) {
    .filter-toolbar:has(> .filter-row--accounts) {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .filter-toolbar:has(> .filter-row--accounts) > .filter-toolbar__arrow {
      display: none !important;
    }

    .filter-row--accounts.filter-toolbar__track {
      flex-wrap: wrap !important;
      overflow: visible;
      scroll-snap-type: none;
    }

    /* T4 (gui-panels-alignment): the audit toolbar (compound scope, plain .filter-row) never
       received this desktop wrap exception, so it stayed in mobile-carousel mode at every
       width with the sticky "Limpiar vista" action riding over the chips. Same proven
       pattern, scoped to the one audit form; the sticky/carousel contract below 56.01rem
       stays untouched. Unlike the accounts rows, the compound track nests its chips inside
       a fieldset, so the fieldset and its inner row must wrap too. The track's own
       flex-wrap override lives in the @layer components block at the end of this file
       (important declarations resolve in reverse layer order, so a utilities !important
       cannot beat the components-layer nowrap !important). */
    #audit-filter-form.filter-toolbar {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    #audit-filter-form.filter-toolbar > .filter-toolbar__arrow {
      display: none !important;
    }

    #audit-filter-form [data-filter-toolbar-track].filter-toolbar__track {
      align-items: center;
      overflow: visible;
      scroll-snap-type: none;
    }

    #audit-filter-form .filter-toolbar__track > .filter-fieldset {
      flex: 1 1 100%;
      min-inline-size: 0;
    }

    #audit-filter-form .filter-fieldset .filter-row {
      flex-wrap: wrap;
      inline-size: auto;
      max-inline-size: 100%;
    }

    #audit-filter-form .filter-toolbar__track > .filter-toolbar__actions {
      position: static;
      border-inline-start: 0;
      padding-inline-start: 0;
      background: transparent;
    }
  }

  @media (max-width: 70rem) {
    .analytics-grid,
    .site-settings-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .settings-grid--measurement,
    .settings-grid--consent-copy,
    .settings-grid--consent-actions,
    .settings-grid--contact,
    .search-visibility-setting {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 48rem) {
    .settings-form > .message:not(:empty) {
      margin-inline: var(--ui-space-3);
    }

    table[data-ui-adaptive-table="true"] tbody {
      gap: var(--ui-space-4);
      padding: var(--ui-space-3);
      background: var(--ui-surface-muted);
    }

    table[data-ui-adaptive-table="true"] tr {
      border-radius: var(--ui-radius-lg);
      box-shadow: var(--ui-shadow-resting);
    }

    table[data-ui-adaptive-table="true"] td:first-child {
      border-block-start: 0;
    }
  }
}

/* T4 (gui-panels-alignment): important declarations resolve in REVERSE layer order, so the
   components-layer `.filter-toolbar__track { flex-wrap: nowrap !important }` cannot be beaten
   from @layer utilities. Reopening the components layer puts this override in the same layer,
   where the id-scoped selector wins on specificity. Desktop-only, audit toolbar only. */
@layer components {
  @media (min-width: 56.01rem) {
    #audit-filter-form [data-filter-toolbar-track].filter-toolbar__track {
      flex-wrap: wrap !important;
    }

    /* T5c (gui-panels-alignment): the S6 accounts wrap at line ~467 ships the same
       utilities-layer `flex-wrap: wrap !important` that T4 proved inert (important
       resolves in reverse layer order, so the components nowrap !important always won
       and the Cuentas chip rows stayed nowrap at desktop since S6). Same cure: same
       layer, two-class specificity beats the single-class nowrap. */
    .filter-row--accounts.filter-toolbar__track {
      flex-wrap: wrap !important;
    }
  }
}

@layer utilities {
  /* T5a (gui-panels-alignment, item 2): the boxed form message joins the card's single gutter like every
     other child. The shared `.settings-form > .message` inset above predates the de-doubled cards and
     lives in this same utilities layer, so the adapter-layer zeroing cannot reach it; equal specificity,
     later source order wins, at every width (covers the 48rem variant too). */
  :where(#analytics-section, #site-section) .settings-form > .message:not(:empty) {
    margin-inline: 0;
  }
}

@layer utilities {
  /* T5b (gui-panels-alignment, item 10): one field rhythm superadmin-wide. Dialogs already sit
     on --ui-space-2 (line ~95); the legacy page voice (.field, 6px) and the compact inline
     variant (.field--inline, 5px) join it here. Real class selectors in this later layer beat
     both legacy-layer declarations regardless of specificity -- layer order always wins. */
  .field {
    gap: var(--ui-space-2);
  }
}