/* ============================================================
   Posta design system
   Structure (topbar + navbar + page components) mirrors the
   RanmaRealestate admin shell; brand color/login styling mirrors
   RanmaWeb's blue courier identity instead of the real-estate gold.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root,
[data-theme="dark"] {
    --pw-primary: #2E7CD6;
    --pw-primary-hover: #4E93E8;
    --pw-primary-bg: rgba(46, 124, 214, 0.14);
    --pw-bg: #0E1420;
    --pw-bg2: #161E2E;
    --pw-bg3: #1E2838;
    --pw-topbar-bg: #0A0F18;
    --pw-text: #FFFFFF;
    --pw-text2: #C7D0DE;
    --pw-text3: #8593A8;
    --pw-border: #232E42;
    --pw-success: #45B97C;
    --pw-danger: #E5534B;
    --pw-warning: #E0A527;
    --pw-info: #4E93E8;
    --pw-radius: 10px;
    --pw-radius-lg: 16px;
}

[data-theme="light"] {
    --pw-primary: #114987;
    --pw-primary-hover: #1a5fa8;
    --pw-primary-bg: rgba(17, 73, 135, 0.08);
    --pw-bg: #F4F7FB;
    --pw-bg2: #FFFFFF;
    --pw-bg3: #EEF2F8;
    --pw-topbar-bg: #0d3d75;
    --pw-text: #10192B;
    --pw-text2: #4B5A70;
    --pw-text3: #8593A8;
    --pw-border: #DFE6EF;
    --pw-success: #2E9E63;
    --pw-danger: #C0392B;
    --pw-warning: #B4790F;
    --pw-info: #1a5fa8;
}

* { box-sizing: border-box; }

body {
    background: var(--pw-bg);
    color: var(--pw-text);
    font-family: 'DM Sans', sans-serif;
    transition: background .2s, color .2s;
}

h1, h2, h3, .pw-serif { font-family: 'Cormorant Garamond', serif; }

a { text-decoration: none; }

/* ── Topbar ── */
.pw-app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.pw-topbar {
    background: var(--pw-topbar-bg);
    color: #E6ECF6;
    font-size: 12.5px;
    padding: 6px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pw-topbar-left { font-size: 11px; color: #999999; letter-spacing: .08em; }

.pw-topbar-right { display: flex; align-items: center; gap: 16px; }

/* ── Language switcher ── */
.pw-lang-switcher { display: flex; gap: 2px; }

.pw-lang-btn {
    font-size: 11px; letter-spacing: .1em; color: #999999;
    padding: 3px 9px; border: 1px solid transparent; background: none;
    cursor: pointer; transition: color .2s, border-color .2s;
}
.pw-lang-btn:hover { color: var(--pw-primary-hover); border-color: #444444; }
.pw-lang-btn.active { color: var(--pw-primary-hover); border-color: var(--pw-primary-hover); }

/* ── Theme toggle ── */
.pw-theme-toggle {
    display: flex; align-items: center; gap: 7px;
    background: none; border: 1px solid rgba(255,255,255,.12);
    cursor: pointer; padding: 4px 10px; transition: border-color .2s;
}
.pw-theme-toggle:hover { border-color: rgba(255,255,255,.28); }

.pw-toggle-track {
    width: 36px; height: 20px; border-radius: 10px;
    background: #2a2a2a; border: 1px solid #444;
    position: relative; transition: background .3s, border-color .3s; flex-shrink: 0;
}
.pw-toggle-thumb {
    position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--pw-primary-hover);
    transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s;
}
[data-theme="light"] .pw-toggle-thumb { transform: translateX(16px); background: var(--pw-primary); }
[data-theme="light"] .pw-toggle-track { background: #ECE6DC; border-color: #C5BDB0; }

.pw-toggle-icon { font-size: 13px; line-height: 1; user-select: none; color: #888; }
.pw-toggle-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #888888; }

/* ── Navbar ── */
.pw-navbar {
    height: 68px;
    background: var(--pw-bg2);
    border-bottom: 1px solid var(--pw-border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px;
    position: relative;
}
.pw-navbar::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--pw-primary), transparent 60%);
}

.pw-brand { display: flex; align-items: center; gap: 10px; }
/* The logo artwork is dark blue on transparent, so it sits on a white chip: invisible on the light
   header, and what keeps the wordmark readable on the dark one. */
.pw-brand-logo {
    display: block; height: 54px; width: auto;
    padding: 3px 12px; border-radius: 14px; background: #fff;
}
[data-theme="dark"] .pw-brand-logo { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }

.pw-nav-center { display: flex; align-items: center; gap: 4px; }
.pw-nav-link {
    position: relative;
    padding: 10px 14px;
    font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
    color: var(--pw-text2);
    border-radius: var(--pw-radius);
}
.pw-nav-link:hover, .pw-nav-link.active { color: var(--pw-primary); background: var(--pw-primary-bg); }

.pw-dropdown { position: relative; }
.pw-dropdown-menu {
    display: none;
    position: absolute; top: 100%; inset-inline-start: 0; margin-top: 6px;
    background: var(--pw-bg2); border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius); min-width: 200px; padding: 6px; z-index: 40;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
/* Bridges the visual gap above the menu so the hover/click zone is continuous
   (an invisible strip, not the margin-top gap, is what used to break hover). */
.pw-dropdown-menu::before {
    content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px;
}
.pw-dropdown-menu.show { display: block; }
.pw-dropdown-item {
    display: block; padding: 9px 12px; border-radius: 8px;
    font-size: 13.5px; color: var(--pw-text2); font-weight: 500;
}
.pw-dropdown-item:hover, .pw-dropdown-item.active { background: var(--pw-primary-bg); color: var(--pw-primary); }

.pw-user-dropdown .dropdown-toggle {
    display: flex; align-items: center; gap: 10px;
    background: var(--pw-bg3); border: 1px solid var(--pw-border);
    border-radius: 999px; padding: 5px 14px 5px 5px; color: var(--pw-text);
}
.pw-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(145deg, var(--pw-primary), var(--pw-primary-hover));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.pw-btn-outline {
    border: 1.5px solid var(--pw-primary); color: var(--pw-primary);
    border-radius: var(--pw-radius); padding: 8px 20px; font-weight: 600; font-size: 13.5px;
}
.pw-btn-outline:hover { background: var(--pw-primary); color: #fff; }

.pw-navbar-right { display: flex; align-items: center; gap: 12px; }

/* Hidden on desktop; the @media block below reveals it once the nav links no longer fit. */
.pw-nav-toggle {
    display: none; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px;
    background: none; border: 1px solid var(--pw-border); border-radius: var(--pw-radius);
    color: var(--pw-text); font-size: 20px; cursor: pointer;
}
.pw-nav-toggle:hover { border-color: var(--pw-primary); color: var(--pw-primary); }

/* ── Body / page shell ── */
.pw-main-container { max-width: 1720px; margin: 0 auto; padding: 28px; }

.pw-page-header { margin-bottom: 24px; }
.pw-page-eyebrow {
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--pw-primary); font-weight: 700;
}
.pw-page-title { font-size: 28px; font-weight: 700; color: var(--pw-text); margin: 4px 0 0; }

.pw-tabbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px;
    border-bottom: 1px solid var(--pw-border);
    margin-bottom: 24px;
}
.pw-tab {
    padding: 10px 2px 14px; margin-bottom: -1px;
    font-size: 14px; font-weight: 600; color: var(--pw-text3);
    text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.pw-tab:hover { color: var(--pw-text); }
.pw-tab.active { color: var(--pw-primary); border-bottom-color: var(--pw-primary); }

/* ── Cards / forms ── */
.pw-form-card {
    background: var(--pw-bg2); border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius-lg); padding: 28px;
}
.pw-form-label { font-size: 12.5px; font-weight: 600; color: var(--pw-text2); margin-bottom: 6px; display: block; }

/* Dense variant for a form card that's mostly one row of short fields. */
.pw-header-compact { padding: 14px 20px !important; }
.pw-header-compact .pw-form-label { margin-bottom: 3px; font-size: 11.5px; }
.pw-header-compact .pw-form-control,
.pw-header-compact .pw-form-select { padding: 7px 10px; font-size: 13px; }

/* Even denser, for a header row with enough fields that pw-header-compact alone still overflows. */
.pw-header-compact-xs .pw-form-label { font-size: 10.5px; }
.pw-header-compact-xs .pw-form-control,
.pw-header-compact-xs .pw-form-select { padding: 5px 7px; font-size: 12px; }
.pw-form-control, .pw-form-select {
    width: 100%; background: var(--pw-bg3); border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius); padding: 11px 14px; color: var(--pw-text); font-size: 14px;
}
.pw-form-control:focus, .pw-form-select:focus {
    outline: none; border-color: var(--pw-primary);
    box-shadow: 0 0 0 3px var(--pw-primary-bg);
}
/* Hide the native up/down spinner on all number inputs, everywhere. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.pw-btn-primary {
    background: linear-gradient(135deg, var(--pw-primary), var(--pw-primary-hover));
    color: #fff; border: none; border-radius: var(--pw-radius);
    padding: 11px 26px; font-weight: 600; font-size: 14.5px;
}
.pw-btn-primary:hover { opacity: .92; }
.pw-btn-danger {
    background: var(--pw-danger); color: #fff; border: none;
    border-radius: var(--pw-radius); padding: 11px 26px; font-weight: 600; font-size: 14.5px;
}
.pw-btn-danger:hover { opacity: .92; }
.pw-btn-secondary {
    background: var(--pw-bg3); color: var(--pw-text2); border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius); padding: 11px 26px; font-weight: 600; font-size: 14.5px;
}
.pw-btn-sm { padding: 7px 16px !important; font-size: 13px !important; }
.pw-deliver-btn { white-space: nowrap; }
.pw-deliver-btn.pw-delivered {
    background: rgba(69,185,124,.14); border-color: var(--pw-success); color: var(--pw-success);
}

.pw-alert { border-radius: var(--pw-radius); padding: 14px 16px; font-size: 13.5px; }
.pw-alert-danger { background: rgba(229,83,75,.12); color: var(--pw-danger); border: 1px solid rgba(229,83,75,.25); }
.pw-alert-success { background: rgba(69,185,124,.12); color: var(--pw-success); border: 1px solid rgba(69,185,124,.25); }
.pw-alert-warning { background: rgba(224,165,39,.12); color: var(--pw-warning); border: 1px solid rgba(224,165,39,.25); }

.pw-footer {
    text-align: center; padding: 20px 24px; color: var(--pw-text3); font-size: 12.5px;
    border-top: 1px solid var(--pw-border);
}
/* Explicit left/right (not logical start/end): the credit line always sits on the visual
   right and the copyright line on the visual left, regardless of the page's RTL direction. */
