/* ---- StarHub branding (PRD §4.10) ----
   Colours taken from starhub.com's stylesheets. Green buttons carry ink (#141414) text, as on starhub.com: white on
   this green is unreadable. Text links use StarHub blue, which passes WCAG AA on the page background. */

/* Lato, StarHub's typeface, served from wwwroot/lib/lato (SIL Open Font License; latin subset). No font CDN: the
   app runs on the internal network. Semibold (600) text uses the 700 face. */
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../lib/lato/lato-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../lib/lato/lato-latin-400-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../lib/lato/lato-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Same font stack as starhub.com. */
    --bs-body-font-family: Lato, Arial, sans-serif;

    --brand-green: #1ed760;
    --brand-green-hover: #74e38c;
    --brand-green-active: #17b54f;
    --brand-green-subtle: #eafcec;
    --brand-green-text: #0b6b2e;
    --brand-ink: #141414;
    --brand-grey: #727272;
    --brand-border: #dadbda;
    --brand-surface: #fafafa;
    --brand-blue: #0062ff;
    --brand-blue-hover: #004ecc;
    --brand-focus-ring: rgba(30, 215, 96, 0.25);

    /* starhub.com layout: white navigation bar with ink text under a green top bar (PRD §4.10). */
    --brand-nav-bg: #ffffff;
    --brand-nav-color: #141414;

    /* Bootstrap 5.3 variables mapped onto the palette. */
    --bs-primary: var(--brand-green);
    --bs-primary-rgb: 30, 215, 96;
    --bs-primary-bg-subtle: var(--brand-green-subtle);
    --bs-primary-border-subtle: var(--brand-green-hover);
    --bs-primary-text-emphasis: var(--brand-green-text);
    --bs-body-color: var(--brand-ink);
    --bs-body-color-rgb: 20, 20, 20;
    --bs-emphasis-color: var(--brand-ink);
    --bs-secondary-color: var(--brand-grey);
    --bs-border-color: var(--brand-border);
    --bs-tertiary-bg: var(--brand-surface);
    --bs-tertiary-bg-rgb: 250, 250, 250;
    --bs-link-color: var(--brand-blue);
    --bs-link-color-rgb: 0, 98, 255;
    --bs-link-hover-color: var(--brand-blue-hover);
    --bs-link-hover-color-rgb: 0, 78, 204;
    --bs-focus-ring-color: var(--brand-focus-ring);
}

.btn-primary {
    --bs-btn-color: var(--brand-ink);
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-color: var(--brand-ink);
    --bs-btn-hover-bg: var(--brand-green-hover);
    --bs-btn-hover-border-color: var(--brand-green-hover);
    --bs-btn-focus-shadow-rgb: 30, 215, 96;
    --bs-btn-active-color: var(--brand-ink);
    --bs-btn-active-bg: var(--brand-green-active);
    --bs-btn-active-border-color: var(--brand-green-active);
    --bs-btn-disabled-color: var(--brand-ink);
    --bs-btn-disabled-bg: var(--brand-green);
    --bs-btn-disabled-border-color: var(--brand-green);
    font-weight: 600;
}

/* Dark mode (PRD §4.12): the StarHub green, the top bar and green buttons with ink text stay as they are; only the
   surfaces and text change. Every text/background pair meets WCAG AA. */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: #1c1c1c;
    --bs-body-bg-rgb: 28, 28, 28;
    --bs-tertiary-bg: #0f0f0f;
    --bs-tertiary-bg-rgb: 15, 15, 15;
    --bs-secondary-bg: #262626;
    --bs-body-color: #f2f2f2;
    --bs-body-color-rgb: 242, 242, 242;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #a8a8a8;
    --bs-border-color: #3d3d3b;
    --bs-link-color: #5c9dff;
    --bs-link-color-rgb: 92, 157, 255;
    --bs-link-hover-color: #8ab8ff;
    --bs-link-hover-color-rgb: 138, 184, 255;
    --brand-nav-bg: #1c1c1c;
    --brand-nav-color: #f2f2f2;
}

