/* ============================================================
   FIBRE CODE — SmarterACS operator console
   Identity = TIA-598 fibre colours (tags only, never fills).
   Health   = telecom alarm ladder (LED + word, never colour alone).
   Loads after saas-modern.css and before tenant branding.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* neutral scale */
  --fc-bg:        #ECEFF3;
  --fc-surface:   #FFFFFF;
  --fc-surface-2: #F5F7FA;
  --fc-line:      #DCE1E8;
  --fc-line-2:    #C3CBD5;
  --fc-text:      #141A21;
  --fc-text-2:    #3A4551;
  --fc-muted:     #5C6773;
  --fc-rail:      #0F151C;
  --fc-rail-text: #A9B4C0;
  --fc-rail-hi:   #FFFFFF;
  --fc-rail-line: #1E2833;

  /* the single accent (tenant branding overrides --primary after this file) */
  --primary: #1F6FEB;
  --fc-accent: var(--primary);
  --fc-accent-tint: color-mix(in srgb, var(--fc-accent) 12%, transparent);

  /* alarm ladder — health only */
  --fc-ok:    #1B8A5A;
  --fc-info:  #2F6FEB;
  --fc-minor: #B7791F;
  --fc-major: #D9480F;
  --fc-crit:  #D92D20;
  --fc-stale: #6B7785;
  --fc-ok-t:    #146C45;
  --fc-minor-t: #8A5A12;
  --fc-major-t: #B33A0B;
  --fc-crit-t:  #B42318;

  /* fibre identity strands (tags only) */
  --fc-s1:#0072BC; --fc-s2:#F7941D; --fc-s3:#39A24A; --fc-s4:#8B5A2B;
  --fc-s5:#6E7B8B; --fc-s6:#B9C2CC; --fc-s7:#E4B800; --fc-s8:#8A5CF6;
  --fc-s9:#E5508A; --fc-s10:#12A8B8; --fc-s11:#3D4651; --fc-s12:#C2410C;

  --fc-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fc-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fc-radius: 6px;
  --fc-ease: cubic-bezier(.16, 1, .3, 1);
}

.dark-layout, body.dark-layout {
  --fc-bg:        #0C1015;
  --fc-surface:   #141A21;
  --fc-surface-2: #1A222B;
  --fc-line:      #26303B;
  --fc-line-2:    #36424F;
  --fc-text:      #E7ECF1;
  --fc-text-2:    #C3CCD6;
  --fc-muted:     #98A4B1;
  --fc-rail:      #090D11;
  --fc-ok-t:    #4FD08F;
  --fc-minor-t: #E8B04A;
  --fc-major-t: #FF8A4C;
  --fc-crit-t:  #FF7A70;
  --fc-stale:   #8A96A4;
}

/* ── Base ─────────────────────────────────────────────────── */
html body,
body .navbar, body .main-menu, body .card, body .form-control,
body button, body input, body select, body textarea,
body .dropdown-menu, body .modal-content, body .table {
  font-family: var(--fc-font) !important;
}
html body {
  background: var(--fc-bg) !important;
  color: var(--fc-text-2);
  font-size: 14px;
  font-feature-settings: 'tnum' 1;
}
h1,h2,h3,h4,h5,h6,.card-title,.content-header-title {
  font-family: var(--fc-font) !important;
  color: var(--fc-text) !important;
  letter-spacing: -0.005em !important;
  font-weight: 600 !important;
  text-wrap: balance;
}
a { color: var(--fc-accent); }
.text-muted, small, .text-secondary { color: var(--fc-muted) !important; }
::selection { background: color-mix(in srgb, var(--fc-accent) 28%, transparent); color: inherit; }
* { caret-color: var(--fc-accent); }
:focus-visible { outline: 2px solid var(--fc-accent) !important; outline-offset: 2px; }
.form-control:focus-visible, .btn:focus-visible { outline-offset: 1px; }
.fc-mono, .fc-mono * { font-family: var(--fc-mono) !important; font-size: .86em; letter-spacing: 0; }

