/* ══════════════════════════════════════════════════════════
   InvoiceFlow — style.css
   Aesthetic: Refined editorial · Cream + deep slate + gold
   Fonts: Playfair Display (headings) · DM Sans (body) · DM Mono (numbers)
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   OFFLINE FONTS — @font-face declarations
   All fonts served locally from /fonts directory.
   No Google Fonts / network dependency.
══════════════════════════════════════════════════════════ */

/* ── DM Sans ─────────────────────────────────────────────── */
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DM Sans/DMSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DM Sans/DMSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DM Sans/DMSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Playfair Display ────────────────────────────────────── */
@font-face {
  font-family: 'Playfair Display';
  src: url('./fonts/PLAYFAIRE/PlayfairDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('./fonts/PLAYFAIRE/PlayfairDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── DM Mono ─────────────────────────────────────────────── */
@font-face {
  font-family: 'DM Mono';
  src: url('./fonts/DMMono/DMMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('./fonts/DMMono/DMMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Sarabun (Thai) ──────────────────────────────────────── */
@font-face {
  font-family: 'Sarabun';
  src: url('./fonts/Sarabun/Sarabun-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sarabun';
  src: url('./fonts/Sarabun/Sarabun-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── CSS Variables ──────────────────────────────────────── */
:root {
  --bg:           #F5F3EE;
  --surface:      #FFFFFF;
  --border:       #E4E0D8;
  --border-dark:  #C8C4BC;

  --ink:          #1A1815;
  --ink-mid:      #4A4640;
  --ink-light:    #8A8580;
  --ink-faint:    #BAB8B4;

  --accent:       #1C3557;   /* deep navy */
  --accent-light: #2A4D7A;
  --gold:         #C89A3A;
  --gold-light:   #F0D080;

  --success:      #2D7A4F;
  --success-bg:   #E8F5EE;
  --danger:       #B04040;
  --danger-bg:    #FBF0F0;

  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    10px;

  --shadow-sm:    0 1px 3px rgba(26,24,21,0.06), 0 1px 2px rgba(26,24,21,0.04);
  --shadow:       0 4px 16px rgba(26,24,21,0.08), 0 1px 4px rgba(26,24,21,0.04);
  --shadow-lg:    0 16px 48px rgba(26,24,21,0.12), 0 4px 12px rgba(26,24,21,0.06);

  --transition:   0.2s ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}


/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3 { font-family: 'Playfair Display', serif; }
.mono { font-family: 'DM Mono', monospace; }

/* ── Site Header ────────────────────────────────────────── */
.site-header {
  background: linear-gradient(135deg, #1C3557 0%, #162b46 60%, #1a3252 100%);
  box-shadow:
    0 2px 0 rgba(200,154,58,0.25),   /* gold accent underline */
    0 4px 24px rgba(0,0,0,0.28);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(200,154,58,0.18);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Inline SVG logo — always crisp, no file needed ─────── */
.brand-logo-svg {
  height: 54px;
  width: auto;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.brand:hover .brand-logo-svg {
  transform: scale(1.03);
  filter: drop-shadow(0 3px 10px rgba(200,154,58,0.4));
}

/* ── Tab Nav ────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  padding: 5px;
  border-radius: 999px;             /* full pill container    */
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 12px rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Fixed height prevents any vertical reflow on load */
  height: 44px;
  box-sizing: border-box;
  /* Prevent layout recalculation during tab activation */
  contain: layout style;
  /* Hidden until login-credentials.js resolves the user role.
     Prevents wrong tabs from flashing before they are pruned. */
  visibility: hidden;
}

.tab-btn {
  padding: 8px 22px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  /* Use font-weight 600 always + opacity trick to avoid glyph-width shift */
  font-weight: 600;
  border-radius: 999px;             /* pill shape per button  */
  cursor: pointer;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
  /* NO transform transition — eliminates vertical shift on activation */
  letter-spacing: 0.015em;
  white-space: nowrap;
  flex-shrink: 0;                   /* never compress width   */
  position: relative;
  /* Reserve space so switching weight never changes button width */
  will-change: background, color;
  /* Inactive tabs look lighter via opacity on the label */
  opacity: 0.72;
}

.tab-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.14);
  opacity: 1;
  /* No transform — keeps layout stable */
}

.tab-btn:active {
  transform: none;
  background: rgba(255,255,255,0.1);
}

.tab-btn.active {
  background: var(--gold);
  color: var(--accent);
  font-weight: 600;
  opacity: 1;
  box-shadow:
    0 2px 8px rgba(200,154,58,0.45),
    0 1px 3px rgba(0,0,0,0.15);
  /* transform: none — no shift, pill highlight only */
  transform: none;
}

/* ── Main Content ───────────────────────────────────────── */
.main-content {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* History tab gets its own padding */
#tab-history {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 28px 60px;
}

/* ── Tab Panels ─────────────────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.3s ease; }

/* ── FOUC Prevention — navbar renders fully before JS activates tab ──
   The .tab-nav-ready class is added by setActiveTabUI() after the
   correct tab is highlighted. Until then the nav renders at full
   opacity so there is no flash, but no individual tab is active yet.
   This keeps the pill container visually stable from the very first
   paint and prevents any shift when the active class is applied.     */
.tab-nav:not(.tab-nav-ready) .tab-btn {
  /* All tabs appear at equal opacity before activation resolves */
  opacity: 0.65;
  pointer-events: none; /* briefly non-interactive until ready */
}
.tab-nav.tab-nav-ready .tab-btn {
  pointer-events: auto;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Page Title Row ─────────────────────────────────────── */
.hist-title-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--surface, #f8f9fb);
  border: 1.5px solid var(--border, #e4e8ef);
  border-radius: 12px;
  padding: 20px 28px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(28,53,87,0.06);
}

.page-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 20px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}

.page-subtitle {
  color: var(--ink-light);
  font-size: 14px;
  margin-top: 4px;
}

/* ── Invoice Badge ──────────────────────────────────────── */
.invoice-badge {
  background: var(--accent);
  border-radius: var(--radius);
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  box-shadow: var(--shadow);
}

.badge-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}

.badge-number {
  font-family: 'DM Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  color: var(--gold);
}

/* ── Card ───────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.card:focus-within { box-shadow: var(--shadow); }

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.card-icon { font-size: 18px; }

.card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* ── Form Grid ──────────────────────────────────────────── */
.form-grid { display: grid; gap: 18px; }
.two-col { grid-template-columns: 1fr 1fr; }
.full-width { grid-column: 1 / -1; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mid);
}

.required { color: var(--danger); }

.form-input {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(28,53,87,0.1);
  background: var(--surface);
}

.form-input[readonly] {
  background: #EFEDE8;
  color: var(--ink-light);
  cursor: not-allowed;
}

.form-textarea { resize: vertical; min-height: 80px; }

.form-input.mono { font-family: 'DM Mono', monospace; font-size: 14px; }

/* Payment Terms: dropdown + optional custom input on one row */
.payment-terms-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* Select: fixed comfortable width, never stretches */
.payment-terms-select {
  flex: 0 0 160px;
  width: 160px !important;
  min-width: 0;
}

/* Custom input: fills ALL remaining space in the row */
.payment-terms-custom-input {
  flex: 1 1 0;
  width: 0 !important;   /* override .form-input width:100% so flex controls width */
  min-width: 120px;
}

/* Stack vertically on very small screens */
@media (max-width: 480px) {
  .payment-terms-row { flex-direction: column; gap: 6px; }
  .payment-terms-select,
  .payment-terms-custom-input {
    flex: none;
    width: 100% !important;
  }
}

/* ── Line Items Table ───────────────────────────────────── */
/* === MASTER GRID: 8 columns — header and rows use IDENTICAL template === */
:root {
  --inv-cols: 1.6fr 0.45fr 0.7fr 0.85fr 0.55fr 0.95fr 1.1fr 34px;
}

.items-header {
  display: grid;
  grid-template-columns: var(--inv-cols);
  gap: 6px;
  padding: 0 4px 10px;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 12px;
  box-sizing: border-box;
}

.items-header > div {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Item Row ───────────────────────────────────────────── */
.item-row {
  display: grid;
  grid-template-columns: var(--inv-cols);
  gap: 6px;
  align-items: center;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  animation: slideIn 0.2s ease;
  box-sizing: border-box;
  min-width: 0;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.item-row:hover { background: var(--bg); }

.item-row .form-input {
  padding: 8px 8px;
  font-size: 13px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-subtotal {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  padding: 8px 10px;
  background: rgba(28,53,87,0.05);
  border-radius: var(--radius-sm);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.btn-remove-item {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--border);
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  line-height: 1;
}

.btn-remove-item:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}

/* ── Add Item Button ────────────────────────────────────── */
.btn-add-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 20px;
  border: 1.5px dashed var(--border-dark);
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mid);
  cursor: pointer;
  transition: all var(--transition);
  width: 100%;
  justify-content: center;
}

.btn-add-item:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(28,53,87,0.04);
}

.btn-icon {
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

/* ── Totals Card ────────────────────────────────────────── */
.totals-card {
  margin-left: auto;
  max-width: 400px;
  background: var(--accent);
  overflow: hidden;   /* hard outer boundary, nothing escapes the card */
}

.totals-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);  /* value column: fills rest, hard-bounded */
  gap: 12px 16px;
  align-items: center;
}

.totals-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
}

.totals-value {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-align: right;
  /* Amount pill: clipped box that shows ... for long numbers */
  display: inline-block;
  max-width: 180px;       /* fixed cap so large numbers never escape */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  cursor: default;        /* signals that hovering reveals the tooltip */
  background: rgba(0,0,0,0.18);
  border-radius: 5px;
  padding: 3px 8px;
}

.totals-divider {
  height: 1px;
  background: rgba(255,255,255,0.15);
  grid-column: 1 / -1;
}

.totals-label.grand { color: #fff; font-weight: 700; font-size: 15px; }
.totals-value.grand {
  color: var(--gold);
  font-size: 20px;
  font-weight: 500;
  max-width: 200px;       /* slightly wider for the prominent grand total */
}

/* ── Action Row ─────────────────────────────────────────── */
.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.primary-actions { display: flex; gap: 12px; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: var(--accent);
}

.btn-primary:hover {
  background: var(--gold-light);
  box-shadow: 0 4px 14px rgba(200,154,58,0.35);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--accent);
  color: #fff;
}

.btn-secondary:hover {
  background: var(--accent-light);
  box-shadow: 0 4px 14px rgba(28,53,87,0.35);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-light);
  border: 1.5px solid var(--border-dark);
}

.btn-ghost:hover {
  border-color: var(--ink-mid);
  color: var(--ink);
}

.btn:active { transform: translateY(0); }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 9999;
  max-width: 320px;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.success { background: var(--success-bg); color: var(--success); border-left: 4px solid var(--success); }
.toast.error   { background: var(--danger-bg);  color: var(--danger);  border-left: 4px solid var(--danger);  }
.toast.info    { background: #EEF3FA; color: var(--accent); border-left: 4px solid var(--accent); }

/* ── History Table ──────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.history-table thead {
  background: var(--accent);
}

.history-table thead th {
  padding: 13px 18px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
}

.history-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.history-table tbody tr:last-child { border-bottom: none; }
.history-table tbody tr:hover { background: var(--bg); }

/* Selected row in history table */
.history-table tbody tr.row-selected {
  background: rgba(28, 53, 87, 0.07);
  outline: 2px solid rgba(28, 53, 87, 0.25);
  outline-offset: -2px;
}
.history-table tbody tr.row-selected:hover {
  background: rgba(28, 53, 87, 0.10);
}

.history-table td {
  padding: 14px 18px;
  color: var(--ink-mid);
}

.history-table td:first-child {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}

.history-table td:last-child {
  font-family: 'DM Mono', monospace;
  font-weight: 600;
  color: var(--ink);
}

.btn-download-row {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1.5px solid var(--border-dark);
  color: var(--ink-mid);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.btn-download-row:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(200,154,58,0.06);
}

/* Preview button (eye icon) */
.btn-preview-row {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1.5px solid var(--border-dark);
  color: var(--accent-light);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.btn-preview-row:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

/* ── View PDF button ────────────────────────────────────── */
.btn-view-row {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1.5px solid var(--border-dark);
  color: var(--accent-light);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  transition: all var(--transition);
}

.btn-view-row:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

/* ── Loader ─────────────────────────────────────────────── */
.loader-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 30px 0;
  color: var(--ink-light);
  font-size: 14px;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty State ────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 50px 0;
  color: var(--ink-light);
}

.empty-icon { font-size: 40px; display: block; margin-bottom: 12px; }

/* ── Site Footer ────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 11px 24px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--ink-faint);
  background: var(--surface);
  /* Flex-based sticky footer — always stays at page bottom */
  margin-top: auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 -1px 8px rgba(0,0,0,0.06);
  flex-shrink: 0;
}

/* Ensure main content grows to push footer down */
.main-content {
  flex: 1 0 auto;
  padding-bottom: 0 !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .main-content { padding: 24px 16px 0 !important; }
  .header-inner { padding: 0 16px; height: 66px; }
  .brand-logo-svg { height: 42px; }
  .two-col { grid-template-columns: 1fr; }
  .totals-card { max-width: 100%; }
  .action-row { flex-direction: column; }
  .primary-actions { width: 100%; }
  .btn { width: 100%; justify-content: center; }
  .btn-ghost { width: auto; }
  .page-title { font-size: 24px; }

  /* Scroll items table horizontally on mobile */
  .items-header,
  .item-row {
    grid-template-columns: 150px 44px 68px 78px 48px 84px 30px;
    min-width: 560px;
  }

  .card { overflow-x: auto; }
  #itemsContainer { min-width: 620px; }
}

@media (max-width: 480px) {
  .tab-btn { padding: 7px 12px; font-size: 13px; }
  .brand-logo-svg { height: 36px; }
  .header-inner { height: 60px; }
}
/* ══════════════════════════════════════════════════════════
   SEARCH & FILTER BAR — History Tab
══════════════════════════════════════════════════════════ */

.search-bar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Top row: tabs + clear button */
.sf-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sf-tabs {
  display: flex;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

.sf-tab {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-light);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.sf-tab:hover { color: var(--ink); background: rgba(28,53,87,0.07); }

.sf-tab--active {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(28,53,87,0.22);
}

/* Clear button */
.sf-clear {
  padding: 8px 16px;
  border: 1.5px solid var(--border-dark);
  border-radius: 6px;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-light);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.sf-clear:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }

/* Panel wrapper */
.sf-panel { width: 100%; }

/* Name search */
.sf-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sf-search-icon {
  position: absolute;
  left: 13px;
  font-size: 15px;
  pointer-events: none;
}

.sf-search-input {
  width: 100%;
  padding: 11px 16px 11px 40px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.sf-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(28,53,87,0.1);
  background: var(--surface);
}

.sf-search-input::placeholder { color: var(--ink-faint); }

/* Date range row */
.sf-dates {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.sf-date-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sf-date-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-light);
}