[data-bs-theme="dark"] .brand-navbar {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .card {
    border-color: #3d3d3b;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .auth-card {
    border-top-color: var(--brand-green);
}

/* Outline buttons and booking-day toggles: light text until hovered or selected (then green with ink text). */
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #f2f2f2;
    --bs-btn-disabled-color: #a8a8a8;
    --bs-btn-disabled-border-color: #3d3d3b;
}

/* Secondary outline buttons (e.g. Sign out): Bootstrap's grey is too faint on the dark bar. */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #c4c4c4;
    --bs-btn-border-color: #5a5a5a;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #3d3d3b;
    --bs-btn-hover-border-color: #5a5a5a;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #3d3d3b;
    --bs-btn-active-border-color: #5a5a5a;
}

/* Light buttons (e.g. Job History's Filters panel on phones) turn dark. */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: #f2f2f2;
    --bs-btn-bg: #262626;
    --bs-btn-border-color: #3d3d3b;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #3d3d3b;
    --bs-btn-hover-border-color: #5a5a5a;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #3d3d3b;
    --bs-btn-active-border-color: #5a5a5a;
}

/* Code tiles (PRD §4.7.7) on the dark card. */
[data-bs-theme="dark"] .totp-slot {
    background: #262626;
    border-color: #3d3d3b;
    color: #f2f2f2;
}

[data-bs-theme="dark"] .totp-slot.is-filled,
[data-bs-theme="dark"] .totp-slot.is-active {
    background: #0f0f0f;
}

[data-bs-theme="dark"] .totp-slot.is-active:empty::after {
    background: #f2f2f2;
}

/* The navigation bar's light/dark switch: icon only, no border. */
.theme-toggle {
    --bs-btn-color: var(--brand-nav-color);
    --bs-btn-hover-color: var(--brand-nav-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-active-color: var(--brand-nav-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    border: 0;
    line-height: 1;
}

/* Outline buttons and toggles (booking days): ink text on white, green when hovered or selected. */
.btn-outline-primary {
    --bs-btn-color: var(--brand-ink);
    --bs-btn-border-color: var(--brand-green-active);
    --bs-btn-hover-color: var(--brand-ink);
    --bs-btn-hover-bg: var(--brand-green-hover);
    --bs-btn-hover-border-color: var(--brand-green-hover);
    --bs-btn-focus-shadow-rgb: 30, 215, 96;
    --bs-btn-active-color: var(--brand-ink);
    --bs-btn-active-bg: var(--brand-green);
    --bs-btn-active-border-color: var(--brand-green);
    --bs-btn-disabled-color: var(--brand-grey);
    --bs-btn-disabled-border-color: var(--brand-border);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-green-hover);
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring);
}

/* Checked boxes: green with an ink tick (white on green is too faint). */
.form-check-input:checked {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23141414' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* Job History paging. */
.pagination {
    --bs-pagination-color: var(--brand-ink);
    --bs-pagination-hover-color: var(--brand-ink);
    --bs-pagination-focus-color: var(--brand-ink);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--brand-focus-ring);
    --bs-pagination-active-color: var(--brand-ink);
    --bs-pagination-active-bg: var(--brand-green);
    --bs-pagination-active-border-color: var(--brand-green);
}

/* As on starhub.com: a green bar across the top, then a white navigation bar with a soft shadow. */
.brand-topbar {
    background-color: var(--brand-green);
    height: 6px;
}