* { scrollbar-width: thin; scrollbar-color: var(--fc-line-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--fc-line-2); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Left rail ────────────────────────────────────────────── */
.main-menu, .main-menu.menu-light, .main-menu.menu-dark {
  background: var(--fc-rail) !important;
  box-shadow: none !important;
  border-right: 1px solid var(--fc-rail-line);
}
.main-menu .navbar-header { background: transparent !important; height: 3.9rem; }
.main-menu .navbar-header .brand-text {
  color: var(--fc-rail-hi) !important; font-size: 1.05rem !important; font-weight: 600 !important;
  letter-spacing: .01em !important; margin: 0 0 0 .6rem;
}
.main-menu .brand-logo svg { display: none; }
.main-menu .brand-logo {
  display: inline-block; width: 22px; height: 22px; vertical-align: middle; border-radius: 3px;
  background: linear-gradient(90deg,
    var(--fc-s1) 0 25%, var(--fc-s2) 25% 50%, var(--fc-s3) 50% 75%, var(--fc-s8) 75% 100%);
}
.main-menu .navigation { background: transparent !important; }
.main-menu .navigation li a {
  color: var(--fc-rail-text) !important; font-weight: 500; border-radius: 5px !important;
  margin: 1px 10px !important; padding: 9px 12px !important; transition: background .15s, color .15s;
}
.main-menu .navigation li a svg, .main-menu .navigation li a i { color: inherit; stroke: currentColor; opacity: .85; }
.main-menu .navigation li:not(.open):not(.sidebar-group-active):hover > a { background: #18222D !important; color: var(--fc-rail-hi) !important; transform: none !important; }
.main-menu .navigation li.active > a,
.main-menu-content .navigation-main > .nav-item.active > a {
  background: color-mix(in srgb, var(--fc-accent) 22%, transparent) !important;
  color: var(--fc-rail-hi) !important; box-shadow: none !important;
}
.main-menu .navigation li.active > a svg, .main-menu .navigation li.active > a i { stroke: #fff !important; opacity: 1; }
.main-menu .navigation .navigation-header {
  color: #6F7C8A !important; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 1.2rem 22px .4rem;
}
.main-menu .navigation li ul.menu-content li a { margin-left: 18px !important; }

/* ── Top bar ──────────────────────────────────────────────── */
.header-navbar, .header-navbar.floating-nav, .header-navbar.navbar-shadow {
  background: var(--fc-surface) !important; box-shadow: none !important;
  border: 1px solid var(--fc-line) !important; border-radius: var(--fc-radius) !important;
}
.header-navbar .nav-link, .header-navbar .user-name { color: var(--fc-text-2) !important; }
.header-navbar .user-status, .header-navbar .badge { color: var(--fc-muted) !important; }
.content-header-title { font-size: 1.35rem; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--fc-surface) !important; border: 1px solid var(--fc-line) !important;
  border-radius: var(--fc-radius) !important; box-shadow: none !important;
}
.card:hover, .card.pull-up:hover { transform: none !important; box-shadow: none !important; }
.card .card-header { background: transparent !important; border-bottom: 1px solid var(--fc-line); padding: .85rem 1.1rem; }
.card .card-title { font-size: .95rem !important; }
.card-header .section-header h5 { font-size: .95rem; color: var(--fc-text); }
.card-header .section-header svg { opacity: .6; stroke: var(--fc-muted); }
.card .card-footer { background: transparent; border-top: 1px solid var(--fc-line); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  border-radius: 5px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  box-shadow: none !important; transform: none !important; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover, .btn:active { transform: none !important; box-shadow: none !important; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--fc-accent) !important; background-image: none !important; border: 1px solid var(--fc-accent) !important; color: #fff !important;
}
.btn-primary:hover { background: color-mix(in srgb, var(--fc-accent) 86%, #000) !important; }
.btn-outline-primary { color: var(--fc-accent) !important; border: 1px solid var(--fc-line-2) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--fc-accent-tint) !important; border-color: var(--fc-accent) !important; color: var(--fc-accent) !important; }
.btn-outline-danger { color: var(--fc-crit-t) !important; border: 1px solid var(--fc-line-2) !important; background: transparent !important; }
.btn-outline-danger:hover { background: color-mix(in srgb, var(--fc-crit) 12%, transparent) !important; border-color: var(--fc-crit) !important; color: var(--fc-crit-t) !important; }
.btn-danger { background: var(--fc-crit) !important; border-color: var(--fc-crit) !important; }
.btn-success { background: var(--fc-ok) !important; border-color: var(--fc-ok) !important; }
.btn-outline-secondary, .btn-secondary { background: var(--fc-surface-2) !important; color: var(--fc-text-2) !important; border: 1px solid var(--fc-line-2) !important; }
.btn-flat-primary, .btn-flat-secondary { box-shadow: none !important; }
.btn-sm { min-height: 30px; padding: .3rem .7rem; }
@media (pointer: coarse) { .btn, .form-control, .nav-link, .dropdown-item { min-height: 44px; } }

/* ── Forms ────────────────────────────────────────────────── */
.form-control, .custom-select, .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--fc-surface) !important; color: var(--fc-text) !important;
  border: 1px solid var(--fc-line-2) !important; border-radius: 5px !important; box-shadow: none !important; min-height: 36px;
}
.form-control:focus, .custom-select:focus, .select2-container--open .select2-selection {
  border-color: var(--fc-accent) !important; box-shadow: 0 0 0 3px var(--fc-accent-tint) !important;
}
.form-control::placeholder { color: var(--fc-muted); opacity: 1; }
label, .form-label { color: var(--fc-text-2); font-weight: 500; font-size: .82rem; }
.select2-dropdown { background: var(--fc-surface); border: 1px solid var(--fc-line-2); border-radius: 5px; }
.select2-results__option--highlighted { background: var(--fc-accent) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--fc-accent); border-color: var(--fc-accent); }

