/* ============================================================
   License Tracker — style.css  v6  ·  Glassmorphism Theme
   Navy · Teal · Cyan  ·  Seamless IT Team
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --header-h:70px;
  --sidebar-w:224px;

  /* Navy base */
  --navy-deep:#020b18;
  --navy-mid:#041526;
  --navy-light:#071e38;
  --bg:var(--navy-deep);
  --bg2:var(--navy-mid);

  /* Glass surfaces */
  --glass-1:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.07);
  --glass-3:rgba(255,255,255,.11);
  --glass-teal:rgba(0,200,255,.06);
  --glass-teal2:rgba(0,200,255,.12);

  /* Borders */
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.14);
  --border-teal:rgba(0,200,255,.18);
  --border-teal2:rgba(0,200,255,.35);
  --border-cyan:rgba(0,229,204,.20);

  /* Text */
  --text:#e2f0ff;
  --text2:#7aabcc;
  --muted:#2e5070;

  /* Primary Teal & Cyan */
  --teal:#00c8ff;
  --teal2:#00e5cc;
  --teal-dim:rgba(0,200,255,.10);
  --teal-mid:rgba(0,200,255,.18);
  --cyan-dim:rgba(0,170,255,.10);

  /* Status */
  --green:#00e87a;
  --green-dim:rgba(0,232,122,.10);
  --green-mid:rgba(0,232,122,.18);
  --red:#ff4060;
  --red-dim:rgba(255,64,96,.10);
  --red-mid:rgba(255,64,96,.18);
  --amber:#ffb020;
  --amber-dim:rgba(255,176,32,.10);
  --amber-mid:rgba(255,176,32,.16);
  --purple:#9b7fff;
  --purple-dim:rgba(155,127,255,.12);
  --blue:#3d9fff;
  --blue-dim:rgba(61,159,255,.10);

  /* SDS orange accent */
  --accent:#ff6a35;
  --accent2:#ff9060;
  --accent-dim:rgba(255,106,53,.10);

  /* Glassmorphism shadows + glows */
  --glass-shadow:0 8px 32px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.07);
  --glass-shadow-lg:0 16px 60px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.09);
  --glow-teal:0 0 30px rgba(0,200,255,.18),0 0 60px rgba(0,200,255,.07);
  --glow-teal-sm:0 0 16px rgba(0,200,255,.20);
  --glow-cyan:0 0 24px rgba(0,229,204,.15);
  --glow-green:0 0 20px rgba(0,232,122,.15);
  --glow-accent:0 0 24px rgba(255,106,53,.22);

  --mono:'DM Mono',monospace;
  --serif:'Fraunces',serif;

  /* Legacy aliases for inline HTML styles */
  --surface:var(--glass-1);
  --surface2:var(--glass-2);
  --surface3:var(--glass-3)
}

/* ── LAYOUT GRID ─────────────────────────────────────────── */
:root{--header-h:70px;--sidebar-w:224px}

body{
  background:var(--navy-deep);
  color:var(--text);
  font-family:var(--serif);
  min-height:100vh;
  overflow-x:hidden;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:var(--header-h) 1fr;
  grid-template-areas:"hd hd" "sb mc"
}
.wrap{position:relative;z-index:1}

/* Aurora background */
body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 140% 80% at -10% -20%,rgba(0,80,160,.55) 0%,transparent 50%),
    radial-gradient(ellipse 80%  60% at 110% 5%, rgba(0,180,200,.30) 0%,transparent 45%),
    radial-gradient(ellipse 60%  70% at 20% 110%,rgba(0,50,100,.50)  0%,transparent 55%),
    radial-gradient(ellipse 90%  80% at 85% 80%, rgba(0,100,150,.20) 0%,transparent 55%),
    var(--navy-deep);
  pointer-events:none;z-index:0
}
/* Teal mesh grid */
body::after{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(0,200,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,200,255,.03) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;z-index:0
}

/* ── LOADING ─────────────────────────────────────────────── */
#loadingOverlay{position:fixed;inset:0;background:var(--navy-deep);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .4s}
#loadingOverlay.hidden{opacity:0;pointer-events:none}
.spinner{width:36px;height:36px;border:2px solid rgba(0,200,255,.15);border-top-color:var(--teal);border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-family:var(--mono);font-size:11px;color:var(--teal);letter-spacing:3px;text-transform:uppercase;opacity:.7}

/* ── HEADER ──────────────────────────────────────────────── */
header{
  grid-area:hd;
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  background:rgba(2,11,24,.75);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border-teal);
  box-shadow:0 1px 0 rgba(0,200,255,.08),0 4px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)
}
.brand{display:flex;align-items:center;gap:14px}

/* "Seamless IT Team" eyebrow — aquamarine glow */
.brand-eyebrow{
  font-family:var(--mono);font-size:10px;
  letter-spacing:3.5px;text-transform:uppercase;
  color:#7fffd4;
  text-shadow:
    0 0 8px  rgba(127,255,212,1),
    0 0 18px rgba(127,255,212,.7),
    0 0 36px rgba(127,255,212,.4),
    0 0 60px rgba(127,255,212,.2);
  font-weight:600
}

/* "License" — normal white */
.brand h1{
  font-size:24px;font-weight:700;
  letter-spacing:-1px;line-height:1;
  color:var(--text)
}

/* "Tracker" — aquamarine fluorescent glow */
.brand h1 em{
  font-style:normal;
  font-weight:800;
  color:#7fffd4;
  text-shadow:
    0 0 10px rgba(127,255,212,1),
    0 0 22px rgba(127,255,212,.8),
    0 0 45px rgba(127,255,212,.5),
    0 0 80px rgba(127,255,212,.25),
    0 0 120px rgba(127,255,212,.1);
  animation:aqua-pulse 3s ease-in-out infinite
}

@keyframes aqua-pulse{
  0%,100%{
    text-shadow:
      0 0 10px rgba(127,255,212,1),
      0 0 22px rgba(127,255,212,.8),
      0 0 45px rgba(127,255,212,.5),
      0 0 80px rgba(127,255,212,.25)
  }
  50%{
    text-shadow:
      0 0 14px rgba(127,255,212,1),
      0 0 30px rgba(127,255,212,.9),
      0 0 60px rgba(127,255,212,.65),
      0 0 100px rgba(127,255,212,.35),
      0 0 140px rgba(127,255,212,.15)
  }
}
.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* .date-badge — replaced by .ist-clock */
.search-wrap{position:relative}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--teal);pointer-events:none;opacity:.6}
.search-input{background:var(--glass-teal);border:1px solid var(--border-teal);border-radius:10px;color:var(--text);font-family:var(--mono);font-size:12px;padding:9px 14px 9px 34px;width:220px;outline:none;backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s}
.search-input::placeholder{color:var(--muted)}
.search-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,200,255,.12),var(--glow-teal-sm)}


/* ── IST CLOCK — Fluorescent Red + Glow + Second Pulse ──────── */
.ist-clock{
  display:inline-flex !important;
  align-items:center;gap:12px;
  font-family:var(--mono) !important;
  background:rgba(220,20,20,.12) !important;
  border:1px solid rgba(255,50,50,.45) !important;
  border-radius:12px !important;
  padding:9px 20px !important;
  box-shadow:
    0 0 20px rgba(255,30,30,.30),
    0 0 50px rgba(255,30,30,.12),
    0 0 80px rgba(255,30,30,.06),
    inset 0 1px 0 rgba(255,120,120,.15) !important;
  position:relative !important;
  overflow:hidden;
  white-space:nowrap
}
.ist-clock::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,60,60,.08) 0%,transparent 55%);
  pointer-events:none
}

/* IST badge */
.clock-ist-badge{
  font-size:10px !important;font-weight:900 !important;
  letter-spacing:3px !important;
  color:#ff2222 !important;
  background:rgba(255,30,30,.20) !important;
  border:1px solid rgba(255,50,50,.50) !important;
  border-radius:6px !important;
  padding:3px 9px !important;
  flex-shrink:0;
  text-shadow:0 0 10px rgba(255,30,30,.9),0 0 20px rgba(255,30,30,.5) !important;
  box-shadow:0 0 10px rgba(255,30,30,.3) !important
}

/* Date */
.clock-date{
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.4px !important;
  color:#ff9999 !important;
  text-shadow:0 0 8px rgba(255,60,60,.4) !important
}

/* Separator */
.clock-sep{
  color:rgba(255,80,80,.5) !important;
  font-size:16px !important;
  font-weight:200 !important;
  margin:0 2px
}

/* Time block */
.clock-time{
  display:inline-flex !important;
  align-items:baseline;gap:0
}
.clock-hm{
  font-size:26px !important;
  font-weight:800 !important;
  letter-spacing:-2px !important;
  color:#ff2222 !important;
  text-shadow:
    0 0 10px rgba(255,30,30,1),
    0 0 20px rgba(255,30,30,.8),
    0 0 40px rgba(255,30,30,.5),
    0 0 70px rgba(255,30,30,.25) !important
}
.clock-colon{
  font-size:26px !important;
  font-weight:800 !important;
  color:#ff2222 !important;
  width:14px !important;
  text-align:center;
  text-shadow:
    0 0 10px rgba(255,30,30,1),
    0 0 20px rgba(255,30,30,.7) !important
}
.clock-sec{
  font-size:20px !important;
  font-weight:700 !important;
  letter-spacing:-1px !important;
  color:#ff6666 !important;
  text-shadow:
    0 0 8px rgba(255,40,40,.9),
    0 0 18px rgba(255,40,40,.5) !important
}

/* Pulse dot — flares every second */
.clock-pulse-dot{
  width:9px !important;
  height:9px !important;
  border-radius:50%;flex-shrink:0;
  background:#ff3333 !important;
  box-shadow:0 0 8px rgba(255,30,30,.6) !important;
  transition:none
}
.clock-pulse-dot.pulse{
  background:#ff6666 !important;
  animation:sec-pulse .6s ease-out forwards !important
}
@keyframes sec-pulse{
  0%{
    transform:scale(1.8);
    background:#ff0000;
    box-shadow:
      0 0 0   0   rgba(255,30,30,.8),
      0 0 16px 4px rgba(255,30,30,1),
      0 0 32px 8px rgba(255,30,30,.6),
      0 0 60px 12px rgba(255,30,30,.3)
  }
  60%{
    transform:scale(1.2);
    box-shadow:
      0 0 12px rgba(255,30,30,.6),
      0 0 24px rgba(255,30,30,.3)
  }
  100%{
    transform:scale(1);
    background:#ff3333;
    box-shadow:0 0 8px rgba(255,30,30,.4)
  }
}

/* ── SIDE NAV ────────────────────────────────────────────── */
.side-nav{
  grid-area:sb;
  position:sticky;top:var(--header-h);
  height:calc(100vh - var(--header-h));
  overflow-y:auto;
  background:rgba(2,11,24,.75);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-right:1px solid rgba(0,200,255,.15);
  display:flex;flex-direction:column;
  padding:16px 10px;gap:6px;
  scrollbar-width:none;z-index:40;
  box-shadow:inset -1px 0 0 rgba(0,200,255,.08),2px 0 20px rgba(0,0,0,.3)
}
.side-nav::-webkit-scrollbar{display:none}

/* Group label */
.side-nav-label{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:2.5px;
  color:var(--teal);opacity:.55;
  padding:10px 10px 5px;
  margin-top:2px
}
.side-nav-label:first-child{margin-top:0}

/* ── Every nav item = outlined cyan box like the Prediction button ── */
.page-tab{
  font-family:var(--mono);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.8px;
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(0,200,255,.22);
  cursor:pointer;
  color:rgba(0,200,255,.55);
  background:rgba(0,200,255,.04);
  backdrop-filter:blur(8px);
  transition:all .2s;white-space:nowrap;width:100%;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)
}
.page-tab svg{
  opacity:.6;transition:opacity .2s;flex-shrink:0
}
.page-tab:hover{
  color:var(--teal);
  background:rgba(0,200,255,.10);
  border-color:rgba(0,200,255,.50);
  box-shadow:
    0 0 12px rgba(0,200,255,.18),
    0 0 24px rgba(0,200,255,.08),
    inset 0 1px 0 rgba(255,255,255,.07)
}
.page-tab:hover svg{opacity:1}

/* Active state — fully lit box */
.page-tab.active{
  color:var(--teal);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.5px;
  background:rgba(0,200,255,.13);
  border-color:var(--teal);
  box-shadow:
    0 0 16px rgba(0,200,255,.30),
    0 0 36px rgba(0,200,255,.12),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 20px rgba(0,200,255,.05)
}
.page-tab.active svg{opacity:1;filter:drop-shadow(0 0 4px rgba(0,200,255,.6))}

/* User Mgmt tab — purple tinted */
#tabUserMgmt{
  border-color:rgba(155,127,255,.30);
  color:rgba(155,127,255,.70);
  background:rgba(155,127,255,.05)
}
#tabUserMgmt:hover{
  color:var(--purple);
  background:rgba(155,127,255,.12);
  border-color:rgba(155,127,255,.60);
  box-shadow:0 0 14px rgba(155,127,255,.20)
}
#tabUserMgmt.active{
  color:var(--purple);
  border-color:var(--purple);
  background:rgba(155,127,255,.14);
  box-shadow:0 0 16px rgba(155,127,255,.30)
}

.side-nav-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,200,255,.25),transparent);
  margin:4px 6px
}

/* Prediction link — same outlined box design, cyan-green tint */
.side-nav-pred{
  display:flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.8px;
  padding:11px 14px;border-radius:12px;
  border:1px solid rgba(0,229,204,.35);
  color:var(--teal2);text-decoration:none;
  background:rgba(0,229,204,.07);
  backdrop-filter:blur(8px);
  transition:all .2s;white-space:nowrap;
  margin-top:auto;
  box-shadow:
    0 0 12px rgba(0,229,204,.10),
    inset 0 1px 0 rgba(255,255,255,.05)
}
.side-nav-pred svg{opacity:.7;transition:opacity .2s;flex-shrink:0}
.side-nav-pred:hover{
  background:rgba(0,229,204,.14);
  border-color:var(--teal2);
  color:var(--teal2);
  box-shadow:
    0 0 18px rgba(0,229,204,.28),
    0 0 40px rgba(0,229,204,.10),
    inset 0 1px 0 rgba(255,255,255,.09)
}
.side-nav-pred:hover svg{opacity:1}

/* ── MAIN CONTENT ────────────────────────────────────────── */
.main-content{grid-area:mc;min-width:0;padding:0 28px 40px;position:relative;z-index:1;overflow-x:hidden}
.page-content{display:none}
.page-content.active{display:block}

/* ── MONTH TIMELINE ──────────────────────────────────────── */
.month-timeline{display:flex;align-items:center;gap:6px;padding:18px 0 22px;overflow-x:auto;scrollbar-width:none}
.month-timeline::-webkit-scrollbar{display:none}
.mt-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  padding:9px 15px 8px;border-radius:12px;
  border:1px solid var(--border);
  background:var(--glass-1);backdrop-filter:blur(12px);
  color:var(--muted);cursor:pointer;
  transition:all .2s;white-space:nowrap;flex-shrink:0;
  position:relative;user-select:none
}
.mt-item:hover{color:var(--teal);border-color:var(--border-teal);background:var(--glass-teal);box-shadow:var(--glow-teal-sm)}
.mt-item.active{color:var(--teal);border-color:var(--border-teal2);background:var(--glass-teal2);box-shadow:var(--glow-teal)}
.mt-item.active::after{content:'';position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);width:20px;height:2px;border-radius:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent)}
.mt-month-label{font-size:11px;font-weight:700;letter-spacing:-.3px}
.mt-year-label{font-size:8px;font-weight:400;opacity:.6;letter-spacing:.5px}
.mt-dot{width:5px;height:5px;border-radius:50%;background:var(--border2);flex-shrink:0}
.mt-item.all-paid .mt-dot{background:var(--green);box-shadow:0 0 6px var(--green)}
.mt-item.some-paid .mt-dot{background:var(--amber)}
.mt-item.none-paid .mt-dot{background:var(--red)}
.mt-item.active .mt-dot{background:var(--teal);box-shadow:0 0 8px var(--teal)}
.mt-item.future{opacity:.35;cursor:default;border-style:dashed}
.mt-item.future:hover{opacity:.45;color:var(--muted);border-color:var(--border);background:var(--glass-1);transform:none;box-shadow:none}