.pw-footer-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; max-width: 960px; margin: 0 auto; }
.pw-footer-logo { height: 84px; width: auto; max-width: 260px; object-fit: contain; justify-self: center; }
.pw-footer-credit { font-size: 11px; opacity: .75; text-align: right; }
.pw-footer-copyright { text-align: left; }

/* ── Data table ── */
.pw-table-wrap {
    background: var(--pw-bg2); border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius-lg);
    /* auto, not hidden: a table wider than its card (routine on a phone) scrolls
       horizontally instead of losing its rightmost columns off the edge. */
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
.pw-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pw-table thead th {
    text-align: start; padding: 13px 18px; font-size: 11.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--pw-text3); font-weight: 700;
    border-bottom: 2px solid var(--pw-primary); background: var(--pw-bg3);
}
.pw-table tbody td { padding: 13px 18px; border-bottom: 1px solid var(--pw-border); color: var(--pw-text2); vertical-align: middle; }
.pw-table tbody tr:last-child td { border-bottom: none; }
.pw-table tbody tr:hover { background: var(--pw-primary-bg); }

/* Dense variant for wide data-entry tables (many columns of inputs) — tighter padding
   and smaller type so more columns fit before the wrapper needs to scroll. */
.pw-table-compact thead th { padding: 8px 8px; font-size: 10px; text-align: center; }
.pw-table-compact tbody td { padding: 6px 8px; text-align: center; }
.pw-table-compact .pw-form-control,
.pw-table-compact .pw-form-select { padding: 7px 8px; font-size: 12.5px; text-align: center; }

