/* =====================================================================
   Essjay Invoicing Portal – prototype styles
   Layered on Bootstrap 5.3. The customer-facing invoice document has its
   own styles inside app.js (DOC_CSS) so print / download stay identical.
   ===================================================================== */
:root {
  --brand: #e8722a;          /* Essjay logo orange – accents only */
  --brand-dark: #b9520f;     /* darker orange for text/buttons (AA on white) */
  --primary: #1d4f91;
  --ink: #1f2937;
  --muted: #5b6573;
  --bg: #f4f6f9;
  --surface: #fff;
  --border: #e1e6ee;
  --sidebar-bg: #17212f;
  --sidebar-w: 248px;

  --bs-primary: #1d4f91; --bs-primary-rgb: 29, 79, 145;
  --bs-link-color: #1d4f91; --bs-link-color-rgb: 29, 79, 145;
  --bs-link-hover-color: #133a6d; --bs-link-hover-color-rgb: 19, 58, 109;
  --bs-body-bg: var(--bg); --bs-body-color: var(--ink);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--muted);
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
}
body { background: var(--bg); color: var(--ink); }
.text-secondary { color: var(--muted) !important; }

/* Buttons – override Bootstrap primary to the app blue */
.btn-primary { --bs-btn-bg: #1d4f91; --bs-btn-border-color: #1d4f91; --bs-btn-hover-bg: #173f75; --bs-btn-hover-border-color: #173f75; --bs-btn-active-bg: #133a6d; --bs-btn-active-border-color: #133a6d; --bs-btn-disabled-bg: #1d4f91; --bs-btn-disabled-border-color: #1d4f91; --bs-btn-focus-shadow-rgb: 29, 79, 145; }
.btn-outline-primary { --bs-btn-color: #1d4f91; --bs-btn-border-color: #1d4f91; --bs-btn-hover-bg: #1d4f91; --bs-btn-hover-border-color: #1d4f91; --bs-btn-active-bg: #173f75; --bs-btn-active-border-color: #173f75; --bs-btn-focus-shadow-rgb: 29, 79, 145; }
.btn-accent { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; font-weight: 600; }
.btn-accent:hover { background: #9c4409; border-color: #9c4409; color: #fff; }
.text-bg-primary { background-color: #1d4f91 !important; }
:focus-visible { outline: 3px solid rgba(29, 79, 145, .55); outline-offset: 2px; }
.form-control:focus, .form-select:focus { border-color: #1d4f91; box-shadow: 0 0 0 .2rem rgba(29, 79, 145, .2); }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: .6rem 1rem; z-index: 3000; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#view { padding: 1.4rem 1.5rem 2rem; width: 100%; max-width: 1560px; margin: 0 auto; outline: none; flex: 1; }
.sidebar { --bs-offcanvas-width: 264px; --bs-offcanvas-bg: var(--sidebar-bg); color: #cbd5e1; }
.sidebar .offcanvas-body { padding: 1rem; display: flex; }
.sidebar .brand { display: block; background: #fff; border-radius: 10px; padding: 8px 10px; margin-bottom: 1rem; }
.sidebar .brand img { width: 100%; height: auto; display: block; }
.sidebar .nav-link { color: #cbd5e1; border-radius: 8px; padding: .55rem .75rem; display: flex; align-items: center; gap: .65rem; margin-bottom: 2px; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar .nav-link.active { background: rgba(232, 114, 42, .2); color: #fff; box-shadow: inset 3px 0 0 var(--brand); font-weight: 600; }
.sidebar-foot { color: #94a3b8; padding-top: 1rem; }
@media (min-width: 992px) {
  .sidebar-col { width: var(--sidebar-w); flex: none; background: var(--sidebar-bg); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .sidebar .offcanvas-body { min-height: 100%; }
}
.topbar { position: sticky; top: 0; z-index: 1010; background: #fff; border-bottom: 1px solid var(--border); padding: .55rem 1.5rem; display: flex; align-items: center; gap: .75rem; }
.proto-pill { background: #fff4e5; color: #7a4100; border: 1px solid #f5d9ad; border-radius: 999px; padding: .2rem .75rem; font-size: .8rem; }
.user-btn { display: flex; align-items: center; gap: .5rem; border: 0; background: transparent; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 700; }

.page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem 1rem; margin-bottom: 1.1rem; }
.page-title { font-size: 1.55rem; font-weight: 700; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.page-sub { color: var(--muted); margin: .2rem 0 0; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.breadcrumb { font-size: .875rem; }

/* ---------- Cards / KPI / stats ---------- */
.card { border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); background: var(--surface); }
.card-header { background: #fff; border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0 !important; padding: .8rem 1rem; }
.card-footer { background: #fafbfc; border-top: 1px solid var(--border); }
.kpi { display: flex; align-items: center; gap: .9rem; padding: 1rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--ink); height: 100%; transition: box-shadow .15s, border-color .15s; }
.kpi:hover { box-shadow: 0 3px 12px rgba(16, 24, 40, .08); border-color: #cdd6e3; color: var(--ink); }
.kpi > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.kpi-icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.25rem; flex: none; }
.kpi-label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.kpi-sub { font-size: .78rem; color: var(--muted); }
.k-blue .kpi-icon { background: #e6effb; color: #1d4f91; } .k-green .kpi-icon { background: #e2f4e8; color: #14602a; }
.k-amber .kpi-icon { background: #fdf1d9; color: #7a4d00; } .k-red .kpi-icon { background: #fce5e5; color: #a11d1d; } .k-slate .kpi-icon { background: #eceff3; color: #3d4653; }
.stat { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column; }
.stat-n { font-size: 1.6rem; font-weight: 700; }
.chart-box { position: relative; height: 260px; }
.filter-bar .form-label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.empty-state > i { font-size: 2rem; display: block; margin-bottom: .4rem; opacity: .7; }
.empty-inline { background: #f7f9fc; border: 1px dashed #cdd6e3; border-radius: 8px; padding: .75rem 1rem; color: var(--muted); }

/* ---------- Status badges (icon + text, never colour alone) ---------- */
.badge.status { font-weight: 600; padding: .4em .65em; display: inline-flex; align-items: center; gap: .3rem; }
.st-draft { background: #eceff3; color: #3d4653; } .st-sent { background: #e2ecfb; color: #123f7c; }
.st-partial { background: #dcf1f1; color: #0a5757; } .st-overdue { background: #fde2e2; color: #971b1b; }
.st-paid { background: #dcf2e3; color: #11592a; } .st-cancelled { background: #e7e9ec; color: #575d67; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; }
.table > thead > tr > th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; white-space: nowrap; border-bottom-width: 1px; background: #fafbfc; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f6f9fd; }
.row-actions { white-space: nowrap; }
.row-actions .btn { margin-left: .15rem; }
.claim-table { font-size: .84rem; } .claim-table td, .claim-table th { white-space: nowrap; padding-left: .4rem; padding-right: .4rem; }
.line-table { min-width: 1000px; font-size: .82rem; }
.line-table > :not(caption) > * > * { padding: .35rem .3rem; }
.line-table .ln-desc { min-width: 165px; }
.line-table .input-group { flex-wrap: nowrap; min-width: 92px; }
.line-table input.form-control-sm { min-width: 66px; }
.line-table tr.row-full > td { background: #f3faf5; }
.ln-error { min-height: 0; }
.ln-error:empty { display: none; }
.totals-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed #e5e9f0; }
.totals-list dt { font-weight: 500; color: var(--muted); }
.totals-list dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.totals-list .grand { border-top: 2px solid #ccd4df; border-bottom: 0; padding-top: .6rem; }
.totals-list .grand dt { color: var(--ink); font-weight: 700; } .totals-list .grand dd { font-size: 1.1rem; }
.kv-list { display: grid; grid-template-columns: 150px 1fr; gap: .4rem .8rem; margin: 0; font-size: .9rem; }
.kv-list dt { color: var(--muted); font-weight: 500; } .kv-list dd { margin: 0; overflow-wrap: anywhere; }
.activity .list-group-item { padding: .55rem 1rem; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: .86rem; }
.form-text { font-size: .78rem; }
.invalid-feedback { font-size: .82rem; }
.chips { display: flex; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .25rem; background: #eef2f8; border: 1px solid #d3ddec; border-radius: 999px; padding: .15rem .3rem .15rem .7rem; margin: 0 .35rem .35rem 0; font-size: .85rem; }
.chip-x { border: 0; background: transparent; border-radius: 50%; line-height: 1; padding: .1rem .15rem; color: #475467; }
.chip-x:hover { background: #d3ddec; }
.sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1020; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 14px rgba(16, 24, 40, .07); }
.sticky-inner { display: flex; align-items: center; gap: 1rem; padding: .6rem 1.5rem; max-width: 1560px; margin: 0 auto; }
@media (min-width: 992px) { .sticky-bar { left: var(--sidebar-w); } }
.doc-frame { background: #e8ecf2; padding: 1rem; border-radius: 8px; overflow-x: auto; }
.doc-frame .inv-doc { min-width: 640px; box-shadow: 0 2px 12px rgba(16, 24, 40, .15); }
.modal .doc-frame { padding: .5rem; }
.pay-page { max-width: 380px; margin: 0 auto; }
.pay-amount { font-size: 2.3rem; font-weight: 700; text-align: center; }
pre.json-box { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 8px; max-height: 60vh; overflow: auto; font-size: .8rem; margin: 0; }

/* ---------- Login ---------- */
.login-wrap { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.login-brand { background: linear-gradient(160deg, #17212f 0%, #223752 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.login-logo { background: #fff; border-radius: 12px; padding: 12px 16px; width: 260px; max-width: 100%; }
.login-points { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .8rem; }
.login-points i { color: var(--brand); margin-right: .5rem; }
.login-panel { display: grid; place-items: center; padding: 2rem 1.25rem; background: #fff; }
.login-card { width: 100%; max-width: 400px; }
.demo-hint { background: #f4f7fb; border: 1px dashed #c3d0e3; border-radius: 8px; padding: .75rem 1rem; font-size: .85rem; }
@media (max-width: 991.98px) { .login-wrap { grid-template-columns: 1fr; } .login-brand { display: none; } .login-panel { min-height: 100vh; align-items: start; padding-top: 3rem; } }

/* ---------- Responsive tables → stacked cards below 992px ---------- */
@media (max-width: 991.98px) {
  #view { padding: 1rem .85rem 2rem; } .topbar { padding: .55rem .85rem; } .sticky-inner { padding: .6rem .85rem; }
  .resp-table { min-width: 0 !important; }
  .resp-table thead { position: absolute; left: -9999px; }
  .resp-table, .resp-table tbody, .resp-table tfoot, .resp-table tr { display: block; width: 100%; }
  .resp-table tr { border: 1px solid var(--border); border-radius: 10px; margin: .6rem 0; padding: .35rem .6rem; background: #fff; }
  .card > .table-responsive > .resp-table > tbody > tr { margin: .6rem; width: auto; }
  .resp-table td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0 !important; padding: .35rem .15rem !important; text-align: right !important; background: transparent !important; }
  .resp-table td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; flex: none; font-size: .8rem; }
  .resp-table td:not([data-label])::before { content: none; }
  .resp-table td:not([data-label]) { justify-content: flex-end; }
  .resp-table td > .input-group, .resp-table td > input, .resp-table td > select { max-width: 58%; }
  .resp-table .ln-desc { display: block; text-align: left !important; }
  .resp-table .ln-desc::before { display: block; margin-bottom: .2rem; }
  .resp-table td.ln-move { justify-content: flex-start; }
  .kv-list { grid-template-columns: 120px 1fr; }
  .page-title { font-size: 1.3rem; }
}
@media (max-width: 575.98px) { .kpi { padding: .8rem .75rem; } .kpi-icon { display: none; } .kpi-value { font-size: 1.2rem; } .sticky-inner .btn { padding: .35rem .6rem; font-size: .85rem; } .sticky-inner .btn i { display: none; } }

/* ---------- Print: only the invoice document ---------- */
#print-root { display: none; }
@media print {
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  body { background: #fff !important; }
  .inv-doc { padding: 0 !important; max-width: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 12mm; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Toasts ---------- */
#toasts { position: fixed; top: 1rem; right: 1rem; z-index: 2100; display: flex; flex-direction: column; gap: .5rem; width: min(92vw, 380px); pointer-events: none; }
#toasts .toast { pointer-events: auto; width: 100%; }
.text-bg-info { color: #062b3d !important; }
.stage-table { font-size: .86rem; }
.stage-table td, .stage-table th { padding: .5rem .45rem; }
.stage-table td:nth-child(2) { min-width: 180px; }