/* ================================================================
   AAYURA GLOBAL PORTAL — Design System
   Brand: Navy #1D3A78 / Orange #d97706 / Inter + Poppins
================================================================ */

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  --navy-darkest:   #060E1F;
  --navy-dark:      #0D1F4A;
  --navy:           #1D3A78;
  --navy-mid:       #2451A3;
  --navy-light:     #3066C4;
  --navy-pale:      #EEF3FA;

  --orange-dark:    #b45309;
  --orange:         #d97706;
  --orange-light:   #f59e0b;
  --orange-pale:    #FFF8EC;

  --white:          #FFFFFF;
  --gray-50:        #F8FAFC;
  --gray-100:       #F1F5F9;
  --gray-200:       #E2E8F0;
  --gray-300:       #CBD5E1;
  --gray-400:       #94A3B8;
  --gray-500:       #64748B;
  --gray-600:       #475569;
  --gray-700:       #334155;
  --gray-800:       #1E293B;

  --text-dark:      #0F1929;
  --text-body:      #3D4A5C;
  --text-muted:     #64748B;

  --sidebar-w:      260px;
  --sidebar-rail-w: 68px;
  --topbar-h:       56px;
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-full:    9999px;

  --shadow-xs:      0 1px 3px rgba(0,0,0,.08);
  --shadow-sm:      0 2px 8px rgba(0,0,0,.10);
  --shadow:         0 4px 16px rgba(0,0,0,.10);
  --shadow-md:      0 8px 30px rgba(0,0,0,.12);
  --t:              all .25s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: 'Inter','Segoe UI',sans-serif; font-size: 14px; color: var(--text-body); background: var(--gray-100); }
h1,h2,h3,h4,h5,h6 { font-family: 'Poppins','Inter',sans-serif; color: var(--text-dark); font-weight: 600; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-mid); }

/* ── App Shell ─────────────────────────────────────────────────── */
.wrapper { display: flex; height: 100%; overflow: hidden; }
#content { flex: 1; overflow-y: auto; min-width: 0; display: flex; flex-direction: column; background: var(--gray-100); }

/* ── Sidebar ─────────────────────────────────────────────────────
   Off-canvas overlay panel: hidden by default at ALL viewport widths.
   The hamburger (.nv-topbar-toggle) toggles #sidebar.open, revealing it
   fully expanded (with labels) over the content, dimmed by #nav-overlay. */
#sidebar {
  width: var(--sidebar-w);
  background: var(--navy-dark);
  display: flex; flex-direction: column;
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 300;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
  box-shadow: 4px 0 24px rgba(0,0,0,.15);
}
#sidebar.open { transform: translateX(0); }
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

/* logofull.png is a flat white-background PNG (no transparency), so it sits on a white
   card rather than directly on the navy sidebar. */