/* ── ACTIVE MONTH BAR ───────────────────────────────────── */
.active-month-bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  padding:14px 22px;
  background:var(--glass-teal);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-teal2);
  border-radius:16px;
  margin-bottom:16px;
  box-shadow:var(--glass-shadow),var(--glow-teal)
}
.active-month-bar-left{display:flex;align-items:center;gap:14px}
.active-month-bar-label{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:2px;color:var(--teal);opacity:.6
}
.active-month-bar-name{
  font-size:22px;font-weight:700;letter-spacing:-1px;
  background:linear-gradient(90deg,var(--teal),var(--teal2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent
}
.active-month-bar-right{display:flex;align-items:center;gap:10px}
.active-month-badge{
  font-family:var(--mono);font-size:10px;font-weight:600;
  padding:4px 14px;border-radius:20px;letter-spacing:.5px
}
.active-month-badge.current{
  background:rgba(0,232,122,.12);color:var(--green);
  border:1px solid rgba(0,232,122,.3);
  box-shadow:0 0 12px rgba(0,232,122,.12)
}
.active-month-badge.archived{
  background:rgba(255,176,32,.10);color:var(--amber);
  border:1px solid rgba(255,176,32,.25)
}
.active-month-back{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  padding:8px 16px;border-radius:10px;
  border:1px solid var(--border-teal2);
  background:rgba(0,200,255,.10);color:var(--teal);
  cursor:pointer;transition:all .18s
}
.active-month-back:hover{
  background:rgba(0,200,255,.20);
  box-shadow:var(--glow-teal-sm)
}

/* ── STATS ───────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:20px}
@media (max-width:1280px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.stat{
  background:var(--glass-1);border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;
  position:relative;overflow:hidden;min-width:0;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:var(--glass-shadow);
  transition:border-color .2s,box-shadow .2s,transform .15s
}
.stat::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 60%);pointer-events:none}
.stat:hover{transform:translateY(-2px);border-color:var(--border-teal);box-shadow:var(--glass-shadow-lg),var(--glow-teal-sm)}
.stat-bar{position:absolute;bottom:0;left:0;right:0;height:2px}
.stat.total .stat-bar{background:linear-gradient(90deg,var(--teal),var(--teal2))}
.stat.red .stat-bar{background:linear-gradient(90deg,var(--red),rgba(255,64,96,.3))}
.stat.amber .stat-bar{background:linear-gradient(90deg,var(--amber),rgba(255,176,32,.3))}
.stat.green .stat-bar{background:linear-gradient(90deg,var(--green),rgba(0,232,122,.3))}
.stat.teal .stat-bar{background:linear-gradient(90deg,var(--teal2),var(--teal))}
.stat.purple .stat-bar{background:linear-gradient(90deg,var(--purple),rgba(155,127,255,.3))}
.stat.purple{position:relative}
.stat.purple::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),rgba(155,127,255,.4));border-radius:14px 14px 0 0;opacity:.7}
.stat-label{font-family:var(--mono);font-size:8.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text2);margin-bottom:6px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-num{font-size:26px;font-weight:700;letter-spacing:-1.5px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat.total .stat-num{background:linear-gradient(135deg,var(--teal),var(--teal2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat.red .stat-num{color:var(--red)}
.stat.amber .stat-num{color:var(--amber)}
.stat.green .stat-num{color:var(--green)}
.stat.teal .stat-num{font-size:17px;letter-spacing:-.8px;background:linear-gradient(135deg,var(--teal2),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.stat.purple .stat-num{font-size:18px;letter-spacing:-.8px;background:linear-gradient(135deg,#9b7fff,#c4a8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.stat-sub{font-family:var(--mono);font-size:8.5px;color:var(--purple);opacity:.7;margin-top:3px;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yearly-stat-value.purple{color:var(--purple)}

/* ── BILLING SPLIT ───────────────────────────────────────── */
.billing-split{display:block}
.billing-main{min-width:0}

/* ── Floating Payment Pending button ──────────────────────── */
.pp-float-btn{
  position:fixed;top:calc(var(--header-h) + 12px);right:28px;z-index:900;
  display:flex;align-items:center;gap:8px;
  padding:10px 16px 10px 12px;
  background:var(--glass-teal);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-teal);border-radius:40px;
  color:var(--text);font-size:12px;font-weight:700;font-family:var(--mono);
  cursor:pointer;box-shadow:var(--glass-shadow),var(--glow-teal);
  transition:transform .15s,box-shadow .15s;
}
.pp-float-btn:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow),0 0 18px rgba(0,200,255,.35)}
.pp-float-btn svg{color:var(--red);flex-shrink:0}
.pp-float-label{white-space:nowrap}
.pp-float-badge{
  min-width:20px;height:20px;border-radius:10px;padding:0 6px;
  background:var(--red-dim);color:var(--red);
  border:1px solid rgba(255,64,96,.3);
  font-size:10px;font-weight:700;font-family:var(--mono);
  display:grid;place-items:center;flex-shrink:0;
}
.pp-float-btn.has-pending .pp-float-badge{
  background:rgba(255,64,96,.2);color:var(--red);
  box-shadow:0 0 8px rgba(255,64,96,.4);
}
/* Hide the float button on non-monthly pages */
.pp-float-btn.hidden{display:none}

/* Second button — Prev Months Overdue (amber, sits below first) */
.pp-prev-btn{
  top:calc(var(--header-h) + 64px);
  background:rgba(255,176,32,.10);
  border-color:rgba(255,176,32,.35);
  box-shadow:var(--glass-shadow),0 0 12px rgba(255,176,32,.15);
}
.pp-prev-btn:hover{box-shadow:var(--glass-shadow),0 0 18px rgba(255,176,32,.35)}
.pp-prev-btn svg{color:var(--amber)}
.pp-prev-badge{background:rgba(255,176,32,.18);color:var(--amber);border-color:rgba(255,176,32,.3)}
.pp-prev-btn.has-pending .pp-prev-badge{box-shadow:0 0 8px rgba(255,176,32,.4)}

/* Prev drawer accent overrides */
.pp-prev-header{background:rgba(255,176,32,.07);border-color:rgba(255,176,32,.2)}
.pp-prev-drawer{border-color:rgba(255,176,32,.25);box-shadow:-6px 0 32px rgba(0,0,0,.5),0 0 20px rgba(255,176,32,.1)}
.pp-prev-icon{background:rgba(255,176,32,.15);color:var(--amber)}
.pp-prev-footer{border-color:rgba(255,176,32,.2);background:rgba(255,176,32,.05)}
.pp-prev-total{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-1px;color:var(--amber)}

/* Overdue month sections inside prev drawer */
.pprev-month-section{margin-bottom:14px}
.pprev-month-label{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--amber);opacity:.7;
  padding:4px 8px;margin-bottom:6px;
  border-left:2px solid rgba(255,176,32,.4);
}
.pprev-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:12px;
  border:1px solid var(--border);background:rgba(2,11,24,.35);
  margin-bottom:6px;transition:border-color .12s;
}
.pprev-item:hover{border-color:rgba(255,176,32,.3)}
.pprev-num{
  font-family:var(--mono);font-size:10px;font-weight:700;
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(255,176,32,.15);color:var(--amber);border:1px solid rgba(255,176,32,.2);
}
.pprev-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.pprev-amt{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--amber);flex-shrink:0}


/* ── Backdrop ──────────────────────────────────────────────── */
.pp-backdrop{
  display:none;position:fixed;inset:0;z-index:910;
  background:rgba(2,11,24,.55);backdrop-filter:blur(2px);
}
.pp-backdrop.open{display:block}

/* ── Slide-in drawer ───────────────────────────────────────── */
.pp-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:920;
  width:320px;max-width:92vw;
  display:flex;flex-direction:column;
  background:var(--glass-teal);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-left:1px solid var(--border-teal);
  box-shadow:-6px 0 32px rgba(0,0,0,.5),var(--glow-teal);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.pp-drawer.open{transform:translateX(0)}
.pp-drawer-header{
  padding:16px 18px;border-bottom:1px solid var(--border-teal);
  background:rgba(0,200,255,.07);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.pp-drawer-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text)}
.pp-drawer-icon{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;background:var(--red-dim);color:var(--red)}
.pp-drawer-close{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-size:16px;cursor:pointer;
  display:grid;place-items:center;transition:background .12s,color .12s;
}
.pp-drawer-close:hover{background:var(--red-dim);color:var(--red)}
.pp-drawer-body{flex:1;overflow-y:auto;padding:10px;scrollbar-width:thin;scrollbar-color:var(--border-teal) transparent}
.pp-drawer-footer{
  padding:13px 18px;border-top:1px solid var(--border-teal);
  background:rgba(0,200,255,.06);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}

.pp-drawer-body-scrollable{max-height:calc(100vh - 260px);overflow-y:auto;padding:10px;scrollbar-width:thin;scrollbar-color:var(--border-teal) transparent}
.pending-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(2,11,24,.40);backdrop-filter:blur(8px);margin-bottom:8px;transition:all .15s}
.pending-item:last-child{margin-bottom:0}
.pending-item:hover{border-color:rgba(255,64,96,.30);background:rgba(255,64,96,.05)}
.pending-num{font-family:var(--mono);font-size:10px;font-weight:700;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;background:var(--red-dim);color:var(--red);border:1px solid rgba(255,64,96,.2)}
.pending-info{flex:1;min-width:0}
.pending-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.pending-date{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:2px}
.pending-amt{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--amber);flex-shrink:0}
.pending-empty{font-family:var(--mono);font-size:11px;color:var(--teal);text-align:center;padding:24px;opacity:.5;display:flex;flex-direction:column;align-items:center;gap:8px}
.billing-sidebar-footer{padding:12px 18px;border-top:1px solid var(--border-teal);background:rgba(0,200,255,.06);display:flex;align-items:center;justify-content:space-between}
.billing-sidebar-footer-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text2);opacity:.6}
.billing-sidebar-footer-amt{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-1px;background:linear-gradient(90deg,var(--amber),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ── SECTION LABEL ───────────────────────────────────────── */
.section-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:2px;color:var(--teal);opacity:.6;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border-teal),transparent)}

/* ── TOOLBAR ─────────────────────────────────────────────── */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filter-btn{font-family:var(--mono);font-size:10px;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--glass-1);backdrop-filter:blur(8px);color:var(--muted);cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.5px}
.filter-btn:hover{color:var(--teal);border-color:var(--border-teal);background:var(--glass-teal)}
.filter-btn.active{background:rgba(0,200,255,.15);border-color:var(--teal);color:var(--teal);box-shadow:var(--glow-teal-sm)}
.filter-btn.red.active{background:var(--red-mid);border-color:var(--red);color:var(--red);box-shadow:0 0 12px rgba(255,64,96,.2)}
.filter-btn.amber.active{background:var(--amber-mid);border-color:var(--amber);color:var(--amber)}
.filter-btn.green.active{background:var(--green-mid);border-color:var(--green);color:var(--green)}
.btn-export{font-family:var(--mono);font-size:10px;padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:var(--glass-1);backdrop-filter:blur(8px);color:var(--text2);cursor:pointer;transition:all .15s;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.btn-export.excel{border-color:rgba(0,232,122,.2);color:var(--green)}
.btn-export.excel:hover{background:var(--green-dim);border-color:var(--green);box-shadow:var(--glow-green)}

/* ── QUICK ADD ───────────────────────────────────────────── */
.yearly-add-row{background:var(--glass-1);border:1px dashed var(--border-teal);backdrop-filter:blur(12px);border-radius:14px;padding:14px 18px;margin-bottom:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.yearly-add-row input{font-family:var(--mono);font-size:12px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:rgba(2,11,24,.5);color:var(--text);outline:none;transition:border-color .15s;color-scheme:dark}
.yearly-add-row input::placeholder{color:var(--muted)}
.yearly-add-row input:focus{border-color:var(--teal);box-shadow:var(--glow-teal-sm)}
.yearly-add-row input[type=text]{flex:2;min-width:150px}
.yearly-add-row input[type=date]{width:140px}
.yearly-add-row input[type=email]{flex:1;min-width:150px}
.yearly-add-row input[type=number]{width:100px}
.yearly-add-row input[type=url]{flex:1;min-width:130px}
.btn-add-yearly{font-family:var(--mono);font-size:10px;padding:8px 16px;border-radius:8px;border:1px solid rgba(0,200,255,.4);background:rgba(0,200,255,.12);color:var(--teal);cursor:pointer;text-transform:uppercase;white-space:nowrap;transition:all .15s}
.btn-add-yearly:hover{background:rgba(0,200,255,.22);border-color:var(--teal);box-shadow:var(--glow-teal-sm)}
.add-row-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--teal);opacity:.6;white-space:nowrap}

/* ── MONTH CHANGE BANNER ─────────────────────────────────── */
.month-change-banner{background:rgba(155,127,255,.06);border:1px solid rgba(155,127,255,.2);backdrop-filter:blur(8px);border-radius:12px;padding:12px 16px;margin-bottom:16px;display:none;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;color:var(--purple)}
.month-change-banner.show{display:flex}
.btn-dismiss-banner{margin-left:auto;font-family:var(--mono);font-size:10px;padding:4px 10px;border-radius:5px;border:1px solid rgba(155,127,255,.3);background:transparent;color:var(--purple);cursor:pointer}

/* ── PAY GROUPS ──────────────────────────────────────────── */
.pay-group{margin-bottom:14px;border-radius:16px;overflow:hidden;border:1px solid;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pay-group-done{border-color:rgba(0,232,122,.2);background:rgba(0,232,122,.02);box-shadow:0 2px 20px rgba(0,232,122,.07),inset 0 1px 0 rgba(255,255,255,.04)}
.pay-group-pending{border-color:rgba(255,64,96,.2);background:rgba(255,64,96,.02);box-shadow:0 2px 20px rgba(255,64,96,.07),inset 0 1px 0 rgba(255,255,255,.04)}
.pay-group-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px;flex-wrap:wrap}
.pay-group-done .pay-group-header{background:rgba(0,232,122,.05);border-bottom:1px solid rgba(0,232,122,.15)}
.pay-group-pending .pay-group-header{background:rgba(255,64,96,.05);border-bottom:1px solid rgba(255,64,96,.12)}
.pay-group-title{display:flex;align-items:center;gap:10px}
.pay-group-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.pay-group-done .pay-group-icon{background:var(--green-dim);color:var(--green)}
.pay-group-pending .pay-group-icon{background:var(--red-dim);color:var(--red)}
.pay-group-name{font-size:18px;font-weight:700;letter-spacing:-.3px}
.pay-group-done .pay-group-name{color:var(--green);text-shadow:0 0 14px rgba(0,232,122,.55), 0 0 28px rgba(0,232,122,.25)}
.pay-group-pending .pay-group-name{color:var(--red);text-shadow:0 0 14px rgba(255,64,96,.55), 0 0 28px rgba(255,64,96,.25)}
.pay-group-count{font-family:var(--mono);font-size:11px;color:var(--text2);background:var(--glass-1);border:1px solid var(--border);border-radius:20px;padding:2px 10px;margin-left:4px}
.pay-group-hint{font-family:var(--mono);font-size:10px;color:var(--muted)}
.pay-group-total{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:-1px}
.pay-group-done .pay-group-total{color:var(--green)}
.pay-group-pending .pay-group-total{color:var(--red)}
.pay-group .table-wrap{margin-bottom:0;border-radius:0;border:none;box-shadow:none}
.pay-group-done tbody tr:hover{background:rgba(0,232,122,.04)!important}
.pay-group-done tbody tr td:first-child{border-left:2px solid rgba(0,232,122,.35);padding-left:9px}
.pay-group-pending tbody tr:hover{background:rgba(255,64,96,.04)!important}
.pay-group-pending tbody tr td:first-child{border-left:2px solid rgba(255,64,96,.35);padding-left:9px}

/* ── TABLE ───────────────────────────────────────────────── */
.table-wrap{background:var(--glass-1);border:1px solid var(--border-teal);border-radius:16px;overflow:hidden;margin-bottom:20px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--glass-shadow);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:1800px}
thead th{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--teal);padding:9px 10px;text-align:left;background:rgba(0,200,255,.06);border-bottom:1px solid var(--border-teal);cursor:pointer;white-space:normal;word-wrap:break-word;line-height:1.3;user-select:none;opacity:.8;min-width:52px}
thead th.no-sort{cursor:default}
thead th.sorted{opacity:1}
.th-payment{color:var(--teal2)!important}
.th-card{color:var(--amber)!important}
.th-receipt{color:var(--purple)!important}
.th-invoice{color:var(--blue)!important}
.th-sds{color:var(--purple)!important}
.th-contract{color:var(--teal2)!important}
.th-budgeted{color:#a78bfa!important}
.th-savings{color:var(--green)!important}
.th-alert-mail{color:var(--amber)!important}
.th-edit-btn{color:var(--blue)!important}
.th-delete-btn{color:var(--red)!important}
.th-action-col{color:var(--green)!important}
tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(0,200,255,.04)}
tr.row-critical{background:var(--red-dim)}
tr.row-critical:hover{background:var(--red-mid)}
tr.row-critical td:first-child{border-left:2px solid var(--red);padding-left:11px}
tr.row-warning{background:var(--amber-dim)}
tr.row-warning td:first-child{border-left:2px solid var(--amber);padding-left:11px}
tr.row-safe td:first-child{border-left:2px solid transparent}

/* ── MULTI-ENTRY: sub-row styling ────────────────────────────────────────
   A license with N entries renders as one primary row + (N-1) sub-rows.
   Sub-rows are visually distinct: stronger purple-tinted background,
   solid purple left border, indented sub-name cell with a ↳ marker.
   They share the parent's column structure so values align with headers. */
tr.row-sub-entry{
    background:linear-gradient(90deg, rgba(155,127,255,.18) 0%, rgba(155,127,255,.10) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(155,127,255,.18);
}
tr.row-sub-entry:hover{
    background:linear-gradient(90deg, rgba(155,127,255,.26) 0%, rgba(155,127,255,.16) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(155,127,255,.32);
}
tr.row-sub-entry td{
    font-size:11px;
    padding:7px 10px;
    border-bottom:1px solid rgba(155,127,255,.20);
    color:var(--text);
}
tr.row-sub-entry td:first-child{
    border-left:3px solid var(--purple);
    padding-left:14px;
    color:var(--purple);
    font-weight:600;
}
/* Visual link between parent row and its sub-rows */
tr.has-sub-entries td{ border-bottom: 1px dashed rgba(155,127,255,.35) !important; }
tr.has-sub-entries td:first-child{ border-left:2px solid var(--purple) }
.sub-name-cell{
    display:flex !important;
    align-items:center;
    gap:8px;
    padding-left:30px !important;
}
.sub-entry-marker{
    font-size:18px;
    color:var(--purple);
    font-weight:bold;
    line-height:1;
    text-shadow:0 0 6px rgba(155,127,255,.5);
}
.sub-entry-label{
    font-family:var(--mono);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--purple);
    background:rgba(155,127,255,.15);
    padding:2px 6px;
    border-radius:3px;
    border:1px solid rgba(155,127,255,.3);
}
.sub-entry-input{
    border-color:rgba(155,127,255,.3) !important;
    background:rgba(155,127,255,.04) !important;
}
.sub-entry-input:focus{
    border-color:var(--purple) !important;
    box-shadow:0 0 0 2px rgba(155,127,255,.2) !important;
}

/* + Add Entry pill — appears next to the license name on each row */
.btn-add-entry{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;margin-left:6px;
    background:rgba(155,127,255,.12);
    border:1px solid rgba(155,127,255,.3);
    border-radius:50%;color:var(--purple);
    cursor:pointer;transition:all .15s;
    vertical-align:middle;padding:0
}
.btn-add-entry:hover{background:rgba(155,127,255,.25);border-color:var(--purple);transform:scale(1.1);box-shadow:0 0 8px rgba(155,127,255,.4)}
.entry-count-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;padding:0 5px;margin-left:6px;
    background:var(--purple);color:#fff;
    border-radius:9px;
    font-family:var(--mono);font-size:10px;font-weight:700;
    line-height:1;vertical-align:middle
}
.lic-name-row{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:0}
td{padding:6px 10px;font-size:12px;vertical-align:middle;white-space:nowrap;color:var(--text)}
.name-cell{font-weight:600;font-size:12px;letter-spacing:-.2px;white-space:nowrap;color:var(--text)}
.date-cell{font-family:var(--mono);font-size:11px;color:var(--text2);white-space:nowrap}
.days-cell{font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap}
.days-cell.critical,.days-cell.expired{color:var(--red)}
.days-cell.warning{color:var(--amber)}
.days-cell.ok{color:var(--green)}
.renewal-badge{font-family:var(--mono);font-size:9px;color:var(--text2);background:var(--glass-1);border:1px solid var(--border);border-radius:4px;padding:2px 6px}
.email-cell{font-family:var(--mono);font-size:10px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px;font-weight:500;padding:3px 7px;border-radius:20px;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.badge-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.badge.critical{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,64,96,.25);animation:pulse-red 2s ease infinite}
.badge.warning{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(255,176,32,.25)}
.badge.ok,.badge.paid{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,232,122,.25)}
.badge.critical .badge-dot{background:var(--red);box-shadow:0 0 4px var(--red)}
.badge.warning .badge-dot{background:var(--amber)}
.badge.ok .badge-dot,.badge.paid .badge-dot{background:var(--green)}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 3px rgba(255,64,96,.15)}}

/* ── INLINE INPUTS ───────────────────────────────────────── */
.notes-input-text{width:120px;background:transparent;border:1px solid transparent;border-radius:5px;color:var(--text2);font-family:var(--mono);font-size:11px;padding:4px 6px;outline:none;transition:all .15s}
.notes-input-text:hover{background:var(--glass-2);border-color:var(--border)}
.notes-input-text:focus{background:var(--glass-2);border-color:var(--teal)}
.notes-input-text::placeholder{color:var(--muted)}
.btn-note-expand{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:10px;flex-shrink:0;transition:all .15s}
.btn-note-expand:hover{background:var(--glass-2);border-color:var(--border-teal);color:var(--teal)}
.payment-wrap{display:flex;align-items:center;gap:3px}
.payment-input{width:80px;background:transparent;border:1px solid transparent;border-radius:5px;color:var(--teal);font-family:var(--mono);font-size:11px;font-weight:500;padding:4px 6px;outline:none;transition:all .15s;color-scheme:dark}
.payment-input:hover,.payment-input:focus{background:var(--glass-teal);border-color:var(--border-teal)}
.currency-sym{font-family:var(--mono);font-size:10px;color:var(--muted)}
.card-input{width:110px;background:transparent;border:1px solid transparent;border-radius:5px;color:var(--text2);font-family:var(--mono);font-size:11px;padding:4px 6px;outline:none;transition:all .15s;color-scheme:dark}
.card-input:hover{background:var(--amber-dim);border-color:rgba(255,176,32,.2)}
.card-input:focus{background:var(--amber-dim);border-color:var(--amber)}
.card-input::placeholder{color:var(--muted)}
.sds-input{width:100px;background:transparent;border:1px solid transparent;border-radius:5px;color:var(--text2);font-family:var(--mono);font-size:11px;padding:4px 6px;outline:none;transition:all .15s;color-scheme:dark}
.sds-input:hover{background:var(--purple-dim);border-color:rgba(155,127,255,.2)}
.sds-input:focus{background:var(--purple-dim);border-color:var(--purple)}
.sds-input::placeholder{color:var(--muted)}
.contract-date-input{background:transparent;border:1px solid transparent;border-radius:5px;color:var(--text2);font-family:var(--mono);font-size:11px;padding:4px 6px;outline:none;transition:all .15s;color-scheme:dark}
.contract-date-input:hover{background:var(--glass-teal);border-color:var(--border-teal)}
.contract-date-input:focus{background:var(--glass-teal);border-color:var(--teal)}

/* ── FILE BADGES & CHIPS ─────────────────────────────────── */
.upload-cell{white-space:nowrap}
.file-count-badge{display:inline-block;font-family:var(--mono);font-size:9px;padding:2px 7px;border-radius:4px;margin-bottom:2px;white-space:nowrap}
.file-count-badge.receipt{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(155,127,255,.2)}
.file-count-badge.invoice{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(61,159,255,.2)}
.upload-btn-sm{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9px;padding:3px 7px;border-radius:5px;border:1px dashed;cursor:pointer;transition:all .15s;white-space:nowrap}
.upload-btn-sm.receipt{color:var(--purple);border-color:rgba(155,127,255,.25);background:var(--purple-dim)}
.upload-btn-sm.receipt:hover{border-style:solid;border-color:var(--purple)}
.upload-btn-sm.invoice{color:var(--blue);border-color:rgba(61,159,255,.25);background:var(--blue-dim)}
.upload-btn-sm.invoice:hover{border-style:solid;border-color:var(--blue)}
input[type="file"].hidden-input{display:none}
.file-chip-row{display:inline-flex;align-items:stretch;border-radius:5px;overflow:hidden;margin-bottom:2px}
.file-chip-row.receipt{border:1px solid rgba(155,127,255,.2)}
.file-chip-row.invoice{border:1px solid rgba(61,159,255,.2)}
.file-chip-view{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9px;padding:3px 7px;cursor:pointer;border:none;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip-row.receipt .file-chip-view{background:var(--purple-dim);color:var(--purple);border-right:1px solid rgba(155,127,255,.15)}
.file-chip-row.invoice .file-chip-view{background:var(--blue-dim);color:var(--blue);border-right:1px solid rgba(61,159,255,.15)}
.file-chip-del{display:inline-flex;align-items:center;justify-content:center;padding:0 5px;background:var(--red-dim);color:var(--red);cursor:pointer;border:none;opacity:.6;transition:opacity .15s;font-size:12px}
.file-chip-del:hover{opacity:1}

/* ── EYE-ICON FILE CHIP (single button per file) ──────────────────────────
   Used in monthly billing rows + sub-entry rows. Click → opens the file in
   a new tab. Independent class from .file-chip-row (which is a multi-button
   container with view + delete). Styled to match the existing chip family —
   dark glass background, teal border, mono font, hover lift.               */
.file-chip-wrap{display:inline-flex;flex-wrap:wrap;gap:3px;align-items:center}
.file-chip{
    display:inline-flex;align-items:center;gap:3px;
    font-family:var(--mono);font-size:9px;font-weight:600;
    padding:3px 7px;
    background:var(--glass-1);
    color:var(--teal);
    border:1px solid var(--border-teal);
    border-radius:5px;
    cursor:pointer;
    text-decoration:none;
    line-height:1.4;
    transition:all .15s;
    white-space:nowrap
}
.file-chip:hover{
    background:var(--glass-teal);
    border-color:var(--teal);
    color:var(--teal);
    box-shadow:0 0 8px rgba(0,200,255,.2);
    transform:translateY(-1px)
}
.file-chip:active{transform:translateY(0)}
/* Receipt cells get purple-tinted chips, invoice cells get blue-tinted */
.upload-cell .file-chip{
    background:var(--glass-1);
}

/* ── DOWNLOAD BUTTONS ────────────────────────────────────── */
.btn-bulk-download{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;padding:6px 12px;border-radius:7px;border:1px solid rgba(0,232,122,.2);background:var(--green-dim);color:var(--green);cursor:pointer;transition:all .15s;text-transform:uppercase;white-space:nowrap}
.btn-bulk-download:hover{background:var(--green-mid);border-color:var(--green);box-shadow:var(--glow-green)}
.btn-bulk-download:disabled{opacity:.4;cursor:not-allowed}
.btn-bulk-download-hero{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:700;padding:10px 20px;border-radius:10px;border:1px solid rgba(0,232,122,.3);background:var(--green-dim);color:var(--green);cursor:pointer;transition:all .15s;text-transform:uppercase;white-space:nowrap;box-shadow:0 2px 14px rgba(0,232,122,.12)}
.btn-bulk-download-hero:hover{background:var(--green-mid);box-shadow:var(--glow-green);transform:translateY(-1px)}
.btn-bulk-download-hero:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-month-download{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;font-weight:600;padding:6px 14px;border-radius:7px;border:1px solid rgba(0,232,122,.2);background:var(--green-dim);color:var(--green);cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-month-download:hover{background:var(--green-mid);border-color:var(--green)}
.btn-dl-single{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9px;padding:2px 7px;border-radius:4px;border:none;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-dl-single.receipt{background:var(--purple-dim);color:var(--purple)}
.btn-dl-single.invoice{background:var(--blue-dim);color:var(--blue)}
.btn-dl-single:hover{opacity:.75}

/* ── ACTION BUTTONS ──────────────────────────────────────── */
.action-cell{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}
.btn-move-done{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9px;padding:4px 7px;border-radius:5px;border:1px solid rgba(0,232,122,.2);background:var(--green-dim);color:var(--green);cursor:pointer;text-transform:uppercase;white-space:nowrap;transition:all .15s}
.btn-move-done:hover{background:var(--green-mid);border-color:var(--green)}
.btn-move-pending{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9px;padding:4px 7px;border-radius:5px;border:1px solid rgba(255,64,96,.2);background:var(--red-dim);color:var(--red);cursor:pointer;text-transform:uppercase;white-space:nowrap;transition:all .15s}
.btn-move-pending:hover{background:var(--red-mid);border-color:var(--red)}
.btn-alert{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9px;padding:4px 7px;border-radius:5px;border:1px solid rgba(255,176,32,.2);background:var(--amber-dim);color:var(--amber);cursor:pointer;text-transform:uppercase;white-space:nowrap;transition:all .15s}
.btn-alert:hover{background:var(--amber-mid);border-color:var(--amber)}
.btn-send-email{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9px;padding:4px 7px;border-radius:5px;border:1px solid rgba(61,159,255,.2);background:var(--blue-dim);color:var(--blue);cursor:pointer;text-transform:uppercase;white-space:nowrap;transition:all .15s}
.btn-send-email:hover{background:rgba(61,159,255,.15);border-color:var(--blue)}
.btn-send-email.sent{border-color:rgba(0,232,122,.3);background:var(--green-dim);color:var(--green)}
.btn-edit{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s}
.btn-edit:hover{background:var(--blue-dim);border-color:rgba(61,159,255,.4);color:var(--blue)}
.btn-delete{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s}
.btn-delete:hover{background:var(--red-dim);border-color:rgba(255,64,96,.4);color:var(--red)}

/* ── NEW SPLIT-ACTION BUTTONS ─────────────────────────────── */
.btn-edit-lg{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px;font-weight:600;padding:5px 9px;border-radius:6px;border:1px solid rgba(61,159,255,.25);background:var(--blue-dim);color:var(--blue);cursor:pointer;text-transform:uppercase;white-space:nowrap;transition:all .15s;letter-spacing:.4px}
.btn-edit-lg:hover{background:rgba(61,159,255,.18);border-color:var(--blue);box-shadow:0 0 8px rgba(61,159,255,.2)}
.btn-delete-lg{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px;font-weight:600;padding:5px 9px;border-radius:6px;border:1px solid rgba(255,64,96,.25);background:var(--red-dim);color:var(--red);cursor:pointer;text-transform:uppercase;white-space:nowrap;transition:all .15s;letter-spacing:.4px}
.btn-delete-lg:hover{background:rgba(255,64,96,.18);border-color:var(--red);box-shadow:0 0 8px rgba(255,64,96,.2)}

/* ── SPLIT ACTION TD CELLS ────────────────────────────────── */
.td-action{text-align:center;white-space:nowrap;min-width:80px}
.td-alerts{text-align:center;white-space:nowrap;min-width:90px}
.td-alerts .btn-alert,.td-alerts .btn-send-email{display:block;width:100%;margin-bottom:3px;text-align:center;justify-content:center}
.td-alerts .btn-send-email:last-child,.td-alerts .btn-alert:last-child{margin-bottom:0}
.td-edit{text-align:center;white-space:nowrap;min-width:68px}
.td-delete{text-align:center;white-space:nowrap;min-width:72px}

/* ── PAYMENT PENDING CELL ─────────────────────────────────── */
.pend-cell{font-family:var(--mono);font-size:11px;font-weight:600;white-space:nowrap;text-align:center;padding:6px 8px}
.pend-done{color:var(--green)!important;background:rgba(0,232,122,.06)}
.pend-ok{color:var(--teal)}
.pend-warn{color:var(--amber)!important;animation:pendPulse 2s ease-in-out infinite}
.pend-overdue{color:var(--red)!important;font-weight:700}
@keyframes pendPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ── SAVINGS CELL ─────────────────────────────────────────── */
.savings-cell{font-family:var(--mono);font-size:12px;font-weight:700;text-align:right;white-space:nowrap;padding:6px 10px;letter-spacing:-.2px}
.savings-pos{color:var(--green)!important;background:rgba(0,232,122,.05)}
.savings-neg{color:var(--red)!important;background:rgba(255,64,96,.05)}

/* ── BUDGETED INPUT ───────────────────────────────────────── */
.budgeted-input{border-color:rgba(167,139,250,.3)!important;color:#a78bfa!important}
.budgeted-input:focus{border-color:#a78bfa!important;box-shadow:0 0 0 2px rgba(167,139,250,.15)!important}

/* ── YEARLY/QUARTERLY CARD FILE SECTIONS ─────────────────────── */
.ycard-files{border-top:1px solid var(--border-teal);margin-top:10px;padding-top:8px;display:flex;flex-direction:column;gap:6px}
.ycard-file-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.ycard-file-label{font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;min-width:64px;opacity:.8}
.ycard-file-label.invoice{color:var(--blue)}
.ycard-file-label.receipt{color:var(--purple)}
.ycard-chips{display:flex;flex-wrap:wrap;gap:3px;flex:1}
.pagination{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--border-teal);background:rgba(0,200,255,.03);font-family:var(--mono);font-size:11px;color:var(--muted)}
.pagination button{font-family:var(--mono);font-size:11px;padding:4px 12px;border-radius:6px;border:1px solid var(--border);background:var(--glass-1);color:var(--text2);cursor:pointer;transition:all .15s}
.pagination button:hover:not(:disabled){border-color:var(--teal);color:var(--teal);box-shadow:var(--glow-teal-sm)}
.pagination button:disabled{opacity:.35;cursor:not-allowed}
.pagination .page-info{flex:1;text-align:center}
.pagination .page-num-btn{min-width:28px;text-align:center;padding:4px 6px}
.pagination .page-num-btn.active{background:var(--glass-teal2);color:var(--teal);border-color:var(--teal);box-shadow:var(--glow-teal-sm)}

/* ── BILLING HISTORY PANEL ───────────────────────────────── */
.history-panel{background:var(--glass-1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-teal);border-radius:18px;margin-bottom:24px;box-shadow:var(--glass-shadow);overflow:hidden}
.history-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-teal);background:rgba(0,200,255,.05);gap:12px;flex-wrap:wrap}
.history-title{font-size:22px;font-weight:700;letter-spacing:-.4px;color:var(--text);text-shadow:0 0 12px rgba(234,244,255,.25)}
.history-title span{font-style:italic;font-weight:400;color:var(--teal);text-shadow:0 0 14px rgba(0,200,255,.55), 0 0 28px rgba(0,200,255,.20)}
.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;padding:16px}
.history-card{background:rgba(2,11,24,.5);border:1px solid var(--border);border-radius:12px;padding:14px;backdrop-filter:blur(8px)}
.history-card.card-sub-entry{
    background:linear-gradient(135deg, rgba(155,127,255,.12), rgba(155,127,255,.05));
    border:1px solid rgba(155,127,255,.3);
    box-shadow: inset 3px 0 0 var(--purple);
    margin-left:18px;
}
.history-card.card-sub-entry .total-badge{background:rgba(155,127,255,.2);color:var(--purple);border-color:rgba(155,127,255,.4)}
.sub-entry-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;padding-bottom:6px;border-bottom:1px dashed rgba(155,127,255,.2)}
.sub-entry-pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--purple);background:rgba(155,127,255,.15);padding:2px 7px;border-radius:3px;border:1px solid rgba(155,127,255,.3);font-weight:700}
.history-card-name{font-weight:600;font-size:13px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;color:var(--text)}
.total-badge{font-family:var(--mono);font-size:10px;background:var(--glass-teal);color:var(--teal);border:1px solid var(--border-teal);border-radius:4px;padding:2px 8px}
.grand-total-bar{background:linear-gradient(90deg,rgba(0,200,255,.07),transparent);border-top:1px solid var(--border-teal);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.grand-total-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text2);opacity:.6}
.grand-total-amount{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-1px;background:linear-gradient(90deg,var(--teal),var(--teal2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ── YEARLY STATS ────────────────────────────────────────── */
.yearly-stats-bar{background:var(--glass-1);backdrop-filter:blur(20px);border:1px solid var(--border-teal);border-radius:16px;padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;box-shadow:var(--glass-shadow)}
.yearly-stat-item{display:flex;flex-direction:column;gap:3px}
.yearly-stat-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text2);opacity:.6}
.yearly-stat-value{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--text);letter-spacing:-1px}
.yearly-stat-value.accent{color:var(--accent)}
.yearly-stat-value.teal{color:var(--teal)}
.yearly-stat-divider{width:1px;height:36px;background:var(--border-teal);opacity:.5}
.yearly-pay-section{margin-bottom:24px}
.yearly-pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:14px}
.yearly-pay-card{background:var(--glass-1);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:var(--glass-shadow);transition:border-color .2s,box-shadow .2s}
.yearly-pay-card:hover{border-color:var(--border-teal);box-shadow:var(--glass-shadow),var(--glow-teal-sm)}
.yearly-pay-name{font-weight:700;font-size:13px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.yearly-pay-hist{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.yearly-pay-hist-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--text2);padding:2px 0;border-bottom:1px solid var(--border)}
.yearly-pay-hist-year{color:var(--muted)}
.yearly-pay-hist-amt{color:var(--teal);font-weight:600}
.yearly-pay-current{display:flex;align-items:center;gap:8px;padding-top:7px;border-top:1px dashed var(--border-teal)}
.yearly-pay-curr-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--muted);flex:1}
.yearly-pay-input{width:90px;background:var(--glass-teal);border:1px solid var(--border-teal);border-radius:5px;color:var(--teal);font-family:var(--mono);font-size:12px;font-weight:600;padding:5px 8px;outline:none;color-scheme:dark}
.yearly-pay-input:focus{border-color:var(--teal);box-shadow:var(--glow-teal-sm)}
.yearly-grand-total{background:var(--glass-teal);backdrop-filter:blur(16px);border:1px solid var(--border-teal2);border-radius:14px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--glass-shadow),var(--glow-teal)}
.yearly-grand-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text2);opacity:.7}
.yearly-grand-amount{font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-1.5px;background:linear-gradient(90deg,var(--teal),var(--teal2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ── PREDICTION PANEL ────────────────────────────────────── */
.prediction-panel{background:var(--glass-1);backdrop-filter:blur(20px);border:1px solid rgba(155,127,255,.25);border-radius:16px;padding:18px 22px;margin-bottom:24px;box-shadow:var(--glass-shadow),var(--glow-cyan)}
.prediction-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.prediction-title{font-size:14px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:8px;color:var(--text)}
.prediction-title .pred-icon{width:26px;height:26px;border-radius:7px;background:var(--purple-dim);border:1px solid rgba(155,127,255,.2);display:grid;place-items:center;color:var(--purple);flex-shrink:0}
.prediction-summary{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.pred-stat{display:flex;flex-direction:column;gap:2px}
.pred-stat-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text2);opacity:.6}
.pred-stat-val{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:-1px;color:var(--text)}
.pred-stat-val.predicted{color:var(--purple)}
.pred-stat-val.trend-up{color:var(--red)}
.pred-stat-val.trend-down{color:var(--green)}
.pred-stat-val.trend-same{color:var(--muted)}
.pred-divider{width:1px;height:36px;background:var(--border)}
.prediction-weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pred-week-card{background:rgba(2,11,24,.5);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.pred-week-label{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--purple);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.pred-week-dates{font-family:var(--mono);font-size:9px;color:var(--muted);margin-bottom:8px}
.pred-week-amt{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--purple);letter-spacing:-1px;margin-bottom:6px}
.pred-week-licenses{display:flex;flex-direction:column;gap:2px}
.pred-week-lic{font-family:var(--mono);font-size:10px;color:var(--text2)}
.pred-week-empty{font-family:var(--mono);font-size:10px;color:var(--muted)}

/* ── HISTORY PAGES ───────────────────────────────────────── */
.yearly-hist-page{padding:22px 0}
.yearly-hist-summary{background:var(--glass-teal);backdrop-filter:blur(16px);border:1px solid var(--border-teal);border-radius:14px;padding:16px 22px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.yearly-hist-summary-stat{display:flex;flex-direction:column;gap:3px}
.yearly-hist-summary-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text2);opacity:.6}
.yearly-hist-summary-val{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-1px;background:linear-gradient(90deg,var(--teal),var(--teal2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.yearly-hist-year-section{margin-bottom:28px}
.yearly-hist-year-heading{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--teal);opacity:.6;margin-bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.yearly-hist-year-heading::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border-teal),transparent);min-width:20px}
.yearly-hist-year-heading strong{color:var(--accent);font-size:13px;opacity:1}
.yearly-hist-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.yearly-hist-entry{background:var(--glass-1);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:10px;padding:12px 14px;box-shadow:var(--glass-shadow)}
.yearly-hist-entry-name{font-size:12px;font-weight:700;margin-bottom:5px;color:var(--text)}
.yearly-hist-entry-amt{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--teal)}
.yearly-hist-entry-year{font-family:var(--mono);font-size:10px;color:var(--muted)}


