/* ===== FLY CARE — EYE-COMFORT redesign =====
   Goal: total eye comfort for all-day use. Soft off-white surfaces (never pure
   white), soft-dark ink (never pure black), quiet even grid lines, low-chroma
   zebra, gentle header, calm teal used sparingly. Geist + Noto Sans Bengali.
   All original selectors & variable NAMES kept — only their VALUES retuned. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces — crisp white cards on a softly teal-tinted page (lively, low-glare) */
  --bg:        #eaeeed;   /* page bg: soft teal-gray — makes white cards pop */
  --bg-2:      #e0e6e4;
  --surface:   #ffffff;   /* cards / inputs: crisp white */
  --surface-2: #f3f7f6;
  --surface-3: #e9f0ee;
  --zebra:     #e9f4f4;   /* zebra: light teal (matches live acflycare) */
  --row-hover: #dcebe9;   /* row hover: clear teal tint */
  --total-bar: #2f4140;

  /* Table header — light gray bar with BLACK bold text (clear, easy to read) */
  --thead:      #e7eaec;   /* light gray header */
  --thead-text: #111418;   /* black text */

  /* Borders / lines — thin & quiet */
  --border:    #e5e8e6;
  --line:      #e5e8e6;
  --line-2:    #dadedc;
  --divider:   #e8ebe9;
  --hairline:  #eef1ef;
  --grid:      #9aa3ad;   /* inner grid lines: clearly visible (high-visibility mode) */
  --grid-outer:#7e8890;   /* outer frame: clearly visible */
  --thead-bg:  #eef2f0;   /* header: soft, low-chroma, soft-dark bold text */

  /* Ink (text) — deep, crisp, fully readable */
  --text:    #1c2329;   /* body ink */
  --ink:     #161c22;   /* headings */
  --ink-2:   #2f373e;
  --muted:   #4f5860;   /* secondary text — clearly readable */
  --ink-3:   #4f5860;
  --ink-4:   #6f7880;
  --soft:    #6f7880;

  /* Sidebar — clean white panel, teal active (Claude Design refresh) */
  --sidebar-bg:     #ffffff;   /* crisp white panel */
  --sidebar-border: #e2e6e4;
  --sidebar-text:   #1c2329;
  --sidebar-hover:  #eaf3f1;   /* gentle teal hover */
  --sidebar-active: #1e6a6a;
  --sidebar-active-text: #ffffff;

  /* Accent — teal, a touch livelier */
  --accent:      #1d7373;
  --accent-deep: #1e5a5a;     /* deep teal for primary actions */
  --accent-soft: #d3e8e6;     /* teal tint */
  --accent-ink:  #134f4f;
  --teal:        #1d7373;
  --teal-soft:   #d3e8e6;

  /* Semantic */
  --pos:      #1f7a3e;
  --pos-ink:  #155a2a;
  --pos-soft: #d8efde;
  --neg:      #b13a3a;
  --neg-ink:  #8b2828;
  --neg-soft: #f3dadc;
  --warn:     #a06a1f;
  --warn-ink: #7d5113;
  --warn-soft:#f3e7cd;
  --amber:     #a06a1f;
  --amber-soft:#f3e7cd;
  --info:     #1e6a6a;
  --info-ink: #103e3e;
  --info-soft:#d6ebec;

  /* Shadows — very minimal */
  --shadow-xs: 0 1px 2px rgba(16,32,31,.05);
  --shadow-sm: 0 1px 2px rgba(16,32,31,.06);
  --shadow-md: 0 1px 3px rgba(16,32,31,.07), 0 4px 12px rgba(16,32,31,.05);
  --shadow-lg: 0 12px 32px rgba(16,32,31,.12);
  --ring: 0 0 0 3px rgba(30,106,106,.22);

  /* Radius — softer, modern (Claude Design refresh) */
  --r-sm: 6px;
  --r:    8px;
  --r-md: 9px;
  --r-lg: 12px;

  /* Layout — slightly wider for comfort */
  --sidebar-w: 232px;
  --topbar-h: 52px;
  --content-max: 1440px;   /* comfortable reading width on big monitors */

  --mono: 'Geist', 'Noto Sans Bengali', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(15,23,32,.16); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(15,23,32,.30); }

body {
  margin: 0;
  font-family: 'Geist', 'Noto Sans Bengali', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.018em; }
a { color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent); }

.mono { font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; }
.num  { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }

/* ========== Layout — Khata grid ========== */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;   /* wide tables scroll inside .table-wrap, never the whole page */
  transition: grid-template-columns .2s ease;
}

/* Collapsed sidebar — icons only */
.app-shell.sidebar-collapsed { grid-template-columns: 60px minmax(0, 1fr); }
.app-shell.sidebar-collapsed .sidebar { padding: 14px 6px; gap: 10px; }

/* Hide ALL text content in collapsed mode */
.app-shell.sidebar-collapsed .sidebar-logo .text-fallback,
.app-shell.sidebar-collapsed .sidebar-user .name,
.app-shell.sidebar-collapsed .sidebar-user .role,
.app-shell.sidebar-collapsed .sidebar-nav a.nav-item .label,
.app-shell.sidebar-collapsed .sidebar-nav a.nav-item .caret,
.app-shell.sidebar-collapsed .sidebar-nav .submenu { display: none !important; }

