/* ============================================================================
 *  FactoryFlow Pulse — application theme
 * ----------------------------------------------------------------------------
 *  Loaded by  resources/views/layouts/partials/cdn.blade.php
 *  Depends on Bootstrap 5.3 (loaded BEFORE this file)
 *
 *  Sections in order:
 *   1. Pulse color tokens (CSS variables)
 *   2. Bootstrap dark-theme overrides
 *   3. Typography
 *   4. Brand logo mark
 *   5. Sidebar / Topbar (.ff-sidebar, .ff-topbar)
 *   6. Cards / Panels (.card-soft, .pulse-card)
 *   7. KPI tile (.kpi)
 *   8. Status pills (.status-pill, .pill-*)
 *   9. Progress bars
 *  10. Tables
 *  11. Forms (form-control, form-select, form-label, form-check)
 *  12. Buttons (btn-light, btn-brand, btn-primary, etc.)
 *  13. Badges / colour utilities
 *  14. Dropdowns / Pagination / Alerts
 *  15. Misc utilities (.fs-tiny, .avatar-sm, .tracker-row, etc.)
 * ============================================================================ */


/* ─────────────────────── 1 · TOKENS ─────────────────────── */
:root {
    /* Surfaces */
    --pulse-bg:        #0a0d1e;
    --pulse-surface:   #131628;
    --pulse-surface-2: #1a1e35;
    --pulse-border:    rgba(168, 85, 247, .15);
    --pulse-border-2:  rgba(255, 255, 255, .06);

    /* Brand */
    --pulse-cyan:    #00d4ff;
    --pulse-violet:  #a855f7;
    --pulse-magenta: #e879f9;

    /* Text */
    --pulse-text:   #f1f5f9;
    --pulse-text-2: #cbd5e1;
    --pulse-text-3: #94a3b8;
    --pulse-text-4: #64748b;

    /* Status */
    --pulse-green: #22c55e;
    --pulse-amber: #fbbf24;
    --pulse-red:   #ef4444;
    --pulse-blue:  #3b82f6;
}

/* ─────────────────────── 2 · BOOTSTRAP DARK OVERRIDES ─────────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg:          var(--pulse-bg);
    --bs-body-color:       var(--pulse-text);
    --bs-secondary-color:  var(--pulse-text-3);
    --bs-tertiary-color:   var(--pulse-text-4);
    --bs-tertiary-bg:      var(--pulse-surface-2);
    --bs-body-tertiary-bg: var(--pulse-surface);
    --bs-border-color:     var(--pulse-border-2);
    --bs-emphasis-color:   #fff;
}

/* ─────────────────────── 2b · LIGHT MODE ───────────────────────
   Re-binds every Pulse token to light-mode values. All Pulse components
   reference these tokens, so the entire app flips look-and-feel without
   per-component rules. */
[data-bs-theme="light"] {
    --pulse-bg:        #F4F6FB;   /* page background */
    --pulse-surface:   #FFFFFF;   /* cards / sidebar / topbar */
    --pulse-surface-2: #F1F3F8;   /* inputs / subtle bg */
    --pulse-border:    rgba(99, 102, 241, .12);
    --pulse-border-2:  #E2E5ED;   /* card borders, table separators */

    --pulse-text:   #0F172A;      /* primary body */
    --pulse-text-2: #334155;      /* secondary */
    --pulse-text-3: #64748B;      /* muted */
    --pulse-text-4: #94A3B8;      /* hint / placeholder */

    /* Brand colours stay the same — they read well on both themes */

    /* Bootstrap remaps */
    --bs-body-bg:          var(--pulse-bg);
    --bs-body-color:       var(--pulse-text);
    --bs-secondary-color:  var(--pulse-text-3);
    --bs-tertiary-color:   var(--pulse-text-4);
    --bs-tertiary-bg:      var(--pulse-surface-2);
    --bs-body-tertiary-bg: var(--pulse-surface);
    --bs-border-color:     var(--pulse-border-2);
    --bs-emphasis-color:   #000;
}