/* Incoming shipment items table: many narrow columns, so the gaps between them are tighter than
   the default compact spacing to leave more room for the (widened) receiver-phone column. */
#pwIncomingItemsTable.pw-table-compact thead th { padding: 8px 4px; }
#pwIncomingItemsTable.pw-table-compact tbody td { padding: 6px 3px; }

.pw-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pw-badge-success { background: rgba(69,185,124,.14); color: var(--pw-success); }
.pw-badge-muted { background: var(--pw-bg3); color: var(--pw-text3); }
.pw-badge-warning { background: color-mix(in srgb, var(--pw-warning) 18%, transparent); color: var(--pw-warning); }
.pw-badge-info { background: color-mix(in srgb, var(--pw-info) 16%, transparent); color: var(--pw-info); }

.pw-btn-action {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--pw-border);
    background: var(--pw-bg3); color: var(--pw-text2); display: inline-flex;
    align-items: center; justify-content: center; margin-inline-start: 4px;
}
.pw-btn-action:hover { border-color: var(--pw-primary); color: var(--pw-primary); }
.pw-btn-action.pw-btn-delete:hover { border-color: var(--pw-danger); color: var(--pw-danger); }

.pw-empty { text-align: center; padding: 48px 20px; color: var(--pw-text3); }
.pw-empty i { font-size: 32px; opacity: .5; display: block; margin-bottom: 10px; }

