/* ============================================================
   DoctorQR · Portal extensions
   Screen-specific patterns for the Doctor + Admin portals that
   sit on top of design-system.css. Same --dq-* token vocabulary.
   Values taken verbatim from DoctorQR.dc.html.
   ============================================================ */

html, body { margin: 0; padding: 0; }
body {
    font-family: var(--dq-font-ui);
    color: var(--dq-body);
    background: var(--dq-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
button { font-family: inherit; }
::selection { background: var(--dq-primary-soft); color: #7A0918; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: #C9CCD1; border-radius: var(--dq-r-pill);
    border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #AEB2B9; background-clip: padding-box; }

@keyframes dqrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Shell ---- */
.dq-shell { display: flex; min-height: 100vh; background: var(--dq-canvas); }
.dq-sidebar {
    width: 236px; flex: 0 0 236px; background: #FBFBFC;
    border-right: 1px solid var(--dq-fill);
    display: flex; flex-direction: column;
    height: 100vh; position: sticky; top: 0;
}
.dq-sidebar--dark { background: var(--dq-panel); border-right-color: #23262C; color: #E7E9EC; }
.dq-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; }
.dq-sidebar__nav { flex: 1; padding: 8px 12px; overflow-y: auto; }
.dq-sidebar__foot {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-top: 1px solid var(--dq-fill);
}
.dq-sidebar--dark .dq-sidebar__foot { border-top-color: #23262C; }

.dq-content { flex: 1; min-width: 0; background: var(--dq-canvas); overflow-y: auto; }
.dq-page { padding: 26px 28px; animation: dqrIn .3s ease; }

/* ---- Nav item (anchor variant of .dq-navitem) ---- */
.dq-navitem { text-decoration: none; }
.dq-navitem svg { flex: 0 0 auto; }
/* Fit the longest label ("Payment verification" + badge) on one line in the
   236px rail: slightly tighter padding/gap and a hair smaller label. */
.dq-navitem { padding: 9px 10px; gap: 10px; }
.dq-navitem > span:not(.dq-navitem__count) {
    white-space: nowrap; font-size: 13.5px; min-width: 0;
}
.dq-navitem__count { flex: 0 0 auto; }

/* ---- Page header ---- */
.dq-pagehead {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 20px;
}
.dq-pagetitle {
    font-family: var(--dq-font-display); font-size: 24px; font-weight: 800;
    letter-spacing: -.02em; color: var(--dq-ink); margin: 0;
}
.dq-pagetitle--lg { font-size: 26px; }
.dq-pagesub { font: 500 14px var(--dq-font-ui); color: var(--dq-muted); margin-top: 4px; }

/* ---- Avatar ---- */
.dq-avatar {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: linear-gradient(150deg, var(--dq-steel), #5E7BA6); color: #fff;
    font-family: var(--dq-font-ui); font-weight: 800;
    width: 40px; height: 40px; border-radius: 11px; font-size: 14px;
}
.dq-avatar--sm { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.dq-avatar--lg { width: 46px; height: 46px; border-radius: 12px; font-size: 16px; }
.dq-avatar--muted { background: var(--dq-fill); color: #6B727B; }
.dq-avatar--dark { background: #2A2E36; color: #AFC1DC; }

/* ---- Stat card ---- */
.dq-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.dq-stat { position: relative; }
.dq-stat__dot {
    position: absolute; top: 16px; right: 16px; width: 8px; height: 8px;
    border-radius: var(--dq-r-pill); background: var(--dq-primary);
    box-shadow: 0 0 0 4px var(--dq-primary-tint);
}

/* ---- Panel (white list card) ---- */
.dq-panel {
    background: var(--dq-surface); border: 1px solid var(--dq-border-2);
    border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(20,22,26,.04);
}
.dq-panel--raised { box-shadow: var(--dq-shadow-md); }
.dq-panel__head {
    padding: 16px 20px; border-bottom: 1px solid #F2F2F3;
    font-family: var(--dq-font-display); font-size: 16px; font-weight: 700; color: var(--dq-ink);
}
.dq-panel__pad { padding: 22px; }
.dq-cardtitle {
    font-family: var(--dq-font-display); font-size: 16px; font-weight: 700;
    color: var(--dq-ink); margin-bottom: 16px;
}

/* ---- List row ---- */
.dq-row { display: flex; align-items: center; gap: 14px; padding: 15px 20px; border-bottom: 1px solid #F5F5F6; }
.dq-row:last-child { border-bottom: none; }
.dq-row__time {
    font: 700 13px var(--dq-font-ui); color: var(--dq-ink);
    width: 64px; flex: 0 0 auto; font-variant-numeric: tabular-nums;
}
.dq-row__date {
    font: 600 12.5px var(--dq-font-ui); color: var(--dq-muted);
    width: 74px; flex: 0 0 auto; font-variant-numeric: tabular-nums;
}
.dq-row__main { flex: 1; min-width: 0; }
.dq-row__name { font: 600 14px var(--dq-font-ui); color: var(--dq-ink); }
.dq-row__meta { font: 500 12px var(--dq-font-ui); color: var(--dq-muted); font-variant-numeric: tabular-nums; }

/* ---- Dark action panel ---- */
.dq-darkpanel {
    background: var(--dq-panel); border-radius: 14px; padding: 20px;
    color: #fff; box-shadow: 0 8px 24px rgba(20,22,26,.16);
}
.dq-darkpanel__title { font-family: var(--dq-font-display); font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.dq-darkpanel__text { font: 400 13px/1.55 var(--dq-font-ui); color: #B7BCC4; margin-bottom: 18px; }
.dq-darkpanel__badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
    border-radius: var(--dq-r-pill); background: rgba(176,13,35,.24);
    color: var(--dq-primary-on-dark); font: 700 11px var(--dq-font-ui); margin-bottom: 14px;
}

/* ---- Action card (needs-verification / approval) ---- */
.dq-actioncard {
    background: var(--dq-surface); border: 1px solid var(--dq-border-2);
    border-radius: 14px; overflow: hidden; box-shadow: var(--dq-shadow-md); margin-bottom: 16px;
}
.dq-actioncard__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid #F2F2F3;
}
.dq-actioncard__head--warn { background: #FFFBF3; border-bottom-color: #F3E9D2; padding: 16px 20px; }
.dq-actioncard__body { padding: 18px 20px; }
.dq-actioncard__foot {
    padding: 16px 20px; display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
}

/* ---- Meta grid (amount / trxid / sender) ---- */
.dq-metagrid {
    padding: 18px 20px; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; border-bottom: 1px solid #F2F2F3;
}
.dq-metagrid--4 { grid-template-columns: repeat(4, 1fr); }
.dq-meta__label {
    font: 600 11.5px var(--dq-font-ui); letter-spacing: .05em;
    text-transform: uppercase; color: var(--dq-muted);
}
.dq-meta__value {
    font: 700 16px var(--dq-font-ui); color: var(--dq-ink);
    margin-top: 3px; font-variant-numeric: tabular-nums;
}
.dq-meta__value--plain { font-variant-numeric: normal; }

/* ---- Availability ---- */
.dq-chips { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.dq-chip {
    height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid #DADCE0;
    background: #fff; color: #4B535C; font: 600 13.5px var(--dq-font-ui);
    cursor: pointer; display: inline-flex; align-items: center; text-decoration: none;
    transition: background .13s, border-color .13s;
}
.dq-chip:hover { background: var(--dq-canvas); color: #4B535C; }
.dq-chip.is-active { background: var(--dq-ink); color: #fff; border-color: var(--dq-ink); }
/* Marks a location the doctor owns but isn't paying for yet. */
.dq-chip__flag { color: var(--dq-warning); font-size: 18px; line-height: 0; margin-left: 2px; }
.dq-chip.is-active .dq-chip__flag { color: #F0C674; }
.dq-chip.is-active:hover { background: var(--dq-ink); color: #fff; }

.dq-dayrow { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #F5F5F6; }
.dq-dayrow:last-child { border-bottom: none; }
.dq-dayrow.is-closed { opacity: .55; }
.dq-dayrow__label { font: 700 14px var(--dq-font-ui); color: var(--dq-ink); width: 96px; }
.dq-timepill {
    padding: 7px 12px; border-radius: var(--dq-r-sm); background: var(--dq-canvas);
    font: 600 13px var(--dq-font-ui); color: var(--dq-ink); font-variant-numeric: tabular-nums;
}
.dq-slotpill {
    padding: 7px 12px; border-radius: var(--dq-r-sm); background: var(--dq-steel-tint);
    font: 700 12px var(--dq-font-ui); color: var(--dq-steel-deep);
}

/* ---- Static switch (display-only toggle) ---- */
.dq-switch-static {
    width: 44px; height: 24px; border-radius: var(--dq-r-pill);
    background: #D2D5DA; position: relative; flex: 0 0 auto; display: inline-block;
}
.dq-switch-static::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: var(--dq-r-pill); background: #fff;
}
.dq-switch-static.is-on { background: var(--dq-success); }
.dq-switch-static.is-on::after { left: 23px; }

/* ---- Info banner (steel) ---- */
.dq-banner {
    display: flex; align-items: center; gap: 14px; padding: 16px 20px;
    border-radius: 14px; background: var(--dq-steel-tint);
    border: 1px solid #D5E0F0; margin-bottom: 20px;
}
.dq-banner__icon {
    width: 42px; height: 42px; border-radius: 11px; background: var(--dq-steel);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.dq-banner__title { font: 700 15px var(--dq-font-ui); color: #274063; }
.dq-banner__text { font: 500 13px var(--dq-font-ui); color: var(--dq-steel-deep); }

/* ---- Warning note ---- */
.dq-note {
    display: flex; gap: 10px; padding: 13px 15px; border-radius: var(--dq-r-md);
    background: var(--dq-warning-tint); font: 500 12.5px/1.5 var(--dq-font-ui);
    color: var(--dq-warning-text);
}
.dq-note svg { flex: 0 0 auto; margin-top: 1px; }

/* ---- Subscription plan builder ---- */
.dq-planrow {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; border-bottom: 1px solid #F2F2F3;
}
.dq-planrow:last-of-type { border-bottom: none; }
.dq-planrow__name { font: 700 14.5px var(--dq-font-ui); color: var(--dq-ink); }
.dq-planrow__sub { font: 500 12.5px var(--dq-font-ui); color: var(--dq-muted); font-variant-numeric: tabular-nums; }
.dq-stepper { display: flex; align-items: center; gap: 12px; }
.dq-stepper__btn {
    width: 36px; height: 36px; border-radius: 9px; border: 1px solid #DADCE0;
    background: #fff; color: var(--dq-ink); font-size: 20px; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background .13s;
}
.dq-stepper__btn:hover { background: var(--dq-canvas); }
.dq-stepper__value {
    font-family: var(--dq-font-display); font-size: 20px; font-weight: 800;
    color: var(--dq-ink); width: 24px; text-align: center; font-variant-numeric: tabular-nums;
}
.dq-stepper__price {
    font: 700 15px var(--dq-font-ui); color: var(--dq-ink);
    width: 64px; text-align: right; font-variant-numeric: tabular-nums;
}
.dq-total {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 18px; margin-top: 6px; border-top: 2px solid var(--dq-ink);
}
.dq-total__label { font-family: var(--dq-font-display); font-size: 16px; font-weight: 800; color: var(--dq-ink); }
.dq-total__value {
    font-family: var(--dq-font-display); font-size: 26px; font-weight: 800;
    color: var(--dq-primary); font-variant-numeric: tabular-nums;
}

/* ---- Dark bKash pay panel ---- */
.dq-paypanel {
    background: var(--dq-panel); border-radius: 14px; padding: 22px;
    color: #fff; box-shadow: 0 8px 24px rgba(20,22,26,.16);
}
.dq-paypanel__title { font-family: var(--dq-font-display); font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.dq-paypanel__text { font: 400 12.5px/1.5 var(--dq-font-ui); color: #B7BCC4; margin-bottom: 10px; }
.dq-numbox {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-radius: var(--dq-r-md);
    background: rgba(255,255,255,.07); margin-bottom: 14px;
}
.dq-numbox__num { font: 800 16px var(--dq-font-ui); font-variant-numeric: tabular-nums; }
.dq-input--dark {
    width: 100%; height: 44px; border: 1px solid #2E323A; border-radius: 9px;
    padding: 0 14px; font: 600 14px var(--dq-font-ui); color: #fff;
    background: rgba(255,255,255,.05); outline: none; margin-bottom: 10px;
    letter-spacing: .05em; text-transform: uppercase;
}
.dq-input--dark::placeholder { color: #7A828E; }
.dq-input--dark:focus { border-color: var(--dq-primary-on-dark); }
.dq-btn--ondark {
    height: 30px; padding: 0 11px; border-radius: 7px; border: none;
    background: rgba(255,255,255,.14); color: #fff;
    font: 600 12px var(--dq-font-ui); cursor: pointer;
}
.dq-btn--ondark:hover { background: rgba(255,255,255,.22); }

/* ---- QR screen ---- */
.dq-qrgrid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.dq-qrcard {
    background: var(--dq-surface); border: 1px solid var(--dq-border-2);
    border-radius: var(--dq-r-lg); padding: 24px; box-shadow: 0 4px 14px rgba(20,22,26,.07);
}
.dq-qrframe { border: 1px solid var(--dq-fill); border-radius: 14px; padding: 22px; text-align: center; }
.dq-qrframe__brand { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 16px; }
.dq-qrframe__code { width: 200px; height: 200px; margin: 0 auto; padding: 12px; background: #fff; }
.dq-qrframe__code svg, .dq-qrframe__code img { width: 100%; height: 100%; display: block; }
.dq-qrframe__name { font-family: var(--dq-font-display); font-size: 16px; font-weight: 800; color: var(--dq-ink); margin-top: 14px; }
.dq-qrframe__hint { font: 500 12.5px var(--dq-font-ui); color: var(--dq-muted); }
.dq-qrframe__url { font: 600 12px var(--dq-font-ui); color: var(--dq-primary); margin-top: 6px; font-variant-numeric: tabular-nums; }
.dq-linkbox {
    display: flex; align-items: center; height: 46px; border: 1px solid var(--dq-fill);
    border-radius: var(--dq-r-md); padding: 0 14px; background: #FAFAFB;
}
.dq-linkbox__url { font: 600 13.5px var(--dq-font-ui); color: var(--dq-body); font-variant-numeric: tabular-nums; }

/* ---- Profile screen ---- */
.dq-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dq-grid-dash { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.dq-grid-sub { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.dq-bkashbox {
    display: flex; align-items: center; height: 48px; border: 1px solid #DADCE0;
    border-radius: 9px; padding: 0 14px; margin-bottom: 20px; background: #FAFAFB;
}
.dq-bkashbox__num {
    font: 800 18px var(--dq-font-ui); color: var(--dq-ink);
    letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.dq-chamber {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border: 1px solid var(--dq-fill); border-radius: var(--dq-r-md);
    cursor: pointer; list-style: none; transition: border-color .13s, background .13s;
}
.dq-chamber::-webkit-details-marker { display: none; }
.dq-chamber:hover { border-color: #C7CBD1; background: #FAFAFB; }

/* Each chamber expands in place to reveal its edit + delete controls. */
.dq-chamber-item { margin-bottom: 10px; }
.dq-chamber-item:last-of-type { margin-bottom: 0; }
.dq-chamber-item[open] .dq-chamber {
    border-color: var(--dq-primary);
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.dq-chamber-item[open] .dq-chamber__chevron { transform: rotate(180deg); }
.dq-chamber__chevron { color: var(--dq-muted); display: flex; transition: transform .16s; flex: 0 0 auto; }
.dq-chamber__edit {
    padding: 14px; border: 1px solid var(--dq-primary); border-top: none;
    border-radius: 0 0 var(--dq-r-md) var(--dq-r-md); background: #fff;
}
.dq-chamber__icon {
    width: 36px; height: 36px; border-radius: 9px; background: var(--dq-primary-tint);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.dq-btn--dashed {
    height: 32px; padding: 0 12px; border-radius: var(--dq-r-sm);
    border: 1px dashed #C7CBD1; background: #fff; color: var(--dq-primary);
    font: 600 12.5px var(--dq-font-ui); cursor: pointer;
}
.dq-btn--dashed:hover { background: var(--dq-primary-tint); }

/* ---- Support conversation thread ---- */
.dq-thread { display: flex; flex-direction: column; gap: 10px; }
.dq-msg {
    display: flex; gap: 12px; padding: 16px 18px;
    background: var(--dq-surface); border: 1px solid var(--dq-border-2);
    border-radius: var(--dq-r-md); box-shadow: var(--dq-shadow-sm);
}
/* The team's replies sit visually apart from the doctor's. */
.dq-msg--team { background: #FAFBFC; border-color: #D9E2EF; }
.dq-msg__body { flex: 1; min-width: 0; }
.dq-msg__head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px;
}
.dq-msg__head strong { font: 700 13.5px var(--dq-font-ui); color: var(--dq-ink); }
.dq-msg__head span { font: 500 12px var(--dq-font-ui); color: var(--dq-muted); }
.dq-msg__tag {
    font: 700 10.5px var(--dq-font-ui); letter-spacing: .06em; text-transform: uppercase;
    color: var(--dq-steel-deep); background: var(--dq-steel-tint);
    padding: 2px 7px; border-radius: var(--dq-r-pill);
}
.dq-msg__text {
    font: 400 14px/1.65 var(--dq-font-ui); color: var(--dq-body);
    white-space: pre-wrap; word-break: break-word;
}

/* Whole-row links in list panels. */
.dq .dq-row--link { text-decoration: none; transition: background .12s; }
.dq .dq-row--link:hover { background: #FAFAFB; }

/* ---- Admin: doctor directory ---- */
.dq-filterbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.dq-tablewrap { overflow-x: auto; }
.dq-table th.dq-num, .dq-table td.dq-num { text-align: right; }
.dq-table td.dq-num { font-variant-numeric: tabular-nums; }
.dq-cellsub { font: 500 12px var(--dq-font-ui); color: var(--dq-muted); margin-top: 1px; }
.dq-cellmono {
    font: 600 12.5px var(--dq-font-ui); color: var(--dq-primary);
    font-variant-numeric: tabular-nums;
}
.dq-table td { vertical-align: middle; }

.dq-backlink {
    display: inline-flex; align-items: center; gap: 5px;
    font: 600 13px var(--dq-font-ui); color: var(--dq-muted); text-decoration: none;
}
.dq .dq-backlink:hover { color: var(--dq-ink); }

.dq-detailgrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .dq-detailgrid { grid-template-columns: 1fr; } }

.dq-statgrid--2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }

/* Definition list used for the flat fact panels. */
.dq-deflist { margin: 0; padding: 4px 20px; }
.dq-deflist > div {
    display: grid; grid-template-columns: 150px 1fr; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid #F5F5F6;
}
.dq-deflist > div:last-child { border-bottom: none; }
.dq-deflist dt { font: 500 13px var(--dq-font-ui); color: var(--dq-muted); }
.dq-deflist dd {
    margin: 0; font: 600 13.5px var(--dq-font-ui); color: var(--dq-ink); word-break: break-word;
}
@media (max-width: 560px) {
    .dq-deflist > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Admin: create a doctor ---- */
.dq-newdoctor {
    background: var(--dq-surface); border: 1px solid var(--dq-border-2);
    border-radius: 14px; margin-bottom: 16px; overflow: hidden;
    box-shadow: var(--dq-shadow-sm);
}
.dq-newdoctor__summary {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 16px 20px; cursor: pointer; list-style: none;
    font-family: var(--dq-font-display); font-size: 15px; font-weight: 700;
    color: var(--dq-ink); transition: background .13s;
}
.dq-newdoctor__summary::-webkit-details-marker { display: none; }
.dq-newdoctor__summary:hover { background: #FAFAFB; }
.dq-newdoctor[open] .dq-newdoctor__summary { border-bottom: 1px solid var(--dq-fill); }
.dq-newdoctor__hint {
    font: 500 12.5px var(--dq-font-ui); color: var(--dq-muted);
}
.dq-newdoctor__body { padding: 20px; }
.dq-formgrid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 720px) { .dq-formgrid { grid-template-columns: 1fr; } }

/* ---- Editable weekly hours ---- */
.dq-hoursrow {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 20px; border-bottom: 1px solid #F5F5F6;
}
.dq-hoursrow:last-child { border-bottom: none; }

/* Dim a closed day's fields — driven by the live checkbox, not a class
   rendered on the server, so ticking a day brightens it immediately.
   The inputs stay ENABLED on purpose: the form posts every day's times
   and the controller derives open/closed from the checkbox, so disabling
   them would strip the values and fail validation. */
.dq-hoursrow:has(.dq-hoursrow__toggle input:not(:checked)) .dq-hoursrow__fields {
    opacity: .45;
}
.dq-hoursrow__toggle {
    display: flex; align-items: center; gap: 12px; cursor: pointer; flex: 0 0 auto;
}
.dq-hoursrow__toggle input { width: 18px; height: 18px; accent-color: var(--dq-success); cursor: pointer; }
.dq-hoursrow__day { font: 700 14px var(--dq-font-ui); color: var(--dq-ink); width: 92px; }
.dq-hoursrow__fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dq-hoursrow__dash { color: var(--dq-muted); }
.dq-timeinput, .dq-minselect {
    height: 36px; padding: 0 10px; border: 1px solid #DADCE0;
    border-radius: var(--dq-r-sm); background: #fff; color: var(--dq-ink);
    font: 600 13px var(--dq-font-ui); font-variant-numeric: tabular-nums;
    outline: none; transition: border-color .13s, box-shadow .13s;
}
.dq-minselect { padding-right: 6px; }
.dq-timeinput:focus, .dq-minselect:focus { border-color: var(--dq-primary); box-shadow: var(--dq-ring); }

/* ---- Cancel popover (details/summary, no JS) ---- */
/* The panel clips its children for rounded corners, which would cut the
   popover off. Lift the clip only while one is actually open. */
.dq-panel:has(.dq-cancel[open]) { overflow: visible; }
.dq-panel:has(.dq-cancel[open]) .dq-row:has(.dq-cancel[open]) { position: relative; z-index: 2; }

.dq-cancel { position: relative; flex: 0 0 auto; }
.dq-cancel > summary { list-style: none; cursor: pointer; }
.dq-cancel > summary::-webkit-details-marker { display: none; }
.dq-cancel__panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
    width: 340px; padding: 16px;
    background: var(--dq-surface); border: 1px solid var(--dq-border-2);
    border-radius: var(--dq-r-md); box-shadow: var(--dq-shadow-lg);
}
@media (max-width: 900px) {
    .dq-cancel__panel { position: fixed; left: 16px; right: 16px; width: auto; }
}

/* ---- Cancel: refund vs reschedule ---- */
.dq-choice {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px; border: 2px solid var(--dq-border-2);
    border-radius: var(--dq-r-md); cursor: pointer; background: #fff;
    margin-bottom: 10px; transition: border-color .13s, background .13s;
}
.dq-choice:has(input:checked) { border-color: var(--dq-primary); background: var(--dq-primary-tint); }
.dq-choice input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--dq-primary); cursor: pointer; }
.dq-choice__name { display: block; font: 700 14px var(--dq-font-ui); color: var(--dq-ink); }
.dq-choice__sub { display: block; font: 500 12.5px/1.5 var(--dq-font-ui); color: var(--dq-muted); margin-top: 2px; }

/* ---- Plan builder: pick which chambers are live ---- */
.dq-planpick {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid var(--dq-border-2); border-radius: var(--dq-r-md);
    cursor: pointer; background: #fff;
    transition: border-color .13s, background .13s;
}
.dq-planpick:hover { border-color: #C7CBD1; }
.dq-planpick:has(input:checked) {
    border-color: var(--dq-primary); background: var(--dq-primary-tint);
}
.dq-planpick input { width: 18px; height: 18px; accent-color: var(--dq-primary); cursor: pointer; flex: 0 0 auto; }
.dq-planpick__name { display: block; font: 700 14px var(--dq-font-ui); color: var(--dq-ink); }
.dq-planpick__sub {
    display: block; font: 500 12.5px var(--dq-font-ui); color: var(--dq-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dq-planpick__price {
    font: 700 15px var(--dq-font-ui); color: var(--dq-ink);
    font-variant-numeric: tabular-nums; flex: 0 0 auto;
}

/* Shown while the on-screen plan differs from the billed one. */
.dq-unsaved {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 14px; padding: 10px 12px;
    border-radius: var(--dq-r-sm); background: var(--dq-warning-tint);
    font: 500 12.5px/1.5 var(--dq-font-ui); color: var(--dq-warning-text);
}
.dq-unsaved[hidden] { display: none; }
.dq-unsaved svg { flex: 0 0 auto; margin-top: 1px; }
.dq-unsaved strong { font-weight: 700; }

/* ---- Trial card in sidebar ---- */
.dq-trialcard { border: 1px solid var(--dq-border-2); border-radius: var(--dq-r-md); padding: 13px; background: #fff; }
.dq-trialcard__text { font: 500 12px/1.5 var(--dq-font-ui); color: var(--dq-muted); margin: 9px 0; }

/* On the dark rail the card becomes a translucent panel. */
.dq-sidebar--dark .dq-trialcard { background: rgba(255,255,255,.05); border-color: #2A2E36; }
.dq-sidebar--dark .dq-trialcard__text { color: #9BA3AE; }
.dq-sidebar--dark .dq-trialcard .dq-pill--info { background: rgba(125,150,185,.18); color: #AFC1DC; }

/* ============================================================
   ANCHOR-AS-CONTROL specificity fixes
   design-system.css sets `.dq a { color: var(--dq-primary) }` which is
   (0,1,1) and therefore beats single-class control rules like
   `.dq-btn--primary` (0,1,0). Links used as buttons/tabs/chips/nav need
   these to win back their own colour.
   ============================================================ */
.dq a.dq-btn,
.dq a.dq-chip,
.dq a.dq-tab,
.dq a.dq-navitem,
.dq a.dq-stepper__btn { text-decoration: none; }

.dq a.dq-btn--primary,
.dq a.dq-btn--primary:hover,
.dq a.dq-btn--success,
.dq a.dq-btn--success:hover { color: #fff; }

.dq a.dq-btn--secondary,
.dq a.dq-btn--secondary:hover,
.dq a.dq-stepper__btn,
.dq a.dq-stepper__btn:hover { color: var(--dq-ink); }

.dq a.dq-btn--danger,
.dq a.dq-btn--ghost { color: var(--dq-primary); }

.dq a.dq-chip { color: #4B535C; }
.dq a.dq-chip.is-active,
.dq a.dq-chip.is-active:hover { color: #fff; }

.dq a.dq-tab { color: var(--dq-muted); }
.dq a.dq-tab.is-active { color: var(--dq-primary); }

.dq a.dq-navitem { color: #4B535C; }
.dq a.dq-navitem.is-active { color: var(--dq-primary); }
.dq .dq-sidebar--dark a.dq-navitem { color: #9BA3AE; }
.dq .dq-sidebar--dark a.dq-navitem.is-active { color: #fff; }

/* ============================================================
   AUTH / LOGIN
   Split layout: dark brand panel + form. Tokens only.
   ============================================================ */
.dq-auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.dq-auth__brand {
    background: var(--dq-panel); color: #fff;
    padding: 40px; display: flex; flex-direction: column;
    justify-content: space-between; gap: 40px;
    position: relative; overflow: hidden;
}
/* Soft crimson bloom, echoing the dark action panels. */
.dq-auth__brand::after {
    content: ""; position: absolute; width: 460px; height: 460px;
    right: -170px; bottom: -190px; border-radius: 50%;
    background: radial-gradient(circle, rgba(176,13,35,.34), transparent 68%);
    pointer-events: none;
}
.dq-auth__brandtop, .dq-auth__brand > div, .dq-auth__foot { position: relative; z-index: 1; }

.dq-auth__headline {
    font-family: var(--dq-font-display); font-size: 40px; font-weight: 800;
    line-height: 1.1; letter-spacing: -.03em; color: #fff; margin: 0 0 16px;
}
.dq-auth__blurb {
    font: 400 15px/1.65 var(--dq-font-ui); color: #B7BCC4;
    margin: 0; max-width: 42ch;
}
.dq-auth__foot {
    font: 600 12px var(--dq-font-ui); letter-spacing: .12em;
    text-transform: uppercase; color: #5A6270;
}

.dq-auth__main {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px; background: var(--dq-canvas);
}
.dq-auth__card { width: 100%; max-width: 380px; animation: dqrIn .3s ease; }
.dq-auth__mobilelogo { display: none; margin-bottom: 28px; }

.dq-auth__title {
    font-family: var(--dq-font-display); font-size: 30px; font-weight: 800;
    letter-spacing: -.02em; color: var(--dq-ink); margin: 0 0 6px;
}
.dq-auth__sub { font: 500 14px var(--dq-font-ui); color: var(--dq-muted); margin: 0 0 24px; }

.dq-auth__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 4px 0 20px;
}
.dq-auth__remember {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font: 500 13.5px var(--dq-font-ui); color: var(--dq-body);
}
.dq-auth__remember input { width: 16px; height: 16px; accent-color: var(--dq-primary); cursor: pointer; }
.dq .dq-auth__link { font: 600 13.5px var(--dq-font-ui); color: var(--dq-primary); }

.dq-auth__divider {
    display: flex; align-items: center; gap: 12px;
    margin: 26px 0 14px; color: var(--dq-muted);
    font: 700 11px var(--dq-font-ui); letter-spacing: .12em; text-transform: uppercase;
}
.dq-auth__divider::before, .dq-auth__divider::after {
    content: ""; flex: 1; height: 1px; background: var(--dq-border-2);
}

.dq-auth__creds { display: flex; flex-direction: column; gap: 8px; }
.dq-auth__cred {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--dq-border-2);
    border-radius: var(--dq-r-sm); background: #fff;
}
.dq-auth__credrole {
    font: 700 11px var(--dq-font-ui); text-transform: uppercase; letter-spacing: .06em;
    color: var(--dq-steel-deep); background: var(--dq-steel-tint);
    padding: 3px 8px; border-radius: var(--dq-r-pill); flex: 0 0 auto;
}
.dq-auth__cred code {
    font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--dq-body);
}
.dq-auth__cred code:last-child { margin-left: auto; color: var(--dq-muted); }

/* Registration needs a wider card for its paired fields. */
.dq-auth__card--wide { max-width: 520px; }
.dq-formrow {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-bottom: 14px;
}
.dq-auth__alt {
    margin: 18px 0 0; text-align: center;
    font: 500 13.5px var(--dq-font-ui); color: var(--dq-muted);
}
.dq-successmark {
    width: 52px; height: 52px; border-radius: var(--dq-r-pill);
    background: var(--dq-success); display: flex;
    align-items: center; justify-content: center; margin-bottom: 20px;
}

@media (max-width: 860px) {
    .dq-auth { grid-template-columns: 1fr; }
    .dq-auth__brand { display: none; }
    .dq-auth__mobilelogo { display: block; }
}
@media (max-width: 560px) {
    .dq-formrow { grid-template-columns: 1fr; }
}

/* ---- Sidebar sign-out ---- */
.dq-signout {
    margin-left: auto; flex: 0 0 auto; display: inline-flex;
    align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--dq-r-sm);
    border: none; background: transparent; cursor: pointer;
    color: #6B727B; transition: background .13s, color .13s;
}
.dq-signout:hover { background: #F0F1F3; color: var(--dq-ink); }
.dq-sidebar--dark .dq-signout { color: #5A6270; }
.dq-sidebar--dark .dq-signout:hover { background: rgba(255,255,255,.07); color: #fff; }

/* ---- Utilities ---- */
.dq-flex { display: flex; align-items: center; }
.dq-flex-gap { display: flex; align-items: center; gap: 12px; }
.dq-actions { display: flex; gap: 10px; justify-content: flex-end; }
.dq-mb-0 { margin-bottom: 0; }
.dq-mb-4 { margin-bottom: var(--dq-s4); }
.dq-mt-4 { margin-top: var(--dq-s4); }

/* ---- Responsive: collapse sidebar under 900px ---- */
@media (max-width: 900px) {
    .dq-shell { flex-direction: column; }
    .dq-sidebar { width: 100%; flex: none; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--dq-fill); }
    .dq-sidebar__nav { display: flex; overflow-x: auto; gap: 4px; }
    .dq-navitem { margin-bottom: 0; white-space: nowrap; }
    .dq-sidebar__foot, .dq-trialcard-wrap { display: none; }
    .dq-statgrid { grid-template-columns: repeat(2, 1fr); }
    .dq-grid-2, .dq-grid-dash, .dq-grid-sub, .dq-qrgrid { grid-template-columns: 1fr; }
    .dq-metagrid, .dq-metagrid--4 { grid-template-columns: repeat(2, 1fr); }
    .dq-page { padding: 20px 16px; }
}

/* ---- Onboarding: registration extras ---- */
.dq-optional {
    font: 500 11px var(--dq-font-ui); color: var(--dq-muted);
    text-transform: uppercase; letter-spacing: .06em; margin-left: 4px;
}
.dq-checkline {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 7px;
    cursor: pointer; font: 500 12.5px/1.45 var(--dq-font-ui); color: var(--dq-body);
}
.dq-checkline input { margin-top: 1px; width: 15px; height: 15px; accent-color: var(--dq-primary); cursor: pointer; flex: 0 0 auto; }
.dq-checkline--terms {
    margin: 18px 0 4px; padding: 12px 14px;
    border: 1px solid var(--dq-border-2); border-radius: var(--dq-r-sm);
    background: #FAFAFB; font-size: 13.5px;
}
/* A mirrored field is filled from the phone above, so it reads as derived. */
.dq-input.is-mirrored { background: var(--dq-canvas); color: var(--dq-muted); }

/* ---- Onboarding checklist ---- */
.dq-onboard {
    background: var(--dq-surface); border: 1px solid var(--dq-border-2);
    border-radius: 14px; padding: 20px; margin-bottom: 16px;
    box-shadow: var(--dq-shadow-sm);
}
.dq-onboard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.dq-onboard__title { font-family: var(--dq-font-display); font-size: 16px; font-weight: 700; color: var(--dq-ink); }
.dq-onboard__sub { font: 500 13px var(--dq-font-ui); color: var(--dq-muted); margin-top: 3px; }
.dq-onboard__pct {
    font-family: var(--dq-font-display); font-size: 22px; font-weight: 800;
    color: var(--dq-primary); font-variant-numeric: tabular-nums; flex: 0 0 auto;
}

.dq-checklist { list-style: none; margin: 0; padding: 0; }
.dq-checklist__item {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 0; border-bottom: 1px solid #F5F5F6;
}
.dq-checklist__item:last-child { border-bottom: none; }
.dq-checklist__mark {
    width: 20px; height: 20px; border-radius: var(--dq-r-pill); flex: 0 0 auto;
    border: 2px solid var(--dq-border-2); display: flex; align-items: center; justify-content: center;
}
.dq-checklist__item.is-done .dq-checklist__mark { background: var(--dq-success); border-color: var(--dq-success); }
.dq-checklist__label { display: block; font: 600 14px var(--dq-font-ui); color: var(--dq-ink); }
.dq-checklist__item.is-done .dq-checklist__label { color: var(--dq-muted); text-decoration: line-through; }
.dq-checklist__hint { display: block; font: 500 12.5px/1.45 var(--dq-font-ui); color: var(--dq-muted); margin-top: 2px; }

/* ---- Uploaded file row ---- */
.dq-filerow {
    display: flex; align-items: center; gap: 11px; padding: 11px 12px;
    border: 1px solid var(--dq-fill); border-radius: var(--dq-r-md); background: #FAFAFB;
}
.dq-filerow__icon {
    width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
    background: var(--dq-primary-tint); display: flex; align-items: center; justify-content: center;
}
.dq-filerow__name {
    display: block; font: 600 13px var(--dq-font-ui); color: var(--dq-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dq-filerow__meta { display: block; font: 500 12px var(--dq-font-ui); color: var(--dq-muted); }

/* ---- Locked feature banner ---- */
.dq-locked {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 15px; margin-bottom: 16px;
    border-radius: var(--dq-r-md); background: var(--dq-steel-tint);
    border: 1px solid #D5E0F0;
    font: 500 13px/1.5 var(--dq-font-ui); color: var(--dq-steel-deep);
}
.dq-locked svg { flex: 0 0 auto; margin-top: 1px; }
.dq-locked strong { font-weight: 700; }

/* ---- Pending-verification banner (pinned above portal content) ---- */
.dq-pending {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 11px;
    padding: 13px 28px; background: var(--dq-warning-tint);
    border-bottom: 1px solid #F3E9D2;
    font: 500 13.5px/1.45 var(--dq-font-ui); color: var(--dq-warning-text);
}
.dq-pending strong { font-weight: 700; }
.dq-pending svg { flex: 0 0 auto; }
@media (max-width: 720px) { .dq-pending { padding: 12px 16px; flex-wrap: wrap; } }

/* ---- Verification document previews ----
   An identity check means looking at the document, not at its filename. */
.dq-docpreview {
    display: block; margin-top: 12px;
    border: 1px solid var(--dq-line); border-radius: var(--dq-r-sm);
    background: var(--dq-canvas); overflow: hidden;
}
.dq-docpreview img {
    display: block; width: 100%; max-height: 260px;
    object-fit: contain; background: #fff;
}
.dq-docpreview--pdf { width: 100%; height: 320px; }
a.dq-docpreview:hover { border-color: var(--dq-primary); }

/* A rejected save must say so next to the field that caused it. */
.dq-fielderror {
    font: 500 12.5px/1.45 var(--dq-font-ui);
    color: var(--dq-primary);
    margin: 6px 0 0;
}

/* ---- Today's schedule ---- */
.dq-schedulerow__serial {
    flex: 0 0 auto; min-width: 44px;
    font: 800 15px var(--dq-font-display);
    color: var(--dq-ink); font-variant-numeric: tabular-nums;
    padding-top: 2px;
}
.dq-schedulerow__who {
    font: 500 12.5px var(--dq-font-ui); color: var(--dq-muted);
    margin-left: 8px;
}
/* The patient's own words — set apart so it reads as a quote, not chrome. */
.dq-schedulerow__problem {
    margin-top: 8px; padding: 8px 11px;
    border-left: 3px solid var(--dq-border-2);
    background: var(--dq-canvas); border-radius: 0 6px 6px 0;
    font: 400 13px/1.55 var(--dq-font-ui); color: var(--dq-body);
}

/* The DoctorQR mark on the sign-in and sign-up screens links home, so it
   must sit exactly where the plain mark did — no underline, no shift. */
.dq a.dq-auth__brandlink,
.dq a.dq-auth__brandlink:hover { display: inline-block; text-decoration: none; }
.dq a.dq-auth__brandlink:hover { opacity: .85; }
.dq a.dq-auth__brandlink:focus-visible { outline: 2px solid var(--dq-primary); outline-offset: 4px; border-radius: 6px; }