/* ============================================================
   Digiticks — Design System (Hebrew RTL, mobile-first)

   Ported from RetreatReg's design system (DECISIONS.md D17) with the
   token prefix changed from --rr-* to --dt-* and .rr-* to .dt-*.
   ============================================================ */


@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Assistant:wght@400;600;700&display=swap');

/* ---------- Theme variables (event/company brand overrides --dt-primary) ---------- */
:root {
    /* Copper on white is 4.6:1 — the primary button is the one control that must always be
       readable, so the darker copper is the resting colour and the lighter one is for hover. */
    --dt-primary: #A6502D;
    --dt-primary-rgb: 166, 80, 45;
    --dt-primary-dark: #8A4225;
    --dt-primary-soft: rgba(var(--dt-primary-rgb), .1);
    --dt-secondary: #69717D;

    /* Champagne carries dark text, never white: #E8C49A is far too light to sit under it. */
    --dt-accent: #E8C49A;
    --dt-accent-strong: #D9A96F;
    --dt-accent-ink: #302A28;

    /* The warm ground behind highlighted areas — a KPI card, a callout. */
    --dt-cream: #FAF0E6;

    --dt-sidebar-bg: #302A28;
    --dt-sidebar-text: #D8D2CE;
    --dt-sidebar-muted: #9A918C;
    --dt-sidebar-hover: rgba(255, 255, 255, .07);
    --dt-sidebar-border: rgba(255, 255, 255, .09);

    --dt-success: #2E7D52;
    --dt-success-soft: #E3F3EA;
    --dt-warning: #A6631F;
    --dt-warning-soft: #FBF0DE;
    --dt-danger: #C0392B;
    --dt-danger-soft: #FBEAE8;
    --dt-info: #2C5A78;
    --dt-info-soft: #E6F0F6;

    --dt-bg: #F6F7F9;
    --dt-surface: #FFFFFF;
    --dt-text: #20232B;
    --dt-muted: #69717D;
    --dt-border: #E8EAEE;

    --dt-radius: .875rem;
    --dt-radius-sm: .5rem;
    /* Restrained rather than absent: enough to lift a card off the ground, not enough to
       announce itself. */
    --dt-shadow: 0 1px 2px rgba(32, 35, 43, .04), 0 8px 24px rgba(32, 35, 43, .06);
    --dt-shadow-sm: 0 1px 2px rgba(32, 35, 43, .06);

    --dt-sidebar-w: 240px;
    --dt-sidebar-w-collapsed: 72px;
    --dt-font: 'Heebo', 'Assistant', 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
}

/* ---------- Bootstrap bridge ----------
   Bootstrap draws tabs, links, pagination and checkboxes from its own variables, so without
   this the tab bar stays default blue while everything around it is copper. Mapping them
   once is what keeps the palette from having to be repeated per component. */
:root {
    --bs-primary: var(--dt-primary);
    --bs-primary-rgb: var(--dt-primary-rgb);
    --bs-link-color: var(--dt-primary);
    --bs-link-color-rgb: var(--dt-primary-rgb);
    --bs-link-hover-color: var(--dt-primary-dark);
    --bs-border-color: var(--dt-border);
    --bs-body-color: var(--dt-text);
    --bs-secondary-color: var(--dt-muted);
    --bs-emphasis-color: var(--dt-text);
}

/* The selected tab carries champagne with dark ink, matching the selected menu item — the
   same idea of "you are here", said the same way. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--dt-accent);
    color: var(--dt-accent-ink);
    font-weight: 600;
}

.nav-pills .nav-link { color: var(--dt-text); border-radius: 8px; }
.nav-pills .nav-link:hover:not(.active) { background: var(--dt-cream); color: var(--dt-primary-dark); }

.nav-tabs .nav-link.active { color: var(--dt-primary); border-bottom-color: var(--dt-surface); }

.progress { background: var(--dt-border); border-radius: 1rem; }
.progress-bar { background-color: var(--dt-primary); }

.page-item.active .page-link {
    background-color: var(--dt-primary);
    border-color: var(--dt-primary);
}
.page-link { color: var(--dt-primary); }

/* ---------- Dark theme (html[data-theme="dark"], toggled from the UI, saved in localStorage) ---------- */
html[data-theme="dark"] {
    /* Warm neutrals rather than blue-grey, so the dark work area belongs to the same palette
       as the sidebar instead of reading as a different product. */
    --dt-bg: #1B1817;
    --dt-surface: #262120;
    --dt-text: #EDE8E4;
    --dt-muted: #A79E99;
    --dt-border: #3A3331;

    /* Copper goes light on a dark ground; the resting colour would sink into it. */
    --dt-primary: #D4794C;
    --dt-primary-rgb: 212, 121, 76;
    --dt-primary-dark: #C06A40;

    --dt-cream: rgba(232, 196, 154, .08);

    --dt-success: #5FBF8B;
    --dt-success-soft: rgba(46, 125, 82, .22);
    --dt-warning: #E0A45C;
    --dt-warning-soft: rgba(166, 99, 31, .22);
    --dt-danger: #EC7C6F;
    --dt-danger-soft: rgba(192, 57, 43, .22);
    --dt-info: #7FB3D1;
    --dt-info-soft: rgba(44, 90, 120, .22);
    --dt-primary-soft: rgba(var(--dt-primary-rgb), .18);

    --dt-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .4);
    --dt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .dt-table thead th { background: rgba(255, 255, 255, .04); color: var(--dt-muted); }
