/* ============================================================
   SMM Auto-Order Panel — "Neon Glass Ops" theme
   Luminescent glass operations console. Pure CSS restyle.
   Every class/id the views + app.js reference is preserved or
   remapped here so no existing functionality is affected.
   ============================================================ */

:root {
  /* Surfaces — near black + frosted glass */
  --ops-bg0: #06070b;
  --ops-bg1: #0a0c12;
  --ops-bg2: #0e1119;
  --ops-glass: rgba(255, 255, 255, .045);
  --ops-glass-2: rgba(255, 255, 255, .075);
  --ops-glass-soft: rgba(255, 255, 255, .03);
  --ops-line: rgba(255, 255, 255, .085);
  --ops-line-soft: rgba(255, 255, 255, .055);
  --ops-text: #e9edf6;
  --ops-text-2: #aab2c8;
  --ops-muted: #7e88a3;
  --ops-heading: #f4f7ff;

  /* Neon accents */
  --neon-yellow: #d8ff3e;
  --neon-yellow-2: #aaff00;
  --neon-green: #34ff9a;
  --neon-green-2: #00e07f;
  --neon-cyan: #2fe6ff;
  --neon-cyan-2: #00b8ff;
  --neon-magenta: #ff4fd8;
  --neon-magenta-2: #ff2d9c;
  --neon-violet: #9b6bff;
  --neon-amber: #ffc24b;

  /* Bootstrap semantic mapping */
  --bs-primary: var(--neon-cyan);
  --bs-primary-rgb: 47, 230, 255;
  --bs-success: var(--neon-green);
  --bs-success-rgb: 52, 255, 154;
  --bs-info: var(--neon-cyan);
  --bs-info-rgb: 47, 230, 255;
  --bs-warning: var(--neon-yellow);
  --bs-warning-rgb: 216, 255, 62;
  --bs-danger: var(--neon-magenta);
  --bs-danger-rgb: 255, 79, 216;
  --bs-secondary: #6d7691;
  --bs-secondary-rgb: 109, 118, 145;
  --bs-light: #1c2130;
  --bs-light-rgb: 28, 33, 48;
  --bs-dark: #06070b;
  --bs-dark-rgb: 6, 7, 11;
  --bs-body-color: var(--ops-text);
  --bs-body-bg: var(--ops-bg0);
  --bs-border-color: var(--ops-line);
  --bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bs-body-font-size: .925rem;
  --bs-body-line-height: 1.55;
  --bs-link-color: var(--neon-cyan);
  --bs-link-hover-color: #7ff0ff;
  --bs-focus-ring-color: rgba(47, 230, 255, .35);
  --bs-tertiary-bg: var(--ops-glass-soft);
  --bs-secondary-bg: var(--ops-bg2);
  --bs-secondary-color: var(--ops-muted);

  /* App chrome */
  --rail-w: 76px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --glass-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85);
  --glow-cyan: 0 0 22px rgba(47, 230, 255, .45);
  --glow-green: 0 0 22px rgba(52, 255, 154, .4);
  --glow-yellow: 0 0 22px rgba(216, 255, 62, .35);
  --glow-magenta: 0 0 22px rgba(255, 79, 216, .4);
  --transition: .22s cubic-bezier(.4, 0, .2, 1);
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

/* Numeric tabular alignment everywhere numbers matter */
.table td, .table th,
.stat-value, .kpi-value, .num, .balance-amount, .hero-num,
.panel-nav-balance, .feed-qty, .progress-label, .badge {
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(47, 230, 255, .07), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(155, 107, 255, .06), transparent 55%),
    radial-gradient(700px 500px at 60% 120%, rgba(216, 255, 62, .04), transparent 55%),
    var(--ops-bg0);
  background-attachment: fixed;
  color: var(--ops-text);
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: 1.55;
  min-width: 0;
  width: 100%;
}

code, pre, .font-monospace { overflow-wrap: anywhere; word-break: break-word; }
a { overflow-wrap: anywhere; color: var(--neon-cyan); text-decoration: none; transition: color var(--transition); }
a:hover { color: #8ff2ff; }

::selection { background: rgba(47, 230, 255, .28); color: #fff; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232a3c; border-radius: 10px; border: 2px solid var(--ops-bg0); }
::-webkit-scrollbar-thumb:hover { background: #33405c; }

/* ============================================================
   App shell: slim icon rail + main column
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; max-width: 100%; width: 100%; }

/* ---------- Sidebar rail ---------- */
.sidebar {
  width: var(--rail-w);
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100vh;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(13, 16, 24, .92), rgba(8, 10, 15, .96));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--ops-line);
  overflow: hidden;
  transition: width var(--transition), transform var(--transition);
}
body.sidebar-collapsed .sidebar { width: var(--rail-w); }

.sidebar .brand {
  display: flex; align-items: center; justify-content: center;
  padding: 1.15rem .4rem 1rem;
  border-bottom: 1px solid var(--ops-line-soft);
}
.sidebar .brand a { display: flex; align-items: center; justify-content: center; color: #fff; }
.sidebar .brand i {
  font-size: 1.55rem;
  background: linear-gradient(135deg, var(--neon-yellow), var(--neon-green));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(216, 255, 62, .5));
}
.sidebar .brand-text { display: none; }

/* Panel selector slot (filled by JS on mobile; empty on desktop) */
.sidebar-panels:empty { display: none; }
.sidebar-panels { padding: .7rem .6rem; border-bottom: 1px solid var(--ops-line-soft); }

/* Rail nav — icon buttons with tooltips */
.sidebar nav { flex: 1; padding: .9rem .55rem; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: .3rem; }
.sidebar .nav-section { display: none; }

.rail-item { position: relative; }
.sidebar .nav-link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: .72rem 0;
  margin: 0;
  border-radius: 14px;
  color: #8b94ad;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition), transform .15s;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
.sidebar .nav-link i { font-size: 1.28rem; line-height: 1; }
.sidebar .nav-label { display: none; }
.sidebar .nav-link:hover { color: #fff; background: var(--ops-glass); }
.sidebar .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(47, 230, 255, .16), rgba(155, 107, 255, .16));
  border-color: rgba(47, 230, 255, .35);
  box-shadow: inset 0 0 18px rgba(47, 230, 255, .08), 0 0 18px -4px rgba(47, 230, 255, .5);
}
.sidebar .nav-link.active::before {
  content: ""; position: absolute; left: -5px; top: 22%; bottom: 22%; width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--neon-yellow), var(--neon-green));
  box-shadow: 0 0 12px var(--neon-green);
}

/* Dot for settings sub-menu presence */
.rail-item .rail-dot {
  position: absolute; right: 10px; top: 10px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon-yellow); box-shadow: 0 0 8px var(--neon-yellow);
}

/* Flyout (desktop): sub pages of Settings appear on hover / focus */
.rail-fly {
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  min-width: 210px;
  padding: .45rem;
  border-radius: 14px;
  background: rgba(17, 20, 29, .97);
  border: 1px solid var(--ops-line);
  box-shadow: var(--glass-shadow), 0 0 24px -8px rgba(47, 230, 255, .35);
  backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transform: translateX(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 1090;
}
.rail-item:hover .rail-fly, .rail-item:focus-within .rail-fly { opacity: 1; visibility: visible; transform: translateX(0); }
.rail-fly a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: 9px;
  color: var(--ops-text-2); font-size: .84rem; font-weight: 500;
}
.rail-fly a i { width: 1.05rem; text-align: center; color: var(--neon-cyan); }
.rail-fly a:hover { background: var(--ops-glass-2); color: #fff; }
.rail-fly .fly-title {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ops-muted); padding: .3rem .7rem .2rem; font-weight: 700;
}