/* ── Tables (the work surface) ────────────────────────────── */
.table { color: var(--fc-text-2); font-variant-numeric: tabular-nums; }
.table thead th, .thead-light th, .dataTable thead th {
  background: var(--fc-surface-2) !important; color: var(--fc-muted) !important;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border: 0 !important; border-bottom: 1px solid var(--fc-line) !important; border-radius: 0 !important; padding: .7rem .85rem;
  white-space: nowrap;
}
.table tbody td { padding: .6rem .85rem; border-top: 1px solid var(--fc-line); vertical-align: middle; color: var(--fc-text-2); }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr { background: transparent; }
.table tbody tr:hover td, .table-hover tbody tr:hover, .product-list-table tbody tr:hover td, .recent-table tbody tr:hover td {
  background: var(--fc-surface-2) !important;
}
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
table.dataTable tbody tr.selected td { background: var(--fc-accent-tint) !important; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: 5px; }
.dataTables_info, .dataTables_length label, .dataTables_filter label { color: var(--fc-muted); font-size: .8rem; }
.page-item .page-link { border-radius: 5px; color: var(--fc-text-2); background: transparent; border: 0; }
.page-item.active .page-link { background: var(--fc-accent) !important; color: #fff; box-shadow: none; }
td a { font-weight: 500; }

/* ── Health: every .badge becomes an LED + word ───────────── */
.badge {
  display: inline-flex; align-items: center; gap: .4rem; padding: 0 !important; background: transparent !important;
  color: var(--fc-text-2) !important; font-weight: 500 !important; font-size: .8rem !important;
  border: 0 !important; border-radius: 0 !important; letter-spacing: 0; white-space: nowrap;
}
.badge::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fc-stale);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-stale) 20%, transparent);
}
.badge-success::before, .badge-light-success::before { background: var(--fc-ok);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-ok) 22%, transparent); }
.badge-danger::before,  .badge-light-danger::before  { background: var(--fc-crit);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-crit) 22%, transparent); }
.badge-warning::before, .badge-light-warning::before { background: var(--fc-minor);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-minor) 22%, transparent); }
.badge-info::before,    .badge-light-info::before,
.badge-primary::before, .badge-light-primary::before { background: var(--fc-info);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-info) 22%, transparent); }
.badge-success, .badge-light-success { color: var(--fc-ok-t) !important; }
.badge-danger,  .badge-light-danger  { color: var(--fc-crit-t) !important; }
.badge-warning, .badge-light-warning { color: var(--fc-minor-t) !important; }
.badge-info, .badge-light-info, .badge-primary, .badge-light-primary { color: var(--fc-text-2) !important; }
.dash-bell-badge, .navbar .badge-up, .badge-pill.badge-up { display: flex !important; }
.dash-bell-badge::before, .badge-up::before { display: none; }
.status-dot.online  { background: var(--fc-ok);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-ok) 22%, transparent); }
.status-dot.offline { background: var(--fc-crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-crit) 22%, transparent); }

/* ── Fibre identity tag (zone / vendor) ───────────────────── */
.fc-tag { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; white-space: nowrap; }
.fc-tag::before { content: ''; width: 4px; height: 16px; border-radius: 1px; background: var(--fc-s5); flex: none; }
.fc-tag[data-fc="1"]::before{background:var(--fc-s1)} .fc-tag[data-fc="2"]::before{background:var(--fc-s2)}
.fc-tag[data-fc="3"]::before{background:var(--fc-s3)} .fc-tag[data-fc="4"]::before{background:var(--fc-s4)}
.fc-tag[data-fc="5"]::before{background:var(--fc-s5)} .fc-tag[data-fc="6"]::before{background:var(--fc-s6)}
.fc-tag[data-fc="7"]::before{background:var(--fc-s7)} .fc-tag[data-fc="8"]::before{background:var(--fc-s8)}
.fc-tag[data-fc="9"]::before{background:var(--fc-s9)} .fc-tag[data-fc="10"]::before{background:var(--fc-s10)}
.fc-tag[data-fc="11"]::before{background:var(--fc-s11)} .fc-tag[data-fc="12"]::before{background:var(--fc-s12)}

/* changed-state marker: stays lit until acknowledged */
tr.fc-changed td:first-child, tr.fc-changed td:nth-child(2) { position: relative; }
tr.fc-changed td { background: color-mix(in srgb, var(--fc-minor) 9%, transparent) !important; }
tr.fc-changed td:nth-child(2)::after {
  content: 'changed'; margin-left: .55rem; font-family: var(--fc-font); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fc-minor-t);
}

/* ── Devices: status filter as a segmented control ────────── */
.status-pills { gap: 0 !important; border: 1px solid var(--fc-line-2); border-radius: 5px; overflow: hidden; background: var(--fc-surface-2); }
.status-pill, .status-pill.pill-all, .status-pill.pill-online, .status-pill.pill-offline {
  border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--fc-text-2) !important;
  padding: .42rem .95rem !important; font-size: .82rem !important; font-weight: 500 !important; box-shadow: none !important; transform: none !important;
  border-right: 1px solid var(--fc-line) !important;
}
.status-pill:last-child { border-right: 0 !important; }
.status-pill .dot { width: 8px; height: 8px; }
.status-pill.pill-online .dot  { background: var(--fc-ok); }
.status-pill.pill-offline .dot { background: var(--fc-crit); }
.status-pill.pill-all .dot     { background: var(--fc-stale); }
.status-pill.active, .status-pill.pill-all.active, .status-pill.pill-online.active, .status-pill.pill-offline.active {
  background: var(--fc-surface) !important; color: var(--fc-text) !important; box-shadow: inset 0 -2px 0 var(--fc-accent) !important; font-weight: 600 !important;
}
.status-pill strong { font-family: var(--fc-mono); font-weight: 500; font-size: .8rem; }

