/* ==========================================================================
   Imaglance Virtuals - Accounting
   Three colours only: FC3174 (brand), black, white. Everything else in this
   file is one of those three at some opacity, which is what keeps the UI
   looking deliberate rather than "a pink accent bolted onto Bootstrap".

   Greys are black at low alpha rather than hand-picked hex values, so they
   sit consistently on white and can never drift out of the palette.
   ========================================================================== */
:root {
  --brand: #FC3174;
  --brand-dark: #D91257;
  --brand-darker: #A8003F;

  --black: #000000;
  --white: #FFFFFF;

  /* Black at decreasing strength - text, borders, washes. */
  --ink: #0A0A0A;
  --ink-80: rgba(0, 0, 0, 0.80);
  --ink-60: rgba(0, 0, 0, 0.60);
  --ink-45: rgba(0, 0, 0, 0.45);
  --ink-25: rgba(0, 0, 0, 0.25);
  --ink-12: rgba(0, 0, 0, 0.12);
  --ink-08: rgba(0, 0, 0, 0.08);
  --ink-04: rgba(0, 0, 0, 0.04);

  /* Brand at decreasing strength. */
  --brand-20: rgba(252, 49, 116, 0.20);
  --brand-12: rgba(252, 49, 116, 0.12);
  --brand-08: rgba(252, 49, 116, 0.08);

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #FAFAFA;
  --border: rgba(0, 0, 0, 0.12);
  --text: #0A0A0A;
  --text-muted: rgba(0, 0, 0, 0.55);

  /* Status still resolves to the palette: brand for negative/alert states,
     black for positive/neutral ones. Colour is never the only signal - every
     status also carries a label. */
  --danger: #FC3174;
  --success: #0A0A0A;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.16);
  --sidebar-width: 248px;
  --topbar-height: 64px;
  --transition-fast: 140ms ease;
  --transition-med: 220ms ease;

  --font: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
svg { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* Amounts line up column-wise only in a tabular font. */
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 0.95em; }

/* ---------- App shell ---------- */
.app-shell { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.sidebar-brand img { width: 30px; height: 30px; }
.sidebar-brand .brand-text { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: var(--white); }
.sidebar-brand .brand-text span { color: var(--brand); }

.sidebar-logo-box {
  width: 100%; background: var(--white); border-radius: var(--radius-md);
  padding: 8px 14px; display: flex; align-items: center; justify-content: center;
}
.sidebar-logo-box img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; }

/* The nav is the one place that scrolls in the sidebar - there are enough
   modules now that a short laptop screen would otherwise clip the last item. */
.sidebar-nav { flex: 1; padding: 10px 10px; overflow-y: auto; overflow-x: hidden; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }

.sidebar-section {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35); padding: 14px 12px 6px;
}

.sidebar-nav .nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; margin-bottom: 2px;
  border-radius: var(--radius-sm);
  font-size: 13.5px; color: rgba(255, 255, 255, 0.72);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-nav .nav-item .icon {
  width: 17px; height: 17px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-nav .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.sidebar-nav .nav-item.active { background: var(--brand); color: var(--white); font-weight: 600; }

.sidebar-footer { padding: 12px 20px 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); flex-shrink: 0; }
.sidebar-footer-label { font-size: 10.5px; color: rgba(255, 255, 255, 0.4); margin-bottom: 2px; }
.sidebar-footer-brand { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.sidebar-footer-brand:hover { text-decoration: underline; }

.main-area { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; min-width: 0; }

.topbar {
  height: var(--topbar-height); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--white);
  border-bottom: 1px solid var(--border);
}

.sidebar-toggle {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; margin-right: 8px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--ink);
}
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 190; }
.sidebar-backdrop.open { display: block; }

.topbar-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; }
.topbar-user { display: flex; align-items: center; gap: 16px; position: relative; }

.topbar-branding {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--ink-04); border: 1px solid var(--border);
}
.topbar-branding span { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }

.topbar-clock {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; padding-right: 16px; border-right: 1px solid var(--border);
}

.avatar-badge {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}

.user-menu-trigger { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); }
.user-menu-trigger:hover { background: var(--ink-04); }

.user-dropdown {
  position: absolute; top: 50px; right: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  min-width: 200px; padding: 6px; display: none; z-index: 40;
}
.user-dropdown.open { display: block; }
.user-dropdown a, .user-dropdown button {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: none; background: transparent; font-size: 13.5px; color: var(--text);
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--ink-04); }

.content-area { flex: 1; overflow: auto; padding: 22px 24px; background: var(--surface-alt); }
.content-area.no-scroll { overflow: hidden; display: flex; flex-direction: column; }
.content-area.no-scroll > .page-header { flex-shrink: 0; }