/* Hide secondary icons (caret/chevron) inside nav links — keep only the first icon */
.app-shell.sidebar-collapsed .sidebar-nav a.nav-item i:not(:first-child) { display: none !important; }

/* Brand: just show the FC tile */
.app-shell.sidebar-collapsed .sidebar-logo {
  padding: 4px;
  justify-content: center;
  height: auto;
  border-bottom: none;
}
.app-shell.sidebar-collapsed .sidebar-logo .text-fallback { display: inline-flex !important; gap: 0; }
.app-shell.sidebar-collapsed .sidebar-logo .text-fallback > * { display: none !important; }
.app-shell.sidebar-collapsed .sidebar-logo .text-fallback::before { display: inline-grid !important; }

.app-shell.sidebar-collapsed .sidebar-user { padding: 6px 0; text-align: center; }
.app-shell.sidebar-collapsed .sidebar-user .icons { justify-content: center; gap: 4px; flex-wrap: wrap; }

.app-shell.sidebar-collapsed .sidebar-nav a.nav-item {
  justify-content: center;
  padding: 10px 6px;
  gap: 0;
  position: relative;
  font-size: 0;          /* hide any stray text */
}
.app-shell.sidebar-collapsed .sidebar-nav a.nav-item i {
  width: auto;
  font-size: 18px;      /* restore icon size (font-size:0 zeroed everything) */
  opacity: 1;
}

/* Hover tooltip — slide-in label */
.app-shell.sidebar-collapsed .sidebar-nav a.nav-item:hover::after {
  content: attr(data-label);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  white-space: nowrap;
  margin-left: 10px;
  z-index: 999;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  letter-spacing: 0;
}

/* ========== Sidebar — light grey, compact, sticky ========== */
.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--line);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Brand block */
.sidebar-logo {
  background: transparent;
  padding: 4px 6px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--line);
  height: auto;
}
.sidebar-logo .text-fallback {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.sidebar-logo .text-fallback::before {
  content: 'FC';
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-size: 11px; font-weight: 700;
  box-shadow: none;
}
.sidebar-logo .text-fallback i { display: none; }
.sidebar-logo .text-fallback small {
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: .02em;
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
}

/* User block */
.sidebar-user {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.sidebar-user .name {
  color: var(--ink);
  font-weight: 600;
  font-size: 12.5px;
}
.sidebar-user .role {
  color: var(--ink-3);
  font-size: 11px;
  margin-top: 1px;
}
.sidebar-user .icons {
  margin-top: 8px;
  display: flex; gap: 5px;
}
.sidebar-user .icons a {
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  font-size: 11px;
  transition: all .15s ease;
}
.sidebar-user .icons a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* Nav */
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  overflow-y: auto;
}

.sidebar-nav a.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--r);
  border: none;
  transition: all .12s ease;
}
.sidebar-nav a.nav-item:hover {
  background: var(--bg);
  color: var(--ink);
}
.sidebar-nav a.nav-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-active-text);
}
.sidebar-nav a.nav-item.active i { color: var(--sidebar-active-text); }
.sidebar-nav a.nav-item i {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex: none;
  opacity: .85;
}
.sidebar-nav a.nav-item .caret {
  margin-left: auto;
  font-size: 10px;
  opacity: .6;
}

.sidebar-nav .submenu {
  background: transparent;
  margin: 1px 0 3px 14px;
  border-radius: 0;
  padding: 0;
}
.sidebar-nav .submenu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 20px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-sm);
  border: none;
  transition: all .12s ease;
}
.sidebar-nav .submenu a:hover { color: var(--ink); }
.sidebar-nav .submenu a:hover { color: var(--ink); background: var(--bg); }
.sidebar-nav .submenu a.active {
  color: var(--ink);
  background: var(--bg);
  font-weight: 600;
}

/* ========== Main — Khata grid column ========== */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

/* ========== Topbar — thin, breadcrumb-style ========== */
.topbar {
  background: var(--bg);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
}
.topbar .menu-icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
  cursor: pointer;
  border: 1px solid var(--line-2);
  transition: background .12s ease;
}
.topbar .menu-icon-btn:hover { background: var(--surface-2); }

.topbar .clock-box {
  background: var(--surface-2);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 13px;
  min-width: 108px;
  text-align: center;
  font-family: var(--mono);
  letter-spacing: .3px;
}

.topbar .invoice-search {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  height: 36px;
}
.topbar .invoice-search select {
  border: none;
  background: transparent;
  padding: 0 12px;
  font-size: 12.5px;
  outline: none;
  border-right: 1px solid var(--border);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.topbar .invoice-search input {
  border: none;
  padding: 0 12px;
  font-size: 12.5px;
  width: 200px;
  outline: none;
  background: transparent;
  font-family: inherit;
  color: var(--text);
}
.topbar .invoice-search button {
  background: transparent;
  border: none;
  padding: 0 14px;
  color: var(--muted);
  cursor: pointer;
}
.topbar .invoice-search button:hover { color: var(--accent); }

/* Live invoice search dropdown */
.invoice-search-wrap { position: relative; }
.inv-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 70;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.14));
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
}
.inv-sr-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12.5px;
  color: var(--text);
}
.inv-sr-item:hover { background: var(--accent-soft); }
.inv-sr-no   { font-weight: 800; color: var(--accent-ink); font-family: 'Geist Mono', monospace; }
.inv-sr-name { font-weight: 700; color: #0a3d3d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-sr-ph   { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.inv-sr-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 12.5px; }

.topbar .spacer { flex: 1; }

.topbar .clear-cache-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(30,106,106,.18);
}
.topbar .clear-cache-btn:hover { background: var(--accent-deep); }

