/* ============================================================
   CMS — "SECURE-OPS" CYBER THEME
   Dark, neon, terminal-inspired UI. All class names kept
   identical to the previous theme so no PHP markup changes
   were needed — this file is a pure re-skin.
   ============================================================ */
:root{
  --bg:#05070d; --bg2:#070b14;
  --card:#0c121e; --card2:#0f1626;
  --text:#d9e6ff; --muted:#7284a8;
  --border:rgba(34,211,238,.16); --border-strong:rgba(34,211,238,.35);

  --primary:#22d3ee; --primary-dark:#0891b2; --primary-light:rgba(34,211,238,.12);
  --accent:#a855f7; --accent2:#ffb300; --accent3:#ff2fb8;

  --success:#39ff88; --success-bg:rgba(57,255,136,.12);
  --warning:#ffcc33; --warning-bg:rgba(255,204,51,.12);
  --danger:#ff3860; --danger-bg:rgba(255,56,96,.12);
  --info:#38bdf8; --info-bg:rgba(56,189,248,.12);

  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(34,211,238,.05);
  --shadow-md:0 8px 28px rgba(0,0,0,.55);
  --glow:0 0 0 1px var(--border-strong), 0 0 18px rgba(34,211,238,.15);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;color:var(--text);-webkit-font-smoothing:antialiased;
  font-family:'JetBrains Mono','Share Tech Mono','Courier New',monospace;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(ellipse 800px 500px at 110% 10%, rgba(34,211,238,.14), transparent 55%),
    linear-gradient(var(--bg2), var(--bg));
  background-attachment:fixed;
  position:relative;
}
/* faint tech grid, purely decorative, behind everything */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(34,211,238,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.045) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
}
/* subtle scanline sweep */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px);
  opacity:.5;
}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-weight:800;letter-spacing:-.01em;font-family:'Orbitron','JetBrains Mono',monospace;}
code{background:#0a1220;border:1px solid var(--border);color:var(--primary);padding:1px 6px;border-radius:5px;font-size:12px;}

.app{display:flex;min-height:100vh;position:relative;z-index:2;}
#app-content.loading{opacity:.4;pointer-events:none;transition:opacity .15s;filter:blur(1px);}

/* ---------- Sidebar ---------- */
.sidebar{
  width:236px;flex-shrink:0;padding:18px 0;
  background:linear-gradient(200deg,#070a14 0%,#0b0f22 55%,#050710 100%);
  border-right:1px solid var(--border);
  color:#cfe3ff;position:sticky;top:0;height:100vh;overflow-y:auto;
  transition:transform .25s ease;
  box-shadow:inset -1px 0 0 rgba(34,211,238,.05);
}
.sidebar .brand{font-weight:800;font-size:18px;padding:0 22px 18px;margin-bottom:8px;
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px;
  font-family:'Orbitron',monospace;letter-spacing:.04em;text-transform:uppercase;color:#eaf6ff;}
.sidebar .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 4px rgba(57,255,136,.18), 0 0 10px rgba(57,255,136,.8);animation:pulse-dot 2s infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.4;}}
.sidebar .nav-section{padding:16px 22px 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.15em;color:#4d6389;margin-top:4px;font-weight:700;}
.sidebar a{display:flex;align-items:center;gap:10px;padding:10px 22px;color:#9db4d6;font-size:13.5px;border-left:3px solid transparent;font-weight:500;}
.sidebar a .nav-ic{font-size:15px;width:18px;text-align:center;filter:grayscale(.15) drop-shadow(0 0 4px rgba(34,211,238,.3));}
.sidebar a:hover{background:rgba(34,211,238,.06);color:#eaf6ff;text-decoration:none;}
.sidebar a.active{background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(168,85,247,.05));
  color:#fff;border-left-color:var(--primary);font-weight:700;box-shadow:inset 0 0 20px rgba(34,211,238,.06);}
.sidebar-close{display:none;}

/* ---------- Topbar / content ---------- */
.content{flex:1;padding:22px 30px 60px;min-width:0;position:relative;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.topbar h1{font-size:21px;margin:0;display:flex;align-items:center;gap:10px;font-family:'Orbitron',monospace;
  color:#eaf6ff;text-shadow:0 0 20px rgba(34,211,238,.25);}
.topbar h1::after{content:'_';color:var(--primary);animation:blink-caret 1.1s steps(1) infinite;}
@keyframes blink-caret{50%{opacity:0;}}
.topbar-right{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);}
.hamburger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--text);padding:4px 8px;}

/* ---------- Top search bar ---------- */
.topsearch{position:relative;flex:1;max-width:420px;margin:0 16px;}
.topsearch input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid var(--border);
  background:#0a1120;color:var(--text);font-family:inherit;font-size:13.5px;transition:box-shadow .15s, border-color .15s;}
.topsearch input::placeholder{color:#4d6389;}
.topsearch input:focus{outline:none;background:#0c1526;box-shadow:0 0 0 3px rgba(34,211,238,.12), 0 0 14px rgba(34,211,238,.15);border-color:var(--primary);}
.topsearch-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#0a0f1c;border:1px solid var(--border-strong);
  border-radius:10px;box-shadow:var(--shadow-md), 0 0 24px rgba(34,211,238,.1);z-index:60;max-height:360px;overflow-y:auto;display:none;}
.topsearch-results.show{display:block;}
.topsearch-loading,.topsearch-empty{padding:14px 16px;color:var(--muted);font-size:13px;}
.topsearch-item{display:block;padding:10px 16px;border-bottom:1px solid var(--border);position:relative;}
.topsearch-item:last-child{border-bottom:none;}
.topsearch-item:hover{background:rgba(34,211,238,.06);text-decoration:none;}
.topsearch-item-main{font-size:13.5px;color:var(--text);}
.topsearch-item-sub{margin-top:2px;}
.topsearch-item-due{position:absolute;right:14px;top:12px;}
@media(max-width:860px){.topsearch{display:none;}}
.role-pill{padding:3px 10px;border-radius:6px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border:1px solid transparent;}

/* ---------- Live/secure indicator + sound toggle ---------- */
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--success);}
.live-dot i{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);animation:pulse-dot 1.6s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.7);}}
.icon-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .15s;}
.icon-btn:hover{border-color:var(--border-strong);color:var(--primary);box-shadow:0 0 10px rgba(34,211,238,.25);}
.icon-btn.muted{opacity:.4;}
@media(max-width:860px){.live-dot span,.live-dot{display:none;}}
.role-superadmin{background:rgba(255,47,184,.12);color:#ff6fd0;border-color:rgba(255,47,184,.35);text-shadow:0 0 8px rgba(255,47,184,.5);}
.role-operator{background:var(--info-bg);color:var(--info);border-color:rgba(56,189,248,.3);}

/* ---------- Cards / grid ---------- */
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;margin-bottom:20px;box-shadow:var(--shadow);transition:box-shadow .2s ease, border-color .2s ease;}
.card:hover{box-shadow:var(--glow);border-color:var(--border-strong);}
.card h3{margin-top:0;color:#eaf6ff;}
.grid{display:grid;gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.stat{background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.stat:hover{transform:translateY(-3px);box-shadow:var(--glow);border-color:var(--border-strong);}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--primary),var(--accent));
  box-shadow:0 0 12px var(--primary);}
