/* QueCare look for every page (loaded after each page's own styles): the app's font (Figma: Plus Jakarta Sans),
   the website's colours (quecaresolutions.com) and pill buttons. Needs qc-brand.css. Not used on the TV display. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/fonts/plus-jakarta-sans-latin.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: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* While the font is still on its way (first visit, slow connection) the text is drawn in Arial sized like
   Plus Jakarta Sans, so lines don't re-wrap and the page doesn't jump when it arrives (measured: widths 104.7% of Arial,
   101% of Arial Bold; ascent 1.04em, descent 0.22em) */
@font-face {
    font-family: 'Plus Jakarta Sans Fallback';
    font-weight: 300 500;
    src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 104.7%;
    ascent-override: 99%;
    descent-override: 21%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Plus Jakarta Sans Fallback';
    font-weight: 600 900;
    src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold');
    size-adjust: 101%;
    ascent-override: 103%;
    descent-override: 22%;
    line-gap-override: 0%;
}

body,
button, input, select, textarea {
    font-family: var(--qc-font);
}

/* Main action: yellow pill with navy text (the website's "Get Started") */
.btn-primary, .btn-submit {
    background: var(--qc-yellow) !important;
    color: var(--qc-ink) !important;
    border: 1.5px solid var(--qc-yellow) !important;
    border-radius: 999px !important;
    font-weight: 700;
}
.btn-primary:hover:not(:disabled), .btn-submit:hover:not(:disabled) {
    background: var(--qc-yellow-400) !important;
    border-color: var(--qc-yellow-400) !important;
}

/* Second action: outlined pill */
.btn-secondary, .btn-secondary-modern {
    background: #fff !important;
    color: var(--qc-ink) !important;
    border: 1.5px solid var(--qc-line) !important;
    border-radius: 999px !important;
    font-weight: 600;
}
.btn-secondary:hover:not(:disabled), .btn-secondary-modern:hover:not(:disabled) {
    border-color: var(--qc-ink) !important;
    background: #fff !important;
}

/* Destructive: red outlined pill (as in the app) */
.btn-danger, .btn-danger-small {
    background: #fff !important;
    color: var(--qc-error) !important;
    border: 1.5px solid var(--qc-error) !important;
    border-radius: 999px !important;
    font-weight: 600;
}
.btn-danger:hover:not(:disabled), .btn-danger-small:hover:not(:disabled) {
    background: var(--qc-error-light) !important;
}

.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-submit { border-radius: 999px; }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-submit:disabled { opacity: .5; }

/* Keyboard focus: yellow ring with a navy edge, visible on white and on navy */
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible,
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--qc-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--qc-yellow);
}

/* Fields */
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], input[type="time"], select, textarea {
    border-color: var(--qc-line);
    border-radius: var(--qc-radius);
}
/* Dropdowns: brand chevron instead of the browser's own arrow */
select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230B0B48' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px !important;
    cursor: pointer;
}
select:disabled { cursor: not-allowed; opacity: .7; }
input:focus, select:focus, textarea:focus {
    border-color: var(--qc-ink) !important;
    box-shadow: 0 0 0 3px rgba(250, 239, 97, .7) !important;
    outline: none;
}

/* Side menu (dashboards): selected item in yellow, as the website's navy-and-yellow labels */
.sidebar .nav-item.active {
    color: var(--qc-yellow) !important;
    border-left-color: var(--qc-yellow) !important;
}

/* Icons from the app (Figma), coloured by the text colour: <span class="qc-ico" style="--i:url(/icons/home.svg)"></span> */
.qc-ico {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    background: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
    flex: none;
}