.brand-navbar {
    background-color: var(--brand-nav-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --bs-navbar-color: var(--brand-nav-color);
    --bs-navbar-hover-color: var(--brand-nav-color);
    --bs-navbar-active-color: var(--brand-nav-color);
    --bs-navbar-brand-color: var(--brand-nav-color);
    --bs-navbar-brand-hover-color: var(--brand-nav-color);
    position: relative;
    z-index: 2;
}

.brand-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

.brand-logo {
    height: 28px;
    width: auto;
}

/* The current page: bold ink with a green underline (green text on white is too faint to read). */
.brand-navbar .nav-link {
    border-bottom: 3px solid transparent;
}

.brand-navbar .nav-link:hover,
.brand-navbar .nav-link:focus-visible {
    border-bottom-color: var(--brand-border);
}

/* My Dashboard's next-week list (PRD §4.1.7): day, status and time in columns, so the statuses and times line up. */
.my-week {
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: 0.75rem;
    align-items: baseline;
}

.my-week > li {
    display: contents;
}

.my-week .my-day {
    grid-column: 1;
}

.my-week .my-status-wide {
    grid-column: 2 / -1;
}

/* Wider screens: room between the rows so the list uses the card's height, and the status and time columns share the
   card's width (phones stay compact). */
@media (min-width: 768px) {
    .my-week {
        row-gap: 0.6rem;
        grid-template-columns: auto 1fr 1fr;
    }
}

/* Space between the navigation links on wider screens (on phones they're stacked). */
@media (min-width: 768px) {
    .brand-navbar .navbar-nav .nav-item + .nav-item {
        margin-left: 0.75rem;
    }
}

/* An icon before each navigation link. */
.brand-navbar .nav-link .bi {
    margin-right: 0.4rem;
}

.brand-navbar .nav-link.active {
    font-weight: 700;
    border-bottom-color: var(--brand-green);
}

/* Pill buttons, bold primary buttons (starhub.com). */
.btn {
    border-radius: 9999px;
}

.btn-primary {
    font-weight: 700;
}

/* A button that's the top of a panel (e.g. Job History's Filters on phones) keeps card-like corners, not a pill. */
.btn.rounded-bottom-0 {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

/* Cards: 16 px corners, the brand border and a light shadow (starhub.com tiles). */
.card {
    border-radius: 1rem;
    border-color: var(--brand-border);
    box-shadow: 0 1px 4px rgba(20, 20, 20, 0.05);
    --bs-card-inner-border-radius: calc(1rem - 1px);
}

/* Sign-in pages: a green accent along the top of the card. */
.auth-card {
    border-top: 4px solid var(--brand-green);
}

/* ---- Page styles ---- */

.summary-card .display-6 {
    font-variant-numeric: tabular-nums;
}

.seat-id,
.json-view {
    font-family: var(--bs-font-monospace);
    font-size: 0.85em;
}

.json-view {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 70vh;
    overflow: auto;
}

.curl-input {
    font-family: var(--bs-font-monospace);
    font-size: 0.8em;
}

/* Text boxes that grow with their text (js/autogrow.js, PRD §4.1.4): one line to about 12, then they scroll. */
textarea[data-autogrow] {
    max-height: 16rem;
    overflow-y: hidden;
    resize: none;
}

.popover {
    --bs-popover-max-width: 30rem;
}

/* Sign-in pages: one centred card (PRD §4.9). */
.auth-card {
    max-width: 26rem;
}

/* Sign-in page brand (PRD §4.10): the logo with "AppSpace Chope!" under it. */
.login-brand-logo {
    width: 18rem;
    max-width: 100%;
    height: auto;
}

.login-brand-name {
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

/* 6-digit code entry (PRD §4.7.7): six tiles in two groups of three, filling the width they're given. The real input
   lies on top, invisible, and takes the typing, paste and autofill; js/totp-code.js copies its digits into the tiles.
   Without that script (.is-enhanced missing) the tiles stay hidden and the input is an ordinary field. */
.totp-code {
    position: relative;
}

.totp-code-slots {
    display: none;
}

.totp-code-input {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3em;
}

.totp-code.is-enhanced .totp-code-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) clamp(0.25rem, 2.5vw, 0.75rem) repeat(3, minmax(0, 1fr));
    column-gap: clamp(0.3rem, 1.6vw, 0.55rem);
}

.totp-code.is-enhanced .totp-slot:nth-child(4) {
    grid-column-start: 5;
}

.totp-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    max-height: 4.5rem;
    border: 2px solid var(--brand-border);
    border-radius: 0.65rem;
    background: var(--brand-surface);
    color: var(--brand-ink);
    font-size: clamp(1.5rem, 7.5vw, 2.4rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out, background-color 0.12s ease-in-out;
}

.totp-slot.is-filled {
    background: #fff;
    border-color: var(--brand-grey);
}

.totp-slot.is-active {
    background: #fff;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring);
}

/* A blinking bar in the empty tile that's next to be filled. */
.totp-slot.is-active:empty::after {
    content: "";
    width: 2px;
    height: 45%;
    background: var(--brand-ink);
    animation: totp-caret 1s step-end infinite;
}

@keyframes totp-caret {
    50% {
        opacity: 0;
    }
}

/* The real input covers the tiles (so a tap anywhere focuses it) but draws nothing itself. */
.totp-code.is-enhanced .totp-code-input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: transparent;
    caret-color: transparent;
    font-size: 16px; /* keeps phones from zooming in on focus */
    letter-spacing: 0;
    cursor: text;
}