.stat.success::before{background:linear-gradient(180deg,#5dffa8,var(--success));box-shadow:0 0 12px var(--success);}
.stat.warning::before{background:linear-gradient(180deg,#ffe066,var(--warning));box-shadow:0 0 12px var(--warning);}
.stat.danger::before{background:linear-gradient(180deg,#ff6b8b,var(--danger));box-shadow:0 0 12px var(--danger);}
.stat.info::before{background:linear-gradient(180deg,#7dd3fc,var(--info));box-shadow:0 0 12px var(--info);}
.stat.primary::before{background:linear-gradient(180deg,#c4b5fd,var(--accent));box-shadow:0 0 12px var(--accent);}
.stat .label{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.stat .value{font-size:23px;font-weight:800;margin-top:6px;font-family:'Orbitron','JetBrains Mono',monospace;color:#eaf6ff;}
.stat.success .value{color:var(--success);text-shadow:0 0 14px rgba(57,255,136,.35);}
.stat.warning .value{color:var(--warning);text-shadow:0 0 14px rgba(255,204,51,.3);}
.stat.danger .value{color:var(--danger);text-shadow:0 0 14px rgba(255,56,96,.35);}
.stat.info .value{color:var(--info);text-shadow:0 0 14px rgba(56,189,248,.3);}
.stat.primary .value{color:#c4b5fd;text-shadow:0 0 14px rgba(168,85,247,.3);}
.stat.grad{background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(168,85,247,.16));border-color:var(--border-strong);}
.stat.grad .label{color:#bfe8ff;}
.stat.grad .value{color:#fff;text-shadow:0 0 16px rgba(34,211,238,.5);}
.stat.grad::before{display:none;}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;background:transparent;font-size:13.5px;color:var(--text);}
table th,table td{padding:11px 13px;border-bottom:1px solid var(--border);text-align:left;}
table th{background:rgba(34,211,238,.04);font-weight:700;color:#5f89c2;font-size:11px;text-transform:uppercase;letter-spacing:.05em;}
tr:hover td{background:rgba(34,211,238,.035);}
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.table-wrap table{border-radius:var(--radius);overflow:hidden;}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:3px 11px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.03em;border:1px solid transparent;text-transform:uppercase;}
.badge-success{background:var(--success-bg);color:var(--success);border-color:rgba(57,255,136,.3);}
.badge-warning{background:var(--warning-bg);color:var(--warning);border-color:rgba(255,204,51,.3);}
.badge-danger{background:var(--danger-bg);color:var(--danger);border-color:rgba(255,56,96,.3);}
.badge-info{background:var(--info-bg);color:var(--info);border-color:rgba(56,189,248,.3);}
.badge-muted{background:rgba(114,132,168,.12);color:var(--muted);border-color:rgba(114,132,168,.25);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#031015;border:none;padding:9px 16px;
  border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;
  transition:transform .1s, box-shadow .15s, filter .15s;box-shadow:0 0 0 1px rgba(34,211,238,.4), 0 0 14px rgba(34,211,238,.3);}
.btn:hover{box-shadow:0 0 0 1px rgba(34,211,238,.6), 0 0 22px rgba(34,211,238,.55);text-decoration:none;filter:brightness(1.08);}
.btn:active{transform:scale(.96);}
.btn-sm{padding:6px 11px;font-size:11.5px;border-radius:6px;}
.btn-danger{background:linear-gradient(135deg,#ff6b8b,var(--danger));color:#1a0006;box-shadow:0 0 0 1px rgba(255,56,96,.4), 0 0 14px rgba(255,56,96,.3);}
.btn-danger:hover{box-shadow:0 0 0 1px rgba(255,56,96,.6), 0 0 22px rgba(255,56,96,.55);}
.btn-success{background:linear-gradient(135deg,#5dffa8,var(--success));color:#00230f;box-shadow:0 0 0 1px rgba(57,255,136,.4), 0 0 14px rgba(57,255,136,.3);}
.btn-success:hover{box-shadow:0 0 0 1px rgba(57,255,136,.6), 0 0 22px rgba(57,255,136,.55);}
.btn-outline{background:transparent;color:var(--primary);border:1px solid var(--border-strong);box-shadow:none;}
.btn-outline:hover{background:rgba(34,211,238,.08);box-shadow:0 0 14px rgba(34,211,238,.2);}
.btn-gray{background:#141b2b;color:#9db4d6;box-shadow:0 0 0 1px rgba(114,132,168,.25);}
.btn-gray:hover{background:#1a2338;box-shadow:0 0 0 1px rgba(114,132,168,.4);}
form.inline{display:inline;}

/* ---------- Forms ---------- */
.form-row{margin-bottom:14px;}
.form-row label{display:block;margin-bottom:5px;font-size:11px;font-weight:700;color:#5f89c2;text-transform:uppercase;letter-spacing:.05em;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:7px;font-size:13.5px;font-family:inherit;
  background:#0a1120;color:var(--text);
}
input::placeholder,textarea::placeholder{color:#3d5171;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(34,211,238,.14), 0 0 14px rgba(34,211,238,.12);}
textarea{resize:vertical;}
select{color-scheme:dark;}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px;border-radius:9px;margin-bottom:18px;font-size:13.5px;border:1px solid transparent;}
.alert-success{background:var(--success-bg);color:var(--success);border-color:rgba(57,255,136,.3);}
.alert-danger{background:var(--danger-bg);color:#ff8fa8;border-color:rgba(255,56,96,.3);}
.alert-info{background:var(--info-bg);color:var(--info);border-color:rgba(56,189,248,.3);}

/* ---------- Toast ---------- */
#app-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#0a0f1c;color:var(--primary);
  border:1px solid var(--border-strong);padding:10px 20px;border-radius:8px;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 18px rgba(34,211,238,.25);
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:200;font-family:'JetBrains Mono',monospace;}
#app-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Utility ---------- */
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.muted{color:var(--muted);}
.text-right{text-align:right;}
.small{font-size:12px;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;padding:20px;}
.login-box{background:linear-gradient(180deg,var(--card2),var(--card));padding:38px 34px;border-radius:16px;
  border:1px solid var(--border-strong);box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(34,211,238,.12);
  width:100%;max-width:380px;position:relative;}
.login-box h2{margin-top:0;text-align:center;color:#eaf6ff;text-shadow:0 0 20px rgba(34,211,238,.3);}
.login-box .brand-icon{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;color:#031015;font-weight:800;font-size:20px;
  box-shadow:0 0 0 1px rgba(34,211,238,.5), 0 0 26px rgba(34,211,238,.45);}

/* ---------- Profile Tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;}
.tab-btn{padding:11px 18px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em;}
.tab-btn:hover{color:var(--primary);}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);text-shadow:0 0 10px rgba(34,211,238,.4);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- Slip ---------- */
.slip{max-width:520px;margin:0 auto;background:linear-gradient(180deg,var(--card2),var(--card));border-radius:14px;
  border:1px solid var(--border-strong);box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 30px rgba(34,211,238,.1);overflow:hidden;position:relative;}
.slip-band{height:6px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--success));box-shadow:0 0 14px rgba(34,211,238,.5);}
.slip-body{padding:30px 30px 24px;}
.slip-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.slip-head .co-name{font-size:19px;font-weight:800;margin:0;font-family:'Orbitron',monospace;color:#eaf6ff;}
.slip-head .co-meta{color:var(--muted);font-size:12px;margin-top:2px;}
.slip-head .slip-tag{background:rgba(34,211,238,.12);color:var(--primary);font-weight:800;font-size:10.5px;border:1px solid var(--border-strong);
  letter-spacing:.08em;padding:6px 12px;border-radius:20px;text-transform:uppercase;white-space:nowrap;}
.slip h2{text-align:center;margin:0 0 4px;}
.slip .company{text-align:center;color:var(--muted);margin-bottom:16px;font-size:13px;}
.slip-divider{border:none;border-top:1px dashed var(--border-strong);margin:16px 0;}
.slip table{background:transparent;}
.slip table td{border:none;padding:7px 0;font-size:13.5px;}
.slip table tr:hover td{background:transparent;}
.slip .row-total td{font-size:16px;font-weight:800;padding-top:12px;border-top:1px solid var(--border-strong);color:#eaf6ff;}
.slip .row-total.due td{color:var(--danger);text-shadow:0 0 12px rgba(255,56,96,.3);}
.slip .row-total.clear td{color:var(--success);text-shadow:0 0 12px rgba(57,255,136,.3);}
.slip hr{border:none;border-top:1px dashed var(--border);margin:12px 0;}
.slip.cancelled{opacity:.8;}
.slip.cancelled .slip-band{background:linear-gradient(90deg,var(--danger),#ff6b8b);}
.stamp-cancelled{position:absolute;top:60px;right:24px;color:var(--danger);border:2px solid var(--danger);
  padding:4px 14px;border-radius:6px;font-weight:800;font-size:15px;transform:rotate(10deg);opacity:.9;z-index:5;
  text-shadow:0 0 10px rgba(255,56,96,.6);box-shadow:0 0 16px rgba(255,56,96,.25);font-family:'Orbitron',monospace;}
.stamp-paid{position:absolute;top:60px;right:24px;color:var(--success);border:2px solid var(--success);
  padding:4px 14px;border-radius:6px;font-weight:800;font-size:15px;transform:rotate(-8deg);opacity:.9;z-index:5;
  text-shadow:0 0 10px rgba(57,255,136,.6);box-shadow:0 0 16px rgba(57,255,136,.25);font-family:'Orbitron',monospace;}
.slip-footer{text-align:center;padding:14px;background:rgba(34,211,238,.03);border-top:1px solid var(--border);color:var(--muted);font-size:12px;}

pre.message-box{white-space:pre-wrap;background:#0a1120;border:1px solid var(--border);color:var(--text);border-radius:9px;padding:14px;font-family:inherit;font-size:13.5px;}

/* ---------- Profile header ---------- */
.profile-header{display:flex;align-items:center;gap:16px;margin-bottom:6px;flex-wrap:wrap;}
.avatar{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#031015;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:21px;flex-shrink:0;box-shadow:0 0 0 1px rgba(34,211,238,.5),0 0 24px rgba(34,211,238,.35);
  font-family:'Orbitron',monospace;}

/* ---------- Timeline / log list ---------- */
.log-item{padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.log-item:last-child{border-bottom:none;}
.log-item .log-action{font-weight:700;color:var(--primary);}
.log-item .log-meta{color:var(--muted);font-size:11.5px;}

/* ---------- Connection banner ---------- */
.conn-banner{background:linear-gradient(90deg,rgba(56,189,248,.1),rgba(168,85,247,.06));color:#bfe8ff;border:1px solid var(--border-strong);border-radius:10px;padding:12px 16px;
  margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.no-print,.hamburger,#app-toast,#matrix-bg{display:none !important;}
  body{background:#fff !important;color:#000 !important;}
  body::before,body::after{display:none !important;}
  .content{padding:0;}
  .card{box-shadow:none;border:1px solid #ddd;background:#fff;color:#000;}
  .slip,.stat,table{background:#fff;color:#000;}
}

/* ---------- Responsive sidebar (mobile) ---------- */
@media(max-width:860px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);width:250px;box-shadow:0 0 50px rgba(0,0,0,.6);}
  .sidebar.open{transform:translateX(0);}
  .hamburger{display:inline-block;}
  .sidebar-close{display:block;position:absolute;top:14px;right:16px;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;backdrop-filter:blur(2px);}
  .sidebar-backdrop.open{display:block;}
  .content{padding:16px;}
  .topbar h1{font-size:17px;}
  table th,table td{padding:9px 10px;font-size:12.5px;}
}

@media(max-width:600px){
  .content{padding:12px;}
  .card{padding:15px;border-radius:12px;}
  .topbar{margin-bottom:12px;}
  .topbar-right{font-size:12px;gap:8px;}
  .topbar-right span:not(.role-pill){display:none;}
  .profile-header{gap:12px;}
  .avatar{width:46px;height:46px;font-size:17px;border-radius:11px;}
  .tabs{gap:2px;}
  .tab-btn{padding:9px 12px;font-size:12px;}
  .btn,.btn-sm{padding:8px 12px;font-size:12.5px;}
  .grid{gap:10px;}
  .stat{padding:13px 14px;}
  .stat .value{font-size:18px;}
  .slip-body{padding:20px 18px 16px;}
  .slip-head .co-name{font-size:16px;}
  h1{font-size:18px;} h2{font-size:17px;} h3{font-size:15px;}
  .login-box{padding:28px 22px;}
}

@media(max-width:400px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .flex{gap:8px;}
}

.print-header{display:none;}
@media print{.print-header{display:block;margin-bottom:12px;} .topsearch{display:none !important;}}

/* ---------- Customer self-service portal ---------- */
.portal-topbar{position:sticky;top:0;z-index:40;background:#070b14;border-bottom:1px solid var(--border-strong);
  padding:12px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 20px rgba(0,0,0,.4);}
.portal-brand{font-weight:800;font-size:15px;font-family:'Orbitron',monospace;color:var(--primary);text-shadow:0 0 14px rgba(34,211,238,.4);}
.portal-wrap{max-width:900px;margin:20px auto;padding:0 16px 40px;position:relative;z-index:2;}
.portal-wrap .card{margin-bottom:18px;}
@media(max-width:600px){
  .portal-topbar{flex-direction:column;gap:10px;align-items:stretch;}
  .portal-topbar .flex{justify-content:center;flex-wrap:wrap;}
  .portal-wrap{margin-top:10px;}
}

/* ---------- Matrix rain background canvas ---------- */
#matrix-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;}

/* ---------- Matrix rain login background ---------- */
#matrix-bg{position:fixed;inset:0;z-index:1;opacity:.5;pointer-events:none;background:#05070d;}
.login-wrap{z-index:2;}

/* ---------- Terminal typewriter tagline on login screens ---------- */
.terminal-line{
  text-align:center;color:var(--success);font-size:12.5px;letter-spacing:.03em;margin:-6px 0 18px;
  white-space:nowrap;overflow:hidden;border-right:0;
  width:0;animation:typing 1.6s steps(28,end) forwards, glow-text 2s ease-in-out infinite alternate;
}
.terminal-line .cursor{animation:blink-cursor 1s step-end infinite;}
@keyframes typing{from{width:0;}to{width:26ch;}}
@keyframes blink-cursor{50%{opacity:0;}}
@keyframes glow-text{from{text-shadow:0 0 4px rgba(57,255,136,.4);}to{text-shadow:0 0 10px rgba(57,255,136,.8);}}