/* ── Dashboard: fleet strip ───────────────────────────────── */
.row.match-height > [class*="col"] > .kpi-card { height: 100%; }
.kpi-card { border: 1px solid var(--fc-line) !important; background: var(--fc-surface) !important; }
.kpi-inner, .kpi-inner[class*="kpi-grad-"] { background: transparent !important; color: var(--fc-text) !important; }
.kpi-grad-purple, .kpi-grad-green, .kpi-grad-red, .kpi-grad-orange, .kpi-grad-blue { background: transparent !important; }
.kpi-card .kpi-body { padding: 1rem 1.15rem .75rem; }
.kpi-card .kpi-value { color: var(--fc-text) !important; font-family: var(--fc-mono); font-weight: 500; font-size: 1.85rem; letter-spacing: -.02em; }
.kpi-card .kpi-label { color: var(--fc-muted) !important; font-size: .78rem; font-weight: 500; letter-spacing: .02em; margin-top: .35rem; }
.kpi-card .kpi-icon { display: none; }
.kpi-card .kpi-footer-row { border-top: 1px solid var(--fc-line) !important; padding: .5rem 1.15rem; }
.kpi-card .kpi-footer-row a { color: var(--fc-accent) !important; opacity: 1; font-weight: 500; }
.kpi-card::before { content: ''; display: block; height: 3px; background: var(--fc-stale); }
.kpi-card:has(.kpi-grad-green)::before  { background: var(--fc-ok); }
.kpi-card:has(.kpi-grad-red)::before    { background: var(--fc-crit); }
.kpi-card:has(.kpi-grad-orange)::before { background: var(--fc-minor); }
.kpi-card:has(.kpi-grad-blue)::before   { background: var(--fc-info); }
.kpi-card:has(.kpi-grad-purple)::before { background: var(--fc-accent); }

.fc-fleetbar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: var(--fc-line); margin: 0 0 1rem; }
.fc-fleetbar > i { display: block; height: 100%; }
.fc-fleetbar .on  { background: var(--fc-ok); }
.fc-fleetbar .off { background: var(--fc-crit); }
.fc-fleetlegend { display: flex; gap: 1.2rem; font-size: .78rem; color: var(--fc-muted); margin: -.55rem 0 1rem; }
.fc-fleetlegend b { font-family: var(--fc-mono); font-weight: 500; color: var(--fc-text); }

#fleet-alert-banner { background: color-mix(in srgb, var(--fc-crit) 8%, var(--fc-surface)) !important; border: 1px solid color-mix(in srgb, var(--fc-crit) 40%, var(--fc-line)) !important; border-radius: var(--fc-radius) !important; }
#fleet-alert-banner .ban-title { color: var(--fc-crit-t) !important; }
#fleet-alert-banner .ban-sub { color: var(--fc-muted) !important; }
#fleet-alert-banner .ban-icon { background: color-mix(in srgb, var(--fc-crit) 14%, transparent) !important; }

.live-badge { color: var(--fc-ok-t) !important; font-weight: 500; }
.live-dot { background: var(--fc-ok) !important; }
.alert-device-row, .activity-row { border-bottom: 1px solid var(--fc-line) !important; }
.alert-device-row:hover { background: var(--fc-surface-2) !important; }
.alert-dev-icon, .activity-icon { background: var(--fc-surface-2) !important; border-radius: 4px !important; }
.alert-dev-icon svg { color: var(--fc-crit) !important; }
.alert-dev-serial, .bell-item-serial { font-family: var(--fc-mono) !important; font-size: .78rem; color: var(--fc-text) !important; }
.alert-dev-dur, .activity-sub, .bell-item-time, .activity-time { color: var(--fc-muted) !important; }
.activity-msg { color: var(--fc-text-2) !important; }
.recent-table th { color: var(--fc-muted) !important; }
.rate-nums .num-val { font-family: var(--fc-mono); font-weight: 500; }
.rate-nums .num-lab, .chart-empty { color: var(--fc-muted) !important; }
.text-success { color: var(--fc-ok-t) !important; } .text-danger { color: var(--fc-crit-t) !important; }
.text-warning { color: var(--fc-minor-t) !important; } .text-primary { color: var(--fc-accent) !important; }

/* quick actions: plain link rows, not tiles */
.qa-card { display: flex !important; align-items: center; gap: .6rem; text-align: left !important; border: 1px solid var(--fc-line) !important; border-radius: 5px !important; padding: .55rem .7rem !important; background: transparent !important; color: var(--fc-text-2) !important; transform: none !important; box-shadow: none !important; }
.qa-card:hover { background: var(--fc-surface-2) !important; border-color: var(--fc-line-2) !important; color: var(--fc-text) !important; transform: none !important; }
.qa-card .qa-icon { width: 18px !important; height: 18px !important; margin: 0 !important; background: transparent !important; }
.qa-card .qa-icon svg { width: 16px !important; height: 16px !important; color: var(--fc-muted) !important; }
.qa-card .qa-label { font-size: .82rem; font-weight: 500; }

