:root {
    --bg: #F2EFE7;
    --bg-strong: #C8DFDB;
    --surface: rgba(242, 239, 231, 0.94);
    --surface-strong: #F2EFE7;
    --line: rgba(51, 104, 160, 0.2);
    --text: #284e76;
    --muted: #547995;
    --brand: #3368A0;
    --brand-strong: #285584;
    --accent: #66A3BF;
    --success: #3368A0;
    --danger: #b91c1c;
    --shadow: 0 14px 36px rgba(51, 104, 160, 0.11);
    --radius: 24px;
    --radius-sm: 16px;
}

@font-face {
    font-family: "NRT";
    src: url("../assets/fonts/nrt.ttf") format("truetype");
    font-display: swap;
}

html[data-theme="dark"] {
    --bg: #121212;
    --bg-strong: #444444;
    --surface: rgba(18, 18, 18, 0.94);
    --surface-strong: #444444;
    --line: rgba(224, 224, 224, 0.2);
    --text: #E0E0E0;
    --muted: #B0B0B0;
    --brand: #444444;
    --brand-strong: #E0E0E0;
    --accent: #888888;
    --success: #888888;
    --danger: #f87171;
    --shadow: 0 14px 36px rgba(0, 0, 24, 0.42);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: linear-gradient(145deg, var(--bg), var(--bg-strong));
    color: var(--text);
    font-family: "NRT", "Segoe UI", Tahoma, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.topbar,
.main-nav,
.card,
.auth-card,
.flash {
    backdrop-filter: blur(12px);
}

.topbar {
    position: relative;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #F2EFE7;
    font-weight: 700;
    letter-spacing: 0.12em;
    overflow: hidden;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}

.brand-mark.has-logo { background: transparent; color: inherit; }
.brand-mark.has-logo img { padding: 0; }

.brand-title,
.page-hero h2,
.card h3 {
    margin: 0;
    font-weight: 700;
}

.brand-subtitle,
.page-hero p,
.card p,
.auth-subtitle,
.table-subtitle {
    margin: 6px 0 0;
    color: var(--muted);
}

.topbar-tools {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.topbar-pills,
.language-switcher {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.language-switcher {
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
}

.language-switcher a.language-link {
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 8px 11px;
    color: var(--muted);
}

.language-switcher a.language-link.is-active {
    background: var(--brand);
    color: #F2EFE7;
    box-shadow: 0 4px 10px rgba(51, 104, 160, 0.2);
}

.pill,
.meta-chip {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(102, 163, 191, 0.2);
    color: var(--brand-strong);
    font-size: 0.92rem;
    font-weight: 600;
}

.branch-picker {
    position: relative;
    min-width: 190px;
    z-index: 20;
}

.branch-picker summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(51, 104, 160, 0.3);
    border-radius: 14px;
    background: var(--surface-strong);
    color: var(--brand-strong);
    box-shadow: 0 5px 14px rgba(51, 104, 160, 0.08);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.branch-picker summary::-webkit-details-marker { display: none; }
.branch-picker summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
}
.branch-picker[open] summary {
    border-color: var(--accent);
    outline: 3px solid rgba(102, 163, 191, 0.2);
}
.branch-picker[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.branch-picker-menu {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 8px);
    display: grid;
    min-width: 100%;
    width: max-content;
    max-width: min(340px, calc(100vw - 32px));
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    z-index: 41;
    box-shadow: 0 16px 30px rgba(25, 63, 92, 0.2);
}
.branch-picker-option {
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.branch-picker-option:hover,
.branch-picker-option.is-active { background: rgba(102, 163, 191, 0.18); color: var(--brand-strong); }

.app-select-picker { position: relative; display: block; width: 100%; min-width: 0; z-index: 12; }
.header-notification { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 10px; border: 1px solid #e3bb67; border-radius: 999px; background: #fff8e8; color: #704b0a; font-size: 0.78rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.header-notification i { width: 8px; height: 8px; border-radius: 50%; background: #dc8a14; box-shadow: 0 0 0 4px rgba(220, 138, 20, 0.14); }
.header-notification strong { display: inline-grid; place-items: center; min-width: 19px; height: 19px; border-radius: 999px; background: #704b0a; color: #fff; font-size: 0.7rem; }
.app-select-picker summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    list-style: none;
}
.app-select-picker summary::-webkit-details-marker { display: none; }
.app-select-picker summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
}
.app-select-picker[open] summary { border-color: var(--accent); outline: 3px solid rgba(102, 163, 191, 0.2); }
.app-select-picker[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.app-select-native { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.app-select-menu {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 7px);
    display: grid;
    width: max-content;
    min-width: 100%;
    max-width: min(360px, calc(100vw - 32px));
    max-height: min(320px, 50vh);
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 34px rgba(25, 63, 92, 0.22);
}
.app-select-option {
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}
.app-select-option:hover,
.app-select-option.is-active { background: rgba(102, 163, 191, 0.18); color: var(--brand-strong); }
.app-select-option:disabled { opacity: 0.45; cursor: not-allowed; }

.app-customer-picker { position: relative; width: 100%; min-width: 0; z-index: 13; }
.app-customer-picker > input {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
    color: var(--text);
    font: inherit;
}
.app-customer-picker > input:focus { outline: 3px solid rgba(102, 163, 191, 0.2); border-color: var(--accent); }
.app-customer-picker-menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    display: grid;
    max-height: min(320px, 50vh);
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 34px rgba(25, 63, 92, 0.22);
}
.app-customer-picker-option {
    display: grid;
    gap: 2px;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}
.app-customer-picker-option small { color: var(--muted); font-weight: 600; }
.app-customer-picker-option:hover { background: rgba(102, 163, 191, 0.18); color: var(--brand-strong); }

/* Cards use backdrop filtering, which creates a stacking layer. Raise the active settings card so its picker remains above the adjacent rate list. */
.exchange-settings-layout > .card { position: relative; }
.exchange-settings-layout > .card:has(.app-select-picker[open]) { z-index: 30; }
.valuation-rates-card { position: relative; z-index: 1; overflow: visible; }
.valuation-rates-card:has(.app-select-picker[open]) { z-index: 40; }
.valuation-rates-card .app-select-menu { z-index: 41; }
.valuation-rate-form { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.valuation-rate-form .field { min-width: 0; }
.valuation-rate-form .field input,
.valuation-rate-form .field select { min-height: 52px; }
.valuation-quote { grid-column: 1 / -1; margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(102, 163, 191, 0.12); color: var(--brand-strong); font-size: 0.86rem; font-weight: 800; }
.exchange-rate-history-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; color: var(--brand-strong); font-weight: 800; list-style: none; }
.exchange-rate-history-details > summary::-webkit-details-marker { display: none; }
.exchange-rate-history-details > summary small { display: inline-grid; place-items: center; min-width: 28px; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: rgba(102, 163, 191, 0.16); color: var(--muted); }
.exchange-rate-history-details[open] > summary { margin-bottom: 14px; }

.branch-tag {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(102, 163, 191, 0.16);
    color: var(--brand-strong);
    font-size: 0.86rem;
    font-weight: 600;
}

.branch-switcher select,
.language-select,
.form-grid select,
.filters-grid select,
.filters-grid input,
.form-grid input,
.form-grid textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
    color: var(--text);
    font: inherit;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.modern-date-time {
    min-height: 54px;
    padding: 12px 16px !important;
    border-radius: 16px !important;
    background: var(--surface-strong) !important;
    color: var(--text) !important;
    font-weight: 700;
}

.logout-link,
.button,
button,
input[type="submit"] {
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #F2EFE7;
    padding: 12px 18px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

button:disabled,
input[type="submit"]:disabled {
    cursor: wait;
    opacity: 0.58;
}

.button.secondary,
.nav-link,
.language-switcher a {
    background: var(--surface-strong);
    color: var(--text);
    border: 1px solid var(--line);
}

.app-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 20px;
    align-items: start;
    direction: ltr;
}

.sidebar-nav {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 20px;
    z-index: 20;
}

.navigation-stack { display: grid; gap: 8px; position: relative; z-index: 20; }

.main-nav {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.nav-link {
    display: block;
    padding: 10px 14px;
    border-radius: 14px;
    transition: 0.2s ease;
}

.nav-company-group { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }
.nav-company-control { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.nav-company-toggle { width: 100%; border: 0; cursor: pointer; font: inherit; text-align: start; }
.nav-company-toggle::after { content: '+'; float: inline-end; font-size: 1.1rem; line-height: 1; }
.nav-company-control:checked + .nav-company-toggle::after { content: '-'; }
.navigation-stack > .nav-company-links { display: none; gap: 5px; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); position: relative; z-index: 21; }
.navigation-stack:has(.nav-company-control:checked) > .nav-company-links { display: grid; }
.nav-company-link { padding: 8px 11px; font-size: 0.9rem; background: transparent; position: relative; z-index: 22; pointer-events: auto; }

.nav-link.is-active,
.nav-link:hover,
.language-switcher a:hover,
.button.secondary:hover {
    background: rgba(102, 163, 191, 0.22);
    color: var(--brand-strong);
}

.button.danger {
    background: linear-gradient(135deg, #a44a45, #7d3432);
}

.main-content {
    display: grid;
    gap: 20px;
    grid-column: 1;
    min-width: 0;
}

html[dir="rtl"] .sidebar-nav,
html[dir="rtl"] .main-content {
    direction: rtl;
}

html[dir="ltr"] .app-workspace {
    grid-template-columns: 230px minmax(0, 1fr);
}

html[dir="ltr"] .sidebar-nav {
    grid-column: 1;
}

html[dir="ltr"] .main-content {
    grid-column: 2;
}

.page-hero {
    display: none;
}

.page-hero-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.flash {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.flash-success {
    border-color: rgba(51, 104, 160, 0.35);
    color: var(--success);
}

.flash-error {
    border-color: rgba(185, 28, 28, 0.24);
    color: var(--danger);
}

.grid {
    display: grid;
    gap: 18px;
}

.grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
    padding: 22px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.stat-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stat-tile {
    padding: 18px;
    border-radius: 18px;
    background: var(--surface-strong);
    border: 1px solid rgba(51, 104, 160, 0.18);
}

.stat-label {
    color: var(--muted);
    font-size: 0.9rem;
}

.stat-value {
    margin-top: 10px;
    font-size: 1.3rem;
    font-weight: 700;
}

.action-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.action-card {
    display: block;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(200, 223, 219, 0.58);
}

.action-card strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 8px;
}

.action-card span {
    color: var(--muted);
    font-size: 0.94rem;
}

.form-grid,
.filters-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.filter-launcher {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 12px;
}

.filter-launcher-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 16px;
    border: 1px solid var(--brand);
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 850;
    box-shadow: 0 7px 15px rgba(35, 86, 132, 0.16);
}

.filter-launcher-button:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

.filter-dialog {
    width: min(760px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 28px);
    box-sizing: border-box;
    padding: 0;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 28px 80px rgba(20, 54, 86, 0.32);
}

.filter-dialog::backdrop { background: rgba(18, 42, 62, 0.48); backdrop-filter: blur(3px); }

.filter-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(115deg, var(--surface-strong), var(--surface));
}

.filter-dialog-head h2 { margin: 0; color: var(--brand-strong); font-size: 1.08rem; }
.filter-dialog-close { display: grid; place-items: center; width: 34px; min-width: 34px; min-height: 34px; padding: 0; border-radius: 50%; font-size: 1.2rem; }
.filter-dialog-content { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 16px 18px 18px; }

.filter-dialog .filters-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
}

.filter-dialog .field { position: relative; z-index: 1; min-width: 0; gap: 5px; }
.filter-dialog .field label,
.filter-dialog .audit-filter-bar label > span { color: var(--muted); font-size: 0.75rem; font-weight: 800; }
.filter-dialog input,
.filter-dialog select,
.filter-dialog .app-select-picker summary,
.filter-dialog .app-customer-picker > input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: 0.88rem;
}

.filter-dialog .app-select-picker,
.filter-dialog .app-customer-picker { position: relative; z-index: 1; }
.filter-dialog .field:has(.app-select-picker[open]),
.filter-dialog .field:has(.app-customer-picker:focus-within),
.filter-dialog .field:has(.customer-search-field:focus-within),
.filter-dialog .field:focus-within { z-index: 1000 !important; }
.filter-dialog .app-select-picker[open],
.filter-dialog .app-customer-picker:focus-within,
.filter-dialog .customer-search-field:focus-within { z-index: 1001 !important; }
.filter-dialog .app-select-menu,
.filter-dialog .app-customer-picker-menu,
.filter-dialog .customer-results {
    z-index: 1002 !important;
    max-height: var(--filter-picker-max-height, min(280px, calc(100dvh - 160px)));
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.filter-dialog .app-select-picker.opens-upward .app-select-menu,
.filter-dialog .app-customer-picker.opens-upward .app-customer-picker-menu {
    top: auto;
    bottom: calc(100% + 7px);
}
.filter-dialog .customer-search-field.opens-upward .customer-results {
    top: auto;
    bottom: calc(100% + 6px);
    border-radius: 15px 15px 0 0;
}

.filter-dialog .business-ledger-filters { grid-template-columns: minmax(0, 1fr); }
.filter-dialog .business-ledger-filter-primary,
.filter-dialog .business-ledger-filter-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-dialog .business-ledger-filter-group { width: 100%; }
.filter-dialog .business-ledger-customer-filter { grid-column: auto; }
.filter-dialog .pnl-periods { margin-bottom: 10px; }
.filter-dialog .audit-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.filter-dialog .audit-filter-bar button,
.filter-dialog .transaction-filter-actions,
.filter-dialog .business-ledger-filter-actions,
.filter-dialog .customer-overview-filter-actions,
.filter-dialog .customer-statement-filters .field.full,
.filter-dialog .pnl-filter-actions { grid-column: 1 / -1; }
.filter-dialog .transaction-filter-actions,
.filter-dialog .business-ledger-filter-actions,
.filter-dialog .customer-overview-filter-actions,
.filter-dialog .pnl-filter-actions { justify-content: flex-end; }

.customer-statement-balance-card { margin-bottom: 16px; }

.transaction-filter-card {
    position: relative;
    z-index: 6;
    overflow: visible;
    padding: 12px 14px;
}

.transaction-filters {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    align-items: end;
    gap: 7px;
}

.transaction-filters .field {
    position: relative;
    gap: 4px;
}

/* Keep the active filter menu above the remaining filter controls. */
.transaction-filter-card:has(.app-select-picker[open]),
.transaction-filter-card:has(.transaction-customer-search:focus-within) { z-index: 80; }
.transaction-filters .field:has(.app-select-picker[open]),
.transaction-filters .field:has(.transaction-customer-search:focus-within),
.transaction-filters .field:focus-within { z-index: 81; }

.transaction-filters .field label {
    font-size: 0.75rem;
}

.transaction-filters input,
.transaction-filters select {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 0.86rem;
}

.transaction-filters .app-select-picker,
.transaction-filters .app-customer-picker { z-index: 82; }
.transaction-filters .app-select-picker summary,
.transaction-filters .app-customer-picker > input {
    min-height: 36px;
    padding: 6px 9px;
    border-radius: 11px;
    font-size: 0.86rem;
}
.transaction-filters .app-select-menu,
.transaction-filters .app-customer-picker-menu { z-index: 83; }
.transaction-customer-search { position: relative; z-index: 84; }
.transaction-customer-search .customer-results { z-index: 85; }

.transaction-filter-actions {
    display: flex;
    align-items: end;
    gap: 6px;
}

.transaction-filter-actions > * {
    display: grid;
    place-items: center;
    min-width: 38px;
    min-height: 38px;
    padding: 7px 9px;
}

.transaction-report-header {
    margin-bottom: 10px;
}

.transaction-report-card { position: relative; z-index: 1; }

.business-ledger-filter-card {
    position: relative;
    z-index: 6;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    overflow: visible;
    padding: 12px 14px;
}

.business-ledger-filters {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    grid-template-columns: minmax(510px, 1.2fr) minmax(390px, 0.9fr) auto;
    align-items: end;
    gap: 10px;
}

.business-ledger-filter-group {
    display: grid;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    gap: 7px;
}
.business-ledger-filter-primary { grid-template-columns: 0.9fr 0.9fr 0.72fr 1.48fr; }
.business-ledger-filter-secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.business-ledger-filters .field { position: relative; min-inline-size: 0; gap: 4px; }
.business-ledger-filters .field label { font-size: 0.75rem; }
.business-ledger-filters input,
.business-ledger-filters select { min-height: 36px; padding: 6px 9px; font-size: 0.84rem; }
.business-ledger-filters .app-select-picker,
.business-ledger-filters .app-customer-picker { z-index: 82; }
.business-ledger-filter-card:has(.app-select-picker[open]),
.business-ledger-filter-card:has(.business-ledger-customer-search:focus-within) { z-index: 80; }
.business-ledger-filters .field:has(.app-select-picker[open]),
.business-ledger-filters .field:focus-within { z-index: 81; }
.business-ledger-filters .app-select-menu { z-index: 83; }
.business-ledger-customer-search { position: relative; z-index: 84; }
.business-ledger-customer-search .customer-results { z-index: 85; }

.business-ledger-filter-actions {
    display: flex;
    align-items: end;
    gap: 6px;
    align-self: end;
}

.business-ledger-filter-actions > * {
    display: grid;
    place-items: center;
    min-width: 38px;
    min-height: 38px;
    padding: 7px 9px;
}

.business-ledger-card { position: relative; z-index: 1; padding: 14px; }
.business-ledger-header { align-items: center; margin-bottom: 10px; }
.business-ledger-header p { margin: 2px 0 0; font-size: 0.82rem; }
.business-ledger-header-actions { display: flex; align-items: center; justify-content: end; gap: 9px; }
.business-ledger-column-picker { position: relative; z-index: 5; }
.business-ledger-column-picker summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-strong);
    color: var(--brand-strong);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 800;
    list-style: none;
}
.business-ledger-column-picker summary::-webkit-details-marker { display: none; }
.business-ledger-column-picker[open] summary { background: var(--soft); border-color: var(--brand); }
.business-ledger-column-menu {
    position: absolute;
    z-index: 90;
    top: calc(100% + 7px);
    left: 0;
    right: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(128px, 1fr));
    gap: 3px 8px;
    width: min(310px, calc(100vw - 36px));
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-strong);
    box-shadow: 0 14px 32px rgba(20, 52, 82, 0.18);
}
.business-ledger-column-menu label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 30px;
    padding: 4px 6px;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 750;
}
.business-ledger-column-menu label:hover { background: var(--soft); }
.business-ledger-column-menu input { inline-size: 15px; block-size: 15px; accent-color: var(--brand); }