html[data-theme="dark"] .dt-table tbody tr:hover { background: rgba(255, 255, 255, .04); }
/* Copper has to lighten on a dark ground to stay visible, and once it does, white text on
   it falls to 3.2:1. The ink goes dark instead — the same trade champagne already makes. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .progress-bar { color: #20232B; }

html[data-theme="dark"] .dt-badge-muted { background: #3A3331; color: #CFC7C2; }
html[data-theme="dark"] .dt-icon-btn { background: transparent; color: var(--dt-muted); }
html[data-theme="dark"] .dt-chart-placeholder { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .dt-step::before { background: #3A3331; color: var(--dt-muted); }
html[data-theme="dark"] .dt-step:not(:last-child)::after { background: #3A3331; }
html[data-theme="dark"] .dt-roommate-chip { background: var(--dt-surface); border-color: var(--dt-border); }
html[data-theme="dark"] .dt-public-header,
html[data-theme="dark"] .dt-topbar,
html[data-theme="dark"] .dt-sticky-actions { background: var(--dt-surface); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background: #1B1817; border-color: var(--dt-border); color: var(--dt-text); }
html[data-theme="dark"] .form-control::placeholder { color: #8A817C; }
html[data-theme="dark"] .input-group-text { background: transparent; border-color: var(--dt-border); color: var(--dt-muted); }
html[data-theme="dark"] code { color: #93c5fd; }

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--dt-font);
    background: var(--dt-bg);
    color: var(--dt-text);
    text-align: right;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

a { color: var(--dt-primary); }
a:hover { color: var(--dt-primary-dark); }

/* ---------- Bootstrap overrides → premium look ---------- */
.btn {
    border-radius: var(--dt-radius-sm);
    font-weight: 600;
    padding: .55rem 1.25rem;
    /* iOS Safari: remove the tap delay + double-tap-to-zoom so a single tap always registers */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .05);
    cursor: pointer;
}

.btn-lg { padding: .8rem 1.6rem; border-radius: var(--dt-radius-sm); }

.btn-primary {
    background: var(--dt-primary);
    border-color: var(--dt-primary);
    color: #fff;
    box-shadow: none;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--dt-primary-dark) !important;
    border-color: var(--dt-primary-dark) !important;
}

.btn-outline-primary { color: var(--dt-primary); border-color: var(--dt-primary); }
.btn-outline-primary:hover { background: var(--dt-primary); border-color: var(--dt-primary); color: #fff; }

/* Champagne is far too light to sit under white text — it always carries dark ink. */
.btn-accent {
    background: var(--dt-accent);
    border-color: var(--dt-accent);
    color: var(--dt-accent-ink);
    font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus {
    background: var(--dt-accent-strong);
    border-color: var(--dt-accent-strong);
    color: var(--dt-accent-ink);
}

.card {
    border: 0;
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow);
    background: var(--dt-surface);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--dt-border);
    font-weight: 700;
    padding: 1rem 1.5rem;
}

.card-body { padding: 1.5rem; }

.form-control, .form-select {
    border-radius: var(--dt-radius-sm);
    border-color: var(--dt-border);
    padding: .65rem .9rem;
    font-size: 1rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--dt-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--dt-primary-rgb), .15);
}

.form-label { font-weight: 600; margin-bottom: .35rem; }
.form-text { color: var(--dt-muted); }

.form-check-input:checked { background-color: var(--dt-primary); border-color: var(--dt-primary); }

.alert { border: 0; border-radius: var(--dt-radius-sm); }

.dropdown-menu { border: 0; border-radius: var(--dt-radius-sm); box-shadow: var(--dt-shadow); }

/* ---------- Page header ---------- */
.dt-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.dt-page-header h1 { font-size: 1.45rem; margin: 0; }
.dt-page-header .dt-page-subtitle { color: var(--dt-muted); font-size: .9rem; margin: 0; }

/* Header actions — tidy rows.
   A screen like "עובדים" offers eight of these, so they wrap across two or
   three rows depending on the window. Two things made that look broken:

   1. A plain .btn is ~43.6px tall but a .form-select is ~46.8px, so any row
      holding the bulk "שנה זכאות" control stretched to the taller size while
      the rows without it stayed short — visibly ragged. One min-height for
      every control in the header keeps all rows equal, whatever wraps where.
   2. The primary action drifted: "עובד חדש" landed on row 3 at 1024px, row 2
      between 1280 and 1680, and row 1 at 1920. `order: -1` parks it at the
      head of the group — nearest the page title, same place at every width —
      so it is always where the eye already is.

   Note: `order` moves it visually only; keyboard focus still follows the
   document, which is the markup order. */
.dt-page-header > div:last-child:not(:only-child) .btn,
.dt-page-header > div:last-child:not(:only-child) .form-select,
.dt-page-header > div:last-child:not(:only-child) .input-group {
    min-height: 2.95rem;
}

.dt-page-header > div:last-child:not(:only-child) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.dt-page-header > div:last-child:not(:only-child) > .btn-primary { order: -1; }

/* ---------- Admin shell: sidebar + main ----------
   The sidebar is fixed to the inline-start edge — the right in RTL, the left in LTR — and the
   work area is pushed over by the same width rather than sliding under it. Logical properties
   throughout, so the same rules serve both directions. */
.dt-admin-wrapper { min-height: 100vh; }

.dt-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--dt-sidebar-w);
    background: var(--dt-sidebar-bg);
    color: var(--dt-sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .18s ease;
}

.dt-sidebar .dt-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 1.15rem 1.15rem 1rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
    flex: 0 0 auto;
}

/* digi in white, ticks in champagne — the logotype, until a real mark exists. */
.dt-brand-mark { white-space: nowrap; }
.dt-brand-mark .dt-brand-accent { color: var(--dt-accent); }
.dt-brand-tagline {
    display: block;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--dt-sidebar-muted);
    margin-block-start: .1rem;
}

