/* ═══════════════════════════════════════════════════════════════════════════
   CaptivEYE Portal — shared components
   ───────────────────────────────────────────────────────────────────────────
   Loaded by layouts/app.blade.php on every page that uses the base layout, so
   anything defined here is available without a page declaring it again.

   Load order matters and is fixed in the layout:

       v2-template.css     page frame, chrome, typography
       v2-buttons.css      .btn and its variants
       v2-components.css   this file — semantic tokens, badges
       @stack('styles')    the page's own block, which still wins

   A page keeps the last word by design. Migrating a page means deleting the
   rules here it used to duplicate, not fighting them with more specificity.

   Companion files, deliberately separate:
     - buttons live in v2-buttons.css (already a complete set: .btn with
       -save/-edit/-delete/-add/-alt/-back/-primary/-danger/-success/-secondary,
       plus .btn-sm, .btn.is-icon-only and .btn-icon)
     - icons are Blade partials under resources/views/partials/icons/, included
       as <span class="btn-icon">@include('partials.icons.save')</span>
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Semantic colour tokens ──────────────────────────────────────────────────
   These had been written out per page. profile.blade.php and admin-config.css
   carried identical copies. (modern-template.css carried a different set under
   the same names; its last user, auth/client-sso-lander, moved onto the shared
   layout and the file was deleted.)

   --accent and the frame/page tokens are not repeated here: they belong to
   v2-template.css, which loads first and is the base for everything.
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
    --success: #20a05b;
    --danger: #cb3f3f;
    --warning: #b45309;
    --muted: #5d5d5d;
}

html[data-theme="dark"] {
    --success: #2cc970;
    --danger: #e05757;
    --warning: #f0a330;
    --muted: #c8c8c8;
}


/* ── Badges ──────────────────────────────────────────────────────────────────
   A small pill carrying a state: enabled/disabled, active/expired, a count.

   Not a button and never interactive — if it can be clicked it is a .btn. The
   tinted background is mixed from the same colour as the text and border, so a
   variant is three references to one token rather than three hand-picked
   colours that drift apart.

   Usage:  <span class="badge badge-success">…</span>

   Geometry is lifted verbatim from the .mfa-badge rules this replaces, so the
   converted badges render identically rather than merely similarly.
   ────────────────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Tighter variant for badges sitting inside a table row or beside a heading,
   where the full-size pill pushes the row height around. */
.badge-sm {
    padding: 3px 10px;
    font-size: 0.74rem;
    gap: 6px;
}

.badge-success {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--success);
}

.badge-danger {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--danger);
}

.badge-warning {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    color: var(--warning);
}

/* The "nothing to report" state. Uses the frame border rather than a colour so
   it reads as absence of status, not as a status of its own. */
.badge-neutral {
    background: color-mix(in srgb, var(--muted) 10%, transparent);
    border: 1px solid var(--frame-border);
    color: var(--muted);
}

/* Carries the site accent. For "this one" markers — current selection, the
   active preset — not for success or failure. */
.badge-accent {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
}