/* SimpleWill — Modern Legist
 * Component atoms and shared utilities.
 * Tailwind v4 tokens live in app/assets/tailwind/application.css.
 * Material Symbols font is loaded via <link> in layouts/application.html.erb.
 */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2
           font-sans text-sm font-medium
           rounded-md px-4 py-2.5
           transition-colors duration-150
           cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary   { @apply bg-navy text-on-navy hover:bg-navy-soft; }
  .btn-secondary { @apply bg-teal-soft text-teal hover:bg-teal hover:text-on-teal; }
  .btn-ghost     { @apply bg-transparent text-navy hover:bg-surface-container-low; }
  .btn-danger    { @apply bg-danger text-white hover:opacity-90; }

  .field-label {
    @apply block text-sm font-medium text-navy mb-1.5;
  }
  .field-input {
    @apply w-full bg-surface-container-low text-ink
           border-0 border-b border-outline-variant
           rounded-none px-3 py-2.5
           placeholder:text-ink-placeholder
           focus:outline-none focus:border-navy
           transition-colors;
  }
  .field-help  { @apply mt-1.5 text-xs text-ink-muted; }
  .field-error { @apply mt-1.5 text-xs text-danger; }
  .field-input-error {
    @apply border-danger focus:border-danger;
  }

  .card          { @apply bg-surface-container-lowest rounded-lg p-8; }
  .card-elevated { @apply bg-surface-container-lowest rounded-lg p-8
                          shadow-[0px_20px_40px_rgba(26,35,61,0.06)]; }

  .badge {
    @apply inline-flex items-center px-2.5 py-1
           rounded-md text-xs font-medium;
  }
  .badge-draft   { @apply bg-surface-container-high text-ink-muted; }
  .badge-review  { @apply bg-navy/10 text-navy; }
  .badge-final   { @apply bg-teal-soft text-teal; }
  .badge-warning { @apply bg-plum/10 text-plum; }
  .badge-danger  { @apply bg-danger-soft text-danger; }

  .progress-rail      { @apply h-1 bg-surface-container-high rounded-full overflow-hidden; }
  .progress-rail-fill { @apply h-full bg-teal transition-all duration-300; }

  .btn-sm {
    @apply px-3 py-1 text-xs;
  }

  .pull-quote {
    @apply font-serif font-medium text-4xl md:text-5xl
           text-navy tracking-tight leading-tight
           max-w-[20ch] my-6;
  }

  .section-rule {
    @apply block border-0 border-t border-outline-variant
           my-12 md:my-16 w-full;
  }

  .step-ordinal {
    @apply font-serif font-medium text-6xl md:text-7xl
           text-navy/40 tracking-tight leading-none;
  }

  .eyebrow {
    @apply inline-block font-sans font-medium text-xs
           tracking-wider text-ink-muted mb-3;
  }

  .callout {
    @apply block bg-surface-container-lowest rounded-r-lg
           border-l-[3px] border-plum
           p-4 text-sm text-ink;
  }

  /* ------------------------------------------------------------------ */
  /* Interview-engine atoms (Slice 3b)                                  */
  /* ------------------------------------------------------------------ */

  /* Chip — replaces peer+sr-only radio/checkbox styled-span pattern.
     The hidden input uses .sr-only; the .chip span is styled via
     :has(input:checked) + utility modifiers. */
  .chip-group {
    @apply mt-2 flex flex-wrap gap-2;
  }
  .chip {
    @apply inline-flex items-center justify-center
           px-4 py-2 rounded-md
           bg-surface-container-lowest text-ink
           border border-outline-variant
           text-sm font-medium
           cursor-pointer transition-colors
           hover:bg-surface-container-low;
  }
  .chip-selected {
    @apply bg-teal text-on-teal border-teal;
  }
  .chip-disabled {
    @apply bg-surface-container-high text-ink-placeholder
           cursor-not-allowed opacity-60;
  }

  /* Save status — single quiet line in the page header.  Three states. */
  .save-status {
    @apply inline-flex items-center gap-2
           text-xs font-sans text-ink-muted
           transition-opacity;
    min-height: 1.25rem;
  }
  .save-status::before {
    content: "";
    @apply inline-block w-1.5 h-1.5 rounded-full bg-ink-muted;
  }
  .save-status-saved::before   { @apply bg-teal; }
  .save-status-saving::before  { @apply bg-navy animate-pulse; }
  .save-status-error           { @apply text-danger; }
  .save-status-error::before   { @apply bg-danger; }

  /* Step marks — 8 dots on the progress rail. */
  .step-mark {
    @apply inline-block w-3 h-3 rounded-full
           border-2 bg-paper
           transition-colors;
  }
  .step-mark-done      { @apply bg-teal border-teal; }
  .step-mark-current   { @apply bg-paper border-navy ring-2 ring-navy/20; }
  .step-mark-upcoming  { @apply bg-paper border-outline-variant; }

  /* Step labels — Inter caption under each mark.  Hidden on mobile. */
  .step-label {
    @apply hidden md:block text-xs font-sans text-ink-muted
           tracking-wide text-center mt-2
           whitespace-nowrap overflow-hidden text-ellipsis;
  }
  .step-label-current {
    @apply text-navy font-semibold;
  }

  /* Person tile — representative picker. */
  .person-tile {
    @apply block w-full text-left
           bg-surface-container-lowest
           border border-outline-variant
           rounded-md px-4 py-3
           cursor-pointer transition-colors
           hover:bg-surface-container-low;
  }
  .person-tile-selected {
    @apply border-l-4 border-l-teal bg-teal-soft/40;
  }
  .person-tile-disabled {
    @apply cursor-not-allowed opacity-60
           hover:bg-surface-container-lowest;
  }
  .person-tile-add {
    @apply border-2 border-dashed border-outline-variant
           text-ink-muted text-center font-medium
           hover:border-navy hover:text-navy hover:bg-surface-container-lowest;
  }

  /* Field group — shared label/control/error wrapper for interview fields. */
  .field-group {
    @apply block;
  }

  /* Divide stacked questions within a section so Yes/No groups don't blur together. */
  .field-group + .field-group {
    @apply mt-6 pt-6 border-t border-outline-variant;
  }

  /* Data-dense table chrome — first caller is attorney queue; admin
     firms/users tables are the next consumer (Slice 6). */
  .data-table              { @apply w-full text-sm text-ink; }
  .data-table thead tr     { @apply border-b border-outline-variant/40; }
  .data-table th           { @apply text-left px-4 py-3 text-xs font-normal text-ink-muted; }
  .data-table tbody tr     { @apply border-b border-outline-variant/20; }
  .data-table tbody tr:last-child { @apply border-b-0; }
  .data-table tbody tr:hover      { @apply bg-surface-container-low; }
  .data-table td           { @apply px-4 py-3.5; }

  /* Field-row grid: label/input on the left (1fr), saved-indicator on the
     right (fixed 160px). Prevents layout shift as indicator states change. */
  .field-row {
    @apply grid grid-cols-[1fr_160px] gap-6 items-center
           px-3 py-2.5 rounded
           hover:bg-surface-container-low transition-colors;
  }

  /* Saved-indicator state carriers. Colors come from existing design
     tokens; these classes add the icon+text+transition baseline. */
  .saved-indicator         { @apply inline-flex items-center gap-1 text-xs transition-opacity; }
  .saved-indicator-saving  { @apply text-ink-muted; }
  .saved-indicator-fresh   { @apply text-teal; }
  .saved-indicator-muted   { @apply text-ink-muted; }
  .saved-indicator-error   { @apply text-danger cursor-pointer hover:underline underline-offset-4; }

  /* Quiet Modern Legist link — already used inline in /login and the
     client portal; formalized here for consistent reuse. */
  .link-quiet {
    @apply text-navy underline underline-offset-4
           decoration-outline-variant
           hover:text-navy-soft hover:decoration-navy
           transition-colors;
  }

  /* ------------------------------------------------------------------ */
  /* Admin / superadmin atoms (Slice 6a)                                */
  /* ------------------------------------------------------------------ */

  /* Superadmin chrome pill — sits in _top_nav next to the brand. Two
     variants: static (on chambers) + roaming (on firm subs, clickable). */
  .chrome-pill {
    @apply inline-flex items-center gap-1.5
           px-3 py-1 rounded-full
           bg-surface-container-low text-navy
           border border-outline-variant/40
           text-xs font-medium tracking-wide;
  }
  .chrome-pill-roaming {
    @apply hover:border-navy/60 hover:bg-surface-container
           transition-colors cursor-pointer no-underline;
  }
  .chrome-pill-eyebrow { @apply font-serif text-navy/70; }
  .chrome-pill-dot     { @apply text-ink-muted; }
  .chrome-pill-firm    { @apply font-sans text-navy font-semibold; }

  /* Row-actions menu (kebab) — replaces inline action links in data-tables.
     Panel toggles visibility via the `.is-open` class set by
     row_actions_controller.js. Optional submenu body-swap for "Change role". */
  .row-actions-menu { @apply relative inline-block; }
  .row-actions-menu-trigger {
    @apply inline-flex items-center justify-center
           w-8 h-8 rounded-md
           text-ink-muted hover:text-navy
           hover:bg-surface-container-low
           bg-transparent border-0 cursor-pointer
           transition-colors;
  }
  .row-actions-menu-panel {
    @apply hidden absolute right-0 mt-1 z-20
           min-w-[200px] py-1
           bg-surface-container-lowest rounded-md
           border border-outline-variant/40
           shadow-[0px_8px_24px_rgba(26,35,61,0.12)];
  }
  .row-actions-menu-panel.is-open { @apply block; }
  .row-actions-menu-item {
    @apply block w-full text-left
           px-4 py-2 text-sm text-ink
           bg-transparent border-0 cursor-pointer no-underline
           hover:bg-surface-container-low hover:text-navy
           transition-colors;
  }
  .row-actions-menu-item-danger {
    @apply text-danger hover:text-danger hover:bg-danger/10;
  }
  .row-actions-menu-section-title {
    @apply block px-4 py-1.5 text-xs tracking-wide
           text-ink-muted uppercase;
  }

  /* Chip — removable variant (extends existing .chip). Used for licensed
     states on admin/firms/show. The base .chip atom is reused verbatim. */
  .chip-removable { @apply pr-2 gap-2; }
  .chip-remove {
    @apply inline-flex items-center justify-center
           w-5 h-5 rounded-full
           text-ink-muted hover:text-danger hover:bg-danger/10
           bg-transparent border-0 cursor-pointer
           transition-colors;
  }

  /* Page-level danger alert — promoted from inline flash styling. */
  .alert-danger {
    @apply block px-4 py-3 rounded-md
           bg-danger-soft text-danger
           border border-danger/30
           text-sm;
  }
}