/* Only this scrolls when the menu is long, so the logo and the account block stay put. */
.dt-sidebar-nav {
    list-style: none;
    padding: .25rem .6rem 1rem;
    margin: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dt-sidebar-nav .dt-nav-section {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--dt-sidebar-muted);
    padding: 1rem .75rem .35rem;
}

.dt-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 46px;
    padding: .5rem .75rem;
    margin-bottom: .1rem;
    border-radius: 8px;
    color: var(--dt-sidebar-text);
    text-decoration: none;
    font-weight: 500;
    font-size: .93rem;
    transition: background .15s, color .15s;
}

.dt-sidebar-nav a .bi {
    font-size: 1.05rem;
    width: 1.35rem;
    flex: 0 0 1.35rem;
    text-align: center;
    color: var(--dt-sidebar-muted);
    transition: color .15s;
}

.dt-sidebar-nav a:hover { background: var(--dt-sidebar-hover); color: #fff; }
.dt-sidebar-nav a:hover .bi { color: var(--dt-accent); }

/* The selected screen: champagne ground with dark ink, which is the only legible pairing. */
.dt-sidebar-nav a.active {
    background: var(--dt-accent);
    color: var(--dt-accent-ink);
    font-weight: 600;
}
.dt-sidebar-nav a.active .bi { color: var(--dt-accent-ink); }

.dt-sidebar-nav a.disabled { color: #6B615C; pointer-events: none; }

/* The account block, held to the bottom and set off by a hairline. */
.dt-sidebar-foot {
    flex: 0 0 auto;
    border-block-start: 1px solid var(--dt-sidebar-border);
    padding: .75rem .6rem;
}

.dt-sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
    min-width: 0;
}

.dt-sidebar-user .dt-avatar {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 50%;
    background: var(--dt-accent);
    color: var(--dt-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.dt-sidebar-user .dt-user-lines { min-width: 0; line-height: 1.25; }
.dt-sidebar-user .dt-user-title {
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dt-sidebar-user .dt-user-role {
    color: var(--dt-sidebar-muted);
    font-size: .74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dt-sidebar-foot .dt-foot-action {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 40px;
    padding: .4rem .75rem;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: var(--dt-sidebar-text);
    font-size: .88rem;
    text-align: start;
    text-decoration: none;
}
.dt-sidebar-foot .dt-foot-action .bi { width: 1.35rem; flex: 0 0 1.35rem; text-align: center; }
.dt-sidebar-foot .dt-foot-action:hover { background: var(--dt-sidebar-hover); color: #fff; }

/* ---------- Collapsed: icons only ---------- */
@media (min-width: 992px) {
    .dt-shell-collapsed .dt-sidebar { width: var(--dt-sidebar-w-collapsed); }
    .dt-shell-collapsed .dt-main { margin-inline-start: var(--dt-sidebar-w-collapsed); }

    .dt-shell-collapsed .dt-sidebar .dt-brand { justify-content: center; padding-inline: .5rem; }
    .dt-shell-collapsed .dt-brand-tagline,
    .dt-shell-collapsed .dt-sidebar-nav a > span,
    .dt-shell-collapsed .dt-sidebar-nav .dt-nav-section,
    .dt-shell-collapsed .dt-sidebar-user .dt-user-lines,
    .dt-shell-collapsed .dt-foot-action > span { display: none; }

    /* A rule of champagne stands in for the section heading, so the grouping survives the
       collapse instead of the items running together. */
    .dt-shell-collapsed .dt-sidebar-nav .dt-nav-section {
        display: block;
        height: 1px;
        padding: 0;
        margin: .6rem .75rem;
        background: var(--dt-sidebar-border);
        overflow: hidden;
        text-indent: -999em;
    }

    .dt-shell-collapsed .dt-sidebar-nav a,
    .dt-shell-collapsed .dt-foot-action,
    .dt-shell-collapsed .dt-sidebar-user { justify-content: center; padding-inline: .5rem; }
    .dt-shell-collapsed .dt-sidebar-nav a .bi { width: auto; flex: 0 0 auto; }
}

.dt-sidebar-toggle {
    border: 0;
    background: transparent;
    color: var(--dt-sidebar-muted);
    border-radius: 8px;
    width: 2rem;
    height: 2rem;
    display: none;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
}
.dt-sidebar-toggle:hover { background: var(--dt-sidebar-hover); color: #fff; }
@media (min-width: 992px) { .dt-sidebar-toggle { display: flex; } }
.dt-shell-collapsed .dt-sidebar-toggle { margin-inline: auto; }

/* ---------- Tooltips for the collapsed menu ----------
   The name of an item that has lost its label, on hover and on keyboard focus alike — a menu
   reachable only by pointer would be no menu at all for anyone tabbing through it. */
@media (min-width: 992px) {
    .dt-shell-collapsed .dt-sidebar [data-dt-tip] { position: relative; }

    .dt-shell-collapsed .dt-sidebar [data-dt-tip]::after {
        content: attr(data-dt-tip);
        position: absolute;
        inset-inline-start: calc(100% + .5rem);
        top: 50%;
        transform: translateY(-50%);
        background: #16110F;
        color: #fff;
        font-size: .82rem;
        font-weight: 500;
        white-space: nowrap;
        padding: .3rem .6rem;
        border-radius: 6px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
        opacity: 0;
        pointer-events: none;
        transition: opacity .12s ease;
        z-index: 1;
    }

    .dt-shell-collapsed .dt-sidebar [data-dt-tip]:hover::after,
    .dt-shell-collapsed .dt-sidebar [data-dt-tip]:focus-visible::after { opacity: 1; }
}

.dt-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-inline-start: var(--dt-sidebar-w);
    transition: margin .18s ease;
}

.dt-topbar {
    background: var(--dt-surface);
    border-block-end: 1px solid var(--dt-border);
    padding: .7rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.dt-topbar .dt-context { font-weight: 600; font-size: .95rem; }
.dt-topbar .dt-context .text-muted { font-weight: 400; }

.dt-content { padding: 1.5rem; flex: 1 1 auto; }

@media (min-width: 992px) {
    .dt-content { padding: 2rem 2.5rem; }
}

/* ---------- Mobile: a drawer from the inline-start edge ---------- */
@media (max-width: 991.98px) {
    .dt-main { margin-inline-start: 0; }

    .dt-sidebar {
        width: min(82vw, 300px);
        transform: translateX(var(--dt-drawer-hidden, 100%));
        transition: transform .2s ease;
    }
    html[dir="ltr"] .dt-sidebar { --dt-drawer-hidden: -100%; }

    .dt-sidebar.is-open { transform: translateX(0); }

    .dt-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(32, 42, 40, .5);
        z-index: 1035;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .dt-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

    body.dt-drawer-open { overflow: hidden; }
}

/* ---------- KPI cards ---------- */
.dt-kpi {
    background: var(--dt-surface);
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
}

.dt-kpi .dt-kpi-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: var(--dt-primary-soft);
    color: var(--dt-primary);
    flex-shrink: 0;
}

.dt-kpi .dt-kpi-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.dt-kpi .dt-kpi-label { color: var(--dt-muted); font-size: .85rem; }

.dt-kpi.dt-kpi-success .dt-kpi-icon { background: var(--dt-success-soft); color: var(--dt-success); }
.dt-kpi.dt-kpi-warning .dt-kpi-icon { background: var(--dt-warning-soft); color: var(--dt-warning); }
.dt-kpi.dt-kpi-danger .dt-kpi-icon { background: var(--dt-danger-soft); color: var(--dt-danger); }

/* ---------- Status badges ---------- */
.dt-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 2rem;
    padding: .3rem .8rem;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.dt-badge-success { background: var(--dt-success-soft); color: var(--dt-success); }
.dt-badge-warning { background: var(--dt-warning-soft); color: var(--dt-warning); }
.dt-badge-danger { background: var(--dt-danger-soft); color: var(--dt-danger); }
.dt-badge-info { background: var(--dt-info-soft); color: var(--dt-info); }
.dt-badge-muted { background: var(--dt-border); color: var(--dt-secondary); }

/* ---------- Modern tables ---------- */
.dt-table-card { overflow: hidden; }
.dt-table-card .dt-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--dt-border);
}

.dt-table-card .dt-search { max-width: 280px; }

.dt-table { margin: 0; }

.dt-table thead th {
    background: var(--dt-bg);
    color: var(--dt-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--dt-border);
    padding: .8rem 1.5rem;
    white-space: nowrap;
}

.dt-table tbody td {
    padding: .9rem 1.5rem;
    vertical-align: middle;
    border-color: var(--dt-border);
}

.dt-table tbody tr:hover { background: var(--dt-cream); }
.dt-table tbody tr:last-child td { border-bottom: 0; }

.dt-table-actions { display: flex; gap: .35rem; justify-content: flex-end; }

.dt-icon-btn {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dt-border);
    background: var(--dt-surface);
    color: var(--dt-muted);
    transition: all .15s;
}

.dt-icon-btn:hover { border-color: var(--dt-primary); color: var(--dt-primary); background: var(--dt-primary-soft); }
.dt-icon-btn.dt-icon-btn-danger:hover { border-color: var(--dt-danger); color: var(--dt-danger); background: var(--dt-danger-soft); }
.dt-icon-btn.dt-icon-btn-warning { border-color: var(--dt-warning); color: var(--dt-warning); }
.dt-icon-btn.dt-icon-btn-warning:hover { border-color: var(--dt-warning); color: var(--dt-warning); background: var(--dt-warning-soft); }

/* Styled file dropzone */
.dt-dropzone {
    border: 2px dashed var(--dt-border);
    border-radius: 12px;
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: transparent;
    flex: 1 1 240px; /* fills width in a block container, and grows nicely inside a flex row */
}
.dt-dropzone:hover,
.dt-dropzone.dragover {
    border-color: var(--dt-primary);
    background: var(--dt-primary-soft);
}
.dt-dropzone .dt-dz-icon { font-size: 1.9rem; color: var(--dt-muted); }
.dt-dropzone .dt-dz-text { color: var(--dt-text); font-size: .92rem; margin-top: 4px; }
.dt-dropzone .dt-dz-hint { color: var(--dt-muted); font-size: .75rem; margin-top: 2px; }
.dt-dz-preview { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.dt-dz-file { display: flex; align-items: center; gap: 8px; }
.dt-dz-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--dt-border); }
.dt-dz-name { font-weight: 600; word-break: break-all; }

/* Passport preview image inside a SweetAlert popup — shrink large scans to fit the screen */
.dt-passport-img {
    max-width: 80vw;
    max-height: 68vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* Admin footer */
.dt-footer {
    padding: 14px 24px;
    text-align: center;
    font-size: .8rem;
    color: var(--dt-muted);
    border-top: 1px solid var(--dt-border);
    margin-top: auto;
}

/* Top-bar company/event picker */
.dt-context-picker .form-select { min-width: 0; }
@media (max-width: 640px) {
    .dt-context-picker { width: 100%; }
    .dt-context-picker form { flex: 1 1 auto; }
    .dt-context-picker .form-select { width: 100%; }
}

/* ---------- Stepper (registration wizard) ---------- */
.dt-stepper {
    display: flex;
    justify-content: space-between;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.dt-step {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: .72rem;
    color: var(--dt-muted);
}

.dt-step::before {
    counter-increment: step;
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin: 0 auto .35rem;
    border-radius: 50%;
    background: var(--dt-border);
    color: var(--dt-muted);
    font-weight: 700;
    font-size: .85rem;
    position: relative;
    z-index: 1;
}

/* connector line (RTL aware — each step draws the line back to the PREVIOUS step) */
.dt-step:not(:first-child)::after {
    content: '';
    position: absolute;
    top: 1.05rem;
    inset-inline-start: -50%;
    width: 100%;
    height: 2px;
    background: var(--dt-border);
}

.dt-step.done::before { background: var(--dt-success); color: #fff; content: '✓'; }
.dt-step.done:not(:first-child)::after,
.dt-step.active:not(:first-child)::after { background: var(--dt-success); }

.dt-step.active { color: var(--dt-primary); font-weight: 700; }
.dt-step.active::before {
    background: var(--dt-primary);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(var(--dt-primary-rgb), .15);
}

@media (max-width: 575.98px) {
    .dt-step { font-size: .62rem; }
    .dt-step::before { width: 1.8rem; height: 1.8rem; }
    .dt-step:not(:first-child)::after { top: .9rem; }
}

/* Persistent "your chosen round" pill shown under the stepper on every step. */
.dt-round-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 auto 1.25rem;
    padding: .4rem .9rem;
    border-radius: 2rem;
    background: var(--dt-primary-soft);
    color: var(--dt-primary-dark);
    border: 1px solid rgba(var(--dt-primary-rgb), .25);
    font-size: .9rem;
    font-weight: 600;
    max-width: 100%;
}
.dt-round-pill .bi { font-size: 1rem; }
.dt-round-pill-dates {
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: #fff;
    color: var(--dt-primary-dark);
    font-weight: 700;
    font-size: .82rem;
}
.dt-round-pill-change {
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .25);
    color: #fff;
    font-weight: 600;
    font-size: .78rem;
    text-decoration: none;
    white-space: nowrap;
}
.dt-round-pill-change:hover { background: rgba(255, 255, 255, .4); color: #fff; }
.dt-round-pill-change .bi { font-size: .8rem; }
/* Center the pill as a block under the stepper. */
.dt-stepper + .dt-round-pill { display: flex; width: fit-content; }

/* ---------- Public registration ---------- */
.dt-public-body { background: var(--dt-bg); }

/* Event header banner — shown on every public registration page.
   Default mode: fill & crop (cover). --full modifier: whole image, natural height. */
.dt-header-banner {
    width: 100%;
    max-height: 220px;
    overflow: hidden;
    line-height: 0;
}

.dt-header-banner img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .dt-header-banner:not(.dt-header-banner--full),
    .dt-header-banner:not(.dt-header-banner--full) img { max-height: 140px; }
}

.dt-header-banner--full,
.dt-header-banner--full img {
    max-height: none;
    height: auto;
    object-fit: unset;
}

.dt-public-header {
    background: var(--dt-surface);
    box-shadow: var(--dt-shadow-sm);
    padding: .8rem 1rem;
}

.dt-public-header .dt-logo {
    max-height: 42px;
    max-width: 140px;
    object-fit: contain;
}

.dt-hero {
    background: linear-gradient(135deg, var(--dt-primary), var(--dt-primary-dark));
    color: #fff;
    border-radius: var(--dt-radius);
    padding: 2rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.dt-hero.dt-hero-image {
    background-size: cover;
    background-position: center;
}

.dt-hero.dt-hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Overlay is configurable per-event via --dt-hero-overlay (set inline). Default = primary tint. */
    background: var(--dt-hero-overlay, linear-gradient(135deg, rgba(var(--dt-primary-rgb), .88), rgba(15, 23, 42, .55)));
}

.dt-hero > * { position: relative; }

.dt-hero .dt-hero-company { opacity: .85; font-size: .9rem; margin-bottom: .25rem; }
.dt-hero h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: .75rem; }
.dt-hero .dt-hero-subtitle { font-size: 1.05rem; margin-top: -.4rem; margin-bottom: .75rem; }
.dt-hero .dt-hero-subtitle.dt-subtitle-sm { font-size: .9rem; }
.dt-hero .dt-hero-subtitle.dt-subtitle-md { font-size: 1.05rem; }
.dt-hero .dt-hero-subtitle.dt-subtitle-lg { font-size: 1.35rem; }
.dt-hero .dt-hero-subtitle.dt-subtitle-xl { font-size: 1.7rem; }

.dt-hero .dt-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    font-size: .9rem;
    opacity: .95;
}

.dt-hero .dt-hero-meta .bi { margin-inline-end: .35rem; }

.dt-public-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.25rem 1rem 6.5rem; /* bottom space keeps sticky bar clear of browser UI */
}