/* The QueCare mark, as on the website: navy rounded square with the logo, then the name */
.qc-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--qc-ink);
    text-decoration: none;
}
.qc-mark-icon {
    width: 36px;
    height: 36px;
    background: none;
    display: grid;
    place-items: center;
    flex: none;
}
.qc-mark-icon img { width: 36px; height: 36px; }
.qc-mark.qc-mark-light { color: #fff; }

/* Two-way switches (Password / OTP): pills, the chosen one navy with yellow text */
.btn-toggle {
    border-radius: 999px !important;
    border: 1.5px solid var(--qc-line) !important;
    background: #fff !important;
    color: var(--qc-ink) !important;
    font-weight: 700;
}
.btn-toggle.active {
    background: var(--qc-ink) !important;
    border-color: var(--qc-ink) !important;
    color: var(--qc-yellow) !important;
}

/* Initials badge in the side menu: yellow with navy letters (visible on the navy menu) */
.sidebar .avatar {
    background: var(--qc-yellow) !important;
    color: var(--qc-ink) !important;
}

/* Menu icons */
.nav-item .nav-ico { width: 20px; height: 20px; margin-right: 10px; vertical-align: -5px; opacity: .9; }
.nav-item .icon .nav-ico { margin-right: 0; }
.nav-item.active .nav-ico { opacity: 1; }

/* Stat cards: line icons in navy on a soft tile */
.stat-icon .qc-ico { width: 26px; height: 26px; color: var(--qc-ink); }

/* Long pop-up forms on one screen: wider, fields side by side (falls back to one column on phones) */
.qc-wide :is(.modal-content, .modal-panel) { width: min(880px, 94vw) !important; max-width: none !important; }
.qc-two-cards .modal-content { width: min(980px, 94vw) !important; max-width: none !important; }
@media (min-width: 760px) {
    .qc-wide form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: start; }
    .qc-wide form > :is(button, .form-error, .an-error, .edit-doctor-row, .modal-actions, .form-actions, .qc-span, .close-modal-btn) { grid-column: 1 / -1; }
    .qc-wide form > button[type="submit"] { justify-self: center; width: auto !important; min-width: 320px; }
    .qc-wide .edit-doctor-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 22px; }
    .qc-wide .setting-item, .qc-wide .form-field { margin-bottom: 10px; }
    .qc-wide form > .qc-col > :first-child { margin-top: 0 !important; }
    .qc-two-cards .modal-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
    .qc-two-cards .modal-content > .modal-header { grid-column: 1 / -1; }
    .qc-two-cards .modal-content > .card { margin-top: 0 !important; }
}

/* "Cancel" buttons in pop-ups: outlined pills */
.close-modal-btn {
    background: #fff !important;
    color: var(--qc-ink) !important;
    border: 1.5px solid var(--qc-line) !important;
    border-radius: 999px !important;
    padding: 10px 20px !important;
    font-weight: 600;
    cursor: pointer;
}
.close-modal-btn:hover { border-color: var(--qc-ink) !important; }
@media (min-width: 760px) {
    .qc-wide form > .close-modal-btn { justify-self: center; width: auto !important; min-width: 320px; }
}

/* Big empty states: an illustration from the app (Figma) above a short line */
.qc-empty { text-align: center; padding: 28px 16px; color: var(--qc-ink-muted); }
.qc-empty img { display: block; margin: 0 auto 14px; height: 110px; width: auto; }
.qc-empty p { margin: 0; font-weight: 600; }

/* Doctor: "Now with the doctor" as a navy card with a big yellow token; Call Next as the big yellow pill */
#current-patient-section > h3 { font-size: 13px !important; letter-spacing: 1.4px; text-transform: uppercase; color: var(--qc-ink-muted); }
#current-patient-section > .queue-patient-card {
    background: var(--qc-ink) !important; color: #fff; border: 0 !important; border-radius: 20px !important;
    padding: 20px 22px !important; box-shadow: 0 12px 30px rgba(11, 11, 72, .18);
}
#current-patient-section > .queue-patient-card .patient-token {
    background: transparent !important; color: var(--qc-yellow) !important; font-size: 52px !important;
    font-weight: 800; min-width: auto !important; height: auto !important; letter-spacing: -1px; margin-right: 18px;
}
#current-patient-section > .queue-patient-card h4 { color: #fff !important; font-size: 20px; }
#current-patient-section > .queue-patient-card h4 span { color: var(--qc-yellow) !important; }
#current-patient-section > .queue-patient-card p { color: #E8E8E0 !important; }
#current-patient-section > .queue-patient-card .action-btns { gap: 8px; flex-wrap: wrap; }
#current-patient-section .next-patient-row {
    margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--qc-yellow-100);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
