/* ============================================================
   IAP QR — Design System v3 "Mirae Digital"
   Aligned to Mirae Asset Digital Design Guidelines (Ver 2023):
   Orange #E67500 (primary action) · Navy #033C73 (headings/secondary)
   White header with orange accent · squared buttons · gray panels
   All selectors preserved from v2 — visual layer only.
   ============================================================ */

:root {
    /* brand palette (from marketing guidelines) */
    --brand-orange: #E67500;
    --brand-orange-dark: #C76400;
    --brand-orange-soft: #FDF1E3;
    --brand-navy: #033C73;
    --brand-navy-dark: #022B54;
    /* mapped tokens (v2 names kept so nothing else changes) */
    --ink: #1A1A1A; /* body text: near-black per guideline pages */
    --ink-2: var(--brand-navy);
    --ink-3: var(--brand-navy-dark);
    --gold: var(--brand-orange); /* primary accent now = brand orange */
    --gold-deep: var(--brand-orange-dark);
    --bg: #F4F5F7; /* light gray page panels */
    --surface: #FFFFFF;
    --line: #E1E4E8;
    --muted: #6B7280;
    --danger: #C0392B;
    --success: #1E7A55;
    /* system */
    --radius: 10px; /* cards stay softly rounded */
    --radius-s: 4px; /* buttons/inputs squared per guideline */
    --shadow: 0 1px 2px rgba(3,60,115,.05), 0 8px 24px -12px rgba(3,60,115,.12);
    --shadow-lift: 0 2px 4px rgba(3,60,115,.07), 0 14px 32px -14px rgba(3,60,115,.18);
    --thread: var(--brand-orange);
    --font-display: "Inter", -apple-system, "Segoe UI", sans-serif;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
}

a {
    color: var(--brand-navy);
}

:focus-visible {
    outline: 3px solid rgba(230,117,0,.45);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Top bar : white header + orange accent (guideline header) ---------- */
.topbar {
    background: #FFFFFF;
    color: var(--brand-navy);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    box-shadow: 0 1px 0 var(--line);
}

    .topbar::after { /* orange accent line, per brand header */
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 3px;
        background: var(--brand-orange);
    }

    .topbar .brand {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.02rem;
        letter-spacing: .01em;
        color: var(--brand-navy);
    }

        .topbar .brand span {
            color: var(--brand-orange);
        }

    .topbar .sub {
        color: var(--muted);
        font-size: .78rem;
        margin-left: auto;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-weight: 600;
    }

/* ---------- Layout containers ---------- */
.wrap {
    max-width: 1240px;
    margin: 32px auto;
    padding: 0 24px;
}

.wrap-narrow {
    max-width: 560px;
    margin: 28px auto;
    padding: 0 16px;
}

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

    .card + .card {
        margin-top: 20px;
    }

.page-head {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    gap: 12px;
}

    .page-head h1 {
        font-family: var(--font-display);
        font-size: 1.45rem;
        font-weight: 700;
        margin: 0;
        color: var(--brand-navy);
        position: relative;
        padding-bottom: 10px;
    }

        .page-head h1::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 44px;
            height: 3px;
            border-radius: 2px;
            background: var(--brand-orange);
        }

    .page-head .actions {
        margin-left: auto;
        display: flex;
        gap: 10px;
    }

.eyebrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .7rem;
    color: var(--brand-navy);
    font-weight: 700;
    margin: 0 0 6px;
}

/* ---------- Buttons (guideline hierarchy: filled = high, line = medium, ghost/text = low) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: .93rem;
    padding: 12px 22px;
    border-radius: var(--radius-s);
    text-decoration: none;
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .btn:active {
        transform: translateY(1px);
    }
/* Filled navy: secondary-primary actions (sign in, save) */
.btn-primary {
    background: var(--brand-navy);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--brand-navy-dark);
        box-shadow: var(--shadow-lift);
    }
/* Filled orange: THE primary brand action */
.btn-gold {
    background: var(--brand-orange);
    color: #FFFFFF;
}

    .btn-gold:hover {
        background: var(--brand-orange-dark);
        box-shadow: 0 8px 20px -8px rgba(230,117,0,.5);
    }
/* Line button (medium importance) */
.btn-ghost {
    background: #FFFFFF;
    color: var(--brand-navy);
    border: 1.5px solid var(--line);
}

    .btn-ghost:hover {
        border-color: var(--brand-orange);
        color: var(--brand-orange);
    }

.btn-block {
    width: 100%;
    padding: 15px;
    font-size: 1.03rem;
}

/* ---------- Forms ---------- */
.field {
    margin-bottom: 18px;
}

    .field label {
        display: block;
        font-weight: 600;
        font-size: .9rem;
        margin-bottom: 7px;
    }

    .field .hint {
        color: var(--muted);
        font-size: .8rem;
        font-weight: 400;
    }

    .field .req {
        color: var(--brand-orange);
    }

.control {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-s);
    font: inherit;
    font-size: .95rem;
    color: var(--ink);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .control:hover {
        border-color: #C7CDD6;
    }

    .control:focus {
        outline: none;
        border-color: var(--brand-orange);
        box-shadow: 0 0 0 3px rgba(230,117,0,.16);
    }

.row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 520px) {
    .row2 {
        grid-template-columns: 1fr;
    }
}

.row3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

@media (max-width: 720px) {
    .row3 {
        grid-template-columns: 1fr;
    }
}

.form-slim {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 18px;
}

.toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .toggle input {
        width: 20px;
        height: 20px;
        accent-color: var(--brand-orange);
    }

.consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .88rem;
    color: var(--ink);
}

    .consent input {
        margin-top: 3px;
        width: 18px;
        height: 18px;
        accent-color: var(--brand-orange);
        flex: none;
    }

/* ---------- Star rating ---------- */
.stars {
    display: flex;
    gap: 4px;
}

    .stars button {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 2.15rem;
        line-height: 1;
        padding: 2px;
        color: #D9DEE6;
        transition: color .12s ease, transform .12s ease;
    }

        .stars button[aria-checked="true"], .stars button.on {
            color: var(--brand-orange);
        }

        .stars button:hover {
            transform: scale(1.1);
        }

        .stars button:active {
            transform: scale(.92);
        }

/* ---------- Signature pad ---------- */
.sig-wrap {
    border: 1.5px dashed #C7CDD6;
    border-radius: var(--radius-s);
    background: #fff;
    transition: border-color .15s ease;
}

    .sig-wrap:hover {
        border-color: var(--brand-orange);
    }

canvas.sig {
    width: 100%;
    height: 160px;
    display: block;
    touch-action: none;
    border-radius: var(--radius-s);
}

.sig-actions {
    display: flex;
    justify-content: flex-end;
    padding: 6px 10px;
}

    .sig-actions button {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font: inherit;
        font-size: .85rem;
        font-weight: 500;
    }

        .sig-actions button:hover {
            color: var(--danger);
        }

/* ---------- Alerts ---------- */
.alert {
    padding: 13px 16px;
    border-radius: var(--radius-s);
    font-size: .9rem;
    margin-bottom: 16px;
}

.alert-error {
    background: #FBEDEC;
    color: var(--danger);
    border: 1px solid #F0D2D0;
}

.alert-info {
    background: var(--brand-orange-soft);
    color: #7A4A05;
    border: 1px solid #F3DDBE;
}

/* ---------- Table ---------- */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

    .table th, .table td {
        text-align: left;
        padding: 13px 12px;
        border-bottom: 1px solid var(--line);
    }

    .table th {
        color: var(--muted);
        font-weight: 600;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .09em;
    }

    .table tbody tr {
        transition: background .12s ease;
    }

        .table tbody tr:hover td {
            background: #F7F8FA;
        }

    .table td:first-child {
        font-weight: 500;
    }

.badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.badge-on {
    background: #E5F3EC;
    color: var(--success);
}

.badge-off {
    background: #EDF0F5;
    color: var(--muted);
}