/* ── Modal re-skin (Bootstrap structure, Posta theme) ── */
.modal-content {
    background: var(--pw-bg2); border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius-lg); color: var(--pw-text); overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, var(--pw-primary), var(--pw-primary-hover));
    border-bottom: none; padding: 18px 48px; position: relative; justify-content: center;
    min-height: 64px; align-items: center; box-sizing: border-box;
}
.modal-header .modal-title { color: #fff; font-weight: 700; text-align: center; width: 100%; }
.modal-header .btn-close {
    filter: brightness(0) invert(1); opacity: .85; margin: 0;
    position: absolute; inset-inline-end: 18px; top: 50%; transform: translateY(-50%);
}
.modal-header .btn-close:hover { opacity: 1; }
.modal-footer {
    background: var(--pw-bg3); border-top: 1px solid var(--pw-border); padding: 18px 24px;
    min-height: 64px; align-items: center; box-sizing: border-box;
}
.modal-footer > * { margin: 0; } /* Bootstrap adds its own margin per button, inflating the footer's height beyond the header's */

/* ============================================================
   Login screen — split brand/form panel (RanmaWeb-style)
   ============================================================ */
.pw-login-wrapper { display: flex; min-height: calc(100vh - 68px - 30px); }

.pw-login-brand {
    flex: 3; min-width: 320px;
    background: linear-gradient(145deg, #0d3d75 0%, #114987 50%, #1a5fa8 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px; position: relative; overflow: hidden;
}
.pw-login-brand::before {
    content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
    border: 60px solid rgba(255,255,255,.05); bottom: -120px; inset-inline-start: -120px;
}
.pw-login-brand::after {
    content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%;
    border: 40px solid rgba(255,255,255,.05); top: -60px; inset-inline-end: -60px;
}
.pw-login-logo-card {
    position: relative; z-index: 1; width: 100%; max-width: 440px; margin-bottom: 30px;
    padding: 26px 34px; border-radius: 28px; background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.pw-login-logo-card img { display: block; width: 100%; height: auto; }
.pw-login-mobile-logo { display: none; }
.pw-login-slogan {
    color: rgba(255,255,255,.9); font-size: 15px; font-weight: 600; text-align: center;
    letter-spacing: .4px; line-height: 1.7; position: relative; z-index: 1;
    border-top: 1px solid rgba(255,255,255,.2); padding-top: 20px; max-width: 360px;
}

.pw-login-form-panel {
    flex: 2; min-width: 360px; background: var(--pw-bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 32px;
}
.pw-login-card {
    width: 100%; max-width: 400px; background: var(--pw-bg2);
    border-radius: var(--pw-radius-lg); padding: 40px 36px;
    box-shadow: 0 8px 40px rgba(17,73,135,.12), 0 2px 8px rgba(0,0,0,.06);
    border: 1px solid var(--pw-border);
}
.pw-login-card-header { text-align: center; margin-bottom: 28px; }
.pw-login-card-header h2 { font-size: 24px; font-weight: 700; color: var(--pw-primary); margin: 0 0 6px; }
.pw-login-card-header p { font-size: 13px; color: var(--pw-text3); margin: 0; }

.pw-login-btn {
    width: 100%; height: 48px;
    background: linear-gradient(135deg, var(--pw-primary), var(--pw-primary-hover));
    color: #fff; font-size: 16px; font-weight: 600; border-radius: var(--pw-radius);
    border: none; cursor: pointer; letter-spacing: .3px; margin-top: 6px;
}
.pw-login-btn:hover { opacity: .92; }

/* The login screen fills exactly what is left under the header and above the footer, so a normal
   window needs no scrollbar (a very short window still scrolls). */
.pw-login-page { display: flex; flex-direction: column; min-height: 100vh; }
.pw-login-page .pw-main-container { flex: 1; display: flex; flex-direction: column; max-width: none; padding: 0; width: 100%; }
.pw-login-page .pw-login-wrapper { flex: 1; min-height: 0; }
.pw-login-page .pw-footer { padding: 12px; }

/* ============================================================
   App shell: tablet layout (iPad portrait & landscape, and any
   narrow desktop window)
   Below this width the nav links no longer fit the navbar in one
   row, so they collapse behind the hamburger button (#pwNavToggle
   in _Layout.cshtml) instead of wrapping or overflowing. Tablets
   still have plenty of width for content, so form/card sizing
   stays close to desktop here — only the phone breakpoint below
   shrinks that further.
   ============================================================ */
@media (max-width: 1200px) {
    .pw-topbar-left { display: none; }
    .pw-topbar { padding: 6px 14px; }

    .pw-navbar { flex-wrap: wrap; height: auto; padding: 10px 14px; row-gap: 10px; }
    .pw-brand-logo { height: 40px; }
    .pw-nav-toggle { display: flex; }

    .pw-nav-center {
        order: 3; flex-basis: 100%;
        display: none; flex-direction: column; align-items: stretch; gap: 2px;
        padding-top: 10px; border-top: 1px solid var(--pw-border);
    }
    .pw-nav-center.pw-nav-open { display: flex; }
    .pw-nav-center .pw-nav-link { width: 100%; }
    .pw-nav-center .pw-dropdown { width: 100%; }
    .pw-nav-center .pw-dropdown-menu {
        display: block; position: static; box-shadow: none; margin: 2px 0 0; width: 100%;
        border: none; padding-inline-start: 14px; background: none;
    }
    .pw-nav-center .pw-dropdown-menu:not(.show) { display: none; }

    /* The full name next to the avatar is the first thing to go; the avatar alone still
       identifies "you're logged in" without eating the width the hamburger button needs. */
    .pw-user-dropdown .dropdown-toggle span:not(.pw-avatar) { display: none; }
    .pw-user-dropdown .dropdown-toggle { padding: 5px; }

    .pw-main-container { padding: 20px; }
    .pw-page-header { grid-template-columns: 1fr !important; justify-items: start !important; gap: 4px !important; }

    /* Multi-field header rows (Account/Date/Driver/... in one line) are built per page with an
       inline flex style; a tablet still has room for two fields per row (the phone breakpoint
       below drops this to one) — overridden here rather than editing every page's inline
       nowrap/min-width by hand. */
    .pw-header-compact > div { flex-wrap: wrap !important; min-width: 0 !important; }
    .pw-header-compact > div > div { flex: 1 1 45% !important; min-width: 170px !important; }

    /* Same idea for a standalone stat strip (e.g. the delivery details modal) that isn't
       inside a .pw-header-compact card. */
    .pw-stat-strip { flex-wrap: wrap !important; overflow-x: visible !important; }
    .pw-stat-strip > div { flex: 1 1 45% !important; min-width: 130px !important; }
}

/* ============================================================
   App shell: phone layout
   Tighter still: single-column fields, smaller type, less padding.
   ============================================================ */
@media (max-width: 600px) {
    .pw-main-container { padding: 16px; }
    .pw-page-title { font-size: 21px !important; }
    .pw-form-card { padding: 18px; }
    .pw-header-compact > div > div { flex: 1 1 100% !important; min-width: 0 !important; }

    .pw-kpi { padding: 14px; }
    .pw-kpi-value { font-size: 22px; }
}

@media (max-width: 700px) {
    .pw-login-wrapper { min-height: auto; }
    .pw-login-brand { display: none; }
    .pw-login-mobile-logo { display: block; margin-bottom: 20px; }
    .pw-login-mobile-logo img { display: block; width: 220px; max-width: 70%; height: auto; padding: 6px 14px; border-radius: 16px; background: #fff; }
    .pw-login-form-panel { padding: 28px 16px; }
    .pw-login-card { padding: 28px 20px; }
}

/* ── RTL ── */
[dir="rtl"] .pw-login-brand::before { inset-inline-start: -120px; }
[dir="rtl"] .pw-toggle-thumb { left: auto; right: 2px; }
[dir="rtl"][data-theme="light"] .pw-toggle-thumb { transform: translateX(-16px); }
[dir="rtl"][data-theme="dark"] .pw-toggle-thumb { transform: translateX(0); }

/* ============================================================
   Delete confirmation dialog (shared, see _ConfirmDeleteModal.cshtml)
   ============================================================ */
.modal-backdrop { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-backdrop.show { opacity: .55; }

.pw-confirm-modal .modal-dialog { max-width: 400px; }
.pw-confirm-modal .modal-content {
    border-radius: 24px; border: 1px solid var(--pw-border);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.pw-confirm-modal.fade .modal-dialog {
    transform: scale(.86) translateY(14px);
    transition: transform .32s cubic-bezier(.2, .9, .3, 1.25), opacity .2s ease;
}
.pw-confirm-modal.show .modal-dialog { transform: none; }

.pw-confirm-body { padding: 36px 28px 6px; text-align: center; }

.pw-confirm-icon {
    position: relative; width: 78px; height: 78px; margin: 0 auto 20px;
    border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(145deg, rgba(229, 83, 75, .24), rgba(229, 83, 75, .08));
    color: var(--pw-danger); font-size: 32px;
}
.pw-confirm-ring {
    position: absolute; inset: -7px; border-radius: 50%;
    border: 2px solid rgba(229, 83, 75, .38);
    animation: pwConfirmPulse 1.9s ease-out infinite;
}
.pw-confirm-modal.show .pw-confirm-icon i { animation: pwConfirmWiggle .7s .2s ease both; }

@keyframes pwConfirmPulse {
    0% { transform: scale(.88); opacity: .95; }
    100% { transform: scale(1.28); opacity: 0; }
}
@keyframes pwConfirmWiggle {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-14deg); }
    40% { transform: rotate(11deg); }
    60% { transform: rotate(-7deg); }
    80% { transform: rotate(4deg); }
}

.pw-confirm-title { font-size: 21px; font-weight: 700; color: var(--pw-text); margin: 0 0 8px; }
.pw-confirm-text { font-size: 14px; line-height: 1.6; color: var(--pw-text3); margin: 0; }

.pw-confirm-name {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    margin-top: 18px; padding: 8px 16px; border-radius: 999px;
    background: var(--pw-bg3); border: 1px dashed var(--pw-border);
    color: var(--pw-text); font-weight: 600; font-size: 13.5px;
}
.pw-confirm-name[hidden] { display: none; }
.pw-confirm-name i { color: var(--pw-text3); }
.pw-confirm-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pw-confirm-actions { display: flex; gap: 12px; padding: 24px 28px 28px; }
.pw-confirm-actions button {
    flex: 1; height: 48px; border-radius: 14px; font-size: 14.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.pw-confirm-cancel {
    background: var(--pw-bg3); color: var(--pw-text2); border: 1px solid var(--pw-border);
}
.pw-confirm-cancel:hover { background: var(--pw-bg); color: var(--pw-text); }
.pw-confirm-delete {
    border: none; color: #fff;
    background: linear-gradient(135deg, #EF5F57, #C93A32);
    box-shadow: 0 10px 24px rgba(229, 83, 75, .38);
}
.pw-confirm-delete:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(229, 83, 75, .45); }
.pw-confirm-delete:active { transform: translateY(0); }

.pw-confirm-spinner {
    display: none; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    animation: pwConfirmSpin .7s linear infinite;
}
.pw-confirm-delete.is-loading { pointer-events: none; opacity: .85; }
.pw-confirm-delete.is-loading .pw-confirm-spinner { display: inline-block; }
.pw-confirm-delete.is-loading .pw-confirm-delete-icon { display: none; }
@keyframes pwConfirmSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pw-confirm-ring, .pw-confirm-modal.show .pw-confirm-icon i, .pw-confirm-spinner { animation: none; }
    .pw-confirm-modal.fade .modal-dialog { transition: none; transform: none; }
}

/* ============================================================
   Dashboard reports
   ============================================================ */
.pw-kpi {
    --kpi: var(--pw-primary);
    position: relative; overflow: hidden; height: 100%;
    display: flex; align-items: center; gap: 16px;
    background: var(--pw-bg2); border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius-lg); padding: 20px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pw-kpi::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
    background: var(--kpi);
}
.pw-kpi::after {
    content: ""; position: absolute; inset-inline-end: -40px; top: -40px; width: 120px; height: 120px;
    border-radius: 50%; background: var(--kpi); opacity: .07; pointer-events: none;
}
.pw-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); border-color: color-mix(in srgb, var(--kpi) 45%, var(--pw-border)); }
.pw-kpi-icon {
    flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    font-size: 24px; color: var(--kpi);
    background: color-mix(in srgb, var(--kpi) 16%, transparent);
}
.pw-kpi-body { min-width: 0; flex: 1; }
.pw-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--pw-text3); letter-spacing: .02em; }
/* A long comma-grouped number has no natural break point, so without this it silently
   overflows past the card edge and gets clipped by .pw-kpi's overflow:hidden instead of wrapping. */