.bell-dropdown { background: var(--fc-surface) !important; border: 1px solid var(--fc-line) !important; box-shadow: 0 6px 20px rgba(0,0,0,.14) !important; border-radius: var(--fc-radius) !important; }
.bell-header, .bell-item, .bell-footer { border-color: var(--fc-line) !important; color: var(--fc-text-2) !important; }
.bell-item:hover { background: var(--fc-surface-2) !important; }
.bell-footer a { color: var(--fc-accent) !important; }

/* ── Modals & dropdowns ───────────────────────────────────── */
.modal-content { background: var(--fc-surface) !important; border: 1px solid var(--fc-line-2) !important; border-radius: 8px !important; box-shadow: 0 18px 48px rgba(0,0,0,.28) !important; }
.modal-header, .modal-header[style] { background: var(--fc-surface) !important; background-image: none !important; border-bottom: 1px solid var(--fc-line) !important; }
.modal-header .modal-title, .modal-header[style] .modal-title { color: var(--fc-text) !important; font-weight: 600; }
.modal-header .close, .modal-header[style] .close { color: var(--fc-muted) !important; opacity: 1 !important; text-shadow: none; }
.modal-footer, .modal-footer[style] { border-top: 1px solid var(--fc-line) !important; }
.btn-primary[style] { background: var(--fc-accent) !important; background-image: none !important; }
.dropdown-menu { background: var(--fc-surface) !important; border: 1px solid var(--fc-line) !important; border-radius: var(--fc-radius); box-shadow: 0 8px 24px rgba(0,0,0,.14) !important; }
.dropdown-item { color: var(--fc-text-2); } .dropdown-item:hover { background: var(--fc-surface-2) !important; color: var(--fc-text); }
.alert { border-radius: var(--fc-radius); }

/* ── Tabs / pills (device view) ───────────────────────────── */
.nav-pills .nav-link { border-radius: 5px !important; color: var(--fc-text-2); font-weight: 500; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: var(--fc-accent-tint) !important; color: var(--fc-accent) !important; box-shadow: none !important;
}
.nav-tabs .nav-link.active { color: var(--fc-accent) !important; border-bottom: 2px solid var(--fc-accent) !important; background: transparent !important; }
.breadcrumb-item a { color: var(--fc-muted); }

/* ── Reduce motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Dark theme: beat saas-modern's slate overrides ───────── */
.dark-layout {
  --fc-link: color-mix(in srgb, var(--fc-accent) 58%, #fff);
}
:root { --fc-link: var(--fc-accent); }
body.dark-layout, .dark-layout body { background-color: var(--fc-bg) !important; }
.dark-layout .card, .dark-layout .modal-content, .dark-layout .bell-dropdown { background: var(--fc-surface) !important; }
.dark-layout .card { border-color: var(--fc-line) !important; }
.dark-layout .form-control, .dark-layout .custom-select { background: var(--fc-surface-2) !important; border-color: var(--fc-line-2) !important; color: var(--fc-text) !important; }
.dark-layout .form-control:focus { background: var(--fc-surface) !important; }
.dark-layout .table thead th, .dark-layout .thead-light th { background: var(--fc-surface-2) !important; }
.dark-layout .table tbody td { color: var(--fc-text-2); }
.dark-layout .dropdown-menu { background: var(--fc-surface) !important; }
.dark-layout .header-navbar, .dark-layout .header-navbar.floating-nav { background: var(--fc-surface) !important; }
.dark-layout .header-navbar-shadow, .dark-layout .content-wrapper::before { background: none !important; }
.dark-layout .table tbody tr:hover td { background: var(--fc-surface-2) !important; }
.dark-layout .app-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.qa-card):not(.status-pill):not(.navbar-brand),
.dark-layout .text-primary, .dark-layout .btn-outline-primary,
.dark-layout .kpi-card .kpi-footer-row a { color: var(--fc-link) !important; }
.dark-layout .main-menu .navigation li a { color: var(--fc-rail-text) !important; }
.dark-layout .main-menu .navigation li.active > a { color: #fff !important; }
.dark-layout .btn-outline-secondary, .dark-layout .btn-secondary { background: var(--fc-surface-2) !important; color: var(--fc-text-2) !important; }
.dark-layout .status-pills { background: var(--fc-surface-2); }
.dark-layout .status-pill.active { background: var(--fc-surface) !important; }
.dark-layout .page-link { color: var(--fc-text-2); }
.dark-layout .select2-dropdown, .dark-layout .select2-container--default .select2-selection--single { background: var(--fc-surface-2) !important; color: var(--fc-text) !important; }
.dark-layout .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--fc-text) !important; }

/* Offline rows: "stale" (5 min–24 h) reads quiet, "24h+" reads critical */
.badge-secondary { color: var(--fc-muted) !important; }