.totp-code.is-enhanced .totp-code-input::selection {
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .totp-slot {
        transition: none;
    }

    .totp-slot.is-active:empty::after {
        animation: none;
    }
}

.totp-qr svg {
    display: block;
    width: 12rem;
    height: 12rem;
}

/* ---- Mobile-first (PRD §4.9) ---- */

/* Long IDs and emails wrap instead of widening the page. */
.seat-id,
.text-wrap-anywhere {
    overflow-wrap: anywhere;
}

/* Phone-width lists: one card per item (the tables are shown from md up). */
.item-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.75rem;
    background: var(--bs-body-bg);
}

.item-card + .item-card {
    margin-top: 0.75rem;
}

.item-card dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
}

.item-card dt {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.item-card dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Booking days as large toggle buttons. */
.day-toggle {
    min-width: 4rem;
}

@media (max-width: 767.98px) {
    /* 16px text stops phones zooming in on focus; 44px tap targets. */
    .form-control,
    .form-select {
        font-size: 1rem;
        min-height: 44px;
    }

    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
    }

    .navbar-nav .nav-link {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .btn-mobile-block {
        width: 100%;
    }

    /* Job History rows as cards (rows are drawn by DataTables in the browser). */
    #job-history thead {
        display: none;
    }

    #job-history,
    #job-history tbody,
    #job-history tr,
    #job-history td {
        display: block;
        width: 100%;
    }

    #job-history tr {
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    #job-history td {
        border: 0;
        padding: 0.25rem 0;
        box-shadow: none !important;
        overflow-wrap: anywhere;
    }

    #job-history td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.8em;
        color: var(--bs-secondary-color);
    }

    .dt-container .row {
        row-gap: 0.5rem;
    }
}

/* Type-to-search dropdowns (js/searchable-select.js): the list scrolls past about 10 tables. */
.searchable-select-list {
    max-height: 16rem;
    overflow-y: auto;
}

/* Tables (PRD §4.9): from 768 px up, headers and values are centred in their columns and the outer columns keep 1rem from the
   table's edges. Phones show the lists as cards instead. !important beats DataTables' own right-aligned number headers. */
@media (min-width: 768px) {
    .table > thead > tr > th,
    .table.dataTable > thead > tr > th {
        text-align: center !important;
    }
    /* Values sit under their headers. */
    .table > tbody > tr > td,
    .table.dataTable > tbody > tr > td {
        text-align: center !important;
    }
    .table > tbody > tr > td .d-flex {
        justify-content: center;
    }
    .table > :not(caption) > * > :first-child {
        padding-left: 1rem;
    }
    .table > :not(caption) > * > :last-child {
        padding-right: 1rem;
    }
}