.table-column-picker-toolbar { display: flex; justify-content: flex-start; direction: ltr; margin: 0 0 8px; }
.table-column-picker { position: relative; z-index: 5; direction: rtl; }
.table-column-picker summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-strong);
    color: var(--brand-strong);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 800;
    list-style: none;
}
.table-column-picker summary::-webkit-details-marker { display: none; }
.table-column-picker[open] { z-index: 95; }
.table-column-picker[open] summary { background: var(--soft); border-color: var(--brand); }
.table-column-picker-menu {
    position: absolute;
    z-index: 96;
    top: calc(100% + 7px);
    left: 0;
    right: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(128px, 1fr));
    gap: 3px 8px;
    width: min(310px, calc(100vw - 36px));
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-strong);
    box-shadow: 0 14px 32px rgba(20, 52, 82, 0.18);
}
.table-column-picker-menu label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 30px;
    padding: 4px 6px;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 750;
}
.table-column-picker-menu label:hover { background: var(--soft); }
.table-column-picker-menu input { inline-size: 15px; block-size: 15px; accent-color: var(--brand); }
.card:has(.table-column-picker[open]) { position: relative; z-index: 90; overflow: visible; }
.business-ledger-count {
    display: grid;
    min-width: 34px;
    min-height: 34px;
    place-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--brand-strong);
}
.business-ledger-table-wrap {
    width: 100%;
    max-height: min(68vh, 760px);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.business-ledger-table {
    width: 100%;
    min-width: max(680px, calc(var(--business-ledger-visible-columns, 11) * 104px));
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.76rem;
}
.business-ledger-col-document { width: 4.5%; }
.business-ledger-col-date { width: 10%; }
.business-ledger-col-kind { width: 11%; }
.business-ledger-col-currency { width: 4.5%; }
.business-ledger-col-amount { width: 8.5%; }
.business-ledger-col-account { width: 11%; }
.business-ledger-col-customer { width: 10%; }
.business-ledger-col-user { width: 7.5%; }
.business-ledger-col-note { width: 10%; }
.business-ledger-table col[hidden] { display: none; }
.business-ledger-table th,
.business-ledger-table td {
    padding: 7px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.business-ledger-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    background: var(--surface-strong);
    box-shadow: 0 1px 0 var(--line), 0 8px 14px rgba(20, 52, 82, 0.06);
}
.business-ledger-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--soft) 30%, transparent); }
.business-ledger-table tbody tr:hover td { background: color-mix(in srgb, var(--brand) 7%, var(--surface-strong)); }
.business-ledger-kind-cell { line-height: 1.15; }
.business-ledger-table .tag,
.ledger-scope { padding: 3px 6px; font-size: 0.66rem; }
.business-ledger-kind-cell .ledger-scope { margin-inline-start: 4px; }
.ledger-scope {
    display: inline-flex;
    border-radius: 999px;
    background: var(--soft);
    color: var(--brand-strong);
    font-weight: 800;
}
.ledger-scope-electronic { background: rgba(64, 138, 113, 0.14); color: #276b58; }
.ledger-amount-in { color: #0d7a42; font-weight: 800; }
.ledger-amount-out { color: #ad3f3f; font-weight: 800; }
.business-ledger-account { font-weight: 700; }
.business-ledger-note { line-height: 1.25; }
.business-ledger-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 10px; }
.business-ledger-pagination button { min-width: 34px; min-height: 34px; padding: 4px 9px; }
.business-ledger-pagination span { min-width: 72px; text-align: center; color: var(--muted); font-size: 0.78rem; font-weight: 800; }
#business-ledger-body[aria-busy="true"] { opacity: 0.48; }

.transaction-report-header p {
    font-size: 0.82rem;
}

#transaction-report-body[aria-busy="true"] {
    opacity: 0.5;
}

.form-grid .full,
.filters-grid .full {
    grid-column: 1 / -1;
}

.field {
    display: grid;
    gap: 8px;
}

.field[hidden] {
    display: none !important;
}

.field label,
.filters-grid label {
    font-size: 0.92rem;
    font-weight: 600;
}

.field textarea {
    min-height: 120px;
    resize: vertical;
}

.inline-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.radio-chip,
.checkbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-strong);
}

.user-form {
    gap: 10px;
}

.user-form .field {
    gap: 5px;
}

.user-form input,
.user-form select {
    min-height: 40px;
    padding: 8px 10px;
}

.access-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.access-chip,
.permission-chip {
    position: relative;
    cursor: pointer;
}

.access-chip input,
.permission-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.access-chip > span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-strong);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 800;
    transition: 160ms ease;
}

.access-chip input:checked + span,
.permission-chip input:checked + span {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 13%, var(--surface));
    box-shadow: inset 0 0 0 1px var(--brand);
    color: var(--brand-strong);
}

.access-chip-status > span::before,
.permission-chip > span::before {
    content: "+";
    margin-inline-end: 6px;
    font-weight: 900;
}

.access-chip-status input:checked + span::before,
.permission-chip input:checked + span::before {
    content: "✓";
}

.user-permission-panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
}

.user-permission-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--brand-strong);
    font-weight: 800;
}

.user-permission-panel summary small {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(51, 104, 160, 0.12);
}

.user-permission-panel > p {
    margin: 0;
    padding: 0 12px 9px;
    font-size: 0.78rem;
}

.permission-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 7px;
    padding: 0 10px 10px;
}

.permission-chip > span {
    display: grid;
    gap: 2px;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    transition: 160ms ease;
}

.permission-chip strong {
    font-size: 0.8rem;
}

.permission-chip small {
    color: var(--muted);
    font-size: 0.68rem;
    direction: ltr;
    text-align: start;
}

.provider-account-access-field .permission-chip.is-unavailable { cursor: not-allowed; }
.provider-account-access-field .permission-chip.is-unavailable > span { opacity: 0.45; }

.table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--line);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

th,
td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(51, 104, 160, 0.12);
    text-align: start;
    vertical-align: top;
}

th {
    background: rgba(102, 163, 191, 0.18);
    font-size: 0.92rem;
}

.tag {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(102, 163, 191, 0.2);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
}

.transaction-context {
    display: grid;
    gap: 5px;
    min-width: 210px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.transaction-context strong {
    color: var(--text);
}

.muted {
    color: var(--muted);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at 12% 15%, rgba(102, 163, 191, 0.28), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(200, 223, 219, 0.8), transparent 36%);
}

.auth-card {
    width: min(1020px, 100%);
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    min-height: 590px;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: var(--surface);
}

.auth-story {
    position: relative;
    display: grid;
    place-items: center;
    padding: 48px;
    overflow: hidden;
    background: linear-gradient(145deg, #285584, #3368A0 54%, #66A3BF);
    background-size: 165% 165%;
    animation: ambient-gradient-drift 34s ease-in-out infinite;
    color: #F2EFE7;
}

.auth-panel h2 {
    margin: 0;
}

.auth-story-orbit {
    position: absolute;
    border: 1px solid rgba(242, 239, 231, 0.28);
    border-radius: 999px;
    transform: rotate(-24deg);
    animation: auth-orbit-drift 38s ease-in-out infinite;
}

.orbit-one {
    width: 460px;
    height: 460px;
    inset-inline-end: -175px;
    bottom: -200px;
}

.orbit-two {
    width: 310px;
    height: 310px;
    inset-inline-end: -70px;
    bottom: -115px;
    animation-delay: -18s;
    animation-duration: 44s;
}

.auth-brand-lockup {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 20px;
    text-align: center;
}

.auth-brand-lockup h1 {
    max-width: 430px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.12;
}

.auth-brand-mark {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(242, 239, 231, 0.36);
    border-radius: 27px;
    background: rgba(242, 239, 231, 0.12);
    color: #F2EFE7;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    box-shadow: 0 16px 32px rgba(20, 54, 86, 0.22);
}

.auth-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.auth-brand-mark.has-logo { border-color: transparent; background: transparent; box-shadow: none; }
.auth-brand-mark.has-logo img { padding: 0; }

.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px;
    background: rgba(242, 239, 231, 0.97);
}

html[data-theme="dark"] .auth-panel {
    background: var(--surface);
}

.auth-language-switcher {
    align-self: flex-start;
    margin-bottom: 46px;
    padding: 4px;
    border-radius: 13px;
    box-shadow: 0 7px 18px rgba(51, 104, 160, 0.09);
}

.auth-language-switcher a.language-link {
    min-width: 76px;
    text-align: center;
    font-size: 0.9rem;
}
.auth-preferences { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 38px; }
.auth-language-switcher { display: flex; flex: 1 1 auto; width: auto; margin: 0; }
.auth-language-switcher a.language-link { flex: 1 1 0; min-width: 0; }
.auth-theme-toggle { flex: 0 0 auto; }

.auth-form {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.auth-form input {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid var(--line);
    font: inherit;
    background: var(--surface-strong);
}

.auth-form input:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(102, 163, 191, 0.16);
}

.auth-form button {
    min-height: 54px;
    margin-top: 5px;
    border-radius: 15px;
    font-size: 1rem;
}

.company-logo-upload {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.company-logo-upload img {
    width: 72px;
    height: 72px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 16px;
    object-fit: contain;
    background: var(--surface-strong);
}

.company-logo-upload small {
    grid-column: 1 / -1;
    color: var(--muted);
}

.stack {
    display: grid;
    gap: 12px;
}

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 6px 6px;
    color: var(--muted);
    font-size: 0.92rem;
}

.receipt-sheet {
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 32px;
    border-radius: 26px;
    background: var(--surface);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}

.receipt-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px dashed rgba(51, 104, 160, 0.28);
}
.receipt-logo { flex: 0 0 auto; order: 3; width: 64px; height: 64px; display: grid; place-items: center; }
.receipt-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.exchange-rates-mobile { display: none; }
.exchange-settings-page .exchange-rates-table .button,
.exchange-settings-page .exchange-rates-mobile .button {
    display: grid;
    place-items: center;
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    text-align: center;
}
.exchange-settings-page .exchange-rates-table .button:hover,
.exchange-settings-page .exchange-rates-mobile .button:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }

.receipt-block {
    margin-top: 18px;
}

.receipt-block h3 {
    margin: 0 0 10px;
}

.receipt-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(51, 104, 160, 0.12);
}

.receipt-exchange-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.receipt-exchange-summary > div {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
}

.receipt-exchange-summary span {
    color: var(--muted);
    font-size: 0.92rem;
}

.receipt-exchange-summary strong {
    color: var(--brand-strong);
    font-size: 1.2rem;
}

.print-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.theme-toggle {
    position: relative;
    width: 48px;
    min-width: 48px;
    height: 28px;
    padding: 3px;
    border: 1px solid rgba(51, 104, 160, 0.28);
    border-radius: 999px;
    background: rgba(102, 163, 191, 0.22);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.theme-toggle::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #F2EFE7;
    box-shadow: 0 2px 6px rgba(25, 63, 92, 0.25);
    transition: transform 160ms ease;
}

html[data-theme="dark"] .theme-toggle { background: var(--brand); border-color: var(--brand); }
html[data-theme="dark"] .theme-toggle::after { transform: translateX(20px); }
html[dir="rtl"][data-theme="dark"] .theme-toggle::after { transform: translateX(-20px); }
.theme-toggle:focus-visible { outline: 3px solid rgba(102, 163, 191, 0.5); outline-offset: 2px; }

.currency-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.receipt-form {
    display: grid;
    gap: 18px;
    max-width: 920px;
}