/* ── MS CARD FILE MANAGEMENT ─────────────────────────────────
   Upload / View / Download / Delete per card per month
   ─────────────────────────────────────────────────────────── */
.ms-card-files{
  margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--border-teal);
  display:flex;flex-direction:column;gap:8px
}
.ms-file-col{display:flex;flex-direction:column;gap:4px}

.ms-file-col-head{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--muted);margin-bottom:3px
}
.ms-file-col-head.receipt{color:var(--purple)}
.ms-file-col-head.invoice{color:var(--blue)}

/* Upload button inside card */
.ms-upload-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:5px;
  font-size:11px;font-weight:700;cursor:pointer;
  transition:all .15s;flex-shrink:0;line-height:1
}
.ms-upload-btn.receipt{
  background:var(--purple-dim);color:var(--purple);
  border:1px dashed rgba(155,127,255,.3)
}
.ms-upload-btn.receipt:hover{
  background:rgba(155,127,255,.22);border-color:var(--purple);border-style:solid
}
.ms-upload-btn.invoice{
  background:var(--blue-dim);color:var(--blue);
  border:1px dashed rgba(61,159,255,.3)
}
.ms-upload-btn.invoice:hover{
  background:rgba(61,159,255,.22);border-color:var(--blue);border-style:solid
}

/* File chip row: [name chip] [↓ dl] [× del] */
.ms-file-chip-row{
  display:flex;align-items:center;gap:3px;
  border-radius:6px;overflow:hidden
}
.ms-file-chip{
  flex:1;min-width:0;
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:9px;
  padding:3px 7px;cursor:pointer;border:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .15s
}
.ms-file-chip:hover{opacity:.8}
.ms-file-chip-receipt{background:var(--purple-dim);color:var(--purple)}
.ms-file-chip-invoice{background:var(--blue-dim);color:var(--blue)}

.ms-file-dl{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;
  background:var(--glass-2);color:var(--text2);
  border:none;cursor:pointer;font-size:11px;font-weight:700;
  transition:all .15s
}
.ms-file-dl:hover{background:var(--glass-teal);color:var(--teal)}

.ms-file-del{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;
  background:var(--red-dim);color:var(--red);
  border:none;cursor:pointer;font-size:13px;line-height:1;
  transition:all .15s;border-radius:0 6px 6px 0
}
.ms-file-del:hover{background:var(--red-mid)}

/* ── MONTHLY HISTORY PAGE ────────────────────────────────── */
.hist-hero{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
  padding:20px 24px;
  background:var(--glass-teal);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-teal2);
  border-radius:18px;margin:20px 0 16px;
  box-shadow:var(--glass-shadow),var(--glow-teal)
}
.hist-hero-left{display:flex;flex-direction:column;gap:4px}
.hist-hero-eyebrow{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:2px;color:var(--teal);opacity:.7}
.hist-hero-month{
  font-size:28px;font-weight:700;letter-spacing:-1.5px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1
}
.hist-hero-sub{font-family:var(--mono);font-size:11px;color:var(--text2);margin-top:4px}
.hist-hero-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hist-nav-btn{
  font-family:var(--mono);font-size:11px;font-weight:600;
  padding:8px 16px;border-radius:10px;
  border:1px solid var(--border-teal);
  background:var(--glass-1);
  backdrop-filter:blur(8px);
  color:var(--teal);cursor:pointer;
  transition:all .18s;white-space:nowrap
}
.hist-nav-btn:hover{background:var(--glass-teal2);border-color:var(--teal);box-shadow:var(--glow-teal-sm)}
.hist-nav-btn:disabled{opacity:.3;cursor:default}
.hist-nav-btn.all{color:var(--text2);border-color:var(--border)}
.hist-nav-btn.all:hover{color:var(--teal);border-color:var(--border-teal)}

/* Upload panel */
.upload-panel{
  background:var(--glass-1);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-teal);
  border-radius:18px;overflow:hidden;
  margin-bottom:18px;
  box-shadow:var(--glass-shadow)
}
.upload-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid var(--border-teal);
  background:rgba(0,200,255,.06);
  gap:12px;flex-wrap:wrap
}
.upload-panel-title{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;color:var(--text)
}
.upload-panel-icon{
  width:30px;height:30px;border-radius:9px;
  background:rgba(0,200,255,.12);border:1px solid var(--border-teal);
  display:grid;place-items:center;color:var(--teal);flex-shrink:0
}
.upload-panel-hint{font-family:var(--mono);font-size:11px;color:var(--muted)}
.upload-panel-body{
  padding:16px 20px;
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap
}
.upload-field{display:flex;flex-direction:column;gap:5px}
.upload-field label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--teal);opacity:.7}
.upload-field input,.upload-field select{
  background:rgba(2,11,24,.5);
  border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-family:var(--mono);font-size:12px;
  padding:8px 12px;outline:none;color-scheme:dark;
  transition:border-color .15s
}
.upload-field input:focus,.upload-field select:focus{border-color:var(--teal);box-shadow:var(--glow-teal-sm)}
.upload-choose-btn{
  font-family:var(--mono);font-size:11px;font-weight:600;
  padding:9px 18px;border-radius:10px;
  border:1px solid rgba(0,200,255,.4);
  background:rgba(0,200,255,.12);color:var(--teal);
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:all .18s;white-space:nowrap
}
.upload-choose-btn:hover{background:rgba(0,200,255,.22);border-color:var(--teal);box-shadow:var(--glow-teal-sm)}
.upload-status{
  font-family:var(--mono);font-size:11px;
  padding:0 20px 14px;min-height:14px;color:var(--teal)
}

/* Archive info banner */
.hist-archive-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;gap:12px;flex-wrap:wrap
}
.hist-archive-header .section-label{margin-bottom:0;flex:1}

.archive-info{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 18px;
  background:rgba(0,232,122,.04);
  border:1px solid rgba(0,232,122,.15);
  border-radius:12px;
  margin-bottom:16px
}
.archive-info-icon{font-size:20px;flex-shrink:0;margin-top:2px}
.archive-info-title{font-weight:700;font-size:13px;color:var(--green);margin-bottom:4px}
.archive-info-body{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.6}

/* ── HISTORY MONTH SECTIONS ──────────────────────────────── */
.hist-month-section{margin-bottom:28px}

.hist-month-heading{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  padding:12px 18px;
  background:rgba(0,200,255,.06);
  backdrop-filter:blur(12px);
  border:1px solid var(--border-teal);
  border-radius:14px 14px 0 0;
  border-bottom:none
}
.hist-month-heading-left{display:flex;align-items:center;gap:12px}
.hist-month-heading-name{
  font-size:16px;font-weight:700;letter-spacing:-.5px;
  background:linear-gradient(90deg,var(--teal),var(--teal2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent
}
.hist-month-heading-count{
  font-family:var(--mono);font-size:11px;color:var(--text2);
  background:var(--glass-1);border:1px solid var(--border);
  border-radius:20px;padding:2px 10px
}
.hist-month-heading-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hist-month-total{
  font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:-1px;
  background:linear-gradient(90deg,var(--teal),var(--teal2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent
}

/* Table attached to heading — remove top border-radius */
.hist-month-section .table-wrap{
  border-radius:0 0 14px 14px;
  border-top:1px solid var(--border-teal)
}
.hist-month-section .pay-group:last-child .table-wrap{border-radius:0 0 14px 14px}
.hist-month-section .pay-group .table-wrap{border-radius:0;border:none;box-shadow:none}
.hist-month-section .pay-group:first-of-type{border-radius:0;border-top:none}
.hist-month-section .pay-group:last-of-type{border-radius:0 0 14px 14px;overflow:hidden}
.hist-month-section .pay-group{border-radius:0}

/* ── MONTH-WISE STATUS ───────────────────────────────────── */
.ms-layout{display:flex;gap:0;align-items:flex-start;min-height:calc(100vh - 200px)}
.ms-sidebar{width:164px;flex-shrink:0;background:var(--glass-1);backdrop-filter:blur(20px);border:1px solid var(--border-teal);border-radius:16px;overflow:hidden;box-shadow:var(--glass-shadow);position:sticky;top:calc(var(--header-h) + 16px);margin-right:20px}
.ms-sidebar-head{padding:14px 14px 10px;border-bottom:1px solid var(--border-teal);background:rgba(0,200,255,.05)}
.ms-current-btn{font-family:var(--mono);font-size:10px;font-weight:600;padding:6px 10px;width:100%;border-radius:8px;border:1px solid var(--border-teal2);background:var(--glass-teal);color:var(--teal);cursor:pointer;text-transform:uppercase;letter-spacing:.4px;transition:all .15s}
.ms-current-btn:hover{background:var(--glass-teal2);box-shadow:var(--glow-teal-sm)}
.ms-month-list{display:flex;flex-direction:column;max-height:500px;overflow-y:auto}
.ms-month-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;border-bottom:1px solid rgba(0,200,255,.06);transition:background .12s;gap:6px}
.ms-month-item:last-child{border-bottom:none}
.ms-month-item:hover{background:var(--glass-teal);color:var(--teal)}
.ms-month-item.active{background:rgba(0,200,255,.14);color:var(--teal);font-weight:700;box-shadow:inset 3px 0 0 var(--teal)}
.ms-month-item.active .ms-month-pip{background:var(--teal);box-shadow:0 0 5px var(--teal)}
.ms-month-item.is-current{font-style:italic}
.ms-month-pip{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--border2)}
.ms-month-pip.all-paid{background:var(--green);box-shadow:0 0 5px var(--green)}
.ms-month-pip.some-paid{background:var(--amber)}
.ms-month-pip.none-paid{background:var(--red)}
.ms-panel{flex:1;min-width:0}
.ms-panel-header{display:flex;align-items:center;justify-content:space-between;background:var(--glass-1);backdrop-filter:blur(16px);border:1px solid var(--border-teal);border-radius:16px;padding:16px 22px;margin-bottom:14px;box-shadow:var(--glass-shadow);flex-wrap:wrap;gap:12px}
.ms-panel-title{font-size:22px;font-weight:700;letter-spacing:-.8px;line-height:1;color:var(--text)}
.ms-panel-title em{font-style:italic;font-weight:300;color:var(--teal)}
.ms-panel-badge{font-family:var(--mono);font-size:10px;font-weight:600;padding:4px 12px;border-radius:20px;letter-spacing:.4px}
.ms-panel-badge.current{background:var(--glass-teal);color:var(--teal);border:1px solid var(--border-teal2)}
.ms-panel-badge.archived{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(155,127,255,.25)}
.ms-progress-wrap{background:var(--glass-1);backdrop-filter:blur(12px);border:1px solid var(--border-teal);border-radius:14px;padding:14px 20px;margin-bottom:14px;box-shadow:var(--glass-shadow)}
.ms-progress-bar-bg{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin:8px 0 6px}
.ms-progress-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--teal2));transition:width .5s ease;box-shadow:0 0 8px rgba(0,200,255,.4)}
.ms-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ms-sum-card{background:var(--glass-1);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:14px;padding:12px 16px;position:relative;overflow:hidden;box-shadow:var(--glass-shadow);min-width:100px;flex:1}
.ms-sum-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 60%);pointer-events:none}
.ms-sum-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px}
.ms-sum-card.s-paid::after{background:linear-gradient(90deg,var(--green),transparent)}
.ms-sum-card.s-due::after{background:linear-gradient(90deg,var(--red),transparent)}
.ms-sum-card.s-warn::after{background:linear-gradient(90deg,var(--amber),transparent)}
.ms-sum-card.s-total::after{background:linear-gradient(90deg,var(--teal),var(--teal2))}
.ms-sum-card.s-overdue::after{background:linear-gradient(90deg,var(--red),transparent)}
.ms-sum-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text2);opacity:.6;margin-bottom:4px}
.ms-sum-val{font-size:24px;font-weight:700;letter-spacing:-1px;line-height:1}
.ms-sum-card.s-paid .ms-sum-val{color:var(--green)}
.ms-sum-card.s-due .ms-sum-val{color:var(--red)}
.ms-sum-card.s-warn .ms-sum-val{color:var(--amber)}
.ms-sum-card.s-total .ms-sum-val{font-size:16px;letter-spacing:-.5px;background:linear-gradient(90deg,var(--teal),var(--teal2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ms-sum-card.s-overdue .ms-sum-val{color:var(--red)}
.ms-sum-sub{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:2px}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ms-card{background:var(--glass-1);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:var(--glass-shadow);position:relative;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .15s}
.ms-card:hover{box-shadow:var(--glass-shadow-lg),var(--glow-teal-sm);border-color:var(--border-teal);transform:translateY(-1px)}
.ms-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 50%);pointer-events:none}
.ms-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.ms-card.ms-paid::after{background:linear-gradient(90deg,var(--green),transparent)}
.ms-card.ms-due::after{background:linear-gradient(90deg,var(--red),transparent)}
.ms-card.ms-warn::after{background:linear-gradient(90deg,var(--amber),transparent)}
.ms-card.ms-overdue::after{background:repeating-linear-gradient(90deg,var(--red) 0,var(--red) 6px,transparent 6px,transparent 12px)}
.ms-card.ms-nodata::after{background:var(--border)}
.ms-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.ms-card-name{font-size:13px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.ms-card-badge{font-family:var(--mono);font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;flex-shrink:0}
.ms-card-badge.ms-paid{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,232,122,.2)}
.ms-card-badge.ms-due,.ms-card-badge.ms-overdue{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,64,96,.2)}
.ms-card-badge.ms-warn{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(255,176,32,.2)}
.ms-card-badge.ms-nodata{background:var(--glass-2);color:var(--muted);border:1px solid var(--border)}
.ms-card-amt{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:-1px;color:var(--teal);margin-bottom:5px}
.ms-card-amt.ms-zero{color:var(--muted);font-size:12px;font-weight:400}
.ms-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;color:var(--muted)}
.ms-card-files{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-teal);opacity:.8}
.ms-card-filechip{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px;padding:3px 8px;border-radius:5px;cursor:pointer;border:1px solid var(--border);background:var(--glass-1)}
.ms-card-filechip.receipt{background:var(--glass-teal);color:var(--teal);border-color:var(--border-teal)}
.ms-card-filechip.invoice{background:var(--purple-dim);color:var(--purple);border-color:rgba(155,127,255,.2)}

/* ── MODALS (all use glass treatment) ───────────────────── */
.email-overlay,.viewer-overlay,.note-overlay,.modal-overlay,.confirm-overlay{display:none;position:fixed;inset:0;background:rgba(0,5,15,.75);backdrop-filter:blur(14px);z-index:500;place-items:center}
.email-overlay.open,.viewer-overlay.open,.note-overlay.open,.modal-overlay.open,.confirm-overlay.open{display:grid}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Shared modal glass box */
.email-modal,.viewer-modal,.note-modal,.modal,.confirm-box{
  background:rgba(4,21,38,.88);
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid var(--border-teal2);
  box-shadow:var(--glass-shadow-lg),var(--glow-teal);
  animation:modalIn .2s ease
}
.email-modal{border-radius:22px;width:min(640px,calc(100vw - 32px));max-height:90vh;overflow-y:auto}
.viewer-modal{border-radius:22px;width:min(1100px,calc(100vw - 32px));max-height:95vh;display:flex;flex-direction:column;overflow:hidden}
.note-modal{border-radius:18px;width:min(520px,calc(100vw - 32px));display:flex;flex-direction:column;overflow:hidden}
.modal{border-radius:22px;padding:30px;width:min(560px,calc(100vw - 32px));max-height:92vh;overflow-y:auto}
.confirm-box{border:1px solid rgba(255,64,96,.3);border-radius:18px;padding:28px;width:min(380px,calc(100vw - 32px));text-align:center;box-shadow:var(--glass-shadow-lg),0 0 30px rgba(255,64,96,.08)}

.email-modal-header,.viewer-header,.note-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--border-teal);gap:12px}
.email-modal-header{padding:20px 24px 16px}
.email-modal-title{font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px;color:var(--text)}
.em-icon{width:30px;height:30px;border-radius:8px;background:var(--blue-dim);border:1px solid rgba(61,159,255,.2);display:grid;place-items:center;color:var(--blue);flex-shrink:0}
.email-close,.viewer-close,.note-close{background:var(--glass-2);border:1px solid var(--border);color:var(--muted);width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:13px;display:grid;place-items:center;transition:all .15s}
.email-close:hover,.viewer-close:hover,.note-close:hover{background:var(--glass-teal);border-color:var(--teal);color:var(--teal)}
.email-form{padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.email-field label{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--teal);opacity:.7;margin-bottom:5px}
.email-field input,.email-field textarea{width:100%;background:rgba(2,11,24,.5);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--mono);font-size:12px;padding:9px 12px;outline:none;transition:border-color .15s}
.email-field input:focus,.email-field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,200,255,.08)}
.email-field textarea{resize:vertical;min-height:160px;line-height:1.6}
.email-status-bar{margin:0 24px 14px;padding:9px 13px;border-radius:8px;font-family:var(--mono);font-size:11px;display:none;align-items:center;gap:8px}
.email-status-bar.sending{display:flex;background:var(--blue-dim);border:1px solid rgba(61,159,255,.2);color:var(--blue)}
.email-status-bar.success{display:flex;background:var(--green-dim);border:1px solid rgba(0,232,122,.2);color:var(--green)}
.email-status-bar.error{display:flex;background:var(--red-dim);border:1px solid rgba(255,64,96,.2);color:var(--red)}
.email-actions,.viewer-footer{padding:14px 24px 20px;border-top:1px solid var(--border-teal);display:flex;gap:10px;justify-content:flex-end}
.viewer-footer{padding:14px 22px}
.viewer-title{font-size:15px;font-weight:600;color:var(--text)}
.viewer-subtitle{font-family:var(--mono);font-size:11px;color:var(--teal);margin-top:2px;opacity:.7}
.viewer-body{flex:1;overflow:auto;padding:16px;background:rgba(0,0,0,.15);min-height:0}
.viewer-body img{max-width:100%;border-radius:10px;border:1px solid var(--border-teal);display:block;margin:0 auto}
.viewer-body iframe{width:100%;height:calc(95vh - 180px);min-height:600px;border:1px solid var(--border-teal);border-radius:10px;display:block;background:#fff}
.file-icon-view{text-align:center;padding:44px 24px;color:var(--teal);opacity:.5;font-family:var(--mono);font-size:13px}
.file-icon-view span{display:block;font-size:44px;margin-bottom:12px}
.btn-send{background:linear-gradient(135deg,var(--blue),#2060c0);color:#fff;font-family:var(--serif);font-size:13px;font-weight:700;padding:9px 22px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;transition:opacity .15s;box-shadow:0 4px 16px rgba(61,159,255,.3)}
.btn-send:hover{opacity:.88}
.btn-send:disabled{opacity:.4;cursor:not-allowed}
.email-sent-log{background:var(--green-dim);border:1px solid rgba(0,232,122,.2);border-radius:8px;padding:7px 11px;font-family:var(--mono);font-size:10px;color:var(--green);display:flex;align-items:center;gap:6px}
.sent-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.btn-download-file{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:var(--serif);font-size:13px;font-weight:600;padding:8px 18px;border-radius:8px;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--glow-accent)}
.btn-close-view{background:var(--glass-1);border:1px solid var(--border);color:var(--text2);font-family:var(--serif);font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;cursor:pointer}
.btn-close-view:hover{border-color:var(--border-teal);color:var(--teal)}
.note-modal-header{padding:18px 22px 14px}
.note-modal-title{font-size:15px;font-weight:700;color:var(--text)}
.note-modal-title span{font-style:italic;font-weight:300;color:var(--teal)}
.note-textarea{width:100%;min-height:200px;background:rgba(0,200,255,.03);border:none;border-bottom:1px solid var(--border-teal);color:var(--text);font-family:var(--mono);font-size:13px;padding:18px 22px;outline:none;resize:vertical;line-height:1.7}
.note-modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px}
.modal-overlay{z-index:200}
.note-overlay{z-index:600}
.confirm-overlay{z-index:400}
.modal h2{font-size:20px;font-weight:700;letter-spacing:-.5px;margin-bottom:20px;color:var(--text)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--teal);opacity:.7;margin-bottom:6px}
.modal-section-label{font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--teal);opacity:.9;padding:8px 0 4px;border-bottom:1px solid var(--border-teal);margin-bottom:2px;grid-column:1/-1}

/* ── PAGE HEADING BAR ─────────────────────────────────────────── */
.billing-period-label{
  font-size:26px;font-weight:700;letter-spacing:-1px;
  background:linear-gradient(135deg,var(--amber),#ff9a3c);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.field label .req{color:var(--red);opacity:1;font-size:11px;margin-left:2px}
.field label .opt{color:var(--muted);opacity:.7;text-transform:none;font-size:9px;letter-spacing:0;margin-left:4px}
.field input,.field select,.field textarea{width:100%;background:rgba(2,11,24,.5);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--mono);font-size:12px;padding:9px 12px;outline:none;transition:border-color .15s,box-shadow .15s;color-scheme:dark}
.field select option{background:var(--navy-light)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,200,255,.10)}
.field textarea{resize:vertical;min-height:64px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.btn-cancel{background:var(--glass-1);border:1px solid var(--border);color:var(--text2);font-family:var(--serif);font-size:13px;font-weight:600;padding:9px 18px;border-radius:8px;cursor:pointer;transition:all .15s}
.btn-cancel:hover{border-color:var(--border-teal);color:var(--teal)}
.btn-add{background:linear-gradient(135deg,var(--teal),var(--teal2));border:none;color:var(--navy-deep);font-family:var(--serif);font-size:13px;font-weight:700;padding:9px 22px;border-radius:8px;cursor:pointer;transition:opacity .15s,box-shadow .15s;box-shadow:var(--glow-teal-sm)}
.btn-add:hover{opacity:.88;box-shadow:var(--glow-teal)}
.btn-add:disabled{opacity:.4;cursor:not-allowed}
.confirm-box h3{font-size:17px;font-weight:700;margin-bottom:8px;color:var(--text)}
.confirm-box p{font-size:13px;color:var(--text2);font-style:italic;margin-bottom:20px}
.confirm-actions{display:flex;gap:10px;justify-content:center}
.btn-confirm-delete{background:linear-gradient(135deg,var(--red),rgba(255,64,96,.7));color:#fff;border:none;font-family:var(--serif);font-size:13px;font-weight:700;padding:9px 20px;border-radius:8px;cursor:pointer;box-shadow:0 4px 16px rgba(255,64,96,.25);transition:opacity .15s}
.btn-confirm-delete:hover{opacity:.88}

/* ── FAB ─────────────────────────────────────────────────── */
.fab{position:fixed;bottom:28px;right:28px;z-index:100;background:linear-gradient(135deg,var(--teal),var(--teal2));color:var(--navy-deep);font-family:var(--serif);font-size:13px;font-weight:700;padding:13px 24px;border-radius:40px;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 6px 28px rgba(0,200,255,.40),var(--glow-teal);transition:transform .15s,box-shadow .15s}
.fab:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(0,200,255,.55),var(--glow-teal)}

/* ── PASSWORD OVERLAY ────────────────────────────────────── */
#pwOverlay{position:fixed;inset:0;background:url('../sds-login.png') center/cover no-repeat;z-index:99999;display:flex;align-items:center;justify-content:center;padding-bottom:22vh}
#pwOverlay::before{content:'';position:absolute;inset:0;background:rgba(1,8,20,.65)}
#pwOverlay.hidden{display:none}
.pw-box{position:relative;z-index:1;background:rgba(255,255,255,.05);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(0,200,255,.20);border-radius:24px;padding:40px 36px;width:min(400px,calc(100vw - 32px));box-shadow:0 20px 80px rgba(0,0,0,.7),var(--glow-teal),inset 0 1px 0 rgba(255,255,255,.09);text-align:center}
.pw-box h2{font-size:24px;font-weight:700;margin-bottom:6px;color:#fff}
.pw-box p{font-family:var(--mono);font-size:11px;color:rgba(0,200,255,.45);margin-bottom:24px}
.pw-input{width:100%;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.2);border-radius:12px;color:#fff;font-family:var(--mono);font-size:14px;padding:13px 16px;outline:none;text-align:center;letter-spacing:2px;margin-bottom:14px;display:block;transition:border-color .15s,box-shadow .15s}
.pw-input::placeholder{color:rgba(0,200,255,.22)}
.pw-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,200,255,.12),var(--glow-teal-sm)}
.pw-input.shake{animation:shake .35s ease;border-color:var(--red)}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.pw-error{font-family:var(--mono);font-size:11px;color:var(--red);margin-bottom:12px;min-height:16px}
.pw-btn{width:100%;background:linear-gradient(135deg,var(--teal),var(--teal2));color:var(--navy-deep);font-family:var(--serif);font-size:15px;font-weight:700;padding:14px;border-radius:12px;border:none;cursor:pointer;transition:opacity .15s,box-shadow .15s;box-shadow:0 6px 28px rgba(0,200,255,.40)}
.pw-btn:hover{opacity:.88;box-shadow:0 8px 36px rgba(0,200,255,.55)}

/* ── MISC ────────────────────────────────────────────────── */
.api-error{background:var(--red-dim);border:1px solid rgba(255,64,96,.25);backdrop-filter:blur(8px);border-radius:10px;padding:12px 16px;margin-bottom:16px;font-family:var(--mono);font-size:12px;color:var(--red);display:none}
.api-error.show{display:block}
.empty{text-align:center;padding:40px 24px;color:var(--muted);font-family:var(--mono);font-size:12px}
.toast{position:fixed;bottom:88px;right:28px;z-index:9000;background:rgba(4,21,38,.92);backdrop-filter:blur(20px);border:1px solid var(--border-teal);color:var(--text);font-family:var(--mono);font-size:12px;padding:10px 16px;border-radius:10px;box-shadow:var(--glass-shadow),var(--glow-teal-sm);max-width:320px;animation:toastIn .2s ease}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-teal);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,200,255,.4)}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1200px){.billing-split{display:block}}
@media(max-width:960px){
  body{--sidebar-w:64px}
  .side-nav{padding:12px 6px;gap:6px}
  .side-nav .page-tab span,
  .side-nav .side-nav-label,
  .side-nav .side-nav-pred span{display:none}
  .page-tab{justify-content:center;padding:12px;border-radius:10px}
  .side-nav-pred{justify-content:center;padding:12px;border-radius:10px}
}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){body{grid-template-columns:0 1fr;--sidebar-w:0px}.side-nav{display:none}.stats{grid-template-columns:1fr 1fr}header{padding:12px 16px}.main-content{padding:0 16px 40px}.search-input{width:100%}}
@media(max-width:1100px){.ms-layout{flex-direction:column}.ms-sidebar{width:100%;position:static;margin-right:0;margin-bottom:14px}.ms-month-list{flex-direction:row;flex-wrap:wrap;max-height:none}.ms-month-item{flex:0 0 auto}}

/* ── LOGIN FORM UPDATES ──────────────────────────────────────── */
.pw-field{display:flex;flex-direction:column;gap:5px;text-align:left}
.pw-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--teal);opacity:.7}
.pw-input{
  width:100%;background:rgba(0,200,255,.07);
  border:1px solid rgba(0,200,255,.2);border-radius:10px;
  color:#fff;font-family:var(--mono);font-size:13px;
  padding:11px 14px;outline:none;
  transition:border-color .15s,box-shadow .15s;display:block
}
.pw-input::placeholder{color:rgba(0,200,255,.22)}
.pw-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,200,255,.10)}

/* ── HEADER USER CHIP ────────────────────────────────────────── */
.user-chip{
  display:flex;align-items:center;gap:10px;
  background:var(--glass-2);border:1px solid var(--border-teal);
  border-radius:10px;padding:6px 12px;cursor:default
}
.user-chip-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:var(--navy-deep);font-family:var(--mono);font-size:12px;font-weight:700;
  display:grid;place-items:center;flex-shrink:0
}
.user-chip-name{font-size:12px;font-weight:600;color:var(--text);line-height:1.2}
.user-chip-role{font-family:var(--mono);font-size:9px;color:var(--teal);text-transform:uppercase;letter-spacing:.5px}