.topbar .lang-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.topbar .lang-icon:hover { color: var(--text); border-color: var(--soft); }
.topbar .lang-icon.alt { background: var(--surface-2); }

.topbar .profile-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800;
  cursor: pointer;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(30,106,106,.18);
  letter-spacing: .4px;
}

/* ========== Content ========== */
.content-wrap {
  flex: 1;
  background: var(--bg);
  padding: 16px 12px;
  min-width: 0;
  min-height: calc(100vh - var(--topbar-h));
  width: 100%;
  /* full width — use the whole screen so wide tables (Action column) aren't clipped */
}

/* ========== Page head ========== */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 20px; }
.page-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.page-sub   { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ========== Action button row ========== */
.action-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.action-btn {
  background: #fff;
  color: var(--accent-ink);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
  box-shadow: var(--shadow-xs);
}
.action-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-1px);
}
.action-btn i { font-size: 13px; color: var(--accent); }

/* Shortcut customiser (dropdown to pin/unpin top shortcuts) */
.sc-customize { position: relative; display: inline-flex; }
.sc-toggle { border-style: dashed; }
.sc-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 230px;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
  padding: 6px;
}
.sc-menu-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  padding: 6px 8px 4px;
}
.sc-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  cursor: pointer;
}
.sc-opt:hover { background: var(--accent-soft); }
.sc-opt input { accent-color: var(--accent); cursor: pointer; }
.sc-opt i { color: var(--accent); font-size: 14px; }

/* ========== Stat grid ========== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1024px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .stat-grid { grid-template-columns: 1fr; } }

/* ========== Stat cards — clean compact KPI ========== */
.stat-card-classic {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-xs);
  min-height: 86px;
  transition: all .15s ease;
  position: relative;
  overflow: hidden;
}
.stat-card-classic::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent-color, var(--accent));
  opacity: .85;
}
.stat-card-classic:hover {
  border-color: var(--accent-color, var(--accent));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stat-card-classic .label {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--muted);
  letter-spacing: .8px;
  text-transform: uppercase;
}
.stat-card-classic .value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-feature-settings: 'tnum';
}
.stat-card-classic .icon-illustration {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  font-size: 18px;
  background: var(--accent-bg, var(--accent-soft));
  color: var(--accent-color, var(--accent));
  flex-shrink: 0;
}