.nv-logo { padding: 18px 20px; display: flex; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.nv-logo-card { display: block; width: 100%; background: var(--white); border-radius: var(--radius); padding: 10px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.nv-logo-img { width: 100%; height: auto; object-fit: contain; display: block; }

.nv-user { padding: 14px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.nv-avatar { width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.nv-username { flex:1;font-size:.83rem;color:rgba(255,255,255,.9);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.nv-logout-btn { background:none;border:none;color:rgba(255,255,255,.45);cursor:pointer;padding:5px 7px;border-radius:var(--radius-sm);transition:var(--t);font-size:.85rem; }
.nv-logout-btn:hover { color:#ff6b6b; background:rgba(255,255,255,.06); }

/* ── Global Search ── */
.nv-search {
    position: relative;
    padding: 6px 10px 10px;
}
.nv-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    padding: 0 10px;
    transition: background .15s, border-color .15s;
}
.nv-search-wrap:focus-within {
    background: rgba(255,255,255,.11);
    border-color: rgba(222,159,37,.7);
}
.nv-search-icon {
    color: rgba(255,255,255,.4);
    font-size: .78rem;
    flex-shrink: 0;
    margin-right: 7px;
}
.nv-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: .82rem;
    padding: 8px 0;
    min-width: 0;
}
.nv-search-input:focus,
.nv-search-input:focus-visible {
    outline: none;
    border: none;
}
.nv-search-input::placeholder {
    color: rgba(255,255,255,.35);
}
.nv-search-results {
    display: none;
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(100% - 4px);
    background: #fff;
    border: 1px solid #e2e6f0;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    z-index: 2000;
    overflow: hidden;
    max-height: 340px;
    overflow-y: auto;
}
.nv-sr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    text-decoration: none;
    color: #1a2540;
    border-bottom: 1px solid #f0f2f7;
    transition: background .1s;
    cursor: pointer;
}
.nv-sr-item:last-child { border-bottom: none; }
.nv-sr-item:hover,
.nv-sr-item.nv-sr-active {
    background: #f4f6fc;
    text-decoration: none;
    color: #1a2540;
}
.nv-sr-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #eef0f8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .75rem;
    color: var(--navy);
}
.nv-sr-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.nv-sr-title {
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nv-sr-cat {
    font-size: .7rem;
    color: #8a94a8;
    line-height: 1.3;
}

.nv-menu { list-style:none;margin:0;padding:10px 0;flex:1; }
.nv-section { padding:12px 20px 5px;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.28);font-weight:600; }

.nv-item { position: relative; }

/* Nav link */
.nv-link {
  display:flex;align-items:center;gap:10px;
  padding:9px 20px;
  color:rgba(255,255,255,.68);
  font-size:.83rem;font-weight:500;
  transition:var(--t);
  position:relative;
}
.nv-link:hover { color:#fff;background:rgba(255,255,255,.06); }
.nv-link .nv-icon { width:26px;text-align:center;font-size:1.6rem;flex-shrink:0;opacity:.7; }
.nv-link .nv-chevron { margin-left:auto;font-size:.65rem;transition:transform .2s;opacity:.4; }

/* Group/submenu parent */
.nv-has-submenu { cursor: pointer; }
.nv-has-submenu[aria-expanded="true"] { color:#fff; background:rgba(255,255,255,.06); }
.nv-has-submenu[aria-expanded="true"] .nv-chevron { transform:rotate(90deg);opacity:.8; }
.nv-has-submenu[aria-expanded="true"] .nv-icon { opacity: 1; }

/* Active parent */
.nv-item.active > .nv-link {
  color:#fff; background:rgba(255,255,255,.08);
}
.nv-item.active > .nv-link::before {
  content:''; position:absolute; left:0;top:0;bottom:0;
  width:3px; background:var(--orange); border-radius:0 2px 2px 0;
}
.nv-item.active > .nv-link .nv-icon { opacity:1; color:var(--orange-light); }

/* Submenu */
.nv-submenu { list-style:none;margin:0;padding:0;background:rgba(0,0,0,.18); }
.nv-subitem { }
.nv-sublink {
  display:flex;align-items:center;gap:8px;
  padding:7px 20px 7px 44px;
  color:rgba(255,255,255,.52);
  font-size:.79rem;font-weight:400;
  transition:var(--t);
}
.nv-sublink:hover { color:rgba(255,255,255,.9); }
.nv-sublink::before { content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);flex-shrink:0; }
.nv-subitem.active > .nv-sublink { color:var(--orange-light);font-weight:500; }
.nv-subitem.active > .nv-sublink::before { background:var(--orange-light); }

/* Footer */
.nv-footer { padding:10px 20px;border-top:1px solid rgba(255,255,255,.08);font-size:.68rem;color:rgba(255,255,255,.22);text-align:center;flex-shrink:0;white-space:nowrap;overflow:hidden; }

/* ── Topbar — top navigation bar (shown on desktop and mobile) ─── */
/* Right padding matches .ag-body's inset at each breakpoint so the search box's right edge
   lines up with the page content (hero/cards) below it — keep these two in sync. */
.nv-topbar {
  display:flex;
  height:var(--topbar-h);background:var(--white);
  border-bottom:1px solid var(--gray-200);
  align-items:center;padding:0 24px;gap:14px;
  position:sticky;top:0;z-index:100;flex-shrink:0;
}
.nv-topbar-toggle { background:none;border:none;color:var(--navy);cursor:pointer;padding:7px 9px;border-radius:var(--radius-sm);font-size:1.1rem;transition:var(--t); }
.nv-topbar-toggle:hover { background:var(--navy-pale);color:var(--orange-dark); }
.nv-topbar-brand { display:flex;align-items:center;gap:12px; }
.nv-topbar-logo { height:26px;width:auto;object-fit:contain;border-radius:6px; }
.nv-topbar-title {
  font-family:'Poppins',sans-serif;font-size:.9rem;font-weight:600;color:var(--text-body);
  padding-left:12px;border-left:1.5px solid var(--gray-200);
}

/* ── Page Body ─────────────────────────────────────────────────── */
.pl-5, .pr-lg-5 { padding-left: 0 !important; padding-right: 0 !important; }
.ag-body { padding: 24px; flex: 1; }

/* Page header */
.ag-page-hd { margin-bottom: 22px; display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap; }
.ag-page-title { font-family:'Poppins',sans-serif;font-size:1.35rem;font-weight:700;color:var(--navy);margin:0 0 3px; }
.ag-page-subtitle { color:var(--text-muted);font-size:.82rem;margin:0; }

/* ── Cards ─────────────────────────────────────────────────────── */
.card, .ag-card {
  background:var(--white);border-radius:var(--radius-lg);
  border:1px solid var(--gray-200);box-shadow:var(--shadow-xs);
  transition:box-shadow .2s;
}
.card:hover, .ag-card:hover { box-shadow:var(--shadow-sm); }
.card-header, .ag-card-header {
  padding:14px 20px;border-bottom:1px solid var(--gray-200);
  background:var(--white);border-radius:var(--radius-lg) var(--radius-lg) 0 0 !important;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.card-title, .ag-card-title { font-family:'Poppins',sans-serif;font-size:.93rem;font-weight:600;color:var(--navy);margin:0; }
.card-body, .ag-card-body { padding:20px; }
.card-footer, .ag-card-footer { padding:12px 20px;border-top:1px solid var(--gray-200);background:var(--gray-50);border-radius:0 0 var(--radius-lg) var(--radius-lg); }

/* Stat cards */
.ag-stat { background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--gray-200);padding:20px;display:flex;align-items:flex-start;gap:16px;transition:var(--t); }
.ag-stat:hover { box-shadow:var(--shadow-sm);transform:translateY(-2px); }
.ag-stat-icon { width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0; }
.ag-stat-icon.navy   { background:var(--navy-pale);color:var(--navy); }
.ag-stat-icon.orange { background:var(--orange-pale);color:var(--orange); }
.ag-stat-icon.green  { background:#f0fdf4;color:#16a34a; }
.ag-stat-icon.red    { background:#fef2f2;color:#dc2626; }
.ag-stat-label { font-size:.72rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px; }
.ag-stat-value { font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:700;color:var(--text-dark);line-height:1;margin-bottom:3px; }
.ag-stat-info { font-size:.75rem;color:var(--text-muted); }

/* ── Tables ─────────────────────────────────────────────────────── */
.table-responsive { border-radius:var(--radius-lg);border:1px solid var(--gray-200);overflow:hidden; }
.table { font-size:.82rem;margin:0; }
.table thead th {
  background:var(--navy) !important;color:rgba(255,255,255,.9) !important;
  font-family:'Poppins',sans-serif !important;font-size:.7rem !important;
  font-weight:600 !important;letter-spacing:.07em !important;text-transform:uppercase !important;
  padding:12px 16px !important;white-space:nowrap;border:none !important;vertical-align:middle;
}
.table tbody td { padding:10px 16px;border-bottom:1px solid var(--gray-100);color:var(--text-body);vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover td { background:var(--navy-pale); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background:var(--gray-50); }
.table-striped > tbody > tr:hover > * { background:var(--navy-pale) !important; }

/* DataTables */
table.dataTable thead th, table.dataTable thead td {
  background:var(--navy) !important;color:rgba(255,255,255,.9) !important;
  border:none !important;padding:12px 16px !important;
  font-family:'Poppins',sans-serif !important;font-size:.7rem !important;
  font-weight:600 !important;letter-spacing:.07em !important;text-transform:uppercase !important;
}
table.dataTable thead .sorting::after { content:' ⇅';opacity:.4;font-size:.8em; }
table.dataTable thead .sorting_asc::after { content:' ↑';opacity:.8; }
table.dataTable thead .sorting_desc::after { content:' ↓';opacity:.8; }
div.dataTables_wrapper div.dataTables_filter input { border:1px solid var(--gray-300) !important;border-radius:var(--radius-sm) !important;padding:6px 10px !important;font-size:.82rem !important; }
div.dataTables_wrapper div.dataTables_filter input:focus { border-color:var(--navy-mid) !important;outline:none !important;box-shadow:0 0 0 3px rgba(29,58,120,.1) !important; }
div.dataTables_length select { border:1px solid var(--gray-300) !important;border-radius:var(--radius-sm) !important; }
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current { background:var(--navy) !important;color:#fff !important;border-color:var(--navy) !important;border-radius:var(--radius-sm) !important; }
div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover { background:var(--navy-pale) !important;color:var(--navy) !important; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn { border-radius:var(--radius);font-size:.82rem;font-weight:600;font-family:'Inter',sans-serif;transition:var(--t);display:inline-flex;align-items:center;gap:7px; }
.btn-primary  { background:var(--navy) !important;border-color:var(--navy) !important;color:#fff !important; }
.btn-primary:hover  { background:var(--navy-mid) !important;border-color:var(--navy-mid) !important;transform:translateY(-1px);box-shadow:var(--shadow-sm); }
.btn-warning  { background:var(--orange) !important;border-color:var(--orange) !important;color:#fff !important; }
.btn-warning:hover  { background:var(--orange-dark) !important;border-color:var(--orange-dark) !important;color:#fff !important; }
.btn-secondary { background:var(--gray-600) !important;border-color:var(--gray-600) !important;color:#fff !important; }
.btn-secondary:hover { background:var(--gray-700) !important; }
.btn-outline-primary { color:var(--navy) !important;border-color:var(--navy) !important; }
.btn-outline-primary:hover { background:var(--navy) !important;color:#fff !important; }
.btn-danger { border-radius:var(--radius); }
.btn:focus { box-shadow:0 0 0 3px rgba(29,58,120,.2) !important; }

/* ── Forms ─────────────────────────────────────────────────────── */
.form-label { font-size:.78rem;font-weight:600;color:var(--gray-700);margin-bottom:5px; }
.form-control, .form-select {
  min-height:40px;
  border:1.5px solid var(--gray-300);border-radius:var(--radius);
  font-size:.85rem;font-family:'Inter',sans-serif;color:var(--text-dark);
  padding:9px 13px;background:var(--white);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.form-control::placeholder { color:var(--gray-400); opacity:1; }
.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) { border-color:var(--gray-400); }
.form-control:focus, .form-select:focus {
  border-color:var(--navy-mid) !important;
  box-shadow:0 0 0 3px rgba(29,58,120,.12) !important;
  background:var(--white);
  outline:none;
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
  background:var(--gray-100);color:var(--gray-500);cursor:not-allowed;border-style:dashed;
}

/* Bare inputs in the content area (no .form-control class) get the same polished look */
.ag-body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]):not([type=color]):not(.form-control):not(.nv-ts-input):not(.nv-search-input),
.ag-body select:not(.form-select):not(.form-control),
.ag-body textarea:not(.form-control) {
  min-height:40px;
  border:1.5px solid var(--gray-300);border-radius:var(--radius);
  padding:9px 13px;font-size:.85rem;font-family:'Inter',sans-serif;color:var(--text-dark);
  background:var(--white);
  transition:border-color .18s, box-shadow .18s;
}
.ag-body input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.form-control):not(.nv-ts-input):not(.nv-search-input):focus,
.ag-body select:not(.form-select):not(.form-control):focus,
.ag-body textarea:not(.form-control):focus {
  border-color:var(--navy-mid);box-shadow:0 0 0 3px rgba(29,58,120,.12);outline:none;
}

.input-group-text { background:var(--gray-100);border-color:var(--gray-300);color:var(--gray-600); }
.field-validation-error { color:#dc2626;font-size:.74rem;margin-top:3px;display:block; }
.input-validation-error { border-color:#dc2626 !important; }
.display-none { display:none !important; }

/* Tom Select */
.ts-wrapper.single .ts-control { border:1.5px solid var(--gray-300);border-radius:var(--radius) !important;font-size:.83rem;padding:8px 12px;background:var(--white);box-shadow:none; }
.ts-wrapper.single.focus .ts-control { border-color:var(--navy-mid);box-shadow:0 0 0 3px rgba(29,58,120,.1); }
.ts-dropdown .active { background:var(--navy-pale) !important;color:var(--navy) !important; }
.ts-dropdown .selected { background:var(--navy) !important;color:#fff !important; }

/* ── Modals ─────────────────────────────────────────────────────── */
.modal-content { border:none;border-radius:var(--radius-xl);box-shadow:var(--shadow-md); }
.modal-header { background:var(--navy);color:#fff;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:16px 24px;border-bottom:none; }
.modal-title { font-family:'Poppins',sans-serif;font-size:.93rem;font-weight:600; }
.modal-header .btn-close { filter:invert(1);opacity:.7; }
.modal-header .btn-close:hover { opacity:1; }
.modal-body { padding:22px; }
.modal-footer { border-top:1px solid var(--gray-200);padding:12px 22px;gap:8px; }
#processingModal .modal-dialog,#loadingModal .modal-dialog { max-width:220px; }
.spinner-text { display:block;font-family:'Poppins',sans-serif;font-size:.88rem;font-weight:600;color:var(--navy);margin-bottom:14px;text-align:center; }
.color-f8b739 { color:var(--orange) !important; }

/* ── Alerts ─────────────────────────────────────────────────────── */
.alert { border:none !important;border-radius:var(--radius) !important;font-size:.83rem; }
.alert-info    { background:var(--navy-pale)   !important;color:var(--navy)       !important; }
.alert-warning { background:var(--orange-pale) !important;color:var(--orange-dark) !important; }
.alert-success { background:#f0fdf4            !important;color:#166534           !important; }
.alert-danger  { background:#fef2f2            !important;color:#991b1b           !important; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge { font-size:.7rem;font-weight:600;padding:4px 10px;border-radius:20px; }
.bg-warning { background:var(--orange) !important; }
.bg-primary  { background:var(--navy) !important; }
.text-bg-warning { background:var(--orange-pale) !important;color:var(--orange-dark) !important; }

/* ── Nav overlay (mobile) ─────────────────────────────────────── */
#nav-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150; }
#nav-overlay.active { display:block; }

/* ── Dashboard Grids ─────────────────────────────────────────── */
.ag-grid-stats { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px; }
.ag-grid-2     { display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:20px; }
.ag-grid-3     { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px; }

/* ── Utility ─────────────────────────────────────────────────── */
.text-navy { color:var(--navy) !important; }
.text-orange { color:var(--orange) !important; }
.font-poppins { font-family:'Poppins',sans-serif !important; }

/* ── --ts-* Design Token Aliases ────────────────────────────────
   These map the original DSPortal --ts-* token names onto the
   Aayura --navy/--orange/--gray-* design system so all views
   and component CSS that reference --ts-* variables render correctly.
────────────────────────────────────────────────────────────────── */
:root {
  /* Core palette */
  --ts-primary:         var(--navy);
  --ts-primary-light:   var(--navy-pale);
  --ts-dark:            var(--navy-dark);
  --ts-dark-light:      var(--navy-mid);
  --ts-accent:          var(--orange);
  --ts-accent-dark:     var(--orange-dark);
  --ts-accent-bg:       var(--orange-pale);
  --ts-info:            var(--navy-mid);
  --ts-warning:         var(--orange-light);
  --ts-warn:            var(--orange);
  --ts-warn-bg:         #fffbeb;
  --ts-warn-border:     #fde68a;

  /* Semantic */
  --ts-success:         #16a34a;
  --ts-success-bg:      #f0fdf4;
  --ts-success-border:  #bbf7d0;
  --ts-danger:          #dc2626;
  --ts-danger-bg:       #fef2f2;
  --ts-danger-border:   #fecaca;
  --ts-danger-bright:   #ef4444;

  /* Neutrals */
  --ts-text:            var(--text-body);
  --ts-muted:           var(--text-muted);
  --ts-sub:             var(--gray-400);
  --ts-muted-bg:        var(--gray-100);
  --ts-muted-border:    var(--gray-300);

  /* Surfaces */
  --ts-card:            var(--white);
  --ts-bg:              var(--gray-100);
  --ts-bg-subtle:       var(--gray-50);
  --ts-border:          var(--gray-200);
  --ts-border-light:    var(--gray-200);
  --ts-border-lighter:  var(--gray-100);
  --ts-input-bg:        var(--white);
  --ts-focus-ring:      rgba(29,58,120,.15);

  /* Misc */
  --ts-shadow:          var(--shadow-xs);
  --ts-radius:          var(--radius);
}

/* ── Page wrapper ─────────────────────────────────────────────── */
.ts-page { }
.ts-page-header { margin-bottom: 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ts-page-title  { font-family:'Poppins',sans-serif; font-size:1.25rem; font-weight:700; color:var(--ts-dark); margin:0; }

/* ── Tabs ─────────────────────────────────────────────────────── */
.ts-tabs { border-bottom: 2px solid var(--ts-border); gap:0; margin-bottom:0; padding-bottom:0; flex-wrap:wrap; }
.ts-tabs .nav-link { color:var(--ts-muted); font-size:.83rem; font-weight:500; padding:9px 18px; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; border-radius:0; transition:color .2s, border-color .2s; }
.ts-tabs .nav-link:hover { color:var(--ts-primary); }
.ts-tabs .nav-link.active { color:var(--ts-primary); border-bottom-color:var(--ts-primary); font-weight:600; }
.tab-content { padding-top:16px; }
/* Tab pane show/hide — ensures this works even if Bootstrap CDN doesn't load */
.tab-content > .tab-pane { display:none; }
.tab-content > .tab-pane.active { display:block; }

/* ── Data table ───────────────────────────────────────────────── */
.ts-approved-table { width:100%; border-collapse:collapse; font-size:.84rem; background:var(--ts-card); }
.ts-approved-table thead tr { background:var(--ts-dark); }
.ts-approved-table thead th { color:rgba(255,255,255,.9); font-size:.7rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; padding:11px 14px; border:none; white-space:nowrap; }
.ts-approved-table tbody tr { border-bottom:1px solid var(--ts-border); transition:background .12s; }
.ts-approved-table tbody tr:last-child { border-bottom:none; }
.ts-approved-table tbody tr:hover { background:var(--ts-bg); }
.ts-approved-table tbody td { padding:10px 14px; color:var(--ts-text); vertical-align:middle; }
.ts-compact-table tbody td { padding:7px 12px; font-size:.82rem; }
.ts-compact-table thead th { padding:8px 12px; }
.ts-num { text-align:right !important; }
.ts-action-cell { white-space:nowrap; text-align:right !important; width:1%; }
.ts-no-label { }
.ts-inline-cell { }
.us-name-cell { font-weight:600; }
.inline-flex { display:inline-flex; align-items:center; gap:6px; }

/* Row left-border status indicators */
.td-border-default  td:first-child { border-left:3px solid var(--ts-border); }
.td-border-priority td:first-child { border-left:3px solid var(--ts-warn); }
.td-border-overdue  td:first-child { border-left:3px solid var(--ts-danger-bright); }
.td-border-invoice  td:first-child { border-left:3px solid var(--ts-primary); }

/* ── Buttons ──────────────────────────────────────────────────── */
.ts-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:none; border-radius:8px; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .2s; text-decoration:none; white-space:nowrap; line-height:1.4; }
.ts-btn:hover { text-decoration:none; }
.ts-btn-icon { padding:6px 10px; }
.ts-btn-submit { background:var(--ts-primary); color:#fff; }
.ts-btn-submit:hover { background:var(--ts-dark-light); color:#fff; transform:translateY(-1px); }
.ts-btn-danger { background:var(--ts-danger); color:#fff; }
.ts-btn-danger:hover { background:#b91c1c; color:#fff; }
.ts-btn-warn { background:var(--ts-warn); color:#fff; }
.ts-btn-warn:hover { background:var(--ts-accent-dark); color:#fff; }
.ts-btn-outline { background:transparent; border:1.5px solid var(--ts-border); color:var(--ts-text); }
.ts-btn-outline:hover { border-color:var(--ts-primary); color:var(--ts-primary); }
.ts-btn-done { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.ts-btn-done:hover { background:#dcfce7; }
.ts-btn-notes { background:var(--ts-bg); color:var(--ts-muted); border:1px solid var(--ts-border); }
.ts-btn-notes:hover { color:var(--ts-primary); border-color:var(--ts-primary); }
.ts-btn-email { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.ts-btn-email:hover { background:#dbeafe; }
.ts-btn-info { background:var(--ts-bg); color:var(--ts-primary); border:1px solid var(--ts-border); }
.ts-btn-info:hover { background:var(--ts-primary-light); }
.ts-btn-save { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.ts-btn-save:hover { background:#dcfce7; }
.ts-btn-todo { background:var(--ts-accent-bg); color:var(--ts-accent-dark); border:1px solid #fde68a; }
.ts-btn-todo:hover { background:#fef3c7; }

/* ── Modals ───────────────────────────────────────────────────── */
.ts-modal .modal-content { border-radius:16px; }
.ts-modal .modal-header { background:var(--ts-dark); color:#fff; border-radius:16px 16px 0 0; padding:14px 20px; border-bottom:none; font-family:'Poppins',sans-serif; font-size:.9rem; font-weight:600; }
.ts-modal-confirm-text { color:var(--ts-muted); font-size:.88rem; margin-bottom:10px; }

/* ── Notes ────────────────────────────────────────────────────── */
.ts-notes-bubble { display:inline-flex; align-items:center; gap:4px; background:var(--ts-bg); border:1px solid var(--ts-border); border-radius:20px; padding:2px 8px; font-size:.75rem; color:var(--ts-muted); cursor:pointer; }
.ts-notes-bubble:hover { color:var(--ts-primary); border-color:var(--ts-primary); }
.ts-notes-inline { font-size:.78rem; color:var(--ts-muted); }

/* ── Status badges ────────────────────────────────────────────── */
.ts-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:20px; font-size:.72rem; font-weight:700; background:var(--ts-bg); color:var(--ts-muted); }
.us-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.us-badge-yes     { background:var(--ts-success-bg); color:var(--ts-success); border:1px solid var(--ts-success-border); }
.us-badge-no      { background:var(--ts-muted-bg); color:var(--ts-muted); border:1px solid var(--ts-muted-border); }
.us-badge-danger  { background:var(--ts-danger-bg); color:var(--ts-danger); border:1px solid var(--ts-danger-border); }
.us-badge-warn    { background:var(--ts-warn-bg); color:var(--ts-warn); border:1px solid var(--ts-warn-border); }

/* ── Detail grid ──────────────────────────────────────────────── */
.ts-detail-grid  { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; font-size:.87rem; }
.ts-detail-label { color:var(--ts-muted); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; align-self:start; padding-top:2px; }
.ts-detail-value { color:var(--ts-text); word-break:break-word; }

/* ── Form helpers ─────────────────────────────────────────────── */
.ts-form-group { margin-bottom:14px; }
.ts-label  { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ts-muted); margin-bottom:4px; display:block; }
.ts-input  { width:100%; border:1.5px solid var(--ts-border); border-radius:8px; padding:8px 12px; font-size:.9rem; background:var(--ts-card); color:var(--ts-text); transition:border-color .15s; }
.ts-input:focus { outline:none; border-color:var(--ts-primary); box-shadow:0 0 0 3px var(--ts-focus-ring); }
.ts-kv-table { width:100%; font-size:.85rem; }
.ts-kv-table td { padding:6px 0; vertical-align:top; }
.ts-kv-table td:first-child { color:var(--ts-muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; padding-right:16px; white-space:nowrap; }

/* ── Page header meta strip (UserProfile) ────────────────────── */
.pr-meta-grid  { display:flex; gap:20px; flex-wrap:wrap; padding:12px 28px 18px; border-top:1px solid var(--ts-border-lighter); }
.pr-meta-item  { display:flex; flex-direction:column; gap:2px; }
.pr-meta-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--ts-muted); }
.pr-meta-value { font-size:.9rem; font-weight:600; color:var(--ts-text); }

/* ── Stat tiles ───────────────────────────────────────────────── */
.pr-stat-tile  { background:var(--ts-card); border:1px solid var(--ts-border); border-radius:12px; padding:16px 20px; }
.pr-stat-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ts-muted); margin-bottom:4px; }
.pr-stat-value { font-family:'Poppins',sans-serif; font-size:1.35rem; font-weight:700; color:var(--ts-text); }
.pr-totals-row td { background:var(--ts-bg); font-weight:700; border-top:2px solid var(--ts-border); }

/* ── Report card ──────────────────────────────────────────────── */
.pr-report-card        { background:var(--ts-card); border:1px solid var(--ts-border); border-radius:14px; margin-bottom:1.5rem; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.pr-report-card-header { padding:14px 20px; border-bottom:1px solid var(--ts-border); font-family:'Poppins',sans-serif; font-weight:600; color:var(--ts-dark); font-size:.93rem; display:flex; align-items:center; justify-content:space-between; }

/* ── Invoice buttons ──────────────────────────────────────────── */
.iv-btn         { display:inline-flex; align-items:center; justify-content:center; padding:5px 12px; border:none; border-radius:6px; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; }
.iv-btn-primary { background:var(--ts-primary); color:#fff; }
.iv-btn-primary:hover { background:var(--ts-dark-light); }
.iv-btn-info    { background:var(--ts-bg); color:var(--ts-primary); border:1px solid var(--ts-border); }
.iv-btn-info:hover { background:var(--ts-primary-light); }

/* ── Balance column responsive ────────────────────────────────── */
.bal-col-mobile-contact { display:none; }
@media (max-width:700px) {
  .bal-col-phone, .bal-col-contact { display:none; }
  .bal-col-mobile-contact { display:table-cell; }
}

/* ── Mobile responsive table labels ──────────────────────────── */
@media (max-width:700px) {
  .ts-approved-table thead { display:none; }
  .ts-approved-table tbody tr { display:block; margin-bottom:8px; border:1px solid var(--ts-border); border-radius:8px; padding:4px 0; }
  .ts-approved-table tbody td { display:flex; justify-content:space-between; align-items:center; padding:7px 14px; border-bottom:1px solid var(--ts-border-lighter); }
  .ts-approved-table tbody td:last-child { border-bottom:none; }
  .ts-approved-table tbody td::before { content:attr(data-label); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ts-muted); flex-shrink:0; margin-right:12px; }
  .ts-approved-table tbody td.ts-no-label::before { display:none; }
  .ts-approved-table tbody td.ts-inline-cell { display:none; }
  .ts-num { text-align:right !important; justify-content:space-between; }
  .ts-action-cell { justify-content:flex-end; }
}

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
  #sidebar,.nv-topbar,.d-print-none { display:none !important; }
  #content { overflow:visible !important; }
  .table thead th { background:var(--navy) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact; }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:991px) {
  .nv-topbar-search { display:none !important; } /* search stays out of the cramped mobile bar */
  .ag-body { padding:16px; }
  .nv-topbar { padding:0 16px; } /* matches .ag-body so the bar's edges still line up with content */
}
@media (max-width:576px) {
  .ag-body { padding:12px; }
  .ag-grid-stats { grid-template-columns:1fr 1fr; }
  .ag-stat-value { font-size:1.2rem; }
  .nv-topbar { padding:0 12px; }
}

/* Top-nav header search (nv-topbar-search / nv-ts) — moved here from the unloaded site.css. */
.nv-topbar-search {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.nv-ts-wrap {
    display: flex;
    align-items: center;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-200);
    border-radius: 9px;
    padding: 0 12px;
    transition: background .15s, border-color .15s, box-shadow .15s;
    width: 260px;
}

    .nv-ts-wrap:hover {
        border-color: var(--gray-300);
    }

    .nv-ts-wrap:focus-within {
        background: var(--white);
        border-color: var(--orange);
        box-shadow: 0 0 0 3px var(--orange-pale);
    }

.nv-ts-icon {
    color: var(--gray-400);
    font-size: .78rem;
    flex-shrink: 0;
    margin-right: 8px;
    transition: color .15s;
}

    .nv-ts-wrap:focus-within .nv-ts-icon {
        color: var(--orange);
    }

.nv-ts-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-dark);
    font-size: .83rem;
    padding: 8px 0;
    min-width: 0;
}

    .nv-ts-input:focus,
    .nv-ts-input:focus-visible {
        outline: none;
        border: none;
    }

    .nv-ts-input::placeholder {
        color: var(--gray-400);
    }

.nv-ts-results {
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    min-width: 260px;
}