:root {
    color-scheme: dark;
    --black: #000; --surface: #0a0a0a; --surface-raised: #101010; --surface-input: #050505;
    --white: #fff; --muted: #b8c0cc; --blue: #1677ff; --blue-hover: #0b63db;
    --blue-soft: rgba(22,119,255,.14); --navy: #071a33; --navy-hover: #0d2a50; --border: #292929; --radius: 14px; --shadow: 0 24px 70px rgba(0,0,0,.7);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--black); color: var(--white); font: 15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(1.45rem,2vw,1.85rem); line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: 1.35rem; }
.muted, .field-help { color: var(--muted); }
.eyebrow { margin-bottom: 10px; color: var(--blue); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.site-header { width: 100%; min-height: 62px; padding: 8px clamp(18px,4vw,64px); display: flex; align-items: center; border-bottom: 1px solid var(--border); background: var(--black); }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; width: clamp(190px,20vw,250px); height: auto; }
.nav-bar { width: 100%; min-height: 46px; padding: 0 clamp(18px,4vw,64px); display: flex; align-items: center; background: var(--navy); border-bottom: 1px solid #123b6b; position: relative; z-index: 20; }
.main-nav { width: 100%; display: flex; align-items: center; gap: 8px; }
.main-nav > a, .link-button, .nav-dropdown-toggle { min-height: 46px; padding: 0 13px; display: inline-flex; align-items: center; border-radius: 0; color: #d5deea; transition: color .2s, background-color .2s, box-shadow .2s; white-space: nowrap; }
.main-nav > a:hover, .main-nav > a:focus-visible, .link-button:hover, .link-button:focus-visible, .nav-dropdown-toggle:hover, .nav-dropdown-toggle:focus-visible { color: var(--white); background: var(--navy-hover); }
.main-nav > a.active, .nav-dropdown-toggle.active { color: var(--white); background: rgba(22,119,255,.18); box-shadow: inset 0 -3px 0 var(--blue); }
.user-label { margin-left: auto; padding: 0 18px; border-left: 1px solid rgba(255,255,255,.18); color: var(--white); white-space: nowrap; }
.link-button { border: 0; background: none; font: inherit; cursor: pointer; }
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { border: 0; background: transparent; font: inherit; cursor: pointer; }
.nav-dropdown-toggle[aria-expanded="true"] { color: var(--white); background: var(--navy-hover); }
.nav-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; padding: 8px; display: none; background: var(--navy); border: 1px solid #1b4d82; border-radius: 10px; box-shadow: var(--shadow); }
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu { display: grid; }
.nav-dropdown-menu a { padding: 9px 10px; border-radius: 7px; color: var(--white); }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active { background: var(--blue-soft); color: var(--white); }
.app-shell { width: 100%; flex: 1 1 auto; padding: 16px clamp(18px,4vw,64px) 22px; }
.site-footer { padding: 11px clamp(18px,4vw,64px); color: var(--muted); border-top: 1px solid var(--border); }
.panel { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.page-heading { width: 100%; margin: 0 0 14px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.page-heading h1 { margin: 0 0 5px; }
.page-heading .eyebrow { margin-bottom: 3px; }
.page-heading .muted { margin-bottom: 0; }
.page-heading > .button { flex: 0 0 auto; margin-top: 0; }
.simple-panel { width: 100%; max-width: none; margin-top: 0; padding: clamp(22px,3vw,32px); }
.form-card { padding: clamp(20px,2.2vw,28px); display: grid; gap: 8px; }
.form-card h2 { margin: 8px 0 0; }
.form-card label { margin-top: 7px; color: var(--white); font-size: .9rem; font-weight: 650; }
.form-card input { width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-input); color: var(--white); font: inherit; outline: none; }
.form-card select, .table-filters select { min-height: 44px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-input); color: var(--white); font: inherit; outline: none; }
.form-card select:focus, .table-filters select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,119,255,.2); }
input[type="search"] { width: 100%; height: 44px; min-height: 44px; padding: 9px 38px 9px 42px; border: 1px solid #354052; border-radius: 10px; outline: none; background-color: var(--surface-input); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f9bab' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 13px center; background-size: 18px 18px; color: var(--white); font: inherit; font-size: .92rem; line-height: 1.2; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
input[type="search"]::placeholder { color: #8f9bab; opacity: 1; }
input[type="search"]:focus { border-color: var(--blue); background-color: #070b11; box-shadow: 0 0 0 3px rgba(22,119,255,.22); }
input[type="search"]::-webkit-search-cancel-button { margin-left: 8px; }
.filter-control { width: 100%; height: 44px; min-height: 44px; padding: 9px 13px; border: 1px solid #354052; border-radius: 10px; outline: none; background-color: var(--surface-input); color: var(--white); color-scheme: dark; font: inherit; font-size: .92rem; line-height: 1.2; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.filter-control:focus { border-color: var(--blue); background-color: #070b11; box-shadow: 0 0 0 3px rgba(22,119,255,.22); }
select.filter-control { padding-right: 38px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b8c0cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px; }
select.filter-control:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231677ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); }
select.filter-control option { background: var(--surface-raised); color: var(--white); }
input[type="date"].filter-control { padding-right: 10px; }
input[type="date"].filter-control::-webkit-calendar-picker-indicator { margin-left: 8px; padding: 4px; border-radius: 5px; opacity: .82; cursor: pointer; }
input[type="date"].filter-control:focus::-webkit-calendar-picker-indicator { background-color: rgba(22,119,255,.18); opacity: 1; }
.form-card input:not([type="search"]):focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,119,255,.25); }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 12px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--blue); color: var(--white); font: inherit; font-weight: 800; cursor: pointer; }
.button:hover { background: var(--blue-hover); }
.button:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.button:disabled { opacity: .65; cursor: wait; }
.message { padding: 12px 14px; border-radius: 8px; background: var(--blue-soft); border: 1px solid var(--blue); color: var(--white); }
.message.success { background: var(--blue-soft); border-color: var(--blue); color: var(--white); }
.field-help { margin: 0; font-size: .88rem; }
.required { margin-left: 5px; color: var(--blue); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.account-card { width: 100%; max-width: none; margin-top: 0; padding: clamp(20px,2.2vw,28px); }
.credential-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 28px; }
.field-group { min-width: 0; display: grid; align-content: start; gap: 8px; }
.field-group label { margin: 0; }
.section-label { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--border); }
.section-label h2 { margin-bottom: 4px; }
.form-note { margin: 16px 0 0; }
.form-actions { display: flex; justify-content: flex-end; }
.form-actions .button { width: min(100%,240px); }
.password-control { position: relative; }
.password-control input { padding-right: 50px; }
.password-toggle { position: absolute; top: 50%; right: 6px; width: 38px; height: 38px; padding: 8px; transform: translateY(-50%); display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.password-toggle:hover, .password-toggle[aria-pressed="true"] { color: var(--blue); background: var(--blue-soft); }
.password-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.password-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.searchable-select { position: relative; }
.searchable-select > input[type="search"] { width: 100%; }
.searchable-options { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; right: 0; max-height: 220px; overflow-y: auto; padding: 6px; background: var(--navy); border: 1px solid #1b4d82; border-radius: 9px; box-shadow: var(--shadow); }
.searchable-option { width: 100%; padding: 10px 11px; display: flex; justify-content: space-between; gap: 12px; border: 0; border-radius: 6px; background: transparent; color: var(--white); text-align: left; font: inherit; cursor: pointer; }
.searchable-option:hover, .searchable-option:focus, .searchable-option.active { background: var(--blue-soft); outline: none; }
.searchable-option small { color: var(--muted); }
.linked-status { margin-left: 6px; font-size: .75rem; color: var(--muted); }
.staff-count-layout { grid-template-columns: minmax(330px,430px) minmax(0,1fr); }
.staff-count-field-row { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(180px,1.3fr); gap: 12px; align-items: end; }
.latest-staff-count { min-height: 44px; padding: 10px 12px; display: flex; align-items: center; border: 1px solid #354052; border-radius: 9px; background: var(--surface-input); color: var(--muted); font-size: .86rem; }
.latest-staff-count.has-history { border-color: var(--blue); color: var(--white); background: var(--blue-soft); }
.date-picker-control { position: relative; width: 100%; overflow: visible; }
.date-picker-control > input[data-date-display] { padding-right: 50px; }
.date-picker-control > input[type="date"] { position: absolute; z-index: 1; top: 0; right: 0; width: 46px; height: 44px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.date-picker-button { position: absolute; top: 50%; right: 5px; width: 38px; height: 38px; padding: 8px; transform: translateY(-50%); display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.date-picker-button:hover { color: var(--blue); background: var(--blue-soft); }
.date-picker-button:focus-visible { color: var(--blue); outline: 2px solid var(--blue); outline-offset: 1px; }
.date-picker-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.date-picker-control:focus-within > input[data-date-display] { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,119,255,.25); }
.data-entry-placeholder { min-height: min(420px,calc(100vh - 230px)); display: grid; place-items: center; }
.data-entry-icon { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid #275b99; border-radius: 18px; background: var(--blue-soft); color: var(--blue); }
.data-entry-icon svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.data-entry-placeholder-card { width: min(100%,560px); padding: clamp(30px,5vw,52px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.data-entry-placeholder-card h2 { margin: 20px 0 8px; }
.data-entry-placeholder-card .button { margin-top: 14px; }
.receipt-form { width: 100%; padding: clamp(20px,2.5vw,30px); }
.receipt-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 22px; }
.receipt-grid .field-group { gap: 7px; }
.receipt-grid label { color: var(--white); font-size: .9rem; font-weight: 650; }
.receipt-grid input:not([type="hidden"]), .receipt-grid textarea { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; outline: none; background: var(--surface-input); color: var(--white); font: inherit; resize: vertical; }
.receipt-grid input:not([type="hidden"]):focus, .receipt-grid textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,119,255,.22); }
.receipt-grid input:disabled { opacity: .65; cursor: not-allowed; }
.receipt-grid .date-picker-control > input[type="date"] { position: absolute; z-index: 1; top: 0; right: 0; width: 46px; height: 44px; min-height: 44px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.receipt-remarks { grid-column: span 2; }
.receipt-attachment { grid-column: 1 / -1; }
.attachment-picker { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-input); }
.attachment-picker input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.attachment-picker:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,119,255,.22); }
.attachment-choose, .attachment-remove { min-height: 32px; height: 32px; margin: 0; padding: 5px 10px; font-size: .78rem; white-space: nowrap; }
.attachment-name { min-width: 0; flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.table-action { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 8px; border: 1px solid var(--blue); border-radius: 6px; color: var(--white); background: rgba(22,119,255,.16); font-size: .75rem; font-weight: 700; text-decoration: none; }
.table-action:hover, .table-action:focus-visible { background: var(--blue); outline: none; }
.receipt-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.receipt-actions .button { margin-top: 0; min-width: 180px; }
.exchange-save-note { margin: 16px 0 -10px; text-align: right; }
.entry-flash-message { margin-bottom: 10px; padding: 9px 12px; }
.entry-type-buttons { margin-bottom: 10px; display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.entry-type-button { min-width: 112px; min-height: 34px; padding: 5px 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #275b99; border-radius: 7px; background: var(--navy); color: var(--white); font-size: .78rem; font-weight: 800; letter-spacing: .04em; transition: background-color .2s,border-color .2s,transform .2s; }
.entry-type-button span { color: var(--blue); font-size: .95rem; line-height: 1; }
.entry-type-button:hover,.entry-type-button.active { border-color: var(--blue); background: var(--navy-hover); transform: translateY(-2px); }
.entry-type-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.entry-history-filters { display: grid; grid-template-columns: minmax(230px,1.5fr) repeat(4,minmax(135px,1fr)) auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.entry-history-filters label { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: .82rem; }
.entry-history-filters .button { height: 44px; margin-top: 0; white-space: nowrap; }
.entry-history-table { min-width: 2180px; }
.entry-history-table td { vertical-align: top; }
.entry-history-table .receipt-reference { color: var(--blue); font-weight: 750; white-space: nowrap; }
.entry-history-table .amount-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.entry-type-badge,.posting-badge { display: inline-flex; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: .75rem; font-weight: 750; }
.entry-type-badge.receipt,.posting-badge.credit { border-color: var(--blue); background: var(--blue-soft); }
.entry-type-badge.payment,.posting-badge.debit { border-color: #6b7d91; background: rgba(255,255,255,.04); }
.entry-type-badge.exchange { border-color: #4f8cff; background: rgba(79,140,255,.12); }
.new-entry-highlight td { animation: new-entry-flash 3.5s ease-out; }
@keyframes new-entry-flash { 0%,35% { background: rgba(22,119,255,.28); } 100% { background: transparent; } }
.bank-module-layout { grid-template-columns: minmax(330px,430px) minmax(0,1fr); }
.wide-table { min-width: 880px; }
.currency-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.currency-preview > div { min-width: 0; display: grid; gap: 7px; }
.currency-preview label { margin: 0; }
.symbol-display { min-height: 44px; padding: 8px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-input); }
.symbol-display span { color: var(--blue); font-size: 1.2rem; font-weight: 800; }
.symbol-display small { color: var(--muted); }
.auth-wrap { width: 100%; max-width: 460px; min-height: 0; margin: 0; display: block; }
.login-page { min-height: 100vh; overflow-x: hidden; }
.login-page .site-header { position: absolute; inset: 0 0 auto; background: transparent; border: 0; }
.login-page .app-shell { min-height: 100vh; padding: 84px 20px; display: grid; place-items: center; }
.login-page .form-card { width: 100%; padding: clamp(28px,6vw,44px); gap: 12px; background: var(--surface); box-shadow: var(--shadow); }
.login-page .login-heading { margin-bottom: 14px; text-align: center; }
.login-page .login-heading h1 { margin: 0 0 12px; font-size: clamp(2rem,9vw,2.75rem); }
.login-page .login-heading p { margin: 0; color: var(--muted); }
.login-page .button { margin-top: 18px; }
.login-page .site-footer { display: none; }
.center-card { max-width: 620px; margin: 10vh auto; padding: 50px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.toast { position: fixed; right: 24px; bottom: 24px; transform: translateY(30px); opacity: 0; pointer-events: none; padding: 13px 18px; border-radius: 9px; background: var(--surface-raised); border: 1px solid var(--blue); transition: .25s; }
.toast.visible { transform: none; opacity: 1; }
.compact-heading h1 { margin-bottom: 5px; }
.module-layout { width: 100%; margin-top: 0; display: grid; grid-template-columns: minmax(280px,360px) minmax(0,1fr); gap: 20px; align-items: start; }
.checkbox-field { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--surface-raised); cursor:pointer; }
.checkbox-field input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--blue); flex:0 0 auto; }
.checkbox-field span,.checkbox-field small { display:block; }
.checkbox-field small { margin-top:4px; color:var(--muted); line-height:1.4; font-weight:400; }
.module-form { position: static; }
.form-button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.form-button-row .button { flex: 1 1 150px; }
.button-secondary { background: transparent; border: 1px solid var(--border); color: var(--white); }
.button-secondary:hover { background: var(--blue-soft); border-color: var(--blue); }
.table-panel { min-width: 0; padding: 20px; }
.table-toolbar { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.table-toolbar h2 { margin-bottom: 4px; }
.table-filters { display: flex; gap: 10px; }
.table-filters input[type="search"] { width: min(300px,40vw); }
.table-scroll { width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
.table-state { padding: 32px 14px; text-align: center; color: var(--muted); }
.table-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.action-button { min-height: 34px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--white); font: inherit; font-size: .82rem; cursor: pointer; }
.action-button:hover { border-color: var(--blue); background: var(--blue-soft); }
.action-delete:hover { color: var(--white); border-color: var(--white); }
.status-badge { display: inline-flex; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; text-transform: capitalize; }
.status-badge.active { color: var(--white); border-color: var(--blue); background: var(--blue-soft); }
.status-badge.inactive { color: var(--muted); }
.pagination { margin-top: 18px; display: flex; gap: 7px; flex-wrap: wrap; }
.page-button { min-width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--white); cursor: pointer; }
.page-button.active, .page-button:hover { background: var(--blue); border-color: var(--blue); }
.permissions-card { margin-top: 0; padding: clamp(22px,3vw,32px); }
.permission-grid { display: grid; gap: 22px; }
.permission-module { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.permission-module h2 { color: var(--blue); text-transform: capitalize; }
.permission-options { display: grid; grid-template-columns: repeat(3,minmax(180px,1fr)); gap: 12px; }
.permission-option { padding: 12px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.permission-option input { width: 18px; height: 18px; accent-color: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
table { width: 100%; border-collapse: collapse; background: var(--surface-raised); color: var(--white); }
.activity-filters { display: grid; grid-template-columns: minmax(260px,1.6fr) repeat(5,minmax(130px,1fr)) auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.activity-filters label { display: grid; gap: 6px; color: var(--muted); font-size: .82rem; }
.activity-search-label { width: 100%; min-width: 0; }
.activity-filters > .button { height: 44px; margin-top: 0; white-space: nowrap; }
.activity-table { min-width: 1050px; }
.activity-table td { vertical-align: top; }
.activity-action { display: inline-block; color: var(--blue); font-weight: 700; }
.activity-changes { margin: 7px 0 0; padding-left: 18px; color: var(--muted); font-size: .84rem; }
.report-page { padding: clamp(18px,2.5vw,28px); }
.report-filters { display: grid; grid-template-columns: repeat(4,minmax(180px,1fr)); gap: 14px; align-items: end; }
.report-filters .field-group { min-width: 0; }
.report-filter-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; grid-column: 1 / -1; }
.report-filter-actions .button { min-height: 42px; margin: 0; }
.report-summary { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 12px; margin: 20px 0 14px; }
.report-summary > div { padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-raised); }
.report-summary span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.report-summary strong { color: var(--white); font-size: 1rem; }
.report-table { min-width: 1180px; }
.report-table th:nth-last-child(-n+3), .report-table td:nth-last-child(-n+3) { text-align: right; }
.amount-cell { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 650; }
.report-loading { color: var(--blue); }
.report-empty { color: var(--muted); }
.report-error { color: #ffb4b4; }
.report-page > .message { margin-bottom: 16px; }
.expense-summary-table { min-width:760px; }
.expense-summary-table th:nth-child(3),.expense-summary-table td:nth-child(3),.expense-summary-table th:nth-child(4),.expense-summary-table td:nth-child(4) { text-align:right; }
.expense-detail-row > td { padding:14px; background:var(--surface-raised); }
.expense-detail-table { min-width:1150px; }
.expense-detail-table th:nth-child(8),.expense-detail-table td:nth-child(8) { text-align:right; }
.transaction-report-table { min-width:1380px; }
.transaction-report-table th:nth-child(8),.transaction-report-table td:nth-child(8),.transaction-report-table th:nth-child(9),.transaction-report-table td:nth-child(9) { text-align:right; }
.transaction-report-table .voucher-start td { border-top:2px solid var(--blue); }
.transaction-report-table tbody tr:not(.voucher-start) td { background:rgba(10,88,202,.045); }
.transaction-summary { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.filter-change-notice { margin: 16px 0 0; color: var(--blue); font-size: .88rem; font-weight: 650; }
.ledger-currency-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.ledger-currency-heading { margin: 0 0 12px; color: var(--blue); font-size: 1.02rem; }
.activity-retry { margin-left: 12px; min-height: 34px; padding: 7px 14px; }
th, td { padding: 13px 15px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--blue); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) {
    .report-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .report-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .activity-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .site-header, .nav-bar { padding-left: 18px; padding-right: 18px; }
    .brand img { width: 205px; }
    .main-nav { gap: 4px; }
    .user-label { display: none; }
    .module-layout { grid-template-columns: 1fr; }
    .bank-module-layout { grid-template-columns: 1fr; }
    .staff-count-layout { grid-template-columns: 1fr; }
    .module-form { position: static; }
    .permission-options { grid-template-columns: repeat(2,minmax(150px,1fr)); }
}
@media (min-width: 761px) and (max-width: 1100px) {
    .activity-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .activity-search-label { grid-column: span 2; }
}
@media (max-width: 600px) {
    .report-filters, .report-summary { grid-template-columns: 1fr; }
    .report-filter-actions { align-items: stretch; flex-direction: column; }
    .report-filter-actions .button { width: 100%; justify-content: center; }
    .activity-filters { grid-template-columns: 1fr; }
    .activity-search-label { width: 100%; }
    .site-header { min-height: 56px; justify-content: center; padding-top: 8px; padding-bottom: 8px; }
    .nav-bar { padding: 0; }
    .main-nav { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 0 10px; scrollbar-width: none; }
    .main-nav::-webkit-scrollbar { display: none; }
    .main-nav > a, .link-button, .nav-dropdown-toggle { padding-left: 11px; padding-right: 11px; }
    .app-shell { padding: 16px 14px 22px; }
    .page-heading { margin-bottom: 14px; align-items: flex-start; flex-direction: column; gap: 10px; }
    .page-heading > .button { min-height: 40px; }
    .credential-grid { grid-template-columns: 1fr; gap: 16px; }
    .section-label { padding-top: 14px; }
    .form-actions .button { width: 100%; }
    .table-toolbar, .table-filters { align-items: stretch; flex-direction: column; }
    .table-filters input[type="search"] { width: 100%; }
    .permission-options { grid-template-columns: 1fr; }
    .currency-preview { grid-template-columns: 1fr; }
    .staff-count-field-row { grid-template-columns: 1fr; }
    .data-entry-placeholder { min-height: 0; padding: 20px 0; }
    .receipt-grid { grid-template-columns: 1fr; }
    .receipt-remarks { grid-column: auto; }
    .attachment-picker { align-items: stretch; flex-wrap: wrap; }
    .attachment-name { flex-basis: 100%; order: -1; }
    .receipt-actions { flex-direction: column; }
    .receipt-actions .button { width: 100%; }
    .exchange-save-note { margin-bottom: 0; text-align: left; }
    .entry-history-filters { grid-template-columns: 1fr; }
    .entry-type-button { flex: 1 1 105px; min-width: 0; }
}
@media (min-width: 601px) and (max-width: 1050px) { .receipt-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 601px) and (max-width: 1050px) { .entry-history-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px) {
    .form-card { padding: 22px; }
    .center-card { padding: 30px 20px; }
    .login-page .site-header { align-items: center; justify-content: center; flex-direction: row; padding: 16px; }
    .login-page .brand img { width: 220px; }
    .login-page .app-shell { padding: 84px 16px; align-items: center; }
    .login-page .form-card { padding: 26px 20px; }
}
@media (max-height: 650px) { .login-page .app-shell { place-items: start center; padding-top: 84px; padding-bottom: 28px; } }

.button-danger { background:#b42318; border-color:#d92d20; color:#fff; }
.button-danger:hover { background:#d92d20; border-color:#f04438; }
.reset-project-panel { display:grid; gap:20px; }
.reset-warning { margin:0; }
.reset-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.reset-preview-grid h2,.reset-project-panel [data-reset-result] h2 { margin:0 0 10px; font-size:1rem; color:var(--blue); }
.reset-preview-table { min-width:520px; }
.reset-preview-table th:last-child,.reset-preview-table td:last-child { text-align:right; }
.reset-preview-table code { color:var(--text); font-size:.82rem; }
.reset-confirm-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.reset-acknowledgement { margin-top:16px; max-width:900px; }
@media (max-width:760px) { .reset-preview-grid,.reset-confirm-grid { grid-template-columns:1fr; } }

.dashboard-page { min-width:0; display:grid; gap:16px; }
.dashboard-page > *,.dashboard-summary-tables > * { min-width:0; }
.dashboard-page .table-scroll { width:100%; max-width:100%; }
.dashboard-controls { padding:18px; }
.dashboard-overview-panel { padding:18px; }
.dashboard-period-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.dashboard-period-grid > .table-state { grid-column:1 / -1; }
.dashboard-period-card { min-width:0; min-height:126px; padding:15px; display:flex; align-items:flex-start; gap:12px; text-align:left; border:1px solid var(--border); border-radius:11px; background:linear-gradient(145deg,var(--surface-raised),rgba(16,52,96,.4)); color:var(--text); cursor:pointer; transition:border-color .18s,transform .18s,box-shadow .18s; }
.dashboard-period-card:hover,.dashboard-period-card:focus-visible { border-color:var(--blue); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,64,155,.18); outline:none; }
.dashboard-period-card.selected { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue),0 8px 22px rgba(0,64,155,.2); }
.dashboard-period-icon { width:35px; height:35px; flex:0 0 35px; display:grid; place-items:center; border:1px solid rgba(44,132,255,.45); border-radius:9px; background:var(--blue-soft); color:#78adff; font-size:1.05rem; }
.dashboard-period-copy { min-width:0; display:grid; gap:4px; }
.dashboard-period-copy > span:first-child { color:var(--muted); font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.dashboard-period-copy strong { font-size:1.65rem; line-height:1; }
.dashboard-period-copy small { color:var(--muted); font-size:.73rem; }
.dashboard-period-breakdown { display:flex; flex-wrap:wrap; gap:5px; margin-top:3px; }
.dashboard-period-breakdown b { padding:3px 6px; border-radius:999px; background:rgba(44,132,255,.1); color:#bcd5ff; font-size:.68rem; }
.dashboard-filters { display:grid; grid-template-columns:repeat(4,minmax(170px,1fr)) auto; gap:12px; align-items:end; }
.dashboard-filter-actions { display:flex; gap:8px; align-items:center; }
.dashboard-filter-actions .button { min-height:42px; }
.dashboard-quick-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.dashboard-quick-actions .entry-type-button { min-height:34px; padding:7px 13px; font-size:.82rem; }
.dashboard-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.dashboard-count-card { display:grid; gap:6px; min-height:118px; align-content:center; }
.dashboard-count-card > span,.dashboard-money-card > span { color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.dashboard-count-card strong { color:var(--text); font-size:1.8rem; line-height:1; }
.dashboard-count-card small { color:var(--muted); }
.dashboard-section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.dashboard-section-heading h2 { margin:0; font-size:1rem; }
.dashboard-section-heading p { margin:4px 0 0; font-size:.82rem; }
.dashboard-money-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.dashboard-money-card { min-width:0; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); }
.dashboard-money-card > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.dashboard-money-card > small { display:block; margin-top:9px; color:var(--muted); }
.dashboard-chart-legend { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:.76rem; }
.dashboard-chart-legend span::before { content:""; width:8px; height:8px; display:inline-block; margin-right:5px; border-radius:2px; background:#3388ff; }
.dashboard-chart-legend .payment::before { background:#fff; }
.dashboard-chart-legend .exchange::before { background:#6d8fb8; }
.dashboard-chart-scroll { max-width:100%; overflow-x:auto; padding:6px 2px 0; }
.dashboard-chart { min-width:max(100%,calc(var(--chart-days) * 29px)); height:218px; display:grid; grid-template-columns:repeat(var(--chart-days),minmax(24px,1fr)); gap:4px; align-items:end; border-bottom:1px solid var(--border); background:repeating-linear-gradient(to top,transparent 0,transparent 53px,rgba(255,255,255,.055) 54px); }
.dashboard-chart-day { height:100%; min-width:0; display:grid; grid-template-rows:1fr 25px; align-items:end; }
.dashboard-chart-bars { height:178px; display:flex; align-items:flex-end; justify-content:center; gap:2px; }
.dashboard-chart-bars i { width:22%; min-width:3px; max-width:9px; display:block; border-radius:3px 3px 0 0; background:#3388ff; }
.dashboard-chart-bars .payment { background:#fff; }
.dashboard-chart-bars .exchange { background:#6d8fb8; }
.dashboard-chart-day small { min-width:0; color:var(--muted); font-size:.65rem; white-space:nowrap; transform:translateX(-2px); }
.dashboard-amount-chip { display:inline-flex; padding:5px 8px; border:1px solid rgba(44,132,255,.35); border-radius:999px; background:var(--blue-soft); color:var(--text); font-size:.82rem; font-weight:700; white-space:nowrap; }
.dashboard-recent-table { min-width:1280px; }
.dashboard-ledger { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.posting-badge { padding:3px 6px; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.posting-badge.debit { background:rgba(44,132,255,.16); color:#78adff; }
.posting-badge.credit { background:rgba(255,255,255,.1); color:#fff; }
.dashboard-summary-tables { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.dashboard-summary-tables table { min-width:640px; }
.button-compact { min-height:34px; padding:7px 12px; font-size:.8rem; }
.text-link { color:var(--blue); font-size:.84rem; font-weight:700; text-decoration:none; }
.text-link:hover { text-decoration:underline; }
@media (max-width:1100px) { .dashboard-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-filter-actions { grid-column:span 2; }.dashboard-period-grid,.dashboard-summary-grid,.dashboard-money-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-summary-tables { grid-template-columns:1fr; } }
@media (max-width:600px) { .dashboard-filters,.dashboard-period-grid,.dashboard-summary-grid,.dashboard-money-grid { grid-template-columns:1fr; }.dashboard-filter-actions { grid-column:auto; }.dashboard-filter-actions .button { flex:1; }.dashboard-section-heading { align-items:flex-start; flex-direction:column; }.dashboard-count-card { min-height:98px; }.dashboard-period-card { min-height:108px; } }

/* Dashboard presentation is intentionally scoped to avoid changing other pages. */
.dashboard-page { gap:22px; margin-bottom:24px; }
.dashboard-page [data-dashboard-results]:not([hidden]) { width:100%; max-width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
.dashboard-page .panel { border-color:rgba(117,151,194,.24); border-radius:12px; }
.dashboard-page .dashboard-overview-panel,
.dashboard-page .dashboard-controls,
.dashboard-page .dashboard-money-panel,
.dashboard-page .dashboard-chart-panel,
.dashboard-page .dashboard-table-panel,
.dashboard-page .dashboard-summary-panel { padding:22px 24px; }
.dashboard-page .dashboard-section-heading { min-width:0; margin:0 0 20px; gap:18px; }
.dashboard-page .dashboard-section-heading > div { min-width:0; }
.dashboard-page .dashboard-section-heading h2 { color:var(--text); font-size:1.05rem; line-height:1.35; letter-spacing:.01em; }
.dashboard-page .dashboard-section-heading p { margin-top:5px; color:#99a8ba; line-height:1.45; }
.dashboard-page .dashboard-period-grid { gap:16px; }
.dashboard-page .dashboard-period-card { min-height:142px; padding:20px; gap:14px; border-radius:11px; }
.dashboard-page .dashboard-period-copy { gap:7px; }
.dashboard-page .dashboard-period-copy strong { font-size:1.9rem; }
.dashboard-page .dashboard-period-copy small { color:#9eacbd; line-height:1.35; }
.dashboard-page .dashboard-summary-grid { gap:16px; }
.dashboard-page .dashboard-count-card { min-height:138px; padding:22px 24px; align-content:center; gap:10px; }
.dashboard-page .dashboard-count-card strong { font-size:2rem; letter-spacing:-.025em; }
.dashboard-page .dashboard-count-card small { color:#9eacbd; line-height:1.4; }
.dashboard-page .dashboard-money-grid { gap:16px; align-items:stretch; }
.dashboard-page .dashboard-money-card { min-height:132px; padding:20px; display:flex; flex-direction:column; justify-content:flex-start; border-radius:10px; }
.dashboard-page .dashboard-money-card > div { align-items:center; gap:8px; margin-top:14px; }
.dashboard-page .dashboard-money-card > small { margin-top:auto; padding-top:12px; line-height:1.4; }
.dashboard-page .dashboard-amount-chip { max-width:100%; padding:7px 10px; font-size:.9rem; line-height:1.2; overflow-wrap:anywhere; white-space:normal; }
.dashboard-page .dashboard-chart-panel { overflow:visible; }
.dashboard-page .dashboard-chart-legend { align-items:center; gap:16px; padding:7px 10px; border:1px solid rgba(117,151,194,.2); border-radius:999px; background:rgba(255,255,255,.025); color:#aeb9c8; }
.dashboard-page .dashboard-chart-scroll { max-width:100%; overflow-x:auto; overflow-y:hidden; padding:48px 10px 8px; border:1px solid rgba(117,151,194,.18); border-radius:10px; background:rgba(3,10,19,.42); }
.dashboard-page .dashboard-chart { min-width:100%; height:226px; display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(25px,1fr); column-gap:5px; border-bottom-color:rgba(145,170,204,.36); background:repeating-linear-gradient(to top,transparent 0,transparent 53px,rgba(124,157,199,.13) 54px); }
.dashboard-page .dashboard-chart-day { position:relative; grid-template-rows:1fr 30px; outline:none; }
.dashboard-page .dashboard-chart-bars { height:190px; }
.dashboard-page .dashboard-chart-bars svg { width:100%; height:100%; display:block; overflow:visible; }
.dashboard-page .dashboard-chart-bars rect { opacity:.94; vector-effect:non-scaling-stroke; stroke:rgba(255,255,255,.08); stroke-width:.3; }
.dashboard-page .dashboard-chart-bars .receipt { fill:#2f86ff; }
.dashboard-page .dashboard-chart-bars .payment { fill:#f4f7fb; }
.dashboard-page .dashboard-chart-bars .exchange { fill:#7898bf; }
.dashboard-page .dashboard-chart-day small { align-self:end; padding-top:8px; color:#9eacbd; font-size:.68rem; transform:none; }
.dashboard-page .dashboard-chart-day::after { content:attr(data-tooltip); position:absolute; z-index:5; left:50%; top:-38px; width:max-content; max-width:260px; padding:7px 9px; transform:translate(-50%,5px); pointer-events:none; opacity:0; border:1px solid #2f86ff; border-radius:7px; background:#07111f; color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.42); font-size:.72rem; line-height:1.35; white-space:normal; transition:opacity .15s,transform .15s; }
.dashboard-page .dashboard-chart-day:hover::after,
.dashboard-page .dashboard-chart-day:focus-visible::after { opacity:1; transform:translate(-50%,0); }
.dashboard-page .dashboard-table-panel,
.dashboard-page .dashboard-summary-panel { min-width:0; overflow:hidden; }
.dashboard-page .dashboard-table-panel .table-scroll,
.dashboard-page .dashboard-summary-panel .table-scroll { border:1px solid rgba(117,151,194,.18); border-radius:9px; }
.dashboard-page .dashboard-table-panel th,
.dashboard-page .dashboard-table-panel td,
.dashboard-page .dashboard-summary-panel th,
.dashboard-page .dashboard-summary-panel td { padding:14px 16px; vertical-align:middle; }
.dashboard-page .dashboard-table-panel tbody tr,
.dashboard-page .dashboard-summary-panel tbody tr { transition:background-color .16s; }
.dashboard-page .dashboard-table-panel tbody tr:hover,
.dashboard-page .dashboard-summary-panel tbody tr:hover { background:rgba(44,132,255,.055); }
.dashboard-page .dashboard-recent-table th:nth-child(8),
.dashboard-page .dashboard-recent-table th:nth-child(9),
.dashboard-page .dashboard-recent-table td:nth-child(8),
.dashboard-page .dashboard-recent-table td:nth-child(9) { text-align:right; }
.dashboard-page .dashboard-recent-table th:nth-child(2),
.dashboard-page .dashboard-recent-table td:nth-child(2),
.dashboard-page .dashboard-recent-table .amount-cell { white-space:nowrap; }
.dashboard-page .posting-badge { padding:3px 7px; line-height:1.25; }
.dashboard-page .dashboard-summary-tables { width:100%; max-width:100%; min-width:0; gap:22px; align-items:stretch; }
.dashboard-page .dashboard-summary-panel { height:100%; }
.dashboard-page .dashboard-summary-panel .dashboard-section-heading { min-height:34px; }
.dashboard-page .dashboard-summary-panel .text-link { padding:5px 0; white-space:nowrap; }
@media (max-width:1100px) {
    .dashboard-page .dashboard-overview-panel,
    .dashboard-page .dashboard-controls,
    .dashboard-page .dashboard-money-panel,
    .dashboard-page .dashboard-chart-panel,
    .dashboard-page .dashboard-table-panel,
    .dashboard-page .dashboard-summary-panel { padding:20px; }
}
@media (max-width:600px) {
    .dashboard-page { gap:18px; margin-bottom:20px; }
    .dashboard-page [data-dashboard-results]:not([hidden]) { gap:18px; }
    .dashboard-page .dashboard-period-card { min-height:124px; padding:18px; }
    .dashboard-page .dashboard-count-card { min-height:116px; padding:20px; }
    .dashboard-page .dashboard-money-card { min-height:112px; }
    .dashboard-page .dashboard-chart-scroll { padding-top:46px; }
    .dashboard-page .dashboard-chart { height:216px; }
    .dashboard-page .dashboard-chart-bars { height:180px; }
    .dashboard-page .dashboard-chart-day::after { left:8px; transform:translate(0,5px); }
    .dashboard-page .dashboard-chart-day:hover::after,
    .dashboard-page .dashboard-chart-day:focus-visible::after { transform:none; }
}