/* ==========================================================
   VMS Vendor Portal — Global Stylesheet (vms-portal.css)
   ========================================================== */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  --color-sidebar:       #3d6fa8;
  --color-sidebar-hover: rgba(255,255,255,.13);
  --color-sidebar-active:rgba(255,255,255,.20);
  --color-primary:       #4682B4;
  --color-primary-dark:  #3a6fa0;
  --color-success:       #27ae60;
  --color-warning:       #e67e22;
  --color-danger:        #e74c3c;
  --color-purple:        #8e44ad;
  --color-bg:            #f0f2f5;
  --color-card:          #ffffff;
  --color-border:        #e8edf3;
  --color-text:          #2c3e50;
  --color-text-dark:     #1a2d4d;
  --color-text-muted:    #7f8c8d;
  --color-text-faint:    #9ca3af;
  --radius-card:         12px;
  --radius-btn:          8px;
  --shadow-card:         0 1px 4px rgba(0,0,0,.07);
  --shadow-hover:        0 6px 18px rgba(0,0,0,.10);
  --vms-spin:            var(--color-primary, #4682B4);
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
a { text-decoration:none; color:var(--color-primary); }

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #cbd5e1;   /* thin but visible hairline */
  display: flex;
  align-items: center;
  padding: 0 20px 0 0;
  gap: 16px;
  z-index: 100;
  flex-shrink: 0;
}
/* Left brand strip: same width & colour as the sidebar so the logo
   merges into one continuous blue column from the top down. The
   -1px bottom overlap paints over the topbar's hairline border in
   this region, so the strip and sidebar read as a single panel. */