/* Logout at rail bottom */
.sidebar-foot { padding: .8rem .6rem; border-top: 1px solid var(--ops-line-soft); }
.sidebar-foot .btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .65rem 0; border-radius: 12px;
  background: var(--ops-glass); border: 1px solid var(--ops-line);
  color: var(--ops-muted); font-size: 1.05rem;
}
.sidebar-foot .btn:hover { color: var(--neon-magenta); border-color: rgba(255, 79, 216, .4); box-shadow: var(--glow-magenta); }

/* ---------- Main ---------- */
.main {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  margin-left: var(--rail-w);
  display: flex;
  flex-direction: column;
  width: auto;
}
body.sidebar-collapsed .main { margin-left: var(--rail-w); }

/* ---------- Topbar (capsule nav row) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem 1.25rem;
  background: rgba(8, 10, 15, .78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ops-line);
  min-width: 0; max-width: 100%; width: 100%;
}
.topbar-nav-toggle { display: none; }

/* Capsule pill nav */
.capsule-wrap { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.capsule-wrap::-webkit-scrollbar { display: none; }
.capsule {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem;
  border-radius: 999px;
  background: var(--ops-glass-soft);
  border: 1px solid var(--ops-line-soft);
  white-space: nowrap;
}
.capsule a {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .42rem .95rem;
  border-radius: 999px;
  color: var(--ops-text-2);
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent;
  transition: all var(--transition);
}
.capsule a i { font-size: .95rem; opacity: .85; }
.capsule a:hover { color: #fff; background: var(--ops-glass-2); }
.capsule a.active {
  color: #05060a;
  background: linear-gradient(120deg, var(--neon-yellow), var(--neon-green));
  box-shadow: 0 4px 18px -4px rgba(216, 255, 62, .65);
}
.capsule a.active i { color: #05060a; }
.capsule a.context { border-color: rgba(255, 255, 255, .12); }

.topbar-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

/* Panel switcher + balance */
.panel-nav { display: inline-flex; align-items: center; gap: .4rem; }
.panel-nav-icon { color: var(--neon-cyan); font-size: 1rem; filter: drop-shadow(0 0 6px rgba(47, 230, 255, .6)); }
.panel-nav-select {
  width: auto; min-width: 130px; max-width: 210px;
  background-color: var(--ops-bg2) !important;
  border-color: var(--ops-line) !important;
  color: var(--ops-text) !important;
  font-size: .82rem;
  border-radius: 999px !important;
  padding: .3rem .85rem .3rem 1rem !important;
  cursor: pointer;
}
.panel-nav-balance {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 700; color: var(--neon-green);
  background: rgba(52, 255, 154, .07);
  border: 1px solid rgba(52, 255, 154, .25);
  border-radius: 999px; padding: .24rem .75rem; white-space: nowrap;
}
.panel-nav-balance i { color: var(--neon-green-2); }

/* Clock */
.navbar-clock {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .8rem; color: var(--ops-text-2);
  font-family: var(--mono);
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--ops-glass-soft); border: 1px solid var(--ops-line-soft);
}
.navbar-clock i { color: var(--neon-magenta); }
.navbar-clock .text-uppercase { color: var(--ops-muted); font-size: .64rem; }

/* Dark-mode toggle is retired in the neon theme; never rendered */

/* ---------- Content ---------- */
.content {
  padding: 1.35rem 1.45rem 2.2rem;
  flex: 1;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Page title strip for inner pages */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.page-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.3px; color: var(--ops-heading); }

/* ============================================================
   Glass cards (kept class names from the old theme: panel-card)
   ============================================================ */
.panel-card {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ops-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: visible;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.panel-card:hover { border-color: rgba(255, 255, 255, .16); }
.panel-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--ops-line-soft);
  font-weight: 700;
  padding: 1rem 1.25rem;
  color: var(--ops-heading);
  font-size: .95rem;
  letter-spacing: -.1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.panel-card .card-header .text-muted { color: var(--ops-muted); }
.panel-card .card-body { padding: 1.25rem; }

/* Legacy stat cards kept for compatibility */
.stat-card {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  border: 1px solid var(--ops-line);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  height: 100%;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}
.stat-card:hover { transform: translateY(-2px); border-color: rgba(47, 230, 255, .3); }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 800; color: var(--ops-heading); letter-spacing: -.5px; line-height: 1.1; }
.stat-card .stat-label { color: var(--ops-muted); font-size: .8rem; font-weight: 600; }
.stat-icon {
  width: 3.2rem; height: 3.2rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--neon-cyan);
  background: rgba(47, 230, 255, .08);
  border: 1px solid rgba(47, 230, 255, .2);
  border-radius: 14px;
  box-shadow: inset 0 0 16px rgba(47, 230, 255, .06);
}

/* ============================================================
   Tables
   ============================================================ */
.table { --bs-table-hover-bg: rgba(255, 255, 255, .035); color: var(--ops-text); border-color: var(--ops-line-soft); }
.table thead th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ops-muted); font-weight: 800;
  border-bottom: 1px solid var(--ops-line) !important;
  padding: .72rem .9rem; white-space: nowrap;
  background: rgba(255, 255, 255, .018);
}
.table td { padding: .78rem .9rem; vertical-align: middle; border-color: var(--ops-line-soft); color: var(--ops-text); }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--bs-table-hover-bg); }
.table tbody tr.campaign-off > * { color: var(--ops-muted); }
.table tbody tr.campaign-off a { color: var(--ops-muted); }

/* ============================================================
   Badges — translucent neon chips
   ============================================================ */