/* ── SIGN OUT BUTTON ─────────────────────────────────────────── */
.signout-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  padding:8px 16px;border-radius:10px;
  border:1px solid rgba(255,64,96,.25);
  background:rgba(255,64,96,.08);
  color:var(--red);cursor:pointer;
  transition:all .18s;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.4px
}
.signout-btn:hover{
  background:rgba(255,64,96,.18);
  border-color:var(--red);
  box-shadow:0 0 14px rgba(255,64,96,.20)
}
/* ── USER MANAGEMENT PAGE ────────────────────────────────────── */
.um-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;margin-bottom:20px
}
.um-stat-card{
  background:var(--glass-1);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:16px;
  padding:18px 20px;position:relative;overflow:hidden;
  box-shadow:var(--glass-shadow);transition:all .2s;cursor:default
}
.um-stat-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 60%);pointer-events:none}
.um-stat-card:hover{border-color:var(--border-teal);box-shadow:var(--glass-shadow),var(--glow-teal-sm);transform:translateY(-1px)}
.um-stat-bar{position:absolute;bottom:0;left:0;right:0;height:2px}
.um-stat-card.su .um-stat-bar{background:linear-gradient(90deg,#ffd700,#ffaa00)}
.um-stat-card.ad .um-stat-bar{background:linear-gradient(90deg,var(--purple),rgba(155,127,255,.4))}
.um-stat-card.hr .um-stat-bar{background:linear-gradient(90deg,var(--teal),var(--teal2))}
.um-stat-card.vw .um-stat-bar{background:linear-gradient(90deg,var(--blue),rgba(61,159,255,.4))}
.um-stat-icon{font-size:22px;margin-bottom:6px}
.um-stat-num{font-size:36px;font-weight:700;letter-spacing:-2px;line-height:1;color:var(--text)}
.um-stat-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-top:4px}

.um-main-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:flex-start}
.um-table-col{min-width:0}
.um-right-col{display:flex;flex-direction:column;gap:0}

.um-panel{
  background:var(--glass-1);backdrop-filter:blur(20px);
  border:1px solid var(--border-teal);border-radius:18px;overflow:hidden;
  box-shadow:var(--glass-shadow)
}
.um-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--border-teal);
  background:rgba(0,200,255,.05);gap:12px
}
.um-panel-title{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--text)
}
.um-count{
  font-family:var(--mono);font-size:11px;font-weight:700;
  background:var(--glass-teal);color:var(--teal);
  border:1px solid var(--border-teal);border-radius:20px;
  padding:2px 10px;margin-left:4px
}
.um-btn-new{
  font-family:var(--mono);font-size:10px;font-weight:600;
  padding:8px 16px;border-radius:10px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:var(--navy-deep);border:none;cursor:pointer;
  transition:opacity .15s,box-shadow .15s;white-space:nowrap;
  box-shadow:var(--glow-teal-sm)
}
.um-btn-new:hover{opacity:.88;box-shadow:var(--glow-teal)}

/* Users table */
.um-table-wrap{overflow-x:auto}
.um-table{width:100%;border-collapse:collapse}
.um-table thead th{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;
  color:var(--teal);opacity:.7;padding:10px 16px;text-align:left;
  background:rgba(0,200,255,.04);border-bottom:1px solid var(--border-teal);white-space:nowrap
}
.um-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s}
.um-table tbody tr:last-child{border-bottom:none}
.um-table tbody tr:hover{background:rgba(0,200,255,.03)}
.um-table td{padding:12px 16px;vertical-align:middle;white-space:nowrap}

/* User cell */
.um-user-cell{display:flex;align-items:center;gap:10px}
.um-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--navy-deep)
}
.um-avatar.su{background:linear-gradient(135deg,#ffd700,#ffaa00)}
.um-avatar.ad{background:linear-gradient(135deg,var(--purple),rgba(155,127,255,.8))}
.um-avatar.vw{background:linear-gradient(135deg,var(--blue),rgba(61,159,255,.8))}
.um-user-name{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.um-you-tag{font-family:var(--mono);font-size:9px;background:var(--glass-teal);color:var(--teal);border:1px solid var(--border-teal);border-radius:10px;padding:1px 7px}
.um-user-email{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:1px}

/* Role badge */
.um-role-badge{
  font-family:var(--mono);font-size:10px;font-weight:700;
  padding:4px 10px;border-radius:20px;letter-spacing:.4px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap
}
.um-role-badge.superuser{background:rgba(255,215,0,.12);color:#ffd700;border:1px solid rgba(255,215,0,.25)}
.um-role-badge.admin{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(155,127,255,.25)}
.um-role-badge.viewer{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(61,159,255,.2)}

/* Status */
.um-status{font-family:var(--mono);font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:5px}
.um-status.active{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,232,122,.2)}
.um-status.inactive{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,64,96,.2)}
.um-status-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}

/* Action buttons */
.um-actions{display:flex;align-items:center;gap:6px}
.um-btn-edit{
  font-family:var(--mono);font-size:9px;padding:5px 10px;border-radius:7px;
  border:1px solid var(--border);background:var(--glass-1);color:var(--text2);
  cursor:pointer;transition:all .15s;white-space:nowrap
}
.um-btn-edit:hover{border-color:var(--border-teal);color:var(--teal);background:var(--glass-teal)}
.um-btn-deactivate{
  font-family:var(--mono);font-size:9px;padding:5px 10px;border-radius:7px;
  border:1px solid rgba(255,64,96,.25);background:var(--red-dim);color:var(--red);
  cursor:pointer;transition:all .15s;white-space:nowrap
}
.um-btn-deactivate:hover{background:var(--red-mid);border-color:var(--red)}
.um-btn-activate{
  font-family:var(--mono);font-size:9px;padding:5px 10px;border-radius:7px;
  border:1px solid rgba(0,232,122,.25);background:var(--green-dim);color:var(--green);
  cursor:pointer;transition:all .15s;white-space:nowrap
}
.um-btn-activate:hover{background:var(--green-mid);border-color:var(--green)}

/* Permission matrix */
.um-perm-body{padding:10px 0}
.um-perm-header-row{
  display:grid;grid-template-columns:1fr 36px 36px 36px;
  gap:4px;padding:6px 16px;
  font-family:var(--mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  border-bottom:1px solid var(--border-teal)
}
.um-perm-role{text-align:center;color:var(--teal)}
.um-perm-row{
  display:grid;grid-template-columns:1fr 36px 36px 36px;
  gap:4px;padding:8px 16px;border-bottom:1px solid rgba(255,255,255,.04);
  font-size:12px;color:var(--text2);align-items:center;transition:background .1s
}
.um-perm-row:last-child{border-bottom:none}
.um-perm-row:hover{background:rgba(0,200,255,.03)}
.um-perm-check{text-align:center;font-size:13px}
.um-perm-check.yes{color:var(--green)}
.um-perm-check.no{color:var(--muted);opacity:.35}

/* Change password */
.um-field{display:flex;flex-direction:column;gap:5px}
.um-field label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--teal);opacity:.7}
.um-field input,.um-field select{
  background:rgba(2,11,24,.5);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-family:var(--mono);font-size:12px;padding:9px 12px;
  outline:none;transition:border-color .15s;color-scheme:dark;width:100%
}
.um-field input:focus,.um-field select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,200,255,.08)}
.um-btn-save{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:11px;font-weight:700;
  padding:11px 20px;border-radius:10px;
  background:linear-gradient(135deg,var(--purple),rgba(155,127,255,.7));
  color:#fff;border:none;cursor:pointer;transition:opacity .15s,box-shadow .15s;
  box-shadow:0 4px 16px rgba(155,127,255,.3)
}
.um-btn-save:hover{opacity:.88;box-shadow:0 6px 24px rgba(155,127,255,.4)}

/* Responsive */
@media(max-width:1100px){.um-main-layout{grid-template-columns:1fr}}
@media(max-width:700px){.um-stats{grid-template-columns:1fr 1fr}}

/* ── APPLICATIONS PAGE ───────────────────────────────────────── */
.apps-page-header{
  background:var(--glass-1);backdrop-filter:blur(20px);
  border:1px solid var(--border-teal);border-radius:18px;
  padding:22px 28px;margin-bottom:22px;
  box-shadow:var(--glass-shadow)
}
.apps-page-eyebrow{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:3px;color:var(--teal);opacity:.6;margin-bottom:6px
}
.apps-page-title{
  font-size:26px;font-weight:700;letter-spacing:-1px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:6px;
  /* Chrome quirk: selecting gradient-text (background-clip:text +
     text-fill-color:transparent) renders as a solid block instead of a
     normal selection highlight. Disable selection so the bug can't fire.
     Page titles aren't typically copied anyway.                          */
  user-select:none;
  -webkit-user-select:none;
}
.apps-page-sub{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* Two-column layout */
.apps-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:flex-start}
.apps-three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:flex-start}

/* Each column */
.apps-col{
  background:var(--glass-1);backdrop-filter:blur(16px);
  border:1px solid var(--border-teal);border-radius:18px;
  overflow:hidden;box-shadow:var(--glass-shadow)
}

/* Column header — Monthly vs Yearly */
.apps-col-header{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;
  font-size:14px;font-weight:700;letter-spacing:-.3px;
  border-bottom:1px solid var(--border-teal)
}
.apps-col-header.monthly{
  background:rgba(0,200,255,.07);color:var(--teal)
}
.apps-col-header.yearly{
  background:rgba(155,127,255,.07);color:var(--purple)
}
.apps-col-header.quarterly{
  background:rgba(167,139,250,.07);color:#a78bfa
}

/* Section inside column */
.apps-section{padding:0 0 10px}
.apps-section-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px 5px;gap:6px
}
.apps-section-title{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--text)
}

/* Company badge */
.apps-company-badge{
  font-family:var(--mono);font-size:9px;font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:6px
}
.apps-company-badge.sds{
  background:rgba(0,200,255,.15);color:var(--teal);
  border:1px solid rgba(0,200,255,.3)
}
.apps-company-badge.riaktr{
  background:rgba(155,127,255,.15);color:var(--purple);
  border:1px solid rgba(155,127,255,.3)
}

/* Count badge */
.apps-count{
  font-family:var(--mono);font-size:11px;font-weight:700;
  background:var(--glass-2);color:var(--text2);
  border:1px solid var(--border);border-radius:20px;
  padding:2px 10px;min-width:24px;text-align:center
}

/* Horizontal divider between SDS and Riaktr sections */
.apps-h-divider{
  height:1px;margin:6px 10px 8px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(0,200,255,.15) 20%,
    rgba(0,200,255,.30) 50%,
    rgba(0,200,255,.15) 80%,
    transparent 100%)
}

/* ── FLEX ROW LAYOUT — zero gap, shrink to content ──────────── */
.apps-rows-wrap{padding:0 8px 4px}

/* Header row */
.apps-row{
  display:flex;
  align-items:center;
  gap:0;
  border-bottom:1px solid rgba(255,255,255,.04)
}
.apps-row-head{
  border-bottom:1px solid rgba(0,200,255,.12);
  background:rgba(0,200,255,.04);
  border-radius:6px 6px 0 0;
  padding:4px 0
}
.apps-row-head .apps-cell{
  font-family:var(--mono);font-size:8px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--teal);opacity:.65;padding:2px 6px;
  white-space:nowrap;flex-shrink:0
}
.apps-row:last-child{border-bottom:none}

/* Status color stripes */
.apps-row.app-row{
  border-left:3px solid transparent;
  transition:background .12s
}
.app-s-active      {border-left-color:rgba(0,232,122,.55)!important;background:rgba(0,232,122,.025)}
.app-s-active:hover{background:rgba(0,232,122,.07)!important}
.app-s-attention   {border-left-color:rgba(255,140,0,.65)!important;background:rgba(255,140,0,.03)}
.app-s-attention:hover{background:rgba(255,140,0,.08)!important}
.app-s-warning     {border-left-color:rgba(255,200,0,.65)!important;background:rgba(255,200,0,.025)}
.app-s-warning:hover{background:rgba(255,200,0,.07)!important}
.app-s-review      {border-left-color:rgba(74,158,255,.55)!important;background:rgba(74,158,255,.025)}
.app-s-review:hover{background:rgba(74,158,255,.07)!important}
.app-s-discontinued{border-left-color:rgba(255,64,96,.55)!important;background:rgba(255,64,96,.03)}
.app-s-discontinued:hover{background:rgba(255,64,96,.09)!important}
.app-s-discontinued .apps-inline-input{text-decoration:line-through;opacity:.55}

/* Base cell — flex-shrink to content */
.apps-cell{
  flex:0 0 auto;          /* KEY: never stretch, only as wide as content */
  padding:3px 6px;
  min-width:0;
  overflow:hidden
}

/* App Name — gets leftover space, min 80px */
.apps-cell-name{
  flex:1 1 auto;          /* grow to fill leftover space */
  min-width:80px;
  overflow:hidden
}

/* Owner, Comments — strictly content-sized */
.apps-cell-owner,
.apps-cell-comment{
  flex:0 0 auto;
  white-space:nowrap
}

/* Status — fixed width */
.apps-cell-status{flex:0 0 88px;width:88px;padding:3px 4px}

/* Delete — fixed width */
.apps-cell-del{flex:0 0 26px;width:26px;padding:3px 3px;text-align:center}

/* Divider between separator pipe */
.apps-cell-owner::before,
.apps-cell-comment::before{
  content:'';
  display:inline-block;
  width:1px;height:12px;
  background:rgba(0,200,255,.15);
  vertical-align:middle;
  margin-right:6px
}

/* Inline inputs — width auto so input shrinks to its value */
.apps-inline-input{
  background:transparent;
  border:1px solid transparent;
  border-radius:4px;
  color:var(--text);
  font-size:11px;
  padding:2px 4px;
  outline:none;
  font-family:inherit;
  /* width:auto = input is exactly as wide as its content via size attr */
  width:auto;
  max-width:100%
}
.apps-inline-input:hover{background:rgba(0,200,255,.07);border-color:rgba(0,200,255,.25)}
.apps-inline-input:focus{background:rgba(0,200,255,.10);border-color:var(--teal)}
.apps-inline-input::placeholder{color:var(--muted);font-style:italic}

/* Name input fills its cell */
.apps-cell-name .apps-inline-input{width:100%}

/* Status dropdown */
.apps-status-select{
  font-family:var(--mono);font-size:9px;font-weight:700;
  padding:2px 5px;border-radius:6px;cursor:pointer;
  outline:none;border:1px solid;
  width:100%;color-scheme:dark;
  white-space:nowrap
}
.apps-status-select option{background:#071e38;color:var(--text)}
.apps-status-select.app-s-active      {color:var(--green);border-color:rgba(0,232,122,.4);background:rgba(0,232,122,.12)}
.apps-status-select.app-s-attention   {color:var(--amber);border-color:rgba(255,140,0,.4);background:rgba(255,140,0,.10)}
.apps-status-select.app-s-warning     {color:#ffe033;border-color:rgba(255,200,0,.4);background:rgba(255,200,0,.08)}
.apps-status-select.app-s-review      {color:var(--blue);border-color:rgba(74,158,255,.4);background:rgba(74,158,255,.10)}
.apps-status-select.app-s-discontinued{color:var(--red);border-color:rgba(255,64,96,.4);background:rgba(255,64,96,.10)}

/* Delete button */
.apps-btn-del{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:4px;
  border:1px solid rgba(255,64,96,.2);background:var(--red-dim);
  color:var(--red);cursor:pointer;font-size:12px;line-height:1;
  transition:all .15s
}
.apps-btn-del:hover{background:var(--red-mid);border-color:var(--red)}
.apps-btn-save{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;
  border:1px solid rgba(0,232,122,.2);background:var(--green-dim);
  color:var(--green);cursor:pointer;font-size:12px;
  transition:all .15s
}
.apps-btn-save:hover{background:var(--green-mid);border-color:var(--green)}

/* Empty state */
.apps-empty{
  text-align:center;padding:20px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  font-style:italic
}

/* Add button */
.apps-add-btn{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
  margin:6px 10px 4px;padding:6px 12px;
  border-radius:7px;width:calc(100% - 20px);
  border:1px dashed rgba(0,200,255,.28);
  background:rgba(0,200,255,.03);color:var(--teal);
  cursor:pointer;transition:all .18s;justify-content:center
}
.apps-add-btn:hover{
  background:rgba(0,200,255,.10);
  border-color:var(--teal);border-style:solid;
  box-shadow:var(--glow-teal-sm)
}

/* Responsive */
@media(max-width:1100px){.apps-two-col{grid-template-columns:1fr}}

/* ── STATUS LEGEND ───────────────────────────────────────────── */
.apps-legend{
  display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;margin-top:10px;
  font-family:var(--mono);font-size:10px
}
.apps-legend-item{display:flex;align-items:center;gap:5px}
.apps-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.apps-legend-dot.active      {background:var(--green);box-shadow:0 0 6px var(--green)}
.apps-legend-dot.attention   {background:var(--accent);box-shadow:0 0 6px var(--accent)}
.apps-legend-dot.warning     {background:var(--amber);box-shadow:0 0 6px var(--amber)}
.apps-legend-dot.review      {background:var(--blue);box-shadow:0 0 6px var(--blue)}
.apps-legend-dot.discontinued{background:var(--red);box-shadow:0 0 6px var(--red)}

/* ── YELLOW GLOWING DIVIDER ──────────────────────────────── */
.side-nav-divider-yellow{
  height:1px;
  margin:6px 6px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,220,0,.25) 15%,
    rgba(255,220,0,.65) 50%,
    rgba(255,220,0,.25) 85%,
    transparent 100%);
  box-shadow:0 0 8px rgba(255,220,0,.5),0 0 20px rgba(255,220,0,.2)
}