/* ---------- Row action links with icons ---------- */
.row-actions {
    white-space: nowrap;
}

    .row-actions a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: .84rem;
        font-weight: 600;
        color: var(--brand-navy);
        text-decoration: none;
        padding: 5px 9px;
        border-radius: 4px;
        transition: background .12s ease, color .12s ease;
    }

        .row-actions a + a {
            margin-left: 2px;
        }

        .row-actions a:hover {
            background: var(--brand-orange-soft);
            color: var(--brand-orange-dark);
        }

    .row-actions svg {
        width: 15px;
        height: 15px;
        fill: currentColor;
        flex: none;
    }

/* ---------- Compact table (report) ---------- */
.table-compact {
    table-layout: auto;
    width: 100%;
    font-size: .82rem;
}

    .table-compact th, .table-compact td {
        padding: 10px 8px;
    }

    .table-compact th {
        font-size: .66rem;
        letter-spacing: .06em;
        white-space: nowrap;
    }

    .table-compact td {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

        .table-compact td:nth-child(2) {
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: .76rem;
            white-space: nowrap;
        }

    .table-compact .badge {
        padding: 2px 8px;
        font-size: .66rem;
    }

/* ---------- Event header (public) ---------- */
.event-head {
    text-align: center;
    margin-bottom: 20px;
}

    .event-head h1 {
        font-family: var(--font-display);
        font-size: 1.35rem;
        font-weight: 700;
        margin: 6px 0 4px;
        color: var(--brand-navy);
    }

    .event-head .meta {
        color: var(--muted);
        font-size: .88rem;
    }

/* ---------- QR display ---------- */
.qr-card {
    text-align: center;
}

    .qr-card img {
        width: 260px;
        max-width: 80%;
        height: auto;
        border: 8px solid #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow-lift);
    }

.qr-url {
    word-break: break-all;
    color: var(--muted);
    font-size: .8rem;
    margin-top: 14px;
}

/* ---------- Success ---------- */
.done {
    text-align: center;
    padding: 10px;
}

    .done .tick {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: #E5F3EC;
        color: var(--success);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        margin-bottom: 14px;
    }

    .done h1 {
        font-family: var(--font-display);
        color: var(--brand-navy);
    }

    .done .ref {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 1.15rem;
        letter-spacing: .05em;
        background: #F7F8FA;
        border: 1px dashed var(--line);
        display: inline-block;
        padding: 8px 18px;
        border-radius: 6px;
    }

.footnote {
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
    margin-top: 22px;
}

/* ---------- Live attendee count ---------- */
.live-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #E5F3EC;
    color: var(--success);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 18px;
}

    .live-count .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--success);
        animation: pulse 2s ease-in-out infinite;
    }

@keyframes pulse {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Print poster (brand colors) ---------- */
.print-only {
    display: none;
}

@media print {
    .no-print, .topbar {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .wrap {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .print-only {
        display: block;
    }

    .poster {
        text-align: center;
        padding: 24mm 14mm 10mm;
        page-break-inside: avoid;
    }

    .poster-band {
        display: inline-block;
        letter-spacing: .3em;
        font-weight: 700;
        font-size: 12pt;
        color: #E67500;
        border-top: 2px solid #E67500;
        border-bottom: 2px solid #E67500;
        padding: 4mm 8mm;
        margin-bottom: 10mm;
    }

    .poster-title {
        font-size: 26pt;
        margin: 0 0 4mm;
        color: #033C73;
    }

    .poster-meta {
        font-size: 13pt;
        color: #444;
        margin: 0 0 12mm;
    }

    .poster-qr {
        width: 110mm;
        height: 110mm;
        border: 2mm solid #033C73;
        border-radius: 4mm;
        padding: 4mm;
    }

    .poster-scan {
        font-size: 18pt;
        font-weight: 700;
        color: #033C73;
        margin: 10mm 0 2mm;
    }

    .poster-scan-hi {
        font-size: 12pt;
        color: #444;
        margin: 0 0 14mm;
    }

    .poster-foot {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #ccc;
        padding-top: 4mm;
        font-size: 9pt;
        color: #666;
    }
}

/* ---------- Location hint status (if the guided-location option is added later) ---------- */
.loc-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.loc-status {
    font-size: .88rem;
}

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

.loc-ok {
    color: var(--success);
    font-weight: 600;
}