/* ============================================================
   Kanegeji Parish ERP – Custom Styles v2.0
   Mobile-first · Dark mode · PWA-ready
   ============================================================ */

/* ── CSS Variables (Light mode) ───────────────────────────── */
:root {
    --sidebar-width:      250px;
    --sidebar-bg:         #1B3A6B;
    --sidebar-text:       #c8d8f4;
    --sidebar-hover:      rgba(255,255,255,0.12);
    --sidebar-active:     rgba(255,255,255,0.22);
    --sidebar-border:     rgba(255,255,255,0.1);
    --topbar-height:      56px;
    --bottom-nav-height:  60px;
    --color-income:       #28a745;
    --color-expense:      #dc3545;
    --color-neutral:      #0d6efd;
    --gold:               #C9A84C;
    --navy:               #1B3A6B;

    /* Layout surfaces */
    --body-bg:            #f0f2f5;
    --card-bg:            #ffffff;
    --topbar-bg:          #ffffff;
    --topbar-border:      #e9ecef;
    --topbar-text-color:  #222;
    --topbar-icon-color:  #555;
    --text-muted-color:   #6c757d;
    --border-color:       #dee2e6;

    --transition: .2s ease;
}

/* ── Dark mode ────────────────────────────────────────────── */
[data-bs-theme="dark"],
.dark-mode {
    --body-bg:            #0f1117;
    --card-bg:            #1c1f26;
    --topbar-bg:          #141720;
    --topbar-border:      #2a2d35;
    --topbar-text-color:  #e8ecf0;
    --topbar-icon-color:  #aab0bc;
    --sidebar-bg:         #101520;
    --sidebar-border:     rgba(255,255,255,0.07);
    --text-muted-color:   #8a95a3;
    --border-color:       #2a2d35;

    color-scheme: dark;
}
[data-bs-theme="dark"] body,
.dark-mode body { background: var(--body-bg); color: var(--topbar-text-color); }
[data-bs-theme="dark"] .card { background: var(--card-bg); border-color: var(--border-color); }
[data-bs-theme="dark"] .table { color: var(--topbar-text-color); }
[data-bs-theme="dark"] .table-light { background: #1e2230 !important; color: #c0c8d8; }
[data-bs-theme="dark"] .modal-content { background: var(--card-bg); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background: #252830; color: #e0e6ef; border-color: var(--border-color); }
[data-bs-theme="dark"] .form-control::placeholder { color: #6a7080; }
[data-bs-theme="dark"] .dropdown-menu { background: #1e2230; border-color: var(--border-color); }
[data-bs-theme="dark"] .dropdown-item { color: #c8d0df; }
[data-bs-theme="dark"] .dropdown-item:hover { background: #2a2d3e; }

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--body-bg);
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.88rem;
    transition: background var(--transition), color var(--transition);
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    -webkit-overflow-scrolling: touch;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    background: rgba(0,0,0,0.15);
}

.sidebar-logo { flex-shrink: 0; }

.sidebar-brand {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.parish-name {
    font-weight: 700;
    font-size: .88rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.diocese {
    font-size: .68rem;
    color: var(--gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .5px;
}

.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 10px 0 80px;
    flex: 1;
}

.sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: 0;
    transition: background var(--transition), color var(--transition);
    font-size: .88rem;
    position: relative;
}

.sidebar-nav li a:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-nav li.active > a {
    background: var(--sidebar-active);
    color: #fff;
    font-weight: 600;
    border-left: 3px solid var(--gold);
}

.sidebar-nav li.active > a::before {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--gold);
}

.sidebar-nav li a .bi { font-size: 1rem; flex-shrink: 0; }

.nav-section-title {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    padding: 14px 16px 4px;
    cursor: default;
}

/* ── Sidebar backdrop (mobile) ────────────────────────────── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1049;
    backdrop-filter: blur(2px);
}

.sidebar-backdrop.show { display: block; }

/* ── Mobile sidebar behaviour ─────────────────────────────── */
@media (max-width: 767.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-wrapper { margin-left: 0 !important; }
}

/* ── Desktop sidebar ──────────────────────────────────────── */
@media (min-width: 768px) {
    .main-wrapper { margin-left: var(--sidebar-width); }
}

/* ── Main wrapper ─────────────────────────────────────────── */
.main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition);
}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-height);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    position: sticky;
    top: 0;
    z-index: 1040;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: background var(--transition);
}