/* ---------- Full-height entry form (line-item screens) ----------
   Used on no-scroll pages so the page itself never scrolls: the header
   card sizes to its content, and the line-item card sizes to ITS content
   too - flex-grow:0 - so two or three rows sit right above the totals
   footer instead of stretching the card to fill the whole page and
   leaving a dead gap. Only once there are more rows than actually fit
   does flex-shrink squeeze the card down, at which point the table area
   (flex:1 + overflow:auto) scrolls internally and the footer stays put. */
.entry-form { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 16px; }
.entry-form > .card:first-child { flex-shrink: 0; }
.entry-form .entry-lines-card { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; }
.entry-form .entry-lines-card .card-pad { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.entry-form .line-table-scroll { flex: 1; overflow: auto; min-height: 0; }
.entry-form .entry-lines-footer { flex-shrink: 0; }
.entry-form .alert { flex-shrink: 0; }

/* ---------- Cards & stats ---------- */
.card { background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.card-pad { padding: 20px; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.card-title { font-size: 14px; font-weight: 700; color: var(--ink); }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card { padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.stat-icon {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--brand-12); color: var(--brand);
}
.stat-icon svg { width: 21px; height: 21px; }
.stat-icon.ink { background: var(--ink-08); color: var(--ink); }
.stat-value { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.quick-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.quick-action-btn {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.quick-action-btn:hover { border-color: var(--brand); box-shadow: var(--shadow-card); }
.quick-action-btn .icon-wrap {
  width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--brand); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.quick-action-btn .icon-wrap svg { width: 19px; height: 19px; }
.quick-action-btn span.label { font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font-size: 13.5px; font-weight: 600;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--white); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-dark { background: var(--black); color: var(--white); }
.btn-dark:hover { background: var(--ink-80); }
.btn-outline { background: var(--white); border-color: var(--border); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--ink-04); color: var(--ink); }
.btn-danger { background: var(--brand); color: var(--white); }
.btn-danger:hover { background: var(--brand-darker); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-lg { padding: 12px 22px; font-size: 14.5px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.form-label .req { color: var(--brand); margin-left: 2px; }
.form-control {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13.5px; background: var(--white); color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-20); }
.form-control:disabled, .form-control[readonly] { background: var(--ink-04); color: var(--text-muted); }
.form-control.is-invalid { border-color: var(--brand); }
select.form-control {
  appearance: none;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23FC3174' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px 8px;
  padding-right: 34px;
  cursor: pointer;
}
select.form-control:hover { border-color: var(--brand); }
select.form-control:disabled { cursor: not-allowed; }

/* Native date/month pickers can't be restyled beyond the field chrome, so
   the whole control gets the same brand-accented treatment as a select -
   a plain grey calendar icon on a plain white box otherwise reads as
   un-themed next to everything around it. */
input[type="date"].form-control,
input[type="month"].form-control {
  cursor: pointer;
}
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="month"].form-control::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  filter: invert(28%) sepia(89%) saturate(4408%) hue-rotate(325deg) brightness(97%) contrast(97%);
  opacity: 0.75;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
input[type="date"].form-control:hover::-webkit-calendar-picker-indicator,
input[type="date"].form-control:focus::-webkit-calendar-picker-indicator,
input[type="month"].form-control:hover::-webkit-calendar-picker-indicator,
input[type="month"].form-control:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
  background: var(--brand-08);
}
textarea.form-control { resize: vertical; min-height: 70px; }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--brand); margin-top: 4px; font-weight: 600; }
.form-row { display: grid; gap: 14px; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
.form-row-4 { grid-template-columns: repeat(4, 1fr); }

.checkbox-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.checkbox-line input { accent-color: var(--brand); width: 15px; height: 15px; }

/* ---------- Alerts ---------- */
.alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; border: 1px solid; }
.alert-error { background: var(--brand-08); border-color: var(--brand-20); color: var(--brand-darker); }
.alert-success { background: var(--ink-04); border-color: var(--ink-12); color: var(--ink); }
.alert-info { background: var(--ink-04); border-color: var(--ink-12); color: var(--ink-80); }

/* ---------- Tables ---------- */
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th {
  background: var(--surface-alt); color: var(--ink);
  text-align: left; padding: 10px 14px; font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
  position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--border);
}
table.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--ink-08); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover td { background: var(--brand-08); }
table.data-table tfoot td { padding: 11px 14px; font-weight: 700; background: var(--surface-alt); border-top: 2px solid var(--ink-12); }
table.data-table tr.is-cancelled td { color: var(--text-muted); text-decoration: line-through; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; }
.badge-brand { background: var(--brand-12); color: var(--brand-darker); }
.badge-ink { background: var(--ink-08); color: var(--ink); }
.badge-outline { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }

.pill-radio {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; background: var(--white);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.pill-radio input { accent-color: var(--brand); }
.pill-radio:has(input:checked) { background: var(--brand-12); border-color: var(--brand); color: var(--brand-darker); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--ink-04); border: 1px solid var(--border); font-size: 12px; }
.chip .remove { color: var(--brand); cursor: pointer; font-weight: 700; }

@keyframes row-flash-in { from { background: var(--brand-20); } to { background: transparent; } }
.row-flash { animation: row-flash-in 1.4s ease-out; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
  display: none; align-items: center; justify-content: center; z-index: 100;
  animation: fadeIn var(--transition-med);
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  width: 440px; max-width: 92vw; max-height: 88vh; overflow: auto; padding: 24px;
  animation: popIn var(--transition-med);
}
.modal-box.modal-lg { width: 820px; }
.modal-box.modal-xl { width: 1080px; }
.modal-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.modal-body { font-size: 13.5px; color: var(--text-muted); margin-bottom: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

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

/* ---------- Toast ---------- */
.toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast {
  background: var(--black); color: var(--white); padding: 12px 16px;
  border-radius: var(--radius-sm); font-size: 13px; box-shadow: var(--shadow-pop);
  animation: popIn var(--transition-med); min-width: 240px;
  border-left: 3px solid var(--brand);
}
.toast.success { border-left-color: var(--white); }
.toast.error { background: var(--brand); border-left-color: var(--black); }
.toast.warning { border-left-color: #e0a800; }

/* ---------- Auth ---------- */
/* White, never black - the brand pink carries every accent. A faint drifting
   brand-blob backdrop is the only decoration; the sign-in card itself is the
   whole point of the page, so every other screen (login, OTP, TOTP, forced
   password change) keeps the frame minimal and puts its effort into the
   card's own internals instead of surrounding content. */
.auth-shell {
  height: 100vh; width: 100vw; overflow: hidden; display: flex;
  position: relative; background: var(--white);
}
.auth-shell::before,
.auth-shell::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  background: var(--brand); filter: blur(70px); z-index: 0;
}
.auth-shell::before {
  width: 520px; height: 520px; opacity: 0.14; top: -180px; left: -160px;
  animation: authDrift1 22s ease-in-out infinite alternate;
}
.auth-shell::after {
  width: 620px; height: 620px; opacity: 0.10; bottom: -220px; right: -200px;
  animation: authDrift2 26s ease-in-out infinite alternate;
}
@keyframes authDrift1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 40px) scale(1.12); }
}
@keyframes authDrift2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-50px, -30px) scale(1.08); }
}

/* Single-column mode: everything centred, nothing either side of the card -
   used by the plain sign-in screen (login.ejs). */
.auth-shell-center { align-items: center; justify-content: center; }
.auth-center-stack {
  position: relative; z-index: 1; width: 100%; max-width: 400px;
  display: flex; flex-direction: column; align-items: stretch; gap: 20px;
  padding: 0 16px;
}

.auth-panel-left {
  flex: 1.05; color: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px; position: relative; overflow: hidden; z-index: 1;
}
.auth-brand-block {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  animation: authRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.auth-brand-header { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.auth-brand-header img { width: 42px; height: 42px; flex-shrink: 0; }
.auth-brand-word { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; color: var(--ink); margin: 0; }
.auth-brand-word span { color: var(--brand); }
.auth-panel-left p { font-size: 13px; color: var(--text-muted); margin: 0 0 18px; }

/* The three sibling sites, as a compact pill rail. Used both beside the
   left-panel copy on the other auth screens, and standing alone under the
   card on the centred sign-in screen. */
.auth-link-rail { display: flex; gap: 10px; position: relative; z-index: 1; animation: authRise 0.6s ease 0.4s both; }
.auth-link-rail-solo { animation-delay: 0.45s; }
.auth-link-card {
  display: flex; align-items: center; gap: 8px; flex: 1;
  padding: 10px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-link-card:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(252, 49, 116, 0.35); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 10, 10, 0.08); }
.auth-link-card .icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.auth-link-card .icon svg { width: 13px; height: 13px; }
.auth-link-card .label { font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-link-card .url, .auth-link-card .go { display: none; }

.auth-panel-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; z-index: 1; }
.auth-card {
  width: 100%; max-width: 380px; padding: 40px 34px 34px; border-radius: 22px 22px var(--radius-lg, 16px) var(--radius-lg, 16px);
  background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 70px rgba(10, 10, 10, 0.10);
  animation: authRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
  position: relative; overflow: hidden;
}
.auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--ink) 100%);
}
/* Standing alone in the centred layout, the card can afford to be a touch
   larger and more deliberate since it is the only thing on the page. */