.sf-date-input {
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  width: 170px;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.sf-date-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(28,53,87,0.1);
}

.sf-arrow {
  font-size: 18px;
  color: var(--ink-faint);
  padding-bottom: 8px;
  line-height: 1;
}

/* Results count */
.results-meta {
  font-size: 13px;
  color: var(--ink-light);
  margin-bottom: 10px;
  padding-left: 2px;
}

.results-meta strong { color: var(--accent); font-weight: 700; }

/* Highlight matched text */
mark.highlight {
  background: #F0D080;
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 600;
  color: var(--ink);
}

/* Responsive */
@media (max-width: 600px) {
  .sf-tab { padding: 7px 12px; font-size: 12.5px; }
  .sf-dates { gap: 8px; }
  .sf-date-input { width: 140px; }
  .sf-arrow { display: none; }
}



/* ══════════════════════════════════════════════════════════
   MODAL STYLES — Edit & Delete
══════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,24,21,0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

/* ── Base modal box ──────────────────────────────────────── */
.modal-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 780px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.25s ease;
}

/* ── Edit Invoice modal — wide 2-column ──────────────────── */
.modal-box--edit {
  max-width: min(96vw, 1120px);
  width: min(96vw, 1120px);
  max-height: 92vh;
  min-height: 580px;
}