.pw-kpi-value { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--pw-text); margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pw-kpi-sub { font-size: 12px; color: var(--pw-text3); margin-top: 2px; }
.pw-kpi-wide .pw-kpi-value { font-size: 32px; }

.pw-equation { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 14px; }
.pw-eq-chip {
    display: inline-flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: 12px;
    background: var(--pw-bg3); border: 1px solid var(--pw-border);
}
.pw-eq-chip small { font-size: 11px; color: var(--pw-text3); }
.pw-eq-chip b { font-size: 14.5px; color: var(--pw-text); font-variant-numeric: tabular-nums; }
.pw-eq-op { align-self: center; font-size: 18px; font-weight: 700; color: var(--pw-text3); }
.pw-eq-result { background: color-mix(in srgb, var(--kpi) 14%, transparent); border-color: color-mix(in srgb, var(--kpi) 40%, transparent); }
.pw-eq-result b { color: var(--kpi); }

.pw-progress { height: 12px; border-radius: 999px; background: var(--pw-bg3); overflow: hidden; }
.pw-progress-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--pw-success), color-mix(in srgb, var(--pw-success) 60%, #fff));
    transition: width .8s cubic-bezier(.2, .8, .2, 1);
}
.pw-progress-label { font-size: 22px; font-weight: 700; color: var(--pw-success); }

.pw-mini-stat {
    display: flex; flex-direction: column; gap: 4px; height: 100%;
    padding: 14px 16px; border-radius: 14px; background: var(--pw-bg3); border: 1px solid var(--pw-border);
}
.pw-mini-stat span { font-size: 12px; color: var(--pw-text3); font-weight: 600; }
.pw-mini-stat b { font-size: 20px; color: var(--pw-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.pw-section-title {
    display: flex; align-items: center; gap: 10px; margin: 6px 0 14px;
    font-size: 17px; font-weight: 700; color: var(--pw-text);
}
.pw-section-title i {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: var(--pw-primary-bg); color: var(--pw-primary); font-size: 17px;
}
.pw-mini-stat-warn { border-color: color-mix(in srgb, var(--pw-warning) 45%, var(--pw-border)); background: color-mix(in srgb, var(--pw-warning) 10%, var(--pw-bg3)); }
.pw-mini-stat-warn b { color: var(--pw-warning); }

.pw-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 6px 0 14px; }
.pw-section-head .pw-section-title { margin: 0; }
.pw-date-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.pw-date-filter .pw-form-control { padding: 8px 12px; min-width: 150px; }

/* ── Dashboard: each report is its own coloured panel (blue = incoming, orange = outgoing) ── */
.pw-report {
    --rpt: var(--pw-primary);
    margin-bottom: 32px; border-radius: 22px; overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--rpt) 40%, var(--pw-border));
    background: color-mix(in srgb, var(--rpt) 5%, var(--pw-bg));
    box-shadow: 0 10px 30px color-mix(in srgb, var(--rpt) 10%, transparent);
}
.pw-report-in { --rpt: #2E7CD6; }
.pw-report-out { --rpt: #E0752F; }
.pw-report-pr { --rpt: #8B6CE0; }
.pw-report-safe { --rpt: #14A38B; }

.pw-report-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
    padding: 18px 22px; color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--rpt) 78%, #000), var(--rpt));
}
.pw-report-id { display: flex; align-items: center; gap: 14px; }
.pw-report-icon {
    width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 24px;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28);
}
.pw-report-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 11px 2px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .2); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.pw-report-title { margin: 6px 0 0; font-size: 20px; font-weight: 700; color: #fff; }

.pw-report-head .pw-date-filter { padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .14); }
.pw-report-head .pw-form-label { color: rgba(255, 255, 255, .85); }
.pw-report-head .pw-btn-primary { background: #fff; color: var(--rpt); }
.pw-report-head .pw-btn-secondary { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .35); }