/* ── ANALYTICS TAB — yellow glowing ─────────────────────── */
.side-nav .tab-analytics,
.tab-analytics{
  border-color:rgba(255,215,0,.35) !important;
  color:rgba(255,215,0,.80) !important;
  background:rgba(255,215,0,.06) !important;
  text-shadow:0 0 8px rgba(255,215,0,.4) !important
}
.side-nav .tab-analytics svg,
.tab-analytics svg{
  color:#ffd700 !important;
  filter:drop-shadow(0 0 4px rgba(255,215,0,.6)) !important
}
.side-nav .tab-analytics:hover,
.tab-analytics:hover{
  color:#ffd700 !important;
  background:rgba(255,215,0,.12) !important;
  border-color:rgba(255,215,0,.70) !important;
  box-shadow:0 0 16px rgba(255,215,0,.25),0 0 32px rgba(255,215,0,.10) !important
}
.side-nav .tab-analytics.active,
.tab-analytics.active{
  color:#ffe600 !important;
  background:rgba(255,215,0,.14) !important;
  border-color:#ffd700 !important;
  box-shadow:
    0 0 20px rgba(255,215,0,.40),
    0 0 45px rgba(255,215,0,.18),
    inset 0 0 20px rgba(255,215,0,.06) !important
}

/* ── REPORTS & ANALYTICS PAGE — multi-color theme ───────── */
.rpt-header{
  background:var(--glass-1);backdrop-filter:blur(20px);
  border:1px solid var(--border2);border-radius:18px;
  padding:22px 26px;margin-bottom:22px;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;box-shadow:var(--shadow)
}
.rpt-eyebrow{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:3px;color:var(--teal);opacity:.7;margin-bottom:6px
}
.rpt-title{
  font-size:26px;font-weight:700;letter-spacing:-1px;
  background:linear-gradient(135deg,var(--teal),var(--purple),var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:5px
}
.rpt-sub{font-family:var(--mono);font-size:11px;color:var(--muted)}

.rpt-header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0}
.rpt-tabs{display:flex;gap:8px}
.rpt-tab{
  font-family:var(--mono);font-size:11px;font-weight:700;
  padding:8px 16px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border2);background:transparent;
  color:var(--text2);transition:all .18s
}
.rpt-tab.active{
  background:rgba(0,200,255,.12);border-color:var(--teal);color:var(--teal);
  box-shadow:0 0 12px rgba(0,200,255,.25)
}
.rpt-tab:hover:not(.active){color:var(--text);border-color:var(--teal);background:var(--glass-teal)}

.rpt-export-btns{display:flex;gap:8px}
.rpt-export-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  padding:8px 14px;border-radius:10px;cursor:pointer;
  transition:all .18s;border:1px solid
}
.rpt-export-btn.excel{
  border-color:rgba(0,232,122,.3);background:rgba(0,232,122,.08);color:var(--green)
}
.rpt-export-btn.excel:hover{background:rgba(0,232,122,.15);box-shadow:0 0 12px rgba(0,232,122,.2)}
.rpt-export-btn.pdf{
  border-color:rgba(255,64,96,.3);background:rgba(255,64,96,.08);color:var(--red)
}
.rpt-export-btn.pdf:hover{background:rgba(255,64,96,.15);box-shadow:0 0 12px rgba(255,64,96,.2)}

/* KPI Cards — each a different accent color */
.rpt-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media(max-width:1100px){.rpt-kpi-grid{grid-template-columns:repeat(2,1fr)}}
.rpt-kpi{
  background:var(--glass-1);border:1px solid var(--border);
  border-radius:16px;padding:18px 20px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .2s
}
.rpt-kpi:hover{transform:translateY(-2px)}
.rpt-kpi:nth-child(1)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--purple);box-shadow:0 0 10px rgba(155,127,255,.5)}
.rpt-kpi:nth-child(2)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--teal);box-shadow:0 0 10px rgba(0,200,255,.4)}
.rpt-kpi:nth-child(3)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--green);box-shadow:0 0 10px rgba(0,232,122,.4)}
.rpt-kpi:nth-child(4)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--orange);box-shadow:0 0 10px rgba(255,106,53,.4)}
.rpt-kpi::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent);pointer-events:none}
.rpt-kpi-icon{font-size:20px;margin-bottom:6px}
.rpt-kpi-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:6px}
.rpt-kpi:nth-child(1) .rpt-kpi-val{color:var(--purple);text-shadow:0 0 16px rgba(155,127,255,.4)}
.rpt-kpi:nth-child(2) .rpt-kpi-val{color:var(--teal);text-shadow:0 0 16px rgba(0,200,255,.35)}
.rpt-kpi:nth-child(3) .rpt-kpi-val{color:var(--green);text-shadow:0 0 16px rgba(0,232,122,.35)}
.rpt-kpi:nth-child(4) .rpt-kpi-val{color:var(--orange);text-shadow:0 0 16px rgba(255,106,53,.35)}
.rpt-kpi-val{font-size:28px;font-weight:700;letter-spacing:-1px}
.rpt-kpi-sub{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:4px}

/* Panels */
.rpt-charts-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
@media(max-width:1100px){.rpt-charts-row{grid-template-columns:1fr}}
.rpt-panel{
  background:var(--glass-1);backdrop-filter:blur(16px);
  border:1px solid var(--border2);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow)
}
.rpt-panel-wide{grid-column:span 1}
.rpt-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--border);
  background:rgba(0,200,255,.03);gap:10px;flex-wrap:wrap
}
.rpt-panel-title{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--text)
}
.rpt-panel-title svg{color:var(--teal);flex-shrink:0}
.rpt-panel-sub{font-family:var(--mono);font-size:10px;color:var(--muted)}
.rpt-panel-body{padding:20px}

/* Department bars */
.dept-list{display:flex;flex-direction:column;gap:10px}
.dept-row{display:flex;flex-direction:column;gap:4px}
.dept-row-head{display:flex;align-items:center;justify-content:space-between}
.dept-name{font-size:12px;font-weight:600;color:var(--text)}
.dept-val{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--teal)}
.dept-track{height:10px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.dept-fill{height:100%;border-radius:5px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.dept-sub{font-family:var(--mono);font-size:9px;color:var(--muted)}

/* MoM bars */
.mom-row-rpt{display:flex;align-items:center;gap:10px;padding:4px 0}
.mom-month-rpt{font-family:var(--mono);font-size:10px;color:var(--text2);width:55px;flex-shrink:0}
.mom-bar-track-rpt{flex:1;height:18px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden;position:relative}
.mom-bar-fill-rpt{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:8px;font-family:var(--mono);font-size:9px;font-weight:700;white-space:nowrap;transition:width .6s}
.mom-total-rpt{font-family:var(--mono);font-size:10px;font-weight:700;width:70px;text-align:right;flex-shrink:0}
.mom-pct-rpt{font-family:var(--mono);font-size:10px;width:46px;text-align:right;flex-shrink:0}

/* Report table */
.rpt-table{width:100%;border-collapse:collapse}
.rpt-table thead th{
  font-family:var(--mono);font-size:8px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--teal);opacity:.65;
  padding:8px 12px;text-align:left;
  background:rgba(0,200,255,.04);
  border-bottom:1px solid var(--border);white-space:nowrap
}
.rpt-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s}
.rpt-table tbody tr:last-child{border-bottom:none}
.rpt-table tbody tr:hover{background:rgba(0,200,255,.03)}
.rpt-table td{padding:8px 12px;font-size:11px;vertical-align:middle}
.rpt-lic-name{font-weight:600;font-size:12px;color:var(--text)}
.rpt-mono{font-family:var(--mono);font-size:11px;color:var(--text2)}
.rpt-amt{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--teal)}

/* ── ORANGE DIVIDER (Audit/Notif) ───────────────────────── */
.side-nav-divider-orange{
  height:1px;margin:6px 6px;
  background:linear-gradient(90deg,transparent,rgba(255,106,53,.5),rgba(255,176,32,.6),rgba(255,106,53,.5),transparent);
  box-shadow:0 0 8px rgba(255,130,50,.4),0 0 20px rgba(255,130,50,.15)
}

/* ── AUDIT TAB ───────────────────────────────────────────── */
.side-nav .tab-audit,.tab-audit{
  border-color:rgba(255,106,53,.30) !important;
  color:rgba(255,140,80,.75) !important;
  background:rgba(255,106,53,.05) !important
}
.side-nav .tab-audit:hover,.tab-audit:hover{
  color:var(--orange) !important;background:rgba(255,106,53,.12) !important;
  border-color:rgba(255,106,53,.60) !important;box-shadow:0 0 14px rgba(255,106,53,.2) !important
}
.side-nav .tab-audit.active,.tab-audit.active{
  color:var(--orange) !important;background:rgba(255,106,53,.14) !important;
  border-color:var(--orange) !important;
  box-shadow:0 0 20px rgba(255,106,53,.35),0 0 45px rgba(255,106,53,.12) !important
}

/* Notification badge on sidebar tab */
.notif-badge{
  font-family:var(--mono);font-size:9px;font-weight:700;
  background:var(--red);color:#fff;border-radius:10px;
  padding:1px 6px;margin-left:auto;flex-shrink:0;
  box-shadow:0 0 8px rgba(255,64,96,.5)
}

/* ── NOTIFICATION BELL (header) ─────────────────────────── */
.notif-bell{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  border:1px solid var(--border2);background:var(--glass-1);
  color:var(--text2);cursor:pointer;transition:all .18s;flex-shrink:0
}
.notif-bell:hover{border-color:var(--teal);color:var(--teal);background:var(--glass-teal);box-shadow:var(--glow-teal-sm)}
.notif-bell-badge{
  position:absolute;top:-5px;right:-5px;
  font-family:var(--mono);font-size:9px;font-weight:700;
  background:var(--red);color:#fff;border-radius:10px;
  padding:1px 5px;border:1.5px solid var(--navy);
  box-shadow:0 0 8px rgba(255,64,96,.6)
}

/* ── NOTIFICATION DROPDOWN ───────────────────────────────── */
.notif-panel{
  position:fixed;top:56px;right:14px;
  width:360px;max-height:500px;
  background:rgba(4,16,32,.97);backdrop-filter:blur(24px);
  border:1px solid var(--border2);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6),var(--glow-teal);
  z-index:200;overflow:hidden;display:flex;flex-direction:column
}
.notif-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border)
}
.notif-panel-title{font-size:14px;font-weight:700;color:var(--text)}
.notif-mark-all{
  font-family:var(--mono);font-size:10px;color:var(--teal);
  background:none;border:none;cursor:pointer;padding:4px 8px;
  border-radius:6px;transition:background .15s
}
.notif-mark-all:hover{background:var(--glass-teal)}
.notif-panel-list{overflow-y:auto;max-height:420px}
.notif-panel-list::-webkit-scrollbar{width:4px}
.notif-panel-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ── NOTIFICATION ITEMS ──────────────────────────────────── */
.notif-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer;transition:background .12s
}
.notif-item:hover{background:rgba(0,200,255,.04)}
.notif-item.unread{background:rgba(0,200,255,.05)}
.notif-item.unread:hover{background:rgba(0,200,255,.09)}
.notif-icon{font-size:18px;flex-shrink:0;line-height:1;margin-top:2px}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:3px}
.notif-item.unread .notif-title{color:var(--teal)}
.notif-msg{font-size:11px;color:var(--muted);line-height:1.4}
.notif-time{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:4px;white-space:nowrap}
.notif-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:5px;box-shadow:0 0 6px var(--teal)}

/* Full notif page */
.notif-full-list{display:flex;flex-direction:column;gap:10px}
.notif-full-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 20px;border-radius:14px;border:1px solid;
  transition:all .15s
}
.notif-full-item.renewal{border-color:rgba(255,64,96,.25);background:rgba(255,64,96,.06)}
.notif-full-item.payment{border-color:rgba(255,176,32,.2);background:rgba(255,176,32,.05)}
.notif-full-item.cost_increase{border-color:rgba(0,200,255,.2);background:rgba(0,200,255,.05)}
.notif-full-item.info{border-color:rgba(0,232,122,.18);background:rgba(0,232,122,.04)}
.notif-full-item.read{opacity:.6}
.notif-full-icon{font-size:22px;flex-shrink:0}
.notif-full-body{flex:1}
.notif-full-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.notif-full-msg{font-size:12px;color:var(--text2);line-height:1.5}
.notif-full-time{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:6px}
.notif-full-badge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:8px;margin-left:8px;vertical-align:middle}

/* ── AUDIT LOG PAGE ──────────────────────────────────────── */
.audit-header{
  background:var(--glass-1);backdrop-filter:blur(20px);
  border:1px solid rgba(255,106,53,.2);border-radius:18px;
  padding:22px 26px;margin-bottom:20px;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;box-shadow:var(--glass-shadow)
}
.audit-eyebrow{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:3px;color:var(--orange);opacity:.7;margin-bottom:6px}
.audit-title{font-size:26px;font-weight:700;letter-spacing:-1px;background:linear-gradient(135deg,var(--orange),var(--amber));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:5px}
.audit-sub{font-family:var(--mono);font-size:11px;color:var(--muted)}
.audit-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.audit-filter-select,.audit-filter-input{
  font-family:var(--mono);font-size:11px;
  background:rgba(2,11,24,.6);border:1px solid rgba(255,106,53,.25);
  border-radius:9px;color:var(--text);padding:7px 12px;outline:none;
  transition:border-color .15s;color-scheme:dark
}
.audit-filter-select:focus,.audit-filter-input:focus{border-color:var(--orange)}
.audit-filter-input{width:160px}
.audit-filter-input::placeholder{color:var(--muted)}

.audit-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media(max-width:900px){.audit-stats{grid-template-columns:repeat(2,1fr)}}
.audit-stat{
  background:var(--glass-1);border:1px solid rgba(255,106,53,.18);border-radius:14px;
  padding:14px 18px;position:relative;overflow:hidden
}
.audit-stat::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--orange),rgba(255,176,32,.3))}
.audit-stat-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:5px}
.audit-stat-val{font-size:24px;font-weight:700;color:var(--orange)}

/* Audit log rows */
.audit-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .1s
}
.audit-row:hover{background:rgba(255,106,53,.03)}
.audit-row:last-child{border-bottom:none}
.audit-action-icon{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:grid;place-items:center;font-size:14px
}
.audit-body{flex:1;min-width:0}
.audit-action-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.audit-action-badge{
  font-family:var(--mono);font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap
}
.badge-LOGIN{background:rgba(0,232,122,.12);color:var(--green)}
.badge-UPDATE_BILLING{background:rgba(0,200,255,.12);color:var(--teal)}
.badge-UPLOAD_FILE{background:rgba(155,127,255,.12);color:var(--purple)}
.badge-DELETE_LICENSE{background:rgba(255,64,96,.12);color:var(--red)}
.badge-default{background:rgba(255,255,255,.08);color:var(--muted)}
.audit-entity{font-size:12px;font-weight:600;color:var(--text)}
.audit-user-line{font-family:var(--mono);font-size:10px;color:var(--text2)}
.audit-time{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap;flex-shrink:0}

/* ══════════════════════════════════════════════════════════════
   LIGHT GLASSMORPHISM THEME  —  data-theme="light"
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"]{
  /* Backgrounds */
  --navy-deep:#f0f6ff;
  --navy-mid:#e4edf9;
  --navy-light:#d6e8f7;
  --bg:#f0f6ff;
  --bg2:#e4edf9;

  /* Glass surfaces — frosted white */
  --glass-1:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.78);
  --glass-3:rgba(255,255,255,.90);
  --glass-teal:rgba(0,140,200,.07);
  --glass-teal2:rgba(0,140,200,.14);

  /* Borders — soft blue */
  --border:rgba(0,100,180,.12);
  --border2:rgba(0,100,180,.20);
  --border-teal:rgba(0,140,200,.22);
  --border-teal2:rgba(0,140,200,.40);
  --border-cyan:rgba(0,160,160,.22);

  /* Text — dark navy on white */
  --text:#0e2a4a;
  --text2:#2e5a80;
  --muted:#7ca3bf;

  /* Teal/cyan — deeper for contrast */
  --teal:#0088cc;
  --teal2:#00aa99;
  --teal-dim:rgba(0,136,204,.10);
  --teal-mid:rgba(0,136,204,.18);
  --cyan-dim:rgba(0,160,200,.10);

  /* Status colors — darker for white bg */
  --green:#008844;
  --green-dim:rgba(0,136,68,.10);
  --green-mid:rgba(0,136,68,.18);
  --red:#c8203a;
  --red-dim:rgba(200,32,58,.10);
  --red-mid:rgba(200,32,58,.18);
  --amber:#b06800;
  --amber-dim:rgba(176,104,0,.10);
  --amber-mid:rgba(176,104,0,.16);
  --purple:#5533aa;
  --purple-dim:rgba(85,51,170,.12);
  --blue:#1266bb;
  --blue-dim:rgba(18,102,187,.10);

  /* SDS accent */
  --accent:#d04010;
  --accent2:#e06030;
  --accent-dim:rgba(208,64,16,.10);

  /* Shadows — soft blue-tinted */
  --glass-shadow:0 8px 32px rgba(0,50,120,.12),inset 0 1px 0 rgba(255,255,255,.80);
  --glass-shadow-lg:0 16px 60px rgba(0,50,120,.18),inset 0 1px 0 rgba(255,255,255,.90);
  --glow-teal:0 0 20px rgba(0,136,204,.15),0 0 40px rgba(0,136,204,.06);
  --glow-teal-sm:0 0 12px rgba(0,136,204,.18);
  --glow-cyan:0 0 18px rgba(0,160,160,.12);
  --glow-green:0 0 16px rgba(0,136,68,.12);
  --glow-accent:0 0 20px rgba(208,64,16,.18);

  --surface:var(--glass-1);
  --surface2:var(--glass-2);
  --surface3:var(--glass-3)
}