@media (min-width: 768px) {
    .dt-public-container { padding-top: 2rem; }
    .dt-hero { padding: 2.5rem 2rem; }
    .dt-hero h1 { font-size: 2rem; }
}

/* ---------- Mobile sticky action bar ---------- */
.dt-sticky-actions {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    background: var(--dt-surface);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, .1);
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    z-index: 1030;
    touch-action: manipulation;
    /* keep the bar on its own compositor layer so iOS doesn't "settle" it on the first tap */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.dt-sticky-actions .btn { width: 100%; }

@media (min-width: 768px) {
    .dt-sticky-actions { position: static; box-shadow: none; background: transparent; padding: 0; }
    .dt-sticky-actions .btn { width: auto; }
}

/* Touch-friendly buttons on mobile */
@media (max-width: 767.98px) {
    .dt-public-container .btn-primary,
    .dt-public-container .btn-outline-secondary { width: 100%; padding: .85rem 1rem; font-size: 1.05rem; }
}

/* ---------- Roommate selection ---------- */
.dt-roommate-chip {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--dt-surface);
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-sm);
    padding: .7rem 1rem;
    margin-bottom: .5rem;
}

.dt-roommate-chip .dt-avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--dt-primary-soft);
    color: var(--dt-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.dt-roommate-chip .dt-roommate-name { font-weight: 600; }
.dt-roommate-chip .dt-roommate-meta { font-size: .8rem; color: var(--dt-muted); }
.dt-roommate-chip .dt-badge { margin-inline-start: auto; }

/* Member still needs to approve — highlighted in the admin rooms screen */
.dt-roommate-chip--pending {
    border-color: var(--dt-warning);
    background: var(--dt-warning-soft);
    box-shadow: inset 3px 0 0 var(--dt-warning);
}

/* ---------- Quick actions ---------- */
.dt-quick-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.dt-quick-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

/* ---------- Chart placeholder ---------- */
.dt-chart-placeholder {
    height: 260px;
    border: 2px dashed var(--dt-border);
    border-radius: var(--dt-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dt-muted);
    background: var(--dt-bg);
}

/* ---------- Empty state ---------- */
/* Warm cream marks the areas that are set apart — an empty state, a callout — without
   introducing a second accent colour. */
.dt-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--dt-muted);
    background: var(--dt-cream);
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius);
}

.dt-empty .bi { color: var(--dt-primary); }

.dt-empty .bi { font-size: 2.5rem; opacity: .5; display: block; margin-bottom: .75rem; }

/* The note callouts the screens use for "how this works" guidance. */
.alert-light { background: var(--dt-cream); color: var(--dt-text); }
html[data-theme="dark"] .alert-light { background: var(--dt-cream); color: var(--dt-text); }

/* ---------- Utilities ---------- */
.dt-text-muted { color: var(--dt-muted); }
.dt-surface { background: var(--dt-surface); }
code { direction: ltr; unicode-bidi: embed; }

/* ---------- Sign-in mark ---------- */
.dt-auth-mark {
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: #fff;
    background: linear-gradient(135deg, var(--dt-primary), var(--dt-primary-dark));
    box-shadow: 0 10px 30px rgba(var(--dt-primary-rgb), .35);
}

/* ---------- Topbar company switcher ----------
   The switcher sits in the light topbar, not a dark navbar, so it inherits the
   ordinary control styling rather than navbar text colours. */
.dt-company-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--dt-muted);
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--dt-primary-soft);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .dt-company-pill span { display: none; }
    .dt-user-name { display: none; }
}

/* ---------- Focus ----------
   A keyboard user must always be able to see where they are. :focus-visible keeps the
   ring off mouse clicks, so it never becomes visual noise for pointer users. */
