/* Palette pulled from btqscrubs.com: the muted teal of the site header (#6ba5a2),
   the scrub-blue of the hero garment (#9cc8de), and its cool grey backdrop.
   --brand-teal is the decorative hue; --primary is a deeper step of the same
   family, because white text on #6ba5a2 only reaches ~2.9:1 contrast. */
:root {
    color-scheme: light dark;

    --brand-teal: #6ba5a2;
    --brand-blue: #9cc8de;

    /* Sage/eucalyptus field from the product banner, with the pale sweep across it. */
    --bg: #a6c3b9;
    --bg-top: #b6cfc7;
    --bg-bottom: #97b8ad;
    --sweep: rgba(255, 255, 255, 0.30);
    --glow-teal: rgba(107, 165, 162, 0.30);
    --glow-blue: rgba(156, 200, 222, 0.22);

    --surface: rgba(255, 255, 255, 0.94);
    --surface-solid: #ffffff;
    --surface-glass: rgba(174, 200, 191, 0.78);

    --ink: #16303a;
    --muted: #586f77;
    --line: rgba(22, 48, 58, 0.10);

    /* For the eyebrow, which sits on the sage field rather than on a white card:
       --primary only reaches 2.6:1 there. This is the same teal darkened until it
       clears 4.5:1 against the darkest point of the gradient. */
    --ink-on-bg: #2b4241;

    --primary: #35726f;
    --primary-strong: #2a5d5a;
    --primary-ink: #ffffff;
    --primary-soft: rgba(107, 165, 162, 0.16);

    --accent-line: rgba(107, 155, 190, 0.32);
    --accent-soft: rgba(156, 200, 222, 0.24);
    --accent-ink: #2c6484;

    --danger-soft: rgba(200, 74, 60, 0.10);
    --danger-line: rgba(200, 74, 60, 0.30);

    --radius: 16px;
    --radius-sm: 12px;
    --shadow-sm: 0 1px 2px rgba(22, 48, 58, 0.05), 0 10px 26px -16px rgba(22, 48, 58, 0.32);
    --shadow-lg: 0 2px 4px rgba(22, 48, 58, 0.04), 0 28px 60px -28px rgba(22, 48, 58, 0.40);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f2129;
        --bg-top: #16303a;
        --bg-bottom: #0a181d;
        --sweep: rgba(107, 165, 162, 0.10);
        --glow-teal: rgba(107, 165, 162, 0.20);
        --glow-blue: rgba(156, 200, 222, 0.12);

        --surface: rgba(255, 255, 255, 0.06);
        --surface-solid: #16292f;
        --surface-glass: rgba(15, 33, 41, 0.75);

        --ink: #e3edef;
        --muted: #8fa8ae;
        --line: rgba(255, 255, 255, 0.10);
        --ink-on-bg: #7ec0bc;

        --primary: #7ec0bc;
        --primary-strong: #a3d5d1;
        --primary-ink: #06231f;
        --primary-soft: rgba(107, 165, 162, 0.18);

        --accent-line: rgba(156, 200, 222, 0.30);
        --accent-soft: rgba(156, 200, 222, 0.14);
        --accent-ink: #a8d3e8;

        --danger-soft: rgba(248, 113, 113, 0.12);
        --danger-line: rgba(248, 113, 113, 0.32);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 26px -16px rgba(0, 0, 0, 0.70);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.30), 0 28px 60px -28px rgba(0, 0, 0, 0.85);
    }
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Prompt", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", "Sukhumvit Set", Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Ambient backdrop. Fixed layer so it never joins the scroll box or adds width.
   Bottom layer is the sage field; above it sits the banner's pale sweep — a wide
   soft-edged ellipse anchored off the left edge, echoing the arc in the artwork. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 65% at -10% 42%, var(--sweep), transparent 58%),
        radial-gradient(900px 560px at 100% 0%, var(--glow-blue), transparent 55%),
        radial-gradient(1000px 600px at 5% -10%, var(--glow-teal), transparent 62%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 45%, var(--bg-bottom) 100%);
    pointer-events: none;
}

button,
input {
    font: inherit;
}

h1,
h2,
p {
    margin: 0;
}

.app-shell {
    width: min(100%, 760px);
    margin: 0 auto;
    padding:
        18px
        max(14px, env(safe-area-inset-right))
        calc(32px + env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
}

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 2px 18px;
}

.topbar > div {
    min-width: 0;
}

