:root {
    --wp-accent: #0d6efd;
    --wp-dark: #102542;
    --wp-soft: #eef5ff;
    --wp-success: #1f9d72;
    --wp-danger-soft: #fff1f2;
}

html,
body {
    min-height: 100%;
}

body,
.login-page {
    font-family: 'Outfit', sans-serif;
}

.park-auth {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.18), transparent 30%),
        radial-gradient(circle at bottom right, rgba(31, 157, 114, 0.18), transparent 28%),
        linear-gradient(135deg, #f5f9ff 0%, #eef3f9 100%);
}

.auth-wide {
    width: 520px;
    max-width: calc(100% - 2rem);
}

.auth-note {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(16, 37, 66, 0.08);
    border-radius: 1rem;
    padding: 1rem;
}

.app-wrapper {
    min-height: 100vh;
    overflow-x: hidden;
}

.app-main {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.8), rgba(241,245,249,0.96)),
        radial-gradient(circle at top right, rgba(13, 110, 253, 0.08), transparent 24%);
    min-height: 100vh;
    width: 100%;
    display: block;
}

.app-content,
.app-content .container-fluid {
    width: 100%;
    max-width: 100%;
}

.app-sidebar {
    overflow-y: auto;
}

.sidebar-brand,
.brand-link {
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
}

.small-box .inner h3 {
    font-size: 1.8rem;
}

.summary-tile {
    background: #f8fbff;
    border: 1px solid rgba(16, 37, 66, 0.08);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.summary-tile span,
.eyebrow {
    color: #64748b;
}

.summary-tile strong {
    font-size: 1.4rem;
    color: var(--wp-dark);
}

.summary-tile.accent {
    background: linear-gradient(135deg, #102542 0%, #184b88 100%);
    border-color: transparent;
}

.summary-tile.accent span,
.summary-tile.accent strong {
    color: #fff;
}

.summary-tile.soft-danger {
    background: var(--wp-danger-soft);
}

.card-like {
    height: 100%;
}

.receipt-card {
    position: sticky;
    top: 1rem;
}

.receipt-empty {
    min-height: 100%;
}

.receipt-toolbar {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    flex-wrap: wrap;
}

.receipt-frame {
    display: block;
    width: 100%;
    min-height: 760px;
    border: 0;
    background: #fff;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table > :not(caption) > * > * {
    padding: 1rem;
}

.receipt-page {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    background: #eef3f9;
    color: #111827;
}

.receipt-shell {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1.5rem;
}

.receipt-paper {
    width: min(100%, 80mm);
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
    border-radius: 0.75rem;
    padding: 1rem 0.9rem 1.25rem;
}

.thermal-80 {
    width: min(100%, 80mm);
}

.thermal-58 {
    width: min(100%, 58mm);
}

.thermal-center {
    text-align: center;
}

.thermal-brand {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.thermal-thanks {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.thermal-rule {
    border-top: 1px dashed #111827;
    margin: 0.55rem 0;
}

.thermal-rule.thick {
    border-top-style: solid;
    border-top-width: 2px;
}

.thermal-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.86rem;
    line-height: 1.45;
    margin-bottom: 0.28rem;
}

.thermal-grid strong {
    text-align: right;
    font-weight: 700;
}

.thermal-line-item {
    font-size: 0.86rem;
    line-height: 1.45;
    margin-bottom: 0.2rem;
}

.thermal-payable {
    font-size: 0.96rem;
}

.receipt-window-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 1.5rem 1.5rem;
}

.btn-receipt {
    border: 0;
    background: #111827;
    color: #fff;
    border-radius: 999px;
    padding: 0.7rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-receipt.secondary {
    background: #475569;
}

.park-checkbox-list {
    max-height: 240px;
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .app-main {
        margin-left: 0 !important;
    }

    .receipt-card {
        position: static;
    }

    .receipt-frame {
        min-height: 640px;
    }

    .app-content-header .container-fluid,
    .app-content .container-fluid {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

@media (max-width: 640px) {
    .receipt-paper {
        width: min(100%, 58mm);
        padding: 0.85rem 0.7rem 1rem;
    }

    .thermal-80 {
        width: min(100%, 58mm);
    }

    .receipt-shell {
        padding: 0.75rem;
    }
}

@media print {
    @page {
        size: var(--receipt-print-width, 80mm) auto;
        margin: 0;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body * {
        visibility: hidden !important;
    }

    .no-print,
    .app-header,
    .app-sidebar,
    .app-content-header,
    .summary-tile,
    .small-box,
    .btn,
    .receipt-window-actions,
    .receipt-toolbar {
        display: none !important;
    }

    .receipt-page,
    .receipt-page * {
        visibility: visible !important;
    }

    .receipt-shell,
    .receipt-paper,
    .receipt-page .receipt-shell,
    .receipt-page .receipt-paper {
        visibility: visible !important;
    }

    .receipt-page .receipt-shell {
        display: block !important;
        padding: 0 !important;
        min-height: auto !important;
    }

    .receipt-page .receipt-paper {
        width: var(--receipt-print-width, 80mm) !important;
        max-width: var(--receipt-print-width, 80mm) !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 4mm !important;
    }

    .receipt-page {
        width: var(--receipt-print-width, 80mm) !important;
    }
}