:focus-visible {
    outline: 2px solid var(--dt-primary);
    outline-offset: 2px;
    border-radius: .35rem;
}

.btn:focus-visible,
.dropdown-item:focus-visible,
.dt-sidebar-nav a:focus-visible,
.dt-bottom-nav a:focus-visible,
.dt-bottom-nav button:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible {
    outline: 2px solid var(--dt-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--dt-primary-soft);
}

/* On a dark sidebar the brand colour has too little contrast to read as a ring. */
.dt-sidebar-nav a:focus-visible,
.dt-brand:focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
}

/* Skip link — the first thing a keyboard user reaches, hidden until focused. */
.dt-skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: -4rem;
    z-index: 1100;
    padding: .6rem 1rem;
    border-radius: var(--dt-radius-sm);
    background: var(--dt-primary);
    color: #fff;
    font-weight: 600;
    transition: top .15s ease;
}

.dt-skip-link:focus {
    top: 1rem;
    color: #fff;
}

/* ---------- Status pages ---------- */
.dt-status-page {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
}

.dt-status-page .dt-status-code {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--dt-primary);
    opacity: .35;
}

.dt-status-page h1 { margin: 1rem 0 .5rem; font-size: 1.35rem; }
.dt-status-page p { color: var(--dt-muted); max-width: 34rem; }

/* Reduced motion: honour the OS preference rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Ticket card — the thing a guest holds at the door.

   Drawn identically in the appearance editor's preview, on the public order
   page and in the admin, because all three render _TicketCard.cshtml. Sizes
   are in px rather than rem: a ticket is a fixed artefact, and it must not
   reflow when the surrounding page changes its root font size.
   --------------------------------------------------------------------------- */