.auth-card-solo { max-width: 400px; padding: 44px 38px 36px; }
.auth-card-solo .auth-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.auth-card-solo h2, .auth-card-solo .subtitle { text-align: center; }
.auth-card .auth-logo { margin-bottom: 26px; }
.auth-card h2 { font-size: 22px; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.4px; }
.auth-card .subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 26px; }
.auth-card form .form-group {
  animation: authRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.auth-card form .form-group:nth-of-type(1) { animation-delay: 0.16s; }
.auth-card form .form-group:nth-of-type(2) { animation-delay: 0.22s; }
.auth-card form .form-group:nth-of-type(3) { animation-delay: 0.28s; }
.auth-card form button[type="submit"] { animation: authRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both; }

/* A thin animated underline draws in under the focused field, instead of
   the default browser outline. */
.auth-card .form-control { position: relative; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.auth-card .form-group { position: relative; }
.auth-card .form-group::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--brand); transition: width 0.25s ease; pointer-events: none;
}
.auth-card .form-control:focus { box-shadow: none; border-color: var(--border); }
.auth-card .form-group:focus-within::after { width: 100%; }

/* A small leading icon inside the field itself - user/lock - instead of a
   bare text box, so the form has some visual texture of its own now that
   it is the only thing on the page. */
.auth-field-icon .field-icon {
  position: absolute; left: 13px; bottom: 10px; z-index: 1;
  width: 16px; height: 16px; color: var(--text-muted);
  display: flex; pointer-events: none; transition: color var(--transition-fast);
}
.auth-field-icon .field-icon svg { width: 16px; height: 16px; display: block; }
.auth-field-icon .form-control { padding-left: 38px; }
.auth-field-icon:focus-within .field-icon { color: var(--brand); }

/* Submit button gets a sweeping highlight on hover, like a card being run. */
.auth-card form button[type="submit"] { position: relative; overflow: hidden; }
.auth-card form button[type="submit"]::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
}
.auth-card form button[type="submit"]:hover::after { animation: authShine 0.9s ease; }
@keyframes authShine { from { left: -60%; } to { left: 130%; } }

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

.otp-input-row { display: flex; gap: 9px; margin-bottom: 6px; }
.otp-input-row input {
  width: 46px; height: 54px; text-align: center; font-size: 20px; font-weight: 700;
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink);
  font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.7);
}
.otp-input-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-20); }

.auth-method-switch { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); }

.link-inline { color: var(--brand); font-weight: 600; }
.link-inline:hover { text-decoration: underline; }

.spinner {
  width: 15px; height: 15px; border: 2px solid var(--brand-20);
  border-top-color: var(--brand); border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .auth-shell::before, .auth-shell::after,
  .auth-brand-block, .auth-link-rail, .auth-link-card, .auth-card,
  .auth-card form .form-group, .auth-card form button[type="submit"] {
    animation: none !important;
  }
}

/* ---------- Page furniture ---------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 16px; }
.page-header h1 { font-size: 19px; color: var(--ink); margin: 0; letter-spacing: -0.3px; }
.page-header .subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.page-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tab-btn {
  padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  border: none; background: transparent; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--brand); border-color: var(--brand); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grid-sidebar { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }

.empty-state { text-align: center; padding: 44px 20px; color: var(--text-muted); font-size: 13px; }
.empty-state svg { width: 34px; height: 34px; color: var(--ink-25); margin-bottom: 10px; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .form-control { width: auto; min-width: 180px; }
.toolbar .spacer { flex: 1; }

.section-title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.section-title:first-child { margin-top: 0; }

.kv-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 13px; }
.kv-list dt { color: var(--text-muted); }
.kv-list dd { margin: 0; color: var(--ink); font-weight: 600; }

.report-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.report-nav-item .icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.report-nav-item:hover { background: var(--ink-04); }
.report-nav-item.active { background: var(--brand-12); color: var(--brand-darker); font-weight: 600; }
.report-nav-item.active .icon { color: var(--brand-darker); }
.report-nav-item.active { box-shadow: inset 2px 0 0 var(--brand); }

.date-preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
.date-preset-chip {
  border: 1px solid var(--border); background: var(--white); color: var(--text-muted);
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  cursor: pointer; transition: all var(--transition-fast);
}
.date-preset-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-08); }

/* ---------- Search-as-you-type picker (ledgers, etc.) ---------- */
.picker-wrap { position: relative; }
.picker-menu {
  /* top/left/width are set inline by createPicker (see app.js), computed
     from the input's own viewport position - fixed positioning so the
     dropdown is never clipped by a scrolling ancestor (a table's own
     horizontal-scroll wrapper, a modal body, etc.). */
  display: none; position: fixed; z-index: 200;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); max-height: 240px; overflow-y: auto;
}
.picker-menu.open { display: block; }
.picker-option { padding: 8px 12px; cursor: pointer; font-size: 13px; }
.picker-option:hover, .picker-option.is-active { background: var(--brand-08); }
.picker-option .picker-option-code { font-size: 11px; color: var(--text-muted); }
.picker-option .picker-option-group { font-size: 10.5px; color: var(--text-muted); float: right; }
.picker-empty { padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); }

