/* ============================================================================
   OPUS NetPulse — "Workbench" theme
   A calm, light instrument-panel skin layered on top of AdminLTE 3.
   Loaded AFTER adminlte.min.css + custom.css so these rules win.
   ========================================================================== */

:root {
    --w-bg:      #f4f5f9;   /* app ground            */
    --w-card:    #ffffff;   /* card / surface        */
    --w-ink:     #1a1d29;   /* primary text          */
    --w-mut:     #6a7080;   /* muted text            */
    --w-line:    #e4e6ee;   /* hairline borders      */
    --w-acc:     #4f46e5;   /* indigo accent         */
    --w-acc-d:   #4338ca;   /* indigo hover          */
    --w-acc-sft: #eef0fe;   /* indigo tint (active)  */
    --w-rail:    #1b2030;   /* icon rail ground      */
    --w-rail-ink:#aab1c4;   /* rail idle icon        */
    /* semantic (kept separate from the indigo accent) */
    --w-ok:   #16a34a;
    --w-warn: #d97706;
    --w-bad:  #dc2626;
    --w-info: #0891b2;
    --w-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --w-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}

/* ---- base ---------------------------------------------------------------- */
body,
.wrapper,
.content-wrapper {
    background-color: var(--w-bg) !important;
    color: var(--w-ink);
    font-family: var(--w-sans);
}
.content-wrapper { color: var(--w-ink); }
code, kbd, pre, .text-monospace { font-family: var(--w-mono); }
/* line up digits everywhere they matter */
.small-box h3, .info-box-number, table td, table th, .wb-kpi-v, .badge {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
a { color: var(--w-acc); }
a:hover { color: var(--w-acc-d); }

/* ============================================================================
   COMMAND BAR  (AdminLTE .main-header)
   ========================================================================== */
.main-header.navbar {
    background: var(--w-card) !important;
    border-bottom: 1px solid var(--w-line) !important;
    box-shadow: 0 1px 2px rgba(20, 22, 35, .04);
    min-height: 56px;
    padding-left: .25rem;
}
.main-header .nav-link { color: var(--w-ink) !important; }
.main-header .nav-link:hover { color: var(--w-acc) !important; }

/* brand shown inside the command bar (left of the KPIs) */
.wb-brand {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; letter-spacing: -.01em; color: var(--w-ink) !important;
    font-size: 1.02rem; padding: 0 .25rem 0 .1rem;
}
.wb-brand .wb-dot {
    width: 10px; height: 10px; border-radius: 3px;
    background: var(--w-acc); box-shadow: 0 0 0 3px var(--w-acc-sft);
}
.wb-brand small { color: var(--w-mut); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }

/* global KPI chips */
.wb-kpis { display: flex; align-items: center; gap: .35rem; margin-left: .75rem; }
.wb-kpi {
    display: inline-flex; flex-direction: column; justify-content: center;
    padding: .18rem .6rem; border: 1px solid var(--w-line); border-radius: 8px;
    background: #fbfbfe; line-height: 1.05; text-decoration: none; min-width: 62px;
    transition: border-color .12s ease, background .12s ease;
}
.wb-kpi:hover { border-color: var(--w-acc); background: var(--w-acc-sft); text-decoration: none; }
.wb-kpi-l {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--w-mut); font-weight: 700;
}
.wb-kpi-v { font-size: .98rem; font-weight: 700; color: var(--w-ink); }
.wb-kpi.is-ok  .wb-kpi-v { color: var(--w-ok); }
.wb-kpi.is-bad  { border-color: #f3c9c9; background: #fdf1f1; }
.wb-kpi.is-bad  .wb-kpi-v, .wb-kpi.is-bad .wb-kpi-l { color: var(--w-bad); }
.wb-kpi.is-warn { border-color: #f3ddb8; background: #fdf7ec; }
.wb-kpi.is-warn .wb-kpi-v, .wb-kpi.is-warn .wb-kpi-l { color: var(--w-warn); }

/* command-bar search */
.main-header .form-control-navbar,
.wb-search .form-control {
    background: #f3f4f8; border: 1px solid var(--w-line); color: var(--w-ink);
    border-radius: 8px 0 0 8px;
}
.main-header .form-control-navbar:focus { background: #fff; border-color: var(--w-acc); }
.wb-search .btn { border-radius: 0 8px 8px 0; border: 1px solid var(--w-line); border-left: 0; background: #f3f4f8; color: var(--w-mut); }
.wb-search .btn:hover { color: var(--w-acc); }
.wb-search .input-group { min-width: 320px; }

/* ============================================================================
   ICON RAIL  (AdminLTE .main-sidebar, used collapsed by default)
   ========================================================================== */
.main-sidebar {
    background: var(--w-rail) !important;
    border-right: 1px solid rgba(255,255,255,.04);
}
.main-sidebar .brand-link {
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: transparent; text-align: center; padding-top: .9rem; padding-bottom: .9rem;
}
.main-sidebar .brand-text { color: #fff; font-weight: 700; letter-spacing: -.01em; }
.sidebar .user-panel .info a { color: #dfe3ee; }
.sidebar .user-panel { border-bottom: 1px solid rgba(255,255,255,.06); }

/* nav items */
.nav-sidebar .nav-link { color: var(--w-rail-ink) !important; border-radius: 8px; margin: 1px 8px; }
.nav-sidebar .nav-link .nav-icon { color: var(--w-rail-ink); }
.nav-sidebar .nav-link:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.nav-sidebar .nav-link:hover .nav-icon { color: #fff; }
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview .nav-link.active {
    background: var(--w-acc) !important; color: #fff !important;
    box-shadow: 0 2px 6px rgba(79,70,229,.4);
}
.nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: #fff !important; }
.nav-sidebar .nav-treeview .nav-link { color: #97a0b5 !important; }
.nav-sidebar .nav-treeview .nav-link:hover { background: rgba(255,255,255,.05) !important; color:#fff !important; }
.nav-header { color: #6b7488 !important; letter-spacing: .06em; font-size: .68rem; }
.brand-link:hover { color: #fff; }

/* ============================================================================
   CARDS  →  instrument cards
   ========================================================================== */
.card {
    background: var(--w-card);
    border: 1px solid var(--w-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20,22,35,.04), 0 1px 3px rgba(20,22,35,.03);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--w-line);
    border-radius: 10px 10px 0 0;
    padding: .7rem 1rem;
}
.card-header .card-title { font-weight: 600; font-size: 1rem; color: var(--w-ink); }
/* AdminLTE "card-outline" colored top border — retint to our palette */
.card.card-primary.card-outline { border-top: 3px solid var(--w-acc); }
.card.card-info.card-outline    { border-top: 3px solid var(--w-info); }
.card.card-danger.card-outline  { border-top: 3px solid var(--w-bad); }
.card.card-success.card-outline { border-top: 3px solid var(--w-ok); }
.card.card-warning.card-outline { border-top: 3px solid var(--w-warn); }
/* solid colored headers (e.g. alert cards) stay legible but softer */
.card-header.bg-danger { background: var(--w-bad) !important; border-radius: 10px 10px 0 0; }

/* content-header title */
.content-header h1, .content h1.m-0 { font-weight: 700; letter-spacing: -.01em; color: var(--w-ink); }

/* ============================================================================
   KPI SMALL-BOXES  →  white instrument tiles with a semantic accent
   (dashboard.php uses bg-success/danger/warning/info/secondary on .small-box)
   ========================================================================== */
.small-box {
    background: var(--w-card) !important;
    color: var(--w-ink) !important;
    border: 1px solid var(--w-line);
    border-left-width: 4px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20,22,35,.04);
    overflow: hidden;
}
.small-box .inner h3 { color: var(--w-ink); font-weight: 800; }
.small-box .inner p  { color: var(--w-mut); font-weight: 600; }
.small-box .icon { color: rgba(26,29,41,.08) !important; top: 6px; }
.small-box .icon i { color: inherit !important; }
.small-box .small-box-footer {
    background: transparent; color: var(--w-mut) !important;
    border-top: 1px solid var(--w-line);
}
.small-box .small-box-footer:hover { color: var(--w-acc) !important; background: var(--w-acc-sft); }
/* map AdminLTE bg-* to a left accent + tinted number */
.small-box.bg-success  { border-left-color: var(--w-ok);   }
.small-box.bg-success  .inner h3 { color: var(--w-ok); }
.small-box.bg-danger   { border-left-color: var(--w-bad);  }
.small-box.bg-danger   .inner h3 { color: var(--w-bad); }
.small-box.bg-danger   .icon { color: rgba(220,38,38,.14) !important; }
.small-box.bg-warning  { border-left-color: var(--w-warn); }
.small-box.bg-warning  .inner h3 { color: var(--w-warn); }
.small-box.bg-info     { border-left-color: var(--w-info); }
.small-box.bg-info     .inner h3 { color: var(--w-info); }
.small-box.bg-secondary{ border-left-color: #9aa1b2; }
.small-box.bg-secondary .inner h3 { color: #4b5162; }

/* info-box parity */
.info-box { border: 1px solid var(--w-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(20,22,35,.04); }

/* ============================================================================
   INSTRUMENT CARDS  (dashboard health tiles: value + meter + sparkline)
   ========================================================================== */
.wb-inst {
    display: block; background: var(--w-card);
    border: 1px solid var(--w-line); border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20,22,35,.04);
    padding: .85rem 1rem .8rem; color: var(--w-ink); text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease;
    height: 100%;
}
a.wb-inst:hover { border-color: var(--w-acc); box-shadow: 0 4px 14px rgba(79,70,229,.12); color: var(--w-ink); text-decoration: none; }
.wb-inst-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; }
.wb-inst-label { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; font-weight: 700; color: var(--w-mut); }
.wb-inst-head .wb-inst-ico { color: #c3c8d8; font-size: .95rem; flex: 0 0 auto; margin-left: auto; }
.wb-inst-val { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.wb-inst-val sup { font-size: .9rem; font-weight: 700; color: var(--w-mut); margin-left: 1px; }
.wb-inst-sub { font-size: .74rem; color: var(--w-mut); margin-top: .15rem; }
.wb-inst.is-ok  .wb-inst-val { color: var(--w-ok); }
.wb-inst.is-warn .wb-inst-val { color: var(--w-warn); }
.wb-inst.is-bad  .wb-inst-val { color: var(--w-bad); }

/* meter bar */
.meter { height: 6px; border-radius: 4px; background: #eceef5; overflow: hidden; margin: .55rem 0 .1rem; }
.meter > span { display: block; height: 100%; border-radius: 4px; background: var(--w-acc); transition: width .3s ease; }
.meter.is-ok   > span { background: var(--w-ok); }
.meter.is-warn > span { background: var(--w-warn); }
.meter.is-bad  > span { background: var(--w-bad); }

/* sparkline */
.wb-spark { display: block; width: 100%; height: 30px; margin-top: .5rem; }
.wb-spark-cap { display: flex; justify-content: space-between; font-size: .64rem; color: #9aa1b2; margin-top: 1px; }

/* chips row (verdict / breakdown) */
.wb-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.wb-chip {
    font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 6px;
    background: #f0f1f7; color: var(--w-mut);
}
.wb-chip.is-ok   { background: #e7f6ec; color: var(--w-ok); }
.wb-chip.is-warn { background: #fdf3e3; color: var(--w-warn); }
.wb-chip.is-bad  { background: #fdeaea; color: var(--w-bad); }

/* ============================================================================
   BUTTONS / BADGES / TABLES
   ========================================================================== */
.btn-primary { background: var(--w-acc); border-color: var(--w-acc); }
.btn-primary:hover, .btn-primary:focus { background: var(--w-acc-d); border-color: var(--w-acc-d); }
.btn-outline-primary { color: var(--w-acc); border-color: var(--w-acc); }
.btn-outline-primary:hover { background: var(--w-acc); border-color: var(--w-acc); }
.btn { border-radius: 8px; }
.btn-xs { border-radius: 6px; }

.badge { font-weight: 600; border-radius: 6px; padding: .3em .55em; }

.table thead th {
    border-top: 0; border-bottom: 1px solid var(--w-line);
    color: var(--w-mut); font-weight: 700; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .03em;
}
.table td, .table th { border-color: var(--w-line); }
.table-hover tbody tr:hover { background: var(--w-acc-sft); }

/* callouts (used on the spectrum analysis panel) */
.callout { border-radius: 8px; background: #fafbfe; box-shadow: none; border: 1px solid var(--w-line); border-left-width: 4px; }
.callout-danger    { border-left-color: var(--w-bad); }
.callout-warning   { border-left-color: var(--w-warn); }
.callout-secondary { border-left-color: #9aa1b2; }
.callout-success   { border-left-color: var(--w-ok); }

/* breadcrumbs */
.breadcrumb { background: transparent; padding-left: 0; }
.breadcrumb-item.active { color: var(--w-mut); }

/* dropdowns */
.dropdown-menu { border: 1px solid var(--w-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(20,22,35,.12); }
.dropdown-item:hover { background: var(--w-acc-sft); color: var(--w-acc); }