/* The Vayu — Tenant app styling.
   PROFESSIONAL / CORPORATE redesign (crisper, more structured,
   business-software feel) — replaces the earlier soft/rounded,
   animated-gradient SaaS look. Variable NAMES are kept exactly as
   before (--brand, --accent, --danger, --success, etc.) since PHP
   templates reference them inline — only values, radii, shadows, and
   a handful of new structural classes (.card-head, .stat-card) are
   new. Every existing selector still exists, so nothing that already
   worked stops working; this is a values-and-structure refresh, not a
   rewrite of the component system. */
:root{
  --sidebar-1:#087F82; --sidebar-2:#087F82; --sidebar-3:#087F82;

  --ink:#161B22; --muted:#5B6472; --line:#DDE1E7; --paper:#F3F5F8; --card:#FFFFFF;
  --brand:#0CA3A6; --brand-dark:#087F82; --accent:#C9691A; --accent-dark:#A6560F;
  --danger:#D33C41; --success:#15803D;
  --blue-100:#E7F6F6; --gold-soft:#F7E9D8; --clay-soft:#FBE2E2; --success-soft:#DCF3E3; --inactive-soft:#EBEEF2;
  --radius:8px; --radius-lg:10px; --sidebar-w:224px;
  --shadow-sm:0 1px 2px rgba(15,21,32,.06);
  --shadow-md:0 2px 6px rgba(15,21,32,.07), 0 1px 2px rgba(15,21,32,.05);
  --shadow-lg:0 10px 28px rgba(15,21,32,.14), 0 2px 6px rgba(15,21,32,.06);
}
[data-theme="dark"]{
  --paper:#0B0D12; --card:#141821; --ink:#E7E9EE; --muted:#8891A3; --line:#252B37;
  --blue-100:#102B2C; --gold-soft:#33230F; --clay-soft:#331515; --success-soft:#0E2A1B; --inactive-soft:#1B2029;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 2px 6px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.28);
  --shadow-lg:0 10px 28px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;transition:background .2s ease,color .2s ease;}