.badge { font-weight: 700; letter-spacing: .03em; padding: .42em .72em; border-radius: 999px; font-size: .72em; }
.text-bg-success { background: rgba(52, 255, 154, .14) !important; color: var(--neon-green) !important; border: 1px solid rgba(52, 255, 154, .35); }
.text-bg-warning { background: rgba(216, 255, 62, .13) !important; color: var(--neon-yellow) !important; border: 1px solid rgba(216, 255, 62, .3); }
.text-bg-info    { background: rgba(47, 230, 255, .13) !important; color: var(--neon-cyan) !important; border: 1px solid rgba(47, 230, 255, .3); }
.text-bg-primary { background: rgba(47, 230, 255, .14) !important; color: var(--neon-cyan) !important; border: 1px solid rgba(47, 230, 255, .35); }
.text-bg-danger  { background: rgba(255, 79, 216, .13) !important; color: #ff8ee4 !important; border: 1px solid rgba(255, 79, 216, .32); }
.text-bg-secondary { background: rgba(126, 136, 163, .16) !important; color: #c3cbdd !important; border: 1px solid rgba(126, 136, 163, .3); }
.text-bg-dark    { background: rgba(6, 7, 11, .6) !important; color: #8f99b2 !important; border: 1px solid var(--ops-line); }
.text-bg-light   { background: rgba(255, 255, 255, .08) !important; color: var(--ops-text-2) !important; border: 1px solid var(--ops-line); }

/* ============================================================
   Forms
   ============================================================ */
.form-label { font-size: .8rem; font-weight: 700; color: var(--ops-heading); margin-bottom: .38rem; letter-spacing: .01em; }
.form-control, .form-select {
  background-color: rgba(10, 12, 18, .72);
  border: 1px solid var(--ops-line);
  border-radius: var(--radius-sm);
  padding: .5rem .85rem;
  font-size: .9rem;
  color: var(--ops-text);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-control:focus, .form-select:focus {
  background-color: rgba(13, 16, 24, .9);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 .2rem rgba(47, 230, 255, .12), 0 0 18px -6px var(--neon-cyan);
  color: #fff;
}
.form-control::placeholder { color: #5d6780; }
.form-control:disabled, .form-select:disabled { background: rgba(255, 255, 255, .02); color: var(--ops-muted); }
.form-text { color: var(--ops-muted); font-size: .76rem; }
.form-check-input {
  background-color: var(--ops-bg2);
  border: 1px solid #3a4258;
}
.form-check-input:checked { background-color: var(--neon-cyan); border-color: var(--neon-cyan); }
.input-group-text {
  background: rgba(255, 255, 255, .04); color: var(--ops-text-2);
  border: 1px solid var(--ops-line); font-size: .85rem;
}
input[type="checkbox"].order-cb { accent-color: var(--neon-cyan); width: 1.05em; height: 1.05em; cursor: pointer; }

/* ============================================================
   Buttons — neon variants (same bootstrap class names)
   ============================================================ */
.btn { border-radius: var(--radius-sm); font-weight: 700; letter-spacing: .01em; transition: all var(--transition); border-width: 1px; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .55; }
.btn-primary {
  background: linear-gradient(120deg, var(--neon-cyan), #3d9bff);
  border: 0; color: #04121a;
  box-shadow: 0 6px 20px -8px rgba(47, 230, 255, .8);
}
.btn-primary:hover { background: linear-gradient(120deg, #7ceeff, var(--neon-cyan)); color: #04121a; box-shadow: var(--glow-cyan); transform: translateY(-1px); }
.btn-success { background: linear-gradient(120deg, var(--neon-green-2), var(--neon-green)); border: 0; color: #02170c; box-shadow: 0 6px 20px -8px rgba(52, 255, 154, .7); }
.btn-success:hover { color: #02170c; box-shadow: var(--glow-green); transform: translateY(-1px); }
.btn-danger { background: linear-gradient(120deg, var(--neon-magenta-2), var(--neon-magenta)); border: 0; color: #1a0413; box-shadow: 0 6px 20px -8px rgba(255, 79, 216, .7); }
.btn-danger:hover { color: #1a0413; box-shadow: var(--glow-magenta); transform: translateY(-1px); }
.btn-warning { background: linear-gradient(120deg, var(--neon-yellow-2), var(--neon-yellow)); border: 0; color: #161d02; }
.btn-warning:hover { color: #161d02; box-shadow: var(--glow-yellow); }
.btn-info { background: linear-gradient(120deg, var(--neon-cyan-2), var(--neon-cyan)); border: 0; color: #02121a; }
.btn-info:hover { color: #02121a; }
.btn-secondary { background: rgba(126, 136, 163, .25); border: 1px solid rgba(126, 136, 163, .3); color: #dfe4ef; }
.btn-secondary:hover { background: rgba(126, 136, 163, .4); color: #fff; }

.btn-outline-primary { border-color: rgba(47, 230, 255, .5); color: var(--neon-cyan); }
.btn-outline-primary:hover { background: rgba(47, 230, 255, .15); color: #bdf4ff; border-color: var(--neon-cyan); }
.btn-outline-success { border-color: rgba(52, 255, 154, .45); color: var(--neon-green); }
.btn-outline-success:hover { background: rgba(52, 255, 154, .14); color: #c6ffe4; }
.btn-outline-danger { border-color: rgba(255, 79, 216, .45); color: #ff8ee4; }
.btn-outline-danger:hover { background: rgba(255, 79, 216, .14); color: #ffc4ef; }
.btn-outline-warning { border-color: rgba(216, 255, 62, .4); color: var(--neon-yellow); }
.btn-outline-warning:hover { background: rgba(216, 255, 62, .13); color: #f4ffc4; }
.btn-outline-info { border-color: rgba(47, 230, 255, .4); color: var(--neon-cyan); }
.btn-outline-info:hover { background: rgba(47, 230, 255, .13); color: #d0f8ff; }
.btn-outline-secondary { border-color: var(--ops-line); color: var(--ops-text-2); }
.btn-outline-secondary:hover { background: var(--ops-glass-2); color: #fff; }
.btn-link { color: var(--neon-cyan); }
.btn-link:hover { color: #bdf4ff; }

/* ============================================================
   Alerts
   ============================================================ */
.alert { border-radius: var(--radius-md); border: 1px solid var(--ops-line); background: rgba(255, 255, 255, .03); color: var(--ops-text); }
.alert-success { background: rgba(52, 255, 154, .08); border-color: rgba(52, 255, 154, .3); color: #b9ffdd; }
.alert-danger  { background: rgba(255, 79, 216, .08); border-color: rgba(255, 79, 216, .3); color: #ffd0f2; }
.alert-warning { background: rgba(216, 255, 62, .07); border-color: rgba(216, 255, 62, .28); color: #f2ffc0; }
.alert-info    { background: rgba(47, 230, 255, .07); border-color: rgba(47, 230, 255, .3); color: #c6f5ff; }
.alert-secondary { background: rgba(126, 136, 163, .1); border-color: var(--ops-line); color: var(--ops-text-2); }
.alert-light, .alert-light.border { background: rgba(255, 255, 255, .035); border-color: var(--ops-line) !important; color: var(--ops-text-2); }

/* Text helpers */
.text-muted, .text-body-secondary { color: var(--ops-muted) !important; }
.text-success { color: var(--neon-green) !important; }
.text-danger { color: #ff8ee4 !important; }
.text-warning { color: var(--neon-yellow) !important; }
.text-info { color: var(--neon-cyan) !important; }
.text-primary { color: var(--neon-cyan) !important; }
code { color: #9ce8ff; }

/* ============================================================
   Pagination
   ============================================================ */
.page-link { background: rgba(255, 255, 255, .03); border-color: var(--ops-line); color: var(--ops-text-2); }
.page-link:hover { background: var(--ops-glass-2); color: #fff; }
.page-item.active .page-link { background: linear-gradient(120deg, var(--neon-yellow), var(--neon-green)); border-color: transparent; color: #05060a; font-weight: 700; }
.page-item.disabled .page-link { color: var(--ops-muted); background: transparent; }

/* ============================================================
   Searchable service picker (.sp-*) — dark glass
   ============================================================ */
.service-picker { position: relative; }
.service-picker.open { z-index: 1070; }
.service-picker .sp-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .85rem;
  font-size: .9rem; font-weight: 400; line-height: 1.5; color: var(--ops-text);
  background: rgba(10, 12, 18, .72);
  border: 1px solid var(--ops-line); border-radius: var(--radius-sm);
  text-align: left; cursor: pointer; appearance: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.service-picker .sp-trigger:hover, .service-picker .sp-trigger.open { border-color: var(--neon-cyan); }
.service-picker .sp-trigger:focus-visible { outline: 0; border-color: var(--neon-cyan); box-shadow: 0 0 0 .2rem rgba(47, 230, 255, .12); }
.service-picker .sp-trigger .sp-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ops-text); }
.service-picker .sp-trigger .sp-caret { color: var(--ops-muted); transition: transform var(--transition); }
.service-picker .sp-trigger.open .sp-caret { transform: rotate(180deg); }
.service-picker .sp-dropdown {
  position: absolute; z-index: 1071; top: calc(100% + 6px); left: 0; right: 0;
  background: rgba(16, 19, 28, .98);
  border: 1px solid var(--ops-line); border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow), 0 0 30px -10px rgba(47, 230, 255, .3);
  backdrop-filter: blur(16px);
  overflow: hidden;
  animation: fadeDown .16s ease;
}
.service-picker .sp-search { position: relative; padding: .55rem; border-bottom: 1px solid var(--ops-line-soft); background: rgba(255, 255, 255, .02); }
.service-picker .sp-search .sp-search-icon { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--ops-muted); pointer-events: none; }
.service-picker .sp-search input { padding-left: 2.2rem; }
.service-picker .sp-list { list-style: none; margin: 0; padding: .3rem; max-height: 280px; overflow-y: auto; }
.service-picker .sp-list li { padding: .52rem .75rem; cursor: pointer; border-radius: 8px; white-space: normal; line-height: 1.35; font-size: .84rem; color: var(--ops-text); transition: background var(--transition); }
.service-picker .sp-list li:hover { background: rgba(47, 230, 255, .1); }
.service-picker .sp-list li.selected { background: linear-gradient(120deg, rgba(47, 230, 255, .22), rgba(155, 107, 255, .22)); color: #fff; }
.service-picker .sp-empty { padding: .8rem .85rem; color: var(--ops-muted); font-size: .86rem; }
.service-picker .sp-list::-webkit-scrollbar { width: 8px; }
.service-picker .sp-list::-webkit-scrollbar-thumb { background: #2a3246; border-radius: 8px; }

/* Nav tabs used on Campaigns pages */
.nav-tabs { border-bottom: 1px solid var(--ops-line-soft); }
.nav-tabs .nav-link { color: var(--ops-text-2); border: 0; border-radius: 999px; font-weight: 600; font-size: .86rem; padding: .45rem 1rem; margin-right: .3rem; }
.nav-tabs .nav-link:hover { color: #fff; background: var(--ops-glass); }
.nav-tabs .nav-link.active { color: #05060a; background: linear-gradient(120deg, var(--neon-yellow), var(--neon-green)); }

/* Campaign rows (used on old dashboard) */
.campaign-row { padding: .8rem .2rem; border-bottom: 1px dashed var(--ops-line-soft); }
.campaign-row:last-child { border-bottom: 0; }
.campaign-row:hover { background: rgba(255, 255, 255, .02); border-radius: .5rem; }

/* ============================================================
   Login
   ============================================================ */
.login-bg {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(900px 480px at 15% -10%, rgba(47, 230, 255, .14), transparent 60%),
    radial-gradient(800px 520px at 105% 105%, rgba(255, 79, 216, .1), transparent 55%),
    radial-gradient(600px 400px at 90% 0%, rgba(216, 255, 62, .07), transparent 55%),
    var(--ops-bg0);
  position: relative;
  overflow: hidden;
}
.login-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.login-card { width: 100%; max-width: 410px; border-radius: 22px; border: 1px solid var(--ops-line); background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); backdrop-filter: blur(18px); box-shadow: var(--glass-shadow), 0 0 60px -24px rgba(47, 230, 255, .45); }
.login-card .card-body { border-radius: 22px; }
.login-card i.display-5 {
  background: linear-gradient(135deg, var(--neon-yellow), var(--neon-green));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(216, 255, 62, .55));
}

/* ============================================================
   OPS DASHBOARD COMPONENTS
   ============================================================ */

/* Draggable cards */
.dash-sortable { display: flex; flex-wrap: wrap; gap: 1rem; }
.dash-sortable > * { margin: 0; }
.drag-handle {
  position: absolute; top: .7rem; right: .8rem;
  color: var(--ops-muted); font-size: .8rem; cursor: grab;
  opacity: 0; transition: opacity var(--transition);
  z-index: 5; user-select: none;
}
.drag-handle::before { content: "⠿"; letter-spacing: -3px; }
.dash-sortable > *:hover > .drag-handle, .dragging > .drag-handle { opacity: .9; }
.dragging { opacity: .35; }
.drag-ghost {
  position: fixed; z-index: 2000; pointer-events: none;
  opacity: .92; transform: rotate(2deg) scale(1.02);
  box-shadow: var(--glass-shadow), 0 0 40px -8px rgba(47, 230, 255, .5);
  border-radius: var(--radius-lg); overflow: hidden;
}
.drag-over { border-color: var(--neon-cyan) !important; box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 30px -6px var(--neon-cyan); }

/* Hero section */
.dash-hero {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
  padding: 1.4rem 1.6rem;
  background:
    radial-gradient(700px 260px at 12% 0%, rgba(47, 230, 255, .07), transparent 60%),
    linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid var(--ops-line);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.dash-hero::after {
  content: ""; position: absolute; right: -140px; top: -180px; width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 107, 255, .14), transparent 65%);
  pointer-events: none;
}
.hero-left { position: relative; z-index: 2; min-width: 260px; flex: 1 1 380px; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--neon-cyan);
  padding: .32rem .8rem; border-radius: 999px;
  background: rgba(47, 230, 255, .08); border: 1px solid rgba(47, 230, 255, .25);
  margin-bottom: 1rem;
}
.hero-kicker .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon-green); box-shadow: 0 0 0 0 rgba(52,255,154,.6); animation: pulse 2s infinite; }
.hero-grid { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.hero-stat { position: relative; padding-left: 1rem; }
.hero-stat::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 3px; border-radius: 3px; }
.hero-stat.yellow::before { background: linear-gradient(180deg, var(--neon-yellow), var(--neon-yellow-2)); box-shadow: 0 0 12px var(--neon-yellow); }
.hero-stat.green::before { background: linear-gradient(180deg, var(--neon-green), var(--neon-green-2)); box-shadow: 0 0 12px var(--neon-green); }
.hero-label { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ops-muted); }
.hero-num {
  font-size: 2.6rem; font-weight: 900; letter-spacing: -1.5px; line-height: 1.05;
  display: inline-flex; align-items: baseline; gap: .2rem;
}
.hero-stat.yellow .hero-num { color: var(--neon-yellow); text-shadow: 0 0 30px rgba(216,255,62,.35); }
.hero-stat.green .hero-num { color: var(--neon-green); text-shadow: 0 0 30px rgba(52,255,154,.35); }
.hero-num small { font-size: 1rem; font-weight: 700; opacity: .8; }
.hero-sub { font-size: .8rem; color: var(--ops-muted); margin-top: .35rem; }

/* Pump ring */
.hero-right { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.2rem; flex: 0 1 auto; }
.pump-ring { position: relative; width: 250px; height: 250px; filter: drop-shadow(0 22px 30px rgba(0,0,0,.55)); }
.pump-ring svg { width: 100%; height: 100%; display: block; }
.pump-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center;
}
.pump-center .pc-label { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ops-muted); font-weight: 800; }
.pump-center .pc-val { font-size: 2rem; font-weight: 900; color: var(--neon-green); text-shadow: 0 0 24px rgba(52,255,154,.45); letter-spacing: -1px; }
.pump-center .pc-sub { font-size: .68rem; color: var(--ops-muted); }
.pump-seg { transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease; transform-box: fill-box; transform-origin: center; cursor: default; }
.pump-seg:hover { transform: translateY(-9px); filter: brightness(1.25) drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.pump-seg.pump-hoverable { cursor: pointer; }
.pump-legend { display: flex; flex-direction: column; gap: .5rem; min-width: 128px; }
.pump-legend .lg-row { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--ops-text-2); font-weight: 600; }
.pump-legend .lg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.pump-legend .lg-val { margin-left: auto; font-weight: 800; color: var(--ops-text); }

/* Balance strip */
.dash-balance { display: flex; gap: .8rem; overflow-x: auto; padding: .25rem .1rem 1.1rem; scrollbar-width: thin; }
.bal-chip {
  flex: 0 0 auto;
  min-width: 215px; max-width: 250px;
  position: relative;
  padding: .9rem 1rem;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--ops-line);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.bal-chip:hover { transform: translateY(-2px); border-color: rgba(47,230,255,.35); }
.bal-chip.low { border-color: rgba(255, 79, 216, .4); }
.bal-chip.low::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  box-shadow: inset 0 0 30px -12px rgba(255, 79, 216, .45);
  animation: lowPulse 2.4s ease infinite;
}
.bal-name { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: var(--ops-text-2); text-transform: uppercase; letter-spacing: .05em; }
.bal-name .bi { color: var(--neon-cyan); }
.bal-amount { font-size: 1.35rem; font-weight: 900; letter-spacing: -.4px; color: var(--ops-heading); margin: .2rem 0 .15rem; }
.bal-chip.low .bal-amount { color: #ff8ee4; }
.bal-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .68rem; color: var(--ops-muted); }
.low-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffb4ec; background: rgba(255,79,216,.12); border: 1px solid rgba(255,79,216,.3); padding: .16rem .5rem; border-radius: 999px; }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)); gap: 1rem; }
.kpi-grid > .kpi-card { margin: 0; flex: none; min-width: 0; }
.main-grid { display: flex; }
.main-grid > .cell { margin: 0; }
.kpi-card {
  position: relative;
  padding: 1.1rem 1.15rem .85rem;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid var(--ops-line);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.kpi-card:hover { border-color: rgba(255,255,255,.18); }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.kpi-label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ops-muted); }
.kpi-icon { width: 2.3rem; height: 2.3rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
.kpi-value { font-size: 1.9rem; font-weight: 900; letter-spacing: -1px; line-height: 1.1; color: var(--ops-heading); margin: .5rem 0 .1rem; }
.kpi-value .u { font-size: .95rem; font-weight: 800; opacity: .75; margin-left: 2px; }
.kpi-spark { margin-top: .15rem; height: 30px; }
.kpi-spark svg { width: 100%; height: 100%; display: block; }
.kpi-foot { font-size: .7rem; color: var(--ops-muted); margin-top: .3rem; display: flex; gap: .4rem; align-items: center; }
.kpi-accents .a-cyan { color: var(--neon-cyan); background: rgba(47,230,255,.1); border: 1px solid rgba(47,230,255,.2); }
.kpi-accents .a-green { color: var(--neon-green); background: rgba(52,255,154,.09); border: 1px solid rgba(52,255,154,.2); }
.kpi-accents .a-yellow { color: var(--neon-yellow); background: rgba(216,255,62,.08); border: 1px solid rgba(216,255,62,.2); }
.kpi-accents .a-magenta { color: #ff8ee4; background: rgba(255,79,216,.09); border: 1px solid rgba(255,79,216,.22); }
.kpi-accents .a-violet { color: #c4a6ff; background: rgba(155,107,255,.1); border: 1px solid rgba(155,107,255,.22); }
.kpi-accents .a-green2 { color: var(--neon-green); background: rgba(52,255,154,.09); border: 1px solid rgba(52,255,154,.2); }

/* Feed card (recent orders) */
.feed { display: flex; flex-direction: column; }
.feed-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--ops-line-soft);
  transition: background var(--transition);
}
.feed-item:hover { background: rgba(255,255,255,.02); }
.feed-ico {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; font-size: 1.05rem;
  background: rgba(255,255,255,.045); border: 1px solid var(--ops-line-soft);
  color: var(--ops-text-2);
}
.feed-ico.tg { color: var(--neon-cyan); background: rgba(47,230,255,.07); }
.feed-ico.ig { color: var(--neon-magenta); background: rgba(255,79,216,.07); }
.feed-body { flex: 1; min-width: 0; }
.feed-link { font-size: .86rem; font-weight: 600; color: var(--ops-text); text-decoration: none; }
.feed-link:hover { color: var(--neon-cyan); }
.feed-link .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; display: inline-block; vertical-align: bottom; }
.feed-meta { font-size: .72rem; color: var(--ops-muted); margin-top: .1rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.feed-meta .dot { opacity: .5; }
.feed-qty { font-weight: 800; color: var(--ops-text-2); }
.feed-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }

/* Status chips (custom, non-bootstrap) */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: .26rem .6rem; border-radius: 999px; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.chip-ok { color: var(--neon-green); background: rgba(52,255,154,.1); border: 1px solid rgba(52,255,154,.28); }
.chip-busy { color: var(--neon-yellow); background: rgba(216,255,62,.09); border: 1px solid rgba(216,255,62,.25); }
.chip-partial { color: var(--neon-cyan); background: rgba(47,230,255,.09); border: 1px solid rgba(47,230,255,.25); }
.chip-fail { color: #ff8ee4; background: rgba(255,79,216,.09); border: 1px solid rgba(255,79,216,.26); }
.chip-mute { color: var(--ops-muted); background: rgba(126,136,163,.09); border: 1px solid var(--ops-line); }

/* Campaign delivery progress */
.camp-prog { padding: .35rem .1rem; }
.camp-prog-row { padding: .75rem .15rem; border-bottom: 1px dashed var(--ops-line-soft); }
.camp-prog-row:last-child { border-bottom: 0; }
.camp-prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.camp-prog-name { font-weight: 700; font-size: .86rem; color: var(--ops-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-prog-count { font-size: .74rem; color: var(--ops-muted); font-weight: 700; white-space: nowrap; }
.camp-prog-count b { color: var(--neon-green); font-weight: 800; }
.camp-prog-sub { font-size: .7rem; color: var(--ops-muted); margin: .15rem 0 .45rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.progress { background: rgba(255,255,255,.05); border-radius: 999px; height: 9px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.progress .progress-bar {
  background: linear-gradient(90deg, var(--neon-green-2), var(--neon-green));
  box-shadow: 0 0 14px rgba(52,255,154,.6);
  border-radius: 999px;
  transition: width 1s cubic-bezier(.22,1,.36,1);
}
.progress .progress-bar.bar-cyan { background: linear-gradient(90deg, var(--neon-cyan-2), var(--neon-cyan)); box-shadow: 0 0 14px rgba(47,230,255,.6); }
.progress .progress-bar.bar-yellow { background: linear-gradient(90deg, var(--neon-yellow-2), var(--neon-yellow)); box-shadow: 0 0 14px rgba(216,255,62,.55); }

/* Anomaly diagnostics */
.diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.diag-group { border: 1px solid var(--ops-line-soft); border-radius: 16px; background: rgba(255,255,255,.015); padding: .95rem 1rem; }
.diag-group h6 { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ops-text-2); margin-bottom: .7rem; }
.diag-count { margin-left: auto; font-size: .7rem; background: rgba(255,255,255,.06); padding: .12rem .55rem; border-radius: 999px; color: var(--ops-text-2); }
.diag-item { padding: .5rem .1rem; border-bottom: 1px dashed var(--ops-line-soft); }
.diag-item:last-child { border-bottom: 0; }
.diag-item .d-head { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--ops-text); }
.diag-item .d-sub { font-size: .72rem; color: var(--ops-muted); margin-top: .18rem; line-height: 1.45; }
.diag-empty { display: flex; align-items: center; gap: .5rem; color: var(--neon-green); font-size: .8rem; font-weight: 700; padding: .2rem 0; }
.crit { color: #ff8ee4; } .warn2 { color: var(--neon-yellow); } .note2 { color: var(--neon-cyan); }

/* Cards for layout of main grid rows */
.cell { min-width: 0; }
.cell-2col { flex: 2 1 620px; }
.cell-1col { flex: 1 1 360px; }
.grid-title { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: .95rem; color: var(--ops-heading); }
.grid-title .bi { color: var(--neon-cyan); }
.grid-actions { margin-left: auto; }

/* Section headings between dashboard rows */
.dash-section-label {
  display: flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ops-muted); margin: 1.4rem 0 .7rem;
}
.dash-section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ops-line), transparent); }

/* Empty / subtle panel states */
.panel-empty { color: var(--ops-muted); font-size: .85rem; text-align: center; padding: 1.6rem .5rem; }
.panel-empty .bi { font-size: 1.6rem; display: block; margin-bottom: .4rem; opacity: .5; }

/* Keyframes */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52,255,154,.55); } 70% { box-shadow: 0 0 0 9px rgba(52,255,154,0); } 100% { box-shadow: 0 0 0 0 rgba(52,255,154,0); } }
@keyframes lowPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes floatGlow {
  0%,100% { opacity: .55; }
  50% { opacity: 1; }
}
.content > * { animation: fadeUp .3s ease both; }

/* Page transition stagger (applies to top-level children of .content) */
.content > *:nth-child(2) { animation-delay: .02s; }
.content > *:nth-child(3) { animation-delay: .05s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1399px) {
  .hero-num { font-size: 2.2rem; }
  .pump-ring { width: 224px; height: 224px; }
}

/* Tablets + phones: rail becomes an off-canvas drawer */
@media (max-width: 991.98px) {
  .sidebar {
    width: min(86vw, 300px) !important;
    height: 100vh;
    transform: translateX(-102%);
    transition: transform var(--transition);
    align-items: stretch;
    overflow-y: auto;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::before {
    content: ""; position: fixed; inset: 0; z-index: 1045;
    background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); cursor: pointer;
  }
  .main { margin-left: 0 !important; }
  .topbar-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; flex-shrink: 0;
    background: rgba(255,255,255,.04); border: 1px solid var(--ops-line);
    color: var(--ops-text); border-radius: .75rem; cursor: pointer; font-size: 1.25rem;
  }
  .topbar-nav-toggle:hover { color: var(--neon-cyan); border-color: rgba(47,230,255,.4); }
  .sidebar .brand { justify-content: space-between; padding: 1rem 1.1rem; }
  .sidebar .brand a { gap: .6rem; }
  .sidebar .brand-text { display: block; color: #fff; font-weight: 800; font-size: .98rem; }
  .sidebar .brand-text small { display: block; font-weight: 600; color: var(--ops-muted); font-size: .64rem; letter-spacing: .06em; }
  .sidebar nav { gap: .15rem; padding: .8rem .7rem; }
  .sidebar .nav-link { justify-content: flex-start; gap: .8rem; padding: .62rem .9rem; border-radius: 12px; }
  .sidebar .nav-link i { width: 1.4rem; text-align: center; font-size: 1.1rem; }
  .sidebar .nav-label { display: inline; font-size: .9rem; font-weight: 600; }
  .sidebar .rail-dot { display: none; }
  .sidebar .nav-section { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ops-muted); padding: .8rem .9rem .3rem; }
  .sidebar-panels { display: block; }
  .sidebar .panel-nav { width: 100%; flex-wrap: wrap; }
  .sidebar .panel-nav-select { flex: 1 1 auto; min-width: 150px; }
  .sidebar-foot .btn { justify-content: center; gap: .5rem; padding: .7rem; font-size: .9rem; }
  .sidebar-foot .btn .bi { font-size: 1.05rem; }
  .sidebar-foot .btn span { display: inline; }
  .rail-fly { display: none; }
  .sidebar-foot .btn .rail-label { display: inline; }

  /* Mobile drawer: flyout items become plain rows under the parent */
  .m-sub { display: block; }
  .m-sub .nav-link { padding-left: 2.2rem !important; font-size: .84rem; }
  .m-sub .nav-link i { font-size: .95rem; width: 1.1rem; }

  .capsule-wrap { flex: 1 1 auto; }
  .topbar { padding: .55rem .8rem; gap: .6rem; }
  .content { padding: 1rem .9rem 1.6rem; }
}

/* Hide settings flyout on desktop until hover — base state handled above.
   Below 992 the flyout is hidden and m-sub rows shown instead. */
@media (min-width: 992px) {
  .m-sub { display: none; }
}

@media (max-width: 767.98px) {
  .topbar-right .navbar-clock { display: none; }
  .hero-left { flex-basis: 100%; }
  .hero-right { width: 100%; justify-content: center; }
  .dash-hero { padding: 1.2rem; }
  .kpi-card { flex-basis: calc(50% - .6rem); min-width: 0; }
  .kpi-value { font-size: 1.55rem; }
  .panel-nav-select { min-width: 100px; max-width: 150px; }
  .panel-nav-balance { font-size: .72rem; padding: .2rem .55rem; }
  .content { padding: .85rem .75rem 1.4rem; }
  .hero-num { font-size: 1.9rem; }
  .pump-ring { width: 210px; height: 210px; }
  .page-head { margin-bottom: .8rem; }
}

@media (max-width: 575.98px) {
  .kpi-card { flex-basis: 100%; }
  .capsule a { padding: .38rem .8rem; font-size: .78rem; }
  .feed-link .txt { max-width: 170px; }
  .bal-chip { min-width: 185px; }
  .table thead th, .table td { padding: .55rem .6rem; font-size: .8rem; white-space: nowrap; }
  .form-control, .form-select, .btn { font-size: .86rem; }
  .topbar-right .panel-nav-icon { display: none; }
}

/* ============================================================
   POLISH v2 — responsive readability & interaction refinements
   ============================================================ */

/* ---------- Mobile drawer close button ---------- */
.sidebar-toggle-btn { display: none; }
@media (max-width: 991.98px) {
  .sidebar-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.35rem; height: 2.35rem; flex-shrink: 0;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--ops-line);
    color: var(--ops-text-2); border-radius: .75rem;
    cursor: pointer; font-size: 1.05rem;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
  }
  .sidebar-toggle-btn:hover { color: var(--neon-magenta); border-color: rgba(255, 79, 216, .45); background: rgba(255, 79, 216, .08); }
}

/* ---------- Settings rail: click-to-open flyout ---------- */
.rail-item.open .rail-fly { opacity: 1; visibility: visible; transform: translateX(0); }
.rail-settings-link .bi-gear-fill { transition: transform var(--transition); }
.rail-item.open .rail-settings-link .bi-gear-fill { transform: rotate(60deg); }
@media (max-width: 991.98px) {
  /* Sub-links are already visible in the drawer; keep gear behaviour plain. */
  .rail-item.open .rail-fly { display: none; }
}

/* ---------- Logout button — themed ---------- */
.sidebar-foot .btn-logout {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; padding: .7rem 0;
  border-radius: 14px; border: 1px solid rgba(255, 79, 216, .22);
  background: linear-gradient(135deg, rgba(255, 79, 216, .1), rgba(155, 107, 255, .07));
  color: #d9b8d9; font-weight: 700; font-size: .86rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.sidebar-foot .btn-logout i { font-size: 1.02rem; }
.sidebar-foot .btn-logout:hover {
  color: #fff; border-color: rgba(255, 79, 216, .6);
  background: linear-gradient(135deg, rgba(255, 79, 216, .22), rgba(155, 107, 255, .14));
  box-shadow: var(--glow-magenta); transform: translateY(-1px);
}
.sidebar-foot .btn-logout:active { transform: scale(.96); }
/* Icon-centred on the slim rail, labelled in the mobile drawer */
.sidebar .nav-label { display: none; }
.sidebar-foot .btn-logout .nav-label { display: none; }
@media (max-width: 991.98px) {
  .sidebar-foot .btn-logout .nav-label { display: inline; }
}

/* ---------- Balance section: toggle header ---------- */
.balance-toggle {
  appearance: none; -webkit-appearance: none;
  font: inherit; text-align: left; cursor: pointer;
  width: 100%;
  border: 1px solid var(--ops-line);
  background: linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border-radius: 14px;
  padding: .62rem 1rem;
  margin: 1.25rem 0 .55rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.balance-toggle:hover { border-color: rgba(47, 230, 255, .4); box-shadow: 0 0 20px -8px rgba(47, 230, 255, .5); }
.balance-toggle::after { content: none; }
.balance-toggle .ttl-count {
  display: inline-flex; align-items: center; padding: .14rem .6rem;
  border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255, 255, 255, .06); color: var(--ops-text-2); border: 1px solid var(--ops-line);
}
.balance-toggle .ttl-alert {
  display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .6rem;
  border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255, 79, 216, .1); color: #ffb4ec; border: 1px solid rgba(255, 79, 216, .3);
}
.balance-toggle .chev { transition: transform var(--transition); color: var(--ops-muted); }
.balance-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--neon-cyan); }
#balanceCards .dash-balance { padding-top: .2rem; }

/* ---------- Balance chips — readability + responsive ---------- */
.bal-chip {
  min-width: 238px; max-width: 264px;
  padding: 1rem 1.05rem .9rem;
  border-radius: 18px;
  display: flex; flex-direction: column; gap: .45rem;
  scroll-snap-align: start;
}
.bal-name { font-size: .8rem; letter-spacing: .06em; color: var(--ops-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-amount { font-size: 1.5rem; line-height: 1.1; display: flex; align-items: baseline; gap: .3rem; letter-spacing: -.5px; }
.bal-amount .cur { font-size: .82rem; font-weight: 800; color: var(--ops-muted); letter-spacing: 0; }
.bal-meta { align-items: center; }
.bal-chip.low .bal-meta { color: #b0a0ad; }

/* ---------- Hero right: delivery pump panel ---------- */
.hero-right {
  flex-direction: column; align-items: stretch; justify-content: center;
  flex: 0 1 470px; min-width: 0;
  padding: .9rem 1rem .95rem;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
  border: 1px solid var(--ops-line-soft);
}
.pump-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.pump-title {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ops-text-2);
}
.pump-title .bi { color: var(--neon-cyan); font-size: .85rem; filter: drop-shadow(0 0 6px rgba(47, 230, 255, .7)); }
.pump-live { display: inline-flex; align-items: center; gap: .45rem; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--neon-green); }
.pump-live .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-green); box-shadow: 0 0 0 0 rgba(52, 255, 154, .6); animation: pulse 2s infinite; }
.pump-body { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.pump-stage {
  position: relative; flex-shrink: 0;
  width: 242px; height: 242px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(47, 230, 255, .09), transparent 62%),
    radial-gradient(circle at 60% 70%, rgba(255, 79, 216, .05), transparent 60%),
    rgba(255, 255, 255, .015);
  border: 1px solid var(--ops-line-soft);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .35);
}
.pump-ring { position: absolute; inset: 2px; width: auto; height: auto; }
.pump-ring svg { width: 100%; height: 100%; }
.pump-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.pump-center .pc-label { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ops-muted); font-weight: 800; }
.pump-center .pc-val { font-size: 2.15rem; font-weight: 900; letter-spacing: -1.5px; line-height: 1.1; color: var(--neon-green); text-shadow: 0 0 26px rgba(52, 255, 154, .5); }
.pump-center .pc-sub { font-size: .66rem; color: var(--ops-muted); letter-spacing: .04em; }
.pump-legend { flex: 1; display: flex; flex-direction: column; gap: .55rem; min-width: 150px; }
.pump-legend .lg-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem .55rem; border-radius: 12px;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--ops-line-soft);
}
.pump-legend .lg-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 9px currentColor; flex-shrink: 0; }
.pump-legend .lg-name { font-size: .76rem; font-weight: 600; color: var(--ops-text-2); text-transform: capitalize; }
.pump-legend .lg-val {
  margin-left: auto; font-size: .84rem; font-weight: 800; color: var(--ops-text);
  background: rgba(255, 255, 255, .05); padding: .12rem .5rem; border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1399px) {
  .pump-stage { width: 218px; height: 218px; }
  .hero-right { flex-basis: 430px; }
}
@media (max-width: 767.98px) {
  .hero-right { flex: 1 1 100%; }
  .pump-body { flex-wrap: wrap; justify-content: center; }
  .pump-legend { flex-direction: row; flex-wrap: wrap; justify-content: center; min-width: 0; gap: .4rem; }
  .pump-legend .lg-row { padding: .32rem .55rem; }
}
@media (max-width: 575.98px) {
  .pump-stage { width: 204px; height: 204px; }
  .pump-ring { inset: 2px; }
  .hero-left { padding-right: 0; }
}

/* Balance strip width fix inside hidden collapse + spacing */
.dash-balance { scroll-snap-type: x proximity; }

/* Balance chip links inherit their own text colours */
a.bal-chip { text-decoration: none; }

/* ============================================================
   POLISH v3 — labelled (expanded) sidebar + clean pump + totals
   ============================================================ */

/* Topbar: keep balance + clock pinned to the far right */
.topbar-right { margin-left: auto; }
.sidebar-foot form { margin: 0; }

/* ---------- Sidebar: expanded with labels (default, desktop) ---------- */
.sidebar-collapse-btn { display: none; }
@media (min-width: 992px) {
  .sidebar { width: 256px; }
  .main { margin-left: 256px; }

  .sidebar .brand { justify-content: flex-start; padding: 1.05rem 1rem 1rem; }
  .sidebar .brand a { flex-direction: row; gap: .7rem; justify-content: flex-start; }
  .sidebar .brand-text {
    display: block; font-size: 1.02rem; font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -.2px;
  }
  .sidebar .brand-text small {
    display: block; font-weight: 700; color: var(--ops-muted); font-size: .6rem;
    letter-spacing: .12em; text-transform: uppercase; margin-top: 2px;
  }
  .sidebar nav { align-items: stretch; padding: .8rem .7rem; }
  .sidebar .nav-link { justify-content: flex-start; gap: .85rem; padding: .62rem .9rem; }
  .sidebar .nav-link i { width: 1.35rem; text-align: center; font-size: 1.14rem; flex-shrink: 0; }
  .sidebar .nav-label { display: inline; font-size: .9rem; }
  .sidebar .nav-section { display: block; padding: .7rem .9rem .35rem; }
  .sidebar .nav-link.active::before { left: -4px; }

  /* Settings sub-menu shown inline while expanded */
  .rail-fly { display: none !important; }
  .sidebar .m-sub { display: block; }
  .sidebar .m-sub .nav-link { padding-left: 2.75rem !important; font-size: .86rem; border-radius: 10px; margin-top: 2px; }
  .sidebar .m-sub .nav-link i { width: 1.15rem; font-size: .98rem; }

  .sidebar-foot .btn-logout, .sidebar-collapse-btn { justify-content: flex-start; padding: .62rem .9rem; font-size: .86rem; }
  .sidebar-foot .btn-logout i, .sidebar-collapse-btn i { width: 1.35rem; text-align: center; font-size: 1.05rem; flex-shrink: 0; }
  .sidebar-collapse-btn {
    display: inline-flex; align-items: center; gap: .85rem; width: 100%;
    border-radius: 12px; margin-bottom: .5rem;
    background: rgba(255, 255, 255, .03); border: 1px solid var(--ops-line);
    color: var(--ops-muted); font-weight: 600; cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
  }
  .sidebar-collapse-btn:hover { color: var(--neon-cyan); border-color: rgba(47, 230, 255, .35); background: rgba(47, 230, 255, .05); }

  /* ---------- Collapsed icon-only mode ---------- */
  body.sidebar-collapsed .sidebar { width: var(--rail-w); }
  body.sidebar-collapsed .main { margin-left: var(--rail-w); }
  body.sidebar-collapsed .brand { justify-content: center; padding: 1.1rem .4rem 1rem; }
  body.sidebar-collapsed .brand a { justify-content: center; }
  body.sidebar-collapsed .brand-text,
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .nav-section,
  body.sidebar-collapsed .sidebar .m-sub { display: none !important; }
  body.sidebar-collapsed .sidebar .nav-link { justify-content: center; padding: .7rem 0; }
  body.sidebar-collapsed .sidebar .nav-link i { width: auto; font-size: 1.26rem; }
  body.sidebar-collapsed .rail-dot { right: 10px; top: 8px; }
  body.sidebar-collapsed .rail-fly { display: block !important; }
  body.sidebar-collapsed .sidebar-foot .btn-logout,
  body.sidebar-collapsed .sidebar-collapse-btn { justify-content: center; padding: .7rem 0; }
  body.sidebar-collapsed .sidebar-collapse-btn { margin-bottom: .5rem; }
  body.sidebar-collapsed .sidebar-collapse-btn .bi { transform: rotate(180deg); }
}

/* ---------- Clean neon pump ring (replaces the old 3D donut look) ---------- */
.pump-stage {
  position: relative; flex-shrink: 0;
  width: clamp(190px, 23vw, 232px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(47, 230, 255, .1), transparent 62%),
    radial-gradient(circle at 62% 72%, rgba(255, 79, 216, .06), transparent 58%),
    rgba(255, 255, 255, .02);
  border: 1px solid var(--ops-line-soft);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .38);
}
.pump-ring { position: absolute; inset: 0; width: auto; height: auto; }
.pump-ring svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .45)); }
.pump-ring .ring-track { fill: none; stroke: rgba(126, 136, 163, .14); }
.pump-seg {
  fill: none;
  transition: filter .2s ease, opacity .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
  transform-box: fill-box; transform-origin: center;
}
.pump-seg:hover { filter: brightness(1.55); opacity: 1; transform: translateY(-4px); }
.pump-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.pump-center .pc-val { font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; color: var(--neon-green); text-shadow: 0 0 26px rgba(52, 255, 154, .5); font-variant-numeric: tabular-nums; }
.pump-center .pc-sub { font-size: .68rem; color: var(--ops-muted); letter-spacing: .06em; margin-top: 2px; }
@media (max-width: 575.98px) {
  .pump-stage { width: min(200px, 66vw); }
  .pump-body { gap: .8rem; }
}

/* ============================================================
   POLISH v4 — Settings sub-menu ACCORDION behaviour
   (hidden by default; the gear toggles it open/closed)
   ============================================================ */
.sidebar .m-sub { display: none; }
.sidebar .rail-fly { opacity: 0; visibility: hidden; }

/* Desktop expanded: inline sub rows appear when the gear is toggled */
@media (min-width: 992px) {
  body:not(.sidebar-collapsed) .rail-item .rail-fly { display: none !important; }
  body:not(.sidebar-collapsed) .sidebar .rail-item.open .m-sub { display: block !important; }
  body:not(.sidebar-collapsed) .sidebar .m-sub { display: none !important; }
  /* Collapsed rail: inline rows stay off, flyout appears on hover/focus/open */
  body.sidebar-collapsed .sidebar .m-sub { display: none !important; }
  body.sidebar-collapsed .rail-item:hover .rail-fly,
  body.sidebar-collapsed .rail-item:focus-within .rail-fly,
  body.sidebar-collapsed .rail-item.open .rail-fly {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }
}
/* Mobile drawer: same accordion, inline rows under the gear */
@media (max-width: 991.98px) {
  .sidebar .rail-item .rail-fly { display: none !important; }
  .sidebar .rail-item.open .m-sub { display: block !important; }
}

/* Caret hint on the Settings row */
.sidebar .rail-settings-link::after {
  content: "";
  margin-left: auto;
  width: .42rem; height: .42rem; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .45;
  transition: transform var(--transition), opacity var(--transition);
}
body.sidebar-collapsed .sidebar .rail-settings-link::after { display: none; }
.sidebar .rail-item.open .rail-settings-link::after { transform: rotate(45deg); opacity: 1; color: var(--neon-cyan); }

/* ---------- Collapse button beside the brand name (icon only) ---------- */
.sidebar-collapse-btn { display: none; }
@media (min-width: 992px) {
  .sidebar-collapse-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; margin: 0 0 0 auto; padding: 0; flex-shrink: 0;
    border-radius: .7rem; cursor: pointer;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--ops-line);
    color: var(--ops-muted); font-size: 1rem;
    transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
  }
  .sidebar-collapse-btn:hover { color: var(--neon-cyan); border-color: rgba(47, 230, 255, .45); background: rgba(47, 230, 255, .07); }
  .sidebar-collapse-btn .bi { transition: transform var(--transition); }
  body.sidebar-collapsed .sidebar-collapse-btn .bi { transform: rotate(180deg); }
  body.sidebar-collapsed .sidebar-collapse-btn { margin: 0; }
}
/* Brand row keeps the app link + icon buttons on one line */
.sidebar .brand { gap: .5rem; }
.sidebar .brand > a { flex: 1; min-width: 0; overflow: hidden; }

/* ---------- Logout label: always visible while the rail is expanded ---------- */
@media (min-width: 992px) {
  body:not(.sidebar-collapsed) .sidebar-foot .btn-logout .nav-label { display: inline !important; }
}

/* ============================================================
   POLISH v5 — small-screen fixes
   ============================================================ */
@media (max-width: 991.98px) {
  /* Menu names must always show inside the mobile drawer */
  .sidebar .nav-label { display: inline !important; }
  .sidebar .nav-link { justify-content: flex-start !important; }

  /* Panel switcher + balance aligned nicely inside the drawer */
  .sidebar-panels { padding: .7rem .8rem; }
  .sidebar-panels .panel-nav {
    display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; width: 100%;
  }
  .sidebar-panels .panel-nav-icon { flex: 0 0 auto; }
  .sidebar-panels .panel-nav-select {
    flex: 1 1 calc(100% - 2rem); min-width: 0; max-width: none; width: auto;
  }
  .sidebar-panels .panel-nav-balance { flex: 1 1 100%; justify-content: center; }
}

/* Pump legend + ring stack cleanly on phones */
@media (max-width: 767.98px) {
  .pump-body { flex-direction: column; align-items: center; gap: .9rem; }
  .pump-legend {
    width: 100%; max-width: 330px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
  }
  .pump-legend .lg-row { min-width: 0; }
  .pump-legend .lg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 575.98px) {
  .pump-stage { width: min(190px, 62vw); }
  .pump-legend { max-width: none; }
}

/* ---------- Brand control icons (collapse / close) ----------
   The neon gradient on .brand i must not clip these button glyphs. */
.sidebar .brand .sidebar-collapse-btn i,
.sidebar .brand .sidebar-toggle-btn i {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit;
  filter: none !important;
  width: auto; height: auto; line-height: 1; flex: none;
  font-size: 1.05rem;
}

/* ---------- Hero-left quick tiles ---------- */
.hero-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: .6rem; margin-top: 1.15rem; max-width: 520px;
}
.hero-tile {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .62rem .8rem;
  border-radius: 13px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid var(--ops-line-soft);
}
.hero-tile .ht-label { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ops-muted); }
.hero-tile .ht-val { font-size: 1.05rem; font-weight: 800; color: var(--ops-text); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.hero-tile.ht-cyan .ht-val { color: var(--neon-cyan); }
.hero-tile.ht-green .ht-val { color: var(--neon-green); }
.hero-tile.ht-yellow .ht-val { color: var(--neon-yellow); }
.hero-tile.ht-violet .ht-val { color: #c4a6ff; }
@media (max-width: 575.98px) {
  .hero-tiles { grid-template-columns: repeat(2, 1fr); max-width: none; }
}