:root {
  --brand: #3f5e26;          /* deep olive green — primary actions, active states */
  --brand-dark: #2f4a1c;     /* pressed / hover green */
  --brand-light: #eef3e8;    /* pale green tint for active backgrounds */
  --gold: #7fa84f;           /* leaf-green accent — used sparingly for emphasis */
  --gold-light: #edf4e3;     /* pale leaf tint */
  --ink: #111a0c;            /* near-black — headings */
  --ink-soft: #1d2939;       /* secondary text */
  --border: #e5e8ee;         /* quiet hairline */
  --text-muted: #667085;
  --bg: #f6f7fb;
  --sidebar-width: 264px;

  /* Frosted-glass surfaces (light mode only — no dark variants) */
  --glass-bg: rgba(255, 255, 255, .78);
  --glass-bg-strong: rgba(255, 255, 255, .92);
  --glass-border: rgba(16, 24, 40, .06);
  --glass-blur: blur(16px) saturate(160%);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 6px 20px rgba(16,24,40,.07);
  --shadow-lg: 0 16px 40px rgba(16,24,40,.10);
}

/* Bootstrap "primary"/link colors follow the green theme */
:root {
  --bs-primary: #3f5e26;
  --bs-primary-rgb: 63, 94, 38;
  --bs-link-color: #3f5e26;
  --bs-link-color-rgb: 63, 94, 38;
  --bs-link-hover-color: #2f4a1c;
  --bs-link-hover-color-rgb: 47, 74, 28;
}
.btn-outline-primary {
  --bs-btn-color: #3f5e26; --bs-btn-border-color: #3f5e26;
  --bs-btn-hover-bg: #3f5e26; --bs-btn-hover-border-color: #3f5e26; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #2f4a1c; --bs-btn-active-border-color: #2f4a1c; --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 63, 94, 38;
}
.text-primary { color: #3f5e26 !important; }

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: .925rem;
  color: #1a1f2b;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.app-serif {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

/* ===================== Sidebar — "Vault" side panel ===================== */
.app-sidebar {
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: #334155;
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .22s var(--ease);
}
.app-sidebar.sidebar-open { transform: translateX(0); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-sidebar { background-color: #ffffff; }
}
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(16,24,40,.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1035;
  display: none;
}
.sidebar-backdrop.show { display: block; }

/* Brand block: circular badge with a thin gold ring — the "vault door" mark */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.3rem 1.1rem 1.1rem;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  position: relative;
}
.sidebar-brand-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  box-shadow: 0 0 0 3px var(--gold-light), var(--shadow-sm);
}
.sidebar-brand-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.sidebar-brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.2;
}
.sidebar-brand-tagline {
  font-size: .74rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
}
/* Small "secured" indicator dot to reinforce the vault identity, purely decorative */
.sidebar-brand-tagline::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--gold-light);
}

.sidebar-nav {
  padding: .75rem .65rem;
  overflow-y: auto;
  flex-grow: 1;
}
.sidebar-section-label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #9aa2b1;
  font-weight: 700;
  margin: 1.15rem .6rem .4rem;
}
.sidebar-section-label:first-child { margin-top: .15rem; }

/* Nav links: icon sits inside its own rounded "chip", link itself gets a soft
   pill highlight on hover/active — closer to modern vault/fintech side panels
   than a flat list. */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 40px;
  padding: 0 .6rem 0 .4rem;
  border-radius: 10px;
  color: #475467;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.sidebar-link .nav-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #f1f4f8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.sidebar-link .nav-icon i { font-size: .95rem; color: #7c8698; transition: color .14s var(--ease); }