.modal-box--sm { max-width: 420px; }

@keyframes slideUp {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── Modal header ────────────────────────────────────────── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.edit-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.edit-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #1C3557, #0f2240);
  color: var(--gold-light, #F0D080);
  border-radius: 8px;
  font-size: 17px;
}

.modal-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.01em;
}

.modal-close {
  width: 34px; height: 34px;
  border: none; background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--ink-light);
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.modal-close:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Modal body — 2-column for edit ─────────────────────── */
.modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

.edit-modal-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  padding: 0;
  overflow: visible;
}

/* ── Left column ─────────────────────────────────────────── */
.edit-col--left {
  padding: 24px 24px 24px 28px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Right column ────────────────────────────────────────── */
.edit-col--right {
  padding: 24px 28px 24px 4px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ── Section labels ──────────────────────────────────────── */
.edit-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-light);
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border);
}

/* ── Modal footer ────────────────────────────────────────── */
.modal-footer {
  padding: 14px 28px;
  border-top: 1.5px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: var(--bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ══════════════════════════════════════════════════════════
   EDIT ITEMS TABLE
══════════════════════════════════════════════════════════ */

/* Edit items column header */
.edit-items-header {
  display: grid;
  grid-template-columns: 1fr 52px 72px 80px 60px 80px 32px;
  gap: 6px;
  padding: 0 4px 10px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-light);
}

/* Edit item rows */
#editItemsContainer .item-row {
  grid-template-columns: 1fr 52px 72px 80px 60px 80px 32px;
  gap: 6px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#editItemsContainer .item-row:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(28,53,87,0.08);
}

/* ══════════════════════════════════════════════════════════
   EDIT TOTALS — pinned at bottom of right column
══════════════════════════════════════════════════════════ */

.edit-totals {
  margin-top: auto;
  padding-top: 18px;
  border-top: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.edit-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 340px;
  font-size: 14px;
  color: var(--ink-mid);
  padding: 4px 0;
}

.edit-totals-row span {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.edit-totals-row strong {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  min-width: 90px;
  text-align: right;
}

/* Grand Total row */
.edit-totals-row.grand {
  max-width: 340px;
  background: linear-gradient(135deg, rgba(28,53,87,0.06), rgba(192,160,80,0.08));
  border: 1.5px solid rgba(192,160,80,0.3);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 4px;
}

.edit-totals-row.grand span {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

.edit-totals-row.grand strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold, #C0A050);
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Edit modal collapses to single column
══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .modal-box--edit {
    max-width: 98vw;
    width: 98vw;
    max-height: 96vh;
  }

  .edit-modal-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .edit-col--left {
    padding: 18px 18px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }

  .edit-col--right {
    padding: 14px 18px 18px;
    overflow: visible;
  }

  .edit-totals-row,
  .edit-totals-row.grand {
    max-width: 100%;
  }
}

@media (max-width: 540px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box--edit {
    border-radius: 16px 16px 0 0;
    max-height: 96dvh;
  }

  .edit-items-header,
  #editItemsContainer .item-row {
    grid-template-columns: 1fr 46px 66px 70px 54px 74px 28px;
    font-size: 11px;
  }

  .edit-items-header { font-size: 9px; }
}

/* Delete modal */
.delete-msg {
  font-size: 15px;
  color: var(--ink-mid);
  line-height: 1.7;
  padding: 8px 0;
}

.delete-msg strong { color: var(--accent); }
.delete-msg em { color: var(--danger); font-style: normal; font-weight: 600; }

/* Danger button */
.btn-danger {
  background: var(--danger);
  color: #fff;
  border: none;
}
.btn-danger:hover {
  background: #8B2020;
  box-shadow: 0 4px 14px rgba(176,64,64,0.35);
  transform: translateY(-1px);
}

/* Action buttons in history table */
.action-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Inline SVG icons in action buttons */
.action-btns button svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  margin-top: -1px;
  flex-shrink: 0;
}

.btn-edit-row {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1.5px solid var(--border-dark);
  color: var(--accent);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.btn-edit-row:hover { border-color: var(--accent); background: rgba(28,53,87,0.07); }

.btn-delete-row {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1.5px solid var(--border-dark);
  color: var(--danger);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
}
.btn-delete-row:hover { border-color: var(--danger); background: var(--danger-bg); }

/* Edit modal responsive — handled in the .modal-box--edit block above */

/* ══════════════════════════════════════════════════════════
   CREATE INVOICE — COMPACT 2-COLUMN SINGLE-PAGE LAYOUT
══════════════════════════════════════════════════════════ */

/* Override main padding for create tab to be tighter */
#tab-create { padding: 0; }

.create-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  min-height: calc(100vh - 64px); /* min-height instead of fixed height */
  padding: 16px 24px 40px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: start; /* columns don't stretch to full height */
}

/* ── LEFT COLUMN ─────────────────────────────────────────── */
.create-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  padding-bottom: 20px;
}

/* Compact top bar: Invoice # + Date side by side */
.compact-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent);
  border-radius: var(--radius);
  padding: 10px 18px;
  gap: 16px;
  flex-shrink: 0;
}

.compact-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cb-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
}

.cb-number {
  font-size: 16px;
  font-weight: 500;
  color: var(--gold);
}

.compact-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compact-bar-right .form-label {
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  margin: 0;
  white-space: nowrap;
}

.cb-date {
  padding: 6px 10px !important;
  font-size: 13px !important;
  width: 148px;
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

.cb-date::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.6); }

/* Customer section */
.cp-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  flex-shrink: 0;
}

.cp-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  margin-bottom: 10px;
}

.cp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cp-section .form-label {
  font-size: 10.5px;
  margin-bottom: 3px;
}

.cp-section .form-input {
  padding: 7px 10px;
  font-size: 13.5px;
}

.cp-addr { resize: none; min-height: unset; height: 48px; }

/* Items section — takes remaining vertical space */
.cp-items-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow shrinking */
}

.cp-items-section .items-header {
  flex-shrink: 0;
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.cp-items-section .items-header > div {
  font-size: 9.5px;
  letter-spacing: 0.06em;
}

/* Scrollable items area */
.items-scroll {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: auto;
  padding-right: 2px;
  /* Items area scrolls when columns overflow on narrow screens */
}

.items-scroll::-webkit-scrollbar { width: 4px; }
.items-scroll::-webkit-scrollbar-track { background: transparent; }
.items-scroll::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 4px; }

.cp-items-section .item-row .form-input {
  padding: 7px 7px;
  font-size: 12.5px;
}

.cp-items-section .btn-add-item {
  flex-shrink: 0;
  padding: 7px;
  font-size: 13px;
  margin-top: 6px;
}

/* ── RIGHT COLUMN ─────────────────────────────────────────── */
.create-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 80px;
  align-self: start;
}

/* Invoice badge on right */
.create-right .invoice-badge {
  background: var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.create-right .badge-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
}

.create-right .badge-number {
  font-size: 13px;
  color: var(--gold);
  word-break: break-all;
}

/* Totals panel */
.right-totals {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rt-label { font-size: 13px; color: var(--ink-mid); }

.rt-value {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.rt-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.rt-grand .rt-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.rt-grand .rt-value {
  font-size: 18px;
  color: var(--gold);
}

/* Action buttons */
.right-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-full { width: 100%; justify-content: center; }

.btn-sm-txt {
  font-size: 13px !important;
  padding: 9px 16px !important;
  color: var(--ink-light) !important;
}

/* ── RESPONSIVE: stack on small screens ─────────────────── */
@media (max-width: 900px) {
  .create-layout {
    grid-template-columns: 1fr;
    min-height: unset;
    height: auto;
  }
  .create-left { overflow: visible; height: auto; }
  .create-right { position: static; }
  .items-scroll { max-height: 260px; }
  .cp-items-section { overflow-x: auto; }
}

@media (max-width: 600px) {
  .create-layout { padding: 12px 14px; }
  .cp-grid { grid-template-columns: 1fr; }
  .compact-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ══════════════════════════════════════════════════════════
   TABLE EMPTY STATE — inline inside tbody
══════════════════════════════════════════════════════════ */

.table-empty-cell {
  padding: 48px 20px !important;
  text-align: center;
  border-bottom: none !important;
}

.table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink-light);
}

.table-empty-icon {
  font-size: 36px;
  line-height: 1;
  display: block;
}

.table-empty-state p {
  font-size: 14px;
  color: var(--ink-light);
  margin: 0;
}

/* Always show the table wrap */
#historyTableWrap { display: block !important; }

/* Loader hide since we use inline tbody loading row */
#historyLoader { display: none !important; }

/* ══════════════════════════════════════════════════════════
   LINE ITEMS COLUMN HEADERS — named cols
   All columns: overflow hidden + ellipsis for safety
══════════════════════════════════════════════════════════ */

/* Global overflow safety for ALL invoice columns */
.items-header > div,
.item-row > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.col-name    { text-align: left; word-break: break-word; white-space: normal; }
.col-qty     { text-align: center; white-space: nowrap; }
.col-vat     { text-align: right; white-space: nowrap; }
.col-subtotal{ text-align: right; white-space: nowrap; }
.col-action  { }

/* ── New item column alignments ─────────────────────────── */
.col-weight  { text-align: right; white-space: nowrap; }
.col-ppc     { text-align: right; white-space: nowrap; }

/* Right-align number inputs in item rows */
.item-qty,
.item-weight,
.item-ppc,
.item-vat {
  text-align: right;
  font-family: 'DM Mono', 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════
   INVOICE META SECTION — Invoice Details card
══════════════════════════════════════════════════════════ */

.cp-grid--meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cp-grid--meta .full-width {
  grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════════════════
   PAYMENT DETAILS SECTION — Checkboxes
══════════════════════════════════════════════════════════ */

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 7px 10px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 38px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}

.checkbox-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-label {
  font-size: 13.5px;
  color: var(--ink-mid);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}



/* ══════════════════════════════════════════════════════════
   BARCODE SCANNER — Scan strip inside Create Invoice
══════════════════════════════════════════════════════════ */

/* Section wrapper — reuses .cp-section base */
.barcode-scan-section { flex-shrink: 0; }

/* Input + buttons row */
.barcode-scan-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Wrapper for icon + text input */
.barcode-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.barcode-scan-icon {
  position: absolute;
  left: 10px;
  font-size: 14px;
  pointer-events: none;
  color: var(--ink-faint);
  line-height: 1;
}

.barcode-scan-input {
  padding-left: 32px !important;   /* make room for icon */
  font-family: 'DM Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  width: 100%;
}

.barcode-scan-input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,154,58,0.14) !important;
}

.barcode-scan-input::placeholder {
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0;
  color: var(--ink-faint);
}

/* Add button — uses .btn .btn-secondary in HTML, just width */
.barcode-scan-btn { flex-shrink: 0; }

/* Camera toggle button */
.barcode-camera-btn {
  flex-shrink: 0;
  gap: 5px;
}

/* Feedback status line below the row */
.barcode-scan-status {
  font-size: 12px;
  color: var(--ink-light);
  margin-top: 6px;
  min-height: 16px;
  line-height: 1.4;
  transition: color var(--transition);
}

.barcode-scan-status.status-ok    { color: var(--success); font-weight: 600; }
.barcode-scan-status.status-error { color: var(--danger);  font-weight: 600; }
.barcode-scan-status.status-warn  { color: #B07020;        font-weight: 600; }


/* ══════════════════════════════════════════════════════════
   CAMERA SCAN PANEL — Inline preview panel
══════════════════════════════════════════════════════════ */

.camera-scan-panel {
  margin-top: 10px;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);          /* dark bg for camera view */
  animation: fadeIn 0.2s ease;
}

/* Panel header: label + close button */
.camera-scan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--accent);
  gap: 8px;
}

.camera-scan-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.camera-close-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  flex-shrink: 0;
}

.camera-close-btn:hover { background: rgba(255,255,255,0.3); }

/* Camera video preview area — html5-qrcode renders here */
.camera-preview-region {
  width: 100%;
  max-height: 260px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
}

/* html5-qrcode injects a video element — make it fill container */
.camera-preview-region video {
  width: 100% !important;
  max-height: 260px;
  object-fit: cover;
  display: block;
}

/* html5-qrcode injects canvas overlays — keep them positioned */
.camera-preview-region canvas {
  position: absolute;
}

/* Status / feedback line below preview */
.camera-status-line {
  padding: 6px 12px 8px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  background: var(--ink);
  text-align: center;
  letter-spacing: 0.02em;
  min-height: 28px;
  transition: color var(--transition);
}

.camera-status-line.scan-ok    { color: #6FD99F; font-weight: 600; }
.camera-status-line.scan-error { color: #EF8585; font-weight: 600; }


/* ══════════════════════════════════════════════════════════
   BARCODE VIEW MODAL — Barcode preview + print
══════════════════════════════════════════════════════════ */

.barcode-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 10px 12px;
}

/* The SVG barcode itself */
.barcode-preview-wrap svg {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
}

.barcode-product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  max-width: 300px;
}

.barcode-number-label {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--ink-light);
  letter-spacing: 0.1em;
}





/* ══════════════════════════════════════════════════════════
   INVENTORY EDITING BANNER — shown during product edit mode
══════════════════════════════════════════════════════════ */

.inv-editing-banner {
  display: none;                       /* shown via JS: .editing-mode class */
  background: rgba(200,154,58,0.1);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #8A6010;
  margin-bottom: 14px;
  align-items: center;
  gap: 8px;
}

.inv-form-card.editing-mode .inv-editing-banner {
  display: flex;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — new classes on mobile
══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Right payment details — 2-col grid on tablet */
  .right-payment-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
  }
  .rpd-title { grid-column: 1 / -1; }
}

@media (max-width: 600px) {

  /* Barcode scan row — stack vertically */
  .barcode-scan-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .barcode-input-wrap { width: 100%; }
  .barcode-scan-btn,
  .barcode-camera-btn { flex: 1; justify-content: center; }

  /* Camera panel — full height preview on small screens */
  .camera-preview-region { max-height: 200px; }

  /* Radio group — more spacing */
  .radio-group { gap: 14px; }
  .radio-option { font-size: 13px; }

  /* Right payment details — single col */
  .right-payment-details {
    grid-template-columns: 1fr;
  }
}

/* ── Radio Group (Branch Type) ──────────────────────────── */
.radio-group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 42px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--ink-mid);
  cursor: pointer;
  user-select: none;
  font-family: 'DM Sans', sans-serif;
}

.radio-option input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: unset !important;   /* override responsive.css global */
  font-size: unset !important;    /* override responsive.css global */
  accent-color: var(--accent);
  cursor: pointer;
  touch-action: manipulation;
}


/* ── Payment Details (right column) ─────────────────────── */
.right-payment-details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rpd-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Compact inputs inside Payment Details */
.rpd-input {
  padding: 8px 10px !important;
  font-size: 13.5px !important;
}

/* Form groups inside payment details — tighter */
.right-payment-details .form-group {
  gap: 4px;
}

.right-payment-details .form-label {
  font-size: 10.5px;
  letter-spacing: 0.07em;
}


/* ── Notes Section ───────────────────────────────────────── */
#notesSection .form-textarea {
  min-height: 60px;
  resize: vertical;
}

#notesSection .form-label {
  font-size: 10.5px;
}


/* ── Invoice Meta Section ────────────────────────────────── */
#invoiceMetaSection select.form-input {
  cursor: pointer;
}

#invoiceMetaSection .form-label {
  font-size: 10.5px;
}


/* ── Responsive ──────────────────────────────────────────── */

/* On tablet (≤ 992px) right column is full width — stack payment details */
@media (max-width: 992px) {
  .right-payment-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }

  .rpd-title { grid-column: 1 / -1; }

  .right-payment-details .form-group { gap: 4px; }
}

@media (max-width: 576px) {
  .right-payment-details {
    grid-template-columns: 1fr;
  }

  .radio-group { gap: 14px; }
  .radio-option { font-size: 13.5px; }

  .rpd-input { font-size: 15px !important; }
}


/* ── PDF Preview Modal ───────────────────────────────────── */

/* Wider modal for PDF viewing */
.modal-box--preview {
  max-width: 900px;
  width: 95vw;
  height: 90vh;
  max-height: 90vh;
}

/* Body fills remaining height so iframe can expand */
.pdf-preview-body {
  padding: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
}

/* iframe fills the entire modal body */
#pdfPreviewFrame {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: #f4f4f4;
}

/* Action row in modal header (Download + Close) */
.pdf-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Download button inside preview header */
.btn-preview-dl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  color: var(--accent);
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-preview-dl:hover {
  background: var(--accent);
  color: #fff;
}

/* Responsive: full-screen modal on mobile */
@media (max-width: 600px) {
  .modal-box--preview {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  #pdfPreviewFrame {
    border-radius: 0;
  }

  .btn-preview-dl {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ══════════════════════════════════════════════════════════
   PAYMENT MODE — Card Selector
   Three exclusive-select cards: Cash · Cheque · Transfer
   Matches design system: navy accent, gold selected state
══════════════════════════════════════════════════════════ */

/* ── Grid container ─────────────────────────────────────── */
.pm-card-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* ── Hide native radio ──────────────────────────────────── */
.pm-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Card shell ─────────────────────────────────────────── */
.pm-card {
  cursor: pointer;
  display: block;
  position: relative;
}

.pm-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px 12px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #E4E0D8);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(26,24,21,0.06));
  transition:
    border-color 0.18s ease,
    background   0.18s ease,
    box-shadow   0.18s ease,
    transform    0.12s ease;
  user-select: none;
}

/* ── Icon ───────────────────────────────────────────────── */
.pm-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--accent, #1C3557);
  transition: color 0.18s, transform 0.18s;
}

/* ── Label ──────────────────────────────────────────────── */
.pm-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: var(--ink-mid, #555);
  white-space: nowrap;
  transition: color 0.18s;
}