/* Per-metric color theming — muted, low-chroma for eye comfort */
.stat-card-classic.c-blue   { --accent-color: #3f6fa3; --accent-bg: #e7edf3; }
.stat-card-classic.c-purple { --accent-color: #6c6191; --accent-bg: #ebe9f1; }
.stat-card-classic.c-green  { --accent-color: #3f8b5f; --accent-bg: #e4f0e8; }
.stat-card-classic.c-teal   { --accent-color: #1e6a6a; --accent-bg: #dde9e7; }
.stat-card-classic.c-red    { --accent-color: #b05a52; --accent-bg: #f2e5e3; }
.stat-card-classic.c-gold   { --accent-color: #9c7c3c; --accent-bg: #f0ebdb; }
.stat-card-classic.c-cyan   { --accent-color: #3a7f8c; --accent-bg: #e2eef0; }
.stat-card-classic.c-orange { --accent-color: #b06a3c; --accent-bg: #f1e8df; }
.stat-card-classic.c-pink   { --accent-color: #a55d7e; --accent-bg: #f1e5ec; }
.stat-card-classic.c-indigo { --accent-color: #54588f; --accent-bg: #e8e9f2; }
.stat-card-classic.c-lime   { --accent-color: #6b8b3c; --accent-bg: #ebf0dd; }

/* ========== Section cards — Khata ========== */
.section-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
  margin-bottom: 14px;
  overflow: hidden;
}
.section-header {
  padding: 14px 18px;
  font-weight: 700;
  font-size: 14.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  letter-spacing: 0;
}
.section-header .more-btn {
  background: none; border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-size: 14px;
  transition: all .12s ease;
}
.section-header .more-btn:hover { background: var(--bg); color: var(--ink); }
.section-body { padding: 0; }
.section-body.padded { padding: 18px; }

/* ========== Company info block (above invoice list / print header) ========== */
.company-head {
  text-align: center;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.company-head .ch-addr { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.company-head .ch-line { font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.6; }

/* ========== Tables — Khata: dense, subtle, numerics-aware ========== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--grid-outer);
  border-radius: var(--r-md);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--surface);
  margin-bottom: 0;
  border: 1px solid var(--grid-outer);   /* visible outer frame */
}
.table-wrap > .table { border: none; }

/* Header — slate-gray with white text (matches live app), full visible grid */
.table thead th {
  background: var(--thead);
  color: var(--thead-text);
  font-weight: 700;
  padding: 8px 8px;
  text-align: left;
  border: 1px solid var(--grid-outer);
  border-bottom: 1.5px solid var(--grid-outer);
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
}
/* opt-in: bolder body rows (used on Invoice list) */
.table-bold tbody td { font-weight: 700; }
.table thead th:first-child { padding-left: 14px; }
.table thead th:last-child  { padding-right: 14px; }

/* Body cells — full grid (vertical + horizontal), full-black text */
.table tbody td {
  padding: 8px 8px;
  border: 1px solid var(--grid);
  background: var(--surface);
  text-align: left;
  vertical-align: middle;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  transition: background .12s ease;
  line-height: 1.45;
  white-space: normal;   /* wraps only at spaces — dates/numbers stay one line, long text wraps to fit */
}
.table tbody td:first-child { padding-left: 14px; }
.table tbody td:last-child  { padding-right: 14px; }
/* opt-in wrapping for long free-text columns when you want it */
.table td.wrap, .table th.wrap { white-space: normal; }

/* Zebra striping — alternating rows for clearer separation */
.table tbody tr:nth-child(even) td { background: var(--zebra); }
.table tbody tr:hover td { background: var(--row-hover); }
/* Full grid (every cell bordered) gives the clear acflycare-style separation. */

/* ---- Table alignment & emphasis (eye-comfort: soft ink, standard accounting alignment) ---- */
/* Text columns left; amount columns right; centre only where explicitly marked */
.table thead th, .table tbody td, .table tfoot td, .table tfoot th { text-align: left; }
.table td.r, .table th.r,
.table td.text-right, .table th.text-right { text-align: right; }
.table td.text-center, .table th.text-center,
.table td.c, .table th.c { text-align: center; }
/* Full-black text everywhere for maximum visibility */
.table thead th, .table tbody td, .table tfoot td,
.table td.r, .table th.r { color: #000; }
.table tbody td.text-muted, .table tbody td .text-muted { color: #000; }
.table tbody td.small, .table tbody td .small { color: #000; }
/* Bold the customer / client name (gentle weight, heading ink) — keep on ONE line */
.table td.fw-semibold, .table .fw-semibold, .table .client-name { font-weight: 600; color: var(--ink); }
.table td.client-name, .table .client-name { white-space: normal; }

/* numeric columns (.r) — monospace, right-aligned, slightly bold for emphasis */
.table td.r, .table th.r {
  text-align: right;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
}
.table td.r { font-weight: 600; }
.table td.c, .table th.c { text-align: center; }

/* When markup uses inherited centered style — keep it readable */
.table.center thead th,
.table.center tbody td { text-align: center; }
.table-left tbody td { text-align: left; }

/* Tfoot */
.table tfoot td, .table tfoot th {
  padding: 11px 8px;
  background: var(--surface-2);
  font-weight: 700;
  color: #000;
  border: 1px solid var(--grid);
  border-top: 2px solid var(--grid-outer);
  font-size: 14px;
}
.table tfoot td:first-child { padding-left: 14px; }
.table tfoot td:last-child  { padding-right: 14px; }

/* Compact variant for ultra-wide tables */
.table-compact thead th { padding: 8px 6px; font-size: 11px; }
.table-compact tbody td { padding: 8px 6px; font-size: 13px; }

/* Invoice line items — top row + full-width description sub-row pair */
.table tbody.line-items tr.row-top td { border-bottom: none; padding-bottom: 6px; }
.table tbody.line-items tr.row-desc td { border-bottom: 1px solid var(--line); background: var(--surface); padding-top: 0; }
.table tbody.line-items tr.row-desc:hover td { background: var(--surface); }
.table tbody.line-items tr.row-top:hover td { background: var(--surface-2); }
.table tbody.line-items tr.row-top:hover + tr.row-desc td { background: var(--surface-2); transition: background .12s; }
.table tbody.line-items tr.row-desc td:first-child { padding: 0; }

/* ----- Single-line filter bar (used on Invoice list, Reports etc) ----- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.filter-bar .filter-cell { flex: 1 1 0; min-width: 130px; }
.filter-bar .filter-cell .form-label {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.filter-bar .filter-cell .form-control,
.filter-bar .filter-cell .form-select,
.filter-bar .filter-cell .search-select .ss-display {
  font-size: 13px; padding: 7px 10px;
}
.filter-bar .filter-cell input[type="date"] { min-width: 0; flex: 1; }
.filter-bar .filter-actions {
  flex: 0 0 auto;
  display: flex; gap: 6px; align-items: center;
  min-width: auto;
}
.filter-bar .filter-actions .btn { padding: 7px 12px; font-size: 12.5px; }

/* ========== Buttons — Khata: 34px height, comfortable ========== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 500;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background .12s ease, border-color .12s ease;
  font-family: inherit;
  letter-spacing: 0;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:hover { background: var(--surface-2); }
.btn-sm { height: 28px; padding: 0 12px; font-size: 13px; }

/* Primary — black */
.btn-primary       { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: #000; }

/* Add — also primary black, with + iconic feel */
.btn-add           { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-add:hover     { background: #000; }

/* Search — primary */
.btn-search        { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-search:hover  { background: #000; }

/* Outlined neutrals */
.btn-print, .btn-back, .btn-outline {
  background: var(--surface); border-color: var(--line-2); color: var(--ink);
}
.btn-print:hover, .btn-back:hover, .btn-outline:hover {
  background: var(--surface-2);
}

/* Destructive — neg-on-white */
.btn-danger, .btn-clear-filter, .btn-export {
  background: var(--surface); border-color: var(--line-2); color: var(--neg);
}
.btn-danger:hover, .btn-clear-filter:hover, .btn-export:hover {
  background: var(--neg-soft); border-color: var(--neg);
}

/* Light variant */
.btn-light         { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
.btn-light:hover   { background: var(--bg); }

/* ----- Action ▼ pill — restrained ----- */
.btn-action-dropdown {
  background: var(--surface);
  color: var(--ink);
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: 13.5px;
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s ease;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0;
}
.btn-action-dropdown:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* Floating dropdown menu */
.action-dd-menu {
  position: absolute;
  display: none;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  z-index: 200;
  padding: 6px;
  font-size: 14.5px;
}
.action-dd-menu.open { display: block; }
.action-dd-menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-weight: 500;
  transition: background .12s ease;
}
.action-dd-menu a i { font-size: 14px; width: 18px; text-align: center; opacity: .8; }
.action-dd-menu a:hover { background: var(--bg); color: var(--ink); }
.action-dd-menu a:hover i { opacity: 1; }

/* ========== Forms — Khata: 34px controls, comfortable ========== */
.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.form-control, .form-select {
  width: 100%;
  height: 34px;
  padding: 0 13px;
  font-size: 14.5px;
  font-weight: 400;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
  letter-spacing: 0;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ink);
  box-shadow: var(--ring);
}
.form-control:hover, .form-select:hover { border-color: var(--ink-3); }
.form-control-sm { height: 30px; padding: 0 11px; font-size: 13.5px; }
textarea.form-control { height: auto; min-height: 84px; padding: 10px 13px; resize: vertical; line-height: 1.5; }
.form-control::placeholder, .form-select::placeholder { color: var(--ink-4); }

/* ========== Badges / Tags — Khata pill style ========== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 12px;
  letter-spacing: 0;
  line-height: 1.4;
  gap: 6px;
  border: 1px solid transparent;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-due          { background: var(--neg-soft);  color: var(--neg); }
.badge-paid         { background: var(--pos-soft);  color: var(--pos); }
.badge-pending      { background: var(--warn-soft); color: var(--warn); }
.badge-info         { background: var(--teal-soft); color: var(--teal); }
.badge-soft-success { background: var(--pos-soft);  color: var(--pos); }
.badge-soft-danger  { background: var(--neg-soft);  color: var(--neg); }
.badge-soft-warning { background: var(--warn-soft); color: var(--warn); }
.badge-soft-info    { background: var(--teal-soft); color: var(--teal); }

/* ========== Alerts ========== */
.alert {
  padding: 12px 16px;
  border-radius: var(--r);
  font-size: 13px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid;
  box-shadow: var(--shadow-xs);
}
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: var(--pos-ink); }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: var(--neg-ink); }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: var(--info-ink); }
.alert-dismissible { padding-right: 38px; position: relative; }
.btn-close {
  background: transparent; border: 0; font-size: 20px;
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  opacity: .5; cursor: pointer; line-height: 1;
}
.btn-close::before { content: '×'; }
.btn-close:hover { opacity: 1; }

/* ========== Pagination (Khata-style) ========== */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 12px 0 4px;
}
.pagination .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
  cursor: pointer;
  font-family: inherit;
}
.pagination .page-btn:hover { background: var(--surface-2); }
.pagination .page-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.pagination .page-btn.disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--ink-3);
}
.pagination .page-btn.ellipsis {
  border: none; background: transparent; color: var(--ink-3);
  cursor: default; pointer-events: none; min-width: auto; padding: 0 4px;
}
/* Bootstrap-style page-item compatibility */
.page-item .page-link {
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--ink);
  font-size: 13px;
  background: var(--surface);
  display: inline-flex;
  font-weight: 500;
}
.page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.page-item .page-link:hover { background: var(--surface-2); }

/* ========== Empty state ========== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--soft);
}
.empty-state i {
  font-size: 48px;
  opacity: .35;
  display: block;
  margin-bottom: 14px;
  color: var(--muted);
}
.empty-state p { margin: 0; font-size: 13.5px; font-weight: 500; }

/* ========== Login (split-screen modern) ========== */
.classic-login-bg {
  min-height: 100vh;
  background: linear-gradient(160deg, #eef3f1 0%, #e4ece9 55%, #d9e7e3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.classic-login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px rgba(16,32,31,.12), 0 4px 12px rgba(16,32,31,.06);
  width: 100%;
  max-width: 1000px;
  padding: 48px 54px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
}
.classic-login-card .left-logo {
  text-align: center;
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  padding: 40px;
  background: var(--surface-2);
}
.classic-login-card .right-form { max-width: 380px; width: 100%; margin: 0 auto; }
.classic-login-card .right-form .brand-mini { text-align: center; margin-bottom: 20px; }
.classic-login-card .right-form h2 {
  text-align: center;
  color: var(--accent-deep);
  font-size: 28px;
  margin: 0 0 28px;
  font-weight: 800;
}
.classic-login-card .form-label { color: var(--accent-deep); font-weight: 700; }
.classic-login-card .input-group { display: flex; align-items: stretch; }
.classic-login-card .input-group-icon {
  width: 42px;
  background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--muted);
  font-size: 15px;
}
.classic-login-card .input-group .form-control { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.classic-login-card .form-group { margin-bottom: 18px; }
.classic-login-card .remember { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-size: 13px; color: var(--muted); }
.classic-login-card .btn-signin {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  letter-spacing: .3px;
  box-shadow: 0 2px 8px rgba(30,106,106,.22);
  transition: all .2s ease;
}
.classic-login-card .btn-signin:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30,106,106,.3); }
.classic-login-card .forgot { text-align: center; margin-top: 12px; }
.classic-login-card .forgot a { color: var(--accent-deep); font-size: 13px; text-decoration: underline; font-weight: 600; }
.classic-login-card .demo-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 12px;
}

/* ========== Utilities ========== */
.d-flex { display: flex; }
.flex-1 { flex: 1; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 22px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 22px; }
.text-muted { color: var(--muted); }
.text-success { color: var(--pos-ink); font-weight: 700; }
.text-danger  { color: var(--neg-ink); font-weight: 700; }
.text-warning { color: var(--warn-ink); }
.text-primary { color: var(--accent-deep); }
.text-end { text-align: right; }
.text-center { text-align: center; }
/* Inside tables the base `.table tbody td { text-align:left }` rule has higher
   specificity than `.text-end`/`.text-center`, so right/centre alignment on
   number columns was being ignored. These table-scoped rules win it back. */
.table td.text-end, .table th.text-end { text-align: right !important; }
.table td.text-center, .table th.text-center { text-align: center !important; }
.table td.num, .table th.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.fw-bold { font-weight: 800; }
.fw-semibold { font-weight: 600; }
.small { font-size: 12px; color: var(--muted); }
.w-100 { width: 100%; }

/* Grid */
.row { display: flex; flex-wrap: wrap; margin: -8px; }
.row > [class*='col-'] { padding: 8px; }
.col-12 { width: 100%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.333%; }
.col-md-6 { width: 50%; }
.col-md-8 { width: 66.667%; }
.col-md-9 { width: 75%; }
.col-lg-4 { width: 33.333%; }
.col-lg-5 { width: 41.667%; }
.col-lg-6 { width: 50%; }
.col-lg-7 { width: 58.333%; }
.col-lg-8 { width: 66.667%; }
.col-sm-6 { width: 50%; }

@media (max-width: 1024px) {
  .col-md-4, .col-md-6, .col-md-8, .col-md-9 { width: 50%; }
  .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 { width: 50%; }
}
@media (max-width: 720px) {
  .col-md-3 { width: 50%; }
}
@media (max-width: 480px) {
  .col-md-3 { width: 100%; }
}
@media (max-width: 768px) {
  /* Single-column layout — don't reserve the sidebar grid track */
  .app-shell,
  .app-shell.sidebar-collapsed { grid-template-columns: 1fr !important; }

  /* Sidebar becomes an off-canvas drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 260px; max-width: 84vw;
    z-index: 1001;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.18);
  }
  .sidebar.open { transform: translateX(0); }
  /* On mobile the drawer always shows full labels even if "collapsed" was set on desktop */
  .app-shell.sidebar-collapsed .sidebar { padding: 14px; }
  .app-shell.sidebar-collapsed .sidebar .label,
  .app-shell.sidebar-collapsed .sidebar .caret,
  .app-shell.sidebar-collapsed .sidebar-user .name,
  .app-shell.sidebar-collapsed .sidebar-user .role,
  .app-shell.sidebar-collapsed .sidebar-logo .text-fallback > * { display: revert !important; }

  /* Backdrop behind the open drawer */
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 1000; opacity: 0; visibility: hidden; transition: opacity .25s;
  }
  .sidebar-backdrop.open { opacity: 1; visibility: visible; }

  .main { margin-left: 0; }

  /* Topbar: keep it tidy on small screens */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; position: sticky; top: 0; z-index: 900; }
  .topbar .invoice-search { order: 5; flex: 1 1 100%; }
  .topbar .invoice-search input { width: 100%; }
  .topbar .clock-box { font-size: 12px; }
  .topbar .clear-cache-btn,
  .topbar .lang-icon { display: none; }
  #sidebarToggle { font-size: 22px; }

  /* Content + grid */
  .content-wrap { padding: 12px 10px; }
  /* keep tables comfortably readable on small screens (scroll inside the wrap) */
  .table { font-size: 13px; }
  .table thead th, .table tbody td { padding: 9px 9px; }
  .row > [class*='col-'] { width: 100%; }
  .classic-login-card { grid-template-columns: 1fr; padding: 30px 25px; gap: 25px; }

  /* Action bar buttons wrap nicely */
  .action-bar { flex-wrap: wrap; gap: 8px; }
  .action-bar .action-btn { flex: 1 1 auto; justify-content: center; }

  /* Tables scroll horizontally instead of overflowing the screen */
  .section-card table,
  .section-body table,
  .card-body table,
  .table-responsive table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* Section header buttons stack */
  .section-header { flex-wrap: wrap; gap: 8px; }
}

/* ========== Compatibility aliases ========== */
.btn-outline-primary { background: #fff; border: 1px solid var(--accent); color: var(--accent); }
.btn-outline-primary:hover { background: var(--accent); color: #fff; }
.btn-outline-secondary { background: #fff; border: 1px solid var(--border); color: var(--text); }
.btn-outline-info { background: #fff; border: 1px solid var(--info); color: var(--info); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  margin-bottom: 18px;
  overflow: hidden;
}
.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--divider);
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.card-body { padding: 18px; }
.card-body.p-0 { padding: 0; }
.card-footer { padding: 14px 18px; border-top: 1px solid var(--divider); background: var(--surface-2); }

.table-responsive { overflow-x: auto; }
.table-sm thead th { padding: 8px 12px; font-size: 11px; }
.table-sm tbody td { padding: 8px 12px; font-size: 12.5px; font-weight: 500; }
.table-hover tbody tr:hover { background: var(--surface-2); }
.table-bordered, .table-bordered th, .table-bordered td { border: 1px solid var(--border); }
.table-light { background: var(--surface-2); }

.list-group { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.list-group-flush { border: none; border-radius: 0; }
.list-group-item { padding: 12px 14px; border-bottom: 1px solid var(--divider); background: #fff; }
.list-group-item:last-child { border-bottom: none; }

.g-1 { margin: -2px; } .g-1 > [class*='col-'] { padding: 2px; }
.g-2 { margin: -4px; } .g-2 > [class*='col-'] { padding: 4px; }
.g-3 { margin: -8px; } .g-3 > [class*='col-'] { padding: 8px; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }

/* ========== Searchable select (combobox) ========== */
.search-select {
  position: relative;
  width: 100%;
}
.search-select .ss-display {
  width: 100%;
  padding: 9px 36px 9px 13px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='7' r='5'/><line x1='11' y1='11' x2='14' y2='14'/></svg>") right 11px center no-repeat;
  outline: none;
  font-family: inherit;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.search-select .ss-display:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-select .ss-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 90;
  display: none;
}
.search-select .ss-menu.open { display: block; }
.search-select .ss-option {
  padding: 9px 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--divider);
  transition: background .12s;
}
.search-select .ss-option:last-child { border-bottom: none; }
.search-select .ss-option:hover,
.search-select .ss-option.active {
  background: var(--accent-soft);
}
.search-select .ss-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
}
.search-select .ss-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  font-family: var(--mono);
}
.search-select .ss-empty {
  padding: 14px;
  text-align: center;
  color: var(--soft);
  font-size: 13px;
}

/* ========== Invoice edit layout — main + sticky totals ========== */
.invoice-edit-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}
.invoice-edit-layout .totals-card {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.invoice-edit-layout .totals-card h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--divider);
}
.invoice-edit-layout .totals-card .row-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13.5px;
}
.invoice-edit-layout .totals-card .row-line .lbl { color: var(--muted); font-weight: 600; }
.invoice-edit-layout .totals-card .row-line .val { font-weight: 700; font-family: var(--mono); }
.invoice-edit-layout .totals-card .row-line.grand {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
  margin-top: 6px;
  font-size: 15px;
}
.invoice-edit-layout .totals-card .row-line.grand .lbl { color: var(--text); font-weight: 800; }
.invoice-edit-layout .totals-card .row-line.grand .val { color: var(--accent-deep); font-weight: 800; font-size: 16px; }
.invoice-edit-layout .totals-card .small-input {
  width: 100%; padding: 6px 10px;
  border: none; background: transparent;
  font-weight: 700; font-family: var(--mono);
  text-align: right; font-size: 13.5px;
  color: var(--text);
}
.invoice-edit-layout .form-actions {
  display: flex; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--divider);
}
@media (max-width: 1100px) {
  .invoice-edit-layout { grid-template-columns: 1fr; }
  .invoice-edit-layout .totals-card { position: static; }
}

/* ========== Accent themes (compare only — pick one to bake in) ==========
   Each retunes ONLY the accent + its low-chroma tints, so eye comfort holds.
   Switch by setting <html data-theme="indigo|forest|blue">. Default = teal. */

/* ========== Print ========== */
@media print {
  @page { margin: 12mm; }
  html, body { background: #fff !important; }

  /* Hide app chrome */
  .sidebar, .topbar, .action-bar, .no-print, .theme-switcher { display: none !important; }
  /* The shell is a 2-col grid (sidebar | main); with the sidebar hidden the
     main would collapse into the fixed sidebar track — force full width. */
  .app-shell { display: block !important; grid-template-columns: 1fr !important; }
  .main { margin-left: 0 !important; width: 100% !important; }
  .content-wrap { background: #fff !important; padding: 0 !important; min-height: 0 !important; }

  /* Hide all interactive controls — keep only the report */
  .btn, button, .pagination, .search-select,
  input, select, textarea, .form-control, .form-select,
  .btn-action-dropdown, .action-dd-menu { display: none !important; }
  form[method="get"], form.filter-bar { display: none !important; }

  /* Hide any column explicitly marked as action/no-print */
  .col-action, th.col-action, td.col-action { display: none !important; }

  /* Clean cards / containers */
  .section-card { border: none !important; box-shadow: none !important; margin: 0 !important; }
  .section-body.padded { padding: 0 !important; }
  .section-header .btn, .section-header form { display: none !important; }
  .stat-card-classic { box-shadow: none; }

  /* Tables span full width, nothing clipped */
  .table-wrap { overflow: visible !important; }
  .table { font-size: 12px !important; }
  /* tfoot (totals/closing) should appear ONCE at the very end, not repeat on every page */
  .table tfoot { display: table-row-group !important; }

  /* Force backgrounds/colours (zebra, totals bar, badges) to print */
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ===== Per-staff colour themes (header stays light-gray; only accent/tints change) ===== */
html[data-theme="teal"]    { --accent:#1d7373; --accent-deep:#155e5e; --accent-soft:#d3e8e6; --accent-ink:#134f4f; --teal:#1d7373; --teal-soft:#d3e8e6; --info:#1d7373; --info-ink:#134f4f; --info-soft:#d3e8e6; --sidebar-active:#1e6a6a; --sidebar-active-text:#fff; --sidebar-hover:#eaf3f1; --row-hover:#dcebe9; --zebra:#e9f4f4; --bg:#eaeeed; --bg-2:#e0e6e4; --total-bar:#e4f0ef; --ring:0 0 0 3px rgba(29,115,115,.22); }
html[data-theme="navy"]    { --accent:#294b8c; --accent-deep:#1d3868; --accent-soft:#e7edf7; --accent-ink:#1d3868; --teal:#294b8c; --teal-soft:#e7edf7; --info:#294b8c; --info-ink:#1d3868; --info-soft:#e7edf7; --sidebar-active:#294b8c; --sidebar-active-text:#fff; --sidebar-hover:#eef2fb; --row-hover:#dde7f6; --zebra:#eef3fb; --bg:#eef1f7; --bg-2:#e1e7f1; --total-bar:#e6ecf8; --ring:0 0 0 3px rgba(41,75,140,.22); }
html[data-theme="forest"]  { --accent:#2f7a52; --accent-deep:#235f41; --accent-soft:#e0eee6; --accent-ink:#235f41; --teal:#2f7a52; --teal-soft:#e0eee6; --info:#2f7a52; --info-ink:#235f41; --info-soft:#e0eee6; --sidebar-active:#2f7a52; --sidebar-active-text:#fff; --sidebar-hover:#ecf4ef; --row-hover:#e3f1e8; --zebra:#eef7ef; --bg:#eef3ee; --bg-2:#e2ebe2; --total-bar:#e6f1e8; --ring:0 0 0 3px rgba(47,122,82,.22); }
html[data-theme="indigo"]  { --accent:#5a4fb0; --accent-deep:#42398a; --accent-soft:#ebe9f6; --accent-ink:#42398a; --teal:#5a4fb0; --teal-soft:#ebe9f6; --info:#5a4fb0; --info-ink:#42398a; --info-soft:#ebe9f6; --sidebar-active:#5a4fb0; --sidebar-active-text:#fff; --sidebar-hover:#eef0f8; --row-hover:#e7e1f5; --zebra:#f2effb; --bg:#f0eef7; --bg-2:#e7e3f1; --total-bar:#ece8f7; --ring:0 0 0 3px rgba(90,79,176,.22); }
html[data-theme="maroon"]  { --accent:#9a3b4f; --accent-deep:#7a2c3d; --accent-soft:#f5e6ea; --accent-ink:#7a2c3d; --teal:#9a3b4f; --teal-soft:#f5e6ea; --info:#9a3b4f; --info-ink:#7a2c3d; --info-soft:#f5e6ea; --sidebar-active:#9a3b4f; --sidebar-active-text:#fff; --sidebar-hover:#f6eef0; --row-hover:#f0e0e5; --zebra:#f7eef1; --bg:#f3eef0; --bg-2:#ece1e4; --total-bar:#f3e7eb; --ring:0 0 0 3px rgba(154,59,79,.22); }
html[data-theme="charcoal"]{ --accent:#3f4651; --accent-deep:#2a3039; --accent-soft:#eceef1; --accent-ink:#2a3039; --teal:#3f4651; --teal-soft:#eceef1; --info:#3f4651; --info-ink:#2a3039; --info-soft:#eceef1; --sidebar-active:#3f4651; --sidebar-active-text:#fff; --sidebar-hover:#eef0f3; --row-hover:#e6e9ee; --zebra:#f1f3f5; --bg:#eef0f2; --bg-2:#e3e6ea; --total-bar:#ebedf0; --ring:0 0 0 3px rgba(63,70,81,.22); }

.theme-dots { display:inline-flex; align-items:center; gap:7px; padding:0 4px; }
.theme-dots .td-dot { width:18px; height:18px; border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px var(--line-2); transition:transform .12s ease; }
.theme-dots .td-dot:hover { transform:scale(1.18); }
.theme-dots .td-dot.active { box-shadow:0 0 0 2px var(--ink); }
@media (max-width:768px){ .theme-dots{ display:none; } }

/* No spinner arrows on number inputs — keyboard typing only */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }