html, body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(16, 104, 171, 0.14), transparent 24%),
        radial-gradient(circle at top right, rgba(112, 184, 45, 0.18), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #eef6fb 56%, #f7fbf2 100%);
    color: #13314e;
}

body::before {
    background: linear-gradient(90deg, rgba(12, 74, 152, 0.92), rgba(18, 115, 169, 0.84), rgba(89, 176, 46, 0.84));
    content: "";
    display: block;
    height: 0.4rem;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1100;
}

:root {
    --hc-blue-900: #0c4a98;
    --hc-blue-700: #1068ab;
    --hc-green-700: #359934;
    --hc-green-500: #70b82d;
    --hc-lime-400: #a9d13b;
    --hc-ink: #13314e;
    --hc-muted: #5f7187;
    --hc-border: rgba(12, 74, 152, 0.12);
    --hc-surface: rgba(255, 255, 255, 0.9);
    --hc-surface-strong: rgba(255, 255, 255, 0.96);
    --hc-shadow: 0 24px 60px rgba(13, 79, 161, 0.12);
    --hc-danger-fill: rgba(157, 46, 46, 0.14);
    --hc-danger-panel: rgba(249, 224, 224, 0.94);
    --hc-danger-header: rgba(157, 46, 46, 0.14);
    --hc-danger-border: rgba(157, 46, 46, 0.58);
    --hc-danger-accent: rgba(157, 46, 46, 0.95);
    --hc-danger-text: #8b2323;
}

a, .btn-link {
    color: #0c4a98;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #0c4a98, #1068ab 52%, #359934);
    border: none;
    box-shadow: 0 14px 28px rgba(12, 74, 152, 0.18);
}

.btn-outline-secondary {
    border-color: rgba(12, 74, 152, 0.2);
    color: #0c4a98;
}

.btn-outline-secondary:hover {
    background: rgba(12, 74, 152, 0.08);
    border-color: rgba(12, 74, 152, 0.28);
    color: #0c4a98;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(16, 104, 171, 0.22);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.top-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(12, 74, 152, 0.1);
    backdrop-filter: blur(10px);
}

.top-row-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}

.session-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.session-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(243, 249, 255, 0.96);
    border: 1px solid rgba(12, 74, 152, 0.12);
    color: #13314e;
    line-height: 1.2;
}

.hero-shell {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 2fr 1fr;
    align-items: start;
    margin-top: 1.5rem;
}

.hero-copy h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 0.95;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.15rem;
    max-width: 60ch;
}

.workflow-list {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding-left: 1.25rem;
}

.hero-panel,
.card-panel,
.summary-card,
.todo-card {
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: 1rem;
    box-shadow: var(--hc-shadow);
    padding: 1.25rem;
}

.content-stack {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.narrow-panel {
    width: min(100%, 44rem);
}

.form-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.login-form-grid {
    grid-template-columns: 1fr;
}

.metric-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.metric-grid > div {
    display: grid;
    gap: 0.2rem;
}

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

.action-card {
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: 0.5rem;
    color: inherit;
    display: grid;
    gap: 0.35rem;
    justify-items: start;
    padding: 1rem;
    text-align: left;
    text-decoration: none;
}

.action-card:hover,
.action-card:focus {
    border-color: var(--hc-blue-700);
    box-shadow: 0 0 0 0.15rem rgba(12, 74, 152, 0.14);
    color: inherit;
}

.action-card-primary {
    border-left: 0.35rem solid var(--hc-green-700);
}

.action-card-module-loyalty {
    border-left: 0.35rem solid #5b4fd6;
    background: linear-gradient(135deg, rgba(91, 79, 214, 0.16), rgba(68, 116, 255, 0.14));
}
.action-card-module-loyalty .summary-label { color: #4433b9; }

.action-card-module-customer {
    border-left: 0.35rem solid #2f6fdb;
    background: linear-gradient(135deg, rgba(47, 111, 219, 0.14), rgba(95, 146, 255, 0.12));
}
.action-card-module-customer .summary-label { color: #1f5ec7; }

.action-card-module-booking {
    border-left: 0.35rem solid #0e9cad;
    background: linear-gradient(135deg, rgba(14, 156, 173, 0.15), rgba(63, 153, 224, 0.1));
}
.action-card-module-booking .summary-label { color: #0f7f8c; }

.action-card-module-documents {
    border-left: 0.35rem solid #d78b1f;
    background: linear-gradient(135deg, rgba(215, 139, 31, 0.16), rgba(248, 198, 77, 0.12));
}
.action-card-module-documents .summary-label { color: #a56409; }

.action-card-module-hygiene {
    border-left: 0.35rem solid #2f9a42;
    background: linear-gradient(135deg, rgba(47, 154, 66, 0.14), rgba(113, 184, 45, 0.12));
}
.action-card-module-hygiene .summary-label { color: #227536; }

.action-card-module-whatsapp {
    border-left: 0.35rem solid #1ea35b;
    background: linear-gradient(135deg, rgba(30, 163, 91, 0.15), rgba(64, 196, 125, 0.12));
}
.action-card-module-whatsapp .summary-label { color: #14793f; }

.action-card-module-offers {
    border-left: 0.35rem solid #9a46c8;
    background: linear-gradient(135deg, rgba(154, 70, 200, 0.15), rgba(230, 101, 173, 0.12));
}
.action-card-module-offers .summary-label { color: #7630a5; }

.action-card-module-alerts {
    border-left: 0.35rem solid #cf222e;
    background: linear-gradient(135deg, rgba(207, 34, 46, 0.14), rgba(244, 108, 117, 0.1));
}
.action-card-module-alerts .summary-label { color: #b01823; }

.loyalty-customer-heading {
    color: var(--hc-text);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 25, 41, 0.58);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.dashboard-modal {
    width: min(100%, 44rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--hc-surface-strong);
    border: 1px solid var(--hc-border);
    border-radius: 1rem;
    box-shadow: var(--hc-shadow);
    padding: 1rem;
}

.dashboard-modal-wide {
    width: min(100%, 60rem);
}

.passkey-prompt-backdrop {
    align-items: flex-start;
    padding-top: 5rem;
}

.passkey-prompt {
    width: min(100%, 34rem);
}

.dashboard-points-input {
    width: 6rem;
}

@media (max-width: 48rem) {
    .dashboard-modal-backdrop {
        padding: 0;
        align-items: stretch;
    }

    .dashboard-modal,
    .dashboard-modal-wide {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

.action-card strong {
    font-size: 1.05rem;
}

.status-grid,
.info-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.status-card {
    background: #fff;
    border: 1px solid var(--hc-border);
    border-left-width: 0.35rem;
    border-radius: 0.5rem;
    padding: 0.9rem;
}

.status-card strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.05rem;
}

.status-label {
    color: var(--hc-muted);
    font-size: 0.88rem;
}

.status-green {
    border-left-color: #1f883d;
}

.status-amber {
    border-left-color: #d29922;
}

.status-red {
    border-left-color: #cf222e;
}

.shortcut-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.shortcut-button {
    background: #fff;
    border: 1px solid var(--hc-border);
    border-radius: 0.5rem;
    color: inherit;
    padding: 0.85rem;
    text-align: left;
}

.shortcut-button:hover,
.shortcut-button:focus {
    border-color: var(--hc-blue-700);
    box-shadow: 0 0 0 0.15rem rgba(12, 74, 152, 0.14);
}

.shortcut-button strong,
.shortcut-button span {
    display: block;
}

.shortcut-button span {
    color: var(--hc-muted);
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.sub-panel {
    border: 1px solid var(--hc-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.details-list {
    display: grid;
    gap: 0.4rem 0.75rem;
    grid-template-columns: max-content 1fr;
}

.details-list dt {
    color: var(--hc-blue-900);
    font-weight: 700;
}

.details-list dd {
    margin: 0;
}

.compact-table {
    font-size: 0.92rem;
}

.command-list {
    display: grid;
    gap: 0.5rem;
}

.command-list code {
    background: rgba(12, 74, 152, 0.06);
    border: 1px solid rgba(12, 74, 152, 0.14);
    border-radius: 0.5rem;
    color: var(--hc-blue-900);
    padding: 0.55rem 0.7rem;
    white-space: normal;
}

.item-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin-bottom: 0.75rem;
}

.form-field {
    align-items: stretch;
    display: grid;
    gap: 0.35rem;
}

.form-field > span {
    color: var(--hc-blue-900);
    font-size: 0.85rem;
    font-weight: 700;
}

.form-field-check {
    align-content: end;
    align-items: center;
    display: inline-flex;
    min-height: 4.5rem;
}

.form-field-wide {
    grid-column: span 2;
}

.store-assignment-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.store-assignment-option {
    border: 1px solid rgba(12, 74, 152, 0.14);
    border-radius: 0.5rem;
    min-height: 3rem;
    padding: 0.6rem 0.75rem;
}

@media (max-width: 48rem) {
    .form-field-wide {
        grid-column: span 1;
    }
}

.button-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.qr-scanner-surface,
.qr-scanner-video {
    background: #07182c;
    border: 1px solid rgba(12, 74, 152, 0.16);
    border-radius: 0.5rem;
    display: block;
    margin: 1rem 0;
    max-height: 24rem;
    max-width: 100%;
    width: min(100%, 32rem);
}

.qr-scanner-surface {
    min-height: 18rem;
    overflow: hidden;
}

.qr-scanner-surface video {
    display: block;
    height: auto;
    max-height: 24rem;
    width: 100%;
}

.vault-section-header {
    align-items: end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.vault-section-header h3 {
    font-size: 1.25rem;
    margin-bottom: 0.2rem;
}

.vault-month-group {
    margin-top: 1rem;
}

.vault-month-group h4 {
    color: var(--hc-blue-900);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.accountant-actions {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 10rem minmax(14rem, 1fr) auto auto;
    min-width: min(100%, 38rem);
}

@media (max-width: 56rem) {
    .vault-section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .accountant-actions {
        grid-template-columns: 1fr 1fr;
        min-width: 0;
    }
}

.compact-actions {
    justify-content: flex-end;
}

.template-listing {
    border-top: 1px solid rgba(12, 74, 152, 0.12);
    padding-top: 1rem;
    margin-top: 1rem;
}

.template-help-panel {
    margin-bottom: 2rem;
}

.template-example-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.template-example-list {
    display: grid;
    gap: 0.25rem 0.85rem;
    grid-template-columns: max-content 1fr;
}

.template-example-list dt {
    color: var(--hc-blue-900);
    font-weight: 700;
}

.template-example-list dd {
    margin: 0 0 0.55rem;
    min-width: 0;
}

.json-example {
    background: rgba(12, 74, 152, 0.06);
    border: 1px solid rgba(12, 74, 152, 0.14);
    border-radius: 0.5rem;
    color: var(--hc-blue-900);
    display: block;
    overflow-x: auto;
    padding: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 48rem) {
    .template-example-list {
        grid-template-columns: 1fr;
    }
}

.compliance-method-card {
    margin-top: 0.75rem;
    padding: 1rem;
}

.compliance-method-card textarea {
    resize: vertical;
}

.content-stack label:not(.form-field) {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.95rem;
}

.summary-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.summary-card {
    display: grid;
    gap: 0.35rem;
}

.summary-card strong {
    font-size: 1.8rem;
    line-height: 1;
}

.status-card {
    border-width: 2px;
}

.status-card-good {
    border-color: rgba(53, 153, 52, 0.32);
    background: rgba(220, 241, 222, 0.98);
}

.status-card-warn {
    border-color: rgba(214, 129, 42, 0.42);
    background: rgba(255, 238, 212, 0.98);
}

.status-card-danger {
    border-color: var(--hc-danger-border);
    background: rgba(245, 214, 214, 0.98);
}

.summary-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1068ab;
}

.summary-meta,
.muted-text {
    color: #5f7187;
    font-size: 0.92rem;
}

.section-heading-row {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.filter-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.data-table th {
    color: #1068ab;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.status-good {
    background: rgba(53, 153, 52, 0.14);
    color: #246027;
}

.status-warn {
    background: rgba(214, 129, 42, 0.18);
    color: #925019;
}

.status-danger {
    background: var(--hc-danger-fill);
    color: var(--hc-danger-text);
}

.status-idle {
    background: rgba(19, 49, 78, 0.08);
    color: #38516a;
}

.readiness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.readiness-card {
    min-height: 220px;
}

.store-priority-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.store-priority-card {
    display: grid;
    gap: 1rem;
}

.store-priority-header {
    margin-bottom: 0;
}

.store-priority-header h3 {
    margin-bottom: 0.2rem;
}

.store-summary-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.1rem;
}

.store-summary-row .summary-label {
    min-width: 6.25rem;
}

.section-chip-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.section-chip {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(12, 74, 152, 0.1);
    border-radius: 0.9rem;
    color: inherit;
    display: grid;
    gap: 0.45rem;
    padding: 0.95rem;
    text-align: left;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.section-chip:hover {
    box-shadow: 0 14px 30px rgba(13, 79, 161, 0.14);
    transform: translateY(-1px);
}

.section-chip-red {
    border-color: rgba(157, 46, 46, 0.35);
    background: rgba(157, 46, 46, 0.05);
}

.section-chip-amber {
    border-color: rgba(169, 209, 59, 0.52);
    background: rgba(169, 209, 59, 0.08);
}

.section-chip-green {
    border-color: rgba(53, 153, 52, 0.35);
    background: rgba(53, 153, 52, 0.05);
}

.section-chip-title {
    font-size: 1rem;
    font-weight: 700;
}

.section-chip-summary {
    color: #26405a;
    font-size: 0.92rem;
}

.section-chip-meta {
    color: #5f7187;
    font-size: 0.84rem;
}

.task-board-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}


/* Wallet badges: official-style Add to Apple/Google Wallet image buttons. */
.wallet-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.wallet-badge {
    display: inline-flex;
    line-height: 0;
    border-radius: 8px;
}

.wallet-badge img {
    height: 48px;
    width: auto;
    display: block;
}

.wallet-badge:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* Customer card QR: large enough to scan comfortably from a counter. */
.qr-card-preview {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.qr-card-preview img {
    width: min(320px, 85vw);
    height: auto;
}


/* Cookie consent banner */
.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    width: min(100% - 2rem, 46rem);
    z-index: 1300;
    background: var(--hc-surface-strong, #fff);
    border: 1px solid var(--hc-border);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(8, 25, 41, 0.18);
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
    justify-content: space-between;
}

.cookie-banner-text {
    flex: 1 1 24rem;
}

.cookie-banner-text p {
    margin: 0.25rem 0 0;
    color: #5f7187;
    font-size: 0.92rem;
}

.cookie-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}