.topbar .container-fluid { padding: 0 12px; }
.sidebar-toggle { color: var(--topbar-icon-color) !important; }

/* ── Topbar buttons ───────────────────────────────────────── */
.topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--topbar-icon-color);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    padding: 0 8px;
    flex-shrink: 0;
    text-decoration: none;
    font-size: 1.05rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.topbar-btn:hover {
    background: rgba(27,58,107,.07);
    border-color: var(--navy);
    color: var(--navy);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(27,58,107,.15);
}
[data-bs-theme="dark"] .topbar-btn {
    background: rgba(255,255,255,.04);
    border-color: var(--border-color);
}
[data-bs-theme="dark"] .topbar-btn:hover {
    background: rgba(255,255,255,.10);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 2px 6px rgba(201,168,76,.18);
}
.topbar-btn-danger {
    color: #dc3545;
    border-color: rgba(220,53,69,.35);
}
.topbar-btn-danger:hover {
    background: rgba(220,53,69,.08) !important;
    border-color: #dc3545 !important;
    color: #b02a37 !important;
    box-shadow: 0 2px 6px rgba(220,53,69,.2) !important;
}
[data-bs-theme="dark"] .topbar-btn-danger {
    color: #f87171;
    border-color: rgba(248,113,113,.3);
}
[data-bs-theme="dark"] .topbar-btn-danger:hover {
    background: rgba(220,53,69,.15) !important;
    border-color: #f87171 !important;
    color: #fca5a5 !important;
}

/* ── Topbar divider ───────────────────────────────────────── */
.topbar-divider {
    width: 1px;
    height: 22px;
    background: var(--topbar-border);
    margin: 0 2px;
    flex-shrink: 0;
}

/* ── Topbar profile link ──────────────────────────────────── */
.topbar-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background var(--transition);
    overflow: hidden;
    max-width: 200px;
}
.topbar-profile:hover { background: rgba(27,58,107,.08); text-decoration: none; }
[data-bs-theme="dark"] .topbar-profile:hover { background: rgba(255,255,255,.08); }

.topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.topbar-userinfo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.topbar-username {
    font-size: .82rem;
    font-weight: 600;
    color: var(--topbar-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    line-height: 1.3;
}
.topbar-role {
    font-size: .65rem;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.1;
}

/* ── Language pill ────────────────────────────────────────── */
.lang-pill {
    display: inline-flex;
    border-radius: 9px;
    border: 1.5px solid var(--border-color);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--card-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.lang-btn {
    padding: 5px 11px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted-color);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    letter-spacing: .6px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
}
.lang-btn:hover {
    background: rgba(27,58,107,.08);
    color: var(--navy);
    text-decoration: none;
}
.lang-btn.active {
    background: var(--navy);
    color: #fff;
    font-weight: 800;
}
[data-bs-theme="dark"] .lang-pill {
    background: rgba(255,255,255,.04);
    border-color: var(--border-color);
}
[data-bs-theme="dark"] .lang-btn { color: var(--text-muted-color); }
[data-bs-theme="dark"] .lang-btn:hover { background: rgba(255,255,255,.10); color: #fff; }
[data-bs-theme="dark"] .lang-btn.active { background: var(--gold); color: var(--navy); font-weight: 800; }

/* ── Page title (topbar) ──────────────────────────────────── */
.page-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--topbar-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* ── Role badge ───────────────────────────────────────────── */
.role-badge {
    background: rgba(27,58,107,.12);
    color: var(--navy);
    font-weight: 600;
    border-radius: 20px;
    padding: .15rem .6rem;
    text-transform: uppercase;
}
[data-bs-theme="dark"] .role-badge { background: rgba(201,168,76,.2); color: var(--gold); }

/* ── Page content ─────────────────────────────────────────── */
.page-content {
    flex: 1;
    padding-bottom: calc(var(--bottom-nav-height) + 1rem);
}

/* ── Flash messages ───────────────────────────────────────── */
.flash-container { position: relative; z-index: 10; }
.flash-msg { border-radius: 10px; font-size: .88rem; }

/* ── Mobile bottom navigation ─────────────────────────────── */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-height);
    background: var(--topbar-bg);
    border-top: 1px solid var(--topbar-border);
    z-index: 1045;
    display: flex;
    align-items: stretch;
    padding: 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,.1);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--text-muted-color);
    font-size: .65rem;
    font-weight: 500;
    transition: color var(--transition);
    padding: 6px 4px 4px;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-width: 48px;
}

