/* =========================================================
   DNUV Design System — Buttons (W3-a / U2 consolidation)
   ---------------------------------------------------------
   This stylesheet consolidates the button system per the
   U-Wave U2 audit (docs/ROADMAP-v2-kit-direct.md § U2):

     P0-U2-01  .btn-danger dual definition → outlined canonical,
               .btn-danger.solid for filled variant
     P0-U2-02  :focus-visible across ALL button families
               (WCAG 2.4.7 AA fix)
     P0-U2-03  .btn-icon vs .icon-btn fork → .btn-icon
               canonical, .btn-icon--on-dark for player scope
     P0-U2-04  Global :disabled visual state
     P0-U2-05  Canonical sizes via tokens (sm 28 / md 36 / lg 44)

   Load order: this file MUST come AFTER index.html's inline
   <style> block so its consolidated rules win. The inline
   rules in index.html that this file replaces have either
   been removed (the duplicate .btn-danger) or remain in
   place harmlessly (the original outlined .btn-danger
   matches this file).
   ========================================================= */

/* ---------- Tokens (button-scoped) ---------- */
:root {
  /* Wave-E (F-BTNH) — ONE canonical control height. These now alias the
     global --control-h* tokens (colors_and_type.css) so buttons, inputs,
     selects, chips and the toolbar period control share a single 36px source
     of truth. The literal fallbacks keep the old values if buttons.css ever
     loads before colors_and_type.css. No more 40/38/36/32/30 drift. */
  --btn-h-sm: var(--control-h-sm, 28px);
  --btn-h:    var(--control-h, 36px);
  --btn-h-lg: var(--control-h-lg, 44px);

  --btn-px-sm: 8px;
  --btn-px:    12px;
  --btn-px-lg: 16px;

  --btn-radius: 10px;
  --btn-radius-sm: 8px;

  --btn-fw:  700;
  --btn-fs:  14px;
  --btn-fs-sm: 13px;
}

/* ---------- Base .btn (consolidates index.html:484) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-2);
  font-family: inherit;
  font-weight: var(--btn-fw);
  font-size: var(--btn-fs);
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform 60ms var(--ease-standard);
}
.btn i { width: 16px; height: 16px; }

/* R296 (W10/U14) — Press feedback. Slightly deeper scale (.97) than the
   prior .98 so the press is felt on dense lists; transition uses --dur-fast
   for the snap-back. transform isn't repeated in the transition list (it's
   already declared on .btn) so the press settles via --ease-standard. */
.btn:active { transform: scale(.97); }

/* Focus-visible outline transition — the ring snap-in is jarring without
   a brief fade. animations.css's global reduced-motion guard caps this. */
.btn:focus-visible {
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* Reduced-motion overrides — kept here as defence in depth even though
   animations.css's global guard covers transitions. Specifically disables
   the .btn:active scale and removes transform from the transition list. */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
  .btn:active { transform: none; }
}

/* ---------- Sizes ---------- */
.btn-sm {
  height: var(--btn-h-sm);
  padding: 0 var(--btn-px-sm);
  font-size: var(--btn-fs-sm);
  border-radius: var(--btn-radius-sm);
  gap: 6px;
}
.btn-sm i { width: 14px; height: 14px; }

.btn-lg {
  height: var(--btn-h-lg);
  padding: 0 var(--btn-px-lg);
  font-size: 15px;
  border-radius: var(--btn-radius);
}

/* ---------- Variants ---------- */

/* Primary — solid royal-bright blue.
   R435 (B5, R3 598) — owner brand decision (Decisões-de-marca #1): the ONE
   primary blue is royal-bright #1d4ed8 (token --btn-primary in
   colors_and_type.css), not the navy --dnuv-blue-dark this rule shipped
   before. "Primary blue" previously had ≥3 values (topbar "+ Novo" lighter
   than navy header CTAs; empty-states/modals alternating navy-dark vs
   royal-bright for the same primary role). Pointing .btn-primary at the
   single token means every primary CTA / empty-state primary / modal confirm
   that uses .btn-primary now renders the identical royal blue. The literal
   fallbacks keep the old navy only if colors_and_type.css somehow fails to
   load (defence in depth — both files always ship together). */