/* ── Hover state ─────────────────────────────────────────── */
.pm-card:hover .pm-card-inner {
  border-color: var(--gold, #C89A3A);
  box-shadow: 0 4px 14px rgba(200,154,58,0.14);
  transform: translateY(-2px);
}

.pm-card:hover .pm-icon {
  color: var(--gold, #C89A3A);
}

/* ── Selected state ─────────────────────────────────────── */
.pm-card input[type="radio"]:checked ~ .pm-card-inner {
  border-color: var(--gold, #C89A3A);
  background: #FBF6EC;
  box-shadow:
    0 0 0 3px rgba(200,154,58,0.15),
    0 4px 16px rgba(200,154,58,0.18);
  transform: translateY(-1px);
}

.pm-card input[type="radio"]:checked ~ .pm-card-inner .pm-icon {
  color: var(--gold, #C89A3A);
  transform: scale(1.08);
}

.pm-card input[type="radio"]:checked ~ .pm-card-inner .pm-label {
  color: var(--accent, #1C3557);
  font-weight: 700;
}

/* ── Focus-visible ring for keyboard users ───────────────── */
.pm-card input[type="radio"]:focus-visible ~ .pm-card-inner {
  outline: 2px solid var(--gold, #C89A3A);
  outline-offset: 2px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 540px) {
  .pm-card-group {
    gap: 8px;
  }
  .pm-card-inner {
    padding: 11px 6px 10px;
    gap: 6px;
  }
  .pm-icon {
    width: 22px;
    height: 22px;
  }
  .pm-label {
    font-size: 11.5px;
  }
}


/* ══════════════════════════════════════════════════════════
   SAAS UI UPGRADE — SaaS-level refinements
   Section icons · Date input fix · Field icons · Email/AltPhone
   Load order: appended to style.css (last)
══════════════════════════════════════════════════════════ */


/* ── 1. SECTION TITLE ICONS ─────────────────────────────── */



.section-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.85;
  vertical-align: middle;
  margin-top: -1px;
}


/* ── 2. FIELD-LEVEL LABEL ICONS ─────────────────────────── */



.field-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--ink-light);
  opacity: 0.75;
  margin-top: -1px;
}


/* ── 3. DATE INPUT — fixed icon on right, text left ─────── */

/*
  Wrapper makes the icon positioning context.
  The native date input sits full-width inside.
  A decorative SVG calendar overlays on the right.
  The native picker indicator is hidden; our icon is purely
  decorative — clicking anywhere opens the native picker.
*/
.date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.date-input-styled {
  padding-right: 38px !important; /* make room for custom icon */
  /* Remove native browser calendar icon (Chrome/Edge/Safari) */
  -webkit-appearance: none;
  appearance: none;
}

/* Hide native calendar icon in WebKit browsers */
.date-input-styled::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 38px;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

/* Our decorative SVG calendar icon — always right-aligned */
.date-cal-icon {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-light);
  opacity: 0.55;
  pointer-events: none; /* let clicks pass through to native picker */
  z-index: 1;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

/* When the date input is focused, brighten the icon */
.date-input-wrap:focus-within .date-cal-icon {
  opacity: 0.85;
  color: var(--accent);
}


/* ── 4. cp-section-title emoji removal safety ───────────── */
/* Ensure section titles without icons also look clean */
.cp-section-title svg + span {
  flex: 1;
}
/* ══════════════════════════════════════════════════════════
   PHONE INPUT WITH COUNTRY CODE
   .phone-input-wrap — flex row: [select] [custom-code?] [number]
══════════════════════════════════════════════════════════ */

.phone-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-code-select {
  flex-shrink: 0;
  width: auto;
  min-width: 96px;
  max-width: 110px;
  padding-right: 24px !important;
  font-size: 13px !important;
  cursor: pointer;
}

.phone-code-custom {
  flex-shrink: 0;
  width: 62px;
  min-width: 0;
  font-size: 13px !important;
  text-align: center;
}

.phone-number-input {
  flex: 1;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   INLINE FIELD HINTS (validation messages)
══════════════════════════════════════════════════════════ */

.field-hint {
  display: block;
  min-height: 16px;
  font-size: 11.5px;
  font-family: 'DM Sans', sans-serif;
  margin-top: 4px;
  line-height: 1.4;
  transition: color 0.15s;
}

.field-hint--error {
  color: var(--danger, #B04040);
  font-weight: 600;
}

.field-hint--ok {
  color: #15803d;
  font-weight: 600;
}

/* Invalid input — red border */
.form-input.input-invalid {
  border-color: var(--danger, #B04040) !important;
  background: var(--danger-bg, #FBF0F0) !important;
  box-shadow: 0 0 0 3px rgba(176, 64, 64, 0.10) !important;
}

/* Valid input — green border */
.form-input.input-valid {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.09) !important;
}

/* Responsive — phone wrap stacks on very small screens */
@media (max-width: 400px) {
  .phone-input-wrap {
    flex-wrap: wrap;
  }
  .phone-code-select {
    width: 100%;
    max-width: none;
  }
  .phone-number-input {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════
   CUSTOMER DETAILS MODULE — CSS
══════════════════════════════════════════════════════════ */

/* ── Subtabs always visible ─────────────────────────────── */
.hist-subtabs { display: flex !important; }

/* ── Toolbar ────────────────────────────────────────────── */
.cust-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cust-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.cust-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.45;
  pointer-events: none;
}
.cust-search-input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1.5px solid var(--border, #e4e8ef);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--ink, #1e293b);
  background: var(--bg, #fff);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
}
.cust-search-input:focus {
  border-color: var(--accent, #1C3557);
  box-shadow: 0 0 0 3px rgba(28,53,87,0.09);
}
.cust-export-btn { flex-shrink: 0; }

/* ── Stats strip ─────────────────────────────────────────── */
.cust-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.cust-stat-card {
  background: var(--surface, #f8f9fb);
  border: 1px solid var(--border, #e4e8ef);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: box-shadow 0.2s, transform 0.15s;
}
.cust-stat-card:hover {
  box-shadow: 0 4px 18px rgba(28,53,87,0.1);
  transform: translateY(-2px);
}
.cust-stat-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.cust-stat-val {
  font-family: 'DM Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent, #1C3557);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
#statTotalCustRevenue { color: #15803d; }
#statTopCustomer      { font-size: 16px; }
.cust-stat-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-light, #94a3b8);
  margin-top: 3px;
}

/* ── Customer table ──────────────────────────────────────── */
.cust-table-card { overflow: hidden; }
.cust-table thead th { white-space: nowrap; }

.cust-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.cust-th-sort:hover          { background: rgba(255,255,255,0.1)  !important; }
.cust-th-sort.cust-th--asc,
.cust-th-sort.cust-th--desc  { background: rgba(255,255,255,0.15) !important; }

/* Clickable rows */
.cust-table tbody tr.cust-row {
  transition: background 0.13s;
}
.cust-table tbody tr.cust-row:hover {
  background: rgba(28,53,87,0.05) !important;
  box-shadow: inset 3px 0 0 var(--accent, #1C3557);
}

/* ── Back button ─────────────────────────────────────────── */
.cust-profile-back-row { margin-bottom: 20px; }
.cust-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mid, #64748b);
  background: var(--surface, #f1f5f9);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s;
}
.cust-back-btn:hover {
  background: var(--accent, #1C3557);
  color: #fff;
  border-color: var(--accent, #1C3557);
}

/* ── Profile header ──────────────────────────────────────── */
.cust-profile-header {
  display: flex;
  align-items: center;
  gap: 22px;
  background: linear-gradient(135deg, var(--accent, #1C3557) 0%, #0f2240 100%);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 22px;
  box-shadow: 0 4px 24px rgba(28,53,87,0.22);
}
.cust-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light, #F0D080) 0%, #C89A3A 100%);
  color: var(--accent, #1C3557);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
  text-transform: uppercase;
}
.cust-profile-hero   { flex: 1; min-width: 0; }
.cust-profile-name   { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.cust-profile-meta   { display: flex; flex-wrap: wrap; gap: 14px; }
.cust-meta-chip      { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: rgba(255,255,255,0.75); }

/* ── Profile two-col grid ────────────────────────────────── */
.cust-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}
.cust-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent, #1C3557);
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border, #e4e8ef);
  margin-bottom: 16px;
}
.cust-info-grid {
  padding: 0 20px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.cust-info-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-light, #94a3b8);
  margin-bottom: 4px;
}
.cust-info-value { font-size: 14px; color: var(--ink, #1e293b); word-break: break-word; }
.cust-info-value--mono { font-family: 'DM Mono', monospace; font-size: 13px; }

.cust-kpi-grid { padding: 0 20px 18px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.cust-kpi-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e4e8ef);
  border-radius: 10px;
  transition: box-shadow 0.18s;
}
.cust-kpi-item:hover { box-shadow: 0 2px 10px rgba(28,53,87,0.08); }
.cust-kpi-label { font-size: 12.5px; color: var(--ink-mid, #64748b); font-weight: 500; }
.cust-kpi-value { font-family: 'DM Mono', monospace; font-size: 16px; font-weight: 600; color: var(--accent, #1C3557); }
.cust-kpi-value--revenue { color: #15803d; }

/* ── Payment badges ──────────────────────────────────────── */
.pay-badge { display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap; }
.pay-badge--paid    { background:#dcfce7;color:#15803d;border:1px solid #bbf7d0; }
.pay-badge--pending { background:#fef9c3;color:#854d0e;border:1px solid #fde047; }
.pay-badge--partial { background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) { .cust-stats-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .cust-profile-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px)  {
  .cust-profile-header { flex-direction: column; align-items: flex-start; padding: 20px; }
  .cust-info-grid { grid-template-columns: 1fr; }
  .cust-stats-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 576px)  {
  .cust-stats-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cust-stat-val { font-size: 18px; }
  .cust-toolbar { flex-direction: column; align-items: stretch; }
  .cust-export-btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   CUSTOM DIALOG SYSTEM — replaces native confirm/prompt/alert
   Matches luxury diamond theme (navy + gold)
══════════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────────── */
#customDialogOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 35, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: cdFadeIn 0.18s ease;
}

@keyframes cdFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Dialog Box ──────────────────────────────────────────── */
.cd-box {
  background: var(--surface, #ffffff);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.28),
    0 4px 16px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cdSlideUp 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid var(--border, #e4e8ef);
}

@keyframes cdSlideUp {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Icon Strip ──────────────────────────────────────────── */
.cd-icon-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 10px;
}

.cd-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

/* Variants */
.cd-icon-circle--confirm {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #fbbf24;
  box-shadow: 0 4px 16px rgba(251,191,36,0.3);
}

.cd-icon-circle--danger {
  background: linear-gradient(135deg, #fef2f2, #fecaca);
  border: 2px solid #f87171;
  box-shadow: 0 4px 16px rgba(239,68,68,0.25);
}

.cd-icon-circle--info {
  background: linear-gradient(135deg, #eff6ff, #bfdbfe);
  border: 2px solid #60a5fa;
  box-shadow: 0 4px 16px rgba(96,165,250,0.25);
}

.cd-icon-circle--prompt {
  background: linear-gradient(135deg, #f5f3ff, #ddd6fe);
  border: 2px solid #a78bfa;
  box-shadow: 0 4px 16px rgba(167,139,250,0.25);
}

/* ── Content Area ────────────────────────────────────────── */
.cd-content {
  padding: 12px 28px 20px;
  text-align: center;
}

.cd-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent, #1C3557);
  margin: 0 0 8px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.cd-message {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--ink-mid, #555);
  line-height: 1.6;
  margin: 0;
}

.cd-message strong {
  color: var(--ink, #1a1a1a);
  font-weight: 600;
}

/* ── Prompt Input ────────────────────────────────────────── */
.cd-prompt-wrap {
  padding: 0 28px 16px;
}

.cd-prompt-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-light, #888);
  margin-bottom: 6px;
  display: block;
}

.cd-prompt-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border, #e4e8ef);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--ink, #1a1a1a);
  background: var(--bg, #fff);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.cd-prompt-input:focus {
  border-color: var(--accent, #1C3557);
  box-shadow: 0 0 0 3px rgba(28,53,87,0.1);
}

/* ── Footer ──────────────────────────────────────────────── */
.cd-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px 22px;
  justify-content: center;
  background: var(--bg, #fafbfc);
  border-top: 1px solid var(--border, #e4e8ef);
}

/* ── Dialog Buttons ──────────────────────────────────────── */
.cd-btn {
  flex: 1;
  max-width: 160px;
  padding: 10px 18px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.18s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  letter-spacing: 0.01em;
}

.cd-btn:active { transform: scale(0.97); }

/* Cancel / secondary */
.cd-btn--cancel {
  background: var(--surface, #f1f5f9);
  color: var(--ink-mid, #555);
  border-color: var(--border, #e2e8f0);
}

.cd-btn--cancel:hover {
  background: #e2e8f0;
  color: var(--ink, #1a1a1a);
  border-color: #cbd5e1;
}

/* Confirm / primary — navy+gold */
.cd-btn--confirm {
  background: linear-gradient(135deg, #1C3557 0%, #0f2240 100%);
  color: var(--gold-light, #F0D080);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(15,34,64,0.28);
}

.cd-btn--confirm:hover {
  background: linear-gradient(135deg, #25436e 0%, #1C3557 100%);
  box-shadow: 0 4px 16px rgba(15,34,64,0.35);
  transform: translateY(-1px);
}

/* Danger — delete/reject */
.cd-btn--danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(220,38,38,0.28);
}

.cd-btn--danger:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 16px rgba(220,38,38,0.36);
  transform: translateY(-1px);
}

/* OK only (info/alert) */
.cd-btn--ok {
  background: linear-gradient(135deg, #1C3557 0%, #0f2240 100%);
  color: var(--gold-light, #F0D080);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(15,34,64,0.28);
  max-width: 200px;
}

.cd-btn--ok:hover {
  background: linear-gradient(135deg, #25436e 0%, #1C3557 100%);
  transform: translateY(-1px);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .cd-box { border-radius: 16px; max-width: 100%; }
  .cd-content { padding: 10px 20px 16px; }
  .cd-title { font-size: 16px; }
  .cd-message { font-size: 13.5px; }
  .cd-footer { padding: 14px 16px 18px; }
  .cd-prompt-wrap { padding: 0 20px 14px; }
  .cd-icon-circle { width: 48px; height: 48px; font-size: 22px; }
}
/* ══════════════════════════════════════════════════════════
   ANTI-FLICKER — Tab pre-activation via data-restore-tab
   This uses the attribute set by the inline head script to
   immediately show the correct tab panel before JS runs.
   Prevents the "dashboard flash" on page refresh.
══════════════════════════════════════════════════════════ */

/* When a restore tab is known, hide ALL panels at parse time */
html[data-restore-tab] .tab-panel {
  display: none !important;
  opacity: 0;
}

/* Then show only the matching panel */
html[data-restore-tab="dashboard"]  #tab-dashboard  { display: block !important; opacity: 1; }
html[data-restore-tab="create"]     #tab-create      { display: block !important; opacity: 1; }
html[data-restore-tab="history"]    #tab-history     { display: block !important; opacity: 1; }
html[data-restore-tab="inventory"]  #tab-inventory   { display: block !important; opacity: 1; }
html[data-restore-tab="purchase"]   #tab-purchase    { display: block !important; opacity: 1; }
html[data-restore-tab="sales"]      #tab-sales       { display: block !important; opacity: 1; }
html[data-restore-tab="admin"]      #tab-admin       { display: block !important; opacity: 1; }
html[data-restore-tab="my-profile"] #tab-my-profile  { display: block !important; opacity: 1; }

/* Once JS runs and adds .active classes, remove the attribute-based rules
   (setActiveTabUI in script.js adds tab-nav-ready which signals JS has taken over) */
.tab-nav.tab-nav-ready ~ * html[data-restore-tab] .tab-panel,html:not([data-restore-tab]) .tab-panel {
  /* Back to JS-controlled state */
}

/* ══════════════════════════════════════════════════════════
   PENDING REQUEST APPROVAL CARDS — hist-req-*
   ERP-style structured card layout for edit/delete requests.
   Rendered dynamically by loadHistoryRequests() in script.js.
══════════════════════════════════════════════════════════ */

.hist-req-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hist-req-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e8edf3;
  border-left: 4px solid #f59e0b;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: box-shadow 0.18s;
}

.hist-req-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.09);
}

.hist-req-card:has(.hist-req-type--edit)   { border-left-color: #2563eb; }
.hist-req-card:has(.hist-req-type--delete) { border-left-color: #f59e0b; }

.hist-req-card[data-status="approved"],
.hist-req-card[data-status="rejected"] {
  opacity: 0.78;
}

/* Header */
.hist-req-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 11px;
  border-bottom: 1px solid #f0f4f8;
  background: #fafbfc;
}

/* Type badge */
.hist-req-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 10px;
  border-radius: 6px;
}

.hist-req-type--delete {
  background: #fff3cd;
  color: #92400e;
  border: 1px solid #fde68a;
}

.hist-req-type--edit {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

/* Status pill */
.hist-req-status-pill {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 11px;
  border-radius: 20px;
}

.hist-req-status--pending  { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.hist-req-status--approved { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.hist-req-status--rejected { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Details grid */
.hist-req-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #f0f4f8;
}

.hist-req-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 0;
}

.hist-req-field--full {
  grid-column: 1 / -1;
  border-top: 1px solid #f0f4f8;
  padding-top: 10px;
  margin-top: 4px;
}

.hist-req-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.hist-req-value {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
}

.hist-req-invnum {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 13px;
  color: #1C3557;
  font-weight: 600;
}

.hist-req-reason {
  color: #475569;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}

/* Actions row */
.hist-req-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  background: #fafbfc;
}

.hist-req-resolved {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  font-family: 'DM Sans', sans-serif;
}

/* Buttons */
.hist-req-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.16s, transform 0.1s, border-color 0.16s;
  white-space: nowrap;
  line-height: 1;
}

.hist-req-btn:active { transform: translateY(1px); }

.hist-req-btn--approve {
  background: #16a34a;
  color: #ffffff;
  border: 1.5px solid #15803d;
}

.hist-req-btn--approve:hover {
  background: #15803d;
  border-color: #166534;
}

.hist-req-btn--reject {
  background: transparent;
  color: #dc2626;
  border: 1.5px solid #dc2626;
}

.hist-req-btn--reject:hover {
  background: #fee2e2;
  border-color: #b91c1c;
  color: #b91c1c;
}

.hist-req-empty {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
}

/* Responsive */
@media (max-width: 600px) {
  .hist-req-details {
    grid-template-columns: 1fr;
  }
  .hist-req-field--full {
    grid-column: 1;
  }
  .hist-req-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .hist-req-btn {
    justify-content: center;
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 400px) {
  .hist-req-card { border-radius: 8px; }
  .hist-req-details,
  .hist-req-actions,
  .hist-req-header {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ══════════════════════════════════════════════════════════
   PENDING REQUEST PANEL — hist-req-*
   Compact table-row layout. Rendered by loadHistoryRequests().
   Fixes: correct type badges, dedup, independent edit/delete.
══════════════════════════════════════════════════════════ */

/* ── Outer list container ────────────────────────────────── */
.hist-req-list {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Shared grid: type | inv | customer | reqby | reason | date | status | actions */
.hist-req-list-header,
.hist-req-row {
  display: grid;
  grid-template-columns: 88px 118px 130px 130px minmax(0,1fr) 96px 88px 158px;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  box-sizing: border-box;
  min-width: 0;
}

/* ── Column header ───────────────────────────────────────── */
.hist-req-list-header {
  background: #f8fafc;
  border-bottom: 1.5px solid #e2e8f0;
}

.hist-req-list-header span {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Request row ─────────────────────────────────────────── */
.hist-req-row {
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid #e2e8f0;
  transition: background 0.13s;
}

.hist-req-row:last-child {
  border-bottom: none;
}

.hist-req-row:hover {
  background: #f8fafc;
}

/* Left border accent by type */
.hist-req-row[data-type="edit"]   { border-left-color: #3b82f6; }
.hist-req-row[data-type="delete"] { border-left-color: #ef4444; }

/* Resolved rows dimmed */
.hist-req-row[data-status="approved"],
.hist-req-row[data-status="rejected"] {
  opacity: 0.68;
}

/* ── Cell base ───────────────────────────────────────────── */
.hrr-type,
.hrr-invnum,
.hrr-customer,
.hrr-reqby,
.hrr-date,
.hrr-status,
.hrr-actions {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrr-invnum {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #1C3557;
}

.hrr-customer,
.hrr-reqby { color: #334155; }
.hrr-date   { font-size: 11.5px; color: #64748b; }
.hrr-reason {
  font-size: 11.5px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Type badge ──────────────────────────────────────────── */
.hist-req-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

/* Edit → blue */
.hist-req-type--edit {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

/* Delete → red */
.hist-req-type--delete {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* ── Status pill ─────────────────────────────────────────── */
.hist-req-status-pill {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.hist-req-status--pending  { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.hist-req-status--approved { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.hist-req-status--rejected { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ── Action buttons area ─────────────────────────────────── */
.hrr-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: visible;
  white-space: nowrap;
}

.hist-req-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.14s, transform 0.1s;
  white-space: nowrap;
  line-height: 1;
}

.hist-req-btn:active { transform: translateY(1px); }

.hist-req-btn--approve {
  background: #16a34a;
  color: #ffffff;
  border: 1.5px solid #15803d;
}

.hist-req-btn--approve:hover {
  background: #15803d;
}

.hist-req-btn--reject {
  background: transparent;
  color: #dc2626;
  border: 1.5px solid #dc2626;
}

.hist-req-btn--reject:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #b91c1c;
}

/* ── Resolved label ──────────────────────────────────────── */
.hist-req-resolved {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}

/* ── Empty state ─────────────────────────────────────────── */
.hist-req-empty {
  text-align: center;
  padding: 48px 20px;
  color: #94a3b8;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
}

/* ── Invoice table: Edit Pending button (yellow) ─────────── */
.btn-req-pending--edit {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fcd34d !important;
  cursor: not-allowed !important;
}

/* ── Invoice table: Delete Pending button (red-tinted) ───── */
.btn-req-pending--delete {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fca5a5 !important;
  cursor: not-allowed !important;
}

/* ── Responsive: ≤ 1200px ────────────────────────────────── */
@media (max-width: 1200px) {
  .hist-req-list-header,
  .hist-req-row {
    grid-template-columns: 82px 108px 115px 115px minmax(0,1fr) 88px 82px 145px;
    padding: 8px 12px;
    gap: 7px;
  }
}

/* ── Responsive: ≤ 900px — hide date col ────────────────── */
@media (max-width: 900px) {
  .hist-req-list-header,
  .hist-req-row {
    grid-template-columns: 80px 105px 115px minmax(0,1fr) 82px 82px 140px;
  }
  /* Hide reason col on tablet */
  .hist-req-list-header span:nth-child(5),
  .hrr-reason { display: none; }
}

/* ── Responsive: ≤ 768px — stack as cards ───────────────── */
@media (max-width: 768px) {
  .hist-req-list {
    border: none;
    background: transparent;
    gap: 8px;
  }

  .hist-req-list-header { display: none; }

  .hist-req-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  }

  .hist-req-row[data-type="edit"]   { border-left-color: #3b82f6; }
  .hist-req-row[data-type="delete"] { border-left-color: #ef4444; }

  .hrr-type, .hrr-invnum, .hrr-customer,
  .hrr-reqby, .hrr-date, .hrr-status { white-space: normal; overflow: visible; font-size: 13px; }

  .hrr-date { display: block; }

  .hrr-actions {
    width: 100%;
    justify-content: flex-end;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
    overflow: visible;
  }

  .hist-req-btn { flex: 1; justify-content: center; padding: 8px 10px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════
   INVOICE TEMPLATE SWITCHER
   Shown only for Admin / Support roles (display toggled by JS)
══════════════════════════════════════════════════════════ */

.inv-tpl-block {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 10px);
  padding: 12px 14px 14px;
  margin-bottom: 12px;
}

.inv-tpl-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent, #1C3557);
  margin-bottom: 10px;
  font-family: 'DM Sans', sans-serif;
}

.inv-tpl-title svg {
  color: var(--accent, #1C3557);
  opacity: 0.8;
  flex-shrink: 0;
}

.inv-tpl-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.inv-tpl-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg, #f8fafc);
  color: var(--ink-mid, #64748b);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-tpl-chip:hover {
  border-color: var(--accent, #1C3557);
  color: var(--accent, #1C3557);
  background: #f0f4fa;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(28,53,87,.10);
}

.inv-tpl-chip.active {
  background: linear-gradient(135deg, #1C3557 0%, #2a4f7f 100%);
  border-color: #1C3557;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(28,53,87,.22);
}

.inv-tpl-icon {
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}

.inv-tpl-chip.active .inv-tpl-icon {
  filter: drop-shadow(0 0 3px rgba(255,255,255,.4));
}

/* ══════════════════════════════════════════════════════════
   LOGO UPLOAD BLOCK
   Customer logo (top-left in PDF) + Company logo (footer-right)
══════════════════════════════════════════════════════════ */

.logo-upload-block {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 10px);
  padding: 12px 14px 14px;
  margin-bottom: 12px;
}

.logo-upload-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent, #1C3557);
  margin-bottom: 10px;
  font-family: 'DM Sans', sans-serif;
}

.logo-upload-title svg {
  color: var(--accent, #1C3557);
  opacity: 0.8;
  flex-shrink: 0;
}

.logo-upload-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.logo-upload-slot {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.logo-slot-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-mid, #64748b);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: default;
}

.logo-slot-pos {
  font-weight: 400;
  color: var(--ink-light, #94a3b8);
  text-transform: none;
  letter-spacing: 0;
}

/* Clickable upload zone */
.logo-drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border: 1.5px dashed var(--border, #cbd5e1);
  border-radius: 8px;
  background: var(--bg, #f8fafc);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  overflow: hidden;
  position: relative;
}

.logo-drop-zone:hover,
.logo-drop-zone:focus-within {
  border-color: var(--accent, #1C3557);
  background: #f0f4fa;
  outline: none;
}

.logo-drop-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-light, #94a3b8);
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  pointer-events: none;
}

.logo-drop-placeholder svg {
  opacity: 0.55;
}

/* Preview image fills zone */
.logo-preview-img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  padding: 6px;
  border-radius: 8px;
}

/* Hidden file input */
.logo-file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Remove button */
.logo-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  color: #e53e3e;
  background: transparent;
  border: 1px solid #feb2b2;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  align-self: flex-start;
}

.logo-clear-btn:hover {
  background: #fff5f5;
  border-color: #e53e3e;
}

/* ── Responsive: stack to 1-col on small right panel ─────── */
@media (max-width: 480px) {
  .inv-tpl-chips,
  .logo-upload-row {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   SCROLL TO TOP BUTTON
   Circular floating button — bottom-right corner
   Matches DiamondFlow navy/gold UI theme
══════════════════════════════════════════════════════════ */

#scrollTopBtn {
  position: fixed;
  bottom: 28px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(28, 53, 87, 0.18);
  background: #ffffff;
  color: #1C3557;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 14px rgba(15, 34, 64, 0.14);

  /* Hidden by default — fade + slide up on show */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.88);

  transition:
    opacity      0.24s ease,
    visibility   0.24s ease,
    transform    0.24s ease,
    background   0.15s ease,
    box-shadow   0.15s ease;

  z-index: 8888; /* below modals (modals use 9999+) */
}

/* Visible state — added by JS after THRESHOLD scroll */
#scrollTopBtn.stt-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hover: lift + deepen shadow */
#scrollTopBtn:hover {
  background: #f0f6ff;
  border-color: rgba(28, 53, 87, 0.32);
  box-shadow: 0 5px 20px rgba(15, 34, 64, 0.18);
  transform: translateY(-2px) scale(1.06);
}

/* Active: press-down */
#scrollTopBtn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(15, 34, 64, 0.10);
}

/* Keyboard focus ring */
#scrollTopBtn:focus-visible {
  outline: 2px solid #D4A84B;
  outline-offset: 3px;
}

/* Arrow icon */
#scrollTopBtn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Mobile: tighten position */
@media (max-width: 480px) {
  #scrollTopBtn {
    bottom: 16px;
    right: 14px;
    width: 38px;
    height: 38px;
  }
  #scrollTopBtn svg {
    width: 15px;
    height: 15px;
  }
}