.sidebar-link:hover { background-color: #f1f4f8; color: var(--ink); }
.sidebar-link:hover .nav-icon { background: #e7ecf2; }
.sidebar-link.active {
  background-color: var(--brand-light);
  color: var(--brand);
  font-weight: 650;
}
.sidebar-link.active .nav-icon { background: var(--brand); }
.sidebar-link.active .nav-icon i { color: #fff; }

.sidebar-footer {
  padding: .9rem 1.1rem;
  border-top: 1px solid var(--glass-border);
  font-size: .76rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .app-sidebar { transform: none; }
  .sidebar-backdrop { display: none !important; }
  .app-sidebar ~ .app-content-wrap { margin-left: var(--sidebar-width); }
}

/* ===================== Top bar ===================== */
.app-topbar {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  padding: .75rem 1.4rem;
  position: sticky;
  top: 0;
  z-index: 1020;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-topbar { background: #fff; }
}
.topbar-title {
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.topbar-subtitle {
  font-size: .8rem;
  color: var(--text-muted);
}
.topbar-avatar-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  border: none;
  background: transparent;
  padding: 0;
}
.topbar-avatar-btn img,
.topbar-avatar-placeholder {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--brand-light);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 650;
  font-size: .82rem;
  border: 1.5px solid var(--gold-light);
}

/* ===================== Page heading (● Title — Subtitle style) ===================== */
.page-heading {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.1rem;
}
.page-heading .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.page-heading h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
}

/* ===================== Cards & panels ===================== */
.card {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
  animation: fadeInUp .3s var(--ease) both;
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: #d9dee7;
}
.card-header {
  background-color: rgba(255,255,255,.75);
  border-bottom: 1px solid var(--border);
  font-weight: 650;
  font-size: .875rem;
  color: var(--ink);
  border-radius: 14px 14px 0 0 !important;
}
.kpi-card {
  border-left: 3px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 90px; height: 90px;
  background: radial-gradient(circle at top right, var(--brand-light), transparent 70%);
  pointer-events: none;
}
.kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-size: .74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

/* Stagger the KPI row's entrance slightly so cards feel alive, not just present.
   Each card sits alone inside its own column div, so the delay is keyed off
   that column's position in the row rather than nth-of-type on the card. */
.row > [class*="col-"]:nth-child(1) > .kpi-card { animation-delay: .02s; }
.row > [class*="col-"]:nth-child(2) > .kpi-card { animation-delay: .06s; }
.row > [class*="col-"]:nth-child(3) > .kpi-card { animation-delay: .1s; }
.row > [class*="col-"]:nth-child(4) > .kpi-card { animation-delay: .14s; }
.row > [class*="col-"]:nth-child(5) > .kpi-card { animation-delay: .18s; }

/* ===================== Pill tabs (Master Data sub-nav) ===================== */
.pill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.1rem;
}
.pill-tab {
  display: inline-block;
  padding: .42rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: #4b5563;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease), transform .15s var(--ease);
}
.pill-tab:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.pill-tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ===================== Tables (quiet header, tabular numerals) ===================== */
.table thead th {
  background-color: #fafbfc;
  color: #667085;
  font-weight: 650;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  padding-top: .7rem;
  padding-bottom: .7rem;
}
.table td { font-size: .875rem; border-color: var(--border); }
.table-hover tbody tr:hover { background-color: #fafbfc; }
.table-responsive-cards .card { margin-bottom: .75rem; }
.amount-cell { text-align: right; font-variant-numeric: tabular-nums; }

/* ===================== Badges ===================== */
.badge.text-bg-success { background-color: var(--brand-light) !important; color: var(--brand) !important; }
.badge.text-bg-secondary { background-color: var(--gold-light) !important; color: #4d6f2b !important; }

/* ===================== Forms ===================== */
.form-label { font-weight: 550; font-size: .875rem; color: #334155; }
.readonly-field { background-color: #f1f5f9 !important; }
.required-mark { color: #c0392b; }
.form-control, .form-select {
  border-radius: 9px;
  border-color: var(--border);
  font-size: .875rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(63,94,38,.14);
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(63,94,38,.16);
}

/* ===================== Buttons ===================== */
.btn { border-radius: 9px; font-weight: 550; font-size: .875rem; transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease), box-shadow .12s var(--ease), transform .1s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-brand { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-dark-ink { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.btn-dark-ink:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn-outline-brand:hover { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.btn-pill { border-radius: 999px; }

/* ===================== Footer ===================== */
.app-footer {
  background: #fff;
  border-top: 1px solid var(--border);
}
.dev-footer { line-height: 1.8; }

/* ===================== Auth pages (follow the login split screen: form left, photo right) ===================== */
.auth-wrapper {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-family: 'Poppins', 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  padding: 32px 24px;
  padding-right: calc(50% + 24px);
}
.auth-wrapper::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  background: #e9ecef url('../images/login-photo.jpg') center top / cover no-repeat;
  border-radius: 28px 0 0 28px;
}
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 416px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  animation: fadeInUp .3s var(--ease) both;
}
.auth-logo {
  display: inline-block;
  vertical-align: middle;
  width: 44px; height: 44px;
  object-fit: contain;
  margin: 0 .6rem 2.4rem 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.auth-brand {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 2.4rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand);
}
.auth-subtitle {
  color: var(--text-muted);
  margin-bottom: 1.7rem;
  font-size: .875rem;
}
.auth-card .form-label { font-weight: 500; font-size: .875rem; color: var(--ink); margin-bottom: .35rem; }
.auth-card .form-control {
  height: 46px;
  border-radius: 10px;
  border: 1px solid #dfe3e8;
  font-size: .85rem;
  padding: 0 .9rem;
}
.auth-card .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(63,94,38,.14); }
.auth-card .btn-dark-ink {
  height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(63,94,38,.25);
}
.auth-card a { color: var(--brand); text-decoration: none; font-weight: 500; }
.auth-card a:hover { text-decoration: underline; }
.auth-card a.btn { color: #fff; text-decoration: none; }
.auth-footer-note {
  font-size: .78rem;
  color: #475467;
  text-align: center;
  margin-top: 2rem;
  line-height: 1.65;
}
@media (max-width: 991.98px) {
  .auth-wrapper { padding-right: 24px; }
  .auth-wrapper::after { display: none; }
}

/* ===================== Login — split screen (form left, photo right) ===================== */
.login-split {
  min-height: 100vh;
  display: flex;
  background: #fff;
  font-family: 'Poppins', 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.login-split-form {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.login-split-inner { width: 100%; max-width: 416px; animation: fadeInUp .3s var(--ease) both; }
.login-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 2.4rem; }
.login-brand img { width: 44px; height: 44px; object-fit: contain; }
.login-brand span { font-weight: 600; font-size: 1.05rem; color: var(--brand); }
.login-title { font-size: 1.85rem; font-weight: 600; color: var(--ink); margin: 0 0 .25rem; letter-spacing: -0.02em; }
.login-sub { color: var(--text-muted); font-size: .875rem; margin-bottom: 1.7rem; }
.login-split .form-label { font-weight: 500; font-size: .875rem; color: var(--ink); margin-bottom: .35rem; }
.login-split .form-control {
  height: 46px;
  border-radius: 10px;
  border: 1px solid #dfe3e8;
  font-size: .85rem;
  padding: 0 .9rem;
}
.login-split .form-control::placeholder { color: #a8afb8; }
.login-split .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(63,94,38,.14); }
.login-split .forgot-link { font-size: .78rem; color: var(--brand); text-decoration: none; font-weight: 500; }
.login-split .forgot-link:hover { text-decoration: underline; }
.login-split .form-check-label { font-size: .84rem; color: var(--ink); }
.login-split .btn-login {
  height: 46px;
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(63,94,38,.25);
}
.login-split .btn-login:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.login-split .login-alt { text-align: center; font-size: .85rem; color: var(--ink); margin-top: 1.1rem; }
.login-split .login-alt a { color: var(--brand); text-decoration: none; font-weight: 500; }
.login-split .login-alt a:hover { text-decoration: underline; }
.login-split .login-note { text-align: center; font-size: .78rem; color: #475467; margin-top: 2rem; line-height: 1.65; }
.login-split-photo {
  flex: 1 1 50%;
  background: #e9ecef url('../images/login-photo.jpg') center top / cover no-repeat;
  border-radius: 28px 0 0 28px;
}
@media (max-width: 991.98px) {
  .login-split-photo { display: none; }
}

/* ===================== Invoice on-screen (responsive) form ===================== */
.invoice-form .signature-panel .sig-box {
  border: 1px dashed #b7c2cd;
  border-radius: 6px;
  padding: 14px;
  min-height: 90px;
  text-align: center;
}
@media (max-width: 575.98px) {
  .invoice-form .signature-panel > [class*="col-"] { margin-bottom: 10px; }
  .table-responsive-cards table.table { display: none; }
}
@media (min-width: 576px) {
  .table-responsive-cards .stacked-cards { display: none; }
}

/* ===================== Invoice printable area (green corporate voucher) =====================
   A4 sheet, 18 mm side margins, point-based type scale (body 10pt) so screen, print,
   PDF and image export all read the same. */
:root {
  --inv-navy: #3f5e26;
  --inv-navy-light: #eef3e8;
  --inv-navy-line: #d5e0c6;
  --inv-gold: #7fa84f;
  --inv-gray-label: #6b7280;
  --inv-ink: #1f2937;
  --inv-muted: #9ca3af;
  --inv-border: #e2e5ea;
}
.invoice-print-page {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fff;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 0;
  box-shadow: 0 0 8px rgba(0,0,0,.12);
  font-family: Arial, 'Helvetica Neue', Helvetica, 'Liberation Sans', sans-serif;
  font-size: 10pt;
  line-height: 1.45;
  color: var(--inv-ink);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.invoice-print-page *, .invoice-print-page *::before, .invoice-print-page *::after { box-sizing: border-box; }

/* The sheet is ALWAYS a true A4 page (210 x 297 mm). Small screens never reflow it; the
   scaler below shrinks the whole sheet to fit instead, so view / print preview / print /
   JPG / PNG / PDF all show the exact same layout. */
.invoice-sheet-viewport { width: 100%; overflow-x: hidden; }
.invoice-sheet-scaler { width: 210mm; transform-origin: top left; }
.invoice-print-page table { width: 100%; border-collapse: collapse; }

/* Full-bleed accent band at the very top edge of the sheet */
.invoice-topbar-gold { height: 1.2mm; background: var(--inv-gold); }
.invoice-topbar-navy { height: 3.2mm; background: var(--inv-navy); }

/* Page margins: 16 mm top, 18 mm sides, 12 mm bottom */
.invoice-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 14mm 18mm 12mm; }

/* Header: title / subtitle with flanking rules / address / double rule */
.invoice-header-block { text-align: center; margin-bottom: 7mm; }
.invoice-header-block .inv-title {
  margin: 0; color: var(--inv-navy); font-weight: 700; font-size: 21pt; line-height: 1.15; letter-spacing: .06em;
}
.invoice-header-block .inv-subtitle {
  display: flex; align-items: center; justify-content: center; gap: 4mm;
  margin: 3mm 0 0; color: var(--inv-gold); font-weight: 700; font-size: 9.5pt; letter-spacing: .3em;
}
.invoice-header-block .inv-subtitle .rule { display: block; width: 22mm; height: 1px; background: var(--inv-navy-line); }
.invoice-header-block .addr { margin-top: 3mm; font-size: 8.5pt; color: var(--inv-gray-label); }
.invoice-header-block .inv-divider {
  height: 3px; margin: 5mm 0 0; border: 0; background: none;
  border-top: 2px solid var(--inv-navy); border-bottom: 1px solid var(--inv-gold);
}

/* Identity strip: tinted band, four cells split by hairlines, last one right-aligned */
.invoice-identity-strip {
  border-collapse: separate !important; border-spacing: 0;
  background: var(--inv-navy-light); border: 1px solid var(--inv-navy-line); border-radius: 6px;
  margin-bottom: 5mm;
}
.invoice-identity-strip td { padding: 9px 14px; vertical-align: top; width: 25%; }
.invoice-identity-strip td + td { border-left: 1px solid var(--inv-navy-line); }
.invoice-identity-strip td:first-child { width: 27%; }
.invoice-identity-strip td:last-child { width: 29%; }
.invoice-identity-strip .field-value { white-space: nowrap; }

/* Detail grid: 3 columns x 2 rows with hairlines */
.invoice-detail-grid { margin-bottom: 4mm; }
.invoice-detail-grid td { padding: 10px 14px 10px 0; vertical-align: top; width: 33.33%; border-bottom: 1px solid var(--inv-border); }
.invoice-detail-grid tr.divider-row { display: none; }

.field-label {
  display: block; font-size: 7pt; font-weight: 700; letter-spacing: .1em;
  color: var(--inv-gray-label); text-transform: uppercase; margin-bottom: 3px;
}
.field-value { font-size: 10pt; font-weight: 500; color: var(--inv-ink); }
.invoice-identity-strip .field-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Purpose block */
.invoice-purpose { padding: 10px 0 12px; margin-bottom: 5mm; border-bottom: 1px solid var(--inv-border); }

/* Itemized lines */
.invoice-amount-lines { margin-bottom: 5mm; font-size: 10pt; }
.invoice-amount-lines th {
  text-align: left; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .1em;
  color: #fff; background: var(--inv-navy); padding: 8px 12px; font-weight: 700;
}
.invoice-amount-lines th:last-child { text-align: right; }
.invoice-amount-lines tbody tr:nth-child(even) { background: #f8faf6; }
.invoice-amount-lines td { padding: 9px 12px; border-bottom: 1px solid var(--inv-border); vertical-align: top; }
.invoice-amount-lines td.amt { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Grand total: words on the left, figure on the right */
.invoice-total-box {
  display: flex; align-items: center; justify-content: space-between; gap: 8mm;
  background: var(--inv-navy-light);
  border: 1px solid var(--inv-navy-line); border-left: 4px solid var(--inv-navy);
  border-radius: 6px;
  padding: 13px 18px;
  margin-bottom: 5mm;
}
.invoice-total-box .total-left { flex: 1 1 auto; min-width: 0; }
.invoice-total-box .field-label { color: var(--inv-navy); }
.invoice-total-box .total-words { font-size: 9pt; color: #475569; font-style: italic; margin-top: 2px; }
.invoice-total-box .total-amount {
  flex: 0 0 auto; text-align: right; white-space: nowrap;
  font-size: 20pt; font-weight: 700; line-height: 1.1; color: var(--inv-navy); font-variant-numeric: tabular-nums;
}

/* Remarks */
.invoice-remarks-box { border: 1px solid var(--inv-border); border-radius: 6px; padding: 10px 14px; margin-bottom: 4mm; }
.invoice-remarks-box .field-value { font-size: 9.5pt; font-weight: 400; }

/* Signatures: top-aligned so all three lines sit on one baseline */
.invoice-signature-row { margin-top: 6mm; table-layout: fixed; }
.invoice-signature-row td { width: 33.33%; text-align: center; padding: 18mm 8mm 0; vertical-align: top; }
.invoice-signature-row .sig-line { border-top: 1px solid #374151; margin: 0 0 6px; }
.invoice-signature-row .sig-role { font-size: 7.5pt; font-weight: 700; letter-spacing: .12em; color: var(--inv-navy); text-transform: uppercase; }
.invoice-signature-row .sig-name { font-size: 10pt; font-weight: 700; color: var(--inv-ink); margin-top: 2px; }
.invoice-signature-row .sig-id { font-size: 8pt; color: var(--inv-gray-label); margin-top: 1px; }

/* Footer pinned to the bottom of the sheet */
.invoice-footer-wrap { margin-top: auto; padding-top: 8mm; }
.invoice-footer-note {
  text-align: center; font-size: 8pt; line-height: 1.5; color: var(--inv-muted);
  padding-top: 8px; border-top: 1px solid var(--inv-border);
}
.invoice-footer-note strong { color: var(--inv-gray-label); }
.invoice-page-footer {
  display: flex; justify-content: space-between; font-size: 7.5pt; color: var(--inv-muted);
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--inv-border);
}

.loading-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; z-index: 2000; flex-direction: column;
  animation: fadeIn .15s var(--ease) both;
}
.loading-overlay.show { display: flex; }
.loading-overlay .spinner-border.text-primary { color: var(--brand) !important; }
.loading-text { color: var(--ink-soft); font-size: .85rem; margin-top: .5rem; }

/* ===================== Motion (light, professional — no dark-mode variants) ===================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media print {
  .app-sidebar, .sidebar-backdrop, .app-topbar, .app-footer, .loading-overlay, .no-print {
    display: none !important;
  }
  .app-content-wrap { margin-left: 0 !important; }
  .card, .kpi-card, .auth-card, .app-main {
    animation: none !important;
    box-shadow: none !important;
  }
  * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card, .auth-card, .loading-overlay, .sidebar-link, .btn, .kpi-value {
    animation: none !important;
    transition: none !important;
  }
}
.app-main { animation: fadeIn .2s var(--ease) both; }