.btn-primary {
  background: var(--btn-primary, #1d4ed8);
  color: var(--btn-primary-fg, #fff);
  border-color: var(--btn-primary, #1d4ed8);
}
.btn-primary:hover { background: var(--btn-primary-hover, #1a43bd); border-color: var(--btn-primary-hover, #1a43bd); }

/* Secondary — soft blue (P1-U2-13 keeps the variant declared) */
.btn-secondary {
  background: var(--dnuv-blue-light);
  color: var(--dnuv-blue-dark);
  border-color: var(--dnuv-blue-light);
}
.btn-secondary:hover { background: var(--dnuv-sky-300); border-color: var(--dnuv-sky-300); }

/* OUTLINED danger — restores the kit author's intent.
   Replaces both index.html:490 (already matches) and the duplicate
   override at index.html:2562 which has been deleted in this PR.
   Wave-E (F-DARK): background is the theme surface token (was a hardcoded
   #fff that rendered a glaring white button on the dark shell). The danger
   text + border already carry dark-safe behaviour, so this only swaps the
   fill to follow the surface (white on light, #1E293B on dark). */
.btn-danger {
  background: var(--bg-surface);
  color: var(--dnuv-danger);
  border-color: var(--dnuv-danger-bg);
}
.btn-danger:hover {
  background: var(--dnuv-danger-bg);
  border-color: var(--dnuv-danger);
  color: var(--dnuv-danger);
}

/* Solid danger — explicit modifier for the rare high-saturation case
   (e.g. the Settings § Danger card "Delete workspace" CTA). */
.btn-danger.solid {
  background: var(--dnuv-danger);
  color: #fff;
  border-color: var(--dnuv-danger);
}
.btn-danger.solid:hover {
  background: #cc3f43;
  border-color: #cc3f43;
  color: #fff;
}

/* Ghost — tertiary outline. We re-declare padding/height here to defeat the
   inline `.btn-ghost { padding:9px 15px }` rule that lives in index.html
   (its source-order precedence would otherwise squish the inner box). */
.btn-ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: var(--border-1);
  padding: 0 var(--btn-px);
  height: var(--btn-h);
}
.btn-ghost:hover {
  /* Wave-E (F-DARK): hover text uses --fg-accent (light = --dnuv-blue-dark,
     byte-identical; dark = bright sky) so the label stays legible on the
     dark-mode sky wash --dnuv-blue-50 now resolves to. */
  background: var(--dnuv-blue-50);
  color: var(--fg-accent);
  border-color: var(--dnuv-blue-200);
}
.btn-ghost.btn-sm {
  padding: 0 var(--btn-px-sm);
  height: var(--btn-h-sm);
}
.btn-ghost.btn-lg {
  padding: 0 var(--btn-px-lg);
  height: var(--btn-h-lg);
}

/* Ghost on dark — single canonical modifier (P1-U2-11 partial).
   Used by player fs-head, settings-savebar, plan-actions, etc.
   Alpha .10 splits the .06/.14 difference per audit recommendation. */
.btn-ghost--on-dark,
.btn-ghost.on-dark {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border-color: rgba(255, 255, 255, .18);
}
.btn-ghost--on-dark:hover,
.btn-ghost.on-dark:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}

/* ---------- R435 (B5, R3 594/595) — canonical retry / refresh ----------
   The SAME "Tentar novamente" shipped in 4 incompatible variants
   (primary-blue solid centred / ghost-outline right-aligned / white outline
   inline / underlined text link) and "Atualizar" (refresh) in 3 weights
   (primary-blue on Plataforma / secondary-outline on Status+Convites /
   icon-only on Analytics+Overview). Standardise via two intent classes the
   per-screen agents (A1–A22) apply on top of `.btn`:

     • `.btn-retry`   — page-level empty/error recovery. PRIMARY royal blue.
                        Use as `class="btn btn-primary btn-retry"` (the
                        .btn-primary carries the royal fill; .btn-retry just
                        documents intent + guarantees the refresh glyph sizes
                        with the label). Never a bare text link, never an
                        arbitrary full-width unless inside .btn-block.
     • `.btn-refresh` — low-emphasis "Atualizar" / inline banner-or-header
                        retry. SECONDARY/OUTLINE (ghost weight). Use as
                        `class="btn btn-ghost btn-sm btn-refresh"`. The sky
                        accent #3CB3FE is an accent/link colour and must NOT
                        be a solid button fill here (R3 597) — the ghost
                        outline keeps it neutral.

   Both are thin add-ons: they don't introduce a new fill (the fill comes from
   the composed .btn-primary / .btn-ghost), they only pin the leading refresh
   icon size + gap so the control reads identically across screens. */
.btn-retry i,
.btn-refresh i { width: 15px; height: 15px; }
.btn-refresh {
  /* Force the low-emphasis outline treatment even if a screen forgot to add
     .btn-ghost — neutral border + muted text, never the sky-blue solid fill. */
  background: transparent;
  color: var(--fg-2);
  border-color: var(--border-1);
}
.btn-refresh:hover {
  background: var(--dnuv-blue-50);
  color: var(--fg-accent);
  border-color: var(--dnuv-blue-200);
}

/* ---------- Icon-only ----------
   .btn-icon is canonical. .icon-btn was a player-scoped fork;
   any out-of-scope .icon-btn has been renamed to .btn-icon in
   CameraDetail.js / LiveView.js (P0-U2-03). */
.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: var(--btn-radius);
  color: var(--fg-3);
  cursor: pointer;
  font-family: inherit;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.btn-icon:hover {
  /* Wave-E (F-DARK): see .btn-ghost:hover — --fg-accent keeps the icon
     legible on the dark-mode sky wash (light value is unchanged navy). */
  background: var(--dnuv-blue-50);
  color: var(--fg-accent);
  border-color: var(--dnuv-blue-200);
}
.btn-icon i { width: 16px; height: 16px; }

/* Icon-only on dark (player overlay variant). */
.btn-icon--on-dark {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
}
.btn-icon--on-dark:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
}

/* Smaller icon-only used in dense players. */
.btn-icon.btn-icon-sm {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}
.btn-icon.btn-icon-sm i { width: 14px; height: 14px; }

/* ---------- Block variant (full-width) ---------- */
.btn-block {
  width: 100%;
  justify-content: center;
  /* Height already controlled by --btn-h / .btn-sm / .btn-lg. */
}

/* ---------- :focus-visible — WCAG 2.4.7 AA (P0-U2-02) ----------
   The token --ring-focus was already declared in colors_and_type.css
   for inputs; here it is wired to every button family. */
.btn:focus-visible,
.btn-icon:focus-visible,
.icon-btn:focus-visible,
.icon-btn-toolbar:focus-visible,
.cam-card-menu-btn:focus-visible,
.filter-chip:focus-visible,
.chip-opt:focus-visible,
.tab:focus-visible,
.tab-btn:focus-visible,
.view-toggle button:focus-visible,
.seg-ctrl button:focus-visible,
.live-cfg-seg button:focus-visible,
.modal-tabs button:focus-visible,
.live-player-controls .btn-icon:focus-visible,
.help-fab:focus-visible,
.scan-action-trigger:focus-visible,
.toast-action:focus-visible,
.toast-close:focus-visible,
.sb-collapse-btn:focus-visible,
.onb-dismiss:focus-visible,
.pass-toggle:focus-visible,
.crumb.link:focus-visible,
.ab-chip:focus-visible,
.ab-quick:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

/* ---------- :disabled — global rule (P0-U2-04) ---------- */
.btn:disabled, .btn[aria-disabled="true"],
.btn-icon:disabled, .btn-icon[aria-disabled="true"],
.icon-btn:disabled, .icon-btn[aria-disabled="true"],
.icon-btn-toolbar:disabled,
.cam-card-menu-btn:disabled,
.filter-chip:disabled, .filter-chip[aria-disabled="true"],
.chip-opt:disabled,
.tab:disabled, .tab-btn:disabled,
.view-toggle button:disabled,
.seg-ctrl button:disabled,
.live-cfg-seg button:disabled,
.modal-tabs button:disabled,
.live-player-controls .btn-icon:disabled,
.help-fab:disabled,
.scan-action-trigger:disabled,
.toast-action:disabled,
.toast-close:disabled,
.sb-collapse-btn:disabled,
.onb-dismiss:disabled,
.pass-toggle:disabled,
.ab-chip:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}