/* ---------- Bank & cash account cards ---------- */
.bank-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-content: start;
}
.bank-account-card { padding: 18px; display: flex; flex-direction: column; min-height: 220px; }
.bank-account-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bank-account-card-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.bank-account-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bank-account-card-balance { font-variant-numeric: tabular-nums; }
.bank-account-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; flex-wrap: wrap; }
.bank-account-card-actions .btn { flex: 1; justify-content: center; white-space: nowrap; }

/* ---------- Styled file upload (replaces the native "Choose file" button) ---------- */
.upload-dropzone {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--radius-md);
  border: 1.5px dashed var(--border); background: var(--surface-alt);
  color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.upload-dropzone:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-08); }
.upload-dropzone .icon-wrap {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-12); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.upload-dropzone .icon-wrap svg { width: 16px; height: 16px; }
.upload-dropzone input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.upload-dropzone-filename { font-size: 12px; color: var(--ink); font-weight: 600; margin-left: 2px; }

/* ---------- Voucher / invoice entry grid ---------- */
.line-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.line-table th {
  text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.line-table td { padding: 6px 8px; border-bottom: 1px solid var(--ink-08); vertical-align: top; }
.line-table .form-control { padding: 7px 9px; font-size: 13px; }
.line-table .row-remove { background: transparent; border: none; color: var(--text-muted); padding: 6px; border-radius: var(--radius-sm); }
.line-table .row-remove:hover { background: var(--brand-12); color: var(--brand); }

.totals-panel { margin-left: auto; width: 320px; font-size: 13.5px; }
.totals-panel .row { display: flex; justify-content: space-between; padding: 6px 0; }
.totals-panel .row.grand {
  border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 10px;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.totals-panel .row .label { color: var(--text-muted); }
.totals-panel .row .value { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Print (invoice) ---------- */
@media print {
  .sidebar, .topbar, .page-header-actions, .no-print { display: none !important; }
  .app-shell, .main-area, .content-area { display: block; height: auto; overflow: visible; }
  .content-area { padding: 0; background: var(--white); }
  .card { border: none; box-shadow: none; }
  body { background: var(--white); }
  @page { margin: 14mm; }
}

/* ==========================================================================
   Responsive. Desktop rules above are untouched over 900px.
   ========================================================================== */
@media (max-width: 900px) {
  .sidebar-toggle { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 200;
    width: min(280px, 82vw); transform: translateX(-100%);
    transition: transform var(--transition-med); box-shadow: var(--shadow-pop);
  }
  .sidebar.open { transform: translateX(0); }

  .topbar { padding: 0 14px; }
  .topbar-clock, .topbar-branding { display: none; }
  .content-area { padding: 16px 14px; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: repeat(3, 1fr); }
  .grid-2, .grid-3, .grid-sidebar { grid-template-columns: 1fr; }
  .form-row-2, .form-row-3, .form-row-4 { grid-template-columns: 1fr; }
  .totals-panel { width: 100%; }
  .modal-box, .modal-box.modal-lg, .modal-box.modal-xl { width: 94vw; padding: 18px; }
  .auth-panel-left { display: none; }

  /* The fit-to-viewport entry layout only makes sense where there is enough
     height to work with - on a phone it reverts to the normal scrolling page,
     same as every other screen, rather than squeezing a 6-row table into
     whatever's left after the header fields stack to one column. */
  .content-area.no-scroll { display: block; overflow: auto; }
  .entry-form { display: block; }
  .entry-form .entry-lines-card, .entry-form .entry-lines-card .card-pad { display: block; }
  .entry-form .line-table-scroll { min-height: 0; overflow-x: auto; margin-top: 0; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .page-header { flex-direction: column; align-items: stretch; }
  .otp-input-row input { width: 40px; height: 48px; font-size: 18px; }
}