.receipt-page-actions { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.receipt-page-actions { gap: 8px; flex-wrap: wrap; }
.receipt-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.receipt-field-label { margin-bottom: 2px; color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.remittance-fields {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
    border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--surface-strong)), var(--surface-strong));
}
.remittance-fields[hidden] { display: none !important; }
.remittance-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.remittance-section-head div { display: grid; gap: 3px; }
.remittance-section-head strong { color: var(--brand-strong); font-size: 1.05rem; }
.remittance-section-head span { color: var(--muted); font-size: 0.82rem; }
.remittance-field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.remittance-payment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.remittance-calculated-input[readonly] { border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); background: color-mix(in srgb, var(--brand) 8%, var(--surface-strong)); color: var(--brand-strong); font-weight: 900; }
.remittance-rounding-field .rounding-buttons { max-width: 360px; }
.remittance-balance-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--success) 36%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--success) 8%, var(--surface-strong)); }
.remittance-balance-preview > div { display: grid; gap: 3px; padding: 9px 10px; border-radius: 10px; background: var(--surface-strong); }
.remittance-balance-preview span { color: var(--muted); font-size: 0.73rem; font-weight: 800; }
.remittance-balance-preview strong { color: var(--success); font-size: 0.9rem; }
.remittance-calculation-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--brand) 6%, var(--surface-strong)); }
.remittance-calculation-summary > div { display: grid; gap: 3px; padding: 9px 10px; border-radius: 10px; background: var(--surface-strong); }
.remittance-calculation-summary span { color: var(--muted); font-size: 0.73rem; font-weight: 800; }
.remittance-calculation-summary strong { color: var(--brand-strong); font-size: 0.9rem; }
.remittance-calculation-message { margin: 0; color: #a13a3a; font-size: 0.82rem; font-weight: 800; }
.remittance-action-dialog { width: min(480px, calc(100vw - 28px)); }
.remittance-action-dialog .quick-customer-form { grid-template-columns: 1fr; }
.remittance-action-dialog .quick-customer-actions { grid-column: auto; }
.remittance-action-reference { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; color: var(--brand-strong); font-weight: 900; }
.remittance-queue-card .card-header { align-items: center; }
.remittance-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.74rem; }
.remittance-actions { flex-wrap: wrap; }
.compact-action { min-height: 34px; padding: 6px 10px; border-radius: 10px; font-size: 0.78rem; white-space: nowrap; }
.remittance-status.is-pending { border-color: #d8a64e; background: #fff6df; color: #815713; }
.remittance-status.is-sent { border-color: #76aec8; background: #e9f5fa; color: #176582; }
.remittance-status.is-paid { border-color: #7fbd98; background: #eaf8ef; color: #217144; }
.remittance-status.is-returned { border-color: #d58b8b; background: #fff0f0; color: #9a3535; }
.receipt-remittance-summary { display: grid; gap: 14px; }
.receipt-remittance-reference { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.receipt-remittance-reference span,
.receipt-remittance-grid span { color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.receipt-remittance-reference strong { color: var(--brand-strong); }
.receipt-remittance-reference em { font-style: normal; }
.receipt-remittance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.receipt-remittance-grid > div { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); }
.receipt-remittance-grid strong { color: var(--text); font-size: 0.92rem; }
.receipt-remittance-grid small { color: var(--muted); font-size: 0.76rem; }

.receipt-form select,
.receipt-form input:not([type="radio"]),
.receipt-form textarea {
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-strong);
    color: var(--text);
    font: inherit;
    font-size: 1.08rem;
}

.receipt-form textarea {
    min-height: 96px;
}

.customer-search-field {
    position: relative;
}

.quick-customer-search-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.quick-customer-search-control input { min-width: 0; }
.quick-customer-trigger {
    display: grid;
    place-items: center;
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    border-radius: 15px;
    background: var(--brand);
    color: #fff;
    font-size: 1.65rem;
    font-weight: 500;
    line-height: 1;
}
.quick-customer-trigger:hover { background: var(--brand-strong); }

.quick-customer-dialog {
    width: min(500px, calc(100vw - 28px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 28px 80px rgba(20, 54, 86, 0.32);
}

.quick-customer-dialog::backdrop { background: rgba(18, 42, 62, 0.48); backdrop-filter: blur(3px); }
.quick-customer-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(115deg, var(--surface-strong), var(--surface));
}
.quick-customer-dialog h2 { margin: 0; color: var(--brand-strong); font-size: 1.05rem; }
.quick-customer-close { display: grid; place-items: center; width: 34px; min-width: 34px; min-height: 34px; padding: 0; border-radius: 50%; font-size: 1.2rem; }
.quick-customer-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 18px 18px; }
.quick-customer-form .field { min-width: 0; gap: 5px; }
.quick-customer-form .field:nth-of-type(3),
.quick-customer-form .field:nth-of-type(4),
.quick-customer-form .quick-customer-error,
.quick-customer-form .quick-customer-actions { grid-column: 1 / -1; }
.quick-customer-form label { color: var(--muted); font-size: 0.74rem; font-weight: 800; }
.quick-customer-form input,
.quick-customer-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-strong);
    color: var(--text);
    font-size: 16px !important;
    outline: none;
}
.quick-customer-form input:focus,
.quick-customer-form textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.quick-customer-form textarea { min-height: 72px; resize: vertical; }
.quick-customer-error { margin: 0; color: var(--danger); font-size: 0.82rem; }
.quick-customer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-customer-actions button { min-height: 42px; }

.customer-results {
    position: absolute;
    z-index: 10;
    inset-inline: 0;
    top: calc(100% - 2px);
    display: grid;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 0 0 15px 15px;
    background: var(--surface-strong);
    box-shadow: var(--shadow);
}

.customer-results[hidden] {
    display: none;
}

.customer-balance-card {
    display: grid;
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-strong);
}

.customer-balance-card h3 {
    margin: 0;
    font-size: 1rem;
}

.customer-balance-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.customer-balance-item {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(102, 163, 191, 0.15);
    font-weight: 800;
}

.customer-balance-item.is-negative { color: #a44a45; }
.customer-balance-item.is-positive { color: var(--brand-strong); }

.customer-balance-rows {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.customer-balance-rows span:not(.muted) {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(102, 163, 191, 0.12);
    font-size: 0.82rem;
    font-weight: 800;
}

.customer-balance-rows .is-negative { color: #a44a45; }
.customer-balance-rows .is-positive { color: var(--brand-strong); }

.transfer-balance-stack {
    display: grid;
    gap: 16px;
    align-content: start;
}

.customer-balance-panel {
    min-height: 0;
}

.customer-overview-filter-card {
    position: relative;
    z-index: 6;
    overflow: visible;
    padding: 10px 14px;
}

.customer-overview-filter-card .card-header { display: none; }

.customer-overview-filters {
    grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr)) auto;
    align-items: end;
    gap: 8px;
}

.customer-overview-filters .field { position: relative; gap: 4px; }
.customer-overview-filter-card:has(.app-select-picker[open]),
.customer-overview-filter-card:has(.customer-overview-search:focus-within) { z-index: 80; }
.customer-overview-filters .field:has(.app-select-picker[open]),
.customer-overview-filters .field:focus-within { z-index: 81; }
.customer-overview-filters .app-select-picker { z-index: 82; }
.customer-overview-filters .app-select-menu { z-index: 83; }
.customer-overview-search .customer-results { z-index: 84; }
.customer-overview-filters input,
.customer-overview-filters select { min-height: 38px; padding: 7px 9px; }
.customer-overview-filters .app-select-picker summary { min-height: 38px; padding: 7px 9px; border-radius: 11px; }

.customer-overview-filter-actions {
    display: flex;
    align-items: end;
    gap: 6px;
}

.customer-overview-filter-actions > * {
    display: grid;
    place-items: center;
    min-width: 38px;
    min-height: 38px;
    padding: 7px 10px;
}

.customer-overview-filter-actions .customer-create-trigger {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 11px;
    font-size: 1.3rem;
}

.customer-editor-dialog {
    width: min(700px, calc(100vw - 28px));
    max-height: min(760px, calc(100vh - 28px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 28px 80px rgba(20, 54, 86, 0.32);
}

.customer-editor-dialog::backdrop { background: rgba(18, 42, 62, 0.48); backdrop-filter: blur(3px); }

.customer-editor-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(115deg, var(--surface-strong), var(--surface));
}

.customer-editor-dialog-head h2 { margin: 0; color: var(--brand-strong); font-size: 1.05rem; }
.customer-editor-close { display: grid; place-items: center; width: 34px; min-width: 34px; min-height: 34px; padding: 0; border-radius: 50%; font-size: 1.2rem; }

.customer-editor-form { display: grid; gap: 10px; padding: 16px 18px 18px; }
.customer-editor-rows { display: grid; max-height: min(430px, 52vh); gap: 9px; overflow-y: auto; padding-inline-end: 2px; }
.customer-editor-row { padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }
.customer-editor-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.customer-editor-row-number { color: var(--brand-strong); font-size: 0.82rem; }
.customer-editor-remove { display: grid; place-items: center; width: 28px; min-width: 28px; min-height: 28px; padding: 0; border-radius: 8px; font-size: 1.08rem; }
.customer-editor-row-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.customer-editor-row-fields .field { min-width: 0; gap: 4px; }
.customer-editor-row-fields .field.full { grid-column: 1 / -1; }
.customer-editor-row-fields .field > span { color: var(--muted); font-size: 0.72rem; font-weight: 800; }
.customer-editor-row-fields input,
.customer-editor-row-fields textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font-size: 16px !important;
    outline: none;
}
.customer-editor-row-fields input:focus,
.customer-editor-row-fields textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.customer-editor-row-fields textarea { min-height: 58px; resize: vertical; }
.customer-editor-add-row { display: grid; place-items: center; justify-self: start; width: 42px; min-width: 42px; min-height: 42px; padding: 0; border-color: var(--brand); border-radius: 12px; background: var(--brand); color: #fff; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.customer-editor-add-row[hidden],
.customer-editor-remove[hidden] { display: none !important; }
.customer-editor-add-row:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.customer-editor-error { margin: 0; color: var(--danger); font-size: 0.82rem; }
.customer-editor-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.customer-editor-actions button { min-height: 42px; }

.customer-create-panel { padding: 0; }
.customer-create-panel > summary {
    min-height: 46px;
    padding: 12px 15px;
    color: var(--brand-strong);
    font-weight: 800;
    cursor: pointer;
}
.customer-create-panel[open] > summary { border-bottom: 1px solid var(--line); }
.customer-create-panel > form { padding: 14px; }

.customer-overview-list { padding: 10px 14px 14px; }
.customer-overview-list .card-header { margin-bottom: 7px; }
.customer-overview-list .card-header p { margin-top: 2px; font-size: 0.78rem; }
.customer-overview-rows { display: grid; gap: 6px; }
.customer-overview-row {
    display: grid;
    align-content: start;
    min-height: 0;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-strong);
}

.customer-overview-identity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(100deg, color-mix(in srgb, var(--brand) 5%, var(--surface)), var(--surface));
}

.customer-overview-identity > div {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px 12px;
}

.customer-overview-identity > div + div { border-inline-start: 1px solid var(--line); }

.customer-overview-identity small,
.customer-overview-balance small { color: var(--muted); font-size: 0.68rem; font-weight: 800; }
.customer-overview-identity strong { overflow: hidden; color: var(--brand-strong); font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }

.customer-overview-balances {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.customer-overview-balances:has(.muted) { display: none; }

.customer-overview-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
}

.customer-overview-balance {
    display: flex;
    align-items: baseline;
    flex: 0 0 auto;
    min-width: 82px;
    gap: 5px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
}

.customer-overview-balance strong { font-size: 0.84rem; }
.customer-overview-balance.is-positive strong { color: #117744; }
.customer-overview-balance.is-negative strong { color: #b33737; }

.customer-overview-actions { display: flex; align-items: center; justify-content: end; gap: 6px; min-height: 34px; }
.customer-overview-actions .button { min-height: 34px; padding: 6px 10px; font-size: 0.78rem; }
.customer-overview-actions .icon-button { min-width: 34px; min-height: 34px; }
.customer-overview-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.customer-overview-pagination span { min-width: 68px; color: var(--muted); font-size: 0.82rem; font-weight: 800; text-align: center; }
.customer-overview-pagination .button { min-width: 36px; min-height: 34px; padding: 5px 9px; }
.customer-overview-empty { padding: 16px; text-align: center; }

.customer-balance-panel .customer-balance-list {
    min-height: 0;
    align-content: center;
}

.customer-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 14px 16px;
    background: transparent;
    color: var(--text);
    text-align: start;
    font: inherit;
    font-size: 1rem;
}

.customer-result-name {
    font-weight: 800;
}

.customer-result-phone {
    color: var(--muted);
    direction: ltr;
    font-size: 0.9rem;
    opacity: 0.8;
}

.customer-result:hover,
.customer-result:focus-visible {
    background: rgba(102, 163, 191, 0.22);
    color: var(--brand-strong);
    outline: 0;
}

.receipt-transaction-row,
.receipt-optional-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.15fr) minmax(250px, 1fr) minmax(160px, 0.58fr);
    gap: 14px;
    align-items: end;
}

.choice-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rounding-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-button {
    position: relative;
    display: block;
    cursor: pointer;
}

.choice-button input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-button span {
    display: grid;
    place-items: center;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-strong);
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.choice-button input:checked + span,
.currency-button input:checked + span {
    border-color: var(--brand);
    background: var(--brand);
    color: #F2EFE7;
    box-shadow: 0 8px 18px rgba(51, 104, 160, 0.24);
}

.choice-button input:focus-visible + span,
.currency-button input:focus-visible + span {
    outline: 3px solid rgba(102, 163, 191, 0.55);
    outline-offset: 2px;
}

.choice-button:active span,
.currency-button:active span {
    transform: translateY(1px);
}

.receipt-extra-fields {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-strong);
    padding: 16px;
}

.receipt-optional-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.currency-button input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.currency-button span {
    display: inline-flex;
    align-items: center;
    min-height: 56px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-strong);
    color: var(--text);
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 800;
}

.exchange-card {
    max-width: 980px;
}

.posting-vault { color: var(--muted); font-size: 0.9rem; }
.exchange-header-actions { display: flex; align-items: center; gap: 8px; }
.exchange-branch-money { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }
.exchange-branch-money > div { display: flex; flex-wrap: wrap; gap: 8px; }
.exchange-branch-money span { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(102, 163, 191, 0.14); color: var(--brand-strong); font-weight: 800; }
.exchange-branch-money small { color: var(--muted); font-weight: 700; }
.backend-exchange-card { max-width: 1120px; }
.backend-exchange-card .exchange-form {
    grid-template-columns: 142px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "mode mode mode"
        "customer customer customer"
        "balance balance balance"
        "rounding exchanged received"
        "amount amount note";
    align-content: start;
    gap: 12px;
    direction: ltr;
}
.backend-exchange-card .exchange-form > * { min-width: 0; direction: rtl; }
.backend-exchange-card .customer-mode-field { grid-area: mode; }
.backend-exchange-card .customer-search-field { grid-area: customer; }
.backend-exchange-card #customer-balance-preview { grid-area: balance; }
.backend-exchange-card .rounding-field { grid-area: rounding; }
.backend-exchange-card .exchange-to-field { grid-area: exchanged; }
.backend-exchange-card .exchange-from-field { grid-area: received; }
.backend-exchange-card .exchange-amount-row { grid-area: amount; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; direction: rtl; }
.backend-exchange-card .field.full { grid-area: note; }
.backend-exchange-card .exchange-from-field,
.backend-exchange-card .exchange-to-field,
.backend-exchange-card .rounding-field { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-strong); align-self: start; }
.backend-exchange-card .currency-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.backend-exchange-card .currency-button span { display: grid; place-items: center; width: 100%; min-height: 52px; padding: 8px; }
.backend-exchange-card .rounding-field .choice-buttons { grid-template-columns: 1fr; gap: 8px; }
.backend-exchange-card .rounding-field .choice-button span { min-height: 44px; padding: 6px; }
.backend-exchange-card .rounding-field .choice-button b { font-size: 1.45rem; line-height: 1; }
.backend-exchange-card .exchange-preview { min-height: 56px; padding: 9px 12px; }
.backend-exchange-card .exchange-preview strong { font-size: 1.12rem; }
.backend-exchange-card .exchange-preview small { font-size: 0.78rem; }
.backend-exchange-card .field.full > label { display: none; }
.backend-exchange-card textarea { min-height: 56px; height: 100%; resize: none; }
.dashboard-cashier-vault-list { display: grid; gap: 9px; }
.dashboard-reserve-vault {
    display: block;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease;
}
.dashboard-reserve-vault:hover {
    border-color: var(--brand);
    background: rgba(51, 104, 160, 0.05);
}
.dashboard-currency-strip { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.dashboard-currency-chip { display: inline-flex; align-items: baseline; gap: 5px; min-width: 94px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-strong); }
.dashboard-currency-chip small { color: var(--muted); font-size: 0.7rem; font-weight: 800; }
.dashboard-currency-chip strong { color: var(--brand-strong); font-size: 0.86rem; white-space: nowrap; }
.dashboard-cashier-vault {
    display: grid;
    grid-template-columns: auto minmax(120px, 0.9fr) minmax(100px, 0.8fr) minmax(0, 1.5fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-strong);
    color: var(--text);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.dashboard-cashier-vault:hover {
    border-color: var(--brand);
    box-shadow: 0 8px 18px rgba(35, 86, 132, 0.12);
    transform: translateY(-1px);
}
.dashboard-cashier-vault span,
.dashboard-cashier-vault small { color: var(--muted); }
.dashboard-cashier-vault.is-inactive { opacity: 0.78; }
.drawer-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d44949;
    box-shadow: 0 0 0 4px rgba(212, 73, 73, 0.12);
}
.dashboard-cashier-vault.is-active .drawer-status-dot {
    background: #1dab6a;
    box-shadow: 0 0 0 4px rgba(29, 171, 106, 0.12);
}

.exchange-amount-row {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr);
}

.exchange-preview {
    min-height: 92px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-strong);
}

.exchange-preview {
    display: grid;
    align-content: center;
    gap: 4px;
}

.exchange-preview strong {
    color: var(--brand-strong);
    font-size: 1.5rem;
}

.exchange-preview small {
    color: var(--muted);
}


.dashboard-hero {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #3368A0, #66A3BF);
    background-size: 170% 170%;
    animation: ambient-gradient-drift 30s ease-in-out infinite;
    color: #F2EFE7;
    box-shadow: var(--shadow);
}

.dashboard-compact .dashboard-hero {
    padding: 16px 18px;
}

.dashboard-summary-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(155px, 0.7fr) minmax(0, 2.3fr);
    align-items: stretch;
    gap: 12px;
}