/* dark: table body must sit on the card surface, sidebar keeps rail colours */
body.dark-layout .table, body.dark-layout .table tbody tr, body.dark-layout .table tbody td,
body.dark-layout .card-datatable, body.dark-layout .dataTables_wrapper { background-color: transparent !important; }
body.dark-layout .table tbody tr:hover td { background-color: var(--fc-surface-2) !important; }
body.dark-layout .main-menu .navigation li a { color: var(--fc-rail-text) !important; }
body.dark-layout .main-menu .navigation li.active > a { color: #fff !important; }
body.dark-layout .main-menu .navigation li:hover > a { color: #fff !important; }
body.dark-layout .main-menu .navigation .navigation-header { color: #7A8794 !important; }
html body.dark-layout .main-menu .main-menu-content .navigation li > a { color: var(--fc-rail-text) !important; }
html body.dark-layout .main-menu .main-menu-content .navigation li.active > a,
html body.dark-layout .main-menu .main-menu-content .navigation li > a:hover { color: #fff !important; }
body.dark-layout tr.fc-changed td { background-color: color-mix(in srgb, var(--fc-minor) 14%, transparent) !important; }

/* ============================================================
   Sidebar — one complete state set (beats Vuexy + saas-modern)
   rest · hover · active · open group · submenu · focus
   ============================================================ */
html body .main-menu.main-menu .navigation li > a,
html body .main-menu.main-menu .navigation li > a:hover,
html body .main-menu.main-menu .navigation li.open > a,
html body .main-menu.main-menu .navigation li.sidebar-group-active > a {
  transform: none !important; box-shadow: none !important; background-image: none !important;
  border-radius: 5px !important; transition: background-color .15s ease, color .15s ease !important;
}
/* rest */
html body .main-menu.main-menu .navigation li > a {
  background-color: transparent !important; color: var(--fc-rail-text) !important;
  margin: 1px 10px !important; padding: 9px 12px !important; line-height: 1.35;
}
html body .main-menu.main-menu .navigation li > a .menu-title { font-size: .9rem !important; font-weight: 500 !important; }
html body .main-menu.main-menu .navigation li > a .menu-item  { font-size: .86rem !important; font-weight: 500 !important; }
html body .main-menu.main-menu .navigation li > a svg,
html body .main-menu.main-menu .navigation li > a i { color: inherit !important; stroke: currentColor !important; opacity: .8; width: 17px; height: 17px; }
/* hover — neutral lift, never blue */
html body .main-menu.main-menu .navigation li > a:hover,
html body .main-menu.main-menu .navigation li.open > a:hover,
html body .main-menu.main-menu .navigation li.sidebar-group-active > a:hover {
  background-color: #1A2430 !important; color: #fff !important;
}
html body .main-menu.main-menu .navigation li > a:hover svg,
html body .main-menu.main-menu .navigation li > a:hover i { opacity: 1; }
/* open parent group: quiet, same as rest */
html body .main-menu.main-menu .navigation li.open > a,
html body .main-menu.main-menu .navigation li.sidebar-group-active > a {
  background-color: transparent !important; color: #fff !important;
}
/* submenu list sits flat inside the rail */
html body .main-menu.main-menu .navigation li ul.menu-content,
html body .main-menu.main-menu .navigation li.sidebar-group-active .menu-content {
  background: transparent !important;
}
html body .main-menu.main-menu .navigation li ul.menu-content li > a { padding: 7px 12px 7px 14px !important; }
/* active page — accent tint + white text, no glow, no gradient */
html body .main-menu.main-menu .navigation li.active > a,
html body .main-menu.main-menu .navigation li.active > a:hover,
html body .main-menu.main-menu .navigation li.nav-item.active > a {
  background-color: color-mix(in srgb, var(--fc-accent) 26%, transparent) !important; color: #fff !important;
}
html body .main-menu.main-menu .navigation li.active > a .menu-title { font-weight: 600 !important; }
html body .main-menu.main-menu .navigation li.active > a svg,
html body .main-menu.main-menu .navigation li.active > a i { opacity: 1; }
/* submenu active row: Vuexy paints the <li> itself with a gradient + glow */
html body .main-menu.main-menu .navigation li ul li.active,
html body .main-menu.main-menu .navigation > li ul .active {
  background: transparent !important; box-shadow: none !important;
}
html body .main-menu.main-menu .navigation li ul li.active > a {
  background-color: color-mix(in srgb, var(--fc-accent) 26%, transparent) !important; color: #fff !important;
}
/* keyboard focus is visible on the dark rail */
html body .main-menu.main-menu .navigation li > a:focus-visible { outline: 2px solid #fff !important; outline-offset: -2px; }
/* header toggle icons: stop the purple */
html body .main-menu .navbar-header .nav-toggle .text-primary,
html body .main-menu .navbar-header .modern-nav-toggle { color: var(--fc-rail-text) !important; stroke: var(--fc-rail-text) !important; }
/* team/zone selector card in the rail */
html body .main-menu .main-menu-content .navigation > li.nav-item.has-sub > a::after { opacity: .6; }
/* template nudges menu children 5px on hover; a calm rail stays still */
html body .main-menu.main-menu .navigation li a > *,
html body .main-menu.main-menu .navigation li a:hover > * { transform: none !important; }

/* ============================================================
   ONE IDENTITY — font, colour roles and component defaults
   for every page (templates, vendor widgets, plugins).
   ============================================================ */
:root {
  --success: var(--fc-ok); --danger: var(--fc-crit); --warning: var(--fc-minor);
  --info: var(--fc-info); --secondary: var(--fc-stale);
  --font-family-sans-serif: var(--fc-font); --font-family-monospace: var(--fc-mono);
}

/* One typeface everywhere. Icon fonts and code keep their own. */
html body, html body *:not(i):not(code):not(pre):not(kbd):not(samp):not(.fc-mono):not(.fc-mono *):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.feather):not([class*="icon-"]):not(.material-icons):not([class^="ft-"]):not([class^="bx"]):not([class^="ti-"]):not(.select2-selection__arrow b):not(.apexcharts-text) {
  font-family: var(--fc-font) !important;
}
html body code, html body pre, html body kbd, html body samp { font-family: var(--fc-mono) !important; }
svg text, .apexcharts-text, .apexcharts-legend-text { font-family: var(--fc-font) !important; }

/* Sidebar active: neutral-bright, not saturated blue */
html body .main-menu.main-menu .navigation li.active > a,
html body .main-menu.main-menu .navigation li.active > a:hover,
html body .main-menu.main-menu .navigation li.nav-item.active > a,
html body .main-menu.main-menu .navigation li ul li.active > a {
  background-color: rgba(255, 255, 255, .09) !important; color: #fff !important;
}
html body .main-menu.main-menu .navigation li.active > a svg,
html body .main-menu.main-menu .navigation li.active > a i { color: color-mix(in srgb, var(--fc-accent) 55%, #fff) !important; stroke: color-mix(in srgb, var(--fc-accent) 55%, #fff) !important; }
html body .main-menu.main-menu .navigation li.active > a:hover { background-color: rgba(255, 255, 255, .13) !important; }

/* Page title + breadcrumb bar */
.content-header-title, .content-header .content-header-title, .content-header-left h2 { font-size: 1.3rem !important; font-weight: 600 !important; color: var(--fc-text) !important; border-right-color: var(--fc-line) !important; }
.breadcrumb { background: transparent !important; }
.content-header .btn-icon, .btn-icon.btn-primary { border-radius: 5px !important; }

/* Top bar chips, avatars, bookmarks */
.bg-light-primary, .avatar.bg-light-primary { background: var(--fc-accent-tint) !important; color: var(--fc-accent) !important; }
.bg-light-success { background: color-mix(in srgb, var(--fc-ok) 14%, transparent) !important; color: var(--fc-ok-t) !important; }
.bg-light-danger  { background: color-mix(in srgb, var(--fc-crit) 14%, transparent) !important; color: var(--fc-crit-t) !important; }
.bg-light-warning { background: color-mix(in srgb, var(--fc-minor) 16%, transparent) !important; color: var(--fc-minor-t) !important; }
.bg-light-info    { background: color-mix(in srgb, var(--fc-info) 14%, transparent) !important; color: var(--fc-info) !important; }
.bg-primary { background-color: var(--fc-accent) !important; }
.bg-success { background-color: var(--fc-ok) !important; } .bg-danger { background-color: var(--fc-crit) !important; }
.bg-warning { background-color: var(--fc-minor) !important; } .bg-info { background-color: var(--fc-info) !important; }
.border-primary { border-color: var(--fc-accent) !important; }
.avatar { border-radius: 6px; }
.avatar-status-online { background: var(--fc-ok) !important; }
.bookmark-wrapper .nav-link svg, .bookmark-star { color: var(--fc-muted) !important; }
.header-navbar .badge.badge-primary, .header-navbar .badge-glow { background: var(--fc-accent-tint) !important; color: var(--fc-accent) !important; box-shadow: none !important; padding: .1rem .4rem !important; border-radius: 3px !important; font-size: .64rem; }
.header-navbar .badge.badge-primary::before { display: none; }

/* Buttons: every variant speaks the same language */
.btn-warning { background: var(--fc-minor) !important; border-color: var(--fc-minor) !important; color: #fff !important; }
.btn-info    { background: var(--fc-info) !important; border-color: var(--fc-info) !important; color: #fff !important; }
.btn-outline-success { color: var(--fc-ok-t) !important; border: 1px solid var(--fc-line-2) !important; background: transparent !important; }
.btn-outline-success:hover { background: color-mix(in srgb, var(--fc-ok) 12%, transparent) !important; border-color: var(--fc-ok) !important; }
.btn-outline-warning, .btn-outline-info { background: transparent !important; border: 1px solid var(--fc-line-2) !important; }
.btn-outline-warning { color: var(--fc-minor-t) !important; } .btn-outline-info { color: var(--fc-info) !important; }
.btn-flat-primary, .btn-flat-secondary, .btn-flat-danger { background: transparent !important; }
.btn-gradient-primary, .btn-gradient-info { background: var(--fc-accent) !important; background-image: none !important; }
.btn-icon { border-radius: 5px; }

/* Alerts, progress, tooltips, toasts, sweetalert, tabs */
.alert { border: 1px solid var(--fc-line-2); background: var(--fc-surface-2); color: var(--fc-text-2); }
.alert-success { border-color: color-mix(in srgb, var(--fc-ok) 45%, var(--fc-line)); background: color-mix(in srgb, var(--fc-ok) 9%, var(--fc-surface)); color: var(--fc-ok-t); }
.alert-danger  { border-color: color-mix(in srgb, var(--fc-crit) 45%, var(--fc-line)); background: color-mix(in srgb, var(--fc-crit) 8%, var(--fc-surface)); color: var(--fc-crit-t); }
.alert-warning { border-color: color-mix(in srgb, var(--fc-minor) 45%, var(--fc-line)); background: color-mix(in srgb, var(--fc-minor) 10%, var(--fc-surface)); color: var(--fc-minor-t); }
.alert-info, .alert-primary { border-color: color-mix(in srgb, var(--fc-info) 40%, var(--fc-line)); background: color-mix(in srgb, var(--fc-info) 8%, var(--fc-surface)); color: var(--fc-text-2); }
.alert .alert-heading, .alert h4 { color: inherit !important; }
.progress { background: var(--fc-line); height: 6px; border-radius: 3px; }
.progress-bar { background: var(--fc-accent); }
.progress-bar.bg-success { background: var(--fc-ok) !important; } .progress-bar.bg-danger { background: var(--fc-crit) !important; }
.tooltip-inner { background: #1B232D; border-radius: 4px; font-size: .78rem; }
#toast-container > div { border-radius: 6px !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; opacity: 1 !important; }
.swal2-popup { border-radius: 8px !important; background: var(--fc-surface) !important; color: var(--fc-text-2) !important; }
.swal2-title { color: var(--fc-text) !important; font-weight: 600 !important; }
.swal2-styled.swal2-confirm { background: var(--fc-accent) !important; border-radius: 5px !important; box-shadow: none !important; }
.swal2-icon.swal2-warning { border-color: var(--fc-minor) !important; color: var(--fc-minor) !important; }
.nav-tabs, .nav-pills { border-color: var(--fc-line); }
.nav-tabs .nav-link { color: var(--fc-text-2); font-weight: 500; }
.list-group-item { background: transparent; border-color: var(--fc-line); color: var(--fc-text-2); }
.dropdown-header { color: var(--fc-muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.badge-glow, .badge-light-secondary { box-shadow: none !important; }
hr { border-color: var(--fc-line); }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--fc-line) !important; }
.footer, footer.footer { background: transparent !important; color: var(--fc-muted); box-shadow: none !important; }
/* login & standalone pages inherit the same ground */
.auth-wrapper, .auth-inner { background: var(--fc-bg); }
.auth-wrapper .card, .auth-inner .card { border-radius: 8px !important; }

/* ── Toasts: surface card, readable text, severity shown by icon + hairline + progress ── */
#toast-container { top: 88px !important; right: 20px !important; }
#toast-container > div.toast {
  width: 360px; max-width: calc(100vw - 32px); padding: 14px 40px 14px 56px !important;
  background: var(--fc-surface) !important; background-image: none !important;
  border: 1px solid var(--fc-line-2) !important; border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(15, 21, 28, .18), 0 2px 6px rgba(15, 21, 28, .08) !important;
  opacity: 1 !important; color: var(--fc-text-2) !important;
}
#toast-container > div.toast:hover { box-shadow: 0 14px 36px rgba(15, 21, 28, .22), 0 2px 6px rgba(15, 21, 28, .1) !important; }
.toast .toast-title { color: var(--fc-text) !important; font-size: .95rem !important; font-weight: 600 !important; line-height: 1.35 !important; margin-bottom: 2px; }
.toast .toast-message, .toast .toast-message a { color: var(--fc-text-2) !important; font-size: .86rem !important; line-height: 1.45 !important; font-weight: 400; word-break: break-word; }
.toast .toast-close-button { color: var(--fc-muted) !important; top: 8px !important; right: 10px !important; font-size: 1.4rem !important; opacity: .8; text-shadow: none; }
.toast .toast-close-button:hover { color: var(--fc-text) !important; opacity: 1; }
.toast:before { left: 16px !important; top: 14px; height: 28px !important; width: 28px !important; border-radius: 6px !important; }
.toast:after  { left: 21px !important; top: 19px !important; }
.toast-success:before { background-color: var(--fc-ok) !important; }    .toast-success .toast-progress { background-color: var(--fc-ok) !important; }
.toast-error:before   { background-color: var(--fc-crit) !important; }  .toast-error .toast-progress   { background-color: var(--fc-crit) !important; }
.toast-warning:before { background-color: var(--fc-minor) !important; } .toast-warning .toast-progress { background-color: var(--fc-minor) !important; }
.toast-info:before    { background-color: var(--fc-info) !important; }  .toast-info .toast-progress    { background-color: var(--fc-info) !important; }
.toast .toast-progress { height: 3px !important; opacity: 1 !important; border-radius: 0 0 8px 8px; }
.toast-success .toast-title, .toast-error .toast-title, .toast-warning .toast-title, .toast-info .toast-title { color: var(--fc-text) !important; }
@media (max-width: 575px) { #toast-container { top: 72px !important; right: 12px !important; left: 12px; } #toast-container > div.toast { width: auto; } }

/* Rail footer: one quiet identity line instead of a red badge + duplicate name */
.main-menu .fc-rail-user { margin: .75rem 10px 1rem; padding: .85rem 12px 0; border-top: 1px solid var(--fc-rail-line); display: flex; flex-direction: column; gap: .1rem; }
.main-menu .fc-rail-user-name { color: #E7ECF1; font-size: .84rem; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-menu .fc-rail-user-role { color: #7A8794; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }