/* ==========================================================
   NAYANET Billing — light theme, purple brand accent
   (background/surface tokens keep their original --navy-* names
   for compatibility with every page that already references them;
   only the values changed, plus a new --brand accent was added.)
   ========================================================== */

:root{
  --navy-950:#F5F6FB;   /* page background */
  --navy-900:#FFFFFF;   /* card / sidebar / topbar surface */
  --navy-800:#F6F6FC;   /* subtle inner surface (table header, stat inner) */
  --navy-700:#EFEBFF;   /* soft brand-tinted surface (avatar bg, etc.) */
  --line:#E7E8F2;
  --line-soft:#EFF0F7;
  --text:#1E2233;
  --muted:#7B8098;

  --brand:#6D5BD0;
  --brand-dark:#5B4BC4;
  --brand-light:#EFEBFF;
  --brand-ink:#FFFFFF;
  --brand-border:#E1DBFB;

  --signal:#16A34A;       /* success / paid / active */
  --signal-ink:#FFFFFF;
  --signal-dim:#8FD4A8;

  --amber:#D97706;        /* warning / partial / suspended */
  --amber-ink:#FFFFFF;
  --amber-dim:#EFBE80;

  --danger:#E11D48;       /* critical / unpaid / inactive / overdue */
  --danger-ink:#FFFFFF;
  --danger-dim:#F2A0B4;

  --info:#2563EB;         /* advance / informational */
  --info-dim:#9DBBF6;

  --shadow-card:0 1px 2px rgba(30,34,51,0.05), 0 14px 32px -16px rgba(30,34,51,0.16);
  --shadow-pop:0 6px 16px -6px rgba(109,91,208,.35);
  --shadow-lift:0 18px 40px -18px rgba(30,34,51,.22);

  --radius:16px;
  --radius-sm:10px;
  --sidebar-w:250px;
}

/* ---------------- Color themes (Settings > Theme) ----------------
   Only the --brand-* accent variables change per theme — status colors
   (--signal/--danger/--amber/--info, used for paid/unpaid/etc. badges)
   are intentionally untouched so their meaning stays consistent no
   matter which theme is active. */
[data-theme="blue"]{
  --brand:#0EA5E9;
  --brand-dark:#0284C7;
  --brand-light:#E0F2FE;
  --brand-ink:#FFFFFF;
  --brand-border:#BAE6FD;
}
[data-theme="green"]{
  --brand:#059669;
  --brand-dark:#047857;
  --brand-light:#D1FAE5;
  --brand-ink:#FFFFFF;
  --brand-border:#A7F3D0;
}
[data-theme="orange"]{
  --brand:#EA580C;
  --brand-dark:#C2410C;
  --brand-light:#FFEDD5;
  --brand-ink:#FFFFFF;
  --brand-border:#FED7AA;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--navy-950);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; margin:0 0 4px; line-height:1.12; letter-spacing:-0.02em; font-weight:700; color:var(--text);}
a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}
.mono{font-family:'JetBrains Mono',monospace;}
::selection{background:var(--brand); color:#fff;}

/* ---------------- Layout shell ---------------- */

.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--navy-900); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; overflow-y:auto;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding:22px 20px; border-bottom:1px solid var(--line);
  font-family:'Space Grotesk'; font-weight:700; font-size:18px; color:var(--text);
}
.sidebar .brand .mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg, var(--brand), #8B7CF0);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk'; font-weight:700; color:var(--brand-ink); font-size:15px;
}
.sidebar .brand small{display:block; font-family:'Inter'; font-weight:500; font-size:11px; color:var(--muted); margin-top:1px;}

.nav-group{padding:16px 12px;}
.nav-label{font-family:'JetBrains Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); padding:8px 12px 6px;}
.nav-link{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:var(--radius-sm);
  color:var(--muted); font-weight:500; font-size:14px; margin-bottom:2px;
}
.nav-link svg{width:17px; height:17px; flex-shrink:0;}
.nav-link:hover{background:var(--navy-800); color:var(--text); text-decoration:none;}
.nav-link.active{background:var(--brand-light); color:var(--brand); border:1px solid var(--brand-border);}

.sidebar .sidebar-foot{margin-top:auto; padding:16px; border-top:1px solid var(--line);}
.who{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.who .av{width:32px; height:32px; border-radius:50%; background:var(--brand-light); border:1px solid var(--brand-border); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--brand); font-family:'Space Grotesk';}
.who .name{font-size:13px; font-weight:600; color:var(--text);}
.who .role{font-size:11px; color:var(--muted);}

.main{margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px; border-bottom:1px solid var(--line);
  background:var(--navy-900);
  position:sticky; top:0; z-index:5;
}
.topbar .crumb{font-family:'JetBrains Mono'; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin-bottom:5px; opacity:.85;}
.topbar h1{font-size:27px; letter-spacing:-0.025em;}
/* Minimal topbar variant: breadcrumb, page title, CRM link and admin
   badge removed site-wide — only Log Out stays, so the bar is shorter. */
.topbar.topbar-minimal{padding:12px 32px; justify-content:flex-end;}
.content{padding:28px 32px 64px; max-width:none; width:100%;}

/* ---------------- Page transition effect ---------------- */
/* Every page load fades the content in; app.js briefly fades it out
   just before following a sidebar link, so switching sections feels
   like one smooth transition instead of an abrupt reload. */
.content{animation:pageFadeIn .32s ease both;}
.content.page-leaving{animation:pageFadeOut .14s ease both;}
@keyframes pageFadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
@keyframes pageFadeOut{from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(-4px);}}
@media (prefers-reduced-motion: reduce){
  .content, .content.page-leaving{animation:none !important;}
}

/* ---------------- Skeleton loader ---------------- */
/* Shown for a beat over the content area while a sidebar link is
   navigating, so the screen never goes blank between pages — a soft
   shimmer instead of a flash of empty white. Built from generic
   placeholder blocks (not tied to any one page's layout) and removed
   automatically once the new page finishes loading. */
.page-skeleton-overlay{
  position:fixed; top:0; right:0; bottom:0; left:var(--sidebar-w);
  background:var(--navy-950); z-index:40;
  padding:28px 32px 64px; overflow:hidden;
  opacity:0; animation:pageFadeIn .22s ease both;
}
@media (max-width:900px){ .page-skeleton-overlay{left:230px;} }
@media (max-width:700px){ .page-skeleton-overlay{left:0;} }
.skeleton{
  border-radius:8px; position:relative; overflow:hidden;
  background:#EDEEF7;
}
.skeleton:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform:translateX(-100%);
  animation:skeletonShimmer 1.3s ease-in-out infinite;
}
@keyframes skeletonShimmer{ to{ transform:translateX(100%); } }
.skeleton-title{height:24px; width:220px; margin-bottom:24px;}
.skeleton-card{height:96px; border-radius:var(--radius-sm); margin-bottom:14px;}
.skeleton-row{height:48px; border-radius:8px; margin-bottom:8px;}
.skeleton-row:nth-child(3){width:96%;}
.skeleton-row:nth-child(4){width:88%;}
@media (prefers-reduced-motion: reduce){
  .page-skeleton-overlay{animation:none !important; opacity:1;}
  .skeleton:after{animation:none !important; display:none;}
}

/* ---------------- Cards / grid ---------------- */

.card{
  background:var(--navy-900); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow-card);
}
.grid{display:grid; gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1100px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} }
.grid-charts{grid-template-columns:1.6fr 1fr;}
@media (max-width:900px){ .grid-charts{grid-template-columns:1fr;} }

.stat-card{padding:18px 20px;}
.stat-card .lbl{font-family:'JetBrains Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:10px;}
.stat-card .val{font-family:'Space Grotesk'; font-size:26px; font-weight:700; color:var(--text);}
.stat-card .val.signal{color:var(--signal);}
.stat-card .val.amber{color:var(--amber);}
.stat-card .val.danger{color:var(--danger);}
.stat-card .sub{font-size:12px; color:var(--muted); margin-top:6px;}
.stat-card .delta{font-size:12px; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:4px;}
.stat-card .delta.up{color:var(--signal);}
.stat-card .delta.down{color:var(--danger);}
.stat-card .icon-badge{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-light); color:var(--brand); margin-bottom:12px;
}
.stat-card .icon-badge svg{width:19px; height:19px;}

.section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:12px; flex-wrap:wrap;}
.section-head h2{font-size:23px; font-weight:700; letter-spacing:-0.02em;}
.section-head p{color:var(--muted); font-size:13px; margin:4px 0 0; line-height:1.45;}

/* ---------------- Buttons ---------------- */

.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:10px 16px; border-radius:var(--radius-sm); border:1px solid transparent;
  font-family:'Inter'; font-weight:600; font-size:13.5px; cursor:pointer;
  text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;}
/* Press feedback: a quick, small shrink-and-settle so a click always
   reads as registered — snappier transition than hover, on purpose. */
.btn:active{transform:scale(.96); box-shadow:none; transition:transform .07s ease;}
@media (prefers-reduced-motion: reduce){
  .btn{transition:background .15s ease, border-color .15s ease;}
  .btn:hover, .btn:active{transform:none;}
}
.btn-signal{background:linear-gradient(155deg, var(--brand), var(--brand-dark)); color:var(--brand-ink); box-shadow:0 2px 6px rgba(109,91,208,.28);}
.btn-signal:hover{background:linear-gradient(155deg, var(--brand-dark), var(--brand-dark)); transform:translateY(-1px); box-shadow:var(--shadow-pop);}
.btn-amber{background:var(--amber); color:var(--amber-ink);}
.btn-amber:hover{background:#C36C05; transform:translateY(-1px);}
.btn-outline{background:#fff; color:var(--text); border-color:var(--line); box-shadow:0 1px 2px rgba(30,34,51,.03);}
.btn-outline:hover{background:var(--navy-800); border-color:#D9DBEA; transform:translateY(-1px);}
.btn-danger{background:#fff; color:var(--danger); border-color:var(--danger-dim);}
.btn-danger:hover{background:var(--danger); color:var(--danger-ink); border-color:var(--danger); transform:translateY(-1px);}
.btn-sm{padding:7px 13px; font-size:12.5px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important;}
/* Consistent action groups inside table rows and toolbars — buttons never wrap mid-group and stay evenly spaced. */
.actions-group{display:inline-flex; align-items:center; gap:6px; flex-wrap:nowrap;}

/* ---------------- Forms ---------------- */

label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.03em;}
.field{margin-bottom:16px;}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], select, textarea{
  width:100%; background:#fff; border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-sm); padding:11px 13px; font-size:14px; font-family:'Inter';
}
textarea{resize:vertical; min-height:80px;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light);}
.form-row{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media (max-width:640px){ .form-row{grid-template-columns:1fr;} }
.help-text{font-size:11.5px; color:var(--muted); margin-top:5px; text-transform:none;}
.radio-group{display:flex; gap:10px; flex-wrap:wrap;}
.radio-pill{
  border:1px solid var(--line); border-radius:100px; padding:8px 16px; background:#fff;
  font-size:13px; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:7px;
}
.radio-pill input{width:auto;}
.radio-pill.checked{border-color:var(--brand); color:var(--text); background:var(--brand-light);}
.radio-pill:has(input[type=checkbox]:checked){border-color:var(--brand); color:var(--text); background:var(--brand-light);}
.theme-dot{width:14px; height:14px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px rgba(0,0,0,0.06) inset;}

/* ---------------- Searchable select (combobox) ---------------- */
/* Wraps a normal <select> with a type-to-filter text input. The select
   itself stays in the DOM (hidden with display:none) so name=/value and
   any other JS that reads it keep working unchanged — see
   initSearchableSelect() in app.js. display:none also means the browser
   skips its own "required" validation (a not-rendered field is not a
   constraint-validation candidate), so initSearchableSelect() enforces
   required itself and puts the focus/invalid state on the visible input
   instead of an odd bubble anchored to a hidden element. */
.combo-select{position:relative;}
.combo-select select{display:none;}
.combo-select-input{cursor:text;}
.combo-select.invalid .combo-select-input{border-color:var(--danger); box-shadow:0 0 0 3px rgba(225,29,72,.12);}
.combo-select-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card); max-height:264px; overflow-y:auto; display:none;
}
.combo-select-list.open{display:block;}
.combo-select-option{padding:10px 13px; font-size:13.5px; cursor:pointer; color:var(--text);}
.combo-select-option:hover, .combo-select-option.active{background:var(--navy-800);}
.combo-select-option.selected{color:var(--brand); font-weight:600;}
.combo-select-empty{padding:10px 13px; font-size:13px; color:var(--muted);}