.dashboard-summary-row .card-header {
    display: grid;
    align-content: center;
    margin: 0;
}

.dashboard-summary-row .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-compact .card-header,
.dashboard-balance-grid .card-header {
    margin-bottom: 12px;
}

.dashboard-compact .stat-tile,
.dashboard-balance-grid .stat-tile {
    padding: 10px 12px;
}

.dashboard-summary-row .daily-currency-grid {
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
    gap: 6px;
    margin-top: 6px;
}

.dashboard-summary-row .daily-currency-tile,
.dashboard-summary-row .daily-currency-empty {
    min-height: 42px;
    padding: 6px 8px;
}

.dashboard-balance-grid .card {
    padding: 18px;
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -85px;
    bottom: -160px;
    border: 42px solid rgba(200, 223, 219, 0.42);
    border-radius: 50%;
    animation: dashboard-ornament-drift 36s ease-in-out infinite;
}

@keyframes ambient-gradient-drift {
    0%, 100% { background-position: 0% 45%; }
    50% { background-position: 100% 55%; }
}

@keyframes auth-orbit-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-24deg); }
    50% { transform: translate3d(-18px, 12px, 0) rotate(-16deg); }
}

@keyframes dashboard-ornament-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(-18px, -12px, 0) rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-story,
    .auth-story-orbit,
    .dashboard-hero,
    .dashboard-hero::after { animation: none; }
}

.dashboard-hero p,
.dashboard-hero .stat-label {
    color: rgba(242, 239, 231, 0.78);
}

.dashboard-hero .stat-tile {
    background: rgba(200, 223, 219, 0.18);
    border-color: rgba(200, 223, 219, 0.28);
}

.dashboard-hero .stat-value {
    color: #F2EFE7;
}

.daily-currency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.daily-currency-tile,
.daily-currency-empty {
    display: grid;
    gap: 4px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid rgba(200, 223, 219, 0.28);
    border-radius: 12px;
    background: rgba(242, 239, 231, 0.1);
}

.daily-currency-tile span {
    color: rgba(242, 239, 231, 0.72);
    font-size: 0.78rem;
}

.daily-currency-tile strong,
.daily-currency-empty {
    color: #F2EFE7;
    font-size: 1rem;
}

.management-table .button {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 11px;
}

.vault-movement-card {
    padding: 18px;
}

.vault-movement-card .card-header {
    margin-bottom: 10px;
}

.vault-movement-form {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.vault-movement-form .field {
    gap: 4px;
}

.vault-movement-form .field > label {
    font-size: 0.78rem;
}

.vault-movement-form .movement-type-field .choice-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.vault-movement-form .choice-button span {
    min-height: 42px;
    padding: 7px 9px;
}

.vault-movement-form .movement-currency-field .currency-buttons {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 6px;
}

.vault-movement-form .movement-currency-field .currency-button span {
    min-height: 40px;
    padding: 6px 8px;
}

.vault-movement-form .movement-note {
    grid-column: span 5;
}

.vault-movement-form .movement-note textarea {
    min-height: 42px;
    height: 42px;
    resize: none;
}

.vault-movement-form .movement-submit {
    grid-column: span 1;
    align-self: end;
}

.vault-movement-form .movement-submit button {
    min-height: 42px;
    padding: 7px 10px;
}

/* Provider float is deliberately visually distinct from physical cash vaults. */
.provider-balance-page { display: grid; gap: 16px; min-width: 0; }
.provider-balance-hero { overflow: visible; background: linear-gradient(125deg, rgba(40, 126, 113, 0.18), var(--surface) 46%, rgba(102, 163, 191, 0.18)); }
.provider-hero-header { align-items: center; margin-bottom: 10px; }
.provider-hero-header h2 { margin: 2px 0 0; color: var(--brand-strong); }
.eyebrow { display: block; color: var(--muted); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.09em; }
.provider-account-grid { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 1px 7px; scrollbar-width: thin; }
.provider-account-card { display: grid; flex: 0 0 142px; gap: 1px; min-width: 0; padding: 9px 10px; border: 1px solid rgba(40, 126, 113, 0.24); border-radius: 13px; background: rgba(255, 255, 255, 0.48); color: var(--text); text-align: start; box-shadow: none; }
.provider-account-card:hover, .provider-account-card.is-selected { transform: translateY(-1px); border-color: var(--brand); background: var(--surface-strong); box-shadow: 0 7px 16px rgba(25, 63, 92, 0.10); }
.provider-account-card.is-inactive { opacity: 0.55; filter: saturate(0.4); }
.provider-account-provider { overflow: hidden; color: #2d806f; font-size: 0.62rem; font-weight: 900; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.provider-account-card strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.provider-account-card small { color: var(--muted); font-size: 0.62rem; }
.provider-account-card b { margin-top: 4px; color: var(--brand-strong); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.provider-account-card b em { color: var(--muted); font-size: 0.68rem; font-style: normal; }
.provider-empty-state { display: grid; gap: 4px; padding: 18px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); }
.provider-empty-state strong { color: var(--brand-strong); }
.provider-operation-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: min(840px, 100%); margin-inline: auto; align-items: start; }
.provider-operation-card { position: relative; min-width: 0; overflow: visible; }
.provider-operation-card:has(.app-select-picker[open]), .provider-operation-card:has(.app-customer-picker:focus-within) { z-index: 60; }
.provider-operation-card .card-header { margin-bottom: 12px; }
.provider-operation-card .card-header h3 { margin: 1px 0 0; }
.provider-topup-launch-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.provider-topup-launch-card .card-header { margin: 0; }
.provider-add-account-trigger { display: grid; place-items: center; flex: 0 0 auto; width: 42px; min-height: 42px; padding: 0; border-radius: 13px; font-size: 1.7rem; line-height: 1; }
.provider-operation-launch { min-width: 180px; min-height: 44px; }
.provider-balance-dialog { width: min(600px, calc(100vw - 28px)); max-width: calc(100vw - 28px); max-height: calc(100dvh - 28px); box-sizing: border-box; padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 28px 80px rgba(20, 54, 86, 0.32); }
.provider-balance-dialog::backdrop { background: rgba(18, 42, 62, 0.48); backdrop-filter: blur(3px); }
.provider-balance-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(115deg, var(--surface-strong), var(--surface)); }
.provider-balance-dialog-head h2 { margin: 0; color: var(--brand-strong); font-size: 1.08rem; }
.provider-dialog-form { padding: 16px 18px 18px; }
.provider-operation-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.provider-operation-form .field { min-width: 0; gap: 5px; }
.provider-operation-form .field label { font-size: 0.78rem; }
.provider-operation-form input, .provider-operation-form textarea { min-height: 42px; padding: 9px 11px; }
.provider-operation-form textarea { min-height: 58px; resize: vertical; }
.provider-operation-form .app-select-picker, .provider-operation-form .app-customer-picker { z-index: 70; }
.provider-operation-form .app-select-menu, .provider-operation-form .app-customer-picker-menu { z-index: 71; }
.provider-operation-form .app-select-picker summary, .provider-operation-form .app-customer-picker > input { min-height: 42px; padding: 9px 11px; border-radius: 12px; }
.provider-mode-field .choice-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.provider-mode-field .choice-button span { min-height: 42px; padding: 7px 9px; font-size: 0.8rem; line-height: 1.25; }
.provider-sale-customer-field .customer-search-field { position: relative; }
.provider-sale-payment-row { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 8px; }
.provider-sale-payment-row .choice-button span { min-height: 42px; padding: 7px 8px; font-size: 0.72rem; line-height: 1.2; text-align: center; }
.pos-provider-body .provider-operation-form .customer-search-field > input { min-height: 42px; padding: 8px 11px; font-size: 0.98rem; }
.pos-provider-body .provider-sale-customer-field .customer-results { z-index: 90; }
.provider-sale-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 10px; border: 1px solid rgba(40, 126, 113, 0.22); border-radius: 14px; background: rgba(40, 126, 113, 0.09); }
.provider-sale-preview span { display: grid; gap: 3px; min-width: 0; color: var(--muted); font-size: 0.69rem; }
.provider-sale-preview b { overflow: hidden; color: var(--brand-strong); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.provider-topup-explainer { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 11px; border-radius: 12px; background: rgba(102, 163, 191, 0.12); color: var(--muted); font-size: 0.76rem; line-height: 1.4; }
.provider-topup-explainer strong { display: inline-grid; flex: 0 0 auto; place-items: center; min-width: 36px; min-height: 26px; padding: 3px 6px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 0.68rem; }
.provider-form-warning { margin: 0; padding: 12px; border-radius: 12px; background: rgba(220, 138, 20, 0.1); color: #704b0a; font-weight: 700; }
.provider-history-card { position: relative; min-width: 0; }
.provider-history-card .card-header { margin-bottom: 12px; }
.provider-history-table { min-width: 700px; }
.provider-history-table td:first-child { min-width: 180px; }
.provider-history-table td:first-child strong, .provider-history-table td:first-child small { display: block; }
.provider-history-table td:first-child small, .provider-history-table td small { color: var(--muted); font-size: 0.75rem; }
.provider-history-amount { font-weight: 900; font-variant-numeric: tabular-nums; }
.provider-history-amount.is-in { color: #17834f; }
.provider-history-amount.is-out { color: #b44949; }
.compact-provider-cancel { min-height: 32px; padding: 5px 8px; border-radius: 9px; font-size: 0.74rem; }

.inline-form {
    display: inline;
}

.icon-actions {
    white-space: nowrap;
}

.icon-button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-strong);
    color: var(--brand-strong);
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

.icon-button:hover {
    background: rgba(102, 163, 191, 0.22);
}

.icon-button.danger {
    color: #9b423c;
}

.print-action {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.15rem;
}

button.print-action {
    display: inline-grid;
    place-items: center;
}

.statement-sheet {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.statement-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.statement-sheet-header h1,
.statement-sheet-header p,
.statement-balance-summary h2 {
    margin: 0;
}

.statement-sheet-header p {
    margin-top: 5px;
    color: var(--muted);
}

.statement-company-block {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.statement-company-logo {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 62px;
    height: 62px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-strong);
}

.statement-company-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.statement-customer-meta {
    display: grid;
    gap: 3px;
    text-align: end;
    color: var(--muted);
    font-size: 0.92rem;
}

.statement-customer-meta strong {
    color: var(--text);
    font-size: 1rem;
}

.statement-report-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 16px 0 2px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--line);
}

.statement-report-info > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--surface-strong);
}

.statement-report-info span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.statement-report-info strong {
    overflow: hidden;
    color: var(--brand-strong);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.statement-balance-summary {
    padding: 18px 0;
}

.statement-balance-summary h2 {
    margin-bottom: 12px;
    font-size: 1rem;
}

.statement-balance-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.statement-balance-grid > div {
    display: grid;
    gap: 3px;
    min-width: 145px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-strong);
}

.statement-balance-grid span {
    color: var(--muted);
    font-size: 0.8rem;
}

.statement-print-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.statement-print-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.86rem;
}

.statement-print-table th,
.statement-print-table td {
    padding: 8px 9px;
    border: 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    text-align: start;
}

.statement-print-table th:not(:last-child),
.statement-print-table td:not(:last-child) {
    border-inline-end: 1px solid var(--line);
}

.statement-print-table th {
    background: rgba(102, 163, 191, 0.18);
    color: var(--brand-strong);
}

.statement-print-table th:nth-child(1) { width: 15%; }
.statement-print-table th:nth-child(2) { width: 8%; }
.statement-print-table th:nth-child(3) { width: 12%; }
.statement-print-table th:nth-child(4) { width: 21%; }
.statement-print-table th:nth-child(5) { width: 12%; }
.statement-print-table th:nth-child(6) { width: 22%; }
.statement-print-table th:nth-child(7) { width: 10%; }
.statement-date-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.statement-note-cell { overflow-wrap: anywhere; }

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .main-nav,
html[data-theme="dark"] .card,
html[data-theme="dark"] .flash,
html[data-theme="dark"] table,
html[data-theme="dark"] .receipt-sheet {
    background: var(--surface);
}

html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .language-switcher a,
html[data-theme="dark"] .radio-chip,
html[data-theme="dark"] .checkbox-chip {
    background: var(--surface-strong);
    color: var(--text);
}

html[data-theme="dark"] th {
    background: rgba(102, 163, 191, 0.24);
}

.pos-body {
    min-height: 100dvh;
    overflow-x: hidden;
    background: radial-gradient(circle at 8% 5%, rgba(102, 163, 191, 0.26), transparent 28%), linear-gradient(145deg, var(--bg), var(--bg-strong));
}

.pos-receipt-body {
    min-height: 100dvh;
    padding: 18px;
    background: radial-gradient(circle at 8% 5%, rgba(102, 163, 191, 0.26), transparent 28%), linear-gradient(145deg, var(--bg), var(--bg-strong));
}

.pos-receipt-body .print-actions,
.pos-receipt-body .receipt-sheet {
    width: min(720px, 100%);
    margin-inline: auto;
}

.pos-shell { width: min(1180px, 100%); min-height: 100dvh; margin: 0 auto; padding: 8px 12px 12px; }

.pos-header, .pos-drawer-summary, .pos-card, .pos-close-drawer {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}