/* Icon wrapper — becomes pill when active */
.bottom-nav-item .bi {
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 24px;
    border-radius: 12px;
    transition: background var(--transition), color var(--transition);
}

/* Active state: filled colored pill behind icon */
.bottom-nav-item.active {
    color: var(--navy);
    font-weight: 700;
}
.bottom-nav-item.active .bi {
    background: rgba(27,58,107,.13);
    color: var(--navy);
}

/* Hover (touch feedback) */
.bottom-nav-item:hover .bi,
.bottom-nav-item:focus .bi {
    background: rgba(27,58,107,.07);
}
.bottom-nav-item:active { opacity: .75; }

[data-bs-theme="dark"] .bottom-nav-item.active { color: var(--gold); }
[data-bs-theme="dark"] .bottom-nav-item.active .bi {
    background: rgba(201,168,76,.18);
    color: var(--gold);
}
[data-bs-theme="dark"] .bottom-nav-item:hover .bi,
[data-bs-theme="dark"] .bottom-nav-item:focus .bi {
    background: rgba(255,255,255,.07);
}
[data-bs-theme="dark"] .mobile-bottom-nav { background: var(--topbar-bg); }

/* Desktop: hide bottom nav, add bottom padding */
@media (min-width: 768px) {
    .mobile-bottom-nav { display: none !important; }
    .page-content { padding-bottom: 1.5rem; }
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    transition: box-shadow var(--transition);
}

/* ── KPI Cards ────────────────────────────────────────────── */
.kpi-card {
    border-radius: 14px;
    border: none;
    position: relative;
    overflow: hidden;
    min-height: 110px;
    transition: transform .15s, box-shadow .15s;
}

.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }

.kpi-card .kpi-icon {
    position: absolute;
    right: -8px;
    bottom: -8px;
    font-size: 4rem;
    opacity: .15;
    line-height: 1;
}

.kpi-card .kpi-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
}

.kpi-card .kpi-label {
    font-size: .75rem;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    margin-bottom: .15rem;
}

.kpi-card .kpi-sub {
    font-size: .72rem;
    opacity: .75;
}

/* ── Tables ───────────────────────────────────────────────── */
.table { font-size: .87rem; }
.table th { font-weight: 600; white-space: nowrap; }
.table-hover tbody tr:hover { background: rgba(27,58,107,.04); }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background: rgba(255,255,255,.04); }