.topbar-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.eyebrow,
.label {
    display: block;
    margin: 0 0 4px;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* .label lives inside a white card; .eyebrow lives on the sage field. */
.eyebrow {
    color: var(--ink-on-bg);
}

h1 {
    font-size: clamp(1.45rem, 5.2vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    backdrop-filter: blur(12px);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font-size: 1.3rem;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.icon-button:active {
    transform: scale(0.96);
}

.icon-button:disabled {
    cursor: default;
}

.icon-button.is-loading span {
    animation: spin 760ms linear infinite;
}

/* Intrinsic column counts: collapse to one column when the row can no longer
   hold two comfortably, so no fixed viewport breakpoint has to guess. */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.summary-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

/* Tint layered over the card's own surface, not swapped for it — otherwise the
   translucent blue would sample the sage backdrop and go muddy. */
.summary-card.accent {
    border-color: var(--accent-line);
    background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface-solid);
}

.summary-card span,
.summary-card small {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
}

.summary-card strong {
    display: block;
    margin: 6px 0 2px;
    font-size: clamp(1.4rem, 5.5vw, 2rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 0 12px;
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-solid);
    box-shadow: var(--shadow-sm);
}

.search-box:focus-within {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--primary-soft);
}

.search-box span {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 1.35rem;
}

.search-box input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    color: var(--ink);
}

/* minmax(0, ...) + min-width:0 on the item are what actually stop the blowout.
   A grid track defaults to minmax(auto, 1fr), and `auto` floors at min-content —
   so a nowrap payment URL inside a card was sizing the whole column to the URL's
   full length and pushing the page ~77px wider than the phone. Clamp the floor
   here and the ellipsis in .link-preview finally has a width to ellipsize against. */
.order-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.order-card {
    container-type: inline-size;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
}

/* The pill carries long Thai status labels ("คืนเงินแล้ว / ยกเลิกการสั่งซื้อ").
   It must be allowed to shrink and to drop onto its own line. */
.order-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 12px;
}

.order-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

.order-head h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.status-pill {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
}

.order-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.order-meta div {
    min-width: 0;
}

.order-meta dt {
    color: var(--muted);
    font-size: 0.75rem;
}

.order-meta dd {
    margin: 3px 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.link-preview {
    margin: 4px 0 12px;
    padding: 10px 12px;
    min-width: 0;
    overflow: hidden;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--muted);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The card, not the viewport, is what actually constrains these buttons — on a
   720px+ screen the list goes 2-up and each card is *narrower* than on a phone.
   Measured: one row of all three labels needs 267px of card inline size, so 300px
   is the switch point (leaves headroom for iOS Thai fonts, which run wider).
   Below it, "เปิด" drops to its own full-width row. */
.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.actions .button.ghost {
    grid-column: 1 / -1;
}

@container (min-width: 300px) {
    .actions {
        grid-template-columns: 1fr 1fr auto;
    }

    .actions .button.ghost {
        grid-column: auto;
        padding: 0 20px;
    }
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 140ms ease, background 140ms ease;
}

.button:active {
    transform: scale(0.98);
}

.button.primary {
    background: var(--primary);
    color: var(--primary-ink);
}

.button.primary:hover {
    background: var(--primary-strong);
}

.button.secondary {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.button.ghost {
    border-color: var(--line);
    background: var(--surface-solid);
    color: var(--ink);
}

.alert,
.empty-state {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    overflow-wrap: anywhere;
}

.alert {
    border-color: var(--danger-line);
    background: var(--danger-soft);
}

.alert strong,
.empty-state strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.05rem;
}

[hidden] {
    display: none !important;
}

.qr-dialog {
    width: min(92vw, 380px);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    box-shadow: var(--shadow-lg);
}

.qr-dialog::backdrop {
    background: rgba(6, 12, 20, 0.55);
    backdrop-filter: blur(4px);
}

.qr-panel {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--surface-solid);
    color: var(--ink);
}

.qr-panel h2 {
    padding-right: 44px;
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}

.dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-solid);
    color: var(--ink);
    cursor: pointer;
    font-size: 1.3rem;
}

/* QR stays on a white plate in both themes — the PNG is dark-on-white. */
.qr-box {
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #ffffff;
}

.qr-box img {
    width: 240px;
    max-width: 100%;
    height: auto;
}

#qrLink {
    max-height: 52px;
    overflow: auto;
    color: var(--muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 10;
    min-width: 180px;
    max-width: min(420px, calc(100% - 28px));
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--bg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translate(-50%, 18px);
    transition: opacity 160ms ease, transform 160ms ease;
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 720px) {
    .app-shell {
        padding-top: 28px;
    }

    .order-list {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .order-card {
        align-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Login screen. Centred on the same sage backdrop as the dashboard, so the two
   pages read as one app rather than a gate bolted onto the front. */
.login-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding:
        24px
        max(16px, env(safe-area-inset-right))
        calc(24px + env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
}

.login-card {
    width: min(100%, 400px);
    padding: 28px 24px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
}

/* Inside the card the eyebrow sits on white, so the on-field darkening isn't
   needed — take it back to the brand step. */
.login-card .eyebrow {
    color: var(--primary);
}

.login-card h1 {
    margin: 0;
}

.login-hint {
    margin: 8px 0 22px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.field {
    display: block;
    margin-bottom: 14px;
}

.field-label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.field input {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface-solid);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font: inherit;
}

.field input:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--primary-soft);
}

.login-error {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--danger-line);
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.login-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    font-size: 1rem;
}

.login-submit:disabled {
    cursor: default;
    opacity: 0.7;
}