/* Light-mode tweaks that need slightly different rules than the dark variants */
[data-bs-theme="light"] body { background: var(--pulse-bg); color: var(--pulse-text); }
[data-bs-theme="light"] .ff-sidebar         { background: #FFFFFF; border-right: 1px solid var(--pulse-border-2); }
[data-bs-theme="light"] .ff-topbar          { background: #FFFFFF; border-bottom: 1px solid var(--pulse-border-2); box-shadow: 0 1px 3px rgba(15,23,42,.04); }
[data-bs-theme="light"] .ff-topbar .page-title { color: #0F172A; }
[data-bs-theme="light"] .card-soft,
[data-bs-theme="light"] .pulse-card,
[data-bs-theme="light"] .kpi               { background: #FFFFFF; box-shadow: 0 2px 8px rgba(15,23,42,.04); }
[data-bs-theme="light"] .kpi .kpi-value    { color: #0F172A; }
[data-bs-theme="light"] .table             { color: var(--pulse-text); }
[data-bs-theme="light"] .table tbody td    { border-bottom-color: #EEF1F6; }
[data-bs-theme="light"] .table-hover tbody tr:hover { background: rgba(168, 85, 247, .04); }
[data-bs-theme="light"] .table thead th    { color: var(--pulse-text-3); }
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select       { background-color: #FFFFFF; color: var(--pulse-text); border-color: var(--pulse-border-2); }
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus { background-color: #FFFFFF; }
[data-bs-theme="light"] .btn-light         { background: #EEF1F7; color: #334155; border: 1px solid #C7CEDB; }
[data-bs-theme="light"] .btn-light:hover   { background: #E2E6EE; color: var(--pulse-text); border-color: #AEB8C9; }
/* Light-mode outline buttons — saturated tone text, a solid visible border
   and a real tinted fill so they never melt into white panels. */
[data-bs-theme="light"] .btn-outline-primary   { color: #6D28D9; border: 1.5px solid #7C3AED; background: rgba(124, 58, 237, .10); }
[data-bs-theme="light"] .btn-outline-secondary { color: #334155; border: 1.5px solid #64748B; background: rgba(100, 116, 139, .10); }
[data-bs-theme="light"] .btn-outline-danger    { color: #B91C1C; border: 1.5px solid #DC2626; background: rgba(220, 38, 38, .10); }
[data-bs-theme="light"] .btn-outline-success   { color: #15803D; border: 1.5px solid #16A34A; background: rgba(22, 163, 74, .10); }
[data-bs-theme="light"] .btn-outline-warning   { color: #92400E; border: 1.5px solid #D97706; background: rgba(217, 119, 6, .12); }
[data-bs-theme="light"] .btn-outline-info      { color: #0E7490; border: 1.5px solid #0891B2; background: rgba(8, 145, 178, .10); }
[data-bs-theme="light"] .btn-outline-primary:hover   { background: #7C3AED; border-color: #7C3AED; color: #fff; }
[data-bs-theme="light"] .btn-outline-secondary:hover { background: #475569; border-color: #475569; color: #fff; }
[data-bs-theme="light"] .btn-outline-danger:hover    { background: #DC2626; border-color: #DC2626; color: #fff; }
[data-bs-theme="light"] .btn-outline-success:hover   { background: #16A34A; border-color: #16A34A; color: #fff; }
[data-bs-theme="light"] .btn-outline-warning:hover   { background: #D97706; border-color: #D97706; color: #fff; }
[data-bs-theme="light"] .btn-outline-info:hover      { background: #0891B2; border-color: #0891B2; color: #fff; }
[data-bs-theme="light"] .ff-sidebar .nav-link        { color: var(--pulse-text-3); }
[data-bs-theme="light"] .ff-sidebar .nav-link:hover  { background: #F1F3F8; color: var(--pulse-text); }
[data-bs-theme="light"] .ff-sidebar .nav-link.active { background: linear-gradient(90deg, rgba(168,85,247,.12), rgba(168,85,247,.04)); color: var(--pulse-violet); }
[data-bs-theme="light"] .ff-sidebar .nav-link.active i { color: var(--pulse-violet); }
[data-bs-theme="light"] .ff-flyout-panel   { background: #FFFFFF; box-shadow: 0 12px 32px rgba(15,23,42,.12); }
[data-bs-theme="light"] .ff-flyout-panel a { color: var(--pulse-text-2); }
[data-bs-theme="light"] .ff-flyout-panel a:hover { background: #F1F3F8; color: var(--pulse-text); }
[data-bs-theme="light"] .ff-flyout-panel a.active { background: rgba(168,85,247,.1); color: var(--pulse-violet); }
[data-bs-theme="light"] .dropdown-menu     { background: #FFFFFF; border-color: var(--pulse-border-2); box-shadow: 0 8px 24px rgba(15,23,42,.1); }
[data-bs-theme="light"] .dropdown-item     { color: var(--pulse-text-2); }
[data-bs-theme="light"] .dropdown-item:hover { background: #F1F3F8; color: var(--pulse-text); }
[data-bs-theme="light"] .page-link         { background: #FFFFFF; color: var(--pulse-text-2); border-color: var(--pulse-border-2); }
[data-bs-theme="light"] .page-item.active .page-link { background: var(--pulse-violet); color: #fff; border-color: var(--pulse-violet); }
[data-bs-theme="light"] .progress          { background: #E5E7EB; }
[data-bs-theme="light"] .text-body         { color: var(--pulse-text) !important; }
[data-bs-theme="light"] .text-secondary    { color: var(--pulse-text-3) !important; }
[data-bs-theme="light"] code, [data-bs-theme="light"] .font-monospace { color: #6D28D9; }
[data-bs-theme="light"] code               { background: rgba(168, 85, 247, .08); }
[data-bs-theme="light"] .text-bg-success   { background: rgba(34, 197, 94, .14) !important; color: #15803D !important; }
[data-bs-theme="light"] .text-bg-danger    { background: rgba(239, 68, 68, .14) !important; color: #B91C1C !important; }
[data-bs-theme="light"] .text-bg-warning   { background: rgba(251, 191, 36, .18) !important; color: #92400E !important; }
[data-bs-theme="light"] .text-bg-info      { background: rgba(0, 212, 255, .14) !important; color: #0E7490 !important; }
[data-bs-theme="light"] .text-bg-primary   { background: rgba(168, 85, 247, .14) !important; color: #6D28D9 !important; }
[data-bs-theme="light"] .pill-good     { color: #15803D; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .25); }
[data-bs-theme="light"] .pill-watch    { color: #92400E; background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .3); }
[data-bs-theme="light"] .pill-bad      { color: #B91C1C; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .25); }
[data-bs-theme="light"] .pill-info     { color: #0E7490; background: rgba(0, 212, 255, .12); border-color: rgba(0, 212, 255, .3); }
[data-bs-theme="light"] .pill-progress { color: #6D28D9; background: rgba(168, 85, 247, .12); border-color: rgba(168, 85, 247, .3); }
[data-bs-theme="light"] .pill-neutral  { color: var(--pulse-text-3); background: #F1F3F8; border-color: var(--pulse-border-2); }
[data-bs-theme="light"] .tracker-row   { border-bottom-color: #EEF1F6; }
[data-bs-theme="light"] .pulse-logo-mark, [data-bs-theme="light"] .pulse-logo { filter: none; }
[data-bs-theme="light"] .ff-sidebar nav::-webkit-scrollbar-thumb { background: rgba(168,85,247,.2); }

/* ─────────────────────── 3 · TYPOGRAPHY ─────────────────────── */
/* Root font-size scales every rem-based rule in this file. Bumped from
   14px → 15.5px for readability. Drop to 15px if it feels too large. */
html { font-size: 15.5px; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--pulse-bg);
    color:      var(--pulse-text);
    -webkit-font-smoothing: antialiased;
}

a                          { color: var(--pulse-cyan); }
a:hover                    { color: var(--pulse-magenta); }
a.text-decoration-none     { color: inherit; }

/* ─────────────────────── 4 · BRAND LOGO MARK ─────────────────────── */
/* The "LT" mark — vibrant gradient with a violet/magenta glow so it stays
   highly visible on the dark Pulse background. */
.pulse-logo-mark,
.pulse-logo {
    font-family:  'Inter', sans-serif;
    font-weight:  900;
    font-style:   italic;
    line-height:  1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg,
                #93c5fd 0%,      /* bright sky-blue */
                #a855f7 45%,     /* violet */
                #f0abfc 100%);   /* magenta */
    -webkit-background-clip: text;
    background-clip:         text;
    color: transparent;
    /* Glow halo for visibility on dark backgrounds */
    filter: drop-shadow(0 0 14px rgba(168, 85, 247, .55))
            drop-shadow(0 0 4px  rgba(232, 121, 249, .45));
    -webkit-text-stroke: 0.4px rgba(255, 255, 255, .15);
    position: relative;
}
/* Cyan accent dot (echoes the heartbeat pulse) */
.pulse-logo-mark::after,
.pulse-logo::after {
    content: '';
    position: absolute;
    right: -4px;
    bottom: 14%;
    width: .22em;
    height: .22em;
    background: radial-gradient(circle, var(--pulse-cyan) 0%, transparent 70%);
    border-radius: 50%;
    filter: drop-shadow(0 0 6px var(--pulse-cyan));
}

/* ─────────────────────── 5 · SIDEBAR / TOPBAR ─────────────────────── */
.ff-sidebar {
    width:      270px;
    height:     100vh;
    position:   sticky;
    top:        0;
    align-self: flex-start;
    background: var(--pulse-surface);
    border-right: 1px solid var(--pulse-border-2);
    display: flex;
    flex-direction: column;
}
.ff-sidebar .brand-row {
    height:  64px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-bottom: 1px solid var(--pulse-border-2);
}
.ff-sidebar nav {
    overflow-y: auto;
    flex-grow:  1;
    padding:    .5rem;
}
.ff-sidebar nav::-webkit-scrollbar       { width: 4px; }
.ff-sidebar nav::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, .3); border-radius: 4px; }

.ff-sidebar .nav-link {
    color:        var(--pulse-text-3);
    padding:      .55rem .85rem;
    border-radius: .55rem;
    display:      flex;
    align-items:  center;
    gap:          .65rem;
    font-size:    .82rem;
    font-weight:  500;
    margin:       1px 0;
    transition:   background .15s, color .15s;
    white-space:  nowrap;
    overflow:     hidden;
}
.ff-sidebar .nav-link span     { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ff-sidebar .nav-link i        { font-size: 1.2rem; opacity: 1; flex-shrink: 0; width: 1.35rem; text-align: left; }
.ff-sidebar .nav-link:hover    { background: rgba(168, 85, 247, .08); color: var(--pulse-text); }
.ff-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(168, 85, 247, .22), rgba(168, 85, 247, .06));
    color: #fff;
    border-left: 2px solid var(--pulse-violet);
    padding-left: calc(.85rem - 2px);
}
.ff-sidebar .nav-link.active i { color: var(--pulse-violet); opacity: 1; }

/* (original tiny grey .group-label rule was here — replaced by the collapsible
    row-button further down so the bolder/larger heading actually wins.) */

.ff-topbar {
    height:     64px;
    background: var(--pulse-surface);
    border-bottom: 1px solid var(--pulse-border-2);
    padding:    0 1.5rem;
    display:    flex;
    align-items: center;
    justify-content: space-between;
    position:   sticky;
    top:        0;
    z-index:    50;
}
.ff-topbar .page-title { font-size: 1.15rem; font-weight: 700; color: #fff; }

/* ─────────────────────── 6 · PANELS / CARDS ─────────────────────── */
.card-soft,
.pulse-card {
    background:    var(--pulse-surface);
    border:        1px solid var(--pulse-border-2);
    border-radius: .9rem;
    overflow:      hidden;
}
.card-soft .card-header,
.pulse-card .card-header {
    background:     transparent;
    border-bottom:  1px solid var(--pulse-border-2);
    padding:        .75rem 1rem;
}
.card-soft .card-body,
.pulse-card .card-body { padding: 1rem; }

.panel-title {
    font-size:      .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight:    700;
    color:          var(--pulse-text-2);
}

/* ─────────────────────── 7 · KPI TILE ─────────────────────── */
/* Compact KPI tiles — sized down so the dashboard rows read at a glance
   without dominating the page (smaller padding, value and icon). */
.kpi {
    background:    var(--pulse-surface);
    border:        1px solid var(--pulse-border-2);
    border-radius: .75rem;
    padding:       .7rem .85rem;
    position:      relative;
    overflow:      hidden;
    height:        100%;
}
.kpi .kpi-label {
    font-size:      .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--pulse-text-3);
    font-weight:    700;
    margin-bottom:  .2rem;
}
.kpi .kpi-value { font-size: 1.35rem; font-weight: 700; line-height: 1.05; color: #fff; }
.kpi .kpi-unit  { font-size: .78rem; color: var(--pulse-text-3); margin-left: .15rem; font-weight: 500; }

.kpi .kpi-delta {
    font-size:    .65rem;
    font-weight:  600;
    margin-top:   .25rem;
    display:      inline-flex;
    align-items:  center;
    gap:          .25rem;
}
.kpi .kpi-delta.up   { color: var(--pulse-green); }
.kpi .kpi-delta.down { color: var(--pulse-red); }

.kpi .kpi-icon {
    position:   absolute;
    top:        .65rem;
    right:      .65rem;
    width:      26px;
    height:     26px;
    border-radius: .5rem;
    display:    flex;
    align-items: center;
    justify-content: center;
    background: rgba(168, 85, 247, .1);
    color:      var(--pulse-violet);
    font-size:  .8rem;
}

/* ─────────────────────── 8 · STATUS PILLS ─────────────────────── */
.status-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    padding:       .15rem .55rem;
    border-radius: 9999px;
    font-size:     .7rem;
    font-weight:   600;
}
.status-pill .dot { width: 5px; height: 5px; border-radius: 9999px; background: currentColor; }

.pill-good     { color: var(--pulse-green);  background: rgba(34, 197, 94, .12);  border: 1px solid rgba(34, 197, 94, .25); }
.pill-watch    { color: var(--pulse-amber);  background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .25); }
.pill-bad      { color: var(--pulse-red);    background: rgba(239, 68, 68, .12);  border: 1px solid rgba(239, 68, 68, .25); }
.pill-info     { color: var(--pulse-cyan);   background: rgba(0, 212, 255, .12);  border: 1px solid rgba(0, 212, 255, .25); }
.pill-progress { color: var(--pulse-violet); background: rgba(168, 85, 247, .12); border: 1px solid rgba(168, 85, 247, .25); }
.pill-neutral  { color: var(--pulse-text-3); background: rgba(148, 163, 184, .1); border: 1px solid rgba(148, 163, 184, .2); }

/* ─────────────────────── 9 · PROGRESS BARS ─────────────────────── */
.progress     { background: rgba(255, 255, 255, .06); border-radius: 9999px; height: 6px; }
.progress-bar { background: linear-gradient(90deg, var(--pulse-violet), #c084fc); border-radius: 9999px; }

.progress-bar.bg-success { background: linear-gradient(90deg, #16a34a, var(--pulse-green))  !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg, #b91c1c, var(--pulse-red))    !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg, #d97706, var(--pulse-amber))  !important; }
.progress-bar.bg-info    { background: linear-gradient(90deg, #0284c7, var(--pulse-cyan))   !important; }
.progress-bar.bg-primary { background: linear-gradient(90deg, #7c3aed, var(--pulse-violet)) !important; }

/* ─────────────────────── 10 · TABLES ─────────────────────── */
.table {
    --bs-table-bg:           transparent;
    --bs-table-color:        var(--pulse-text);
    --bs-table-border-color: var(--pulse-border-2);
    --bs-table-hover-bg:     rgba(168, 85, 247, .05);
    color:     var(--pulse-text);
    font-size: .8rem;
}
.table thead th {
    color:          var(--pulse-text-4);
    font-weight:    600;
    font-size:      .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom:  1px solid var(--pulse-border-2);
    padding:        .55rem .5rem;
    background:     transparent !important;
}
.table tbody td {
    padding:       .65rem .5rem;
    border-bottom: 1px solid var(--pulse-border-2);
    vertical-align: middle;
}
.table-hover tbody tr:hover { background: rgba(168, 85, 247, .04); }

/* ─────────────────────── 11 · FORMS ─────────────────────── */
.form-control,
.form-select {
    background-color: var(--pulse-surface-2);
    border:    1px solid var(--pulse-border-2);
    color:     var(--pulse-text);
    font-size: .82rem;
    padding:   .5rem .8rem;
    border-radius: .5rem;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--pulse-surface-2);
    border-color:    var(--pulse-violet);
    color:           var(--pulse-text);
    box-shadow:      0 0 0 3px rgba(168, 85, 247, .2);
}
.form-control::placeholder { color: var(--pulse-text-4); }
.form-control-lg, .form-select-lg { padding: .6rem .9rem;  font-size: .9rem; }
.form-control-sm, .form-select-sm { padding: .35rem .65rem; font-size: .78rem; }

.form-label {
    font-size:      .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--pulse-text-3);
    font-weight:    600;
    margin-bottom:  .35rem;
}
.form-check-input          { background-color: var(--pulse-surface-2); border-color: var(--pulse-border); }
.form-check-input:checked  { background-color: var(--pulse-violet);    border-color: var(--pulse-violet); }
.form-check-label          { color: var(--pulse-text-2); font-size: .8rem; }

/* Native arrow recolor for select */
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M8 11.5L3.5 7h9z'/%3E%3C/svg%3E"); }

/* ─────────────────────── 12 · BUTTONS ─────────────────────── */
.btn     { font-size: .8rem;  font-weight: 600; border-radius: .5rem; padding: .45rem .9rem; }
.btn-sm  { font-size: .75rem; padding: .35rem .7rem; }
.btn-lg  { font-size: .9rem;  padding: .65rem 1.1rem; }

.btn-light        { background: var(--pulse-surface-2); color: var(--pulse-text-2); border: 1px solid var(--pulse-border-2); }
.btn-light:hover  { background: var(--pulse-surface);   color: #fff; }

.btn-brand,
.btn-primary {
    background: linear-gradient(135deg, var(--pulse-violet), var(--pulse-magenta));
    color: #fff; border: 0;
}
.btn-brand:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #9333ea, #d946ef);
    color: #fff;
    box-shadow: 0 4px 16px rgba(168, 85, 247, .35);
}

.btn-success { background: var(--pulse-green); border: 0; color: #fff; }
.btn-danger  { background: var(--pulse-red);   border: 0; color: #fff; }
.btn-warning { background: var(--pulse-amber); border: 0; color: #07070d; }
.btn-info    { background: var(--pulse-cyan);  border: 0; color: #07070d; }

/* Outline buttons — Bootstrap's defaults are grey-on-dark and practically
   invisible in this theme, so every variant gets a legible tone + a tinted
   hover fill. Used all over the forms (Cancel / Delete / Reject / etc.). */
.btn-outline-primary   { color: var(--pulse-violet); border: 1px solid var(--pulse-violet); background: rgba(168, 85, 247, .08); }
.btn-outline-primary:hover   { background: var(--pulse-violet); border-color: var(--pulse-violet); color: #fff; }
.btn-outline-secondary { color: var(--pulse-text-2); border: 1px solid var(--pulse-text-4); background: rgba(148, 163, 184, .08); }
.btn-outline-secondary:hover { background: var(--pulse-surface-2); border-color: var(--pulse-text-3); color: var(--pulse-text); }
.btn-outline-danger    { color: var(--pulse-red);   border: 1px solid var(--pulse-red);   background: rgba(239, 68, 68, .08); }
.btn-outline-danger:hover    { background: var(--pulse-red); border-color: var(--pulse-red); color: #fff; }
.btn-outline-success   { color: var(--pulse-green); border: 1px solid var(--pulse-green); background: rgba(34, 197, 94, .08); }
.btn-outline-success:hover   { background: var(--pulse-green); border-color: var(--pulse-green); color: #fff; }
.btn-outline-warning   { color: var(--pulse-amber); border: 1px solid var(--pulse-amber); background: rgba(251, 191, 36, .08); }
.btn-outline-warning:hover   { background: var(--pulse-amber); border-color: var(--pulse-amber); color: #07070d; }
.btn-outline-info      { color: var(--pulse-cyan);  border: 1px solid var(--pulse-cyan);  background: rgba(0, 212, 255, .08); }
.btn-outline-info:hover      { background: var(--pulse-cyan); border-color: var(--pulse-cyan); color: #07070d; }

/* Toggle buttons (btn-check + outline label, e.g. PPM Pass/Fail) — the
   checked state fills solid in BOTH themes so the selection is unmistakable. */
.btn-check:checked + .btn-outline-success { background: #16A34A !important; border-color: #16A34A !important; color: #fff !important; }
.btn-check:checked + .btn-outline-danger  { background: #DC2626 !important; border-color: #DC2626 !important; color: #fff !important; }
.btn-check:checked + .btn-outline-primary { background: #7C3AED !important; border-color: #7C3AED !important; color: #fff !important; }
.btn-check:checked + .btn-outline-warning { background: #D97706 !important; border-color: #D97706 !important; color: #07070d !important; }

/* ─────────────────────── 13 · BADGES + COLOUR UTILITIES ─────────────────────── */
.badge { font-weight: 600; font-size: .65rem; padding: .3em .55em; border-radius: .35rem; }

.text-bg-success   { background: rgba(34, 197, 94, .18)  !important; color: var(--pulse-green)  !important; }
.text-bg-danger    { background: rgba(239, 68, 68, .18)  !important; color: var(--pulse-red)    !important; }
.text-bg-warning   { background: rgba(251, 191, 36, .18) !important; color: var(--pulse-amber)  !important; }
.text-bg-info      { background: rgba(0, 212, 255, .18)  !important; color: var(--pulse-cyan)   !important; }
.text-bg-primary   { background: rgba(168, 85, 247, .18) !important; color: var(--pulse-violet) !important; }
.text-bg-secondary { background: rgba(148, 163, 184, .18) !important; color: var(--pulse-text-3) !important; }

.bg-success-subtle  { background: rgba(34, 197, 94, .12)  !important; }
.bg-danger-subtle   { background: rgba(239, 68, 68, .12)  !important; }
.bg-warning-subtle  { background: rgba(251, 191, 36, .12) !important; }
.bg-info-subtle     { background: rgba(0, 212, 255, .12)  !important; }
.bg-primary-subtle  { background: rgba(168, 85, 247, .12) !important; }
.bg-secondary-subtle{ background: rgba(148, 163, 184, .1) !important; }

.text-success   { color: var(--pulse-green)  !important; }
.text-danger    { color: var(--pulse-red)    !important; }
.text-warning   { color: var(--pulse-amber)  !important; }
.text-info      { color: var(--pulse-cyan)   !important; }
.text-primary   { color: var(--pulse-violet) !important; }
.text-brand     { color: var(--pulse-violet) !important; }
.text-secondary { color: var(--pulse-text-3) !important; }
.text-body      { color: var(--pulse-text)   !important; }

/* ─────────────────────── 14 · DROPDOWNS / PAGINATION / ALERTS ─────────────────────── */
.dropdown-menu    { background: var(--pulse-surface); border: 1px solid var(--pulse-border-2); }
.dropdown-item    { color: var(--pulse-text-2); font-size: .8rem; }
.dropdown-item:hover { background: rgba(168, 85, 247, .1); color: #fff; }
.dropdown-divider { border-color: var(--pulse-border-2); }

.page-link {
    background: var(--pulse-surface-2);
    border:     1px solid var(--pulse-border-2);
    color:      var(--pulse-text-2);
    font-size:  .8rem;
}
.page-item.active .page-link   { background: var(--pulse-violet); border-color: var(--pulse-violet); color: #fff; }
.page-item.disabled .page-link { background: var(--pulse-surface); color: var(--pulse-text-4); }

.alert-success { background: rgba(34, 197, 94, .1);  border: 1px solid rgba(34, 197, 94, .25);  color: #86efac; }
.alert-danger  { background: rgba(239, 68, 68, .1);  border: 1px solid rgba(239, 68, 68, .25);  color: #fca5a5; }
.alert-warning { background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .25); color: #fde68a; }

/* ─────────────────────── 15 · MISC UTILITIES ─────────────────────── */
.fs-tiny       { font-size: .68rem; }
.vr            { background-color: var(--pulse-border-2); }
code,
.font-monospace { color: var(--pulse-cyan); font-family: 'JetBrains Mono', ui-monospace, monospace; }
code           { background: rgba(0, 212, 255, .08); padding: 1px 5px; border-radius: 4px; font-size: .78rem; }

.bg-body-tertiary { background: var(--pulse-surface-2) !important; }
.bg-body          { background: var(--pulse-surface)   !important; }
.border, .border-top, .border-bottom, .border-end, .border-start {
    border-color: var(--pulse-border-2) !important;
}

.chart-box { position: relative; height: 280px; }

.avatar-sm {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--pulse-violet), var(--pulse-magenta));
}

/* Action tracker rows (dashboard) */
.tracker-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--pulse-border-2);
}
.tracker-row:last-child   { border-bottom: 0; }
.tracker-row .tr-icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
}
.tracker-row .tr-label {
    flex-grow: 1;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pulse-text-3);
}
.tracker-row .tr-value { font-size: 1.5rem; font-weight: 700; }

/* ─────────────────────── 16 · SETTINGS SUB-SIDEBAR ─────────────────────── */
/* Vertical category list shown to the left of every Settings page content.
   Used via <x-settings-layout> which includes settings._sidebar partial. */

.settings-shell { align-items: flex-start; }

.settings-sub {
    width: 240px;
    flex-shrink: 0;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border-2);
    border-radius: .9rem;
    padding: .5rem;
    position: sticky;
    top: 88px;                              /* sits just below the topbar */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.settings-sub-title {
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pulse-text-4);
    font-weight: 600;
    padding: .8rem .85rem .35rem;
}
.settings-sub-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--pulse-text-3);
    text-decoration: none;
    border-radius: .55rem;
    margin: 1px 0;
    transition: background .15s, color .15s;
}
.settings-sub-link i { font-size: 1rem; opacity: .85; }
.settings-sub-link:hover {
    background: rgba(168, 85, 247, .08);
    color: var(--pulse-text);
}
.settings-sub-link.active {
    background: linear-gradient(90deg, var(--pulse-cyan), #38bdf8);
    color: #07070d;
    font-weight: 600;
}
.settings-sub-link.active i { color: #07070d; opacity: 1; }

[data-bs-theme="light"] .settings-sub      { background: #FFFFFF; box-shadow: 0 2px 8px rgba(15,23,42,.04); }
[data-bs-theme="light"] .settings-sub-link { color: var(--pulse-text-2); }
[data-bs-theme="light"] .settings-sub-link:hover { background: #F1F3F8; color: var(--pulse-text); }
[data-bs-theme="light"] .settings-sub-link.active {
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
    color: #ffffff;
}
[data-bs-theme="light"] .settings-sub-link.active i { color: #ffffff; }

@media (max-width: 991px) {
    .settings-shell { flex-direction: column; }
    .settings-sub   { width: 100%; position: static; max-height: none; }
}

/* ── Pagination ─────────────────────────────────────────────────────────
   The default Laravel paginator markup contains <svg> chevrons for prev/next.
   Without the matching framework styles those SVGs default to 100% width,
   which is why a paginator can render as a full-screen arrow.

   We use Paginator::useBootstrapFive(), but also defensively clamp any
   <svg> that ends up inside a `.pagination`-wrapped or `nav[role=navigation]`
   pagination block, so a misbehaving paginator can't blow up the layout.
*/
.pagination,
nav[role="navigation"] {
    --pulse-pag-bg:     transparent;
    --pulse-pag-border: var(--pulse-border-2);
    --pulse-pag-text:   var(--pulse-text-2);
    --pulse-pag-hover:  var(--pulse-surface-2);
    --pulse-pag-active-bg:   var(--pulse-violet);
    --pulse-pag-active-text: #fff;
}

/* Bootstrap 5 pagination links */
.pagination { gap: 4px; }
.pagination .page-link {
    background: var(--pulse-pag-bg);
    border: 1px solid var(--pulse-pag-border);
    color: var(--pulse-pag-text);
    font-size: .85rem;
    padding: .35rem .65rem;
    border-radius: 6px;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pagination .page-link:hover {
    background: var(--pulse-pag-hover);
    color: var(--pulse-text);
    border-color: var(--pulse-pag-border);
}
.pagination .page-item.active .page-link,
.pagination .page-link.active {
    background: var(--pulse-pag-active-bg);
    border-color: var(--pulse-pag-active-bg);
    color: var(--pulse-pag-active-text);
}
.pagination .page-item.disabled .page-link {
    background: var(--pulse-pag-bg);
    color: var(--pulse-text-4);
    border-color: var(--pulse-border-2);
    opacity: .55;
}

/* Light mode pagination */
[data-bs-theme="light"] .pagination,
[data-bs-theme="light"] nav[role="navigation"] {
    --pulse-pag-text:        #475569;
    --pulse-pag-border:      #E2E8F0;
    --pulse-pag-hover:       #F1F5F9;
    --pulse-pag-active-bg:   #6366F1;
    --pulse-pag-active-text: #ffffff;
}
[data-bs-theme="light"] .pagination .page-link { background: #ffffff; }
[data-bs-theme="light"] .pagination .page-link:hover { background: #F1F5F9; color: #0f172a; }

/* Safety net — clamp any chevron <svg> rendered by a pagination block. */
.pagination svg,
nav[role="navigation"] svg {
    width: 14px !important;
    height: 14px !important;
    display: inline-block;
    vertical-align: middle;
}

/* ── Sidebar — bold group headings + colourful per-item icons ──────
   Each <a class="nav-link nav-tone-XXX"> gets its icon coloured from the
   LT Pulse palette so the nav scans visually instead of looking like a
   wall of grey icons. Colours are chosen to work on both dark and light
   themes — they're saturated enough to read against either surface.
*/
/* Group label — now a collapsible row-button with a +/− icon. */
.ff-sidebar .group-label {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    width:          100%;
    background:     transparent;
    border:         0;
    font-size:      .8rem;                  /* up from .6rem */
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight:    800;
    color:          var(--pulse-text-2);
    padding:        .85rem .85rem .35rem;
    cursor:         pointer;
    transition:     color .12s ease;
}
.ff-sidebar .group-label:hover { color: var(--pulse-text); }
.ff-sidebar .group-label:focus { outline: none; }

/* Flipping +/− icon. Open = minus, collapsed = plus. */
.ff-sidebar .group-toggle-icon {
    font-size:   .95rem;
    opacity:     .8;
    transition:  transform .2s ease, opacity .2s ease;
}
.ff-sidebar .group-toggle:not(.collapsed) .group-toggle-icon {
    /* Open state — rotate the + into an × … then immediately swap glyph below.
       Cleaner trick: use a pseudo-content swap so we don't need to load two glyphs. */
    transform: rotate(45deg);
    opacity:   1;
}

/* Group body flush with the header so the whole menu reads left-aligned:
   header icon, header text and item icons share one left edge. */
.ff-sidebar .nav-group-body { padding: 0; }

/* Group-header icons — each main-menu group carries its own tone colour,
   matching the coloured item icons below it. The label itself stays neutral
   and the +/− toggle keeps its muted colour. */
.ff-sidebar .group-label { justify-content: flex-start; text-align: left; }
.ff-sidebar .group-label .grp-icon { font-size: 1.2rem; margin-right: .6rem; width: 1.35rem; text-align: left; flex-shrink: 0; }
.ff-sidebar .group-label > span    { flex: 1 1 auto; text-align: left; }
.ff-sidebar .group-label.nav-tone-violet  .grp-icon { color: #c084fc; }
.ff-sidebar .group-label.nav-tone-cyan    .grp-icon { color: #22d3ee; }
.ff-sidebar .group-label.nav-tone-magenta .grp-icon { color: #f472b6; }
.ff-sidebar .group-label.nav-tone-blue    .grp-icon { color: #60a5fa; }
.ff-sidebar .group-label.nav-tone-green   .grp-icon { color: #4ade80; }
.ff-sidebar .group-label.nav-tone-amber   .grp-icon { color: #fbbf24; }
.ff-sidebar .group-label.nav-tone-red     .grp-icon { color: #f87171; }
.ff-sidebar .group-label.nav-tone-muted   .grp-icon { color: var(--pulse-text-3); }
[data-bs-theme="light"] .ff-sidebar .group-label.nav-tone-violet  .grp-icon { color: #7C3AED; }
[data-bs-theme="light"] .ff-sidebar .group-label.nav-tone-cyan    .grp-icon { color: #0891B2; }
[data-bs-theme="light"] .ff-sidebar .group-label.nav-tone-magenta .grp-icon { color: #DB2777; }
[data-bs-theme="light"] .ff-sidebar .group-label.nav-tone-blue    .grp-icon { color: #2563EB; }
[data-bs-theme="light"] .ff-sidebar .group-label.nav-tone-green   .grp-icon { color: #16A34A; }
[data-bs-theme="light"] .ff-sidebar .group-label.nav-tone-amber   .grp-icon { color: #D97706; }
[data-bs-theme="light"] .ff-sidebar .group-label.nav-tone-red     .grp-icon { color: #DC2626; }

/* Live Operations Network — hover tooltip. vis-network's default is a large
   serif-ish beige box; restyle it as a compact callout that follows the
   portal theme, wraps long detail lines and never runs off screen. */
div.vis-tooltip {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: .72rem !important;
    line-height: 1.45 !important;
    color: var(--pulse-text) !important;
    background: var(--pulse-surface) !important;
    border: 1px solid var(--pulse-border-2) !important;
    border-left: 3px solid var(--pulse-violet, #a855f7) !important;
    border-radius: .5rem !important;
    padding: .45rem .65rem !important;
    max-width: 280px !important;
    white-space: pre-line !important;   /* one detail per line (see $tip) */
    overflow-wrap: break-word;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
}

/* Settings — standalone top-level entry (a link, not a collapse toggle). */
.ff-sidebar .settings-root { margin-top: .35rem; border-top: 1px solid var(--pulse-border-2); padding-top: .8rem; }
.ff-sidebar .settings-root:hover .grp-icon { filter: brightness(1.15) saturate(1.1); }
.ff-sidebar .settings-root.active { color: var(--pulse-text); }
.ff-sidebar .settings-root.active .grp-icon { filter: drop-shadow(0 0 6px currentColor); }

/* Default — the icon picks the tone colour, the label stays neutral. */
.ff-sidebar .nav-link i { opacity: 1; }                                  /* drop the .85 fade */
.ff-sidebar .nav-link.nav-tone-violet  i { color: #c084fc; }             /* violet-400 */
.ff-sidebar .nav-link.nav-tone-cyan    i { color: #22d3ee; }             /* cyan-400  */
.ff-sidebar .nav-link.nav-tone-magenta i { color: #f472b6; }             /* pink-400  */
.ff-sidebar .nav-link.nav-tone-blue    i { color: #60a5fa; }             /* blue-400  */
.ff-sidebar .nav-link.nav-tone-green   i { color: #4ade80; }             /* green-400 */
.ff-sidebar .nav-link.nav-tone-amber   i { color: #fbbf24; }             /* amber-400 */
.ff-sidebar .nav-link.nav-tone-red     i { color: #f87171; }             /* red-400   */
.ff-sidebar .nav-link.nav-tone-muted   i { color: var(--pulse-text-3); }

/* Hover keeps the tone but brightens it. */
.ff-sidebar .nav-link:hover i           { filter: brightness(1.15) saturate(1.1); }

/* Active state — the page is "you are here", icon glows on its background. */
.ff-sidebar .nav-link.active i          { filter: drop-shadow(0 0 6px currentColor); }

/* Light-mode adjustments — saturated mids read cleaner on white. */
[data-bs-theme="light"] .ff-sidebar .group-label {
    color: #475569;                                                       /* slate-600 */
    font-weight: 800;
}
[data-bs-theme="light"] .ff-sidebar .nav-link.nav-tone-violet  i { color: #7C3AED; }
[data-bs-theme="light"] .ff-sidebar .nav-link.nav-tone-cyan    i { color: #0891B2; }
[data-bs-theme="light"] .ff-sidebar .nav-link.nav-tone-magenta i { color: #DB2777; }
[data-bs-theme="light"] .ff-sidebar .nav-link.nav-tone-blue    i { color: #2563EB; }
[data-bs-theme="light"] .ff-sidebar .nav-link.nav-tone-green   i { color: #16A34A; }
[data-bs-theme="light"] .ff-sidebar .nav-link.nav-tone-amber   i { color: #D97706; }
[data-bs-theme="light"] .ff-sidebar .nav-link.nav-tone-red     i { color: #DC2626; }
[data-bs-theme="light"] .ff-sidebar .nav-link.nav-tone-muted   i { color: #64748B; }

/* The previous active-state rule painted EVERY icon violet — undo that
   so each item keeps its own tone when active. */
.ff-sidebar .nav-link.active i               { color: inherit; }
.ff-sidebar .nav-link.active.nav-tone-violet  i { color: #c084fc; }
.ff-sidebar .nav-link.active.nav-tone-cyan    i { color: #22d3ee; }
.ff-sidebar .nav-link.active.nav-tone-magenta i { color: #f472b6; }
.ff-sidebar .nav-link.active.nav-tone-blue    i { color: #60a5fa; }
.ff-sidebar .nav-link.active.nav-tone-green   i { color: #4ade80; }
.ff-sidebar .nav-link.active.nav-tone-amber   i { color: #fbbf24; }
.ff-sidebar .nav-link.active.nav-tone-red     i { color: #f87171; }
.ff-sidebar .nav-link.active.nav-tone-muted   i { color: var(--pulse-text-2); }

[data-bs-theme="light"] .ff-sidebar .nav-link.active.nav-tone-violet  i { color: #7C3AED; }
[data-bs-theme="light"] .ff-sidebar .nav-link.active.nav-tone-cyan    i { color: #0891B2; }
[data-bs-theme="light"] .ff-sidebar .nav-link.active.nav-tone-magenta i { color: #DB2777; }
[data-bs-theme="light"] .ff-sidebar .nav-link.active.nav-tone-blue    i { color: #2563EB; }
[data-bs-theme="light"] .ff-sidebar .nav-link.active.nav-tone-green   i { color: #16A34A; }
[data-bs-theme="light"] .ff-sidebar .nav-link.active.nav-tone-amber   i { color: #D97706; }
[data-bs-theme="light"] .ff-sidebar .nav-link.active.nav-tone-red     i { color: #DC2626; }
[data-bs-theme="light"] .ff-sidebar .nav-link.active.nav-tone-muted   i { color: #475569; }

/* ── Light-mode legibility patches ───────────────────────────────────
   Several views were authored for the dark theme and use Bootstrap's
   .text-white, light-grey custom variables, etc. — those vanish on a
   white background. These overrides make those elements legible in
   light mode without rewriting every view.
*/
[data-bs-theme="light"] {
    /* Bootstrap utility used as "primary text" in many views. */
    --bs-white:        #0F172A;
}

/* Bootstrap's .text-white is `color:#fff!important` — invert it. */
[data-bs-theme="light"] .text-white {
    color: var(--pulse-text) !important;
}

/* Make small ALL-CAPS headings genuinely readable on white. */
[data-bs-theme="light"] .panel-title        { color: #1E293B; }      /* slate-800 */
[data-bs-theme="light"] .kpi .kpi-label     { color: #475569; }      /* slate-600 */
[data-bs-theme="light"] .ff-sidebar .group-label {
    color: #64748B;                                                   /* slate-500 */
    font-weight: 700;
}

/* Column-header rows (e.g. "OEE  STATUS" on Line Performance) frequently
   use `.fs-tiny.text-secondary` — bump those a notch darker. */
[data-bs-theme="light"] .fs-tiny.text-secondary,
[data-bs-theme="light"] .text-uppercase.text-secondary {
    color: #475569 !important;
}

/* Card / table dividers were tuned for dark mode — soften on light. */
[data-bs-theme="light"] .border-bottom { border-color: #E2E8F0 !important; }

/* Avatar bubble in the topbar uses white text on a violet pill —
   keep that legible by re-asserting white where it's intentional. */
[data-bs-theme="light"] .avatar-sm,
[data-bs-theme="light"] .status-pill .dot,
[data-bs-theme="light"] .btn-brand,
[data-bs-theme="light"] .badge.text-bg-primary,
[data-bs-theme="light"] .badge.text-bg-success,
[data-bs-theme="light"] .badge.text-bg-danger,
[data-bs-theme="light"] .badge.text-bg-warning,
[data-bs-theme="light"] .badge.text-bg-info,
[data-bs-theme="light"] .badge.text-bg-secondary,
[data-bs-theme="light"] .pagination .page-item.active .page-link {
    color: #ffffff !important;
}

/* ── Tab bars (.nav-pills) — all top menus across the app ────────────────── */
.nav-pills .nav-link {
    color: var(--pulse-text-2);
    background: var(--pulse-surface-2);
    border: 1px solid var(--pulse-border-2);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    padding: .4rem .9rem;
    transition: all .15s ease;
}
.nav-pills .nav-link i { opacity: .85; }
.nav-pills .nav-link:hover {
    color: var(--pulse-text);
    border-color: var(--pulse-violet);
}
/* Active pill — brand violet→magenta gradient (matches the app avatar). */
.nav-pills .nav-link.active,
.nav-pills .nav-link.show {
    background: linear-gradient(135deg, var(--pulse-violet), var(--pulse-magenta));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(168, 85, 247, .35);
}
.nav-pills .nav-link.active i { color: #fff; opacity: 1; }