/* ── Badges ───────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .3px; }

/* ── Status badges (transactions) ────────────────────────── */
.status-APPROVED  { background: #d1fae5; color: #065f46; }
.status-DRAFT     { background: #f1f5f9; color: #475569; }
.status-SUBMITTED { background: #fef9c3; color: #713f12; }
.status-REJECTED  { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .status-APPROVED  { background: #064e3b; color: #6ee7b7; }
[data-bs-theme="dark"] .status-DRAFT     { background: #1e2330; color: #94a3b8; }
[data-bs-theme="dark"] .status-SUBMITTED { background: #3d2d00; color: #fcd34d; }
[data-bs-theme="dark"] .status-REJECTED  { background: #450a0a; color: #fca5a5; }

/* ── Budget progress bar ──────────────────────────────────── */
.budget-bar { transition: width .5s ease; }

/* ── Form controls ────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: 8px;
    font-size: .88rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(27,58,107,.15);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn { border-radius: 8px; font-weight: 500; }
.btn-sm { font-size: .8rem; }
.btn-xs {
    padding: .15rem .45rem;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: .25rem;
}

/* Touch-friendly: minimum 44px tap target on mobile */
@media (max-width: 767.98px) {
    .btn { min-height: 38px; }
    .form-control, .form-select { min-height: 42px; }
}

/* ── Pagination ───────────────────────────────────────────── */
.page-link { border-radius: 8px !important; margin: 0 2px; }

/* ── Touch target improvements ───────────────────────────── */
.topbar-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
.topbar-btn:active { opacity: .8; transform: scale(.96); }
.topbar-divider-wide { width: 1px; height: 22px; background: var(--topbar-border); margin: 0 6px; flex-shrink: 0; }

/* ── Print styles ─────────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .mobile-bottom-nav, .flash-container,
    .no-print, #pwaInstallBanner, .sidebar-backdrop { display: none !important; }
    .main-wrapper { margin-left: 0 !important; }
    .page-content { padding: 0 !important; }
    body { background: white !important; font-size: 11pt; }
    .card { box-shadow: none !important; border: 1px solid #ddd; }
    .kpi-card { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ── Scrollbar (desktop, custom) ──────────────────────────── */
@media (min-width: 768px) {
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(27,58,107,.25); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(27,58,107,.45); }
}

/* ── Responsive table on mobile ───────────────────────────── */
@media (max-width: 575.98px) {
    .table-responsive { font-size: .8rem; }
    /* Allow card-mode tables to escape responsive overflow */
    .table-responsive.card-mode { overflow: visible !important; }
}

/* ── Mobile card table (add .table-card-mobile to <table>) ── */
@media (max-width: 575.98px) {
    .table-card-mobile { border: none; }
    .table-card-mobile thead { display: none; }
    .table-card-mobile tbody tr {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        margin-bottom: 10px;
        background: var(--card-bg);
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .table-card-mobile tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        border: none;
        border-bottom: 1px solid var(--border-color);
        font-size: .84rem;
    }
    .table-card-mobile tbody td:last-child { border-bottom: none; }
    .table-card-mobile tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted-color);
        font-size: .73rem;
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-right: 8px;
        flex-shrink: 0;
        min-width: 80px;
    }
    .table-card-mobile tbody tr:hover { background: var(--card-bg) !important; }
    [data-bs-theme="dark"] .table-card-mobile tbody tr { background: var(--card-bg); }
}

/* ── Animation: fade-in for page content ─────────────────── */
.page-content { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Loading spinner ──────────────────────────────────────── */
.spinner-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

/* ── Offline banner ───────────────────────────────────────── */
#offlineBadge { display: none; }
body.offline #offlineBadge { display: inline-flex !important; }

/* ── Focus visible (accessibility) ───────────────────────── */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
[data-bs-theme="dark"] :focus-visible { outline-color: var(--gold); }

/* ── Selection color ──────────────────────────────────────── */
::selection { background: var(--navy); color: white; }
[data-bs-theme="dark"] ::selection { background: var(--gold); color: var(--navy); }

/* ── Receipt page ─────────────────────────────────────────── */
.receipt-page {
    background: white;
    width: 210mm;
    min-height: 148mm;
    margin: 20px auto;
    padding: 18mm 14mm;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    font-family: 'Times New Roman', serif;
}
.receipt-header { text-align: center; border-bottom: 3px double #1B3A6B; padding-bottom: 10px; margin-bottom: 14px; }
.receipt-header h1 { font-size: 1.3rem; font-weight: bold; color: #1B3A6B; margin: 0; }
.receipt-header h2 { font-size: 1rem; margin: 2px 0; color: #333; }
.receipt-title { text-align: center; margin: 12px 0; }
.receipt-title h3 { font-size: 1.35rem; font-weight: bold; letter-spacing: 3px; color: #1B3A6B; }
.receipt-number { font-size: 1.05rem; font-weight: bold; color: #555; }
.receipt-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.receipt-table th { text-align: left; padding: 5px 8px; width: 38%; color: #555; font-weight: normal; font-size: .85rem; }
.receipt-table td { padding: 5px 8px; font-weight: bold; font-size: .9rem; }
.receipt-table tr { border-bottom: 1px solid #eee; }
.amount-box { border: 2px solid #1B3A6B; padding: 8px 12px; margin: 10px 0; background: #f8f9ff; border-radius: 6px; }
.amount-box .amount { font-size: 1.55rem; font-weight: bold; color: #1B3A6B; }
.amount-words { font-style: italic; color: #333; font-size: .9rem; }
.signatures { display: flex; justify-content: space-between; margin-top: 28px; }
.sig-line { text-align: center; width: 45%; border-top: 1px solid #333; padding-top: 5px; font-size: .82rem; color: #555; }
.verification-box { border: 1px dashed #999; padding: 8px; margin: 10px 0; font-size: .78rem; color: #666; border-radius: 4px; }
.verification-code { font-family: monospace; font-size: 1.05rem; font-weight: bold; letter-spacing: 2px; color: #1B3A6B; }
.receipt-footer { text-align: center; margin-top: 14px; border-top: 1px solid #ccc; padding-top: 7px; font-size: .72rem; color: #888; }
.qr-section { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0; }
#qrCanvas { border: 1px solid #e5e7eb; border-radius: 4px; padding: 4px; }

@media print {
    body { background: white; }
    .receipt-page { box-shadow: none; margin: 0; padding: 12mm 10mm; width: 100%; }
    .no-print { display: none !important; }
    @page { size: A5; margin: 0; }
}