.pw-report-body { padding: 22px; }
.pw-report-body > :last-child { margin-bottom: 0; }

.pw-report-all { --rpt: #14A38B; }
.pw-neg { color: var(--pw-danger) !important; }

.pw-statement-card { padding: 6px 8px; overflow-x: auto; }
.pw-statement { width: 100%; border-collapse: collapse; min-width: 560px; font-variant-numeric: tabular-nums; }
.pw-statement th, .pw-statement td { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--pw-border); color: var(--pw-text2); }
.pw-statement th:first-child, .pw-statement td:first-child { text-align: start; font-weight: 600; color: var(--pw-text); }
.pw-statement thead th { font-size: 12.5px; font-weight: 700; color: var(--pw-text3); letter-spacing: .02em; }
.pw-statement thead th i { margin-inline-end: 6px; }
.pw-col-in { color: #2E7CD6 !important; }
.pw-col-out { color: #E0752F !important; }
.pw-statement small { color: var(--pw-text3); font-weight: 500; }
.pw-dash { color: var(--pw-text3) !important; }
.pw-op {
    display: inline-grid; place-items: center; width: 22px; height: 22px; margin-inline-end: 10px;
    border-radius: 7px; font-size: 14px; font-weight: 700; line-height: 1;
}
.pw-op-plus { background: rgba(69, 185, 124, .16); color: var(--pw-success); }
.pw-op-minus { background: rgba(229, 83, 75, .14); color: var(--pw-danger); }
.pw-op-eq { background: var(--pw-primary-bg); color: var(--pw-primary); }
.pw-st-sub td { background: var(--pw-bg3); font-weight: 700; color: var(--pw-text); }
.pw-st-total td { border-bottom: none; padding-top: 16px; padding-bottom: 16px; font-size: 18px; font-weight: 700; color: var(--pw-success); }
.pw-st-total td:first-child { color: var(--pw-text); }

/* ── Dashboard welcome card ── */
.pw-hero {
    position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 22px; padding: 28px 32px; margin-bottom: 30px; border-radius: 28px; color: #fff;
    background: linear-gradient(135deg, #0d3d75 0%, #114987 45%, #2E7CD6 100%);
    box-shadow: 0 20px 48px rgba(17, 73, 135, .30);
}
.pw-hero::before, .pw-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.pw-hero::before { width: 260px; height: 260px; top: -110px; inset-inline-start: -70px; background: rgba(255, 255, 255, .07); }
.pw-hero::after { width: 190px; height: 190px; bottom: -90px; inset-inline-start: 34%; background: rgba(255, 255, 255, .06); }
.pw-hero-deco {
    position: absolute; inset-inline-end: 24px; bottom: -34px; font-size: 170px; line-height: 1; opacity: .10;
    transform: rotate(-8deg); animation: pwFloat 6s ease-in-out infinite; pointer-events: none;
}
.pw-hero-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; }
.pw-hero-avatar {
    flex: none; width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center;
    font-size: 34px; font-weight: 700; background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .42);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.pw-hero-hi { font-size: 14.5px; font-weight: 600; opacity: .95; }
.pw-hero-name { margin: 2px 0 10px; font-size: 32px; font-weight: 700; color: #fff; line-height: 1.2; }
.pw-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-hero-meta span {
    display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pw-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.pw-hero-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 19px; border-radius: 15px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .32); color: #fff;
    font-size: 13.5px; font-weight: 600; text-decoration: none; backdrop-filter: blur(4px);
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.pw-hero-chip:hover { background: #fff; color: #114987; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .22); }
.pw-wave { display: inline-block; transform-origin: 70% 70%; animation: pwWave 2.6s ease-in-out infinite; }

@keyframes pwWave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
}
@keyframes pwFloat {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-10px) rotate(-5deg); }
}
@media (max-width: 700px) {
    .pw-hero { padding: 22px 20px; border-radius: 22px; }
    .pw-hero-avatar { width: 58px; height: 58px; border-radius: 20px; font-size: 26px; }
    .pw-hero-name { font-size: 24px; }
    .pw-hero-actions { width: 100%; }
    .pw-hero-chip { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pw-wave, .pw-hero-deco { animation: none; }
}

/* ── Expenses report: charts and ranked lists ── */
.pw-report-exp { --rpt: #D9455F; }
.pw-chart-card { height: 100%; }
.pw-chart-title { font-size: 13px; font-weight: 700; color: var(--pw-text); margin-bottom: 14px; letter-spacing: .02em; }
.pw-chart-box { position: relative; height: 270px; }
.pw-donut-box { height: 190px; }
.pw-donut-center {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none; text-align: center;
}
.pw-donut-center small { font-size: 11px; color: var(--pw-text3); font-weight: 600; }
.pw-donut-center b { font-size: 20px; color: var(--pw-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 90%; }

.pw-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.pw-legend li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--pw-text2); }
.pw-legend i { flex: none; width: 10px; height: 10px; border-radius: 4px; }
.pw-legend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-legend b { color: var(--pw-text); font-variant-numeric: tabular-nums; }

.pw-rank { display: grid; gap: 12px; }
.pw-rank-row { display: flex; align-items: flex-start; gap: 12px; }
.pw-rank-no {
    flex: none; width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center;
    font-size: 12.5px; font-weight: 700; background: var(--pw-bg3); color: var(--pw-text3);
}
.pw-rank-1 { background: linear-gradient(135deg, #F7C948, #E0A527); color: #fff; }
.pw-rank-2 { background: linear-gradient(135deg, #C3CCD9, #98A5B8); color: #fff; }
.pw-rank-3 { background: linear-gradient(135deg, #E2A26B, #C9773A); color: #fff; }
.pw-rank-main { flex: 1; min-width: 0; }
.pw-rank-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pw-rank-top b { font-size: 13px; color: var(--pw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-rank-top span { font-size: 13px; font-weight: 700; color: var(--pw-text); font-variant-numeric: tabular-nums; }
.pw-rank-bar { height: 7px; border-radius: 999px; background: var(--pw-bg3); margin: 6px 0 4px; overflow: hidden; }
.pw-rank-bar i { display: block; height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.pw-rank-sub { display: flex; justify-content: space-between; font-size: 11px; color: var(--pw-text3); }

/* table-layout:fixed + wrapping so a table with many columns (e.g. a per-safe breakdown)
   never overflows its card and clips a column off-screen or off the printed page. */
.pw-mini-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; }
.pw-mini-table th, .pw-mini-table td { overflow-wrap: break-word; }
.pw-mini-table th { padding: 8px 10px; text-align: start; font-size: 11px; font-weight: 700; color: var(--pw-text3); border-bottom: 1px solid var(--pw-border); }
.pw-mini-table td { padding: 10px; color: var(--pw-text2); border-bottom: 1px solid var(--pw-border); }
.pw-mini-table tr:last-child td { border-bottom: none; }
.pw-mini-table td.pw-amt { font-weight: 700; color: var(--pw-danger); font-variant-numeric: tabular-nums; }

/* ── Dashboard report printing (A4 / A5) ── */
.pw-print-only { display: none; }
.pw-print-group {
    display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 12px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
}
.pw-print-group span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.pw-print-group button {
    border: 0; border-inline-start: 1px solid rgba(255, 255, 255, .28); background: transparent; color: #fff;
    padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.pw-print-group button:hover { background: #fff; color: var(--rpt); }

@media print {
    /* always print on white with the light palette, whatever theme is on screen */
    body[data-print-size] {
        --pw-primary: #114987; --pw-primary-hover: #1a5fa8; --pw-primary-bg: rgba(17, 73, 135, 0.08);
        --pw-bg: #FFFFFF; --pw-bg2: #FFFFFF; --pw-bg3: #EEF2F8;
        --pw-text: #10192B; --pw-text2: #4B5A70; --pw-text3: #6B7A90; --pw-border: #DFE6EF;
        --pw-success: #2E9E63; --pw-danger: #C0392B; --pw-warning: #B4790F; --pw-info: #1a5fa8;
        background: #fff !important; color: var(--pw-text);
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    body[data-print-size] .pw-app-header,
    body[data-print-size] .pw-footer,
    body[data-print-size] .pw-page-header,
    body[data-print-size] .pw-hero,
    body[data-print-size] .pw-alert,
    body[data-print-size] .pw-report:not(.pw-printing),
    body[data-print-size] .pw-printing .pw-date-filter,
    body[data-print-size] .pw-printing .pw-print-group { display: none !important; }

    body[data-print-size] .pw-main-container { max-width: none; padding: 0; }
    body[data-print-size] .pw-printing { margin: 0; box-shadow: none; }
    body[data-print-size] .pw-printing .pw-report-body { padding: 14px 0 0; }
    body[data-print-size] .pw-printing .pw-report-head { padding: 14px 18px; }
    body[data-print-size] .pw-kpi,
    body[data-print-size] .pw-form-card,
    body[data-print-size] .pw-statement-card,
    body[data-print-size] .pw-mini-stat { break-inside: avoid; }
    body[data-print-size] .pw-kpi { transition: none; transform: none !important; box-shadow: none !important; }
    /* A physically narrow page can't fit desktop-sized KPI cards once there are 4+ per row and the
       totals run to 8+ digits — shrink them for every print size, not just A5, so a long comma-grouped
       number fits on one line instead of wrapping mid-digit-group. */
    body[data-print-size] .pw-printing .pw-kpi { padding: 12px 14px; gap: 10px; }
    body[data-print-size] .pw-printing .pw-kpi::after { display: none; }
    body[data-print-size] .pw-printing .pw-kpi-icon { display: none; }
    body[data-print-size] .pw-printing .pw-kpi-label { font-size: 10.5px; }
    body[data-print-size] .pw-printing .pw-kpi-sub { font-size: 10px; }
    body[data-print-size] .pw-printing .pw-kpi-value,
    body[data-print-size] .pw-printing .pw-kpi-wide .pw-kpi-value { font-size: 20px; }

    body[data-print-size] .pw-printing .pw-print-meta {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px;
        padding: 10px 14px; border-radius: 12px; background: var(--pw-bg3); color: var(--pw-text3); font-size: 11px; font-weight: 600;
    }
    body[data-print-size] .pw-printing .pw-print-logo { display: block; height: 42px; width: auto; }
    body[data-print-size] .pw-printing .pw-print-meta-text { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; text-align: end; }
    body[data-print-size] .pw-printing .pw-print-meta i { margin-inline-end: 6px; }
    body[data-print-size="A5"] .pw-printing .pw-print-logo { height: 34px; }

    /* Both sizes keep the wide-screen layout (four KPIs across, income beside "received", ...);
       Bootstrap's lg breakpoint never triggers on a sheet of paper, so it is applied here. */
    body[data-print-size] .pw-printing .col-lg-3 { flex: 0 0 auto; width: 25%; }
    body[data-print-size] .pw-printing .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
    body[data-print-size] .pw-printing .col-lg-6 { flex: 0 0 auto; width: 50%; }
    body[data-print-size] .pw-printing .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }

    /* A5: compact enough that each report fits on a single page */
    body[data-print-size="A5"] .pw-printing .pw-report-head { padding: 10px 14px; gap: 8px; }
    body[data-print-size="A5"] .pw-printing .pw-report-icon { width: 34px; height: 34px; font-size: 17px; border-radius: 11px; }
    body[data-print-size="A5"] .pw-printing .pw-report-title { font-size: 15px; margin-top: 3px; }
    body[data-print-size="A5"] .pw-printing .pw-report-tag { font-size: 10.5px; }
    body[data-print-size="A5"] .pw-printing .pw-report-body { padding: 10px 0 0; }
    body[data-print-size="A5"] .pw-printing .pw-print-meta { margin-bottom: 10px; padding: 6px 10px; font-size: 10px; }
    body[data-print-size="A5"] .pw-printing .row { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
    body[data-print-size="A5"] .pw-printing .row.mb-3 { margin-bottom: .5rem !important; }

    body[data-print-size="A5"] .pw-printing .pw-kpi { padding: 9px 11px; gap: 8px; border-radius: 12px; }
    body[data-print-size="A5"] .pw-printing .pw-kpi::after { display: none; }
    body[data-print-size="A5"] .pw-printing .pw-kpi-icon { display: none; }
    body[data-print-size="A5"] .pw-printing .pw-kpi-label { font-size: 10px; }
    body[data-print-size="A5"] .pw-printing .pw-kpi-sub { font-size: 9.5px; margin-top: 0; }
    body[data-print-size="A5"] .pw-printing .pw-kpi-value,
    body[data-print-size="A5"] .pw-printing .pw-kpi-wide .pw-kpi-value { font-size: 18px; margin-top: 0; }

    body[data-print-size="A5"] .pw-printing .pw-equation { gap: 4px; margin-top: 8px; }
    body[data-print-size="A5"] .pw-printing .pw-eq-chip { padding: 3px 7px; border-radius: 8px; }
    body[data-print-size="A5"] .pw-printing .pw-eq-chip small { font-size: 8.5px; }
    body[data-print-size="A5"] .pw-printing .pw-eq-chip b { font-size: 11px; }
    body[data-print-size="A5"] .pw-printing .pw-eq-op { font-size: 13px; }

    body[data-print-size="A5"] .pw-printing .pw-form-card { padding: 10px 12px; border-radius: 12px; }
    body[data-print-size="A5"] .pw-printing .pw-progress { height: 8px; }
    body[data-print-size="A5"] .pw-printing .pw-progress-label { font-size: 16px; }
    body[data-print-size="A5"] .pw-printing .pw-mini-stat { padding: 7px 9px; border-radius: 10px; gap: 2px; }
    body[data-print-size="A5"] .pw-printing .pw-mini-stat span { font-size: 9.5px; }
    body[data-print-size="A5"] .pw-printing .pw-mini-stat b { font-size: 14px; }

    body[data-print-size="A5"] .pw-printing .pw-statement-card { padding: 2px 4px; }
    body[data-print-size="A5"] .pw-printing .pw-statement { min-width: 0; }
    body[data-print-size="A5"] .pw-printing .pw-statement th,
    body[data-print-size="A5"] .pw-printing .pw-statement td { padding: 6px 6px; font-size: 11px; }
    body[data-print-size="A5"] .pw-printing .pw-statement thead th { font-size: 9.5px; }
    body[data-print-size="A5"] .pw-printing .pw-op { width: 17px; height: 17px; margin-inline-end: 6px; font-size: 11px; }
    body[data-print-size="A5"] .pw-printing .pw-st-total td { padding-top: 9px; padding-bottom: 9px; font-size: 14px; }

    /* expenses report */
    body[data-print-size] .pw-printing .pw-chart-card,
    body[data-print-size] .pw-printing .pw-rank-row { break-inside: avoid; }
    body[data-print-size="A5"] .pw-printing .pw-chart-title { margin-bottom: 8px; font-size: 11.5px; }
    body[data-print-size="A5"] .pw-printing .pw-chart-box { height: 170px; }
    body[data-print-size="A5"] .pw-printing .pw-donut-box { height: 120px; }
    body[data-print-size="A5"] .pw-printing .pw-donut-center b { font-size: 13px; }
    body[data-print-size="A5"] .pw-printing .pw-legend { gap: 3px; margin-top: 8px; }
    body[data-print-size="A5"] .pw-printing .pw-legend li { font-size: 10px; }
    body[data-print-size="A5"] .pw-printing .pw-rank { gap: 7px; }
    body[data-print-size="A5"] .pw-printing .pw-rank-no { width: 20px; height: 20px; border-radius: 7px; font-size: 10px; }
    body[data-print-size="A5"] .pw-printing .pw-rank-top b,
    body[data-print-size="A5"] .pw-printing .pw-rank-top span { font-size: 10.5px; }
    body[data-print-size="A5"] .pw-printing .pw-rank-bar { height: 5px; margin: 3px 0 2px; }
    body[data-print-size="A5"] .pw-printing .pw-rank-sub { font-size: 9px; }
    body[data-print-size="A5"] .pw-printing .pw-mini-table { font-size: 10px; }
    body[data-print-size="A5"] .pw-printing .pw-mini-table th,
    body[data-print-size="A5"] .pw-printing .pw-mini-table td { padding: 5px 5px; }
}

/* ── Pager under long lists ── */
.pw-pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 16px; padding: 12px 16px; border-radius: 16px;
    background: var(--pw-bg2); border: 1px solid var(--pw-border);
}
.pw-pager-info { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pw-text3); font-weight: 600; }
.pw-pager-info i { color: var(--pw-primary); }
.pw-pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pw-pager-pages a, .pw-pager-pages .gap span {
    min-width: 36px; height: 36px; padding: 0 10px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--pw-text2);
    background: var(--pw-bg3); border: 1px solid transparent; font-variant-numeric: tabular-nums;
    transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.pw-pager-pages .gap span { background: transparent; color: var(--pw-text3); }
.pw-pager-pages a:hover { border-color: var(--pw-primary); color: var(--pw-primary); transform: translateY(-1px); }
.pw-pager-pages a.active {
    color: #fff; background: linear-gradient(135deg, var(--pw-primary), var(--pw-primary-hover));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pw-primary) 40%, transparent);
}
.pw-pager-pages a.disabled { opacity: .35; pointer-events: none; }
[dir="rtl"] .pw-pager .pw-flip { transform: scaleX(-1); }
.pw-pager-all {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 11px;
    font-size: 13px; font-weight: 700; text-decoration: none; color: var(--pw-primary);
    background: var(--pw-primary-bg); border: 1px solid color-mix(in srgb, var(--pw-primary) 35%, transparent);
    transition: background .15s ease, color .15s ease;
}
.pw-pager-all:hover { background: var(--pw-primary); color: #fff; }