a{color:var(--brand-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-family:'Manrope',sans-serif;letter-spacing:-.005em;}
code,.mono{font-family:'IBM Plex Mono',monospace;}

.shell{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;color:#fff;
  background:var(--sidebar-1);border-right:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.sidebar .brand{font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;padding:6px 10px 18px;flex-shrink:0;}
.sidebar .brand span{color:var(--accent);}
.sidebar-nav{flex:1;overflow-y:auto;padding:0 12px;min-height:0;scrollbar-width:none;-ms-overflow-style:none;}
.sidebar-nav::-webkit-scrollbar{display:none;}
.sidebar .group-label{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.5);margin:18px 12px 8px;font-weight:700;position:relative;}
.sidebar-nav .group-label:first-child{margin-top:4px;}
.sidebar a{display:flex;align-items:center;gap:2px;color:rgba(255,255,255,.82);padding:8px 12px;border-radius:6px;font-size:13.3px;margin-bottom:1px;transition:background .12s ease,color .12s ease;position:relative;}
.sidebar a .nav-lock{margin-left:auto;font-size:11px;opacity:.7;}
.nav-parent{
  display:flex;align-items:center;gap:2px;width:100%;text-align:left;border:none;background:transparent;cursor:pointer;
  color:rgba(255,255,255,.82);padding:8px 12px;border-radius:6px;font-size:13.3px;margin-bottom:1px;font-family:'Inter',sans-serif;transition:background .12s ease,color .12s ease;
}
.nav-parent:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-parent.expanded{color:#fff;}
.nav-parent .chevron{margin-left:auto;font-size:10px;transition:transform .18s;color:rgba(255,255,255,.4);}
.nav-parent.expanded .chevron{transform:rotate(90deg);color:#fff;}
.submenu{overflow:hidden;max-height:0;transition:max-height .2s ease;display:flex;flex-direction:column;gap:1px;margin-left:4px;border-left:1.5px solid rgba(255,255,255,.08);padding-left:8px;}
.submenu.open{max-height:320px;}
.submenu a{
  display:block;padding:6px 10px;border-radius:5px;font-size:12.2px;color:rgba(255,255,255,.68);position:relative;margin-bottom:1px;
}
.submenu a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none;}
.submenu a.active{background:rgba(255,255,255,.22);color:#fff;font-weight:700;}
.sidebar a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none;}
.sidebar a.active{
  /* Both the highlight tint and the left accent bar used to be a
     low-opacity/solid version of the same teal that only worked
     because the sidebar itself was near-black — against a teal
     sidebar, teal-on-teal would nearly vanish. White-based contrast
     instead, so the active item is still unmistakable. */
  background:rgba(255,255,255,.2);color:#fff;font-weight:700;
  box-shadow:inset 3px 0 0 #fff;
}
.sidebar a.active .icon-chip{background:#fff;color:var(--sidebar-1);}
.icon-chip{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;
  font-size:11.5px;flex-shrink:0;background:rgba(255,255,255,.05);transition:background .12s ease;
}
.sidebar .foot{
  flex-shrink:0;padding:14px 14px 16px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;gap:10px;
}
.sidebar .foot .who{flex:1;min-width:0;}
.sidebar .foot .logout-btn{
  flex-shrink:0;width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);background:rgba(255,255,255,.05);font-size:14px;
}
.sidebar .foot .logout-btn:hover{background:rgba(255,255,255,.11);color:#fff;text-decoration:none;}
.sidebar .foot .avatar{
  width:32px;height:32px;border-radius:6px;background:var(--accent);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;
}
.sidebar .foot .who{line-height:1.3;min-width:0;}
.sidebar .foot .who .name{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar .foot .who .role{font-size:11px;color:rgba(255,255,255,.55);}

.main{flex:1;min-width:0;}
.topbar{
  position:sticky;top:0;z-index:45;
  display:flex;align-items:center;justify-content:space-between;padding:13px 26px;
  background:var(--sidebar-1);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* A brief, infrequent sheen — not a continuous animated gradient
   (deliberately moved away from that look earlier for a flatter,
   more corporate feel). Sweeps across in under a second, then stays
   parked off-screen for several seconds before repeating, so it reads
   as an occasional light flourish rather than something distracting
   sitting in your peripheral vision while you work.

   Lives in its own dedicated wrapper (not directly on .topbar) so
   ITS overflow:hidden never clips anything else in the topbar — the
   user menu and notification dropdowns are position:absolute
   elements that intentionally extend below the topbar's own height,
   and clipping overflow on .topbar itself was silently hiding them
   entirely. This wrapper is sized to exactly match the topbar via
   inset:0 and sits behind everything else (z-index:0), so it's purely
   decorative and never intercepts a click. */
.topbar-sheen{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.topbar-sheen::before{
  content:'';
  position:absolute; top:0; bottom:0; left:-40%; width:35%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  animation:vayuTopbarSheen 7s ease-in-out infinite;
}
@keyframes vayuTopbarSheen{
  0%{ left:-40%; }
  14%{ left:115%; }
  100%{ left:115%; }
}
@media (prefers-reduced-motion: reduce){
  .topbar-sheen::before{ animation:none; display:none; }
}
.topbar h2{margin:0;font-size:15.5px;font-family:'Manrope',sans-serif;font-weight:700;color:#fff;position:relative;z-index:1;}
.topbar .crumb{font-size:11.3px;color:rgba(255,255,255,.55);font-family:'IBM Plex Mono',monospace;position:relative;z-index:1;}
.topbar-actions{display:flex;align-items:center;gap:12px;position:relative;z-index:1;}
.theme-toggle{
  display:inline-flex;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:4px;cursor:pointer;position:relative;width:48px;height:26px;flex-shrink:0;
}
.theme-toggle .knob{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  /* Was the same teal the topbar itself now uses — solid teal on a
     translucent-white track sitting on a teal topbar left the knob
     barely distinguishable from its own track. White reads clearly
     as a toggle knob regardless of what color the bar around it is. */
  background:#fff;transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex;align-items:center;justify-content:center;font-size:11px;
}
[data-theme="dark"] .theme-toggle .knob{transform:translateX(22px);}

.container{padding:24px 26px 60px;}
.page-head{
  margin-bottom:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);border-top:3px solid var(--sidebar-1);
  padding:16px 20px;box-shadow:var(--shadow-sm);
}
.page-head h1{font-size:20px;font-weight:800;margin:0 0 4px;font-family:'Manrope',sans-serif;letter-spacing:-.01em;}
.page-head p{color:var(--muted);margin:0;font-size:13.3px;line-height:1.5;}

.card{
  background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:16px;
  box-shadow:var(--shadow-sm);position:relative;
}
/* Structured header bar for a card — title on the left, actions on
   the right, separated from the body by a real rule rather than just
   spacing. This is the defining "business software" pattern this
   redesign is built around: every section of a page reads as a
   distinct, labeled block instead of everything floating in open
   whitespace. Use in place of a bare <h3> where a card's purpose
   benefits from being visually anchored — list pages, form sections,
   summary panels. */
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:-18px -20px 16px;padding:13px 20px;border-bottom:1px solid var(--line);background:var(--paper);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.card-head h3{margin:0;font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);}
.card-head .card-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px;}
.kpi{
  background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius);
  padding:13px 16px;position:relative;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease;
}
.kpi:hover{box-shadow:var(--shadow-md);}
.kpi .label{font-size:10.3px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.kpi .value{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:800;margin-top:7px;letter-spacing:-.01em;color:var(--ink);}

table{width:100%;border-collapse:collapse;font-size:13.2px;}
.table-compact td,.table-compact th{padding:7px 8px;font-size:12.4px;}
.table-compact tbody tr:nth-child(even){background:var(--paper);}
.table-compact tbody tr{border-bottom:1px solid var(--line);}
.table-compact tbody tr:hover{background:var(--blue-100);}
.table-compact input[type=number],.table-compact input[type=text],.table-compact select{
  padding:5px 7px;font-size:12.3px;border-radius:5px;
}
form .row-4,form.row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.invoice-layout-grid{display:grid;grid-template-columns:1fr 250px;gap:16px;align-items:start;}
.invoice-layout-grid > *{min-width:0;}
.summary-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13.3px;border-bottom:1px solid var(--line);}
.summary-row:last-of-type{border-bottom:none;}
/* Compact "receipt" treatment for a narrow totals panel — smaller,
   tighter rows so a slim column still reads cleanly instead of just
   being the same spacious layout squeezed into less room, and a
   solid highlighted TOTAL block (rather than a plain border-top) so
   the one number that actually matters is unmistakable at a glance. */
.summary-compact .summary-row{font-size:12.3px;padding:4px 0;border-bottom:1px dashed var(--line);}
.summary-compact .summary-row:last-of-type{border-bottom:none;}
.summary-total{
  margin-top:10px;padding:12px 14px;background:var(--sidebar-1);color:#fff;border-radius:var(--radius);
  display:flex;justify-content:space-between;align-items:baseline;
}
.summary-total .label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:rgba(255,255,255,.65);}
/* Was var(--brand) — teal text on the box's own teal background
   (both now derived from the same sidebar color family) made the
   actual total amount nearly unreadable, exactly the same class of
   contrast bug already fixed for the sidebar nav. White is the
   correct, always-readable choice against this background, same as
   every other component using this same background color. */
.summary-total .value{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:800;color:#fff;}

/* Sticky bottom bar replacing the old side-panel Invoice Summary —
   the grand total and the Save/Cancel actions stay reachable without
   scrolling, while the items table above always gets the page's full
   width instead of sharing it with a column that, on a real laptop
   viewport, was the actual reason the items table needed to scroll
   horizontally in the first place. */
.invoice-total-bar{
  position:sticky;bottom:0;z-index:20;margin:0 -0px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px 20px;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.invoice-total-bar-total{display:flex;align-items:baseline;gap:6px;}
.invoice-total-bar-total .label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted);}
.invoice-total-bar-total .value{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:800;color:var(--ink);}
.invoice-total-bar-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* Popup for the detailed Subtotal/Discount/GST breakdown — the grand
   total itself never hides behind this, only the line-by-line detail
   does. */
.modal-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(15,21,32,.5);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-panel{
  background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:400px;max-height:85vh;overflow-y:auto;padding:18px 20px;
}
.modal-panel .card-head{margin:-18px -20px 16px;}
@media(max-width:1100px){ form .row-4,form.row-4{grid-template-columns:1fr 1fr;} }
.card{overflow-x:auto;}
.card table{min-width:560px;}
th{text-align:left;padding:9px 10px;color:#fff;background:var(--sidebar-1);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;border-bottom:none;}
th:first-child{border-top-left-radius:5px;}
th:last-child{border-top-right-radius:5px;}
td{padding:9px 10px;border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--paper);}

.tag{display:inline-block;padding:3px 9px;border-radius:5px;font-size:10.5px;font-weight:700;letter-spacing:.01em;}
.tag.active{background:var(--success-soft);color:var(--success);}
.tag.trial{background:#FDF3E0;color:#8A5A0A;}
.tag.inactive{background:var(--inactive-soft);color:var(--muted);}
.tag.wholesaler{background:var(--gold-soft);color:var(--accent-dark);}
.tag.suspended{background:var(--clay-soft);color:var(--danger);}
.tag.company_direct{background:var(--blue-100);color:var(--brand-dark);}

.btn{display:inline-flex;align-items:center;gap:6px;background:var(--sidebar-1);color:#fff;border:none;padding:9px 16px;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;transition:background .13s ease;}
.btn:hover{background:#232B3D;text-decoration:none;color:#fff;}
.btn.secondary{background:var(--accent);}
.btn.secondary:hover{background:var(--accent-dark);}
.btn.outline{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none;}
.btn.outline:hover{background:var(--paper);box-shadow:none;color:var(--ink);}
.btn.small{padding:5px 11px;font-size:11.8px;}
.btn.danger{background:var(--danger);}
.btn.primary{background:var(--brand);}
.btn.primary:hover{background:var(--brand-dark);}

form .field{margin-bottom:14px;}
form label{display:block;font-size:12.3px;color:var(--muted);margin-bottom:5px;font-weight:600;}
form input[type=text],form input[type=email],form input[type=password],form input[type=number],form input[type=date],form input[type=month],form input[type=tel],form input[type=url],form select,form textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:6px;font-size:13.3px;font-family:inherit;background:var(--card);color:var(--ink);
}
form input[type=date],form input[type=month]{ font-family:inherit; color-scheme:light; cursor:pointer; }
form input[type=date]::-webkit-calendar-picker-indicator,form input[type=month]::-webkit-calendar-picker-indicator{
  cursor:pointer;padding:3px;border-radius:4px;filter:opacity(.55);transition:filter .12s;
}
form input[type=date]::-webkit-calendar-picker-indicator:hover,form input[type=month]::-webkit-calendar-picker-indicator:hover{ filter:opacity(.9); background:var(--paper); }
[data-theme="dark"] form input[type=date],[data-theme="dark"] form input[type=month]{ color-scheme:dark; }
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand);}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
form .hint{font-size:11.3px;color:var(--muted);margin-top:4px;}
form .hint.warn{color:var(--danger);}

.summary-card-sticky{position:sticky;top:16px;}

.alert{padding:11px 15px;border-radius:6px;margin-bottom:16px;font-size:13.3px;border:1px solid transparent;}
.alert.success{background:var(--blue-100);color:var(--brand-dark);border-color:rgba(12,163,166,.25);}
.alert.error{background:var(--clay-soft);color:var(--danger);border-color:rgba(211,60,65,.25);}
.alert.warning{background:#FDF3E0;color:#8A5A0A;border:1px solid #F0D8A8;}

.login-wrap{max-width:380px;margin:80px auto;padding:0 20px;}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);border-top:3px solid var(--sidebar-1);padding:30px;box-shadow:var(--shadow-md);}
.login-card h1{font-size:19px;margin:0 0 4px;}
.login-card p{color:var(--muted);font-size:13.3px;margin:0 0 22px;}

.sidebar-toggle-btn{
  display:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;width:36px;height:36px;border-radius:6px;font-size:16px;cursor:pointer;
  align-items:center;justify-content:center;flex-shrink:0;
}
.topbar-brand{
  display:none;align-items:center;gap:6px;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:13px;color:#fff;flex-shrink:0;white-space:nowrap;
}
.topbar-brand .mark{
  width:22px;height:22px;border-radius:5px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;
}
.sidebar-backdrop{display:none;}

@media(max-width:820px){
  .shell{max-width:100vw;overflow-x:hidden;}
  .main{max-width:100vw;overflow-x:hidden;width:100%;}
  .container{max-width:100vw;overflow-x:hidden;padding:16px 12px 40px;}
  form .row{grid-template-columns:1fr;}
  form .row-4,form.row-4{grid-template-columns:1fr;}
  .invoice-layout-grid{grid-template-columns:1fr;}
  .card{padding:14px;}
  .card-head{margin:-14px -14px 14px;padding:11px 14px;}
  .page-head{padding:14px;}
  .summary-card-sticky{position:static;}
  .invoice-total-bar{flex-direction:column;align-items:stretch;position:static;padding:12px 14px;}
  .invoice-total-bar-total{justify-content:space-between;}
  .invoice-total-bar-actions{width:100%;}
  .invoice-total-bar-actions .btn{flex:1;justify-content:center;}
  .modal-panel{max-width:100%;}
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;max-height:100vh;width:82vw;max-width:300px;
    transform:translateX(-100%);transition:transform .25s ease;z-index:200;
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-nav{max-height:none;}
  .sidebar-backdrop{
    display:block;position:fixed;inset:0;background:rgba(10,14,20,0);pointer-events:none;
    z-index:190;transition:background .2s ease;
  }
  .sidebar-backdrop.open{background:rgba(10,14,20,.55);pointer-events:auto;}

  .sidebar-toggle-btn{display:inline-flex;}
  .topbar-brand{display:flex;}
  .topbar-title{display:none;}
  .topbar{padding:10px 14px;flex-wrap:nowrap;justify-content:space-between;gap:8px;}
  .topbar-actions{gap:8px;}
  .page-head{flex-direction:column;align-items:flex-start !important;gap:10px;}
  .page-head > div:last-child{width:100%;}
  .page-head > div:last-child a,.page-head > div:last-child button{flex:1;text-align:center;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .kpi{padding:12px;}

  input[id$="Search"]{width:100% !important;}
  .card > div[style*="justify-content:space-between"]{flex-wrap:wrap;row-gap:8px;}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr;}
  .topbar h2{font-size:14px;}
  .user-chip .name{display:none;}
}

/* ---------- Sidebar header: company name divider ---------- */
.sidebar-header{
  padding:14px 12px 16px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1); flex-shrink:0;
  display:flex; align-items:center; gap:10px;
}
.sidebar-header .mark{
  width:32px; height:32px; border-radius:6px; background:var(--brand);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; flex-shrink:0;
}
.sidebar-header .brand-text{ min-width:0; }
.sidebar-header .tenant-name{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; color:#fff;
  line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sidebar-header .tenant-sub{
  font-size:10.3px; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;
}

/* ---------- Topbar: notification bell + user menu ---------- */
.topbar-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  position:relative; width:34px; height:34px; border-radius:6px; border:1px solid var(--line);
  background:var(--card); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; color:var(--ink);
}
.icon-btn:hover{ background:var(--paper); }
.topbar .icon-btn{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); color:#fff; }
.topbar .icon-btn:hover{ background:rgba(255,255,255,.18); }
/* Page-level actions in the topbar (replaces the old page-head
   button row) — icon plus a small text label, not icon-only, so the
   action is legible at a glance rather than needing a hover tooltip
   to know what it does. Compact by real small type (10px), not by
   hiding the words. */