.dt-ticket {
    position: relative;
    width: 100%;
    max-width: var(--dt-ticket-width, 340px);
    aspect-ratio: var(--dt-ticket-ratio, 0.625);
    margin-inline: auto;
    border-radius: 14px;
    overflow: hidden;
    background: var(--dt-ticket-bg, #fff);
    color: var(--dt-ticket-text, #0f172a);
    box-shadow: 0 6px 20px rgb(15 23 42 / 18%);

    /* One base the card's type is measured against. Everything inside sizes itself in em,
       so the scale moves the card together instead of pulling one line out of proportion. */
    font-family: var(--dt-ticket-font, inherit);
    font-size: calc(1rem * var(--dt-ticket-font-scale, 1));
    font-weight: var(--dt-ticket-weight, 400);
}

/* The shape only sets the default; --dt-ticket-width carries the organiser's choice. */
.dt-ticket-landscape { max-width: var(--dt-ticket-width, 520px); }

/* The banner: a band across the top, behind the body but above the background image. */
.dt-ticket-header {
    position: absolute;
    inset-inline: 0;
    top: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.dt-ticket-image,
.dt-ticket-overlay {
    position: absolute;
    inset: 0;
}

.dt-ticket-image { background-position: center; background-repeat: no-repeat; }

.dt-ticket-body {
    position: relative;   /* above the image and its overlay */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    /* Named so a full-bleed band can cancel exactly this much and reach both edges. */
    --dt-ticket-pad: 18px;
    padding: var(--dt-ticket-pad);
    text-align: center;
    min-height: 0;        /* lets the code shrink instead of overflowing the card */
}

/* When the rows set the height there is nothing to distribute, and space-between would
   push the code and the rows apart to fill a card that no longer has a fixed height. */
.dt-ticket-auto .dt-ticket-body {
    height: auto;
    justify-content: flex-start;
}

/* The code was placed at the top, so the details move below it. */
.dt-ticket-code-first { flex-direction: column-reverse; justify-content: flex-end; }

/* Reversing the body also reverses nothing inside the details, which is what we want: the
   code moves above the facts while the facts keep their own order. With banded rows the
   card grows downward, so the reversed body must start at the top rather than the end. */
.dt-ticket-auto .dt-ticket-code-first { justify-content: flex-start; }

.dt-ticket-logo {
    max-height: 44px;
    max-width: 60%;
    object-fit: contain;
    margin-bottom: 8px;
}

.dt-ticket-title {
    font-size: 1.19em;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 6px;
}

.dt-ticket-line {
    font-size: .81em;
    line-height: 1.5;
    opacity: .9;
}

/* The chosen size is a maximum, not a promise. A code larger than the card can hold
   shrinks to fit: the card clips its overflow, and a clipped code does not scan. */
.dt-ticket-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 0;
    flex: 0 1 auto;
}

.dt-ticket-qr-panel { min-height: 0; }

.dt-ticket-code img,
.dt-ticket-qr-panel img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* A scanner reads contrast. A code laid straight onto a photograph often will not
   read at all, so the panel is the default. */
/* The padding is set inline from the code's size: it is the quiet zone the QR
   specification requires, not decoration, so it scales with the symbol. */
.dt-ticket-qr-panel {
    background: #fff;
    border-radius: 10px;
    line-height: 0;
    display: flex;
    min-height: 0;
}

/* A QR read as white-on-black fails on many scanners, so the code is held out of every
   colour transform the platform might apply: forced-colours modes, Windows High Contrast,
   and the print pipeline. The page-level defence is the color-scheme declaration in
   _PublicLayout; this is the belt to that pair of braces.

   An operating-system inversion (MIUI's system dark theme, Android's accessibility colour
   inversion) happens below the browser and cannot be refused from here — which is why the
   printed digits under the code are on by default. */
.dt-ticket-qr-panel,
.dt-ticket-qr-bare,
.dt-ticket-qr-panel img,
.dt-ticket-qr-bare img {
    forced-color-adjust: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* No panel chosen: the margin still has to exist, so it comes from the card itself. */
.dt-ticket-qr-bare {
    line-height: 0;
    display: flex;
    min-height: 0;
}

.dt-ticket-code img { display: block; }

.dt-ticket-codetext {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .81em;
    letter-spacing: .08em;
}

.dt-ticket-qr-placeholder {
    display: grid;
    place-items: center;
    border: 2px dashed currentColor;
    border-radius: 10px;
    opacity: .35;
    font-size: 40px;
}

.dt-ticket-footer {
    font-size: .69em;
    line-height: 1.4;
    opacity: .75;
}

/* ---------------------------------------------------------------------------
   Quantity picker — public pages.

   Two shapes over one control: a joined pill, or round buttons spaced either
   side of the number. Both are driven by the same number input, which is what
   posts, so the page still works if the script never loads.
   --------------------------------------------------------------------------- */
.dt-qty {
    display: inline-flex;
    align-items: center;
    direction: ltr;   /* − always left of +, whichever way the page reads */
}

.dt-qty-value {
    width: 2.75rem;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    color: inherit;
    padding: 0;
    -moz-appearance: textfield;
}

/* The native spinners duplicate the buttons and are far too small to hit. */
.dt-qty-value::-webkit-outer-spin-button,
.dt-qty-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dt-qty-value:focus-visible {
    outline: 2px solid var(--dt-primary, #A6502D);
    outline-offset: 2px;
    border-radius: 4px;
}

.dt-qty-btn {
    display: grid;
    place-items: center;
    /* 2.25rem keeps the target at roughly 36px, which is a comfortable thumb. */
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--dt-primary, #A6502D);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, opacity .12s ease;
}

.dt-qty-btn:hover:not(:disabled) { background: rgb(15 118 110 / 10%); }
.dt-qty-btn:disabled { opacity: .3; cursor: default; }

/* --- pill: one joined control ------------------------------------------- */
.dt-qty-pill {
    border: 1px solid var(--dt-border, #E8EAEE);
    border-radius: 999px;
    background: var(--dt-surface, #fff);
    overflow: hidden;
}

.dt-qty-pill .dt-qty-btn:first-child { border-inline-end: 1px solid var(--dt-border, #E8EAEE); }
.dt-qty-pill .dt-qty-btn:last-child { border-inline-start: 1px solid var(--dt-border, #E8EAEE); }

/* --- circles: separate buttons ------------------------------------------- */
.dt-qty-circles { gap: .4rem; }

.dt-qty-circles .dt-qty-btn {
    border: 1px solid var(--dt-border, #E8EAEE);
    border-radius: 50%;
    background: var(--dt-surface, #fff);
}

.dt-qty-circles .dt-qty-value {
    border: 1px solid transparent;
}

/* ---------------------------------------------------------------------------
   Committee picker — an event that sells through several unions.
   --------------------------------------------------------------------------- */
.dt-org-card {
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}

a.dt-org-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(15 23 42 / 14%);
}

/* The name sits on the brand colour, so the grid reads as one set of choices
   rather than as a scatter of unrelated logos. */
.dt-org-name {
    background: var(--dt-primary, #A6502D);
    color: #fff;
    font-size: .95rem;
}

/* ---------- Ticket type tints ----------
   A pastel per ticket type, so the products on a page are told apart at a glance rather than
   by reading. The colour is derived from the type's id and never stored, so it is stable for
   the life of the type and nobody has to choose one.

   Eight tints, because past that the pastels stop being distinguishable and the colour starts
   lying about being meaningful. Colour is never the only signal — the name is always there. */
.dt-type-tint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: .5rem;
    padding: .25rem .6rem;
    font-weight: 600;
    background: var(--dt-tint-bg);
    color: var(--dt-tint-fg);
    border: 1px solid var(--dt-tint-border);
}

/* A heading-sized block for a card that is about one type. */
h1.dt-type-tint, h2.dt-type-tint, h3.dt-type-tint { padding: .4rem .75rem; }

.dt-type-0 { --dt-tint-bg: #e0f2fe; --dt-tint-fg: #075985; --dt-tint-border: #bae6fd; }
.dt-type-1 { --dt-tint-bg: #dcfce7; --dt-tint-fg: #166534; --dt-tint-border: #bbf7d0; }
.dt-type-2 { --dt-tint-bg: #fef3c7; --dt-tint-fg: #854d0e; --dt-tint-border: #fde68a; }
.dt-type-3 { --dt-tint-bg: #fae8ff; --dt-tint-fg: #86198f; --dt-tint-border: #f5d0fe; }
.dt-type-4 { --dt-tint-bg: #ffe4e6; --dt-tint-fg: #9f1239; --dt-tint-border: #fecdd3; }
.dt-type-5 { --dt-tint-bg: #e0e7ff; --dt-tint-fg: #3730a3; --dt-tint-border: #c7d2fe; }
.dt-type-6 { --dt-tint-bg: #ccfbf1; --dt-tint-fg: #115e59; --dt-tint-border: #99f6e4; }
.dt-type-7 { --dt-tint-bg: #ffedd5; --dt-tint-fg: #9a3412; --dt-tint-border: #fed7aa; }

/* Pastels on a dark surface read as washed-out and lose their contrast, so dark mode keeps the
   hue and inverts the relationship: a deep, desaturated ground with a light tint on top. */
html[data-theme="dark"] .dt-type-0 { --dt-tint-bg: #0c4a6e33; --dt-tint-fg: #7dd3fc; --dt-tint-border: #075985; }
html[data-theme="dark"] .dt-type-1 { --dt-tint-bg: #14532d33; --dt-tint-fg: #86efac; --dt-tint-border: #166534; }
html[data-theme="dark"] .dt-type-2 { --dt-tint-bg: #713f1233; --dt-tint-fg: #fcd34d; --dt-tint-border: #854d0e; }
html[data-theme="dark"] .dt-type-3 { --dt-tint-bg: #701a7533; --dt-tint-fg: #f0abfc; --dt-tint-border: #86198f; }
html[data-theme="dark"] .dt-type-4 { --dt-tint-bg: #88134333; --dt-tint-fg: #fda4af; --dt-tint-border: #9f1239; }
html[data-theme="dark"] .dt-type-5 { --dt-tint-bg: #31297033; --dt-tint-fg: #a5b4fc; --dt-tint-border: #3730a3; }
html[data-theme="dark"] .dt-type-6 { --dt-tint-bg: #134e4a33; --dt-tint-fg: #5eead4; --dt-tint-border: #115e59; }
html[data-theme="dark"] .dt-type-7 { --dt-tint-bg: #7c2d1233; --dt-tint-fg: #fdba74; --dt-tint-border: #9a3412; }

/* ---------- Ticket: banded detail rows ----------
   The printed-ticket look: each fact on its own full-width band, scanned down the card
   rather than read across. The icons line up in a column at the leading edge, which is what
   makes the list readable at a glance in a queue. */
.dt-ticket-rows {
    display: flex;
    flex-direction: column;
    margin-block-start: .6em;
    /* Full bleed: the body's padding is cancelled so a band reaches both edges. */
    margin-inline: calc(var(--dt-ticket-pad, 16px) * -1);
}

.dt-ticket-row {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .55em var(--dt-ticket-pad, 16px);
    font-size: .9em;
    line-height: 1.35;
}

/* Every other band carries a wash rather than a border, so the rows separate without
   drawing a grid over the card. The wash is the text colour at low alpha, which keeps it
   working on a dark card as well as a light one. */
.dt-ticket-row:nth-child(odd) { background: rgb(from currentColor r g b / 6%); }

.dt-ticket-row .bi {
    flex: 0 0 1.4em;
    font-size: 1.1em;
    text-align: center;
    opacity: .75;
}

.dt-ticket-row span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A fixed shape would cut a row off rather than let the card grow. */
.dt-ticket-auto {
    aspect-ratio: auto;
    min-height: 0;
}

/* ---------- Payment dialog header ----------
   Green because that is what a buyer reads as safe at the moment they type a card number.
   The shade is the palette's own success colour, which already carries white text at AA. */
.dt-pay-header {
    background: var(--dt-success);
    color: #fff;
    border-bottom: 0;
}

.dt-pay-header .modal-title { color: #fff; }
.dt-pay-header .bi { opacity: .95; }

/* ---------- Add to phone wallet ----------
   Each wallet asks for its own colour, and both are dark with white type, so they read as
   the platform's own control rather than as ours. */
.dt-wallet-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: .75rem;
}

.dt-wallet-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border-radius: 2rem;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: #202124;
    border: 1px solid rgba(255, 255, 255, .15);
}

.dt-wallet-btn:hover { color: #fff; opacity: .9; }
.dt-wallet-btn .bi { font-size: 1.1rem; }

.dt-wallet-apple { background: #000; }