.pos-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 14px; }
.pos-header .brand-mark { width: 42px; height: 42px; border-radius: 13px; }
.pos-header .brand-title { font-size: clamp(1.55rem, 3vw, 2.15rem); }
.pos-header .brand-subtitle { margin: 1px 0 0; font-size: 0.9rem; }
.pos-header .logout-link { min-height: 36px; padding: 7px 13px; }
.pos-card { width: min(800px, 100%); margin: 36px auto; padding: 30px; }
.pos-open-card .card-header { margin-bottom: 18px; }
.drawer-choice-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.drawer-choice { cursor: pointer; }
.drawer-choice input { position: absolute; opacity: 0; pointer-events: none; }
.drawer-choice span { display: grid; gap: 3px; min-height: 68px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); transition: 160ms ease; }
.drawer-choice small { color: var(--muted); }
.drawer-choice input:checked + span { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 13%, var(--surface)); box-shadow: inset 0 0 0 1px var(--brand); }
.pos-debug { margin: 18px auto 0; width: min(800px, 100%); padding: 14px 16px; border: 1px solid #d6aa55; border-radius: 14px; background: #fff8e8; color: #62420e; font-size: 0.85rem; }
.pos-debug p { margin: 7px 0 12px; }
.pos-debug table { width: 100%; border-collapse: collapse; }
.pos-debug th, .pos-debug td { padding: 7px; border-top: 1px solid #edd9a8; text-align: start; }
.pos-status-card { text-align: center; }
.pos-status-card h2, .pos-status-card p { margin: 0 0 10px; }
.pos-drawer-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; margin: 0; padding: 12px 18px; }
.pos-drawer-session { display: grid; gap: 4px; min-width: 0; }
.pos-drawer-summary span, .pos-drawer-summary small { color: var(--muted); }
.pos-session-context { font-size: 0.78rem; }
.pos-branch { margin: 3px 0 0; color: var(--muted); font-size: 0.88rem; }
.pos-drawer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.pos-balance-list { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(128px, 1fr); width: 100%; gap: 6px; overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: 1px; direction: ltr; scrollbar-width: thin; }
.pos-balance-list > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-strong); }
.pos-balance-list small { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.pos-balance-list strong { min-width: 0; overflow: visible; font-size: clamp(0.78rem, 1.35vw, 0.96rem); font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.live-indicator { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 8px; padding: 4px 8px; border-radius: 999px; background: #e6f6eb; color: #157238 !important; font-size: 0.72rem; font-weight: 800; vertical-align: middle; }
.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #23a559; box-shadow: 0 0 0 3px rgba(35, 165, 89, 0.14); }
.pos-close-session { flex: 0 0 auto; }
.pos-close-session button { min-height: 40px; padding: 8px 14px; }
.pos-print-session { display: grid; place-items: center; flex: 0 0 auto; width: 42px; min-height: 40px; padding: 0; border-radius: 12px; }
.pos-rate-button { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; font-size: 0.84rem; }
.pos-transfer-button { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; font-size: 0.84rem; }
.pos-pending-transfers { display: grid; gap: 8px; margin: 10px 0; padding: 10px 14px; border: 1px solid #e3bb67; border-radius: 14px; background: #fff8e8; color: #704b0a; }
.pos-pending-transfers form { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pos-pending-transfer-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pos-pending-transfer-row > span { flex: 1 1 220px; }
.pos-pending-transfer-row form { display: block; }
.pos-pending-transfers span { font-size: 0.84rem; font-weight: 700; }
.pos-pending-transfers button { min-height: 34px; padding: 6px 10px; font-size: 0.78rem; }
.compact-transfer-card { margin-top: 16px; }
.dashboard-pending-transfers { margin-top: 16px; }
.dashboard-transfer-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; }
.dashboard-transfer-item { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #e3bb67; border-radius: 14px; background: #fff8e8; color: #704b0a; text-decoration: none; }
.dashboard-transfer-item span { font-weight: 900; }
.dashboard-transfer-item small { color: #8c681f; }
.pnl-filter-card { position: relative; z-index: 20; display: grid; gap: 9px; overflow: visible; }
.pnl-filter-card .app-select-picker { z-index: 30; }
.pnl-filter-card .app-select-menu { z-index: 31; }
.pnl-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.pnl-periods .button { min-height: 34px; padding: 6px 10px; font-size: 0.82rem; }
.pnl-periods .button.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.pnl-currency-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pnl-currency-buttons .currency-button { text-decoration: none; }
.pnl-currency-buttons .currency-button.is-selected span { border-color: var(--brand); background: var(--brand); color: #fff; }
.pnl-summary-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 16px 0; }
.pnl-summary-grid .stat-tile.is-negative { border-color: #d8847e; background: #fff1ef; }
.pnl-filter-card,
.pnl-entries-card { min-width: 0; max-width: 100%; }
.pnl-report-filters { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.pnl-report-filters .field { min-width: 0; }
.pnl-report-filters label { font-size: 0.75rem; }
.pnl-report-filters input,
.pnl-report-filters select { min-width: 0; min-height: 36px; padding: 6px 9px; font-size: 0.84rem; }
.pnl-filter-actions { align-self: end; }
.pnl-filter-actions > *:first-child { min-width: 72px; }
.pnl-entries-card .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.pnl-ledger-table { min-width: 980px; }
.pnl-ledger-table th, .pnl-ledger-table td { white-space: nowrap; }
.pnl-chart-card { margin-bottom: 16px; }
.pnl-chart { display: flex; align-items: end; gap: 8px; min-height: 230px; padding: 14px 6px 0; overflow-x: auto; border-bottom: 1px solid var(--line); }
.pnl-chart-group { display: grid; flex: 1 0 46px; gap: 7px; min-width: 46px; text-align: center; }
.pnl-bars { display: flex; align-items: end; justify-content: center; gap: 4px; height: 184px; }
.pnl-bars i { display: block; width: 12px; min-height: 4px; border-radius: 6px 6px 0 0; }
.pnl-income-bar { background: #2c9b62; }
.pnl-expense-bar { background: #c65b55; }
.pnl-chart-group small { overflow: hidden; color: var(--muted); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.pnl-legend { display: flex; gap: 16px; margin-top: 10px; color: var(--muted); font-size: 0.82rem; }
.pnl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pnl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.pos-handover { margin: 10px 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pos-handover summary { cursor: pointer; color: var(--brand-strong); font-size: 0.84rem; font-weight: 800; }
.pos-handover form { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.pos-handover input[type="number"] { width: 132px; min-height: 36px; }
.pos-handover label { cursor: pointer; }
.pos-handover label input { position: absolute; opacity: 0; pointer-events: none; }
.pos-handover label span { display: inline-grid; place-items: center; min-width: 42px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-strong); color: var(--brand-strong); font-size: 0.78rem; font-weight: 800; }
.pos-handover label input:checked + span { border-color: var(--brand); background: var(--brand); color: #fff; }
.pos-handover button { min-height: 36px; padding: 6px 10px; font-size: 0.78rem; }
.pos-history-link { display: inline-grid; place-items: center; flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); color: var(--brand-strong); font-size: 0.84rem; font-weight: 800; text-decoration: none; }
.pos-provider-balance-link { display: inline-grid; place-items: center; flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border: 1px solid rgba(40, 126, 113, 0.35); border-radius: 12px; background: rgba(40, 126, 113, 0.12); color: var(--brand-strong); font-size: 0.84rem; font-weight: 800; text-decoration: none; }
.pos-provider-balance-link:hover { background: var(--brand); color: #fff; }
.pos-rate-dialog { width: min(760px, calc(100vw - 28px)); height: min(720px, calc(100dvh - 28px)); padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: var(--surface); box-shadow: 0 28px 80px rgba(20, 54, 86, 0.32); }
.pos-rate-dialog::backdrop { background: rgba(18, 42, 62, 0.48); backdrop-filter: blur(3px); }
.pos-rate-dialog iframe { display: block; width: 100%; height: 100%; border: 0; }
.pos-provider-dialog { width: min(980px, calc(100vw - 28px)); height: min(800px, calc(100dvh - 28px)); }
.pos-provider-body { min-width: 0; background: var(--bg); }
.pos-provider-shell { min-height: 100dvh; padding: 12px; }
.pos-provider-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1240px; margin: 0 auto 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pos-provider-toolbar > div { display: grid; gap: 2px; }
.pos-provider-toolbar span { color: var(--muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; }
.pos-provider-toolbar strong { color: var(--brand-strong); font-size: 0.96rem; }
.pos-provider-shell .provider-balance-page { max-width: 1240px; margin: 0 auto; }
.pos-logout-dialog { width: min(460px, calc(100vw - 28px)); padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 28px 80px rgba(20, 54, 86, 0.32); }
.pos-logout-dialog::backdrop { background: rgba(18, 42, 62, 0.48); backdrop-filter: blur(3px); }
.pos-logout-dialog h2, .pos-logout-dialog p { margin: 0; }
.pos-logout-dialog p { margin-top: 8px; color: var(--muted); line-height: 1.6; }
.pos-logout-actions { display: grid; gap: 9px; margin-top: 20px; }
.pos-logout-actions form, .pos-logout-actions a, .pos-logout-actions button { width: 100%; }
.pos-logout-actions .secondary { display: grid; place-items: center; min-height: 44px; text-align: center; }
.pos-count-dialog { width: min(620px, calc(100vw - 28px)); }
.pos-count-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pos-count-dialog-head p { margin: 3px 0 0; white-space: nowrap; }
.pos-close-count-form { display: grid; gap: 14px; margin-top: 16px; }
.pos-count-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pos-count-field { display: grid; gap: 4px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }
.pos-count-field > span { color: var(--brand-strong); font-weight: 900; }
.pos-count-field small { color: var(--muted); font-size: 0.72rem; }
.pos-count-field input, .pos-close-count-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.pos-count-field input { min-height: 42px; padding: 8px 9px; font-weight: 800; }
.pos-close-count-form textarea { min-height: 64px; padding: 9px 10px; resize: vertical; }
.drawer-close-review-list { display: grid; gap: 12px; }
.drawer-close-review { border: 1px solid var(--line); border-radius: 16px; background: var(--surface-strong); overflow: hidden; }
.drawer-close-review summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; cursor: pointer; color: var(--brand-strong); font-weight: 900; list-style: none; }
.drawer-close-review summary::-webkit-details-marker { display: none; }
.drawer-close-review summary small { color: var(--muted); font-weight: 700; }
.drawer-close-section, .drawer-close-form { display: grid; gap: 10px; padding: 13px 15px; border-top: 1px solid var(--line); }
.drawer-close-section > strong, .drawer-close-form > strong { color: var(--muted); font-size: 0.82rem; }
.drawer-count-display, .drawer-count-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.drawer-count-display span, .drawer-count-inputs label { display: grid; gap: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.drawer-count-display small, .drawer-count-inputs span { color: var(--muted); font-size: 0.72rem; font-weight: 800; }
.drawer-count-display b { color: var(--brand-strong); font-size: 0.95rem; }
.drawer-count-inputs input, .drawer-close-form textarea { width: 100%; min-height: 40px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-strong); color: var(--text); font: inherit; font-weight: 800; }
.drawer-close-form textarea { min-height: 62px; resize: vertical; font-weight: 400; }
.drawer-manager-difference { display: grid; gap: 7px; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; background: color-mix(in srgb, var(--brand-soft) 38%, var(--surface)); }
.drawer-manager-difference > strong, .drawer-close-note > span { color: var(--muted); font-size: 0.76rem; font-weight: 800; }
.drawer-manager-difference b.is-positive { color: var(--success); }
.drawer-manager-difference b.is-negative { color: var(--danger); }
.drawer-close-note { display: grid; gap: 5px; }
.cash-count-difference.is-positive { color: var(--success); }
.cash-count-difference.is-negative { color: var(--danger); }
.cash-count-report-table td:last-child { min-width: 220px; white-space: pre-line; }
.cash-count-report-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 12px; }
.cash-count-report-pagination span { min-width: 72px; text-align: center; color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.audit-filter-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 9px; margin: 4px 0 16px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-strong); }
.audit-filter-bar label { display: grid; gap: 5px; min-width: 0; }
.audit-filter-bar label > span { color: var(--muted); font-size: 0.74rem; font-weight: 800; }
.audit-filter-bar input, .audit-filter-bar select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.audit-filter-bar button { min-height: 40px; padding: 8px 15px; }
.audit-log-card .card-header { margin-bottom: 12px; }
.audit-log-card .card-header h3 { margin: 0; color: var(--brand-strong); }
.audit-log-card .card-header p { margin: 5px 0 0; color: var(--muted); }
.audit-log-table td:nth-child(1) { width: 150px; font-variant-numeric: tabular-nums; }
.audit-log-table td:nth-child(2) { width: 140px; font-weight: 800; }
.audit-log-table td:nth-child(3) { width: 210px; color: var(--brand-strong); font-weight: 800; }
.audit-log-table td small { color: var(--muted); font-size: 0.8rem; line-height: 1.55; }
.audit-log-card:has(.app-select-picker[open]) { position: relative; z-index: 40; }
.audit-log-card .app-select-menu { z-index: 41; }

@media (max-width: 680px) {
    .valuation-rate-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .audit-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
    .audit-filter-bar button { grid-column: 1 / -1; width: 100%; }
    .audit-log-card { padding: 13px; }
    .audit-log-table { overflow: visible; border: 0; border-radius: 0; }
    .audit-log-table table,
    .audit-log-table tbody,
    .audit-log-table tr,
    .audit-log-table td { display: block; width: 100%; }
    .audit-log-table thead { display: none; }
    .audit-log-table tr { margin-top: 9px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }
    .audit-log-table td { display: grid; grid-template-columns: minmax(86px, 0.8fr) minmax(0, 1.5fr); align-items: start; gap: 9px; padding: 7px 0; border: 0; border-bottom: 1px solid rgba(51, 104, 160, 0.12); text-align: end; overflow-wrap: anywhere; }
    .audit-log-table td:last-child { border-bottom: 0; }
    .audit-log-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.74rem; font-weight: 800; text-align: start; }
    .audit-log-table td[colspan] { display: block; text-align: center; }
    .audit-log-table td[colspan]::before { display: none; }
}

.pos-rate-editor-body { min-height: 100dvh; background: var(--bg); }
.pos-rate-editor { padding: 20px; }
.pos-rate-editor header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.pos-rate-editor h2, .pos-rate-editor p { margin: 0; }
.pos-rate-editor p { margin-top: 4px; color: var(--muted); }
.pos-rate-list { display: grid; gap: 10px; }
.pos-rate-row { display: grid; grid-template-columns: minmax(100px, 0.75fr) 1fr 1fr; align-items: end; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.pos-rate-row strong { padding-bottom: 11px; color: var(--brand-strong); }
.pos-rate-row label { display: grid; gap: 5px; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.pos-rate-row input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-strong); color: var(--ink); font: inherit; }
.pos-transfer-editor { max-width: 680px; }
.pos-transfer-form { display: grid; gap: 14px; }
.pos-transfer-form > label { display: grid; gap: 6px; color: var(--muted); font-size: 0.86rem; font-weight: 800; }
.pos-transfer-form select,
.pos-transfer-form input,
.pos-transfer-form textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); color: var(--ink); font: inherit; }
.pos-transfer-form textarea { min-height: 82px; resize: vertical; }
.pos-transfer-lines { display: grid; gap: 9px; }
.pos-transfer-lines > strong { color: var(--muted); font-size: 0.86rem; }
.pos-transfer-lines > div, .transfer-lines { display: grid; gap: 8px; }
.pos-transfer-line, .transfer-line { display: grid; grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.transfer-line { grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.55fr) auto; }
.transfer-currency-options { display: flex; flex-wrap: wrap; gap: 6px; }
.transfer-currency-options .currency-button { min-width: 52px; }
.transfer-currency-options .currency-button span { min-height: 36px; padding: 5px 9px; font-size: 0.78rem; }
.transfer-currency-picker { position: relative; min-width: 0; z-index: 5; }
.transfer-currency-picker summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); color: var(--brand-strong); font-weight: 800; cursor: pointer; list-style: none; }
.transfer-currency-picker summary::-webkit-details-marker { display: none; }
.transfer-currency-picker summary::after { content: ""; width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 160ms ease; }
.transfer-currency-picker[open] summary { border-color: var(--accent); outline: 3px solid rgba(102, 163, 191, 0.18); }
.transfer-currency-picker[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.transfer-currency-menu { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); display: grid; min-width: 100%; width: max-content; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 16px 30px rgba(25, 63, 92, 0.2); }
.vault-movement-card { position: relative; overflow: visible; }
.vault-movement-card:has(.transfer-currency-picker[open]) { z-index: 60; }
.vault-movement-card .transfer-currency-picker[open] { z-index: 70; }
.vault-movement-card .transfer-currency-menu { z-index: 71; }
.vault-movement-form .field { position: relative; }
.vault-movement-form .field:has(.app-select-picker[open]) { z-index: 80; }
.vault-movement-form .app-select-picker[open] { z-index: 81; }
.vault-movement-form .app-select-menu { z-index: 82; }
.transfer-currency-option { min-height: 36px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-weight: 800; text-align: start; cursor: pointer; }
.transfer-currency-option:hover { background: rgba(102, 163, 191, 0.18); color: var(--brand-strong); }
.pos-transfer-line .icon-button, .transfer-line .icon-button { min-width: 40px; min-height: 40px; }
.pos-transfer-lines .secondary, .transfer-lines-field .secondary { justify-self: start; min-height: 36px; padding: 6px 10px; font-size: 0.8rem; }
.transfer-lines-field { display: grid; gap: 9px; }
.transfer-line select, .transfer-line input { min-width: 0; }
.pos-transfer-currencies { display: grid; gap: 8px; }
.pos-transfer-currencies > strong { color: var(--muted); font-size: 0.86rem; }
.pos-transfer-currencies > div { display: flex; flex-wrap: wrap; gap: 8px; }
.pos-transfer-currencies label { cursor: pointer; }
.pos-transfer-currencies input { position: absolute; opacity: 0; pointer-events: none; }
.pos-transfer-currencies span { display: inline-grid; place-items: center; min-width: 58px; min-height: 42px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-strong); color: var(--brand-strong); font-weight: 800; }
.pos-transfer-currencies input:checked + span { border-color: var(--brand); background: var(--brand); color: #fff; }
.pos-empty-state { margin-top: 20px; padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; }
.pos-empty-state strong { display: block; color: var(--brand-strong); font-size: 1.05rem; }
.pos-empty-state p { max-width: 520px; margin: 9px auto 0; color: var(--muted); line-height: 1.7; }
.pos-transaction-list { display: grid; width: min(820px, 100%); gap: 10px; margin: 18px auto; }
.pos-transaction-item { display: grid; gap: 7px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.pos-transaction-item > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.pos-transaction-item p { margin: 0; font-weight: 700; }
.pos-transaction-item small { color: var(--muted); }
.pos-transaction-item.is-cancelled { opacity: 0.72; }
.pos-transaction-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.pos-transaction-actions form { margin: 0; }
.pos-exchange { height: clamp(520px, calc(100dvh - 185px), 700px); overflow: hidden; border-radius: var(--radius); }
.pos-exchange iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.pos-close-drawer { margin-top: 20px; padding: 18px 22px; }
.pos-close-drawer summary { cursor: pointer; color: var(--brand-strong); font-weight: 700; }
.pos-close-drawer form { margin-top: 18px; }

@media (max-width: 560px) {
    .pos-transfer-line, .transfer-line { grid-template-columns: minmax(84px, 0.7fr) minmax(0, 1fr) auto; gap: 6px; }
    .transfer-line { grid-template-columns: 1fr auto; }
    .transfer-currency-options { grid-column: 1 / -1; }
}

/* The embedded exchange workspace intentionally fits inside the POS viewport. */
.pos-exchange-body { min-height: 100%; background: transparent; }
.pos-exchange-body .exchange-card { height: 100%; max-width: none; padding: 10px 14px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.pos-exchange-body .exchange-card > .card-header { display: none; }
.pos-exchange-body .receipt-form {
    max-width: none;
    grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "mode mode mode"
        "customer customer customer"
        "rounding exchanged received"
        "amount amount note";
    align-content: start;
    gap: 9px 12px;
    direction: ltr;
}
.pos-exchange-body .receipt-form > * { min-width: 0; direction: rtl; }
.pos-exchange-body .customer-mode-field { grid-area: mode; }
.pos-exchange-body .customer-search-field { grid-area: customer; }
.pos-exchange-body .rounding-field { grid-area: rounding; }
.pos-exchange-body .exchange-to-field { grid-area: exchanged; }
.pos-exchange-body .exchange-from-field { grid-area: received; }
.pos-exchange-body .exchange-amount-row { grid-area: amount; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; direction: rtl; gap: 12px; }
.pos-exchange-body .receipt-form > .field.full { grid-area: note; }
.pos-exchange-body .exchange-from-field,
.pos-exchange-body .exchange-to-field { padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pos-exchange-body #customer-balance-preview { display: none !important; }
.pos-exchange-body .field > label { margin-bottom: 5px; font-size: 0.84rem; }
.pos-exchange-body .receipt-form select,
.pos-exchange-body .receipt-form input:not([type="radio"]),
.pos-exchange-body .receipt-form textarea { min-height: 42px; padding: 8px 11px; font-size: 0.98rem; }
.pos-exchange-body .quick-customer-trigger { width: 42px; min-width: 42px; height: 42px; min-height: 42px; border-radius: 12px; }
.pos-exchange-body .receipt-form textarea { min-height: 52px; }
.pos-exchange-body .receipt-form textarea { height: 100%; resize: none; }
.pos-exchange-body .exchange-preview { min-height: 52px; padding: 8px 11px; }
.pos-exchange-body .exchange-preview strong { font-size: 1.08rem; }
.pos-exchange-body .exchange-preview small { font-size: 0.76rem; }
.pos-exchange-body .choice-button,
.pos-exchange-body .currency-button span { min-height: 50px; padding: 8px; font-size: 1rem; font-weight: 800; }
.pos-exchange-body .currency-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
.pos-exchange-body .currency-button { min-width: 0; }
.pos-exchange-body .currency-button span { display: grid; place-items: center; width: 100%; }
.pos-exchange-body .rounding-field { padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pos-exchange-body .rounding-field .choice-buttons { grid-template-columns: 1fr; gap: 7px; }
.pos-exchange-body .rounding-field .choice-button span { min-height: 42px; padding: 5px; }
.pos-exchange-body .rounding-field .choice-button b { font-size: 1.45rem; line-height: 1; }
.pos-exchange-body .exchange-from-field,
.pos-exchange-body .exchange-to-field,
.pos-exchange-body .rounding-field { align-self: start; }
.pos-exchange-body .exchange-recommendation { display: none; }
.pos-exchange-body .print-action { min-height: 42px; }

@media print {
    @page { margin: 12mm; size: auto; }

    html,
    body {
        background: #fff !important;
        color: #111 !important;
        font-size: 10pt;
    }

    .topbar,
    .sidebar-nav,
    .app-footer,
    .print-actions,
    .print-hide,
    form,
    .flash {
        display: none !important;
    }

    .app-shell,
    .app-workspace,
    .main-content {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: inherit;
    }

    .page-hero {
        margin: 0 0 8mm;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .card,
    .receipt-sheet {
        break-inside: avoid;
        margin: 0 0 7mm;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none;
    }

    .grid,
    .stat-grid {
        gap: 5mm;
    }

    .table-wrap {
        overflow: visible;
    }

    table {
        width: 100%;
        font-size: 8.5pt;
        background: #fff !important;
    }

    th,
    td {
        padding: 5px 6px;
        color: #111 !important;
        background: #fff !important;
    }

    th {
        border-bottom: 1px solid #111;
    }

    .receipt-sheet {
        max-width: none;
    }

    .transaction-filter-card {
        display: none !important;
    }

    .transaction-report-card {
        margin: 0 !important;
    }

    .transaction-report-card table {
        font-size: 10px;
        table-layout: auto;
    }

    .transaction-report-card th,
    .transaction-report-card td {
        padding: 2px 3px;
        line-height: 1.2;
    }

    .transaction-report-card th:last-child,
    .transaction-report-card td:last-child {
        display: none;
    }

    @page { size: landscape; margin: 6mm; }

    .business-ledger-card { margin: 0 !important; }
    .business-ledger-header { margin-bottom: 3mm; }
    .business-ledger-header p { font-size: 7px; }
    .business-ledger-count { min-width: 0; min-height: 0; padding: 0; background: transparent; }
    .business-ledger-table-wrap { max-height: none; overflow: visible; }
    .business-ledger-table { min-width: 0; width: 100%; font-size: 7.5px; table-layout: auto; }
    .business-ledger-table th,
    .business-ledger-table td { padding: 2px 3px; line-height: 1.15; }
    .business-ledger-table th { font-size: 7px; }
    .business-ledger-table .tag,
    .business-ledger-table .ledger-scope { padding: 1px 3px; font-size: 6.5px; }
    .business-ledger-note { max-width: 35mm; }
}

@media print {
    body.receipt-print-page {
        background: #fff !important;
        color: #111 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.receipt-print-page .topbar,
    body.receipt-print-page .sidebar-nav,
    body.receipt-print-page .app-footer,
    body.receipt-print-page .page-hero,
    body.receipt-print-page .print-actions {
        display: none !important;
    }

    body.receipt-print-page .app-workspace,
    body.receipt-print-page .main-content {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.receipt-print-page .receipt-sheet {
        width: 132mm;
        max-width: 132mm;
        min-height: 190mm;
        margin: 0 auto;
        padding: 7mm;
        border: 1px solid #1f4f78;
        border-radius: 3mm;
        background: #fff !important;
        box-shadow: none;
        font-size: 9.5pt;
    }

    body.receipt-print-page .receipt-header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6mm;
        padding-bottom: 5mm;
    }

    body.receipt-print-page .receipt-header h2 {
        margin: 0 0 2mm;
        font-size: 16pt;
    }

    body.receipt-print-page .receipt-header p {
        margin: 1mm 0;
    }

    body.receipt-print-page .receipt-block {
        margin-top: 5mm;
    }

    body.receipt-print-page .receipt-line {
        padding: 3mm 0;
    }

    body.receipt-print-page .receipt-exchange-summary {
        gap: 4mm;
    }

    body.receipt-print-page .receipt-exchange-summary > div {
        padding: 4mm;
        border: 1px solid #aac2d4;
        border-radius: 2mm;
        background: #f7fbfc !important;
    }

    body.receipt-print-page .stat-tile {
        min-height: 25mm;
        padding: 4mm;
        border: 1px solid #aac2d4;
        border-radius: 2mm;
        background: #fff !important;
    }
}

@media print {
    body.customer-statement-print-page {
        background: #fff !important;
        color: #111 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.customer-statement-print-page .topbar,
    body.customer-statement-print-page .sidebar-nav,
    body.customer-statement-print-page .app-footer,
    body.customer-statement-print-page .page-hero,
    body.customer-statement-print-page .print-actions {
        display: none !important;
    }

    body.customer-statement-print-page .app-workspace,
    body.customer-statement-print-page .main-content {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.customer-statement-print-page .statement-sheet {
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #fff !important;
        box-shadow: none;
    }

    body.customer-statement-print-page .statement-sheet-header {
        padding-bottom: 5mm;
        border-color: #9ab1c2;
    }

    body.customer-statement-print-page .statement-balance-summary {
        padding: 5mm 0;
    }

    body.customer-statement-print-page .statement-company-logo {
        width: 15mm;
        height: 15mm;
        padding: 1.2mm;
        border-color: #9ab1c2;
        border-radius: 3mm;
        background: #f7fbfc !important;
    }

    body.customer-statement-print-page .statement-report-info {
        margin: 4mm 0 0;
        border-color: #b9cbd6;
        border-radius: 2.5mm;
        background: #b9cbd6 !important;
    }

    body.customer-statement-print-page .statement-report-info > div {
        padding: 2.6mm 3mm;
        background: #f7fbfc !important;
    }

    body.customer-statement-print-page .statement-balance-grid > div {
        min-width: 34mm;
        padding: 3mm;
        border-color: #9ab1c2;
        border-radius: 2mm;
        background: #f7fbfc !important;
    }

    body.customer-statement-print-page .statement-print-table {
        font-size: 7.5pt;
    }

    body.customer-statement-print-page .statement-print-table-wrap {
        overflow: visible;
        border-color: #b9cbd6;
        border-radius: 0;
    }

    body.customer-statement-print-page .statement-print-table th,
    body.customer-statement-print-page .statement-print-table td {
        padding: 2.2mm;
        border-color: #b9cbd6;
        background: #fff !important;
    }

    body.customer-statement-print-page .statement-print-table th {
        background: #e6f0f3 !important;
    }
}

@media (max-width: 980px) {
    .auth-card {
        grid-template-columns: 1fr;
    }

    .grid.cols-2,
    .grid.cols-3,
    .grid.cols-4 {
        grid-template-columns: 1fr;
    }

    .topbar,
    .page-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-tools {
        justify-content: flex-start;
    }

    .app-workspace {
        display: block;
    }

    .sidebar-nav {
        position: static;
        margin-bottom: 16px;
    }

    .main-nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 10px;
        border-radius: 16px;
        scrollbar-width: thin;
    }

    .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .nav-company-group { flex: 0 0 auto; position: static; }
    .nav-company-toggle { min-height: 40px; }
    .nav-company-control:checked + .nav-company-toggle { border-color: var(--accent); outline: 3px solid rgba(102, 163, 191, 0.2); }
    .navigation-stack > .nav-company-links { display: none; }
    .navigation-stack:has(.nav-company-control:checked) > .nav-company-links {
        display: flex;
        flex-wrap: nowrap;
        gap: 7px;
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }
    .navigation-stack > .nav-company-links .nav-link {
        flex: 0 0 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        scroll-snap-align: start;
    }
    .nav-company-link { padding: 10px 12px; border-radius: 10px; background: transparent; }

    .receipt-transaction-row,
    .receipt-optional-grid {
        grid-template-columns: 1fr;
    }

    .remittance-field-grid,
    .remittance-payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .remittance-balance-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .remittance-calculation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    html,
    body {
        overflow-x: hidden;
    }

    .app-shell {
        width: 100%;
        padding: 12px;
    }

    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 8px 10px;
        padding: 10px 12px;
        border-radius: 18px;
    }

    .brand-block { grid-column: 1; grid-row: 1; gap: 8px; min-width: 0; }

    .brand-mark { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; }

    .brand-title { font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .topbar-tools { display: contents; }
    .topbar-pills { display: none; }
    .theme-toggle { grid-column: 2; grid-row: 1; width: 42px; min-width: 42px; height: 26px; }
    .theme-toggle::after { width: 18px; height: 18px; }
    html[data-theme="dark"] .theme-toggle::after { transform: translateX(16px); }
    html[dir="rtl"][data-theme="dark"] .theme-toggle::after { transform: translateX(-16px); }
    .language-switcher { grid-column: 2 / 4; grid-row: 2; gap: 3px; padding: 3px; border-radius: 11px; }
    .language-switcher a.language-link { padding: 6px 8px; font-size: 0.78rem; }
    .logout-link { grid-column: 3; grid-row: 1; min-height: 34px; padding: 7px 10px; font-size: 0.78rem; }

    .pill,
    .meta-chip {
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .branch-picker {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }

    .branch-picker-menu { width: 100%; max-width: none; }

    .card {
        padding: 16px;
        border-radius: 20px;
    }

    .form-grid,
    .filters-grid,
    .exchange-amount-row,
    .receipt-exchange-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    input[type="date"], input[type="datetime-local"] { min-width: 0; max-width: 100%; }
    .backend-exchange-card .card-header h3 { font-size: 0.96rem; }
    .expense-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .expense-datetime-field { min-width: 0; }
    .expense-datetime-field input { min-width: 0; padding-inline: 8px !important; font-size: 0.82rem; }
    .receipt-logo { order: 0; width: 48px; height: 48px; }
    .receipt-sheet { padding: 18px; }

    .choice-buttons,
    .rounding-buttons {
        grid-template-columns: minmax(0, 1fr);
    }

    .remittance-rounding-field .rounding-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .receipt-mode-switch,
    .remittance-field-grid,
    .remittance-payment-grid,
    .receipt-remittance-grid,
    .remittance-calculation-summary,
    .remittance-balance-preview { grid-template-columns: 1fr; }
    .remittance-fields { padding: 14px; border-radius: 16px; }
    .remittance-queue-card .card-header { align-items: flex-start; }

    .currency-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .currency-button,
    .currency-button span {
        width: 100%;
    }

    .transaction-context {
        min-width: 0;
    }

    th,
    td {
        padding: 10px;
        font-size: 0.84rem;
    }

    .statement-sheet-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .statement-report-info {
        grid-template-columns: minmax(0, 1fr);
    }

    .statement-customer-meta {
        text-align: start;
    }

    .statement-balance-grid > div {
        min-width: 0;
        flex: 1 1 130px;
    }

    /* POS uses its own touch layout instead of compressing the desktop console. */
    .pos-shell { width: 100%; padding: 5px; }
    .pos-header { padding: 7px 10px; gap: 8px; }
    .pos-header .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
    .pos-header .brand-title { font-size: 1.18rem; white-space: nowrap; }
    .pos-header .logout-link { min-height: 34px; padding: 6px 10px; font-size: 0.84rem; }
    .pos-drawer-summary { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 9px 11px; }
    .pos-drawer-session { grid-column: 1; grid-row: 1; }
    .pos-balance-list { grid-column: 1; grid-row: 2; grid-auto-columns: minmax(124px, 1fr); gap: 5px; }
    .pos-balance-list > span { min-width: 0; padding: 7px 9px; }
    .pos-drawer-actions { grid-column: 1; grid-row: 3; justify-content: flex-start; overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: 1px; scrollbar-width: thin; }
    .pos-rate-button, .pos-provider-balance-link, .pos-close-session button { min-height: 38px; padding: 7px 10px; font-size: 0.78rem; }
    .pos-exchange { height: 620px; border-radius: 16px; }

    .pos-exchange-body .exchange-card { padding: 8px 9px; }
    .pos-exchange-body .receipt-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "mode mode"
            "customer customer"
            "exchanged received"
            "rounding rounding"
            "amount amount"
            "note note";
        gap: 8px;
    }
    .pos-exchange-body .exchange-from-field,
    .pos-exchange-body .exchange-to-field { padding: 8px; border-radius: 13px; }
    .pos-exchange-body .field > label { font-size: 0.76rem; }
    .pos-exchange-body .choice-button,
    .pos-exchange-body .currency-button span { min-height: 44px; padding: 6px 4px; font-size: 0.88rem; border-radius: 11px; }
    .pos-exchange-body .currency-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .pos-exchange-body .rounding-field { padding: 7px; }
    .pos-exchange-body .rounding-field .choice-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .pos-exchange-body .rounding-field .choice-button span { min-height: 40px; }
    .pos-exchange-body .exchange-amount-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pos-exchange-body .receipt-form input:not([type="radio"]),
    .pos-exchange-body .receipt-form textarea,
    .pos-exchange-body .exchange-preview { min-height: 46px; }
    .pos-exchange-body .quick-customer-trigger { width: 46px; min-width: 46px; height: 46px; min-height: 46px; }

    .backend-exchange-card .exchange-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "mode mode"
            "customer customer"
            "balance balance"
            "exchanged received"
            "rounding rounding"
            "amount amount"
            "note note";
        gap: 9px;
    }
    .backend-exchange-card .exchange-from-field,
    .backend-exchange-card .exchange-to-field { padding: 8px; border-radius: 13px; }
    .backend-exchange-card .currency-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .backend-exchange-card .currency-button span { min-height: 44px; padding: 6px 4px; font-size: 0.88rem; }
    .backend-exchange-card .rounding-field { padding: 7px; }
    .backend-exchange-card .rounding-field .choice-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .backend-exchange-card .exchange-amount-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .backend-exchange-card .exchange-header-actions .button { min-height: 34px; padding: 6px 8px; font-size: 0.72rem; white-space: nowrap; }

    .dashboard-compact,
    .dashboard-summary-row,
    .dashboard-summary-row .stat-grid,
    .grid.cols-2.dashboard-money-grid,
    .grid.cols-2.dashboard-money-grid > .card { min-width: 0; max-width: 100%; }

    .dashboard-compact .dashboard-hero { padding: 12px; min-width: 0; }

    .dashboard-summary-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .dashboard-summary-row .card-header { display: none; }

    .dashboard-summary-row .stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .dashboard-summary-row .stat-tile { min-width: 0; padding: 8px 6px; }
    .dashboard-summary-row .stat-label { font-size: 0.68rem; line-height: 1.15; }
    .dashboard-summary-row .stat-value { font-size: 1.05rem; }
    .dashboard-summary-row .daily-currency-grid { grid-template-columns: 1fr; gap: 4px; }
    .dashboard-summary-row .daily-currency-tile,
    .dashboard-summary-row .daily-currency-empty { min-height: 0; padding: 4px; }
    .dashboard-summary-row .daily-currency-tile span { display: none; }
    .dashboard-summary-row .daily-currency-tile strong { font-size: 0.72rem; overflow-wrap: anywhere; }

    .grid.cols-2.dashboard-money-grid { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 10px; }
    .dashboard-money-grid .card { padding: 13px; }
    .dashboard-money-grid .card-header { margin-bottom: 8px; }
    .dashboard-money-grid .card h3 { font-size: 1rem; }
    .dashboard-money-grid .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .dashboard-money-grid .stat-tile { min-width: 0; padding: 8px; }
    .dashboard-money-grid .stat-value { font-size: 0.92rem; overflow-wrap: anywhere; }
    .dashboard-currency-strip {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        direction: ltr;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: var(--accent) transparent;
        cursor: grab;
        padding: 2px 1px 7px;
    }
    .dashboard-currency-strip.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
    .dashboard-currency-strip::-webkit-scrollbar { height: 5px; }
    .dashboard-currency-strip::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--accent); }
    .dashboard-currency-chip { flex: 0 0 auto; min-width: 88px; padding: 6px 8px; scroll-snap-align: start; }
    .dashboard-currency-chip strong { font-size: 0.8rem; }

    .exchange-settings-page .card { padding: 14px; }
    .exchange-settings-page .card-header { margin-bottom: 10px; }
    .exchange-settings-page .card-header h3 { font-size: 1.05rem; }
    .exchange-settings-page .card-header p { font-size: 0.82rem; }
    .exchange-settings-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .exchange-settings-form .field.full { grid-column: 1 / -1; }
    .exchange-settings-form select,
    .exchange-settings-form input { min-width: 0; padding: 10px; }
    .valuation-rate-form input[type="date"],
    .transaction-filters input[type="date"],
    .pnl-report-filters input[type="date"],
    .audit-filter-bar input[type="date"] { min-inline-size: 0; width: 100%; box-sizing: border-box; padding-inline: 5px; font-size: 0.72rem; }

    .exchange-settings-page .table-wrap { overflow: visible; border: 0; border-radius: 0; }
    .exchange-rates-desktop { display: none; }
    .exchange-rates-mobile { display: grid; gap: 8px; }
    .exchange-rates-mobile article { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-strong); }
    .exchange-rates-mobile article > div { display: grid; gap: 2px; padding: 7px 8px; border-radius: 9px; background: var(--surface); }
    .exchange-rates-mobile small { color: var(--muted); font-size: 0.67rem; font-weight: 800; }
    .exchange-rates-mobile strong { color: var(--brand-strong); font-size: 0.9rem; }
    .exchange-rates-mobile .button { grid-column: 1 / -1; width: 100%; min-height: 34px; padding: 6px 10px; }
    .exchange-settings-page table,
    .exchange-settings-page tbody,
    .exchange-settings-page tr,
    .exchange-settings-page td { display: block; width: 100%; }
    .exchange-settings-page thead { display: none; }
    .exchange-settings-page tr {
        margin-top: 8px;
        padding: 5px 10px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface-strong);
    }
    .exchange-settings-page td {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid rgba(51, 104, 160, 0.12);
        text-align: end;
        overflow-wrap: anywhere;
    }
    .exchange-settings-page td:last-child { border-bottom: 0; }
    .exchange-settings-page td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.76rem;
        font-weight: 700;
        text-align: start;
    }
    .exchange-settings-page td .button { width: auto; min-height: 36px; padding: 7px 11px; }
    .exchange-rate-history-card { padding: 10px 14px !important; }
    .exchange-rate-history-details > summary { min-height: 36px; }
    .exchange-rate-history-details[open] > summary { margin-bottom: 8px; }

    .transaction-filter-card { padding: 9px; }
    .transaction-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .transaction-filters .field { min-width: 0; }
    .transaction-filters input,
    .transaction-filters select { width: 100%; min-width: 0; }
    .transaction-filters .field:has(input[type="date"]) { max-width: 138px; }
    .transaction-filters input[type="date"] {
        inline-size: 100%;
        max-inline-size: 138px;
        min-inline-size: 0;
        padding-inline: 5px;
        font-size: 0.72rem;
    }
    .transaction-filters .app-select-picker summary,
    .transaction-filters .app-customer-picker > input { min-height: 35px; padding: 6px 8px; font-size: 0.8rem; }
    .transaction-filter-actions { grid-column: 1 / -1; justify-content: end; }
    .transaction-report-card { padding: 13px; }
    .transaction-report-card .table-wrap { overflow: visible; border: 0; border-radius: 0; }
    .transaction-report-card table,
    .transaction-report-card tbody,
    .transaction-report-card tr,
    .transaction-report-card td { display: block; width: 100%; }
    .transaction-report-card thead { display: none; }
    .transaction-report-card tr {
        margin-top: 9px;
        padding: 6px 10px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface-strong);
    }
    .transaction-report-card td {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        border: 0;
        border-bottom: 1px solid rgba(51, 104, 160, 0.12);
        text-align: end;
        overflow-wrap: anywhere;
    }
    .transaction-report-card td:last-child { border-bottom: 0; }
    .transaction-report-card td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.74rem;
        font-weight: 700;
        text-align: start;
    }
    .transaction-report-card td[colspan] { display: block; text-align: center; }
    .transaction-report-card td[colspan]::before { display: none; }
    .transaction-report-card .icon-button { justify-self: end; }
    .transaction-report-card tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
    .transaction-report-card td { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 7px 0; text-align: start; }
    .transaction-report-card td::before { font-size: 0.66rem; }
    .transaction-report-card td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .transaction-report-card td:nth-child(2) { grid-column: 2; grid-row: 1; }
    .transaction-report-card td:nth-child(9) { grid-column: 3; grid-row: 1; }
    .transaction-report-card td:nth-child(3) { grid-column: 1; grid-row: 2; }
    .transaction-report-card td:nth-child(7) { grid-column: 2; grid-row: 2; }
    .transaction-report-card td:nth-child(8) { grid-column: 3; grid-row: 2; }
    .transaction-report-card td:nth-child(5) { grid-column: 1; grid-row: 3; }
    .transaction-report-card td:nth-child(10) { grid-column: 2 / 4; grid-row: 3; }
    .transaction-report-card td:nth-child(4) { grid-column: 1 / -1; grid-row: 4; padding-top: 9px; color: var(--brand-strong); font-weight: 800; }
    .transaction-report-card td:nth-child(6) { grid-column: 1 / -1; grid-row: 5; color: var(--muted); }
    .transaction-report-card td:nth-child(11) { grid-column: 1 / -1; grid-row: 6; display: flex; justify-content: end; border-bottom: 0; padding-top: 8px; }
    .transaction-report-card td:nth-child(11)::before { display: none; }

    .business-ledger-filter-card { padding: 9px; }
    .business-ledger-filters { grid-template-columns: minmax(0, 1fr); gap: 7px; }
    .business-ledger-filter-group { gap: 6px; }
    .business-ledger-filter-primary,
    .business-ledger-filter-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .business-ledger-customer-filter { grid-column: 1 / -1; }
    .business-ledger-filters .field { min-width: 0; }
    .business-ledger-filters input,
    .business-ledger-filters select { width: 100%; min-width: 0; }
    .business-ledger-filters .field:has(input[type="date"]) { max-width: 138px; }
    .business-ledger-filters input[type="date"] { inline-size: 100%; max-inline-size: 138px; min-inline-size: 0; padding-inline: 5px; font-size: 0.72rem; }
    .business-ledger-filter-actions { justify-content: end; }
    .business-ledger-card { padding: 10px; }
    .business-ledger-header { align-items: center; gap: 8px; margin-bottom: 8px; }
    .business-ledger-header h3 { font-size: 1rem; }
    .business-ledger-header p { font-size: 0.75rem; }
    .business-ledger-header-actions { align-items: center; flex-direction: row; gap: 6px; }
    .business-ledger-column-picker summary { min-height: 32px; padding: 5px 8px; font-size: 0.68rem; }
    .business-ledger-column-menu { grid-template-columns: minmax(0, 1fr); width: min(248px, calc(100vw - 28px)); }
    .business-ledger-table-wrap { overflow: auto !important; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
    .business-ledger-table { min-width: max(680px, calc(var(--business-ledger-visible-columns, 11) * 92px)); font-size: 0.72rem; }
    .business-ledger-table th,
    .business-ledger-table td { padding: 5px 6px; }

    .pnl-filter-card { padding: 9px; }
    .pnl-report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .pnl-report-filters .field { min-width: 0; }
    .pnl-report-filters input[type="date"] { padding-inline: 6px; font-size: 0.75rem; }
    .pnl-filter-actions { grid-column: 1 / -1; }
    .pnl-entries-card { padding: 13px; }
    .pnl-entries-card .table-wrap { overflow-x: auto; overflow-y: visible; border: 0; border-radius: 0; }
    .pnl-entries-card table,
    .pnl-entries-card tbody,
    .pnl-entries-card tr,
    .pnl-entries-card td { display: block; width: 100%; }
    .pnl-entries-card .pnl-ledger-table { min-width: 0; }
    .pnl-entries-card thead { display: none; }
    .pnl-entries-card tr { margin-top: 9px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }
    .pnl-entries-card td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 10px; padding: 7px 0; border: 0; border-bottom: 1px solid rgba(51, 104, 160, 0.12); text-align: end; white-space: normal; overflow-wrap: anywhere; }
    .pnl-entries-card td:last-child { border-bottom: 0; }
    .pnl-entries-card td::before { content: attr(data-label); color: var(--muted); font-size: 0.74rem; font-weight: 700; text-align: start; }
    .pnl-entries-card td[colspan] { display: block; text-align: center; }
    .pnl-entries-card td[colspan]::before { display: none; }

    .dashboard-cashier-vault {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dashboard-cashier-vault span:not(.drawer-status-dot),
    .dashboard-cashier-vault small {
        grid-column: 2;
    }

    .vault-movement-form .movement-note,
    .vault-movement-form .movement-submit {
        grid-column: 1 / -1;
    }
    .transfer-line, .pos-transfer-line { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) 38px; gap: 6px; }
    .transfer-line .icon-button, .pos-transfer-line .icon-button { grid-column: auto; min-width: 38px; min-height: 40px; padding: 0; }
    .transfer-lines-field .secondary { width: 100%; }
    .audit-filter-bar input[type="date"] { padding-inline: 6px; font-size: 0.75rem; }
    .audit-log-table tr { margin-top: 6px; padding: 5px 8px; }
    .audit-log-table td { padding: 5px 0; font-size: 0.8rem; }
    .audit-log-table td small { font-size: 0.76rem; }
    .customers-page { gap: 10px; }
    .customers-page .card { padding: 13px; }
    .customer-overview-filter-card { padding: 10px; }
    .customer-overview-filter-card .card-header { margin-bottom: 8px; }
    .customer-overview-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .customer-overview-filters .customer-overview-search,
    .customer-overview-filter-actions { grid-column: 1 / -1; }
    .customer-overview-filters .field { min-width: 0; }
    .customer-overview-filters input,
    .customer-overview-filters select { width: 100%; min-width: 0; font-size: 0.8rem; }
    .customer-overview-filters .app-select-picker summary { min-height: 35px; padding: 6px 8px; font-size: 0.8rem; }
    .customer-overview-filter-actions { justify-content: end; }
    .customer-editor-dialog { width: min(100% - 20px, 620px); }
    .customer-editor-dialog-head { padding: 14px; }
    .customer-editor-form { gap: 8px; padding: 13px 14px 14px; }
    .customer-editor-rows { max-height: min(420px, 56vh); gap: 7px; }
    .customer-editor-row { padding: 8px; border-radius: 12px; }
    .customer-editor-row-fields { grid-template-columns: 1fr; gap: 7px; }
    .customer-editor-row-fields .field.full { grid-column: auto; }
    .customer-editor-row-fields textarea { min-height: 54px; }
    .customer-editor-add-row { justify-self: start; }
    .customer-create-panel > summary { min-height: 40px; padding: 9px 12px; }
    .customer-create-panel > form { padding: 10px; }
    .customer-overview-list { padding: 10px; }
    .customer-overview-list .card-header { margin-bottom: 8px; }
    .quick-customer-dialog { width: min(100% - 20px, 460px); }
    .quick-customer-dialog-head { padding: 14px; }
    .quick-customer-form { grid-template-columns: 1fr; gap: 9px; padding: 13px 14px 14px; }
    .quick-customer-form .field:nth-of-type(3),
    .quick-customer-form .field:nth-of-type(4) { grid-column: auto; }
    .customer-overview-row { gap: 0; padding: 0; }
    .customer-overview-identity { gap: 0; }
    .customer-overview-identity > div { padding: 7px 8px; }
    .customer-overview-identity strong { font-size: 0.8rem; }
    .customer-overview-balance { min-width: 84px; padding: 6px 7px; }
    .customer-overview-balance strong { font-size: 0.82rem; }
    .customer-overview-detail-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 7px 8px; }
    .customer-overview-actions { justify-content: end; }
    .customer-overview-actions .button { min-height: 32px; padding: 5px 8px; font-size: 0.72rem; }
    .customer-overview-actions .icon-button { min-width: 32px; min-height: 32px; }
    .customers-table-wrap { overflow: visible; border: 0; border-radius: 0; }
    .customers-table, .customers-table tbody, .customers-table tr, .customers-table td { display: block; width: 100%; }
    .customers-table thead { display: none; }
    .customers-table tr { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }
    .customers-table td { display: grid; grid-template-columns: minmax(80px, .75fr) minmax(0, 1.4fr); align-items: center; gap: 8px; padding: 6px 0; border: 0; border-bottom: 1px solid rgba(51, 104, 160, 0.12); text-align: end; overflow-wrap: anywhere; }
    .customers-table td:last-child { border-bottom: 0; }
    .customers-table td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 800; text-align: start; }
    .customers-table .inline-options { justify-content: end; gap: 5px; }
    .customer-statement-top { gap: 10px; }
    .customer-statement-top .card { padding: 13px; }
    .customer-statement-top .card-header { margin-bottom: 8px; }
    .customer-statement-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .customer-statement-filters .field { min-width: 0; gap: 4px; }
    .customer-statement-filters input,
    .customer-statement-filters select { min-width: 0; min-height: 38px; padding: 7px 8px; font-size: 0.8rem; }
    .customer-statement-filters input[type="date"] { padding-inline: 5px; font-size: 0.72rem; }
    .customer-statement-filters .field.full { grid-column: 1 / -1; }
    .customer-statement-filters button { min-height: 40px; }
    .customer-statement-balances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .customer-statement-balances .stat-tile { min-width: 0; padding: 8px; }
    .customer-statement-balances .stat-label { font-size: 0.72rem; }
    .customer-statement-balances .stat-value { font-size: 0.9rem; overflow-wrap: anywhere; }
    .customer-statement-list { padding: 13px; }
    .customer-statement-list .card-header { margin-bottom: 8px; }
    .customer-statement-table-wrap { overflow: visible; border: 0; border-radius: 0; }
    .customer-statement-table, .customer-statement-table tbody, .customer-statement-table tr, .customer-statement-table td { display: block; width: 100%; }
    .customer-statement-table thead { display: none; }
    .customer-statement-table tr { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }
    .customer-statement-table td { display: grid; grid-template-columns: minmax(78px, .75fr) minmax(0, 1.5fr); align-items: center; gap: 8px; padding: 6px 0; border: 0; border-bottom: 1px solid rgba(51, 104, 160, 0.12); text-align: end; overflow-wrap: anywhere; }
    .customer-statement-table td:last-child { border-bottom: 0; }
    .customer-statement-table td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 800; text-align: start; }
    .customer-statement-table td[colspan] { display: block; text-align: center; }
    .customer-statement-table td[colspan]::before { display: none; }
    .customer-statement-table .icon-button { justify-self: end; }
}

@media (max-width: 680px) {
    .provider-balance-page { gap: 10px; }
    .provider-balance-hero, .provider-operation-card, .provider-history-card { padding: 13px; }
    .provider-hero-header { display: grid; gap: 9px; margin-bottom: 10px; }
    .provider-hero-header h2 { font-size: 1.08rem; }
    .provider-account-grid { gap: 7px; }
    .provider-account-card { flex-basis: 128px; padding: 8px; border-radius: 12px; }
    .provider-account-card b { margin-top: 4px; font-size: 0.84rem; }
    .provider-account-provider { font-size: 0.64rem; }
    .provider-account-card strong { font-size: 0.78rem; }
    .provider-account-card small { font-size: 0.62rem; }
    .provider-operation-grid { gap: 10px; }
    .provider-operation-card .card-header { margin-bottom: 8px; }
    .provider-operation-card .card-header h3 { font-size: 1rem; }
    .provider-topup-launch-card { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .provider-add-account-trigger { width: 40px; min-height: 40px; border-radius: 12px; font-size: 1.55rem; }
    .provider-operation-launch { min-width: 0; min-height: 40px; padding-inline: 12px; font-size: 0.78rem; }
    .provider-balance-dialog { width: min(calc(100vw - 20px), 600px); max-width: calc(100vw - 20px); border-radius: 17px; }
    .provider-balance-dialog-head { padding: 13px 14px; }
    .provider-dialog-form { padding: 12px 14px 14px; }
    .provider-operation-form { gap: 8px; }
    .provider-operation-form input, .provider-operation-form textarea, .provider-operation-form .app-select-picker summary, .provider-operation-form .app-customer-picker > input { min-height: 40px; padding: 8px 9px; font-size: 16px; }
    .provider-operation-form .field label { font-size: 0.72rem; }
    .provider-mode-field .choice-button span { min-height: 40px; padding: 6px; font-size: 0.72rem; }
    .provider-sale-payment-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .provider-sale-payment-row .choice-button span { min-height: 40px; font-size: 0.7rem; }
    .provider-sale-preview { gap: 5px; padding: 8px; }
    .provider-sale-preview span { font-size: 0.61rem; }
    .provider-sale-preview b { font-size: 0.72rem; }
    .provider-history-card .card-header { margin-bottom: 8px; }
    .provider-history-card .table-wrap { overflow-x: auto; }
    .provider-history-table { min-width: 620px; font-size: 0.76rem; }
}

@media (max-width: 390px) {
    .exchange-settings-form { grid-template-columns: minmax(0, 1fr); }
    .transaction-filters { grid-template-columns: minmax(0, 1fr); }
    .pnl-report-filters { grid-template-columns: minmax(0, 1fr); }
    .expense-form { grid-template-columns: minmax(0, 1fr); }
    .customer-statement-filters { grid-template-columns: minmax(0, 1fr); }
    .customer-statement-balances { grid-template-columns: minmax(0, 1fr); }
    .business-ledger-filter-primary,
    .business-ledger-filter-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .business-ledger-customer-filter { grid-column: auto; }
}

@media (max-width: 680px) {
    .filter-launcher { margin-bottom: 10px; }
    .filter-dialog { width: min(calc(100vw - 20px), 640px); max-width: calc(100vw - 20px); border-radius: 17px; }
    .filter-dialog-head { padding: 13px 14px; }
    .filter-dialog-content { padding: 12px 14px 14px; }
    .filter-dialog .filters-grid,
    .filter-dialog .transaction-filters,
    .filter-dialog .pnl-report-filters,
    .filter-dialog .customer-overview-filters,
    .filter-dialog .customer-statement-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .filter-dialog .business-ledger-filter-primary,
    .filter-dialog .business-ledger-filter-secondary,
    .filter-dialog .audit-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .filter-dialog input,
    .filter-dialog select,
    .filter-dialog .app-select-picker summary,
    .filter-dialog .app-customer-picker > input { min-height: 40px; padding: 7px 8px; font-size: 16px; }
    .filter-dialog .field label,
    .filter-dialog .audit-filter-bar label > span { font-size: 0.7rem; }
    .filter-dialog .transaction-filter-actions,
    .filter-dialog .business-ledger-filter-actions,
    .filter-dialog .customer-overview-filter-actions,
    .filter-dialog .pnl-filter-actions,
    .filter-dialog .customer-statement-filters .field.full,
    .filter-dialog .audit-filter-bar button { grid-column: 1 / -1; }
    .table-column-picker summary { min-height: 32px; padding: 5px 8px; font-size: 0.68rem; }
    .table-column-picker-menu { grid-template-columns: minmax(0, 1fr); width: min(248px, calc(100vw - 28px)); }
}

/* Odoo-inspired application shell. Existing financial forms keep their workflow,
   while navigation and view switching are standardized across every module. */
.app-body {
    background:
        radial-gradient(circle at 8% 5%, rgba(69, 145, 190, 0.14), transparent 26rem),
        radial-gradient(circle at 90% 2%, rgba(48, 180, 145, 0.11), transparent 25rem),
        linear-gradient(135deg, #f6f7f4 0%, #edf3f2 46%, #e8f0f5 100%);
}

.app-shell { max-width: 1600px; padding: 18px; }
.app-topbar { min-height: 74px; padding: 13px 18px; border-radius: 20px; }
.app-topbar .brand-block { gap: 11px; min-width: 0; }
.app-topbar .brand-mark { width: 44px; height: 44px; border-radius: 13px; }
.app-topbar .brand-title { display: block; color: var(--brand-strong); font-size: clamp(1rem, 2vw, 1.34rem); line-height: 1.1; }
.app-topbar .brand-subtitle { display: block; margin-top: 3px; color: var(--muted); font-size: 0.71rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.app-topbar .topbar-tools { gap: 9px; }
.app-switcher,
.topbar-branch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-strong);
    color: var(--brand-strong);
    font-size: 0.8rem;
    font-weight: 800;
}
.app-switcher svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.app-topbar .language-switcher { border-radius: 12px; }
.app-topbar .language-switcher a.language-link { min-height: 30px; padding: 6px 9px; font-size: 0.78rem; }
.app-topbar .logout-link { min-height: 38px; padding: 7px 11px; border-radius: 12px; font-size: 0.8rem; }
.app-topbar .theme-toggle { width: 38px; height: 38px; }
.app-topbar .branch-picker { min-width: 154px; }
.app-topbar .branch-picker summary { min-height: 38px; padding: 7px 10px; border-radius: 12px; font-size: 0.8rem; }

html[dir="ltr"] .app-workspace,
html[dir="rtl"] .app-workspace { grid-template-columns: 86px minmax(0, 1fr); gap: 16px; direction: ltr; }
.sidebar-nav.app-rail-shell { grid-column: 1; grid-row: 1; top: 18px; }
.main-content { grid-column: 2; gap: 16px; }
html[dir="rtl"] .main-content { direction: rtl; }
html[dir="ltr"] .main-content { direction: ltr; }
.app-rail {
    display: grid;
    gap: 7px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: color-mix(in srgb, var(--surface) 92%, #fff);
    box-shadow: var(--shadow);
}
.app-rail-item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 66px;
    padding: 7px 3px;
    border-radius: 13px;
    color: var(--muted);
    font-size: 0.59rem;
    font-weight: 800;
    line-height: 1.08;
    text-align: center;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
.app-rail-item:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--brand) 8%, var(--surface-strong)); color: var(--brand-strong); }
.app-rail-item.is-active { background: color-mix(in srgb, var(--brand) 12%, var(--surface-strong)); color: var(--brand-strong); }
.app-rail-item.is-active::before { content: ""; position: absolute; inset-inline-start: -8px; top: 16px; bottom: 16px; width: 3px; border-radius: 0 99px 99px 0; background: var(--brand); }
.app-rail-icon,
.app-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}
.app-rail-icon { width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 10%, var(--surface-strong)); }
.app-rail-icon svg,
.app-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.app-rail-launcher { margin-bottom: 4px; background: linear-gradient(145deg, var(--brand), var(--accent)); color: #fff; }
.app-rail-launcher .app-rail-icon { background: rgba(255,255,255,0.16); }
.app-rail-launcher:hover,
.app-rail-launcher.is-active { background: linear-gradient(145deg, var(--brand-strong), var(--brand)); color: #fff; }
.app-rail-item-coral .app-rail-icon { color: #d76155; background: #fff0ed; }
.app-rail-item-amber .app-rail-icon { color: #b87511; background: #fff4d9; }
.app-rail-item-mint .app-rail-icon { color: #14836b; background: #e1f5ed; }
.app-rail-item-violet .app-rail-icon { color: #7560b2; background: #eeeafe; }
.app-rail-item-teal .app-rail-icon { color: #167e86; background: #e0f4f5; }
.app-rail-item-slate .app-rail-icon { color: #4b6986; background: #e7eef5; }
.app-rail-item-blue .app-rail-icon { color: #306eaa; background: #e3effc; }
.app-rail-item-rose .app-rail-icon { color: #a25270; background: #fae8ef; }

.app-module-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: color-mix(in srgb, var(--surface) 94%, #fff);
    box-shadow: 0 8px 22px rgba(47, 95, 130, 0.07);
}
.app-module-heading { display: flex; align-items: center; gap: 9px; min-width: max-content; }
.app-module-heading small { display: block; color: var(--muted); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.app-module-heading strong { display: block; margin-top: 1px; color: var(--brand-strong); font-size: 0.96rem; }
.app-icon { width: 38px; height: 38px; border-radius: 12px; }
.app-icon svg { width: 22px; height: 22px; }
.app-icon-sky, .app-icon-blue { color: #2869a5; background: #e1effd; }
.app-icon-coral { color: #ca5c4c; background: #ffebe7; }
.app-icon-amber { color: #ac7214; background: #fff2d5; }
.app-icon-mint { color: #12806a; background: #e0f5ed; }
.app-icon-violet { color: #725dab; background: #eee9fe; }
.app-icon-teal { color: #147d83; background: #e0f4f4; }
.app-icon-slate { color: #4c6a86; background: #e8eef5; }
.app-icon-rose { color: #9f4c6b; background: #fae8ef; }
.app-module-views { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.app-module-views::-webkit-scrollbar { display: none; }
.app-module-view { flex: 0 0 auto; min-height: 34px; padding: 7px 10px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); font-size: 0.77rem; font-weight: 800; white-space: nowrap; }
.app-module-view:hover { background: color-mix(in srgb, var(--brand) 8%, var(--surface-strong)); color: var(--brand-strong); }
.app-module-view.is-active { border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); background: var(--brand); color: #fff; box-shadow: 0 5px 12px rgba(40, 85, 132, 0.18); }

.app-launcher-page { min-height: calc(100vh - 160px); padding: clamp(18px, 3vw, 38px); border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, #fff), color-mix(in srgb, var(--surface) 84%, #dceef2)); box-shadow: var(--shadow); }
.app-launcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; max-width: 1180px; }
.app-launcher-card { display: grid; place-items: center; align-content: center; gap: 11px; min-height: 130px; padding: 16px; border: 1px solid color-mix(in srgb, var(--line) 88%, #fff); border-radius: 18px; background: color-mix(in srgb, var(--surface-strong) 92%, #fff); box-shadow: 0 9px 18px rgba(43, 83, 116, 0.07); color: var(--brand-strong); text-align: center; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.app-launcher-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); box-shadow: 0 17px 30px rgba(43, 83, 116, 0.16); }
.app-launcher-card .app-icon { width: 46px; height: 46px; border-radius: 14px; }
.app-launcher-card .app-icon svg { width: 25px; height: 25px; }
.app-launcher-card > strong { max-width: 100%; color: inherit; font-size: 0.9rem; line-height: 1.35; overflow-wrap: anywhere; }
.app-launcher-empty { display: grid; justify-items: center; gap: 10px; padding: 80px 20px; color: var(--muted); text-align: center; }

@media (max-width: 980px) {
    .app-shell { padding: 12px; }
    .app-topbar { padding: 11px 13px; }
    .app-workspace { display: flex; flex-direction: column; gap: 12px; }
    .sidebar-nav.app-rail-shell { width: 100%; margin: 0; }
    .app-rail { display: flex; gap: 7px; width: 100%; padding: 7px; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .app-rail::-webkit-scrollbar { display: none; }
    .app-rail-item { flex: 0 0 68px; min-height: 58px; padding: 5px 2px; font-size: 0.54rem; }
    .app-rail-item.is-active::before { inset-inline: 16px; top: auto; bottom: -7px; width: auto; height: 3px; border-radius: 99px 99px 0 0; }
    .main-content { width: 100%; }
    .app-module-bar { align-items: flex-start; flex-direction: column; gap: 9px; }
    .app-module-views { width: 100%; padding-bottom: 1px; }
    .app-launcher-page { min-height: 0; padding: 20px; }
}

@media (max-width: 680px) {
    .app-shell { padding: 9px; }
    .app-topbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 11px; }
    .app-topbar .brand-block { justify-content: center; }
    .app-topbar .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
    .app-topbar .brand-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
    .app-topbar .topbar-tools { width: 100%; gap: 6px; flex-wrap: wrap; justify-content: center; }
    .app-switcher { min-width: 38px; width: 38px; justify-content: center; padding: 6px; }
    .app-topbar .topbar-branch,
    .app-topbar .branch-picker { flex: 1 1 128px; min-width: 0; }
    .app-topbar .branch-picker summary,
    .app-topbar .topbar-branch { justify-content: center; }
    .app-topbar .language-switcher { display: flex; flex: 0 0 auto; gap: 3px; }
    .app-topbar .language-switcher a.language-link { min-width: 58px; justify-content: center; padding: 6px 8px; }
    .app-topbar .logout-link { display: inline-flex; align-items: center; }
    .app-topbar .theme-toggle { width: 34px; height: 34px; }
    .app-topbar .branch-picker { min-width: 0; }
    .app-topbar .branch-picker summary { min-height: 34px; padding: 6px 8px; font-size: 0.7rem; }
    .app-rail-item { flex-basis: 62px; min-height: 55px; font-size: 0.5rem; }
    .app-rail-icon { width: 27px; height: 27px; border-radius: 9px; }
    .app-rail-icon svg { width: 17px; height: 17px; }
    .app-module-bar { padding: 9px 10px; border-radius: 14px; }
    .app-module-heading strong { font-size: 0.88rem; }
    .app-module-view { min-height: 31px; padding: 6px 8px; font-size: 0.7rem; }
    .app-launcher-page { padding: 15px; border-radius: 18px; }
    .app-launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .app-launcher-card { min-height: 122px; gap: 9px; padding: 12px; border-radius: 15px; }
    .app-launcher-card .app-icon { width: 38px; height: 38px; border-radius: 11px; }
    .app-launcher-card .app-icon svg { width: 21px; height: 21px; }
    .app-launcher-card > strong { font-size: 0.76rem; }
}

@media print {
    .app-module-bar,
    .app-rail-shell { display: none !important; }
}

/* Applications are the primary navigation; page content intentionally has no persistent sidebar. */
.app-workspace,
html[dir="ltr"] .app-workspace,
html[dir="rtl"] .app-workspace {
    display: block;
}
.main-content {
    grid-column: auto;
    width: 100%;
}

.filter-dialog {
    display: none;
    overflow: hidden;
}
.filter-dialog[open] {
    display: flex;
    flex-direction: column;
}
.filter-dialog-content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}