#call-next-btn { padding: 15px 34px !important; font-size: 17px !important; box-shadow: 0 10px 26px rgba(250, 239, 97, .55); }
#call-next-btn:disabled { box-shadow: none; }
[data-action="noshow"] { color: var(--qc-error) !important; border-color: var(--qc-error) !important; background: #fff !important; }

/* ── Dashboards: one visual system ───────────────────────────────────────────── */
/* Page titles (Figma: Headline H2 28/Bold) */
.main-content .header-left h1, .main-content .header h1 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; color: var(--qc-ink); }
.main-content .header { border-bottom-color: #ECECE4 !important; }

/* Cards: rounder, soft edge and shadow */
.main-content .card { border-radius: 20px !important; border: 1px solid #ECECE4; box-shadow: 0 2px 12px rgba(11, 11, 72, .04) !important; }
.main-content .card h3 { color: var(--qc-ink); }

/* Stat cards: no side stripes; the key number of the page is a bold yellow tile */
.stat-card { border-radius: 20px !important; border: 1px solid #ECECE4; box-shadow: 0 2px 12px rgba(11, 11, 72, .04) !important; }
.stat-card::before { display: none !important; }
.stat-card h2, .stat-card .stat-info h3 { color: var(--qc-ink); font-weight: 800; }
.stat-card .stat-icon { background: #F3F3EF !important; border-radius: 14px; }
.stat-card:has(#total-waiting), .stat-card:has(#waiting-patients), .stat-card:has(#upcoming-appointments) {
    background: var(--qc-yellow) !important; border-color: var(--qc-yellow);
}
.stat-card:has(#total-waiting) *, .stat-card:has(#waiting-patients) *, .stat-card:has(#upcoming-appointments) * { color: var(--qc-ink) !important; }
.stat-card:has(#waiting-patients) .stat-icon, .stat-card:has(#upcoming-appointments) .stat-icon { background: rgba(255, 255, 255, .6) !important; }

/* Tables: quiet headers, room to breathe, soft hover */
.main-content table th { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--qc-ink-muted); font-weight: 700; }
.main-content table td { border-bottom-color: #EFEFE8 !important; }
.main-content table tbody tr:hover td { background: #FCFCF6; }

/* Status tags (Figma: Segment colours) */
.status-badge { border-radius: 999px !important; font-weight: 700; }
.status-badge.waiting, .status-badge.pending, .status-badge.booked, .status-badge.upcoming { background: var(--qc-yellow-200) !important; color: var(--qc-ink) !important; }
.status-badge.completed { background: #C7FDFE !important; color: #0B4A50 !important; }
.status-badge.cancelled, .status-badge.canceled { background: #F8D2E5 !important; color: #7A1240 !important; }
.status-badge.in_progress, .status-badge.in-progress, .status-badge.called { background: var(--qc-ink) !important; color: var(--qc-yellow) !important; }
.status-badge.no_show, .status-badge.missed { background: var(--qc-warning-light) !important; color: var(--qc-warning-ink) !important; }
.queue-badge, .arrival-badge, .appt-badge { border-radius: 999px !important; }

/* Small Terms · Privacy links at the foot of public pages */
.legal-links { text-align: center; font-size: 13px; color: var(--qc-ink-muted); margin: 12px auto 16px; }
.legal-links a { color: var(--qc-ink-muted); font-weight: 600; text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }
/* On one-screen pages (landing, login) the links sit in the bottom margin, adding no height */
body:has(> .legal-links.at-bottom) { position: relative; }
.legal-links.at-bottom { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; }

/* Keyboard and screen readers: "Skip to main content" (seen only when focused, see qc-nav.js) and text for screen readers only */
.qc-skip-link { position: absolute; left: 12px; top: -100px; z-index: 30000; padding: 10px 16px; border-radius: 999px; background: var(--qc-yellow); color: var(--qc-ink); font-weight: 700; text-decoration: none; }
.qc-skip-link:focus { top: 12px; }
.qc-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The main area gets the focus from the skip link: no ring around the whole page */
[role="main"][tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }
/* Off-canvas menu on phones: out of the Tab order while it is closed */
@media (max-width: 768px) {
    .sidebar:not(.qc-open) { visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
}
/* A page window (qc-a11y.js) takes the focus itself when it opens: no ring around the whole window */
[aria-modal="true"][tabindex="-1"]:focus { outline: none; }