:root {
  --ed-brand-primary: #082a63;
  --ed-brand-primary-strong: #061a42;
  --ed-brand-accent: #80bd17;
  --ed-action-primary: #082a63;
  --ed-action-primary-hover: #061a42;
  --ed-action-success: #18794e;
  --ed-action-danger: #b42318;
  --ed-primary: #082a63;
  --ed-primary-strong: #061a42;
  --ed-accent: #80bd17;
  --ed-sky: #77b7e6;
  --ed-ink: #082a63;
  --ed-muted: #65768e;
  --ed-surface: #f5f7fa;
  --ed-panel: #ffffff;
  --ed-line: #d9e2ec;
  --ed-success: #18794e;
  --ed-warning: #a56a00;
  --ed-danger: #b42318;
  --ed-radius: 15px;
  --ed-shadow: 0 18px 44px rgba(11, 45, 104, .08);
  --ed-hover: #edf5fc;
  --ed-table-head: #f8fafc;
  --ed-table-hover: #f3f8fb;
  --ed-field: #ffffff;
  --ed-secondary: #405168;
  --ed-secondary-bg: #eef2f6;
  --ed-success-soft: #e6f4ed;
  --ed-success-ink: #166534;
  --ed-warning-soft: #fff3d8;
  --ed-warning-ink: #754c00;
  --ed-danger-soft: #fde9e7;
  --ed-danger-ink: #922b24;
  --ed-info-soft: #e7f2fb;
  --ed-info-ink: #15527a;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ed-action-primary: #3268a6;
  --ed-action-primary-hover: #3d78bb;
  --ed-action-success: #18794e;
  --ed-action-danger: #a93631;
  --ed-primary: #8eb9ff;
  --ed-primary-strong: #b7d2ff;
  --ed-accent: #a8d85b;
  --ed-sky: #9bcaf2;
  --ed-ink: #e6edf7;
  --ed-muted: #a4b1c2;
  --ed-surface: #111923;
  --ed-panel: #1b2633;
  --ed-line: #354354;
  --ed-success: #62c497;
  --ed-warning: #e7bd62;
  --ed-danger: #ff8981;
  --ed-shadow: 0 18px 44px rgba(0, 0, 0, .24);
  --ed-hover: #29384a;
  --ed-table-head: #202c3a;
  --ed-table-hover: #253445;
  --ed-field: #202c3a;
  --ed-secondary: #d0d9e5;
  --ed-secondary-bg: #344457;
  --ed-success-soft: #1d4939;
  --ed-success-ink: #b7f0d3;
  --ed-warning-soft: #55451f;
  --ed-warning-ink: #f3d27c;
  --ed-danger-soft: #542d2c;
  --ed-danger-ink: #ffc1ba;
  --ed-info-soft: #203d55;
  --ed-info-ink: #b7dcfa;
}

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] body { background: var(--ed-surface); color: var(--ed-ink); }
:root[data-theme="dark"] .app-topbar { background: var(--ed-panel); color: var(--ed-ink); }
:root[data-theme="dark"] .topbar-menu { background: var(--ed-panel); color: var(--ed-ink); }
:root[data-theme="dark"] .app-brand, :root[data-theme="dark"] .app-brand:hover,
:root[data-theme="dark"] .brand-copy, :root[data-theme="dark"] .topbar-account,
:root[data-theme="dark"] .topbar-icon, :root[data-theme="dark"] .topbar-exit { color: var(--ed-ink) !important; }
:root[data-theme="dark"] .topbar-account:hover, :root[data-theme="dark"] .topbar-icon:hover,
:root[data-theme="dark"] .topbar-notifications[open] > .topbar-icon,
:root[data-theme="dark"] .topbar-exit:hover { background: var(--ed-hover); }
:root[data-theme="dark"] .sidebar { background: #101a27; }
:root[data-theme="dark"] .notification-menu { background: var(--ed-panel); color: var(--ed-ink); }
:root[data-theme="dark"] .notification-menu-item, :root[data-theme="dark"] .notification-menu-heading,
:root[data-theme="dark"] .sidebar-settings-panel label { color: var(--ed-ink); }
:root[data-theme="dark"] .notification-menu-item span { color: var(--ed-secondary); }
:root[data-theme="dark"] .notification-menu-item:hover, :root[data-theme="dark"] .notification-menu-item.is-unread,
:root[data-theme="dark"] .sidebar-settings-panel label:hover { background: var(--ed-table-hover); }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6,
:root[data-theme="dark"] .page-heading h1, :root[data-theme="dark"] .section-heading h2,
:root[data-theme="dark"] .form-section-title { color: var(--ed-ink); }
:root[data-theme="dark"] .form-label, :root[data-theme="dark"] .table,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .select2-container--default .select2-selection { color: var(--ed-ink); }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .select2-container--default .select2-selection,
:root[data-theme="dark"] .select2-container--default .select2-dropdown,
:root[data-theme="dark"] .select2-container--default .select2-results__options { background-color: var(--ed-field); border-color: var(--ed-line); }
:root[data-theme="dark"] .table, :root[data-theme="dark"] .table tbody td,
:root[data-theme="dark"] .table tfoot th { color: var(--ed-ink); }
:root[data-theme="dark"] .table thead th, :root[data-theme="dark"] .table tfoot { background: var(--ed-table-head); color: var(--ed-secondary); }
:root[data-theme="dark"] .table tbody tr:hover { background: var(--ed-table-hover); }
:root[data-theme="dark"] .table tbody td, :root[data-theme="dark"] .table tfoot th,
:root[data-theme="dark"] .profile-details > div { border-color: var(--ed-line); }
:root[data-theme="dark"] .btn-solid.theme-secondary { background: var(--ed-secondary-bg); border-color: var(--ed-secondary-bg); color: var(--ed-ink) !important; }
:root[data-theme="dark"] .btn-outline.theme-primary { color: var(--ed-primary); border-color: #7892b2; }
:root[data-theme="dark"] .btn-outline.theme-secondary, :root[data-theme="dark"] .btn-outline.theme-inverse,
:root[data-theme="dark"] .btn-outline.theme-success, :root[data-theme="dark"] .btn-outline.theme-danger,
:root[data-theme="dark"] .btn-outline.theme-warning, :root[data-theme="dark"] .btn-outline.theme-info { color: var(--ed-ink); border-color: #8292a6; }
:root[data-theme="dark"] .btn-outline:hover { color: #111923; }
:root[data-theme="dark"] .fg-body { color: var(--ed-ink) !important; }
:root[data-theme="dark"] .fg-secondary { color: var(--ed-muted) !important; }
:root[data-theme="dark"] .menu, :root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .dialog, :root[data-theme="dark"] .popover,
:root[data-theme="dark"] .select2-container--default .select2-dropdown { background-color: var(--ed-panel); color: var(--ed-ink); border-color: var(--ed-line); }
:root[data-theme="dark"] .menu-item, :root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .dialog-title, :root[data-theme="dark"] .dialog-body { color: var(--ed-ink); }
:root[data-theme="dark"] .menu-item:hover, :root[data-theme="dark"] .menu-item:focus { background-color: var(--ed-hover); color: var(--ed-ink); }
:root[data-theme="dark"] .form-control::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #a4b1c2; }
:root[data-theme="dark"] .page-link { background-color: var(--ed-panel); color: var(--ed-primary); }
:root[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--ed-surface); color: var(--ed-muted); }
:root[data-theme="dark"] .btn-close { color: var(--ed-ink); }
:root[data-theme="dark"] .auth-card { background: var(--ed-panel); }
:root[data-theme="dark"] .auth-logo { background: #fff; }
:root[data-theme="dark"] .auth-card .form-control[readonly] { background-color: var(--ed-field); }
:root[data-theme="dark"] .status-badge-approved { background: #1d4939; }
:root[data-theme="dark"] .status-badge-pending { background: #55451f; }
:root[data-theme="dark"] .status-badge-rejected { background: #542d2c; }
:root[data-theme="dark"] .status-summary-icon-total { background: #29384a; }
:root[data-theme="dark"] .status-summary-icon-approved { background: #1d4939; }
:root[data-theme="dark"] .status-summary-icon-pending { background: #55451f; }
:root[data-theme="dark"] .status-summary-icon-rejected { background: #542d2c; }
:root[data-theme="dark"] .status-summary-link:hover { background: #29384a; }
:root[data-theme="dark"] .notification-row { background: var(--ed-panel); }
:root[data-theme="dark"] .notification-row:hover, :root[data-theme="dark"] .notification-row.is-unread { background: var(--ed-hover); }
:root[data-theme="dark"] .notification-row-icon { background: #29384a; }
:root[data-theme="dark"] .notification-row-copy > span { color: var(--ed-secondary); }
:root[data-theme="dark"] .metric-card small { color: var(--ed-muted); }
:root[data-theme="dark"] .metric-card-dark h2 { color: var(--ed-ink); }
:root[data-theme="dark"] .amount-cell, :root[data-theme="dark"] .transaction-date-link { color: var(--ed-primary); }
:root[data-theme="dark"] .app-topbar .app-logo { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .overview-hero h2 { color: #fff; }
:root[data-theme="dark"] .table .btn-outline { color: var(--ed-primary); }

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: var(--ed-surface); color: var(--ed-ink); font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: .9rem; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--ed-primary); text-decoration: none; }
a:hover { color: var(--ed-primary-strong); text-decoration: none; }
p { text-align: left; }
h1, h2, h3, h4, h5, h6 { color: var(--ed-ink); font-family: inherit; line-height: 1.25; }
h1, h2, h3 { text-align: left; }
h1 { font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 1.05rem; font-weight: 700; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(119,183,230,.55); outline-offset: 2px; }

/* Shared application shell */
.app-topbar { position: fixed; inset: 0 0 auto; z-index: 1040; height: 68px; background: var(--ed-panel); color: var(--ed-primary); box-shadow: 0 2px 14px rgba(11, 45, 104, .08); border-bottom: 1px solid var(--ed-line); }
.topbar-inner { height: 68px; display: flex; align-items: center; padding: 0 24px; }
.topbar-menu { width: 40px; height: 40px; display: grid; place-items: center; margin-right: 12px; border: 1px solid var(--ed-line); border-radius: 8px; background: var(--ed-panel); color: var(--ed-primary); font-size: 1rem; }
.topbar-menu:hover { background: var(--ed-hover); border-color: var(--ed-sky); }
.app-brand { display: inline-flex; align-items: center; gap: 13px; color: var(--ed-primary); font-weight: 700; }
.app-brand:hover { color: var(--ed-primary); }
.app-logo { display: block; width: 128px; height: auto; max-height: 36px; object-fit: contain; object-position: left center; }
.brand-divider { width: 1px; height: 26px; background: var(--ed-line); }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ed-accent); color: var(--ed-primary); font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; color: var(--ed-primary) !important; font-size: .98rem; }
.brand-copy small { margin-top: 4px; color: var(--ed-muted) !important; font-size: .56rem; font-weight: 600; letter-spacing: .13em; }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar-account { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--ed-primary); font-size: .82rem; }
.topbar-account > i { color: var(--ed-sky); font-size: 1.1rem; }
.topbar-account:hover { background: var(--ed-hover); color: var(--ed-primary); }
.topbar-notifications { position: relative; }
.topbar-icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; appearance: none; background: transparent; color: var(--ed-primary); cursor: pointer; list-style: none; }
.topbar-icon::-webkit-details-marker { display: none; }
.topbar-icon:hover, .topbar-notifications[open] > .topbar-icon { background: var(--ed-hover); color: var(--ed-primary); }
.topbar-icon:focus-visible, .topbar-account:focus-visible, .topbar-exit:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; }
.notification-count { position: absolute; top: 1px; right: 0; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border: 1px solid #fff; border-radius: 10px; background: #d44b3e; color: #fff; font-size: .62rem; font-weight: 800; }
.notification-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1045; display: none; width: min(360px, calc(100vw - 24px)); padding: 0; overflow: hidden; border: 1px solid var(--ed-line); border-radius: 9px; background: var(--ed-panel); box-shadow: 0 14px 34px rgba(7,29,67,.2); }
.topbar-notifications[open] .notification-menu { display: block; }
.notification-menu-heading { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--ed-line); color: var(--ed-ink); }
.notification-menu-heading a { color: var(--ed-primary); font-size: .76rem; font-weight: 700; }
.notification-menu-item { display: block; padding: 12px 15px; border-bottom: 1px solid var(--ed-line); color: var(--ed-ink); }
.notification-menu-item:hover, .notification-menu-item.is-unread { background: var(--ed-table-hover); color: var(--ed-ink); }
.notification-menu-item strong, .notification-menu-item span, .notification-menu-item small { display: block; }
.notification-menu-item strong { font-size: .8rem; }.notification-menu-item span { margin-top: 3px; color: var(--ed-secondary); font-size: .76rem; }.notification-menu-item small { margin-top: 5px; color: var(--ed-muted); font-size: .68rem; }
.notification-empty { margin: 0; padding: 18px 15px; color: var(--ed-muted); font-size: .82rem; }
.topbar-exit { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ed-primary); border-radius: 8px; }
.topbar-exit:hover { background: var(--ed-hover); color: var(--ed-primary); }
.topbar-exit i { color: inherit !important; }

.sidebar { position: fixed; top: 68px; bottom: 0; left: 0; z-index: 1030; display: flex; flex-direction: column; width: 264px; padding: 20px 12px 14px; overflow: hidden; background: var(--ed-primary); border-right: 1px solid rgba(255,255,255,.12); box-shadow: 4px 0 20px rgba(11,45,104,.12); }
.sidebar-scroll { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.sidebar-brand { display: none; }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin: 0 8px 18px; padding: 0 4px 18px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.18); }
.sidebar-user i { color: var(--ed-sky); font-size: 1.85rem; }
.sidebar-user strong { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.sidebar-user small { display: block; margin-top: 2px; color: rgba(255,255,255,.7); font-size: .72rem; }
.sidebar-label { display: flex; align-items: center; gap: 6px; margin: 18px 10px 7px; color: rgba(255,255,255,.66); font-size: .63rem; font-weight: 750; letter-spacing: .13em; }
.sidebar-label i { color: var(--ed-sky); font-size: .7rem; }
.sidebar a.menu_item, .sidebar button.menu_item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.88); text-align: left; font-size: .86rem; font-weight: 500; }
.sidebar .menu_item:not(.major-nav), .sidebar .panels .menu_item { text-transform: none; }
.sidebar .major-nav { background: rgba(255,255,255,.1) !important; color: #fff !important; border-radius: 8px; }
.sidebar > .major-nav { margin-top: 14px; }
.sidebar > .major-nav.first-major { margin-top: 0; }
.sidebar .major-nav i { color: #fff !important; }
.sidebar .major-nav:hover, .sidebar .major-nav.is-active, .sidebar button.major-nav.active { background: rgba(119,183,230,.18) !important; color: #fff !important; }
.sidebar .major-label { display: flex; align-items: center; gap: 7px; margin: 16px 0 6px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.sidebar .major-label i { color: #fff; }
.sidebar a.menu_item i, .sidebar button.menu_item i { display: inline-block; width: 18px; flex: 0 0 18px; color: var(--ed-sky) !important; text-align: center; }
.sidebar a.menu_item:hover, .sidebar button.menu_item:hover, .sidebar a.menu_item.is-active { background: rgba(119,183,230,.17); color: #fff; }
.sidebar button.menu_item.active { background: rgba(119,183,230,.17) !important; color: #fff !important; }
.sidebar button.menu_item.active i { color: var(--ed-sky) !important; }
.sidebar a.menu_item:hover i, .sidebar button.menu_item:hover i, .sidebar a.menu_item.is-active i { color: var(--ed-sky) !important; }
.sidebar button.menu_item .float-end { margin-left: auto; width: auto; font-size: .7rem; transition: transform .18s ease; }
.sidebar button.menu_item.active .float-end { transform: rotate(180deg); }
.panels { padding: 3px 0 5px 28px; }
.panels a.menu_item { min-height: 36px; padding: 7px 10px; font-size: .81rem; font-weight: 500; }
.approval-count { display: inline-grid; flex: 0 0 auto; min-width: 21px; height: 21px; place-items: center; margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--ed-accent); color: var(--ed-primary-strong); font-size: .68rem; font-weight: 800; line-height: 1; }
.panels:not(.is-open) { display: none; }
.sidebar .closebtn { display: none; }
.sidebar-settings { position: relative; flex: 0 0 auto; margin-top: auto; padding: 12px 0 2px; border-top: 1px solid rgba(255,255,255,.14); }
.sidebar-settings > summary { list-style: none; cursor: pointer; }
.sidebar-settings > summary::-webkit-details-marker { display: none; }
.sidebar-settings > summary.settings-icon-only { justify-content: flex-start; width: 44px; min-height: 44px; margin: 0; padding: 9px 12px; border-radius: 0; background: transparent !important; transition: color .18s ease, transform .18s ease; }
.sidebar-settings > summary.settings-icon-only:hover,
.sidebar-settings > summary.settings-icon-only:focus-visible { color: var(--ed-accent) !important; }
.sidebar-settings > summary.settings-icon-only:active { transform: scale(.96); }
.sidebar-settings > summary.settings-icon-only > .fa-gear { width: auto; flex: 0 0 auto; font-size: 1rem; }
.sidebar-settings > summary.settings-icon-only > .settings-chevron { display: none; }
.sidebar-settings[open] > summary .float-end { transform: rotate(180deg); }
.sidebar-settings-panel { max-height: min(220px, 38vh); margin: 7px 8px 0; padding: 10px; overflow-y: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; }
.sidebar-settings-panel > strong { display: block; margin: 0 4px 6px; color: rgba(255,255,255,.7); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-settings-panel label { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 4px; border-radius: 6px; color: rgba(255,255,255,.9); cursor: pointer; font-size: .8rem; }
.sidebar-settings-panel label:hover { background: rgba(119,183,230,.14); }
.sidebar-settings-panel input { accent-color: var(--ed-accent); }
.sidebar-settings-panel label i { width: 17px; color: var(--ed-sky); text-align: center; }
:root[data-theme="dark"] .sidebar-settings-panel { background: rgba(255,255,255,.04); }
.app-content { min-height: calc(100vh - 68px); margin-left: 264px; padding: 100px 32px 32px; }
.content-container { width: min(100%, 1440px); margin: 0 auto; }
.auth-site-link { color: var(--ed-primary); font-weight: 600; }
.auth-site-link:hover { color: var(--ed-primary-strong); text-decoration: underline; text-underline-offset: 3px; }

/* Page structure */
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 24px; }
.page-heading h1 { margin: 0; color: var(--ed-ink); }
.page-heading .fg-secondary { max-width: 640px; margin: 7px 0 0; color: var(--ed-muted) !important; }
.eyebrow { margin: 0 0 6px; color: var(--ed-accent); font-size: .66rem; font-weight: 800; letter-spacing: .14em; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--ed-line); }
.section-heading h2 { margin: 0; color: var(--ed-ink); font-size: 1.05rem; font-weight: 700; }

/* Controls and surfaces */
.btn, .btn-solid, .btn-outline, .btn-subtle, .btn-text { min-height: 40px; padding: 9px 15px; border-radius: 8px; font-size: .82rem; font-weight: 700; box-shadow: none; }
.btn i, .btn-solid i, .btn-outline i, .btn-subtle i, .btn-text i { margin-right: 0; }
.btn-solid.theme-primary, .btn-solid.theme-primary:visited { background: var(--ed-primary); border-color: var(--ed-primary); color: #fff !important; }
.btn-solid.theme-primary:hover, .btn-solid.theme-primary:focus, .btn-solid.theme-primary:active { background: var(--ed-primary-strong); border-color: var(--ed-primary-strong); color: #fff !important; }
.btn-outline.theme-primary { color: var(--ed-primary); border-color: #9bb2cb; }
.btn-outline.theme-primary:hover, .btn-outline.theme-primary:focus { background: var(--ed-primary); border-color: var(--ed-primary); color: #fff; }
.btn-solid.theme-secondary { background: var(--ed-secondary-bg); border-color: var(--ed-line); color: var(--ed-secondary); }
.btn-outline.theme-secondary { border-color: #9bb2cb; color: var(--ed-secondary); }
.btn-solid.theme-success { background: var(--ed-success); border-color: var(--ed-success); color: #fff !important; }
.btn-solid.theme-danger { background: var(--ed-danger); border-color: var(--ed-danger); color: #fff !important; }
.btn-solid.theme-warning { background: #f1c75b; border-color: #f1c75b; color: #17253b !important; }
button:not(.btn):not(.btn-solid):not(.btn-outline):not(.btn-subtle):not(.btn-text) { font: inherit; }
.card, .metric-card, .form-card { border: 1px solid var(--ed-line); border-radius: var(--ed-radius); background: var(--ed-panel); box-shadow: var(--ed-shadow); }
.form-card { max-width: 920px; overflow: hidden; }
.form-card { width: 100%; margin-inline: auto; }
.transaction-form-card { max-width: 820px; }
.transaction-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "details details" "date date" "staff payee" "reason reason" "receipt receipt" "accounting accounting" "account account" "amount amount" "voucher voucher"; column-gap: 20px; row-gap: 5px; }
.transaction-entry-section { grid-area: details; margin: 0 0 2px; }
.transaction-entry-section.transaction-accounting-section { grid-area: accounting; margin-top: 2px; }
.transaction-entry-field { position: relative; min-width: 0; margin-bottom: 5px; }
.field-txn_date { grid-area: date; }
.field-staff_member { grid-area: staff; }
.field-payee_record { grid-area: payee; }
.field-description { grid-area: reason; }
.field-receipt_code { grid-area: receipt; }
.field-acc_name_dr { grid-area: account; }
.field-amount { grid-area: amount; }
.transaction-entry-field .form-control,
.transaction-entry-field .select2-container--default .select2-selection--single { min-height: 40px; }
.transaction-entry-field .form-control { padding-left: 38px; }
.transaction-entry-field .select2-container--default .select2-selection--single { padding-left: 36px; }
.transaction-field-icon { position: absolute; z-index: 2; top: 37px; left: 13px; color: var(--ed-muted); font-size: .82rem; pointer-events: none; }
.voucher-required-check { grid-column: 1 / -1; align-self: center; padding: 10px 12px 10px 2rem; margin: 0 0 8px; border: 1px solid var(--ed-line); border-radius: 8px; background: var(--ed-surface); }
.voucher-required-check .form-check-input { margin-top: .25rem; }
.voucher-required-check .form-text { margin-top: 2px; }
@media (max-width: 600px) { .transaction-entry-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "details" "date" "staff" "payee" "reason" "receipt" "accounting" "account" "amount" "voucher"; } }
.form-section-title { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ed-line); color: var(--ed-primary); font-size: .98rem; font-weight: 750; }
.form-label { margin-bottom: 6px; color: var(--ed-secondary); font-size: .82rem; font-weight: 600; }
.form-control, .select2-container--default .select2-selection { min-height: 44px; border-color: var(--ed-line); border-radius: 7px; background-color: var(--ed-field); color: var(--ed-ink); font-size: .9rem; }
.form-control:focus, .select2-container--default.select2-container--focus .select2-selection { border-color: var(--ed-primary); box-shadow: 0 0 0 3px rgba(8,42,99,.12); }
.report-month-form .form-label, .report-filter .form-label { display: block; margin-bottom: 6px; }
.report-month-form .form-control.w-12, .report-filter .form-control.w-12 { width: 12rem; max-width: 100%; }
.page-size-control { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; }
.page-size-control .form-label { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.page-size-control .page-size-select { flex: 0 0 7.25rem; width: 7.25rem; min-width: 7.25rem; }
.select2-container { width: 100% !important; }.select2-container--default .select2-dropdown { border-color: var(--ed-sky); box-shadow: 0 8px 20px rgba(19,43,78,.1); }.select2-container--default .select2-results__option--highlighted { background: var(--ed-primary); }.select2-container--default .select2-selection--single { display: flex; align-items: center; padding: 6px 12px; }.select2-container--default .select2-selection--single .select2-selection__arrow { top: 9px; }

/* Data tables and statuses */
.table-responsive { border: 1px solid var(--ed-line); border-radius: var(--ed-radius); background: var(--ed-panel); box-shadow: var(--ed-shadow); }
.table-responsive > .table { margin-bottom: 0; min-width: 640px; }
.table { color: var(--ed-ink); }
.table thead th { padding: 13px 14px; border-bottom: 1px solid var(--ed-line); background: var(--ed-table-head); color: var(--ed-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.table tbody td, .table tfoot th { padding: 14px; border-color: var(--ed-line); vertical-align: middle; font-size: .82rem; }
.table-actions { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.transaction-date-link { color: var(--ed-primary); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(11,42,91,.25); text-underline-offset: 3px; }
.transaction-date-link:hover { color: var(--ed-primary-strong); text-decoration-color: currentColor; }
.table tbody tr:hover { background: var(--ed-table-hover); }
.table tfoot { background: var(--ed-table-head); }
.table tfoot th { color: var(--ed-primary); font-weight: 750; }
.table caption { padding: 14px; color: var(--ed-muted); font-size: .8rem; }
.form-check-input { border-color: #adbdce; }
.form-check-input:checked { border-color: var(--ed-primary); background-color: var(--ed-primary); }
.form-floating > .form-control { min-height: 52px; }
.form-floating > label { color: var(--ed-muted); font-size: .88rem; }
.card-body > .alert:last-child { margin-bottom: 0; }
.empty-state { margin-block: 0; }
.badge { padding: 6px 9px; border-radius: 999px; font-size: .68rem; font-weight: 750; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: .7rem; font-weight: 750; }
.status-badge-approved { background: #e6f4ed; color: var(--ed-success); }
.status-badge-pending { background: #fff3d8; color: var(--ed-warning); }
.status-badge-rejected { background: #fde9e7; color: var(--ed-danger); }
.badge.theme-success, .status-badge-approved { background: var(--ed-success-soft); color: var(--ed-success-ink); }
.badge.theme-warning, .status-badge-pending { background: var(--ed-warning-soft); color: var(--ed-warning-ink); }
.badge.theme-danger, .status-badge-rejected { background: var(--ed-danger-soft); color: var(--ed-danger-ink); }
.badge.theme-secondary { background: var(--ed-secondary-bg); color: var(--ed-secondary); }
.badge.theme-primary { background: var(--ed-hover); color: var(--ed-primary); }
.fg-success { color: var(--ed-success-ink) !important; }
.fg-warning { color: var(--ed-warning-ink) !important; }
.fg-danger { color: var(--ed-danger-ink) !important; }
.fg-primary { color: var(--ed-primary) !important; }
.fg-secondary { color: var(--ed-secondary) !important; }
.bg-subtle-success { background: var(--ed-success-soft) !important; }
.bg-subtle-warning { background: var(--ed-warning-soft) !important; }
.bg-subtle-danger { background: var(--ed-danger-soft) !important; }
.bg-subtle-primary { background: var(--ed-hover) !important; }
.bg-subtle-secondary { background: var(--ed-secondary-bg) !important; }

/* Dashboard */
.overview-hero { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 178px; padding: 32px 38px; overflow: hidden; border-radius: 10px; background: linear-gradient(112deg, #082a63 0%, #0b3a78 72%, #14528e 100%); color: #fff; }
.overview-hero::after { content: ""; position: absolute; right: 10%; top: -150px; width: 300px; height: 300px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.035), 0 0 0 68px rgba(255,255,255,.025); }
.overview-hero > div:first-child { position: relative; z-index: 1; }
.overview-hero .eyebrow { color: var(--ed-sky); }
.overview-hero h2 { margin: 7px 0 4px; color: #fff; font-size: 2.3rem; letter-spacing: -.04em; }
.overview-hero p:last-child { margin: 0; color: rgba(255,255,255,.7); font-size: .86rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; color: rgba(255,255,255,.62); font-size: .72rem; }.hero-meta span + span { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.2); }.hero-meta strong { color: #fff; font-weight: 700; }
.hero-mark { position: relative; z-index: 1; margin-right: 4%; color: var(--ed-accent); font-size: 4rem; }
.hero-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }.hero-side .hero-mark { margin-right: 4%; }.hero-pending { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; background: rgba(255,255,255,.08); color: #fff; font-size: .72rem; }.hero-pending:hover { background: rgba(255,255,255,.16); color: #fff; }.hero-pending .fa-arrow-right { margin-left: 3px; font-size: .65rem; }
.overview-hero .hero-pending,
.overview-hero .hero-pending:visited,
.overview-hero .hero-pending:hover,
.overview-hero .hero-pending:focus,
.overview-hero .hero-pending:active { color: #fff !important; }
.overview-hero .hero-pending .fa { color: inherit !important; }
.metric-card { position: relative; min-height: 142px; padding: 21px; transition: transform .18s ease, box-shadow .18s ease; }
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(19,43,78,.1); }
.metric-card p { margin: 0 0 9px; color: var(--ed-muted); font-size: .78rem; font-weight: 650; }
.metric-card h2 { margin: 0 0 7px; color: var(--ed-ink); font-size: 1.6rem; letter-spacing: -.03em; }
.metric-card small { color: #8190a1; font-size: .72rem; }
.metric-icon { position: absolute; top: 21px; right: 21px; color: var(--ed-primary); opacity: .72; }
.metric-card-blue { border-top: 3px solid var(--ed-sky); }.metric-card-lime { border-top: 3px solid var(--ed-accent); }.metric-card-dark { border-top: 3px solid var(--ed-primary); }
.insight-card { min-height: 142px; border-left: 3px solid var(--ed-primary); }.insight-card .card-body { padding: 21px; }.insight-card h2 { margin: 0 0 5px; color: var(--ed-ink); font-size: 1.55rem; }.insight-card p:not(.eyebrow) { margin: 0 0 3px; color: var(--ed-ink); font-weight: 650; }.insight-card small { color: var(--ed-muted); }.stats-summary-grid .metric-card { height: 100%; }
.status-summary { overflow: hidden; border: 1px solid var(--ed-line); border-radius: var(--ed-radius); background: var(--ed-panel); box-shadow: var(--ed-shadow); }
.status-summary-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 21px 12px; border-bottom: 1px solid var(--ed-line); }.status-summary-heading h2 { margin: 0; color: var(--ed-ink); font-size: 1rem; }.status-summary-heading .eyebrow { margin-bottom: 3px; }.status-summary-heading > i { color: var(--ed-primary); font-size: 1.2rem; }
.status-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.status-summary-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 16px 18px; color: var(--ed-ink); }.status-summary-item + .status-summary-item { border-left: 1px solid var(--ed-line); }.status-summary-item > div { min-width: 0; }.status-summary-item strong { display: block; color: var(--ed-ink); font-size: 1.25rem; line-height: 1.1; }.status-summary-item small { display: block; margin-top: 3px; color: var(--ed-muted); font-size: .72rem; white-space: nowrap; }.status-summary-icon { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: .85rem; }.status-summary-icon-total { background: #edf4f8; color: var(--ed-primary); }.status-summary-icon-approved { background: #e6f4ed; color: var(--ed-success); }.status-summary-icon-pending { background: #fff3d8; color: var(--ed-warning); }.status-summary-icon-rejected { background: #fde9e7; color: var(--ed-danger); }.status-summary-link { position: relative; transition: background .18s ease; }.status-summary-link:hover { background: #fffaf0; color: var(--ed-ink); }.status-summary-arrow { margin-left: auto; color: var(--ed-warning); font-size: .7rem; }
.dashboard-table { overflow: hidden; }
.account-dot { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--ed-accent); }
.amount-cell { color: var(--ed-primary); font-weight: 750; }

.alert { display: flex; align-items: flex-start; gap: 9px; border: 1px solid transparent; border-radius: 9px; box-shadow: none; }
.empty-state { display: flex; align-items: center; flex-direction: column; gap: 8px; padding: 48px 24px; border: 1px solid var(--ed-line); border-radius: var(--ed-radius); background: var(--ed-panel); color: var(--ed-muted); text-align: center; box-shadow: var(--ed-shadow); }
.empty-state i { margin-bottom: 4px; color: var(--ed-accent); font-size: 2rem; }.empty-state strong { color: var(--ed-ink); font-size: 1rem; }.empty-state span { font-size: .84rem; }
.notification-row { display: flex; align-items: flex-start; gap: 14px; padding: 17px 19px; border-bottom: 1px solid var(--ed-line); background: var(--ed-panel); color: var(--ed-ink); }
.notification-row:first-of-type { border-top: 1px solid var(--ed-line); }.notification-row:hover, .notification-row.is-unread { background: var(--ed-table-hover); color: var(--ed-ink); }
.notification-row-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 8px; background: var(--ed-surface); color: var(--ed-primary); }
.notification-row-copy { display: grid; min-width: 0; gap: 3px; }.notification-row-copy strong { font-size: .88rem; }.notification-row-copy > span { color: var(--ed-secondary); font-size: .82rem; }.notification-row-copy small { color: var(--ed-muted); font-size: .72rem; }
.notification-unread-dot { flex: 0 0 8px; width: 8px; height: 8px; margin: 6px 2px 0 auto; border-radius: 50%; background: #d44b3e; }
.profile-panel { max-width: 800px; overflow: hidden; }.profile-panel-heading { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--ed-line); }.profile-panel-heading > i { color: var(--ed-primary); font-size: 2.2rem; }.profile-panel-heading h2 { margin: 0; color: var(--ed-ink); font-size: 1.15rem; }.profile-panel-heading span { color: var(--ed-muted); font-size: .78rem; }
.profile-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }.profile-details > div { padding: 16px 24px; border-bottom: 1px solid var(--ed-line); }.profile-details dt { color: var(--ed-muted); font-size: .72rem; font-weight: 700; }.profile-details dd { margin: 4px 0 0; color: var(--ed-ink); font-weight: 600; overflow-wrap: anywhere; }
.report-filter { border: 1px solid var(--ed-line); box-shadow: none; }.report-actions { justify-content: flex-end; }
.pagination { gap: 4px; }.pagination .page-link { border: 0; border-radius: 7px; color: var(--ed-primary); }.pagination .page-item.active .page-link { background: var(--ed-primary); }
.dialog { width: min(100% - 2rem, 36rem); max-height: min(90vh, 52rem); padding: 0; overflow: auto; border: 1px solid var(--ed-line); border-radius: var(--ed-radius); background: var(--ed-panel); color: var(--ed-ink); box-shadow: 0 20px 60px rgba(7,29,67,.2); }
.dialog::backdrop { background: rgba(7,29,67,.55); }
.dialog-shell { padding: 0; }
.dialog-header, .dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.dialog-header { border-bottom: 1px solid var(--ed-line); }.dialog-footer { justify-content: flex-end; border-top: 1px solid var(--ed-line); }
.dialog-title { margin: 0; color: var(--ed-ink); font-size: 1.1rem; }.dialog-body { padding: 20px; color: var(--ed-ink); }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--ed-surface); }
.auth-shell { width: min(100%, 440px); }
.auth-card { width: 100%; padding: 42px 40px; border: 1px solid var(--ed-line); border-radius: 16px; background: var(--ed-panel); box-shadow: var(--ed-shadow); }
.auth-card > .eyebrow, .auth-card > h1, .auth-card > p.fg-secondary { text-align: center; }
.auth-card .form-label { display: block; margin-bottom: 7px; text-align: left; color: var(--ed-primary); font-size: .82rem; font-weight: 650; }
.auth-card .form-control[readonly] { background-color: var(--ed-table-head); }
.login-input-group { position: relative; }
.login-input-group .input-group-text { position: absolute; inset: 0 auto 0 0; z-index: 6; display: flex; min-width: 46px; align-items: center; justify-content: center; padding-inline: 14px; border: 0; background: transparent; color: var(--ed-muted); pointer-events: none; visibility: visible; opacity: 1; }
.login-input-group .input-group-text svg { display: block; width: 17px; height: 17px; }
.login-input-group > .form-control { min-height: 46px; padding-left: 46px; border-radius: 7px !important; }
.login-input-group > .form-control:disabled { background: #f2f5f9; cursor: not-allowed; }
.auth-help { display: block; margin: 7px 0 0 2px; color: var(--ed-muted); font-size: .76rem; }
.auth-alert-icon { width: 17px; height: 17px; margin-right: 5px; vertical-align: -3px; }
.auth-card > .eyebrow { margin: 0 0 9px; color: var(--ed-brand-accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.auth-card h1 { margin: 0; color: var(--ed-primary); font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; }
.auth-card > p.fg-secondary { margin: 9px 0 24px; color: var(--ed-muted) !important; }
.auth-logo { display: block; width: 210px; max-width: 100%; height: 66px; object-fit: contain; margin: 0 auto 30px; padding: 3px 7px; border: 1px solid var(--ed-line); border-radius: 7px; background: #fff; }
.auth-submit { min-height: 46px; margin-top: 1px; border-radius: 7px; background: var(--ed-brand-primary) !important; border-color: var(--ed-brand-primary) !important; color: #fff !important; font-size: .88rem; }
.auth-submit:hover, .auth-submit:focus-visible { background: var(--ed-brand-primary-strong) !important; border-color: var(--ed-brand-primary-strong) !important; }
.auth-submit > span { margin-left: 4px; }
.auth-footer { margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--ed-line); color: var(--ed-brand-primary); font-size: .76rem; text-align: center; }
.auth-footer span { color: var(--ed-brand-primary); font-weight: 650; }
.auth-site-link { display: block; margin-top: 20px; color: var(--ed-primary); font-size: .8rem; text-align: center; }

/* Focused sign-in layout */
.auth-page { min-height: 100vh; padding: 32px 16px; background: #f3f6fa; }
.auth-shell { width: min(100%, 440px); }
.auth-card { padding: 42px 40px 36px; border-color: #d6e0eb; border-radius: 16px; background: #fff; box-shadow: 0 22px 55px rgba(20, 48, 83, .08); }
.auth-logo { width: 210px; height: 66px; margin-bottom: 30px; padding: 3px 7px; border: 1px solid #d6e0eb; border-radius: 7px; background: #fff; }
.auth-card .form-label { margin: 0 0 7px; color: #163458; font-size: .82rem; font-weight: 650; }
.login-input-group .input-group-text { color: #526d8c; }
.login-input-group > .form-control { min-height: 46px; border-color: #cbd8e7; border-radius: 7px !important; color: #15345c; }
.login-input-group > .form-control:focus { border-color: #2696ff; box-shadow: 0 0 0 3px rgba(38, 150, 255, .2); }
.login-input-group > .form-control:disabled { background: #f2f5f9; }
.login-input-group > .form-control[readonly] { background: #f7f9fc; }
.auth-help { color: #173d71; line-height: 1.5; }
.auth-submit { min-height: 46px; border-radius: 7px; background: #102f68 !important; border-color: #102f68 !important; }
.auth-submit:hover, .auth-submit:focus-visible { background: #0b2452 !important; border-color: #0b2452 !important; }
.auth-footer { margin-top: 20px; padding-top: 15px; border-top: 1px solid #d6e0eb; color: #526d8c; font-size: .76rem; text-align: center; }
.auth-card .text-center.mt-3 a { color: #145ca5; font-size: .82rem; font-weight: 600; text-decoration: none; }
.auth-card .text-center.mt-3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-card .alert { font-size: .82rem; }
:root[data-theme="dark"] .auth-page { background: #121b27; }
:root[data-theme="dark"] .auth-card { border-color: #344456; background: #1b2633; }
:root[data-theme="dark"] .auth-card .form-label { color: #d7e2f0; }
:root[data-theme="dark"] .login-input-group > .form-control { border-color: #3d5065; }
:root[data-theme="dark"] .login-input-group > .form-control:disabled,
:root[data-theme="dark"] .login-input-group > .form-control[readonly] { background: #202d3c; }
:root[data-theme="dark"] .auth-help { color: #a9c9ef; }
:root[data-theme="dark"] .auth-footer { border-color: #344456; }
@media (max-width: 480px) { .auth-page { padding: 20px 14px; } .auth-card { padding: 34px 24px 28px; } .auth-logo { margin-bottom: 26px; } }
.export-card { margin-inline: auto; }.export-note { color: var(--ed-muted); font-size: .82rem; }.export-note i { color: var(--ed-sky); margin-right: 4px; }

/* Keep responsive utility columns active at every viewport above their breakpoint. */
@media (min-width: 768px) {
  [class~="md:col-6"] { flex: 0 0 auto; width: 50%; }
  [class~="md:col-4"] { flex: 0 0 auto; width: 33.33333333%; }
  [class~="md:col-auto"] { flex: 0 0 auto; width: auto; }
}
@media (min-width: 992px) {
  [class~="lg:col-5"] { flex: 0 0 auto; width: 41.66666667%; }
  [class~="lg:col-4"] { flex: 0 0 auto; width: 33.33333333%; }
  [class~="lg:col-3"] { flex: 0 0 auto; width: 25%; }
  [class~="lg:col-2"] { flex: 0 0 auto; width: 16.66666667%; }
  [class~="lg:col-auto"] { flex: 0 0 auto; width: auto; }
}
@media (min-width: 992px) {
  [class~="lg:p-5"] { padding: 3rem !important; }
}
@media (min-width: 1200px) {
  [class~="xl:col-3"] { flex: 0 0 auto; width: 25%; }
  [class~="xl:col-4"] { flex: 0 0 auto; width: 33.33333333%; }
}

@media (max-width: 900px) {
  .sidebar { width: 264px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 8px 0 24px rgba(19,43,78,.15); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-scrim { display: none; }
  body.sidebar-open .sidebar-scrim { position: fixed; inset: 68px 0 0; z-index: 1020; display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(7,29,67,.38); cursor: default; }
  .app-content { margin-left: 0; padding: 96px 18px 26px; }
  .sidebar .closebtn { display: block; position: absolute; top: 12px; right: 12px; border: 0; background: transparent; color: var(--ed-muted); font-size: 1.5rem; }
}

/* Shared UI system: type, layout helpers, controls, and accessible states. */
:root {
  --ed-radius-sm: 8px;
  --ed-radius-lg: 18px;
  --ed-space-section: clamp(1rem, 2vw, 1.5rem);
  --ed-focus-ring: 0 0 0 3px rgba(119, 183, 230, .32);
}
:root[data-theme="dark"] { --ed-focus-ring: 0 0 0 3px rgba(142, 185, 255, .3); }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 10px 14px; transform: translateY(-160%); border-radius: 8px; background: var(--ed-brand-primary); color: #fff; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.skip-link:focus { transform: translateY(0); color: #fff; }
.content-container { padding-inline: clamp(0px, 1vw, 12px); }
.content-narrow { width: min(100%, 56rem); margin-inline: auto; }
.layout-stack { display: flex; flex-direction: column; gap: var(--stack-space, 1rem); }
.layout-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-space, .75rem); }
.surface-muted { border: 1px solid var(--ed-line); border-radius: var(--ed-radius); background: var(--ed-surface); }
.divider { height: 1px; border: 0; background: var(--ed-line); }
.field-hint, .form-text { display: block; margin-top: 6px; color: var(--ed-muted); font-size: .76rem; line-height: 1.45; }
.page-heading { align-items: center; margin-bottom: var(--ed-space-section); }
.page-heading h1 { font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: 1.16; }
.page-heading .eyebrow { margin-bottom: 7px; }
.section-heading { padding: 18px 22px 15px; }
.section-heading h2 { font-size: 1rem; letter-spacing: -.012em; }
.eyebrow { line-height: 1.3; }
.btn, .btn-solid, .btn-outline, .btn-subtle, .btn-text, .btn-outline-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--ed-radius-sm);
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn-solid.theme-primary, .btn-solid.theme-primary:visited { background: var(--ed-action-primary); border-color: var(--ed-action-primary); color: #fff !important; }
.btn-solid.theme-primary:hover, .btn-solid.theme-primary:focus-visible, .btn-solid.theme-primary:active { background: var(--ed-action-primary-hover); border-color: var(--ed-action-primary-hover); color: #fff !important; }
.btn-solid.theme-success { background: var(--ed-action-success); border-color: var(--ed-action-success); color: #fff !important; }
.btn-solid.theme-danger { background: var(--ed-action-danger); border-color: var(--ed-action-danger); color: #fff !important; }
.btn-solid:not(:disabled):active, .btn-outline:not(:disabled):active, .btn-subtle:not(:disabled):active { transform: translateY(1px); }
.btn:disabled, .btn-solid:disabled, .btn-outline:disabled, .btn-subtle:disabled, button:disabled { opacity: .56; cursor: not-allowed; box-shadow: none; }
.btn-sm.btn-solid, .btn-sm.btn-outline, .btn-sm.btn-subtle, .btn-sm.btn-outline-secondary { min-height: 34px; padding: 6px 10px; font-size: .75rem; }
.btn-icon { display: inline-grid; width: 40px; min-width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--ed-line); border-radius: 10px; background: var(--ed-panel); color: var(--ed-primary); line-height: 1; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.btn-icon.btn-outline.theme-primary { border-color: #9bb2cb; background: transparent; color: var(--ed-primary); }
.btn-icon.btn-outline.theme-primary:hover, .btn-icon.btn-outline.theme-primary:focus-visible { border-color: var(--ed-primary); background: var(--ed-hover); color: var(--ed-primary); }
.btn-icon.btn-outline.theme-secondary { border-color: #9bb2cb; background: transparent; color: var(--ed-secondary); }
.btn-icon.btn-outline.theme-secondary:hover, .btn-icon.btn-outline.theme-secondary:focus-visible { border-color: var(--ed-primary); background: var(--ed-hover); color: var(--ed-primary); }
.btn-icon.btn-outline.theme-danger { border-color: var(--ed-danger); background: transparent; color: var(--ed-danger); }
.btn-icon.btn-outline.theme-danger:hover, .btn-icon.btn-outline.theme-danger:focus-visible { border-color: var(--ed-danger); background: var(--ed-danger-soft); color: var(--ed-danger); }
.btn-icon.btn-outline.theme-success { border-color: var(--ed-success); background: transparent; color: var(--ed-success); }
.btn-icon.btn-outline.theme-success:hover, .btn-icon.btn-outline.theme-success:focus-visible { border-color: var(--ed-success); background: var(--ed-success-soft); color: var(--ed-success); }
.btn-icon:focus-visible { outline: 0; box-shadow: var(--ed-focus-ring); }
.btn-icon i { margin: 0 !important; }
.btn-solid:focus-visible, .btn-outline:focus-visible, .btn-subtle:focus-visible, .btn-text:focus-visible, .btn-outline-secondary:focus-visible { outline: 0; box-shadow: var(--ed-focus-ring); }
.btn-solid.theme-primary { box-shadow: 0 3px 8px rgba(8, 42, 99, .12); }
.form-label { margin-bottom: 7px; color: var(--ed-secondary); font-size: .79rem; font-weight: 650; }
.form-control, .form-select, select.form-control, textarea.form-control, .select2-container--default .select2-selection {
  min-height: 44px;
  border: 1px solid var(--ed-line);
  border-radius: 9px;
  background-color: var(--ed-field);
  color: var(--ed-ink);
  font-size: .86rem;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
textarea.form-control { min-height: 112px; padding-block: 11px; resize: vertical; }
.form-control::placeholder, textarea::placeholder { color: #8b98a9; opacity: 1; }
:root[data-theme="dark"] .form-control::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #8493a6; }
.form-control:focus, .form-select:focus, select.form-control:focus, textarea.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection { border-color: var(--ed-primary); box-shadow: var(--ed-focus-ring); outline: 0; }
.form-control:disabled, .form-select:disabled, select.form-control:disabled, textarea.form-control:disabled { background: var(--ed-surface); color: var(--ed-muted); opacity: .8; cursor: not-allowed; }
.form-control[readonly] { background: var(--ed-surface); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ed-danger); background-image: none; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(180,35,24,.14); }
.invalid-feedback, .errorlist { color: var(--ed-danger-ink); font-size: .76rem; }
.errorlist { margin: 6px 0 0; padding: 0; list-style: none; }
.form-check-input { width: 1.05em; height: 1.05em; margin-top: .2em; accent-color: var(--ed-action-primary); cursor: pointer; }
.form-check-input:focus { border-color: var(--ed-primary); box-shadow: var(--ed-focus-ring); }
.form-card.card { border-radius: var(--ed-radius-lg); box-shadow: 0 12px 32px rgba(8,42,99,.06); }
.card { border-radius: var(--ed-radius); box-shadow: 0 8px 24px rgba(8,42,99,.045); }
.card-header { padding: 16px 20px; border-color: var(--ed-line); background: var(--ed-table-head); color: var(--ed-ink); font-weight: 700; }
.card-footer { border-color: var(--ed-line); background: transparent; }
.table-responsive { border-radius: 12px; box-shadow: 0 5px 18px rgba(8,42,99,.035); }
.table-responsive > .table { min-width: 620px; }
.table thead th { padding-block: 12px; }
.table tbody tr { transition: background-color .14s ease; }
.table tbody tr:focus-within { outline: 2px solid var(--ed-sky); outline-offset: -2px; }
.table-actions { flex-wrap: nowrap; }
.transaction-table { width: 100%; min-width: 0 !important; table-layout: fixed; }
.transaction-table th, .transaction-table td { overflow-wrap: anywhere; }
.transaction-table th:nth-child(1), .transaction-table td:nth-child(1),
.transaction-table th:nth-child(5), .transaction-table td:nth-child(5),
.transaction-table th:nth-child(6), .transaction-table td:nth-child(6),
.transaction-table th:nth-child(7), .transaction-table td:nth-child(7),
.transaction-table th:last-child, .transaction-table td:last-child { white-space: nowrap; }
.transaction-table-admin td:nth-child(8) { white-space: nowrap; }
.transaction-table-admin th:nth-child(1) { width: 10%; }
.transaction-table-admin th:nth-child(2) { width: 16%; }
.transaction-table-admin th:nth-child(3) { width: 11%; }
.transaction-table-admin th:nth-child(4) { width: 14%; }
.transaction-table-admin th:nth-child(5) { width: 8%; }
.transaction-table-admin th:nth-child(6) { width: 7%; }
.transaction-table-admin th:nth-child(7) { width: 10%; }
.transaction-table-admin th:nth-child(8) { width: 12%; }
.transaction-table-admin th:nth-child(9) { width: 12%; }
.transaction-table .transaction-actions-cell > .table-actions, .transaction-table .transaction-approval-cell > .table-actions { flex-wrap: nowrap; }
.transaction-table .transaction-row-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; white-space: nowrap; }
.transaction-table-admin td:nth-child(2), .transaction-table-admin td:nth-child(3), .transaction-table-admin td:nth-child(4) { white-space: normal; overflow-wrap: anywhere; }
.transaction-table .transaction-status-link { text-decoration: none; transition: filter .15s ease, box-shadow .15s ease; }
.transaction-table .transaction-status-link:hover { filter: brightness(.95); box-shadow: 0 0 0 2px rgba(82, 125, 175, .18); }
.transaction-detail-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--ed-ink); font-weight: 600; text-decoration: none; }
.transaction-detail-link > span { color: var(--ed-primary); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.transaction-detail-link:hover { color: var(--ed-primary); text-decoration: underline; text-decoration-color: var(--ed-sky); text-underline-offset: 3px; }
.transaction-detail-page-heading { margin-bottom: 20px; }
.transaction-detail-hero { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; margin-bottom: 18px; padding: 20px 22px; border: 1px solid var(--ed-line); border-radius: var(--ed-radius-lg); background: linear-gradient(120deg, var(--ed-panel), var(--ed-surface)); box-shadow: var(--ed-shadow); }
.transaction-detail-hero > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 7px; }
.transaction-detail-hero > div + div { padding-left: 20px; border-left: 1px solid var(--ed-line); }
.transaction-detail-hero strong { color: var(--ed-ink); font-size: clamp(1.25rem, 2.2vw, 1.8rem); font-variant-numeric: tabular-nums; }
.transaction-detail-label { color: var(--ed-muted); font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.transaction-detail-value { color: var(--ed-ink); font-size: .9rem; font-weight: 650; }
.transaction-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.transaction-detail-card { overflow: hidden; }
.transaction-detail-card .card-header { display: flex; align-items: center; gap: 10px; }
.transaction-detail-card .card-header i { color: var(--ed-primary); }
.transaction-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0; padding: 8px 20px 14px; }
.transaction-detail-list > div { min-width: 0; padding: 13px 0; border-bottom: 1px solid var(--ed-line); }
.transaction-detail-list dt { margin-bottom: 5px; color: var(--ed-muted); font-size: .68rem; font-weight: 700; }
.transaction-detail-list dd { margin: 0; color: var(--ed-ink); font-size: .84rem; font-weight: 600; overflow-wrap: anywhere; }
.transaction-detail-list .detail-secondary { color: var(--ed-muted); font-size: .74rem; font-weight: 500; }
:root[data-theme="dark"] .transaction-detail-hero { background: linear-gradient(120deg, var(--ed-panel), var(--ed-surface)); }
@media (max-width: 760px) { .transaction-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .transaction-detail-hero { grid-template-columns: 1fr 1fr; gap: 15px; padding: 17px; } .transaction-detail-hero > div + div { padding-left: 0; border-left: 0; } .transaction-detail-hero > div:nth-child(2) { padding-left: 14px; border-left: 1px solid var(--ed-line); } .transaction-detail-hero > div:nth-child(3) { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--ed-line); } .transaction-detail-list { grid-template-columns: 1fr; } }
.voucher-detail-heading { align-items: center; }
.voucher-detail-heading > div:last-child { justify-content: flex-end; }
.voucher-detail-hero { margin-bottom: 16px; }
.voucher-workflow-card { margin-bottom: 16px; padding: 20px; }
.voucher-workflow-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.voucher-workflow-heading .eyebrow { margin-bottom: 4px; }
.voucher-workflow-heading h2 { margin: 0; font-size: 1.05rem; }
.voucher-progress-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.voucher-progress-step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-content: start; column-gap: 12px; min-width: 0; padding: 0 18px 0 0; }
.voucher-progress-step::after { position: absolute; top: 16px; right: -1px; left: 34px; z-index: 0; height: 2px; background: var(--ed-line); content: ""; }
.voucher-progress-step:last-child::after { display: none; }
.voucher-progress-step.is-achieved::after { background: var(--ed-success); }
.voucher-progress-marker { position: relative; z-index: 1; display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid var(--ed-line); border-radius: 50%; background: var(--ed-panel); color: var(--ed-muted); font-size: .76rem; font-weight: 800; }
.voucher-progress-step.is-achieved .voucher-progress-marker { border-color: var(--ed-success); background: var(--ed-success); color: #fff; }
.voucher-progress-step.is-current .voucher-progress-marker { border-color: var(--ed-primary); background: var(--ed-primary); color: #fff; box-shadow: 0 0 0 4px var(--ed-hover); }
.voucher-progress-step.is-cancelled .voucher-progress-marker { border-color: var(--ed-danger); color: var(--ed-danger); }
.voucher-progress-copy { min-width: 0; padding-top: 1px; }
.voucher-progress-state { display: block; margin: 0 0 5px; color: var(--ed-muted); font-size: .64rem; font-weight: 800; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.voucher-progress-step.is-achieved .voucher-progress-state { color: var(--ed-success-ink); }
.voucher-progress-step.is-current .voucher-progress-state { color: var(--ed-primary); }
.voucher-progress-step.is-cancelled .voucher-progress-state { color: var(--ed-danger); }
.voucher-progress-copy h3 { margin: 0 0 6px; color: var(--ed-ink); font-size: .86rem; font-weight: 700; }
.voucher-progress-copy p { margin: 0; color: var(--ed-muted); font-size: .75rem; line-height: 1.45; }
.voucher-information-grid { margin-bottom: 16px; }
.voucher-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); align-items: start; gap: 16px; margin: 16px 0; }
.voucher-action-card { width: 100%; max-width: 920px; margin: 0 auto; overflow: hidden; }
.voucher-action-grid.has-multiple .voucher-action-card { max-width: none; margin: 0; }
.voucher-action-card .card-header { display: flex; align-items: center; gap: 10px; }
.voucher-action-card .card-header i { color: var(--ed-primary); }
.voucher-action-card .card-body { padding: 20px; }
.voucher-action-card .card-body > p:first-child { margin-bottom: 16px; font-size: .8rem; }
.voucher-action-card .form-label { margin-bottom: 7px; }
.voucher-action-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.voucher-submit-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ed-line); }
.voucher-cancel-card { border-top: 3px solid var(--ed-danger); }
.voucher-cancel-card .card-header i { color: var(--ed-danger); }
.voucher-custodian-card { border-top: 3px solid var(--ed-accent); }
.voucher-custodian-card .form-text { margin: 10px 0 0; }
.voucher-history-card { margin-top: 16px; overflow: hidden; }
.voucher-history-card .card-header { display: flex; align-items: center; gap: 10px; }
.voucher-history-card .card-header i { color: var(--ed-primary); }
.voucher-history-card .table { table-layout: fixed; }
.voucher-history-card .table th:nth-child(1) { width: 17%; }
.voucher-history-card .table th:nth-child(2) { width: 21%; }
.voucher-history-card .table th:nth-child(3) { width: 22%; }
.voucher-history-card .table th:nth-child(4) { width: 40%; }
.voucher-history-card .table td { overflow-wrap: anywhere; }
@media (max-width: 900px) { .voucher-progress-steps { grid-template-columns: 1fr; gap: 14px; } .voucher-progress-step { padding: 0; } .voucher-progress-step::after { top: 34px; right: auto; bottom: -14px; left: 16px; width: 2px; height: auto; } }
@media (max-width: 600px) { .voucher-workflow-card { padding: 16px; } .voucher-action-grid { grid-template-columns: 1fr; } .voucher-action-card .card-body { padding: 17px; } .voucher-action-buttons { justify-content: stretch; } .voucher-action-buttons > button { flex: 1 1 100%; } .voucher-detail-heading { align-items: flex-start; flex-direction: column; } .voucher-history-card .table-responsive { overflow: visible; } .voucher-history-card .table, .voucher-history-card .table tbody, .voucher-history-card .table tr, .voucher-history-card .table td { display: block; width: 100%; } .voucher-history-card .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .voucher-history-card .table tr { padding: 10px 14px; border-bottom: 1px solid var(--ed-line); } .voucher-history-card .table td { display: grid; grid-template-columns: minmax(74px, 27%) minmax(0, 1fr); gap: 10px; padding: 7px 0; border: 0; font-size: .8rem; } .voucher-history-card .table td::before { color: var(--ed-muted); font-size: .68rem; font-weight: 700; content: attr(data-label); } .voucher-history-card .table td[colspan] { display: block; } }
.pagination { flex-wrap: wrap; row-gap: 6px; }
.pagination .page-link { min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; background: var(--ed-panel); color: var(--ed-primary); box-shadow: 0 1px 4px rgba(8,42,99,.05); }
.pagination .page-item.active .page-link { background: var(--ed-action-primary); color: #fff; }
.page-item.disabled .page-link { color: var(--ed-muted); opacity: .65; }
.alert { padding: 13px 16px; border-color: var(--ed-line); background: var(--ed-panel); color: var(--ed-ink); }
.alert .btn-close { flex: 0 0 auto; margin-left: auto; }
.alert.theme-success, .alert-success { border-color: var(--ed-success); background: var(--ed-success-soft); color: var(--ed-success-ink); }
.alert.theme-warning, .alert-warning { border-color: var(--ed-warning); background: var(--ed-warning-soft); color: var(--ed-warning-ink); }
.alert.theme-danger, .alert-danger, .alert-error { border-color: var(--ed-danger); background: var(--ed-danger-soft); color: var(--ed-danger-ink); }
.alert.theme-info, .alert-info { border-color: var(--ed-sky); background: var(--ed-info-soft); color: var(--ed-info-ink); }
.badge, .status-badge { line-height: 1.25; }
.dialog { box-shadow: 0 24px 72px rgba(7,29,67,.25); }
.dialog-header, .dialog-footer { padding: 17px 21px; }
.dialog-body { line-height: 1.6; }
.empty-state { min-height: 200px; justify-content: center; }
.report-filter, .filter-toolbar { padding: 16px; border-radius: var(--ed-radius); background: var(--ed-panel); }
.form-actions, .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.form-actions .btn-solid, .form-actions .btn-outline, .page-actions .btn-solid, .page-actions .btn-outline { min-width: 112px; }
.topbar-menu, .topbar-icon, .topbar-exit { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; }
.topbar-menu:focus-visible, .topbar-icon:focus-visible, .topbar-exit:focus-visible, .sidebar .menu_item:focus-visible { outline: 0; box-shadow: var(--ed-focus-ring); }
.sidebar .menu_item { transition: color .15s ease, background-color .15s ease, padding-left .15s ease; }
.sidebar a.menu_item:hover { padding-left: 15px; }
.sidebar .major-nav[aria-expanded="true"] .float-end { transform: rotate(180deg); }
.sidebar-scrim { display: none; }
@media (max-width: 900px) { .app-content { padding-inline: 16px; } }
@media (max-width: 600px) {
  .app-content { padding-inline: 12px; padding-bottom: 20px; }
  .content-container { padding-inline: 0; }
  .page-heading { align-items: stretch; }
  .page-heading > :last-child { width: 100%; }
  .page-heading .btn-solid, .page-heading .btn-outline, .page-heading .btn-outline-secondary { width: 100%; }
  .report-month-form, .report-month-form .form-control { width: 100%; }
  .form-card .card-body { padding: 20px !important; }
  .form-actions, .page-actions { align-items: stretch; }
  .form-actions > *, .page-actions > * { flex: 1 1 auto; }
  .table-responsive { border-radius: 10px; }
}
@media (min-width: 901px) {
  body:not(.sidebar-open) .sidebar { transform: translateX(-100%); }
  body:not(.sidebar-open) .app-content { margin-left: 0; }
}
@media (max-width: 600px) {
  .topbar-inner { padding: 0 14px; }.topbar-actions { gap: 3px; }.topbar-account { width: 38px; justify-content: center; padding: 0; }.topbar-account span { display: none; }.topbar-icon, .topbar-exit { width: 36px; }.brand-copy { font-size: .9rem; }
  .page-heading { flex-direction: column; gap: 12px; margin-bottom: 20px; }.page-heading .btn-solid, .page-heading .btn-outline { width: 100%; }
  .overview-hero { min-height: 154px; padding: 25px 22px; }.overview-hero h2 { font-size: 1.85rem; }.hero-mark { margin-right: 0; font-size: 2.8rem; }.hero-side { gap: 10px; }.hero-pending { font-size: .68rem; }.hero-meta { gap: 8px; }.hero-meta span + span { padding-left: 8px; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; padding: 17px; }.section-heading .btn-solid, .section-heading .btn-outline { margin-left: auto; }
  .form-card .card-body { padding: 22px !important; }.table-responsive > .table { min-width: 600px; }
  .status-summary-grid { grid-template-columns: repeat(2, 1fr); }.status-summary-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--ed-line); }.status-summary-item:nth-child(4) { border-top: 1px solid var(--ed-line); }
  .profile-details { grid-template-columns: 1fr; }.profile-details > div { padding: 13px 18px; }
  .auth-card { padding: 34px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Theme guardrails for Bootstrap and plugin styles used by every page. */
:root[data-theme="dark"] {
  --bs-body-color: var(--ed-ink);
  --bs-body-bg: var(--ed-surface);
  --bs-secondary-color: var(--ed-muted);
  --bs-tertiary-color: var(--ed-secondary);
  --bs-border-color: var(--ed-line);
  --bs-tertiary-bg: var(--ed-panel);
  --bs-secondary-bg: var(--ed-surface);
  --bs-emphasis-color: var(--ed-ink);
}
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .form-text { color: var(--ed-muted) !important; }
:root[data-theme="dark"] .text-body { color: var(--ed-ink) !important; }
:root[data-theme="dark"] :is(.card, .dialog, .modal, .dropdown-menu, .list-group) .text-dark:not(.badge) { color: var(--ed-ink) !important; }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] select.form-control,
:root[data-theme="dark"] textarea.form-control,
:root[data-theme="dark"] .input-group-text {
  background-color: var(--ed-field);
  border-color: var(--ed-line);
  color: var(--ed-ink);
}
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly],
:root[data-theme="dark"] .form-select:disabled {
  background-color: var(--ed-secondary-bg);
  color: var(--ed-secondary);
  opacity: 1;
}
:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--ed-muted); opacity: 1; }
:root[data-theme="dark"] option { background-color: var(--ed-panel); color: var(--ed-ink); }
:root[data-theme="dark"] .select2-container--default .select2-selection,
:root[data-theme="dark"] .select2-container--default .select2-selection__rendered,
:root[data-theme="dark"] .select2-container--default .select2-selection__placeholder,
:root[data-theme="dark"] .select2-container--default .select2-selection__clear,
:root[data-theme="dark"] .select2-container--default .select2-results__option,
:root[data-theme="dark"] .select2-container--default .select2-search__field {
  color: var(--ed-ink) !important;
}
:root[data-theme="dark"] .select2-container--default .select2-selection,
:root[data-theme="dark"] .select2-container--default .select2-dropdown,
:root[data-theme="dark"] .select2-container--default .select2-search__field {
  background-color: var(--ed-field) !important;
  border-color: var(--ed-line) !important;
}
:root[data-theme="dark"] .select2-container--default .select2-selection__placeholder { color: var(--ed-muted) !important; }
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted,
:root[data-theme="dark"] .select2-container--default .select2-results__option--selected {
  background-color: #355a86 !important;
  color: #fff !important;
}
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .accordion-item {
  background-color: var(--ed-panel);
  border-color: var(--ed-line);
  color: var(--ed-ink);
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .accordion-button {
  background-color: var(--ed-surface);
  border-color: var(--ed-line);
  color: var(--ed-ink);
}
:root[data-theme="dark"] .dropdown-item { color: var(--ed-ink); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus { background-color: var(--ed-hover); color: var(--ed-ink); }
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .text-bg-light { background-color: var(--ed-panel) !important; color: var(--ed-ink) !important; }
:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] .table-secondary { --bs-table-color: var(--ed-ink); --bs-table-bg: var(--ed-table-head); border-color: var(--ed-line); }
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table > :not(caption) > * > * { --bs-table-color: var(--ed-ink); --bs-table-bg: var(--ed-panel); --bs-table-border-color: var(--ed-line); }
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] .table tfoot th { --bs-table-bg: var(--ed-table-head); color: var(--ed-secondary); }
:root[data-theme="dark"] .table tbody tr:hover > * { --bs-table-accent-bg: var(--ed-table-hover); color: var(--ed-ink); }
:root[data-theme="dark"] .btn-outline:hover,
:root[data-theme="dark"] .btn-outline:focus { color: var(--ed-ink); }
:root[data-theme="dark"] .btn-outline.theme-primary:hover,
:root[data-theme="dark"] .btn-outline.theme-primary:focus { color: #101923; }

/* Keep legacy hard-coded styles aligned with the selected light theme too. */
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-select { color: var(--ed-ink); background-color: var(--ed-field); }
:root[data-theme="light"] .select2-container--default .select2-selection__rendered,
:root[data-theme="light"] .select2-container--default .select2-results__option { color: var(--ed-ink); }
.dashboard-view-switch { display: flex; align-items: center; gap: 12px; }
.dashboard-view-label { color: var(--ed-muted); font-size: .78rem; font-weight: 650; }
.dashboard-view-options { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--ed-line); border-radius: 10px; background: var(--ed-panel); }
.dashboard-view-options button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 7px; padding: 8px 13px; background: transparent; color: var(--ed-muted); font-size: .8rem; font-weight: 700; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.dashboard-view-options button:hover { color: var(--ed-ink); background: var(--ed-hover); }
.dashboard-view-options button[aria-pressed="true"] { background: var(--ed-brand-primary); color: #fff; box-shadow: 0 2px 7px rgba(19,43,78,.22); }
.dashboard-view-options button:focus-visible { outline: 3px solid var(--ed-sky); outline-offset: 2px; }
.dashboard-chart-view[hidden] { display: none !important; }
.chart-card { min-height: 370px; height: 100%; }
.chart-canvas-wrap { height: 300px; padding: 20px; position: relative; }
.chart-empty { padding: 0 20px 18px; margin: 0; }
.chart-caption { margin: -4px 20px 16px; color: var(--ed-muted); font-size: .74rem; }
.status-summary-item { min-height: 88px; }
.status-summary-item > div { flex: 1; }
.status-summary-item strong { font-size: 1.45rem; }
.status-summary-item small { font-size: .75rem; }
.workflow-share { display: block; height: 5px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: var(--ed-line); }
.workflow-share > span { display: block; height: 100%; border-radius: inherit; }
.workflow-share-approved { background: var(--ed-success); }
.workflow-share-pending { background: var(--ed-warning); }
.workflow-share-rejected { background: var(--ed-danger); }
.status-summary-link:hover { text-decoration: none; }
.dashboard-view-options { gap: 3px; padding: 4px; border-radius: 999px; box-shadow: 0 3px 12px rgba(8, 42, 99, .06); }
.dashboard-view-options button { min-width: 104px; justify-content: center; border-radius: 999px; padding: 8px 16px; }
.dashboard-view-options button[aria-pressed="true"] { background: linear-gradient(135deg, #0b3477, #14528e); box-shadow: 0 3px 9px rgba(8, 42, 99, .22); }
.dashboard-chart-view { animation: chart-view-enter .28s ease both; }
.chart-view-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 2px 0 20px; }
.chart-view-tools { display: flex; align-items: center; gap: 10px; }
.chart-status-filter { display: flex; align-items: center; gap: 8px; margin: 0; }
.chart-status-filter label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ed-muted); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.chart-status-filter label i { color: var(--ed-primary); }
.chart-status-filter .form-select { width: auto; min-width: 150px; min-height: 38px; padding: 7px 30px 7px 10px; border-radius: 9px; font-size: .73rem; }
.chart-view-heading .eyebrow { margin-bottom: 5px; color: var(--ed-primary); font-size: .68rem; font-weight: 750; letter-spacing: .11em; }
.chart-view-heading h2 { margin: 0; color: var(--ed-ink); font-size: 1.45rem; letter-spacing: -.035em; }
.chart-view-heading p:not(.eyebrow) { margin: 5px 0 0; color: var(--ed-muted); font-size: .82rem; }
.chart-period-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ed-line); border-radius: 999px; background: var(--ed-panel); color: var(--ed-secondary); font-size: .75rem; font-weight: 650; box-shadow: 0 3px 12px rgba(8, 42, 99, .04); }
.chart-period-chip i { color: var(--ed-primary); }
.chart-export-menu { position: relative; }
.chart-export-menu > summary { list-style: none; cursor: pointer; }
.chart-export-menu > summary::-webkit-details-marker { display: none; }
.chart-export-menu > summary::marker { content: ""; }
.chart-export-popover { position: absolute; top: calc(100% + 9px); right: 0; z-index: 30; display: grid; width: 228px; gap: 3px; padding: 7px; border: 1px solid var(--ed-line); border-radius: 12px; background: var(--ed-panel); box-shadow: 0 16px 38px rgba(7,29,67,.18); }
.chart-export-popover button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 37px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ed-ink); font-size: .75rem; text-align: left; cursor: pointer; }
.chart-export-popover button i { width: 17px; color: var(--ed-primary); text-align: center; }
.chart-export-popover button:hover, .chart-export-popover button:focus-visible { background: var(--ed-hover); outline: 0; }
.chart-export-popover button:disabled { opacity: .48; cursor: not-allowed; }
.chart-card { position: relative; min-height: 370px; height: 100%; overflow: hidden; border: 1px solid var(--ed-line); border-radius: 15px; background: linear-gradient(145deg, var(--ed-panel), var(--ed-surface)); box-shadow: 0 8px 24px rgba(8, 42, 99, .055); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.chart-card::before { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #1d5c91, #a6ce39); content: ""; opacity: .8; }
.chart-card:hover { transform: translateY(-3px); border-color: var(--ed-sky); box-shadow: 0 14px 32px rgba(8, 42, 99, .11); }
.chart-card .section-heading { align-items: flex-start; gap: 12px; padding: 22px 22px 0; border: 0; }
.chart-card .section-heading > div { min-width: 0; }
.chart-card .section-heading .eyebrow { margin-bottom: 5px; color: var(--ed-primary); font-size: .64rem; font-weight: 750; letter-spacing: .1em; }
.chart-card .section-heading h2 { color: var(--ed-ink); font-size: 1.02rem; letter-spacing: -.015em; }
.chart-card-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.chart-expand-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--ed-line); border-radius: 8px; background: var(--ed-panel); color: var(--ed-secondary); font-size: .7rem; font-weight: 700; cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.chart-expand-button:hover, .chart-expand-button:focus-visible { border-color: var(--ed-sky); background: var(--ed-hover); color: var(--ed-primary); outline: 0; }
.chart-expand-button:focus-visible { box-shadow: var(--ed-focus-ring); }
.chart-expand-button:disabled { opacity: .5; cursor: not-allowed; }
.chart-card[hidden] { display: none !important; }
.chart-card.is-expanded { grid-column: 1 / -1; min-height: min(78vh, 820px); height: auto; }
.chart-card.is-expanded .chart-canvas-wrap { height: clamp(420px, 62vh, 680px); padding: 22px 30px 28px; }
.dashboard-chart-view.has-expanded-chart > .row { display: block; }
.dashboard-chart-view.has-expanded-chart .chart-card:not(.is-expanded) { display: none; }
.dashboard-chart-view .is-chart-column-expanded { width: 100%; max-width: 100%; }
.dashboard-chart-view .is-chart-column-expanded[hidden] { display: none !important; }
.chart-card.is-expanded.has-account-detail { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.38fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; column-gap: 18px; min-height: min(78vh, 820px); }
.chart-card.is-expanded.has-account-detail > .section-heading { grid-column: 1 / -1; }
.chart-card.is-expanded.has-account-detail > .chart-canvas-wrap { grid-column: 1; grid-row: 2; align-self: start; height: min(62vh, 620px); min-height: 430px; padding: 14px 14px 20px 22px; }
.chart-card.is-expanded.has-account-detail > .spending-drilldown { grid-column: 2; grid-row: 2; align-self: stretch; min-width: 0; max-height: min(66vh, 660px); margin: 14px 22px 22px 0; display: flex; flex-direction: column; }
.chart-card.is-expanded.has-account-detail > .spending-drilldown[hidden] { display: none !important; }
.chart-card.is-expanded.has-account-detail .spending-drilldown-table-wrap { min-height: 0; max-height: none; flex: 1 1 auto; }
.chart-card.is-expanded.has-account-detail .spending-drilldown-table { min-width: 640px !important; }
.chart-card.is-expanded.has-account-detail .spending-drilldown-heading { flex: 0 0 auto; }
.chart-subtitle { margin: 5px 0 0; color: var(--ed-muted); font-size: .73rem; line-height: 1.45; }
.chart-heading-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(29, 92, 145, .13); border-radius: 11px; background: rgba(29, 92, 145, .09); color: #1d5c91; font-size: .9rem; }
.chart-heading-icon-lime { border-color: rgba(128, 189, 23, .18); background: rgba(128, 189, 23, .12); color: #649410; }
.chart-heading-icon-amber { border-color: rgba(231, 173, 53, .2); background: rgba(231, 173, 53, .13); color: #a56a00; }
.chart-canvas-wrap { height: 285px; padding: 14px 21px 17px; position: relative; }
.chart-empty { margin: -2px 22px 18px; padding: 10px 12px; border-radius: 8px; background: var(--ed-hover); color: var(--ed-muted); font-size: .75rem; }
.chart-card[data-chart-card="account-spending-chart"] #account-spending-chart { cursor: pointer; }
.spending-drilldown { margin: 0 21px 22px; padding: 17px; border: 1px solid var(--ed-line); border-radius: 12px; background: var(--ed-panel); animation: chart-view-enter .2s ease both; }
.spending-drilldown[hidden] { display: none !important; }
.spending-drilldown-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.spending-drilldown-heading .eyebrow { margin: 0 0 3px; color: var(--ed-primary); font-size: .62rem; font-weight: 750; letter-spacing: .1em; }
.spending-drilldown-heading h3 { margin: 0; color: var(--ed-ink); font-size: .98rem; font-weight: 750; }
.spending-drilldown-heading p:not(.eyebrow) { margin: 4px 0 0; color: var(--ed-muted); font-size: .74rem; }
.spending-drilldown-table-wrap { max-height: 390px; border: 1px solid var(--ed-line); background: var(--ed-panel); }
.spending-drilldown-table { min-width: 700px !important; margin: 0; font-size: .74rem; }
.spending-drilldown-table th { position: sticky; top: 0; z-index: 1; background: var(--ed-table-head); color: var(--ed-secondary); font-size: .66rem; letter-spacing: .035em; text-transform: uppercase; }
.spending-drilldown-table td, .spending-drilldown-table th { padding: 10px 12px; vertical-align: middle; }
.spending-drilldown-table td:nth-child(2) { min-width: 190px; white-space: normal; }
.spending-drilldown-table td:nth-child(3), .spending-drilldown-table td:nth-child(4) { min-width: 125px; }
.spending-drilldown-table .spending-amount { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.spending-status-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: var(--ed-warning-soft); color: var(--ed-warning-ink); font-size: .65rem; font-weight: 700; }
.spending-status-badge.is-approved { background: var(--ed-success-soft); color: var(--ed-success-ink); }
.spending-status-badge.is-rejected { background: var(--ed-danger-soft); color: var(--ed-danger-ink); }
.workflow-share { height: 4px; }
@keyframes chart-view-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dashboard-chart-view, .chart-card, .dashboard-view-options button { animation: none; transition: none; } }
@media (max-width: 850px) { .chart-card.is-expanded.has-account-detail { display: flex; flex-direction: column; } .chart-card.is-expanded.has-account-detail > .chart-canvas-wrap { height: min(58vh, 500px); min-height: 340px; padding: 12px 16px; } .chart-card.is-expanded.has-account-detail > .spending-drilldown { max-height: 58vh; margin: 0 16px 18px; } }
@media (max-width: 600px) { .dashboard-view-switch { align-items: flex-start; flex-direction: column; } .chart-view-heading { align-items: flex-start; flex-direction: column; margin-bottom: 14px; } .chart-view-tools { width: 100%; justify-content: space-between; flex-wrap: wrap; } .chart-status-filter { order: 3; width: 100%; } .chart-status-filter .form-select { flex: 1; } .chart-view-heading h2 { font-size: 1.25rem; } .chart-card { min-height: 330px; } .chart-card .section-heading { padding: 19px 17px 0; } .chart-canvas-wrap { height: 260px; padding: 12px 13px 15px; } .chart-expand-button span { display: none; } .chart-expand-button { width: 36px; justify-content: center; padding: 6px; } .chart-card.is-expanded { min-height: 75vh; } .chart-card.is-expanded .chart-canvas-wrap { height: 58vh; min-height: 360px; padding: 16px; } .chart-card.is-expanded.has-account-detail > .chart-canvas-wrap { height: 42vh; min-height: 290px; } .chart-card.is-expanded.has-account-detail > .spending-drilldown { max-height: none; min-height: 360px; } }
@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; color: #17253b !important; }
  .app-topbar, .sidebar, .sidebar-scrim, .dashboard-view-switch, .chart-export-menu { display: none !important; }
  .app-content { min-height: 0; margin: 0 !important; padding: 0 !important; }
  .content-container { width: 100% !important; max-width: none !important; padding: 0 !important; }
  [data-dashboard-panel="summary"] { display: none !important; }
  .dashboard-chart-view, .dashboard-chart-view[hidden] { display: block !important; animation: none !important; }
  .chart-view-heading { margin: 0 0 12px; }
  .chart-view-heading h2 { color: #082a63 !important; }
  .chart-view-heading p:not(.eyebrow) { color: #53657b !important; }
  .chart-card { min-height: 0 !important; height: auto !important; break-inside: avoid; border-color: #cdd6e0 !important; background: #fff !important; box-shadow: none !important; }
  .chart-card[hidden] { display: block !important; }
  .dashboard-chart-view.has-expanded-chart .chart-card:not(.is-expanded) { display: block !important; }
  .chart-expand-button { display: none; }
  .chart-card::before { display: none; }
  .chart-card .section-heading h2, .chart-card .section-heading .eyebrow { color: #082a63 !important; }
  .chart-subtitle, .chart-caption { color: #53657b !important; }
  .chart-canvas-wrap { height: 210px !important; }
}

/* Keep the transaction ledger readable without letting action links compete
   with the approval badge for the same narrow table cell. */
.transaction-table thead th { white-space: nowrap; word-break: normal; overflow-wrap: normal; line-height: 1.25; padding-inline: 8px; font-size: .64rem; }
.transaction-table tbody td { padding-inline: 10px; }
.transaction-table-admin th:nth-child(1) { width: 11%; }
.transaction-table-admin th:nth-child(2) { width: 18%; }
.transaction-table-admin th:nth-child(3) { width: 12%; }
.transaction-table-admin th:nth-child(4) { width: 18%; }
.transaction-table-admin th:nth-child(5) { width: 9%; }
.transaction-table-admin th:nth-child(6) { width: 8%; }
.transaction-table-admin th:nth-child(7) { width: 14%; }
.transaction-table-admin th:nth-child(8) { width: 10%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(1) { width: 11%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(2) { width: 18%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(3) { width: 12%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(4) { width: 20%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(5) { width: 9%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(6) { width: 8%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(7) { width: 12%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(8) { width: 10%; }
.transaction-table td:nth-child(1), .transaction-table td:nth-child(5),
.transaction-table td:nth-child(6), .transaction-table td:nth-child(7) { white-space: nowrap; }
.transaction-table th:last-child { white-space: nowrap; }
.transaction-table td:last-child { white-space: normal; }
.transaction-select-column { width: 40px; }
.transaction-action-dropdown { position: relative; display: flex; justify-content: center; }
.transaction-action-toggle { width: 40px; min-width: 40px; height: 40px; border-radius: 9px; list-style: none; cursor: pointer; }
.transaction-action-toggle::-webkit-details-marker { display: none; }
.transaction-action-menu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 1080; display: none; min-width: 232px; padding: 6px; border: 1px solid var(--ed-line); border-radius: 10px; background: var(--ed-panel); box-shadow: 0 12px 28px rgba(15, 35, 62, .18); }
.transaction-action-dropdown[open] .transaction-action-menu { display: block; }
.transaction-table-wrap { overflow: visible; }
.transaction-table-wrap .transaction-table { overflow: visible; }
.transaction-table-wrap .transaction-table tbody tr { position: relative; }
.transaction-table-wrap .transaction-table tbody td { overflow: visible; }
.transaction-action-menu .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ed-ink); font: inherit; font-size: .8rem; text-align: left; text-decoration: none; }
.transaction-action-menu .dropdown-item i { flex: 0 0 18px; width: 18px; color: var(--ed-primary); text-align: center; }
.transaction-action-menu .dropdown-item:hover, .transaction-action-menu .dropdown-item:focus { background: var(--ed-hover); color: var(--ed-primary); }
.transaction-action-menu form { margin: 0; }
.transaction-action-menu .dropdown-item.disabled { color: var(--ed-muted); opacity: .7; }
.transaction-action-menu .dropdown-divider { margin: 5px 4px; border-color: var(--ed-line); }
@media (max-width: 900px) {
  .transaction-table-wrap { overflow-x: auto; overflow-y: visible; }
  .transaction-table { min-width: 1080px !important; }
  .transaction-table-admin { min-width: 1280px !important; }
}

/* The voucher column added a ninth cell; allocate the full table width across all nine. */
.transaction-table:not(.transaction-table-admin) th:nth-child(1) { width: 10%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(2) { width: 16%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(3) { width: 9%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(4) { width: 17%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(5) { width: 9%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(6) { width: 8%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(7) { width: 12%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(8) { width: 11%; }
.transaction-table:not(.transaction-table-admin) th:nth-child(9) { width: 8%; }
.transaction-table-admin th:nth-child(1) { width: 9%; }
.transaction-table-admin th:nth-child(2) { width: 16%; }
.transaction-table-admin th:nth-child(3) { width: 9%; }
.transaction-table-admin th:nth-child(4) { width: 16%; }
.transaction-table-admin th:nth-child(5) { width: 9%; }
.transaction-table-admin th:nth-child(6) { width: 8%; }
.transaction-table-admin th:nth-child(7) { width: 12%; }
.transaction-table-admin th:nth-child(8) { width: 12%; }
.transaction-table-admin th:nth-child(9) { width: 9%; }
.transaction-table th:last-child, .transaction-table td:last-child { padding-inline: 4px; text-align: center; }
.transaction-document-badge { max-width: 100%; gap: 3px; padding: 5px 3px; font-size: .58rem; white-space: nowrap; }
.status-badge.theme-secondary { background: var(--ed-secondary-bg); color: var(--ed-secondary); }

/* Keep transaction entry centered and compact in the available viewport. */
main.app-content:has(.transaction-entry-page) { padding-top: 76px !important; padding-bottom: 16px !important; }
.transaction-entry-page { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 920px; min-height: calc(100vh - 160px); margin-inline: auto; }
.transaction-entry-page .page-heading { align-items: center; gap: 12px; margin-bottom: 12px; }
.transaction-entry-page .page-heading h1 { font-size: 1.5rem; }
.transaction-entry-page .page-heading .fg-secondary { margin-top: 4px; font-size: .82rem; }
.transaction-form-card .card-body { padding: 16px 22px !important; }
.transaction-entry-grid { row-gap: 2px; }
.transaction-entry-section { margin-bottom: 0; padding-bottom: 6px; font-size: .9rem; }
.transaction-entry-section.transaction-accounting-section { margin-top: 0; }
.transaction-entry-field { margin-bottom: 3px; }
.transaction-entry-field .form-label { margin-bottom: 3px; font-size: .76rem; }
.transaction-entry-field .form-control,
.transaction-entry-field .select2-container--default .select2-selection--single { min-height: 36px; font-size: .84rem; }
.transaction-entry-field .form-control { padding-top: 5px; padding-bottom: 5px; padding-left: 36px; }
.transaction-entry-field .select2-container--default .select2-selection--single { padding-top: 4px; padding-bottom: 4px; padding-left: 34px; }
.transaction-field-icon { top: 31px; left: 12px; font-size: .76rem; }
.transaction-entry-field .form-text { margin-top: 2px; font-size: .7rem; line-height: 1.25; }
.voucher-required-check { padding: 6px 10px 6px 2rem; margin-bottom: 0; }
.voucher-required-check .form-text { margin-top: 0; font-size: .7rem; line-height: 1.25; }
.transaction-entry-page .form-actions { gap: 8px; margin-top: 10px; }
.transaction-entry-page .form-actions .btn-solid,
.transaction-entry-page .form-actions .btn-outline { min-height: 36px; padding-block: 7px; }
@media (max-height: 800px) {
  main.app-content:has(.transaction-entry-page) { padding-top: 52px !important; padding-bottom: 10px !important; }
  .transaction-entry-page { min-height: calc(100vh - 130px); }
  .transaction-entry-page .page-heading { margin-bottom: 8px; }
  .transaction-form-card .card-body { padding-block: 12px !important; }
  .transaction-entry-grid { row-gap: 0; }
  .transaction-entry-section { padding-bottom: 4px; }
  .transaction-entry-field { margin-bottom: 1px; }
  .transaction-entry-field .form-control,
  .transaction-entry-field .select2-container--default .select2-selection--single { min-height: 34px; }
  .transaction-field-icon { top: 29px; }
  .transaction-entry-page .form-actions { margin-top: 6px; }
}
@media (max-width: 600px) {
  .transaction-entry-page { min-height: calc(100vh - 160px); }
  .transaction-entry-page .page-heading { flex-direction: row; align-items: center; }
  .transaction-entry-page .page-heading > :last-child,
  .transaction-entry-page .page-heading .btn-solid,
  .transaction-entry-page .page-heading .btn-outline { width: auto; flex: 0 0 auto; }
  .transaction-entry-page .page-heading .btn-solid,
  .transaction-entry-page .page-heading .btn-outline { min-height: 34px; padding: 6px 9px; font-size: .72rem; }
}