/* ---------------- Tables ---------------- */

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--navy-900); box-shadow:var(--shadow-card);}
table{width:100%; border-collapse:collapse; min-width:640px;}
thead th{
  text-align:left; font-family:'JetBrains Mono'; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--muted); padding:15px 18px; background:var(--navy-800);
  border-bottom:2px solid var(--line); white-space:nowrap;
}
thead th:first-child{border-top-left-radius:var(--radius);}
thead th:last-child{border-top-right-radius:var(--radius);}
tbody td{padding:15px 18px; border-bottom:1px solid var(--line-soft); font-size:13.5px; vertical-align:middle; color:var(--text);}
tbody tr{transition:background-color .12s ease;}
tbody tr:last-child td{border-bottom:none;}
/* Zebra striping — a hair of tint on alternate rows so long lists stay easy to
   scan without adding extra borders. Declared before :hover so hover always wins. */
tbody tr:nth-child(even){background:var(--navy-950);}
tbody tr:hover{background:var(--brand-light);}
/* Marks the row for whichever month/record is currently selected/active
   (e.g. Monthly Billing's per-month overview table). Beats the zebra
   stripe and loses to :hover, same precedence pattern as the rest. */
tbody tr.row-active{background:var(--brand-light); box-shadow:inset 3px 0 0 var(--brand);}
.tbl-name{font-weight:600; color:var(--text);}
.tbl-sub{font-size:12px; color:var(--muted); margin-top:2px;}
/* Numeric / money columns read clearer right-aligned, digits lining up top to bottom. */
th.text-right, td.text-right{text-align:right;}
/* Action column — buttons hug the right edge of the table so every row's
   controls sit in exactly the same place. */
th.col-actions, td.col-actions{text-align:right;}
td.col-actions .actions-group, td.col-actions.flex{justify-content:flex-end;}
/* Tighter columns for wide tables (e.g. Customers) so everything fits without a horizontal scrollbar cutting off action buttons. */
/* "Compact" still means tighter than the default table (long lists like
   Customers need to fit more rows on screen), but not cramped — enough
   vertical rhythm that each row reads clearly and names/sub-lines don't
   feel squeezed together. */
.table-compact thead th{padding:13px 14px; font-size:10.5px;}
.table-compact tbody td{padding:13px 14px; font-size:13px; line-height:1.45;}
.table-compact .tbl-name{font-size:13.5px;}
.table-compact .tbl-sub{margin-top:3px;}
.table-compact .btn-sm{padding:6px 11px; font-size:12px;}

/* ---------------- Badges ---------------- */

.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px 4px 10px; border-radius:100px;
  font-size:11.5px; font-weight:700; font-family:'JetBrains Mono'; white-space:nowrap;
}
.badge:before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto;}

/* Phone/CNIC values recovered from a corrupted (scientific-notation) import —
   flagged rather than shown as ordinary, trustworthy contact data. Rendered
   as a small chip with a crisp masked SVG icon (matching .copy-icon's
   technique) instead of a raw emoji glyph, so it renders identically across
   OSes/browsers instead of falling back to a mismatched native icon color. */
.contact-unverified{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(217,119,6,.10); color:var(--amber); border:1px solid rgba(217,119,6,.22);
  padding:3px 9px 3px 7px; border-radius:100px;
  font-size:12px; font-weight:600; font-style:normal; font-family:'JetBrains Mono';
  cursor:help; white-space:nowrap; line-height:1.3;
}
.contact-unverified .warn-icon{
  width:11px; height:11px; flex:0 0 auto; background-color:var(--amber);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------------- Click-to-copy data fields ---------------- */
/* Phone numbers, IDs, invoice numbers, serials: click anywhere on the
   value (no need to select text) to copy it. A copy icon fades in on
   hover; clicking swaps it to a checkmark and flashes a small "Copied"
   tooltip. See copyable()/fmt_contact_value() in includes/functions.php. */
.copyable{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; border-radius:6px; padding:2px 5px; margin:-2px -5px;
  transition:background .15s ease;
}
.copyable:hover{background:var(--navy-800);}
.copy-icon{
  width:12px; height:12px; flex:none; opacity:0;
  background-color:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") no-repeat center / contain;
  transition:opacity .15s ease, background-color .15s ease;
}
.copyable:hover .copy-icon{opacity:.6;}
.copyable.copied{background:rgba(31,169,113,.10);}
.copyable.copied .copy-icon{
  opacity:1; background-color:#1fa971;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.copy-tooltip{
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%) translateY(-3px);
  background:var(--text); color:#fff; font-size:10.5px; font-weight:600; letter-spacing:.01em;
  padding:3px 8px; border-radius:6px; white-space:nowrap; pointer-events:none; z-index:20;
  opacity:0; animation:copyTooltipIn .16s ease forwards, copyTooltipOut .18s ease 850ms forwards;
}
@keyframes copyTooltipIn{ from{opacity:0; transform:translateX(-50%) translateY(2px);} to{opacity:1; transform:translateX(-50%) translateY(-3px);} }
@keyframes copyTooltipOut{ to{opacity:0;} }
@media (prefers-reduced-motion: reduce){
  .copy-tooltip{animation:none; opacity:1;}
  .copyable, .copy-icon{transition:none;}
}
.badge-paid{background:rgba(22,163,74,0.12); color:var(--signal); border:1px solid var(--signal-dim);}
.badge-unpaid{background:rgba(225,29,72,0.10); color:var(--danger); border:1px solid var(--danger-dim);}
.badge-partial{background:rgba(217,119,6,0.12); color:var(--amber); border:1px solid var(--amber-dim);}
.badge-advance{background:rgba(37,99,235,0.10); color:var(--info); border:1px solid var(--info-dim);}
.badge-active{background:rgba(22,163,74,0.12); color:var(--signal); border:1px solid var(--signal-dim);}
.badge-suspended{background:rgba(217,119,6,0.12); color:var(--amber); border:1px solid var(--amber-dim);}
.badge-inactive{background:var(--navy-800); color:var(--muted); border:1px solid var(--line);}
.badge-expired{background:var(--danger); color:#fff; border:1px solid var(--danger);}

.exp-pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:100px; font-size:11px; font-weight:600; font-family:'JetBrains Mono'; white-space:nowrap; cursor:default;}
.exp-pill .exp-dot{width:6px; height:6px; border-radius:50%; flex:none;}
.exp-ok{background:var(--navy-800); color:var(--text); border:1px solid var(--line);}
.exp-ok .exp-dot{background:var(--signal);}
.exp-soon{background:rgba(217,119,6,0.10); color:var(--amber); border:1px solid var(--amber-dim);}
.exp-soon .exp-dot{background:var(--amber);}
.exp-over{background:rgba(225,29,72,0.10); color:var(--danger); border:1px solid var(--danger-dim);}
.exp-over .exp-dot{background:var(--danger);}
.danger-text{color:var(--danger)!important;font-weight:700;}
.amber-text{color:var(--amber)!important;font-weight:700;}

/* ---------------- Filters / search bar ---------------- */
/* A visually distinct toolbar strip — filters should never be mistaken for
   part of the table below them, so it gets its own tinted surface, border
   and radius, exactly like a mini card. */