.brand-lockup  {
  display:flex; align-items:center; gap:0;
  width:228px; flex-shrink:0;
  background:var(--color-sidebar);
  padding-left:20px; box-sizing:border-box;
  align-self:stretch; margin-bottom:-1px;
  position:relative; z-index:1;
  /* faint white divider under the logo — mirrors the sidebar footer line */
  border-bottom:1px solid rgba(255,255,255,.1);
}
.topbar-clogo  { width:38px; height:auto; color:#fff; flex-shrink:0; }
.topbar-cname  {
  font-size:12px; font-weight:700; color:#fff;
  letter-spacing:.05px; white-space:nowrap;
  margin-left:-20px; margin-right:10px; position:relative; z-index:1;
}
.topbar-vms-tag {
  font-size:10px; font-weight:800; color:#fff;
  background:rgba(255,255,255,.20);
  border-radius:5px; padding:2px 8px; letter-spacing:.4px; flex-shrink:0;
}
.topbar-center { flex:1; }
.topbar-right  { margin-left:auto; display:flex; align-items:center; gap:10px; }
.user-chip {
  display:flex; align-items:center; gap:8px;
  padding:4px 12px 4px 4px;
  border:1px solid var(--color-border); border-radius:20px;
  background:#f8fafc;
}
.user-chip .av {
  width:28px; height:28px; background:var(--color-primary);
  border-radius:50%; color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.user-chip .user-label span { display:block; font-size:12px; font-weight:700; color:var(--color-text-dark); line-height:1.2; }
.user-chip .user-label sub  { font-size:10px; color:var(--color-text-muted); }
.signout-btn {
  display:flex; align-items:center; gap:6px; padding:6px 12px;
  font-size:12px; font-weight:600; color:var(--color-text-muted);
  border:1px solid var(--color-border); border-radius:var(--radius-btn);
  background:#f8fafc; text-decoration:none; white-space:nowrap;
  transition:color .15s, border-color .15s, background .15s;
}
.signout-btn:hover { color:var(--color-danger); border-color:rgba(231,76,60,.3); background:#fdf2f2; }

/* ── Layout ─────────────────────────────────────────────── */
.layout { display:flex; flex:1; overflow:hidden; height:calc(100vh - 56px); min-height:0; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width:228px; background:var(--color-sidebar);
  display:flex; flex-direction:column;
  flex-shrink:0; height:100%;
  min-height:calc(100vh - 56px);
  overflow-y:auto; position:sticky; top:0;
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:#5a8abb; border-radius:4px; }
.sidebar-section {
  padding:16px 16px 4px;
  font-size:10px; font-weight:700;
  color:#9dbede; letter-spacing:1.2px; text-transform:uppercase;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; color:#c5dff0; cursor:pointer;
  transition:all .15s; font-size:13px; font-weight:500;
  margin:1px 8px; border-radius:8px; text-decoration:none;
}
.nav-item:hover  { background:var(--color-sidebar-hover); color:#fff; text-decoration:none; }
.nav-item.active { background:var(--color-sidebar-active); color:#fff; font-weight:600; }
.nav-item .icon  { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.nav-badge {
  margin-left:auto; background:rgba(231,76,60,.9); color:#fff;
  font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px;
}
.nav-badge.warn { background:rgba(243,156,18,.9); }
.nav-badge.ok   { background:rgba(39,174,96,.9); }
.sidebar-footer {
  margin-top:auto; padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.1);
}
.sidebar-footer .sf-label   { font-size:10px; color:#9dbede; font-weight:600; text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }
.sidebar-footer .sf-company { font-size:13px; font-weight:700; color:#fff; }
.sidebar-footer .sf-meta    { font-size:11px; color:#9dbede; margin-top:1px; }

/* ── Main ───────────────────────────────────────────────── */
.main { flex:1; overflow-y:auto; }
.page-content { padding:24px; }
.main::-webkit-scrollbar { width:6px; }
.main::-webkit-scrollbar-thumb { background:var(--color-border); border-radius:4px; }

/* ── Page header ────────────────────────────────────────── */
.page-header {
  display:flex; align-items:flex-start;
  justify-content:space-between; margin-bottom:20px;
}
.page-header h1 { font-size:20px; font-weight:700; color:var(--color-text-dark); }
.page-header p  { font-size:13px; color:var(--color-text-muted); margin-top:4px; }
.breadcrumb     { font-size:12px; color:var(--color-text-muted); }
.breadcrumb a   { color:var(--color-primary); font-weight:600; }
.breadcrumb span{ margin:0 6px; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  padding:8px 16px; border:none; border-radius:var(--radius-btn);
  font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .15s; line-height:1; text-decoration:none;
}
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary { background:var(--color-primary); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--color-primary-dark); text-decoration:none; }
.btn-success { background:var(--color-success); color:#fff; }
.btn-success:hover:not(:disabled) { background:#219a52; text-decoration:none; }
.btn-warn    { background:var(--color-warning); color:#fff; }
.btn-warn:hover:not(:disabled)    { background:#d35400; text-decoration:none; }
.btn-danger  { background:var(--color-danger); color:#fff; }
.btn-outline { background:#fff; color:var(--color-primary); border:1px solid var(--color-primary); }
.btn-outline:hover:not(:disabled) { background:#f0f6ff; text-decoration:none; }
.btn-ghost   { background:transparent; color:var(--color-text-muted); border:1px solid var(--color-border); }
.btn-ghost:hover { background:var(--color-bg); text-decoration:none; }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-lg { padding:11px 24px; font-size:14px; }

/* ── Stat Cards ─────────────────────────────────────────── */
.stat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:16px; margin-bottom:22px;
}
.stat-card {
  background:var(--color-card); border-radius:var(--radius-card);
  padding:16px 18px; border:1px solid var(--color-border);
  overflow:hidden; position:relative;
}
.stat-card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
}
.stat-card.blue::before   { background:var(--color-primary); }
.stat-card.green::before  { background:var(--color-success); }
.stat-card.orange::before { background:var(--color-warning); }
.stat-card.red::before    { background:var(--color-danger); }
.stat-card.purple::before { background:var(--color-purple); }
.stat-card.gray::before   { background:#9ca3af; }
.stat-card .s-icon  { position:absolute; right:14px; top:14px; font-size:22px; opacity:.7; }
.stat-card .s-label { display:block; font-size:11px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.4px; }
.stat-card .s-value { display:block; font-size:26px; font-weight:800; color:var(--color-text-dark); margin:4px 0 2px; }
.stat-card .s-sub   { display:block; font-size:12px; color:var(--color-text-muted); }
.stat-card.clickable { cursor:pointer; transition:transform .12s, box-shadow .12s; }
.stat-card.clickable:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:#c5d5e8; }

/* ── Cards ──────────────────────────────────────────────── */
.card { background:var(--color-card); border-radius:var(--radius-card); border:1px solid var(--color-border); margin-bottom:20px; overflow:hidden; }
.card-header { padding:14px 20px; border-bottom:1px solid #f0f4f8; display:flex; align-items:center; justify-content:space-between; }
.card-header h3 { font-size:14px; font-weight:700; color:var(--color-text-dark); }
.card-body     { padding:0; overflow-x:auto; }
.card-body-pad { padding:20px; }

/* ── Table ──────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
  background:#f8fafc; padding:10px 16px; text-align:left;
  font-size:11px; font-weight:700; color:var(--color-text-muted);
  text-transform:uppercase; letter-spacing:.4px;
  border-bottom:1px solid var(--color-border); white-space:nowrap;
}
.data-table td { padding:11px 16px; font-size:13px; border-bottom:1px solid #f5f7fb; vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:#fafbff; }
.data-table tr.clickable-row { cursor:pointer; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px; border-radius:10px;
  font-size:11px; font-weight:700; white-space:nowrap;
}
.badge-success { background:#e9f7ef; color:#1e8449; }
.badge-warning { background:#fef9e7; color:#d68910; }
.badge-danger  { background:#fdecea; color:#c0392b; }
.badge-info    { background:#ebf5fb; color:#1a6fa8; }
.badge-gray    { background:#f0f2f5; color:#717d8a; }
.badge-purple  { background:#f4ecff; color:#7d3c98; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert {
  padding:11px 16px; border-radius:9px; font-size:13px;
  margin-bottom:16px; display:flex; align-items:flex-start;
  gap:9px; line-height:1.4;
}
.alert .al-icon { flex-shrink:0; font-size:15px; margin-top:1px; }
.alert-warn    { background:#fffbeb; border:1px solid #fcd34d; color:#78350f; }
.alert-danger  { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; }
.alert-success { background:#f0fdf4; border:1px solid #86efac; color:#14532d; }
.alert-info    { background:#eff6ff; border:1px solid #93c5fd; color:#1e3a5f; }

/* ── Form controls ───────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-group label, .form-group .form-label { display:block; font-size:12px; font-weight:700; color:#374151; margin-bottom:5px; letter-spacing:.2px; }
.form-group .hint { font-size:11px; color:var(--color-text-faint); margin-top:4px; }
.form-control {
  width:100%; padding:9px 12px;
  border:1px solid #d1d5db; border-radius:8px;
  font-size:13px; outline:none; background:#fafbfc;
  color:#1f2937; transition:border .15s; font-family:inherit;
}
.form-control:focus { border-color:var(--color-primary); background:#fff; box-shadow:0 0 0 3px rgba(70,130,180,.12); }
.form-control:disabled, .form-control[readonly] { background:#f3f4f6; color:#374151; cursor:default; }
select.form-control { cursor:pointer; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
textarea.form-control { resize:vertical; }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(15,30,50,.45); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal {
  background:#fff; border-radius:16px;
  width:560px; max-width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.18);
}
.modal-header {
  padding:20px 24px; border-bottom:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:#fff; z-index:1;
}
.modal-header h2 { font-size:16px; font-weight:700; color:var(--color-text-dark); }
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--color-text-faint); padding:2px; line-height:1; }
.modal-close:hover { color:#374151; }
.modal-body   { padding:22px 24px; }
.modal-footer {
  padding:16px 24px; border-top:1px solid var(--color-border);
  display:flex; justify-content:flex-end; gap:10px;
  position:sticky; bottom:0; background:#fff;
}

/* ── Status tracker ─────────────────────────────────────── */
.status-track { display:flex; align-items:center; padding:12px 0; }
.st-node      { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:80px; }
.st-circle    { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.st-circle.done    { background:var(--color-success); color:#fff; }
.st-circle.active  { background:var(--color-primary); color:#fff; box-shadow:0 0 0 4px rgba(70,130,180,.18); }
.st-circle.pending { background:#e8edf3; color:var(--color-text-faint); }
.st-label { font-size:10px; color:var(--color-text-muted); text-align:center; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.st-line { flex:1; height:2px; background:#e8edf3; min-width:30px; }
.st-line.done { background:var(--color-success); }

/* ── Upload zone ─────────────────────────────────────────── */
.upload-zone {
  border:2px dashed #c5d5e8; border-radius:10px;
  padding:24px; text-align:center; cursor:pointer;
  background:#f8fbff; transition:all .15s;
}
.upload-zone:hover { border-color:var(--color-primary); background:#eff6ff; }
.upload-zone .uz-icon { font-size:30px; margin-bottom:8px; display:block; }
.upload-zone p,
.upload-zone .uz-line { font-size:13px; color:#6b7280; display:block; }
.upload-zone strong { color:var(--color-primary); }

/* Native <button> used as a clickable KPI card / drop-zone — strip the default button
   chrome so it renders identically to the former <div role="button"> (Sonar S6819). */
button.stat-card,
button.upload-zone {
  font:inherit; color:inherit; width:100%; display:block;
  -webkit-appearance:none; appearance:none;
}
button.stat-card { text-align:left; }

/* ── Tabs ────────────────────────────────────────────────── */
.tab-wrap { display:flex; border-bottom:2px solid var(--color-border); margin-bottom:20px; }
.tab-btn  { padding:10px 20px; font-size:13px; font-weight:600; color:var(--color-text-faint); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .15s; border:none; background:none; }
.tab-btn:hover  { color:var(--color-primary); }
.tab-btn.active { color:var(--color-primary); border-bottom-color:var(--color-primary); }
.tab-pane        { display:none; }
.tab-pane.active { display:block; }

/* ── Project card ────────────────────────────────────────── */
.project-card {
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-card); padding:16px 18px;
  display:flex; flex-direction:column; gap:10px;
  transition:box-shadow .15s;
}
.project-card:hover { box-shadow:var(--shadow-hover); }
.pc-top   { display:flex; align-items:flex-start; justify-content:space-between; }
.pc-name  { font-size:14px; font-weight:700; color:var(--color-text-dark); }
.pc-client{ font-size:12px; color:var(--color-text-muted); margin-top:1px; }
.pc-row   { display:flex; gap:16px; flex-wrap:wrap; }
.pc-field { display:flex; flex-direction:column; gap:2px; }
.pc-field label { font-size:10px; font-weight:700; color:var(--color-text-faint); text-transform:uppercase; letter-spacing:.3px; }
.pc-field span  { font-size:13px; font-weight:600; color:#374151; }
.pc-footer { border-top:1px solid #f0f4f8; padding-top:10px; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--color-text-muted); }

/* ── View toggle ─────────────────────────────────────────── */
.view-toggle { display:flex; border:1px solid var(--color-border); border-radius:8px; overflow:hidden; }
.view-toggle button {
  padding:7px 14px; border:none; background:#fff;
  color:var(--color-text-muted); font-size:12px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; gap:5px; font-family:inherit;
}
.view-toggle button + button { border-left:1px solid var(--color-border); }
.view-toggle button.active   { background:var(--color-primary); color:#fff; }

/* ── Tier boxes (early pay) ──────────────────────────────── */
.tier-row { display:flex; gap:8px; }
.tier-box {
  flex:1; text-align:center; padding:10px 4px;
  background:#f8fafc; border-radius:8px; border:1px solid var(--color-border);
  cursor:pointer; transition:all .15s;
}
.tier-box:hover, .tier-box.selected { border-color:var(--color-primary); background:#eff6ff; }
.tier-box .tb-days  { font-size:13px; font-weight:700; color:var(--color-text-dark); }
.tier-box .tb-rate  { font-size:11px; font-weight:700; }
.tier-box .tb-label { font-size:10px; color:var(--color-text-faint); margin-top:1px; }

/* ── COI progress bar ────────────────────────────────────── */
.ev-label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; }
.ev-bar   { height:8px; background:#e8edf3; border-radius:10px; overflow:hidden; }
.ev-fill  { height:100%; border-radius:10px; }

/* ── Grid helpers ────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* ── Toast notifications ────────────────────────────────── */
.vms-toast-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.13); font-size: 13px;
  pointer-events: all; animation: vmsSlideIn .22s ease;
}
@keyframes vmsSlideIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.vms-toast-item.success { background:#f0fdf4; border:1px solid #86efac; color:#14532d; }
.vms-toast-item.error   { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; }
.vms-toast-item.warn    { background:#fffbeb; border:1px solid #fcd34d; color:#78350f; }
.vms-toast-item.info    { background:#eff6ff; border:1px solid #93c5fd; color:#1e3a5f; }
.vms-toast-icon { font-size:15px; font-weight:800; flex-shrink:0; margin-top:1px; }
.vms-toast-body { flex:1; line-height:1.45; }
.vms-toast-close {
  background:none; border:none; cursor:pointer;
  font-size:16px; line-height:1; padding:0; flex-shrink:0;
  opacity:.6; transition:opacity .15s;
}
.vms-toast-close:hover { opacity:1; }

/* ── Inline field error text ────────────────────────────── */
.vms-field-error {
  font-size: 11px !important;
  font-weight: 600;
  color: #e74c3c !important;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
}

/* ── Tooltip ─────────────────────────────────────────────── */
#vms-tooltip {
  position:fixed; z-index:9999;
  background:#1a2d4d; color:#fff;
  padding:8px 12px; border-radius:8px;
  font-size:12px; line-height:1.45; max-width:240px;
  pointer-events:none; word-wrap:break-word;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  display:none; opacity:0; transition:opacity .15s;
}

/* ── Badge teal ─────────────────────────────────────────── */
.badge-teal { background:#e8f8f5; color:#0e6655; }
.badge-orange { background:#fef5e7; color:#d35400; }

/* ── Notification items ──────────────────────────────────── */
.notif-btn {
  position:relative; width:36px; height:36px;
  border:1px solid var(--color-border); border-radius:8px;
  background:#f8fafc; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.notif-btn .badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--color-danger); color:#fff;
  font-size:9px; font-weight:700; width:16px; height:16px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.notif-item { display:flex; align-items:flex-start; gap:12px; padding:14px 20px; border-bottom:1px solid #f5f7fb; cursor:pointer; transition:background .1s; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover  { background:#fafbff; }
.notif-item.unread { background:#f0f6ff; }
.ni-dot      { width:8px; height:8px; border-radius:50%; background:var(--color-primary); flex-shrink:0; margin-top:5px; }
.ni-dot.read { background:transparent; border:1.5px solid #d1d5db; }
.ni-title    { font-size:13px; font-weight:600; color:var(--color-text-dark); }
.ni-sub      { font-size:12px; color:var(--color-text-muted); margin-top:2px; }
.ni-time     { margin-left:auto; font-size:11px; color:var(--color-text-faint); white-space:nowrap; padding-top:2px; }

/* ── Invoice history filter tabs ────────────────────────── */
.hist-tabs {
  display:flex; gap:0;
  border-bottom:1px solid var(--color-border);
  padding:0 18px; margin-top:2px;
}
.hist-tab {
  padding:9px 16px; font-size:12px; font-weight:600;
  background:none; border:none;
  border-bottom:2px solid transparent;
  color:var(--color-text-muted); cursor:pointer;
  display:flex; align-items:center; gap:7px;
  margin-bottom:-1px; transition:color .15s, border-color .15s;
  font-family:inherit;
}
.hist-tab:hover  { color:var(--color-primary); }
.hist-tab.active { color:var(--color-primary); border-bottom-color:var(--color-primary); }
.hist-count {
  background:var(--color-border); color:var(--color-text-muted);
  font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:10px; min-width:18px; text-align:center;
}
.hist-count.warn { background:rgba(231,76,60,.12); color:var(--color-danger); }

/* ── Invoice history filters ────────────────────────────── */
.hist-filters {
  display:flex; align-items:center; gap:8px;
  padding:10px 18px; border-bottom:1px solid var(--color-border); flex-wrap:wrap;
}
.hist-filters select,
.hist-filters input[type="text"] {
  height:32px; font-size:12px; font-family:inherit;
  border:1px solid var(--color-border); border-radius:7px;
  padding:0 10px; background:#fff; color:var(--color-text);
  outline:none; transition:border-color .15s;
}
.hist-filters select:focus,
.hist-filters input:focus { border-color:var(--color-primary); box-shadow:0 0 0 2px rgba(70,130,180,.1); }
.hist-filters select { width:108px; }
.hist-search-wrap { flex:1; min-width:180px; }
.hist-search-wrap input { width:100%; }

/* ── Invoice history month pills ────────────────────────── */
.hist-months { display:flex; gap:4px; flex-wrap:wrap; padding:10px 18px; border-bottom:1px solid var(--color-border); }
.hist-pill {
  position:relative; padding:4px 11px;
  font-size:11px; font-weight:600;
  border:1px solid var(--color-border); border-radius:20px;
  background:#fff; color:var(--color-text-muted);
  cursor:pointer; transition:all .15s; user-select:none;
}
.hist-pill.has-data  { color:var(--color-text-dark); border-color:#c0d4ea; }
.hist-pill.has-data:hover { border-color:var(--color-primary); color:var(--color-primary); background:#eff6ff; }
.hist-pill.active    { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.hist-pill.empty     { opacity:.32; cursor:default; }
.hp-dot { position:absolute; top:3px; right:4px; width:5px; height:5px; border-radius:50%; background:var(--color-primary); }
.hist-pill.active .hp-dot { background:rgba(255,255,255,.65); }

/* ── Pagination ─────────────────────────────────────────── */
.hist-pagination { display:flex; align-items:center; justify-content:space-between; padding:11px 18px; border-top:1px solid var(--color-border); }
.hist-pag-info   { font-size:12px; color:var(--color-text-muted); }
.hist-pag-btns   { display:flex; gap:3px; align-items:center; }
.pag-btn {
  min-width:30px; height:30px; padding:0 8px;
  border:1px solid var(--color-border); border-radius:6px;
  background:#fff; color:var(--color-text);
  font-size:12px; font-weight:600; font-family:inherit;
  cursor:pointer; transition:all .15s;
}
.pag-btn:hover:not(:disabled) { border-color:var(--color-primary); color:var(--color-primary); }
.pag-btn.active   { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.pag-btn:disabled { opacity:.3; cursor:default; }
.pag-ellipsis     { font-size:12px; color:var(--color-text-faint); padding:0 3px; }

/* ───────────────────────────────────────────────────────────────
   Global action loader — blocks the screen during any POST action
   so buttons can't be double-clicked. Managed by vms-app.js.
   Swap the spinner look by changing the spinner element's class in
   _Layout.cshtml: vms-spin-ring | vms-spin-dual | vms-spin-dots | vms-spin-bars
   The --vms-spin token is defined once in the :root block at the top of this file.
   ─────────────────────────────────────────────────────────────── */
#vms-loader {
  position: fixed; inset: 0; z-index: 11000;
  display: none; align-items: center; justify-content: center;
  background: rgba(17, 24, 39, .28);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .18s ease;
}
#vms-loader.show { display: flex; opacity: 1; }
#vms-loader .vms-loader-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: #fff; padding: 26px 34px; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  transform: translateY(6px) scale(.98);
  transition: transform .18s ease;
}
#vms-loader.show .vms-loader-card { transform: none; }
#vms-loader .vms-loader-text { font-size: 13px; font-weight: 700; color: #374151; letter-spacing: .2px; }

@keyframes vms-spin     { to { transform: rotate(360deg); } }
@keyframes vms-bounce   { 0%,80%,100% { transform: scale(.4); opacity:.5; } 40% { transform: scale(1); opacity:1; } }
@keyframes vms-bar      { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* 1) Ring — single arc (default, clean & professional) */
.vms-spin-ring {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(70,130,180,.18);
  border-top-color: var(--vms-spin);
  animation: vms-spin .8s linear infinite;
}

/* 2) Dual-ring — two counter-rotating arcs (modern) */
.vms-spin-dual { width: 46px; height: 46px; position: relative; }
.vms-spin-dual::before, .vms-spin-dual::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid transparent;
}
.vms-spin-dual::before { border-top-color: var(--vms-spin); animation: vms-spin .9s linear infinite; }
.vms-spin-dual::after  { border-bottom-color: rgba(70,130,180,.45); animation: vms-spin 1.4s linear infinite reverse; }

/* 3) Dots — three bouncing dots (friendly) */
.vms-spin-dots { display: flex; gap: 8px; height: 20px; align-items: center; }
.vms-spin-dots span {
  width: 12px; height: 12px; border-radius: 50%; background: var(--vms-spin);
  animation: vms-bounce 1.2s ease-in-out infinite;
}
.vms-spin-dots span:nth-child(2) { animation-delay: .16s; }
.vms-spin-dots span:nth-child(3) { animation-delay: .32s; }

/* 4) Bars — equalizer (energetic) */
.vms-spin-bars { display: flex; gap: 5px; height: 40px; align-items: center; }
.vms-spin-bars span {
  width: 6px; height: 100%; border-radius: 3px; background: var(--vms-spin);
  animation: vms-bar 1s ease-in-out infinite;
}
.vms-spin-bars span:nth-child(2) { animation-delay: .15s; }
.vms-spin-bars span:nth-child(3) { animation-delay: .30s; }
.vms-spin-bars span:nth-child(4) { animation-delay: .45s; }

/* Inline in-button spinner — used by VmsBtnBusy() for a per-button look */
.vms-btn-spin {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  margin-right: 7px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: vms-spin .7s linear infinite;
}
button:disabled, .btn:disabled { cursor: not-allowed; opacity: .65; }