.action-chip{
  display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border-radius:6px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.1); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.action-chip:hover{ background:rgba(255,255,255,.2); }
.action-chip-icon{ font-size:13px; line-height:1; }
.action-chip-label{ line-height:1; }
/* The one action a page most wants tapped (e.g. "Add Product") gets
   the same solid accent-orange treatment used for primary buttons
   everywhere else, so it visually stands out from the rest of the
   translucent chips instead of blending in as just another utility
   action. */
.action-chip-primary{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; }
.action-chip-primary:hover{ background:var(--accent-dark) !important; }
/* A destructive action (Cancel Invoice, Void, etc.) gets a red tint
   rather than blending into the same translucent-white treatment as
   routine actions like Export or Edit — it should read as "careful"
   at a glance, not just another item in the row. */
.action-chip-danger{ background:rgba(248,113,113,.18) !important; border-color:rgba(248,113,113,.4) !important; color:#fff !important; }
.action-chip-danger:hover{ background:rgba(248,113,113,.3) !important; }
@media(max-width:900px){
  .action-chip-label{ display:none; }
  .action-chip{ width:30px; padding:0; justify-content:center; }
}
.icon-btn .badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  background:var(--danger); color:#fff; border-radius:999px; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.dropdown-wrap{ position:relative; }
.dropdown-panel{
  display:none; position:absolute; top:44px; right:0; width:320px; max-height:400px; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow-lg);
  z-index:50; padding:6px;
}
.dropdown-panel.open{ display:block; }
.dropdown-panel .dp-head{ padding:10px 10px 8px; font-size:11.3px; font-weight:700; text-transform:uppercase; color:var(--muted); letter-spacing:.05em; }
.dropdown-panel .dp-item{ padding:9px 10px; border-radius:6px; font-size:13px; display:block; color:var(--ink); }
.dropdown-panel .dp-item:hover{ background:var(--paper); text-decoration:none; }
.dropdown-panel .dp-item .dp-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.dropdown-panel .dp-empty{ padding:20px 10px; text-align:center; color:var(--muted); font-size:12.5px; }
.dropdown-panel hr{ border:none; border-top:1px solid var(--line); margin:6px 0; }

.user-chip{
  display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); cursor:pointer;
}
.topbar .user-chip{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
.topbar .user-chip .name{ color:#fff; }
.user-chip .avatar{
  width:26px; height:26px; border-radius:6px; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0;
}
.user-chip .name{ font-size:12.3px; font-weight:600; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Searchable select (type-to-filter dropdown) ---------- */
.ss-wrap{ position:relative; }
.ss-search{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:6px;font-size:13.3px;
  font-family:inherit;background:var(--card);color:var(--ink);cursor:text;
}
.ss-search:focus{ outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand); }
.ss-dropdown{
  display:none;position:absolute;top:calc(100% + 4px);left:0;max-height:240px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-lg);z-index:1000;padding:4px;
}
.ss-dropdown.open{ display:block; }
.ss-option{ padding:8px 10px;border-radius:5px;font-size:13px;cursor:pointer; }
.ss-option:hover,.ss-option.highlighted{ background:var(--paper); }
.ss-option.selected{ background:var(--blue-100); color:var(--brand-dark); font-weight:600; }
.ss-empty{ padding:10px;font-size:12.5px;color:var(--muted);text-align:center; }

@media print {
  .alert, .sidebar, .topbar, .no-print { display: none !important; }
}