.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center;
  background:var(--navy-800); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px;
}
.filter-bar select, .filter-bar input{width:auto; min-width:150px; background:#fff;}
.filter-bar .search-box{flex:1; min-width:200px;}
.filter-bar .filter-spacer{flex:1;}
/* Secondary links (export, etc.) tucked into the same toolbar so there's one
   obvious strip for "everything about this list" instead of several. */
.filter-bar .toolbar-secondary{display:flex; gap:8px; margin-left:auto; flex-wrap:wrap;}
.chip-tabs{display:flex; gap:8px; flex-wrap:wrap;}
.chip-tab{padding:8px 14px; border-radius:100px; border:1px solid var(--line); color:var(--muted); font-size:12.5px; font-weight:600; background:#fff; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.chip-tab:hover{border-color:var(--brand-border); color:var(--text); text-decoration:none;}
.chip-tab.active{background:var(--brand-light); color:var(--brand); border-color:var(--brand-border);}

/* ---------------- Alerts / flash ---------------- */

.alert{padding:13px 16px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:13.5px; border:1px solid transparent;}
.alert-success{background:rgba(22,163,74,0.08); border-color:var(--signal-dim); color:#0F7A38;}
.alert-error{background:rgba(225,29,72,0.08); border-color:var(--danger-dim); color:#B7123B;}
.alert-info{background:rgba(217,119,6,0.08); border-color:var(--amber-dim); color:#A15F04;}

/* ---------------- Quick-action modal (e.g. Upstream Bills "Pay") ---------------- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(15,17,29,0.55);
  z-index:100; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  position:relative; background:#fff; border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow-card); width:100%; max-width:420px;
  animation:authCardIn .25s cubic-bezier(.2,.8,.2,1) both;
}
.modal-box h3{font-size:16px; margin:0 0 4px; color:var(--text);}
.modal-box .modal-sub{color:var(--muted); font-size:12.5px; margin:0 0 18px;}
.modal-close{
  position:absolute; top:16px; right:16px; cursor:pointer; color:var(--muted);
  font-size:12.5px; background:none; border:none; padding:0;
}
.modal-close:hover{color:var(--text);}

/* ---------------- Auth (login) pages ---------------- */

.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(circle at 20% 20%, #EDE9FE 0%, var(--navy-950) 60%); position:relative; overflow:hidden;}
.auth-card{width:100%; max-width:400px; background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; box-shadow:var(--shadow-card); position:relative; z-index:1; animation:authCardIn .65s cubic-bezier(.2,.8,.2,1) both;}
.auth-card .brand{display:flex; align-items:center; gap:11px; justify-content:center; margin-bottom:22px; font-family:'Space Grotesk'; font-weight:700; font-size:20px;}
.auth-card .brand .mark{width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg, var(--brand), #8B7CF0); display:flex; align-items:center; justify-content:center; color:var(--brand-ink); font-weight:700; animation:authMarkPulse 2.6s ease-in-out infinite;}
.auth-card h1{font-size:19px; text-align:center; margin-bottom:4px;}
.auth-card p.sub{text-align:center; color:var(--muted); font-size:13px; margin-bottom:22px;}
.auth-card .field{animation:authFieldIn .5s ease both;}
.auth-card .field:nth-of-type(1){animation-delay:.08s;}
.auth-card .field:nth-of-type(2){animation-delay:.16s;}
.auth-card input[type=email], .auth-card input[type=password]{transition:border-color .2s ease, box-shadow .2s ease;}
.auth-foot{text-align:center; margin-top:16px; font-size:12.5px; color:var(--muted); animation:authFieldIn .5s ease .3s both;}

/* Soft floating glow orbs behind the auth card — purely decorative, sits
   under the wallpaper overlay too since it's positioned before .auth-card
   in source order and z-index:0. */
.auth-orb{position:absolute; z-index:0; border-radius:50%; filter:blur(60px); pointer-events:none; animation:authFloat 11s ease-in-out infinite;}
.auth-orb-1{width:340px; height:340px; background:radial-gradient(circle, var(--brand) 0%, transparent 70%); opacity:.55; top:-90px; left:-70px; animation-duration:12s;}
.auth-orb-2{width:280px; height:280px; background:radial-gradient(circle, #8B7CF0 0%, transparent 70%); opacity:.5; bottom:-110px; right:-50px; animation-duration:15s; animation-delay:-5s;}
.auth-orb-3{width:220px; height:220px; background:radial-gradient(circle, #34D399 0%, transparent 70%); opacity:.35; top:38%; right:12%; animation-duration:13s; animation-delay:-9s;}

/* Small glowing dots that continuously drift upward across the whole
   screen — the visible "moving" effect layered on top of the slow orbs.
   Each .auth-particle gets its own left position / size / speed / delay
   inline from login.php so they don't all move in lockstep. */
.auth-particle{position:absolute; z-index:0; bottom:-20px; border-radius:50%; background:#fff; pointer-events:none; animation:authParticleRise linear infinite;}

@keyframes authCardIn{
  from{opacity:0; transform:translateY(26px) scale(.97);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes authFieldIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes authMarkPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(124,108,240,.45);}
  50%{box-shadow:0 0 0 9px rgba(124,108,240,0);}
}
@keyframes authFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(46px,-38px) scale(1.12);}
  66%{transform:translate(-34px,32px) scale(.92);}
}
@keyframes authParticleRise{
  0%{transform:translate(0,0) scale(.6); opacity:0;}
  10%{opacity:.8;}
  90%{opacity:.5;}
  100%{transform:translate(var(--drift,20px), -110vh) scale(1); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .auth-card, .auth-card .field, .auth-foot, .auth-card .brand .mark, .auth-orb, .auth-particle{animation:none;}
  .auth-orb, .auth-particle{display:none;}
}

/* ---------------- Misc ---------------- */

.muted{color:var(--muted);}
.text-signal{color:var(--signal);}
.text-danger{color:var(--danger);}
.text-amber{color:var(--amber);}
.text-right{text-align:right;}
.text-center{text-align:center;}
.flex{display:flex; align-items:center;}
.gap-8{gap:8px;} .gap-12{gap:12px;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
hr.sep{border:none; border-top:1px solid var(--line); margin:20px 0;}
.empty-state{padding:50px 20px; text-align:center; color:var(--muted);}
.empty-state svg{width:40px; height:40px; margin-bottom:12px; opacity:.6;}
.pill-count{background:var(--navy-800); border:1px solid var(--line); border-radius:100px; padding:2px 10px; font-size:11.5px; color:var(--muted); font-family:'JetBrains Mono';}

/* ---------------- Dashboard charts ---------------- */

.chart-card{padding:20px;}
.chart-card .section-head{margin-bottom:18px;}

/* Bar chart: thin capped bars, 4px rounded top, square baseline,
   hairline gridlines, one hue (brand) since it's a single series. */
.bar-chart{position:relative; height:170px; padding-top:6px;}
.bar-chart .gridlines{position:absolute; inset:6px 0 28px 0; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none;}
.bar-chart .gridlines span{border-top:1px solid var(--line-soft); display:block; height:0;}
.bar-chart .bars{position:relative; height:100%; display:flex; align-items:flex-end; gap:14px; padding:0 4px;}
.bar-chart .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative;}
.bar-chart .bar{
  width:22px; max-width:60%; background:var(--brand); border-radius:4px 4px 0 0;
  transition:background .15s; cursor:default; position:relative;
}
.bar-chart .bar:hover{background:var(--brand-dark);}
.bar-chart .bar-label{position:absolute; bottom:calc(100% + 28px); left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--text); color:#fff; font-size:11.5px; font-family:'JetBrains Mono'; padding:4px 8px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .12s;}
.bar-chart .bar-col:hover .bar-label{opacity:1;}
.bar-chart .month-label{margin-top:8px; font-size:11px; color:var(--muted); font-family:'JetBrains Mono';}

/* Radial meter (single-value gauge) */
.meter-wrap{display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;}
.meter-ring{position:relative; width:132px; height:132px; flex-shrink:0;}
.meter-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.meter-ring .meter-track{fill:none; stroke:var(--line); stroke-width:11;}
.meter-ring .meter-fill{fill:none; stroke-width:11; stroke-linecap:round; transition:stroke-dashoffset .3s;}
.meter-ring .meter-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.meter-ring .meter-pct{font-family:'Space Grotesk'; font-size:24px; font-weight:700; color:var(--text);}
.meter-ring .meter-tag{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
.meter-legend{font-size:13px; color:var(--muted);}
.meter-legend .row{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.meter-legend .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.meter-legend strong{color:var(--text); font-family:'Space Grotesk';}

/* ---------------- Invoice (screen) ---------------- */

.invoice-box{background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius); padding:34px; max-width:820px; margin:0 auto; box-shadow:var(--shadow-card);}
.invoice-top{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:28px; flex-wrap:wrap;}
.invoice-meta{text-align:right;}
.invoice-meta .num{font-family:'JetBrains Mono'; font-size:15px; font-weight:700; color:var(--brand);}
.invoice-parties{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px;}
.invoice-parties h4{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:8px;}
.invoice-totals{margin-left:auto; max-width:320px; margin-top:14px;}
.invoice-totals .row{display:flex; justify-content:space-between; padding:7px 0; font-size:13.5px;}
.invoice-totals .row.grand{border-top:1px solid var(--line); margin-top:6px; padding-top:12px; font-size:17px; font-weight:700; font-family:'Space Grotesk'; color:var(--text);}

/* The invoice item table only has 2 columns — it doesn't need the wide
   admin-table min-width, and that min-width was forcing a horizontal
   scrollbar (visible as a stray bar, and clipping the Amount column)
   on narrower screens and when printed. */
.invoice-box .table-wrap{overflow-x:visible;}
.invoice-box table{min-width:0; width:100%;}

@media print{
  .sidebar, .topbar, .no-print{display:none !important;}
  .main{margin-left:0 !important;}
  body{background:#fff;}
  .invoice-box{border:none; box-shadow:none; max-width:100%; background:#fff;}
  .badge{border:1px solid #999; background:#fff !important;}
  .table-wrap{overflow-x:visible !important;}
  table{min-width:0 !important;}
}

/* Dashboard premium layer */
.dash-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px;padding:28px 30px;border-radius:20px;color:#fff;background:linear-gradient(135deg,var(--brand) 0%,#7D6AE2 52%,#9A8CF2 100%);box-shadow:0 18px 42px -24px rgba(91,75,196,.55)}
.dash-hero:after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-120px;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:-80px 150px 0 10px rgba(255,255,255,.05)}
.dash-hero h2{font-size:28px;margin-bottom:7px;position:relative;z-index:1}.dash-hero p{margin:0;color:rgba(255,255,255,.78);font-size:13.5px;position:relative;z-index:1}
.eyebrow{font-family:'JetBrains Mono';font-size:10px;font-weight:700;letter-spacing:.12em;margin-bottom:8px;opacity:.78}.muted-eyebrow{color:var(--brand);opacity:1}
.hero-actions{display:flex;gap:9px;position:relative;z-index:2;flex-shrink:0}.btn-light{background:#fff;color:var(--brand);border-color:#fff}.btn-light:hover{background:#F7F5FF;transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(0,0,0,.35)}.btn-ghost-light{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.35)}.btn-ghost-light:hover{background:rgba(255,255,255,.18);color:#fff;transform:translateY(-1px)}
.dash-kpis{margin-bottom:22px}.kpi-card{position:relative;overflow:hidden;min-height:174px;transition:transform .18s,box-shadow .18s}.kpi-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(30,34,51,.25)}.kpi-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--brand)}.kpi-success:before{background:var(--signal)}.kpi-warning:before{background:var(--amber)}.kpi-danger:before{background:var(--danger)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.kpi-top .icon-badge{margin:0;width:42px;height:42px;border-radius:12px}.kpi-tag{font-size:10px;font-weight:700;color:var(--muted);background:var(--navy-800);padding:5px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:.05em}.kpi-card .lbl{margin-bottom:5px}.kpi-card .val{font-size:29px}
.dash-main-grid{margin-bottom:22px}.chart-card{border-radius:16px}.chart-chip{font-size:11px;color:var(--brand);background:var(--brand-light);border:1px solid var(--brand-border);padding:5px 9px;border-radius:100px;font-family:'JetBrains Mono'}
.enhanced-chart{height:205px}.enhanced-chart .bar{width:28px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,var(--brand),#8C7DEC);box-shadow:0 7px 15px -10px var(--brand)}.enhanced-chart .bar:hover{background:linear-gradient(180deg,var(--brand-dark),var(--brand))}.enhanced-chart .bars{gap:18px}.enhanced-chart .bar-label{bottom:calc(100% + 8px)}
.collection-card{min-height:280px}.meter-ring{width:148px;height:148px}.meter-ring .meter-pct{font-size:27px}.meter-legend .legend-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text);font-weight:700;margin-bottom:10px}.meter-legend .row{margin-bottom:9px}
.dash-section-row{margin-bottom:22px}.compact-head{margin-bottom:12px}.compact-head h2{font-size:18px}.text-link{font-size:12.5px;font-weight:600;color:var(--brand)}.invoice-status-grid{gap:12px}
.status-tile{display:flex;flex-direction:column;min-height:112px;padding:16px 17px;border:1px solid var(--line);border-radius:14px;background:var(--navy-900);box-shadow:var(--shadow-card);transition:transform .16s,border-color .16s}.status-tile:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--brand-border)}.status-tile span{font-size:12px;font-weight:700;color:var(--muted)}.status-tile strong{font-family:'Space Grotesk';font-size:27px;line-height:1.1;margin:8px 0 5px}.status-tile small{font-size:11px;color:var(--muted)}.status-tile.paid{border-top:3px solid var(--signal)}.status-tile.paid strong{color:var(--signal)}.status-tile.unpaid{border-top:3px solid var(--danger)}.status-tile.unpaid strong{color:var(--danger)}.status-tile.partial{border-top:3px solid var(--amber)}.status-tile.partial strong{color:var(--amber)}.status-tile.advance{border-top:3px solid var(--info)}.status-tile.advance strong{color:var(--info)}
.recent-card{border-radius:16px}.dashboard-table tbody tr{transition:background .12s}.dashboard-table tbody tr:hover{background:var(--brand-light)}.dashboard-table .invoice-id{font-weight:700;color:var(--brand)}.customer-cell{display:flex;align-items:center;gap:9px}.customer-avatar{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-light);color:var(--brand);font-weight:800;font-size:11px}.amount-cell{font-family:'JetBrains Mono';font-size:12.5px;font-weight:600}
@media (max-width:800px){.dash-hero{align-items:flex-start;flex-direction:column;padding:23px}.hero-actions{width:100%}.hero-actions .btn{flex:1}}
@media (max-width:560px){.dash-hero h2{font-size:23px}.kpi-card{min-height:0}.enhanced-chart .bars{gap:8px}.enhanced-chart .bar{width:20px}.meter-wrap{gap:14px}}

/* ================= Dashboard Command Center ================= */
.dashboard-v2{max-width:1600px;margin:0 auto}.dash-welcome{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:28px 30px;margin-bottom:18px;border-radius:22px;background:linear-gradient(135deg,#1e5bd7 0%,#4d4eea 48%,#7956e8 100%);color:#fff;box-shadow:0 18px 40px rgba(54,77,190,.18);position:relative;overflow:hidden}.dash-welcome:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-100px;top:-160px;background:rgba(255,255,255,.12);box-shadow:-100px 180px 0 20px rgba(255,255,255,.05)}.welcome-copy,.welcome-actions{position:relative;z-index:1}.welcome-copy h2{font-family:'Space Grotesk';font-size:30px;margin:5px 0 6px}.welcome-copy p{margin:0;color:rgba(255,255,255,.8)}.welcome-copy .eyebrow{color:rgba(255,255,255,.65)}.welcome-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.dash-action{padding:10px 13px;border-radius:10px;color:#fff;text-decoration:none;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.13);backdrop-filter:blur(8px)}.dash-action:hover{background:rgba(255,255,255,.23);transform:translateY(-1px);color:#fff}.action-green{background:#24ae67}.action-purple{background:#744fe2}.action-cyan{background:#109eb9}
.dash-kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}.dash-kpi{min-height:126px;padding:17px;border:1px solid #e9edf5;border-radius:17px;background:#fff;box-shadow:0 8px 25px rgba(29,42,78,.055);display:flex;gap:13px;align-items:flex-start;transition:.18s}.dash-kpi:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(29,42,78,.09)}.kpi-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:19px}.dash-kpi span{display:block;color:#69738a;font-size:11px;font-weight:600;margin-bottom:6px}.dash-kpi strong{display:block;font:700 22px 'Space Grotesk';color:#172033}.dash-kpi small{display:block;color:#8a93a6;font-size:10.5px;margin-top:6px}.dash-kpi small b{color:#22a760}.dash-kpi.blue .kpi-icon{background:#eaf1ff;color:#2f6df6}.dash-kpi.green .kpi-icon{background:#e9f9ef;color:#25a866}.dash-kpi.orange .kpi-icon{background:#fff3e6;color:#ef8a24}.dash-kpi.red .kpi-icon{background:#ffedf0;color:#e84764}.dash-kpi.purple .kpi-icon{background:#f1ebff;color:#7855e9}.dash-kpi.cyan .kpi-icon{background:#e8f9fc;color:#159db8}
.dash-main-grid-v2{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(300px,.85fr);gap:16px;margin-bottom:16px}.dash-panel{background:#fff;border:1px solid #e9edf5;border-radius:18px;box-shadow:0 8px 25px rgba(29,42,78,.045);padding:19px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.panel-head h3{margin:3px 0 3px;font:700 18px 'Space Grotesk';color:#182237}.panel-head p{margin:0;color:#8790a4;font-size:11.5px}.panel-select{font-size:11px;padding:7px 10px;border:1px solid #e6eaf2;border-radius:9px;color:#59647a}.line-chart{height:260px;position:relative;padding-left:56px}.y-axis{position:absolute;left:0;top:5px;bottom:27px;display:flex;flex-direction:column;justify-content:space-between;color:#9aa3b5;font-size:9px}.chart-svg{position:absolute;left:52px;right:0;top:0;width:calc(100% - 52px);height:225px;overflow:visible;background:repeating-linear-gradient(to bottom,transparent 0,transparent 48px,#edf1f7 49px)}.x-axis{position:absolute;left:52px;right:0;bottom:0;display:flex;justify-content:space-between;color:#9aa3b5;font-size:9px}.chart-legend{display:flex;align-items:center;gap:20px;padding:8px 4px 0;color:#7a8497;font-size:10px}.chart-legend b{margin-left:auto;color:#1b2437}.chart-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}.legend-blue{background:#2f6df6}.legend-green{background:#27b36a}
.health-panel{display:flex;flex-direction:column}.health-ring{position:relative;width:150px;height:150px;margin:5px auto 8px}.health-ring svg{width:150px;height:150px}.health-ring>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.health-ring strong{font:700 31px 'Space Grotesk';color:#172033}.health-ring span{font-size:11px;color:#27a863;font-weight:700}.health-note{text-align:center;color:#7f899c;font-size:10.5px;line-height:1.5;padding:0 14px 12px}.health-rows{border-top:1px solid #eef1f6}.health-rows div{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid #f1f3f7;font-size:10.5px}.health-rows span{color:#7f899c}.health-rows b{color:#1b2437}
.dash-three-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}.stock-summary{display:flex;gap:12px;align-items:center;margin:5px 0 14px;padding:12px;border-radius:13px;background:#f7f9fd}.stock-icon{width:38px;height:38px;display:grid;place-items:center;background:#efe9ff;border-radius:10px;font-size:17px}.stock-summary strong{display:block;font:700 22px 'Space Grotesk'}.stock-summary span{font-size:10px;color:#8992a4}.metric-list{border-top:1px solid #eef1f6}.metric-list div{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid #f1f3f7;font-size:11px}.metric-list span{color:#7d879a}.metric-list b{color:#1d273a}.metric-list .warn{color:#e89122}.metric-list .danger{color:#df4864}.metric-list .success-text{color:#27a866}.purple-text{color:#7855e9!important}.invoice-bars>div{position:relative;padding:10px 0 14px;display:grid;grid-template-columns:1fr auto;gap:5px;color:#677186;font-size:10.5px}.invoice-bars b{color:#1b2437}.invoice-bars i{display:block;grid-column:1/-1;height:5px;border-radius:5px;background:#2f6df6}.invoice-bars .bar-orange{background:#ef922a}.invoice-bars .bar-red{background:#e64a67}.invoice-bars .bar-purple{background:#7a57e8}
.dash-table-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px;margin-bottom:16px}.table-scroll{overflow:auto}.dash-table{width:100%;border-collapse:collapse;font-size:10.5px}.dash-table th{color:#9199a9;text-transform:uppercase;letter-spacing:.04em;font-size:8.5px;font-weight:700;text-align:left;padding:8px;border-bottom:1px solid #edf0f5}.dash-table td{padding:10px 8px;border-bottom:1px solid #f0f2f6;color:#4c576b;white-space:nowrap}.dash-table tr:last-child td{border-bottom:0}.dash-table td b{color:#202a3d}.dash-table td small{display:block;color:#9ba3b2;font-size:8.5px;margin-top:2px}.avatar-mini{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#eaf1ff;color:#2f6df6;font-size:9px;font-weight:800;margin-right:7px}.stock-pill{font-size:8.5px;font-weight:700;padding:4px 7px;border-radius:10px}.stock-pill.low{background:#fff2df;color:#dc851c}.stock-pill.out{background:#ffebef;color:#dc405d}.status-dot{font-size:8.5px;font-weight:700}.status-dot.success{color:#23a562}.quick-panel{margin-bottom:8px}.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0}.quick-grid a{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:9px;padding:10px 13px;text-decoration:none;border-right:1px solid #edf0f5}.quick-grid a:last-child{border-right:0}.quick-grid a:hover{background:#fafbfe}.quick-icon{grid-row:1/3;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:15px;font-weight:800}.quick-icon.blue{background:#eaf1ff;color:#2f6df6}.quick-icon.green{background:#e9f9ef;color:#25a866}.quick-icon.purple{background:#f0ebff;color:#7955e8}.quick-icon.orange{background:#fff2e2;color:#ef8c22}.quick-icon.cyan{background:#e8f9fc;color:#159db8}.quick-icon.red{background:#ffedf0;color:#df4764}.quick-grid b{align-self:end;color:#243047;font-size:10.5px}.quick-grid small{color:#929bad;font-size:8.5px}
@media(max-width:1250px){.dash-kpi-grid{grid-template-columns:repeat(3,1fr)}.dash-three-grid,.dash-table-grid{grid-template-columns:1fr 1fr}.quick-grid{grid-template-columns:repeat(3,1fr)}.quick-grid a:nth-child(3){border-right:0}.quick-grid a{border-bottom:1px solid #edf0f5}}@media(max-width:900px){.dash-welcome{align-items:flex-start;flex-direction:column}.welcome-actions{justify-content:flex-start}.dash-main-grid-v2{grid-template-columns:1fr}.dash-three-grid,.dash-table-grid{grid-template-columns:1fr}.dash-kpi-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.dash-kpi-grid{grid-template-columns:1fr}.dash-welcome{padding:22px}.welcome-copy h2{font-size:24px}.welcome-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.dash-action{text-align:center}.quick-grid{grid-template-columns:1fr 1fr}.quick-grid a:nth-child(2n){border-right:0}.quick-grid a{border-right:1px solid #edf0f5}.chart-legend{gap:8px}.chart-legend b{display:none}}

/* Main dashboard visual refinement — tuned to the reference dashboard */
.dashboard-v2{padding-bottom:22px}
.dash-welcome{min-height:126px;padding:25px 30px;border-radius:20px;background:linear-gradient(115deg,#245edb 0%,#4b4be9 50%,#805be9 100%);box-shadow:0 16px 34px rgba(57,74,190,.16)}
.dash-welcome:before{content:"";position:absolute;left:46%;top:-130px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:180px 85px 0 55px rgba(255,255,255,.035)}
.welcome-copy h2{font-size:31px;letter-spacing:-.03em}.welcome-copy p{font-size:13px}
.welcome-actions{gap:8px}.dash-action{padding:11px 14px;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.dash-kpi-grid{gap:13px}.dash-kpi{min-height:132px;padding:18px;border-radius:17px}.dash-kpi strong{font-size:23px;letter-spacing:-.02em}.dash-kpi span{font-size:11px}.kpi-icon{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.dash-main-grid-v2{grid-template-columns:minmax(0,2.25fr) minmax(300px,.85fr);gap:14px}.dash-panel{border-radius:17px;padding:19px;box-shadow:0 7px 24px rgba(29,42,78,.05)}
.revenue-panel{min-height:350px}.health-panel{min-height:350px}.panel-head h3{font-size:18px}.line-chart{height:250px}.chart-svg{height:220px}
.dash-three-grid{gap:14px}.dash-table-grid{gap:14px}.table-panel{min-height:280px}
.quick-panel{padding:14px 16px}.quick-grid a{padding:12px 14px;border-radius:12px}.quick-grid a:hover{background:#f7f9ff}
@media(max-width:1250px){.dash-kpi-grid{grid-template-columns:repeat(3,1fr)}}

/* Premium Command Center hero */
.dash-welcome-pro{min-height:178px!important;padding:24px 28px!important;border-radius:24px!important;background:linear-gradient(120deg,#124fd4 0%,#3159e8 35%,#624be8 70%,#8b5be9 100%)!important;box-shadow:0 20px 45px rgba(49,79,210,.22),inset 0 1px rgba(255,255,255,.22)!important;isolation:isolate}
.dash-welcome-pro:after{content:"";position:absolute;inset:auto -70px -150px auto;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.19),rgba(255,255,255,0) 67%);z-index:-1}
.welcome-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0}.orb-one{width:210px;height:210px;right:27%;top:-145px;background:rgba(255,255,255,.08);box-shadow:0 0 90px rgba(255,255,255,.08)}.orb-two{width:150px;height:150px;right:9%;bottom:-105px;background:rgba(103,238,255,.10);filter:blur(1px)}
.welcome-grid-lines{position:absolute;right:0;top:0;width:48%;height:100%;opacity:.11;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,transparent,#000 55%);z-index:0}
.welcome-copy{max-width:690px}.welcome-topline{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.72);font-size:9px;font-weight:800;letter-spacing:.15em}.welcome-topline em{font-style:normal;margin-left:8px;padding-left:10px;border-left:1px solid rgba(255,255,255,.2);letter-spacing:.04em;font-weight:600}.live-dot,.status-pulse{width:7px;height:7px;border-radius:50%;background:#56f39a;box-shadow:0 0 0 4px rgba(86,243,154,.14),0 0 14px rgba(86,243,154,.75);display:inline-block}
.welcome-copy h2{font-size:34px!important;line-height:1.05;margin:9px 0 7px!important;letter-spacing:-.045em!important;text-shadow:0 3px 18px rgba(0,0,0,.12)}.wave-hand{display:inline-block;animation:wave-hand 2.2s ease-in-out infinite;transform-origin:70% 80%}.welcome-copy p{font-size:12.5px!important;color:rgba(255,255,255,.76)!important}.welcome-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.welcome-chips span{padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.7);font-size:9px;backdrop-filter:blur(8px)}.welcome-chips b{color:#fff;font-size:10px;margin-right:3px}
.welcome-right{display:flex;flex-direction:column;align-items:flex-end;gap:16px;position:relative;z-index:2}.welcome-actions{max-width:540px}.dash-action{display:flex!important;align-items:center;gap:6px;padding:10px 12px!important;border-radius:11px!important;background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.23)!important;box-shadow:0 8px 18px rgba(20,30,90,.12)!important;transition:transform .2s,background .2s,box-shadow .2s!important}.dash-action i{font-style:normal;font-size:15px;line-height:1}.dash-action:hover{transform:translateY(-3px)!important;background:rgba(255,255,255,.22)!important;box-shadow:0 12px 24px rgba(20,30,90,.2)!important}.action-green{background:rgba(31,194,113,.88)!important}.action-purple{background:rgba(119,80,226,.88)!important}.action-cyan{background:rgba(12,166,191,.88)!important}.welcome-status{font-size:9px;color:rgba(255,255,255,.72);padding:7px 11px;border-radius:99px;background:rgba(0,0,0,.11);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(8px)}.welcome-status .status-pulse{margin-right:7px}.welcome-status b{color:#7affad;margin-left:4px}
@keyframes wave-hand{0%,100%{transform:rotate(0)}10%{transform:rotate(15deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(12deg)}40%{transform:rotate(0)}}
@media(max-width:900px){.dash-welcome-pro{min-height:0!important}.welcome-right{align-items:flex-start}.welcome-actions{justify-content:flex-start}.welcome-status{margin-top:0}}
@media(max-width:560px){.welcome-topline em{display:none}.welcome-copy h2{font-size:27px!important}.welcome-chips{gap:6px}.welcome-chips span{font-size:8px}.welcome-right{width:100%}.welcome-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}.welcome-status{align-self:flex-start}}

/* Reference-style Main Dashboard — deep command-center hero */
.dash-welcome-pro{
  min-height:226px!important; padding:24px 28px 0!important; border-radius:22px!important;
  background:linear-gradient(135deg,#071f57 0%,#102b9b 42%,#26178c 74%,#3516a5 100%)!important;
  box-shadow:0 20px 46px rgba(23,43,128,.22), inset 0 1px rgba(255,255,255,.12)!important;
}
.dash-welcome-pro:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 8%,rgba(75,113,255,.26),transparent 32%),radial-gradient(circle at 95% 110%,rgba(170,90,255,.25),transparent 34%);z-index:-1}
.dash-welcome-pro:before{content:"";position:absolute;inset:0;opacity:.13;background-image:linear-gradient(90deg,transparent 0,transparent 49%,rgba(255,255,255,.16) 50%,transparent 51%),linear-gradient(180deg,transparent 0,transparent 49%,rgba(255,255,255,.12) 50%,transparent 51%);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 100%);z-index:0}
.welcome-orb{opacity:.6}.orb-one{width:300px;height:300px;right:24%;top:-205px;background:rgba(105,125,255,.12);box-shadow:0 0 100px rgba(100,120,255,.18)}.orb-two{width:220px;height:220px;right:2%;bottom:-160px;background:rgba(154,87,255,.14);filter:blur(2px)}
.welcome-grid-lines{display:none}
.welcome-copy{max-width:680px;align-self:flex-start;position:static!important;z-index:1}.welcome-topline{font-size:8.5px;letter-spacing:.18em;color:rgba(255,255,255,.58)}
.welcome-copy h2{font-size:32px!important;letter-spacing:-.035em!important;margin:10px 0 5px!important}.welcome-copy p{font-size:12px!important}
.welcome-right{padding-top:20px}.welcome-actions{max-width:600px}.dash-action{font-size:11px!important;padding:10px 13px!important;border-radius:10px!important}
.welcome-mini-stats{position:absolute;left:28px;right:28px;bottom:0;height:76px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.08);backdrop-filter:blur(10px);z-index:2}
.welcome-mini-stats>div{padding:13px 18px;border-right:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;align-content:center}
.welcome-mini-stats>div:last-child{border-right:0}.welcome-mini-stats span{font-size:9px;color:rgba(255,255,255,.6);grid-column:1/-1;margin-bottom:3px}.welcome-mini-stats b{font:700 18px 'Space Grotesk';color:#fff;line-height:1.05}.welcome-mini-stats small{font-size:8.5px;color:#7ff0b0;align-self:end;justify-self:end}.welcome-mini-stats>div:nth-child(3) small,.welcome-mini-stats>div:nth-child(4) small{color:#ffb8c7}
.dash-kpi-grid{margin-top:16px}.dash-kpi{min-height:126px}.dash-kpi strong{font-size:22px}
@media(max-width:900px){.dash-welcome-pro{padding-bottom:0!important}.welcome-mini-stats{position:relative;left:auto;right:auto;margin:18px -28px 0;width:calc(100% + 56px);height:auto}.welcome-mini-stats>div{min-height:66px}.welcome-right{padding-top:0}}
@media(max-width:560px){.dash-welcome-pro{padding:20px 20px 0!important}.welcome-mini-stats{margin-left:-20px;margin-right:-20px;width:calc(100% + 40px);grid-template-columns:1fr 1fr}.welcome-mini-stats>div:nth-child(2){border-right:0}.welcome-mini-stats>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}}

/* Colorful KPI Refresh — premium visual treatment */
.dash-kpi-grid{gap:14px;margin-top:18px}
.dash-kpi{
  position:relative;overflow:hidden;min-height:138px;padding:19px 17px 17px;
  border:1px solid rgba(255,255,255,.82);border-radius:20px;
  background:linear-gradient(145deg,#ffffff 0%,#f8fbff 72%,#f3f7ff 100%);
  box-shadow:0 12px 30px rgba(34,52,94,.08), inset 0 1px 0 rgba(255,255,255,.95);
  gap:12px;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.dash-kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:20px 0 0 20px;opacity:.95}
.dash-kpi:after{content:"";position:absolute;width:100px;height:100px;right:-44px;bottom:-50px;border-radius:50%;opacity:.12;filter:blur(1px);pointer-events:none}
.dash-kpi:hover{transform:translateY(-5px);box-shadow:0 20px 38px rgba(34,52,94,.14);border-color:rgba(255,255,255,1)}
.dash-kpi .kpi-icon{position:relative;z-index:1;width:45px;height:45px;flex:0 0 45px;border-radius:14px;font-size:19px;box-shadow:0 8px 18px rgba(40,60,110,.08),inset 0 1px 0 rgba(255,255,255,.65)}
.dash-kpi span{font-size:10.5px;letter-spacing:.01em;color:#65708a;margin-bottom:7px}
.dash-kpi strong{font-size:23px;letter-spacing:-.035em;color:#16213a;line-height:1.08}
.dash-kpi small{font-size:9.5px;margin-top:8px;color:#8993a7}
.dash-kpi small b{font-weight:800}

/* individual color personalities */
.dash-kpi.blue:before{background:linear-gradient(180deg,#2f6df6,#5d8cff)}
.dash-kpi.blue:after{background:#2f6df6}
.dash-kpi.blue .kpi-icon{background:linear-gradient(145deg,#e7efff,#dbe8ff);color:#2f6df6}
.dash-kpi.green:before{background:linear-gradient(180deg,#16b86a,#45d88a)}
.dash-kpi.green:after{background:#16b86a}
.dash-kpi.green .kpi-icon{background:linear-gradient(145deg,#e4faed,#d5f5e4);color:#16a761}
.dash-kpi.orange:before{background:linear-gradient(180deg,#f28b27,#ffb04c)}
.dash-kpi.orange:after{background:#f28b27}
.dash-kpi.orange .kpi-icon{background:linear-gradient(145deg,#fff1df,#ffe6c9);color:#ed8421}
.dash-kpi.red:before{background:linear-gradient(180deg,#ef4764,#ff758c)}
.dash-kpi.red:after{background:#ef4764}
.dash-kpi.red .kpi-icon{background:linear-gradient(145deg,#ffebef,#ffe0e7);color:#e53d5c}
.dash-kpi.purple:before{background:linear-gradient(180deg,#7656e9,#a477ff)}
.dash-kpi.purple:after{background:#7656e9}
.dash-kpi.purple .kpi-icon{background:linear-gradient(145deg,#eee9ff,#e6dcff);color:#7050dc}
.dash-kpi.cyan:before{background:linear-gradient(180deg,#12a9c4,#42d2df)}
.dash-kpi.cyan:after{background:#12a9c4}
.dash-kpi.cyan .kpi-icon{background:linear-gradient(145deg,#e4faff,#d7f4f9);color:#119ab5}

/* tiny animated shine gives the cards a premium feel without being distracting */
.dash-kpi .kpi-icon{transition:transform .24s ease,box-shadow .24s ease}
.dash-kpi:hover .kpi-icon{transform:scale(1.08) rotate(-2deg);box-shadow:0 12px 22px rgba(40,60,110,.13),inset 0 1px 0 rgba(255,255,255,.8)}
@media(max-width:1250px){.dash-kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.dash-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dash-kpi-grid{grid-template-columns:1fr}.dash-kpi{min-height:120px}}

/* ================= Premium Sidebar / Nested Modules ================= */
.sidebar-pro{background:linear-gradient(180deg,#ffffff 0%,#fbfbff 58%,#f7f5ff 100%);box-shadow:10px 0 35px rgba(44,36,94,.06);overflow:hidden}
.brand-pro{min-height:98px!important;padding:20px 20px!important;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);border-bottom:1px solid #eceaf5!important}
.brand-mark-pro{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#6d5bd0,#8b75ee);color:#fff;display:grid;place-items:center;position:relative;box-shadow:0 9px 18px rgba(109,91,208,.24);flex:none}
.brand-mark-pro span{font:700 16px 'Space Grotesk'}
.brand-mark-pro i{position:absolute;width:6px;height:6px;border-radius:50%;right:5px;top:5px;background:#42d392;box-shadow:0 0 0 3px rgba(66,211,146,.14)}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}.brand-copy strong{font:700 18px 'Space Grotesk';letter-spacing:.02em}.brand-copy small{font-size:10.5px;color:#8a8ea2;margin-top:5px}
.nav-scroll{flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#d9d5ec transparent}.nav-group-pro{padding:17px 12px 12px}.nav-label-pro{display:flex;align-items:center;gap:8px;padding:8px 12px 10px;font-size:10px;letter-spacing:.16em;color:#999caf}.nav-label-pro i{height:1px;flex:1;background:#eceaf3}
.nav-link-pro{position:relative;min-height:43px;padding:10px 12px!important;border:1px solid transparent!important;gap:12px!important;margin:3px 0!important;color:#686d82!important;font-weight:600!important;transition:all .2s ease;overflow:hidden}
.nav-link-pro:before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 4px 4px 0;background:transparent;transform:scaleY(.4);transition:.2s}
.nav-link-pro:hover{background:#f5f3fd!important;color:#403d58!important;transform:translateX(2px)}
.nav-link-pro.active{background:linear-gradient(90deg,#eeeaff,#f7f5ff)!important;color:#604fc7!important;border-color:#e1dcf8!important;box-shadow:0 5px 14px rgba(109,91,208,.08)}
.nav-link-pro.active:before,.nav-link-pro.parent-active:before{background:#6d5bd0;transform:scaleY(1)}
.nav-icon{width:19px;height:19px;display:grid;place-items:center;flex:none;border-radius:7px;transition:.2s}.nav-icon svg{width:17px;height:17px}.nav-link-pro:hover .nav-icon{transform:translateX(2px) scale(1.05)}
.nav-parent{margin:3px 0}.nav-parent-toggle{width:100%;border:none;cursor:pointer;text-align:left;font-family:inherit;background:transparent}.nav-chevron{margin-left:auto;font-size:16px;line-height:1;color:#a3a6b6;transition:transform .25s}.nav-parent.open .nav-chevron{transform:rotate(180deg);color:#6d5bd0}
.nav-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease,opacity .2s ease;opacity:0;margin-left:18px;position:relative}.nav-submenu.show{grid-template-rows:1fr;opacity:1}.nav-submenu:before{content:"";position:absolute;left:10px;top:2px;bottom:8px;width:1px;background:#e4e1ee}.nav-submenu>*{min-height:0;overflow:hidden}
.nav-sublink{position:relative;display:flex;align-items:center;gap:9px;min-height:39px;padding:7px 10px 7px 2px;margin:2px 0;border-radius:8px;color:#7b7f91;font-size:12.5px;font-weight:500;transition:.2s;text-decoration:none}.nav-sublink:hover{background:#f7f5fc;color:#514a72;text-decoration:none;transform:translateX(2px)}.nav-sublink.active{color:#604fc7;background:#f1edff;font-weight:700}.sub-line{width:13px;height:1px;background:#e4e1ee;flex:none}.sub-icon{width:17px;height:17px;display:grid;place-items:center}.sub-icon svg{width:15px;height:15px}.nav-sublink.active .sub-line{background:#8a76e5}.nav-sublink.active .sub-icon{color:#6d5bd0}
.sidebar-foot-pro{padding:14px 14px 16px!important;background:rgba(255,255,255,.72);backdrop-filter:blur(12px)}.who-pro{padding:9px 8px 12px;margin:0 0 8px;border-bottom:1px solid #eeeaf6}.who-pro .name{font-weight:700}.online-dot{width:8px;height:8px;border-radius:50%;background:#27c884;margin-left:auto;box-shadow:0 0 0 4px rgba(39,200,132,.12)}.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.profile-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;border:1px solid #e6e3ef;border-radius:10px;background:#fff;color:#5d6173;text-decoration:none;transition:.2s}.profile-btn:hover{border-color:#d8d1f4;background:#f8f6ff;color:#5f4fc4;text-decoration:none;transform:translateY(-1px)}.profile-btn span{font-size:11.5px;font-weight:700}.profile-btn small{font-size:9.5px;color:#a0a3b0;margin-top:2px}.profile-btn.logout:hover{color:#d94b67;border-color:#f2cdd6;background:#fff7f8}
@media(max-width:900px){.sidebar-pro{width:230px}.main{margin-left:230px}}

/* Customer activity timeline */
.activity-timeline{position:relative;padding:6px 0 4px 4px}
.activity-timeline:before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:2px;background:var(--border,#e5e7eb)}
.activity-item{position:relative;display:flex;gap:14px;padding:10px 0}
.activity-dot{position:relative;z-index:1;width:38px;height:38px;min-width:38px;border-radius:12px;background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.activity-body{flex:1;padding:2px 0 8px}
.activity-top{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:14px}
.activity-details{margin-top:4px;color:var(--muted,#6b7280);font-size:13px}
@media(max-width:700px){.activity-top{align-items:flex-start;flex-direction:column;gap:3px}}

/* Top admin profile for both Admin and Super Admin */
.sidebar-profile-top{margin:12px 12px 8px;padding:10px;border:1px solid #e7e3f1;border-radius:14px;background:linear-gradient(135deg,#ffffff 0%,#f8f6ff 100%);box-shadow:0 8px 22px rgba(57,45,116,.07);position:relative;z-index:2}
.sidebar-profile-top .who-pro{display:flex;align-items:center;gap:9px;padding:2px 2px 10px;margin:0 0 9px;border-bottom:1px solid #eeeaf6}
.sidebar-profile-top .profile-who-copy{min-width:0}
.sidebar-profile-top .profile-who-copy .name{font-weight:750;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-profile-top .profile-who-copy .role{text-transform:capitalize;font-size:10px;color:#8d91a0;margin-top:2px}
.sidebar-profile-top .profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sidebar-profile-top .profile-btn{min-height:42px}
.sidebar-profile-top .profile-btn.active{border-color:#cfc4f4;background:#f5f1ff;color:#5f4fc4}
@media(max-width:900px){.sidebar-profile-top{margin:10px 10px 7px}}

/* ================= Sidebar Modern Midnight Theme ================= */
.sidebar-pro{
  background:linear-gradient(180deg,#0b1224 0%,#101a35 52%,#0b1328 100%)!important;
  border-right:1px solid rgba(120,145,210,.18)!important;
  box-shadow:16px 0 40px rgba(8,15,35,.22)!important;
}
.brand-pro{
  background:rgba(9,17,36,.72)!important;
  border-bottom:1px solid rgba(148,163,205,.14)!important;
  backdrop-filter:blur(16px);
}
.brand-mark-pro{background:linear-gradient(145deg,#5b5ce2,#7c4dff)!important;box-shadow:0 10px 26px rgba(99,91,226,.35)!important}
.brand-copy strong{color:#f4f7ff!important}.brand-copy small{color:#8d9ab7!important}
.sidebar-profile-top{
  background:linear-gradient(145deg,rgba(30,43,76,.92),rgba(16,27,52,.92))!important;
  border-color:rgba(140,160,215,.18)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
}
.sidebar-profile-top .who-pro{border-bottom-color:rgba(148,163,205,.14)!important}
.sidebar-profile-top .profile-who-copy .name{color:#f5f7ff!important}
.sidebar-profile-top .profile-who-copy .role{color:#9ba9c4!important}
.profile-btn{background:rgba(255,255,255,.06)!important;border-color:rgba(148,163,205,.18)!important;color:#c5cee2!important}
.profile-btn small{color:#8492ad!important}.profile-btn:hover{background:rgba(124,77,255,.16)!important;border-color:rgba(139,115,238,.45)!important;color:#fff!important}
.profile-btn.logout:hover{background:rgba(220,70,100,.12)!important;border-color:rgba(240,100,125,.35)!important;color:#ffb3c0!important}
.nav-scroll{scrollbar-color:#35466f transparent}
.nav-group-pro{padding-top:14px}
.nav-label-pro{color:#71809e!important}.nav-label-pro i{background:rgba(148,163,205,.13)!important}
.nav-section-title{color:#7282a3!important;letter-spacing:.14em!important;font-size:9px!important;font-weight:800!important;text-transform:uppercase!important;padding:16px 12px 7px!important}
.nav-link-pro{color:#aebbd3!important;border-color:transparent!important;border-radius:11px!important}
.nav-link-pro:hover{background:rgba(99,112,170,.13)!important;color:#fff!important;transform:translateX(3px)!important}
.nav-link-pro.active{background:linear-gradient(90deg,rgba(91,92,226,.28),rgba(124,77,255,.12))!important;color:#fff!important;border-color:rgba(125,120,255,.28)!important;box-shadow:0 8px 22px rgba(39,42,93,.28),inset 0 0 18px rgba(104,94,230,.08)!important}
.nav-link-pro.active:before,.nav-link-pro.parent-active:before{background:var(--brand)!important;box-shadow:0 0 10px rgba(109,91,208,.55)}
.nav-icon{color:#8998b5!important}.nav-link-pro:hover .nav-icon,.nav-link-pro.active .nav-icon{color:var(--brand)!important;filter:brightness(1.35)}
.nav-sublink{color:#8795b0!important}.nav-sublink:hover{background:rgba(99,112,170,.11)!important;color:#e9efff!important}.nav-sublink.active{background:rgba(124,77,255,.18)!important;color:#fff!important}.nav-submenu:before,.sub-line{background:rgba(148,163,205,.16)!important}
.nav-sublink.active .sub-line{background:var(--brand)!important;filter:brightness(1.35)}.nav-sublink.active .sub-icon{color:var(--brand)!important;filter:brightness(1.35)}
.online-dot{box-shadow:0 0 0 4px rgba(39,200,132,.12),0 0 14px rgba(39,200,132,.3)!important}
@media(max-width:900px){.sidebar-pro{width:230px}.main{margin-left:230px}}


/* Top-right admin profile */
.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto}
.top-profile{display:flex;align-items:center;gap:9px;min-width:150px;padding:6px 12px 6px 7px;border:1px solid rgba(111,91,220,.22);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,243,255,.96));box-shadow:0 6px 18px rgba(49,39,111,.08);text-decoration:none;color:#24273a;transition:.2s}
.top-profile:hover,.top-profile.active{transform:translateY(-1px);border-color:#9b88ea;box-shadow:0 9px 22px rgba(91,70,185,.15);text-decoration:none}
.top-profile-copy{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.top-profile-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-profile-copy small{font-size:9.5px;color:#8b8fa0;margin-top:3px;text-transform:capitalize}
.top-logout{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border:1px solid #eadce2;border-radius:11px;background:#fff;color:#b34b69;font-size:11px;font-weight:700;text-decoration:none;transition:.2s}
.top-logout:hover{background:#fff5f7;border-color:#e7b8c5;color:#9d3152;text-decoration:none;transform:translateY(-1px)}
@media(max-width:700px){.top-profile{min-width:0}.top-profile-copy{display:none}.top-logout span{display:none}.top-logout{padding:10px 11px}.topbar-actions{gap:6px}}


/* =========================================================
   Professional Dashboard KPI Cards
   White cards, compact typography, consistent alignment.
   ========================================================= */
.dash-kpi,
.stat-card,
.status-tile {
  background: #ffffff !important;
  color: #172033 !important;
  border: 1px solid #e6eaf1 !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 18px rgba(25, 45, 80, .08) !important;
  overflow: hidden;
}

.dash-kpi {
  min-height: 128px;
  padding: 18px 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.dash-kpi .kpi-title,
.dash-kpi .label,
.dash-kpi span,
.stat-card .lbl {
  color: #475569 !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
}

.dash-kpi strong,
.dash-kpi .value,
.stat-card .val {
  color: #172033 !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.dash-kpi small,
.dash-kpi .sub,
.stat-card .sub {
  color: #64748b !important;
  line-height: 1.25 !important;
}

.dash-kpi .kpi-icon,
.stat-card .icon-badge {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #eef4ff !important;
  color: #1769e0 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

/* ---- Stat cards (Customers / Packages / Invoices summary tiles) ----
   Bumped to a single restrained accent (brand purple, not the ad-hoc
   blue above), a colored edge, bigger numerals, and a hover lift so
   they read as the premium focal point of each list page. */
.stat-card{
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  padding: 22px 22px 20px !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-card:before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--brand); opacity:.9;
}
.stat-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift) !important;
  border-color: var(--brand-border) !important;
}
.stat-card .val{ font-size: 31px !important; letter-spacing:-.02em; }
.stat-card .lbl{ font-size: 11.5px !important; letter-spacing:.07em !important; }
.stat-card .icon-badge{
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}

/* Keep each KPI accent distinct but use the same clean white card. */
.dash-kpi:nth-child(1) .kpi-icon { background:#eaf2ff !important; color:#1769e0 !important; }
.dash-kpi:nth-child(2) .kpi-icon { background:#eaf9f0 !important; color:#16a05d !important; }
.dash-kpi:nth-child(3) .kpi-icon { background:#fff0f1 !important; color:#e5394f !important; }
.dash-kpi:nth-child(4) .kpi-icon { background:#f0ebff !important; color:#6738d4 !important; }
.dash-kpi:nth-child(5) .kpi-icon { background:#eaf8fb !important; color:#0896b5 !important; }
.dash-kpi:nth-child(6) .kpi-icon { background:#fff4e7 !important; color:#e88912 !important; }
.dash-kpi:nth-child(7) .kpi-icon { background:#eeeaff !important; color:#5141c7 !important; }
.dash-kpi:nth-child(8) .kpi-icon { background:#e9f8f8 !important; color:#128f92 !important; }

.dash-kpi:nth-child(3) strong,
.dash-kpi:nth-child(3) .value { color:#e5394f !important; }
.dash-kpi:nth-child(6) strong,
.dash-kpi:nth-child(6) .value { color:#e88912 !important; }

@media (max-width: 1200px) {
  .dash-kpi { min-height: 120px; padding: 15px !important; }
}

/* Customer status badges */
.customer-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
}
.customer-status-badge.status-active{
  color:#16804a;
  background:#eaf8f0;
  border-color:#9fd8b9;
}
.customer-status-badge.status-paid{
  color:#1769a6;
  background:#eaf4ff;
  border-color:#a8ccef;
}
.customer-status-badge.status-unpaid{
  color:#b45309;
  background:#fff6e6;
  border-color:#f1c27d;
}
.customer-status-badge.status-expired{
  color:#c6283d;
  background:#fff0f2;
  border-color:#efabb7;
}

/* Status shown clearly in customer rows */
.customer-row-status,
.customer-status-cell {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:78px;
}
.customer-status-badge {
  vertical-align:middle;
}

/* Clickable Connection ID */
.customer-id-link{
  color:#1769e0;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
.customer-id-link:hover{
  text-decoration:underline;
}

/* Statuses stay inside the Status column; no separate badge strip. */
.customer-status-summary { display:none !important; }

/* Total Customers KPI is clickable without changing its visual design. */
.total-customers-card{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.total-customers-card:hover{
  color:inherit;
  text-decoration:none;
}

/* Dealer payment modal input: always clickable/editable */
.modal{z-index:10000 !important;pointer-events:auto !important}
.modal-box{position:relative;z-index:10001;pointer-events:auto !important}
.modal-box form,.modal-box label,.modal-box input,.modal-box textarea,.modal-box button{
  pointer-events:auto !important;
}
.dealer-amount-input{
  cursor:text !important;
  user-select:text !important;
  -webkit-user-select:text !important;
  opacity:1 !important;
}

.dealer-modal.open{display:flex !important;}
.dealer-modal[hidden]{display:none !important;}

/* ISP Dealer quick actions: native #target modal behavior */
.isp-dealer .actions a, .dealer-ledger .actions a{
  display:inline-block;
  color:#fff;
  text-decoration:none;
  border-radius:12px;
  padding:12px 15px;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
}
.dealer-ledger .modal:target{display:flex !important;}

/* Dealer amount fields must always be directly editable. */
.dealer-ledger .modal input[name="amount"],
.dealer-ledger .modal input[type="number"]{
  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
  opacity:1 !important;
  cursor:text !important;
  position:relative;
  z-index:10002;
}
.dealer-ledger .modal .modal-content,
.dealer-ledger .modal form{
  pointer-events:auto !important;
}


/* NayaNet Premium Invoice — visual enhancement only */
.invoice, .invoice-container, .invoice-box, .print-invoice {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  overflow:hidden;
}
.invoice-header {
  padding:24px 28px;
  border-bottom:2px solid #e5e7eb;
}
.invoice table {
  width:100%;
  border-collapse:collapse;
}
.invoice table th {
  padding:11px 12px;
  font-weight:700;
  text-align:left;
  border-bottom:2px solid #e5e7eb;
}
.invoice table td {
  padding:12px;
  border-bottom:1px solid #eef2f7;
}
.invoice .total, .invoice-total {
  font-size:1.25rem;
  font-weight:800;
}
.invoice .balance-due, .balance-due {
  padding:14px 18px;
  border-radius:12px;
  font-weight:800;
}
.invoice .paid, .status-paid {
  font-weight:800;
  letter-spacing:.04em;
}
@media print {
  .invoice, .invoice-container, .invoice-box, .print-invoice {
    box-shadow:none !important;
    border:0 !important;
    border-radius:0 !important;
  }
}


/* =========================================================
   NayaNet Mobile Layout — keeps desktop unchanged
   ========================================================= */
@media (max-width: 700px){
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .app-shell{
    width:100%;
    min-width:0;
  }

  /* Compact icon-only sidebar on phones.
     All menu items remain available; labels are hidden only to save space. */
  .sidebar-pro{
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;
  }

  .main{
    margin-left:68px !important;
    width:calc(100% - 68px) !important;
    min-width:0 !important;
  }

  .brand-pro{
    min-height:76px !important;
    padding:14px 10px !important;
    justify-content:center !important;
  }
  .brand-pro .brand-copy{
    display:none !important;
  }
  .brand-mark-pro{
    width:40px !important;
    height:40px !important;
  }

  .sidebar-profile-top{
    margin:8px 6px !important;
    padding:6px 4px !important;
  }
  .sidebar-profile-top .profile-who-copy,
  .sidebar-profile-top .profile-actions{
    display:none !important;
  }
  .sidebar-profile-top .who-pro{
    justify-content:center !important;
    border:0 !important;
    padding:3px !important;
    margin:0 !important;
  }

  .nav-group-pro{
    padding:8px 6px !important;
  }
  .nav-label-pro,
  .nav-section-title{
    display:none !important;
  }
  .nav-link-pro{
    width:56px !important;
    min-height:44px !important;
    padding:10px !important;
    margin:3px auto !important;
    justify-content:center !important;
    gap:0 !important;
  }
  .nav-link-pro > span:last-child{
    display:none !important;
  }
  .nav-icon{
    width:20px !important;
    height:20px !important;
  }

  .sidebar-foot-pro{
    padding:8px 6px !important;
  }
  .sidebar-foot-pro .who-pro,
  .sidebar-foot-pro .profile-actions{
    display:none !important;
  }

  .topbar.topbar-minimal{
    min-height:52px !important;
    padding:8px 12px !important;
  }
  .topbar-actions{
    width:100%;
    justify-content:flex-end !important;
  }

  .content{
    width:100% !important;
    max-width:100% !important;
    padding:16px 12px 40px !important;
  }

  .dashboard-v2{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .dash-header-compact{
    gap:10px !important;
    margin-bottom:12px !important;
  }
  .dash-header-compact h1{
    font-size:23px !important;
  }
  .dash-header-compact p{
    font-size:11px !important;
  }
  .dash-header-date{
    min-width:105px !important;
    padding:7px 8px !important;
  }

  /* Dashboard grids: single column where two columns become too cramped. */
  .dash-main-grid-v2,
  .dash-three-grid,
  .dash-table-grid{
    grid-template-columns:1fr !important;
    width:100% !important;
    min-width:0 !important;
  }

  .dash-panel{
    min-width:0 !important;
    width:100% !important;
  }

  .panel-head{
    gap:8px !important;
  }
  .panel-head h3{
    font-size:15px !important;
  }
  .panel-head p{
    font-size:10px !important;
  }

  /* Keep splitter cards compact and readable if present. */
  .splitter-grid,
  .optical-splitter-grid,
  .splitters-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
  }
  .splitter-card,
  .optical-splitter-card,
  .splitters-card{
    min-width:0 !important;
    padding:9px !important;
  }

  .table-scroll{
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .dash-table{
    min-width:520px;
  }

  .line-chart{
    min-width:0 !important;
    overflow:hidden !important;
  }
  .chart-svg{
    width:100% !important;
    min-width:0 !important;
  }

  .quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:420px){
  .sidebar-pro{
    width:60px !important;
    min-width:60px !important;
    max-width:60px !important;
  }
  .main{
    margin-left:60px !important;
    width:calc(100% - 60px) !important;
  }
  .nav-link-pro{
    width:50px !important;
  }
  .content{
    padding-left:9px !important;
    padding-right:9px !important;
  }
  .customer-dash-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  .customer-dash-strip a{
    min-height:78px !important;
    padding:8px !important;
  }
  .customer-dash-strip a span{
    width:30px !important;
    height:30px !important;
    font-size:13px !important;
  }
  .customer-dash-strip b{
    font-size:13px !important;
  }
  .customer-dash-strip small{
    font-size:8.5px !important;
  }
  .customer-dash-strip em{
    font-size:7.5px !important;
  }
}


/* =========================================================
   NAYANET Executive Sidebar 2026 — visual-only upgrade
   Keeps routes, permissions and application logic unchanged.
   ========================================================= */
@media (min-width:701px){
  .sidebar-pro{
    background:
      radial-gradient(circle at 18% 5%,rgba(111,92,255,.18),transparent 26%),
      radial-gradient(circle at 90% 42%,rgba(28,191,255,.07),transparent 28%),
      linear-gradient(180deg,#08101f 0%,#0b1530 48%,#091226 100%)!important;
    border-right:1px solid rgba(128,150,215,.16)!important;
    box-shadow:18px 0 46px rgba(6,12,28,.28)!important;
  }
  .sidebar-pro:after{
    content:"";position:absolute;inset:0 0 auto auto;width:1px;height:100%;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(128,113,255,.42),rgba(52,184,255,.16),transparent);
    opacity:.7;
  }
  .brand-pro{
    min-height:92px!important;padding:18px 16px!important;gap:12px!important;
    background:linear-gradient(180deg,rgba(11,19,40,.94),rgba(10,18,37,.78))!important;
    border-bottom:1px solid rgba(145,162,214,.12)!important;
    box-shadow:0 8px 26px rgba(0,0,0,.12);
  }
  .brand-mark-pro{
    width:42px;height:42px;border-radius:14px;
    background:linear-gradient(145deg,#7667ff 0%,#5b5ce2 48%,#3f7cff 100%)!important;
    box-shadow:0 10px 28px rgba(91,92,226,.34),inset 0 1px 0 rgba(255,255,255,.25)!important;
  }
  .brand-mark-pro:after{
    content:"";position:absolute;inset:1px;border-radius:13px;border:1px solid rgba(255,255,255,.13);pointer-events:none;
  }
  .brand-copy strong{font-size:17px!important;letter-spacing:.08em!important;color:#f8faff!important;text-shadow:0 1px 10px rgba(117,105,255,.12)}
  .brand-copy small{font-size:10px!important;letter-spacing:.09em;text-transform:uppercase;color:#7f8dab!important;margin-top:6px!important}

  .nav-scroll{padding:6px 0 14px;scrollbar-width:thin;scrollbar-color:rgba(111,121,173,.55) transparent}
  .nav-scroll::-webkit-scrollbar{width:5px}.nav-scroll::-webkit-scrollbar-track{background:transparent}.nav-scroll::-webkit-scrollbar-thumb{background:rgba(111,121,173,.45);border-radius:20px}
  .nav-group-pro{padding:8px 10px 14px!important}
  .nav-label-pro{padding:12px 10px 8px!important;color:#667897!important;font-size:9px!important;font-weight:800!important;letter-spacing:.18em!important;text-transform:uppercase}
  .nav-label-pro i{background:linear-gradient(90deg,rgba(115,132,184,.20),transparent)!important}
  .nav-section-title{
    margin:11px 5px 5px!important;padding:10px 8px 7px!important;
    border-top:1px solid rgba(139,155,205,.10);
    color:#607394!important;font-size:8.5px!important;font-weight:800!important;letter-spacing:.18em!important;
  }
  .nav-link-pro{
    min-height:46px!important;padding:8px 10px!important;margin:4px 0!important;gap:10px!important;
    border-radius:13px!important;color:#9dabc4!important;font-size:13px!important;font-weight:650!important;
    border:1px solid transparent!important;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important;
  }
  .nav-link-pro:before{left:0!important;top:11px!important;bottom:11px!important;width:3px!important;border-radius:0 5px 5px 0!important}
  .nav-link-pro .nav-icon{
    width:31px!important;height:31px!important;border-radius:10px!important;
    background:rgba(255,255,255,.035);border:1px solid rgba(152,168,214,.09);
    color:#7e90b0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  }
  .nav-link-pro .nav-icon svg{width:16px!important;height:16px!important;stroke-width:1.85!important}
  .nav-link-pro:hover{
    transform:translateX(2px)!important;color:#f3f6ff!important;
    background:linear-gradient(90deg,rgba(92,105,167,.18),rgba(75,91,155,.08))!important;
    border-color:rgba(137,151,210,.14)!important;
    box-shadow:0 7px 18px rgba(3,8,22,.13)!important;
  }
  .nav-link-pro:hover .nav-icon{
    color:#c9d3ff!important;background:rgba(115,101,255,.13);border-color:rgba(126,113,255,.25);transform:none!important;
  }
  .nav-link-pro.active{
    color:#fff!important;
    background:linear-gradient(96deg,rgba(101,88,241,.32) 0%,rgba(89,91,226,.22) 48%,rgba(51,111,220,.10) 100%)!important;
    border-color:rgba(128,116,255,.32)!important;
    box-shadow:0 10px 26px rgba(23,28,74,.32),inset 0 1px 0 rgba(255,255,255,.08)!important;
  }
  .nav-link-pro.active:before{background:linear-gradient(180deg,#9b8cff,#5f71ff)!important;box-shadow:0 0 14px rgba(119,103,255,.76)!important}
  .nav-link-pro.active .nav-icon{
    color:#fff!important;background:linear-gradient(145deg,rgba(129,112,255,.42),rgba(76,98,235,.30));
    border-color:rgba(159,148,255,.36);box-shadow:0 6px 16px rgba(55,52,165,.25),inset 0 1px 0 rgba(255,255,255,.12);
    filter:none!important;
  }
  .nav-link-pro.active > span:last-child{font-weight:750;letter-spacing:.005em}
  .nav-link-pro.active:after{
    content:"";position:absolute;right:9px;width:5px;height:5px;border-radius:50%;background:#9e94ff;
    box-shadow:0 0 0 4px rgba(126,112,255,.10),0 0 13px rgba(126,112,255,.6);
  }
  .nav-link-pro small{color:#7686a4!important}
  .nav-link-pro.active small{color:#c6cdf0!important}

  .nav-submenu{margin-left:14px!important;padding-left:8px}
  .nav-submenu:before{left:9px!important;background:linear-gradient(180deg,rgba(123,111,255,.38),rgba(119,137,189,.10))!important}
  .nav-sublink{color:#8291ad!important;border:1px solid transparent;padding:7px 9px 7px 3px!important;border-radius:9px!important}
  .nav-sublink:hover{background:rgba(92,105,167,.11)!important;color:#eaf0ff!important;border-color:rgba(137,151,210,.10)}
  .nav-sublink.active{background:rgba(105,91,239,.16)!important;color:#fff!important;border-color:rgba(126,112,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}

  .sidebar-profile-top{
    margin:10px 10px 7px!important;padding:9px!important;border-radius:15px!important;
    background:linear-gradient(145deg,rgba(29,42,75,.88),rgba(14,25,49,.92))!important;
    border-color:rgba(139,157,214,.16)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  .profile-btn{border-radius:10px!important;min-height:40px!important;background:rgba(255,255,255,.045)!important}
  .profile-btn:hover{background:rgba(113,95,255,.14)!important;box-shadow:0 5px 14px rgba(15,20,48,.20)}
}