/* ── Light: page background & aurora ───────────────────────── */
[data-theme="light"] body{
  background:#f0f6ff;
  color:#0e2a4a
}
[data-theme="light"] body::before{
  background:
    radial-gradient(ellipse 140% 80% at -10% -20%,rgba(100,180,255,.28) 0%,transparent 55%),
    radial-gradient(ellipse 80%  60% at 110% 5%, rgba(0,190,220,.16) 0%,transparent 48%),
    radial-gradient(ellipse 60%  70% at 20% 110%,rgba(140,190,255,.20) 0%,transparent 55%),
    radial-gradient(ellipse 90%  80% at 85% 80%, rgba(180,220,255,.14) 0%,transparent 55%),
    linear-gradient(160deg,#e8f4ff 0%,#f0f8ff 40%,#e4eef8 100%) !important
}
[data-theme="light"] body::after{
  background-image:radial-gradient(circle,rgba(0,120,200,.05) 1px,transparent 1px) !important;
  background-size:32px 32px !important
}

/* ── Light: Header & Sidebar ────────────────────────────────── */
[data-theme="light"] header{
  background:rgba(255,255,255,.80) !important;
  border-bottom:1px solid rgba(0,100,180,.12) !important;
  box-shadow:0 2px 20px rgba(0,60,140,.08) !important
}
[data-theme="light"] .side-nav{
  background:rgba(255,255,255,.72) !important;
  border-right:1px solid rgba(0,100,180,.12) !important
}

/* ── Light: Loading overlay ─────────────────────────────────── */
[data-theme="light"] #loadingOverlay{background:rgba(240,246,255,.95) !important}

/* ── Light: Page tabs ───────────────────────────────────────── */
[data-theme="light"] .page-tab{color:var(--text2) !important}
[data-theme="light"] .page-tab:hover{background:rgba(0,120,200,.08) !important;border-color:rgba(0,120,200,.25) !important;color:var(--teal) !important}
[data-theme="light"] .page-tab.active{background:rgba(0,120,200,.12) !important;border-color:var(--teal) !important;color:var(--teal) !important;font-size:12.5px !important;font-weight:800 !important;letter-spacing:.5px !important;box-shadow:0 0 14px rgba(0,120,200,.18) !important}

/* ── Light: Sidebar label ───────────────────────────────────── */
[data-theme="light"] .side-nav-label{color:var(--text2) !important;opacity:.65}
[data-theme="light"] .side-nav-divider{background:linear-gradient(90deg,transparent,rgba(0,120,200,.22),transparent) !important}
[data-theme="light"] .side-nav-divider-yellow{background:linear-gradient(90deg,transparent,rgba(180,130,0,.40),transparent) !important;box-shadow:none !important}
[data-theme="light"] .side-nav-divider-orange{background:linear-gradient(90deg,transparent,rgba(210,80,20,.38),transparent) !important;box-shadow:none !important}

/* ── Light: Login box ───────────────────────────────────────── */
[data-theme="light"] #pwOverlay{background:linear-gradient(135deg,#deeeff 0%,#e8f4ff 50%,#d8ecff 100%) !important}
[data-theme="light"] .pw-box{background:rgba(255,255,255,.84) !important;border-color:rgba(0,120,200,.22) !important;box-shadow:0 20px 60px rgba(0,60,140,.14),inset 0 1px 0 rgba(255,255,255,.90) !important}
[data-theme="light"] .pw-input{background:rgba(255,255,255,.70) !important;border-color:rgba(0,120,200,.20) !important;color:var(--text)}
[data-theme="light"] .pw-input::placeholder{color:var(--muted)}
[data-theme="light"] .pw-label{color:var(--teal) !important}

/* ── Light: Panels / cards ──────────────────────────────────── */
[data-theme="light"] .billing-card,
[data-theme="light"] .lic-card,
[data-theme="light"] .panel,
[data-theme="light"] .rpt-panel,
[data-theme="light"] .pred-panel,
[data-theme="light"] .audit-stat,
[data-theme="light"] .pred-stat{
  background:rgba(255,255,255,.68) !important;
  border-color:rgba(0,100,180,.14) !important
}
[data-theme="light"] .billing-card:hover,
[data-theme="light"] .lic-card:hover{
  background:rgba(255,255,255,.85) !important;
  border-color:rgba(0,120,200,.28) !important
}

/* ── Light: Table rows ──────────────────────────────────────── */
[data-theme="light"] tbody tr:hover{background:rgba(0,100,180,.04) !important}
[data-theme="light"] thead th{background:rgba(0,100,180,.05) !important;border-color:rgba(0,100,180,.14) !important}

/* ── Light: Inputs & select ─────────────────────────────────── */
[data-theme="light"] .search-input,
[data-theme="light"] .filter-select,
[data-theme="light"] .apps-inline-input,
[data-theme="light"] .budget-input,
[data-theme="light"] .audit-filter-select,
[data-theme="light"] .audit-filter-input,
[data-theme="light"] .scenario-input{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(0,100,180,.18) !important;
  color:var(--text) !important;
  color-scheme:light !important
}

/* ── Light: User chip ───────────────────────────────────────── */
[data-theme="light"] .user-chip{background:rgba(255,255,255,.62) !important;border-color:rgba(0,120,200,.20) !important}
[data-theme="light"] .user-avatar{background:linear-gradient(135deg,#0088cc,#00aa99) !important;color:#fff !important}

/* ── Light: IST clock ───────────────────────────────────────── */
[data-theme="light"] #clockBox{color:#005599 !important}
[data-theme="light"] #clockDigits{color:#0066aa !important;text-shadow:0 0 10px rgba(0,100,180,.35) !important}
[data-theme="light"] .ist-badge{background:rgba(0,100,180,.08) !important;border-color:rgba(0,100,180,.25) !important;color:#005599 !important}

/* ── Light: Notification panel ──────────────────────────────── */
[data-theme="light"] .notif-panel{background:rgba(255,255,255,.95) !important;border-color:rgba(0,100,180,.18) !important}
[data-theme="light"] .notif-item:hover{background:rgba(0,100,180,.05) !important}
[data-theme="light"] .notif-item.unread{background:rgba(0,100,180,.07) !important}

/* ── Light: Brand glow → deep teal ─────────────────────────── */
[data-theme="light"] .brand-eyebrow{
  color:#006ea8 !important;
  text-shadow:0 0 8px rgba(0,120,180,.45),0 0 20px rgba(0,120,180,.20) !important
}
[data-theme="light"] .brand h1 em{
  color:#005f9a !important;
  text-shadow:0 0 10px rgba(0,110,170,.50),0 0 24px rgba(0,110,170,.22) !important;
  animation:none !important
}

/* ── Light: Announcement banner ──────────────────────────────── */
[data-theme="light"] .month-change-banner{background:rgba(0,100,180,.07) !important;border-color:rgba(0,100,180,.18) !important}

/* ── Light: Audit/analytics header ──────────────────────────── */
[data-theme="light"] .rpt-header,
[data-theme="light"] .audit-header{background:rgba(255,255,255,.62) !important;border-color:rgba(0,100,180,.16) !important}
[data-theme="light"] .rpt-title{background:linear-gradient(135deg,#0066aa,#4433aa,#006688) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important}

/* ── Light: Scrollbar ───────────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-track{background:rgba(0,80,160,.05) !important}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,100,180,.20) !important}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,100,180,.35) !important}

/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════ */
.theme-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:20px;
  border:1.5px solid var(--border-teal);
  background:var(--glass-teal2);
  color:var(--teal);
  cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(12px);
  position:relative;overflow:hidden;
  flex-shrink:0
}
.theme-toggle::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);
  pointer-events:none
}
.theme-toggle:hover{
  border-color:var(--teal);
  box-shadow:var(--glow-teal-sm);
  transform:translateY(-1px)
}
.theme-toggle:active{transform:translateY(0)}
.theme-toggle-icon{font-size:13px;line-height:1;transition:transform .3s}
.theme-toggle-label{font-size:10px;font-weight:700;letter-spacing:.8px}

/* Light theme toggle style */
[data-theme="light"] .theme-toggle{
  border-color:rgba(0,120,200,.30) !important;
  background:rgba(255,255,255,.60) !important;
  color:#0066aa !important;
  box-shadow:0 2px 12px rgba(0,100,180,.10)
}
[data-theme="light"] .theme-toggle:hover{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(0,120,200,.50) !important;
  box-shadow:0 4px 16px rgba(0,100,180,.18) !important
}

/* Smooth theme transition */
*{transition:background-color .3s ease,border-color .3s ease,color .2s ease,box-shadow .3s ease !important}
/* Exceptions — no transition on animations/transforms */
.spinner,.brand h1 em,.theme-toggle-icon{transition:none !important}

/* ── SIDEBAR REPORTS DROPDOWN ─────────────────────────────────────────────
   Wraps the existing .side-nav-pred button. When `.open` is added to the
   wrapper, the menu becomes visible. All NEW selectors (no collisions
   with existing rules). The .side-nav-pred button itself keeps its
   existing styling — we only add a chevron rotation when open.          */
.side-nav-pred-wrap{
  position:relative;
  margin-top:auto;
  display:flex;flex-direction:column;
}
.side-nav-pred-wrap .side-nav-pred{
  margin-top:0; /* wrapper now owns the auto top margin */
  width:100%;
  cursor:pointer;
  font:inherit;
  /* Make button look identical to the original <a> */
}
.side-nav-pred-chev{
  margin-left:auto;
  opacity:.7;
  transition:transform .25s ease, opacity .2s;
  flex-shrink:0;
}
.side-nav-pred-wrap.open .side-nav-pred-chev{
  transform:rotate(180deg);
  opacity:1;
}
.side-nav-pred-wrap.open .side-nav-pred{
  background:rgba(0,229,204,.14);
  border-color:var(--teal2);
  box-shadow:
    0 0 18px rgba(0,229,204,.28),
    0 0 40px rgba(0,229,204,.10),
    inset 0 1px 0 rgba(255,255,255,.09);
}
.side-nav-pred-menu{
  position:absolute;
  bottom:calc(100% + 8px);
  left:0;right:0;
  background:rgba(4,16,32,.96);
  backdrop-filter:blur(20px);
  border:1px solid rgba(0,229,204,.30);
  border-radius:12px;
  padding:6px;
  display:none;
  flex-direction:column;
  gap:2px;
  box-shadow:
    0 12px 36px rgba(0,0,0,.55),
    0 0 24px rgba(0,229,204,.18);
  z-index:60;
  animation:none;
}
.side-nav-pred-wrap.open .side-nav-pred-menu{ display:flex; }
.side-nav-pred-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.7px;
  color:var(--text2);text-decoration:none;
  border-radius:8px;
  transition:background .15s, color .15s, transform .15s;
  white-space:nowrap;
}
.side-nav-pred-item svg{ opacity:.7; flex-shrink:0; transition:opacity .15s; }
.side-nav-pred-item:hover{
  background:rgba(0,229,204,.10);
  color:var(--teal2);
  transform:translateX(2px);
}
.side-nav-pred-item:hover svg{ opacity:1; }

/* Mobile collapsed sidebar — hide labels just like the existing button does */
@media (max-width:900px){
  .side-nav-pred-wrap .side-nav-pred span,
  .side-nav-pred-wrap .side-nav-pred-chev{display:none}
  .side-nav-pred-menu{
    /* Open to the right when sidebar is collapsed */
    bottom:auto;
    top:0;
    left:calc(100% + 8px);
    right:auto;
    min-width:160px;
  }
  .side-nav-pred-item span{display:inline} /* keep labels in the popped menu */
}

/* ── MONTHLY BILLING HEADLINE — multi-color spans ─────────────────────────
   Each part of the new heading gets its own color for quick scanability:
     • "Monthly Billing"        — inherits default title color (teal-ish)
     • "—" / "·" separators      — muted gray
     • "Total Payable cost:"    — purple label
     • <month year>             — amber gradient (existing .billing-period-label)
     • "Billing Period:"        — pink label
     • "01st <Month> <YYYY> ..." — green gradient
   Additive only: no existing rules modified.                              */
.apps-page-title .bp-sep{
  color:var(--muted);
  font-weight:400;
  margin:0 4px;
  opacity:.6;
}
.apps-page-title .bp-payable-label{
  color:var(--purple);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.3px;
  text-shadow:0 0 12px rgba(155,127,255,.35);
}
.apps-page-title .bp-period-label{
  color:var(--pink);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.3px;
  text-shadow:0 0 12px rgba(255,91,163,.35);
}
.apps-page-title .bp-period-range{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.2px;
  /* Multi-color rainbow gradient matching the "Decisions" screenshot:
     violet → pink → blue → teal-green. 4 color stops for a rich rainbow
     across the whole text. NO filter property (it broke the gradient). */
  background:linear-gradient(90deg,
    #b46cff 0%,     /* violet  */
    #ff5ba3 33%,    /* pink    */
    #4a9eff 66%,    /* blue    */
    #00e5cc 100%    /* teal-green */
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
/* Tighten gradient gaps slightly so the line still flows. On narrow screens
   the title naturally wraps — each colored span stays a coherent unit.   */
@media (max-width:1100px){
  .apps-page-title .bp-payable-label,
  .apps-page-title .bp-period-label,
  .apps-page-title .bp-period-range{font-size:16px}
}

/* ── NARROW VIEWPORT FIXES ────────────────────────────────────────────────
   At ~1100px and below the header/headline wraps awkwardly:
   - Header has fixed height=70px + flex-wrap:wrap → wrapped row overflows
     into page content below.
   - Long colored headline ("Monthly Billing — Total Payable cost… Billing
     Period: 01st April…") doesn't have a clean wrap behaviour.
   This block makes both adapt gracefully. Additive only — original
   wide-screen layout stays exactly as-is at >1100px.                       */
@media (max-width:1280px){
  /* Header: allow vertical growth when content wraps. The original
     `height: var(--header-h)` is overridden to a min-height so the row
     can stretch tall enough to contain wrapped items without overlapping
     the page below. */
  header{
    height:auto !important;
    min-height:var(--header-h);
    padding-top:10px;
    padding-bottom:10px;
    row-gap:10px;
  }
  /* The IST clock + LIGHT button + bell + user chip + sign out + search
     pile up on row 2; give them a tighter gap so they fit on smaller widths. */
  header > *{flex-shrink:1;min-width:0}

  /* Headline: shrink the gradient title and let it wrap as multiple lines.
     Each colored span stays a coherent unit — the line break happens at
     natural word boundaries between spans. */
  .apps-page-title{
    font-size:22px;
    line-height:1.35;
  }
  /* The new color-coded labels become block-ish on narrow widths so they
     stack cleanly instead of running off the right edge. */
  .apps-page-title .bp-sep{display:inline}
  /* Top breathing room for the page-header card so it doesn't kiss the
     (now potentially taller) sticky header above. */
  .apps-page-header{margin-top:14px}
}

/* Even narrower: full mobile stack — kill horizontal cramming entirely.
   The headline becomes 18px and each label/value is allowed to wrap onto
   its own line via natural inline-block overflow. */
@media (max-width:760px){
  .apps-page-title{font-size:18px;line-height:1.4}
  .apps-page-title .bp-payable-label,
  .apps-page-title .bp-period-label,
  .apps-page-title .bp-period-range{font-size:14px}
  /* Ensure the date range itself doesn't cause horizontal scroll */
  .apps-page-title .bp-period-range{
    display:inline-block;
    max-width:100%;
    word-break:break-word;
  }
}

/* ── ROOT CAUSE FIX: header grid-row overflow at narrow widths ────────────
   The body grid uses `grid-template-rows: var(--header-h) 1fr` which
   RESERVES exactly 70px for the header row. When header content wraps to
   2 lines (narrow viewport), the header is visually 140px tall but the
   grid row is still 70px — the wrapped content overflows DOWNWARD into
   the main content area, causing the headline-overlap-header bug.

   Fix: at ≤1100px, make the header row auto-sized so it grows with its
   content and properly pushes main-content below.                          */
@media (max-width:1100px){
  body{
    grid-template-rows: auto 1fr;
  }
  /* Also tame the wide elements that cause the wrap in the first place: */
  .search-input{
    max-width:280px;
    flex:1 1 180px;
  }
  .ist-clock{
    flex-shrink:1;
    min-width:0;
  }
  /* Header content gets a sane min-gap when wrapping */
  header{
    row-gap:8px;
  }
}