/* ==========================================================================
   portal-pages.css - the Schedule and Documents page BODIES (wave 0924d, ADDENDUM-2 PAGES track, G1-G3)
   Linked from schedule.html and documents.html only. The shell (header, sidebar, footer) lives in portal.css.

   Values were MEASURED from the reference pages Commander pointed at (public/old-dashboard/schedule.html and
   documents.html) with getComputedStyle in headless Chromium at 1440 and 390 px, and from the profile body's measured
   card and tab rules (css/portal-profile.css) so the three pages read as one design. The measurement script and its
   raw output: phase0/wave-0924d/portal-ui/pages/measure-ref.js and measure-ref.json. Where the old pages used colours
   outside our palette (a teal "Recent Uploads" header, a green "Activity Timeline" header, a red active pill), our
   navy / gold palette is used instead, as the addendum asks ("in our palette and shell").

   Everything is scoped under .dmc-pg (the page body root), so nothing here reaches another portal page. Logical
   properties (inline-start / inline-end) are used wherever the reference is left / right, so Arabic (dir="rtl")
   mirrors without a second set of rules.
   ========================================================================== */

.dmc-pg {
    --dmc-pg-grad-head: linear-gradient(to right, rgb(23, 68, 158), rgb(0, 22, 120));   /* ref .dmc-card-header */
    --dmc-pg-grad-brand: radial-gradient(circle, rgb(35, 84, 185) 0%, rgb(0, 22, 120) 100%);
    --dmc-pg-grad-silver: radial-gradient(circle, rgb(255, 255, 255) 15%, rgba(220, 220, 220, 0.92) 74%, rgb(220, 220, 220) 78%, rgb(180, 180, 180) 100%);
    --dmc-pg-grad-submit: radial-gradient(circle, rgb(0, 46, 140) 0%, rgb(0, 22, 120) 100%); /* ref #upload-btn */
    --dmc-pg-shadow-card: 0 0 1px 0 rgba(0, 0, 0, 0.125), 0 1px 3px 0 rgba(0, 0, 0, 0.2);  /* ref .card */
    --dmc-pg-ink: rgb(33, 37, 41);
    --dmc-pg-muted: rgb(108, 117, 125);
    --dmc-pg-navy: rgb(23, 68, 158);
    --dmc-pg-navy-text: rgba(7, 32, 109, 0.91);
    --dmc-pg-line: rgb(222, 226, 230);
    --dmc-pg-field-line: rgb(206, 212, 218);
    --dmc-pg-ok: rgb(40, 167, 69);
    --dmc-pg-bad: rgb(220, 53, 69);
    --dmc-pg-gold: rgb(255, 193, 7);
    --dmc-pg-gold-hover: rgb(224, 168, 0);
    --dmc-pg-gold-ink: rgb(31, 45, 61);
    --dmc-pg-teal: rgb(23, 162, 184);
    color: var(--dmc-pg-ink);
    font-size: 16px;
    line-height: 24px;
}
/* [hidden] must win over this file's display rules. */
.dmc-pg [hidden] { display: none !important; }
.dmc-pg .dmc-pg-row { --bs-gutter-x: 16px; }

/* ---- cards (ref .card / .card-header.dmc-card-header / h3.card-title) ------------------------------------------- */
.dmc-pg .dmc-pg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 16px;
    background-color: #fff;
    border: 0;
    border-radius: 4px;
    box-shadow: var(--dmc-pg-shadow-card);
    color: var(--dmc-pg-ink);
}
.dmc-pg .dmc-pg-card-header {
    padding: 12px 20px;
    background-image: var(--dmc-pg-grad-head);
    border-radius: 4px 4px 0 0;
    color: #fff;
}
.dmc-pg .dmc-pg-card-title {
    margin: 0;
    color: #fff;
    font-size: 17.6px;
    font-weight: 400;
    line-height: 21.12px;
    overflow-wrap: anywhere;
}
.dmc-pg .dmc-pg-card-title > i { margin-inline-end: 8px; font-size: 17.6px; }
.dmc-pg .dmc-pg-card-body { padding: 20px; }
.dmc-pg .dmc-pg-card-body.dmc-pg-tight { padding: 8px; }      /* ref "Your Appointments" .card-body.p-2 */
.dmc-pg .dmc-pg-h5 {                                           /* ref .card-body h5 */
    margin: 0 0 16px;
    color: var(--dmc-pg-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}
.dmc-pg .dmc-pg-hr { margin: 16px 0; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); opacity: 1; }
.dmc-pg .dmc-pg-center { margin: 0; text-align: center; }
.dmc-pg .dmc-pg-muted { color: var(--dmc-pg-muted); }
.dmc-pg .dmc-pg-small { font-size: 14px; line-height: 20px; }
.dmc-pg bdi { unicode-bidi: isolate; }

/* Plain notes and honest states (loading / empty / error) inside a card. */
.dmc-pg .dmc-pg-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    background-color: rgb(255, 248, 235);
    border: 1px solid rgb(245, 223, 155);
    border-radius: 4px;
    color: var(--dmc-pg-ink);
    font-size: 14px;
    line-height: 20px;
}
.dmc-pg .dmc-pg-note.dmc-pg-note-info { background-color: rgb(238, 242, 251); border-color: rgb(206, 218, 240); }
.dmc-pg .dmc-pg-note.dmc-pg-note-warn { background-color: rgb(255, 243, 205); border-color: rgb(255, 229, 144); }
.dmc-pg .dmc-pg-note.dmc-pg-note-error { background-color: rgb(248, 215, 218); border-color: rgb(241, 174, 181); color: rgb(114, 28, 36); }
.dmc-pg .dmc-pg-note.dmc-pg-note-ok { background-color: rgb(212, 237, 218); border-color: rgb(177, 223, 187); color: rgb(21, 87, 36); }
.dmc-pg .dmc-pg-empty {
    margin: 0;
    padding: 12px;
    color: var(--dmc-pg-muted);
    text-align: center;
}
.dmc-pg .dmc-pg-linkbtn {
    padding: 0;
    background: none;
    border: 0;
    color: var(--dmc-pg-navy);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.dmc-pg .dmc-pg-skel { padding: 12px; }
.dmc-pg .dmc-pg-skel .placeholder { border-radius: 4px; }

/* ---- G1 LEFT: "Your Appointments" (ref .appt-card) ---------------------------------------------------------------- */
.dmc-pg .dmc-pg-sect {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 8px 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
}
.dmc-pg .dmc-pg-sect + .dmc-pg-sub { margin: -4px 8px 8px; }
.dmc-pg .dmc-pg-sect.dmc-pg-sect-upcoming { color: var(--dmc-pg-ok); }
.dmc-pg .dmc-pg-sect.dmc-pg-sect-past { color: var(--dmc-pg-muted); margin-top: 16px; }
.dmc-pg .dmc-pg-sect.dmc-pg-sect-cancelled { color: var(--dmc-pg-bad); margin-top: 16px; }
.dmc-pg .dmc-pg-appts { margin: 0; padding: 0; list-style: none; }
.dmc-pg .dmc-pg-appt {
    margin-bottom: 8px;
    padding: 16px;
    background-color: #fff;
    border-inline-start: 4px solid var(--dmc-pg-navy);
    border-radius: 4px;
    box-shadow: var(--dmc-pg-shadow-card);
}
.dmc-pg .dmc-pg-appt.dmc-pg-appt-upcoming { border-inline-start-color: var(--dmc-pg-ok); }
.dmc-pg .dmc-pg-appt.dmc-pg-appt-past { border-inline-start-color: rgb(108, 117, 125); }
.dmc-pg .dmc-pg-appt.dmc-pg-appt-cancelled { border-inline-start-color: var(--dmc-pg-bad); }
.dmc-pg .dmc-pg-appt-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.dmc-pg .dmc-pg-appt-when {
    margin: 0 0 4px;
    color: var(--dmc-pg-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}
.dmc-pg .dmc-pg-appt-when > i { margin-inline-end: 8px; }
.dmc-pg .dmc-pg-appt-upcoming .dmc-pg-appt-when > i { color: var(--dmc-pg-ok); }
.dmc-pg .dmc-pg-appt-cancelled .dmc-pg-appt-when > i { color: var(--dmc-pg-bad); }
.dmc-pg .dmc-pg-appt-past .dmc-pg-appt-when > i { color: var(--dmc-pg-muted); }
.dmc-pg .dmc-pg-appt-meta {
    margin: 0;
    color: var(--dmc-pg-muted);
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
}
.dmc-pg .dmc-pg-appt-meta > i { margin-inline-end: 4px; }
.dmc-pg .dmc-pg-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50rem;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}
.dmc-pg .dmc-pg-pill-confirmed { background-color: rgb(0, 34, 130); }
.dmc-pg .dmc-pg-pill-cancelled { background-color: rgb(108, 117, 125); }
.dmc-pg .dmc-pg-pill-completed { background-color: var(--dmc-pg-ok); }
.dmc-pg .dmc-pg-pill-no-show { background-color: var(--dmc-pg-bad); }
.dmc-pg .dmc-pg-appt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.dmc-pg .dmc-pg-appt-actions .dmc-pg-small { color: var(--dmc-pg-muted); }
.dmc-pg .dmc-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    text-decoration: none;
    cursor: pointer;
}
.dmc-pg .dmc-pg-btn:disabled { opacity: 0.65; cursor: default; }
.dmc-pg .dmc-pg-btn:focus-visible { outline: 3px solid var(--dmc-pg-gold); outline-offset: 2px; }
.dmc-pg .dmc-pg-btn-rs { background-color: var(--dmc-pg-gold); color: var(--dmc-pg-gold-ink); }       /* ref .btn-warning */
.dmc-pg .dmc-pg-btn-rs:hover:not(:disabled) { background-color: var(--dmc-pg-gold-hover); color: var(--dmc-pg-gold-ink); }
.dmc-pg .dmc-pg-btn-cancel { background-color: var(--dmc-pg-bad); color: #fff; }                      /* ref .btn-danger */
.dmc-pg .dmc-pg-btn-cancel:hover:not(:disabled) { background-color: rgb(200, 35, 51); color: #fff; }
.dmc-pg .dmc-pg-btn-book {
    background-color: rgb(0, 34, 130);
    border: 2px outset rgb(0, 34, 130);
    color: #fff;
}
.dmc-pg .dmc-pg-btn-book:hover { background-color: rgb(9, 58, 179); border-color: rgb(0, 26, 61); color: #fff; }

/* ---- G1 RIGHT: "Book New Appointment" (ref .doctor-select-card, a.btn-warning / a.btn-info) --------------------- */
.dmc-pg .dmc-pg-docs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}
.dmc-pg .dmc-pg-doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 16px;
    background-color: #fff;
    border: 2px solid var(--dmc-pg-line);
    border-radius: 12px;
    color: var(--dmc-pg-ink);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dmc-pg .dmc-pg-doc:hover,
.dmc-pg .dmc-pg-doc[aria-checked="true"] {
    border-color: var(--dmc-pg-navy);
    box-shadow: 0 0 0 3px rgba(23, 68, 158, 0.15);
}
.dmc-pg .dmc-pg-doc:focus-visible { outline: 3px solid var(--dmc-pg-gold); outline-offset: 2px; }
.dmc-pg .dmc-pg-doc-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    overflow: hidden;
    background-image: var(--dmc-pg-grad-brand);
    border-radius: 50%;
    color: rgb(214, 234, 255);
    font-size: 32px;
}
.dmc-pg .dmc-pg-doc-art > img { display: block; width: 70px; height: 70px; object-fit: cover; }
.dmc-pg .dmc-pg-doc-name {
    margin: 8px 0 0;
    color: var(--dmc-pg-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    overflow-wrap: anywhere;
}
.dmc-pg .dmc-pg-doc-pick {
    margin-top: 4px;
    color: var(--dmc-pg-muted);
    font-size: 12.8px;
    line-height: 19.2px;
}
.dmc-pg .dmc-pg-doc[aria-checked="true"] .dmc-pg-doc-pick { color: var(--dmc-pg-navy); font-weight: 700; }
.dmc-pg .dmc-pg-bookrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.dmc-pg .dmc-pg-bigbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 12px;
    border: 0;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.dmc-pg .dmc-pg-bigbtn > span > i { margin-inline-end: 8px; }
.dmc-pg .dmc-pg-bigbtn-inperson { background-color: var(--dmc-pg-gold); color: var(--dmc-pg-gold-ink); }
.dmc-pg .dmc-pg-bigbtn-inperson:hover,
.dmc-pg .dmc-pg-bigbtn-inperson:focus-visible { background-color: var(--dmc-pg-gold-hover); color: var(--dmc-pg-gold-ink); }
.dmc-pg .dmc-pg-bigbtn-inperson:focus-visible { outline: 3px solid var(--dmc-pg-navy); outline-offset: 2px; }
.dmc-pg .dmc-pg-bigbtn-virtual { background-color: var(--dmc-pg-teal); color: #fff; opacity: 0.65; cursor: not-allowed; }
.dmc-pg .dmc-pg-bigbtn-soon { font-size: 12.8px; line-height: 16px; font-weight: 600; }

/* ---- G2: the two-tab bar (the profile's reference tab look: silver default, brand radial active) --------------- */
.dmc-pg .dmc-pg-tabhead { padding: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
.dmc-pg .dmc-pg-tabbar {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dmc-pg .dmc-pg-tabbar > li { flex: 1 1 0; min-width: 0; }
.dmc-pg .dmc-pg-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 64px;
    height: 100%;
    padding: 12px 10px;
    background-image: var(--dmc-pg-grad-silver);
    color: rgb(49, 49, 49);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    box-shadow: inset -1px -2px 0 0 rgba(0, 0, 0, 0.25);
}
.dmc-pg .dmc-pg-tabbar > li:first-child > .dmc-pg-tab {
    border-start-start-radius: 7px;
    border-end-start-radius: 7px;
    box-shadow: inset 1px -1px 0 1px rgba(0, 0, 0, 0.25);
}
.dmc-pg .dmc-pg-tabbar > li:last-child > .dmc-pg-tab {
    border-start-end-radius: 7px;
    border-end-end-radius: 7px;
    box-shadow: inset -1px -1px 0 1px rgba(0, 0, 0, 0.25);
}
.dmc-pg .dmc-pg-tab:hover { color: rgb(2, 28, 101); }
.dmc-pg .dmc-pg-tab[aria-selected="true"],
.dmc-pg .dmc-pg-tab[aria-selected="true"]:hover {
    background-image: var(--dmc-pg-grad-brand);
    color: #fff;
    box-shadow: inset 2px 3px 8px 0 rgba(0, 0, 0, 0.49);
}
.dmc-pg .dmc-pg-tab:focus-visible { outline: 3px solid var(--dmc-pg-gold); outline-offset: -3px; }
.dmc-pg .dmc-pg-tabbody { padding: 16px 8px 0; }

/* ---- G2 upload (ref .upload-zone, #upload-form) ------------------------------------------------------------------ */
.dmc-pg .dmc-pg-drop {
    display: block;
    margin: 0;
    padding: 40px;
    border: 2px dashed var(--dmc-pg-field-line);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
}
.dmc-pg .dmc-pg-drop:hover,
.dmc-pg .dmc-pg-drop.dmc-pg-drag,
.dmc-pg .dmc-pg-drop:focus-within { border-color: var(--dmc-pg-navy); background-color: rgb(240, 244, 255); }
.dmc-pg .dmc-pg-drop > i { display: block; margin: 0 0 12px; color: var(--dmc-pg-navy); font-size: 48px; line-height: 48px; }
.dmc-pg .dmc-pg-drop-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 24px; }
.dmc-pg .dmc-pg-drop-hint { margin: 0 0 16px; color: var(--dmc-pg-muted); }
.dmc-pg .dmc-pg-drop-btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: rgb(0, 34, 130);
    border: 2px outset rgb(0, 34, 130);
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
}
.dmc-pg .dmc-pg-drop-btn > i { margin-inline-end: 8px; }
.dmc-pg .dmc-pg-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.dmc-pg .dmc-pg-picked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--dmc-pg-line);
    border-radius: 4px;
    overflow-wrap: anywhere;
}
.dmc-pg .dmc-pg-picked > span > i { margin-inline-end: 8px; color: var(--dmc-pg-navy); }
.dmc-pg .dmc-pg-form { margin-top: 24px; }
.dmc-pg .dmc-pg-group { margin-bottom: 16px; }
.dmc-pg .dmc-pg-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.dmc-pg .dmc-pg-input {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid var(--dmc-pg-field-line);
    border-radius: 4px;
    color: rgb(73, 80, 87);
    font-size: 16px;
    line-height: 24px;
}
.dmc-pg textarea.dmc-pg-input { min-height: 86px; resize: vertical; }
.dmc-pg .dmc-pg-input:focus {
    border-color: rgb(128, 189, 255);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.dmc-pg .dmc-pg-check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.dmc-pg .dmc-pg-check > input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--dmc-pg-navy); }
.dmc-pg .dmc-pg-submit {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 6px 12px;
    background-image: var(--dmc-pg-grad-submit);
    border: 2px outset rgb(15, 56, 130);
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}
.dmc-pg .dmc-pg-submit > i { margin-inline-end: 8px; }
.dmc-pg .dmc-pg-submit:hover:not(:disabled) { background-image: none; background-color: rgb(9, 58, 179); }
.dmc-pg .dmc-pg-submit:disabled { opacity: 0.65; cursor: default; }
.dmc-pg .dmc-pg-submit:focus-visible { outline: 3px solid var(--dmc-pg-gold); outline-offset: 2px; }

/* Recent uploads / received lists (ref .products-list) */
.dmc-pg .dmc-pg-list { margin: 0; padding: 0 8px; list-style: none; }
.dmc-pg .dmc-pg-list > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.dmc-pg .dmc-pg-list > li:last-child { border-bottom: 0; }
.dmc-pg .dmc-pg-list-icon { flex: 0 0 auto; color: var(--dmc-pg-navy); font-size: 24px; line-height: 28px; }
.dmc-pg .dmc-pg-list-main { min-width: 0; }
.dmc-pg .dmc-pg-list-title { display: block; font-weight: 700; overflow-wrap: anywhere; }
.dmc-pg .dmc-pg-list-sub { display: block; color: var(--dmc-pg-muted); font-size: 14px; line-height: 20px; }
.dmc-pg .dmc-pg-list-sub a { color: var(--dmc-pg-navy); font-weight: 600; }

/* ---- G2 results: the lab table and the activity timeline ------------------------------------------------------- */
.dmc-pg .dmc-pg-tablewrap { overflow-x: auto; }
.dmc-pg .dmc-pg-table { width: 100%; margin: 0; border-collapse: collapse; }
.dmc-pg .dmc-pg-table th {
    padding: 10px 12px;
    background-color: rgb(238, 242, 251);
    color: var(--dmc-pg-navy-text);
    font-weight: 700;
    text-align: start;
    white-space: nowrap;
}
.dmc-pg .dmc-pg-table td { padding: 10px 12px; border-top: 1px solid rgba(0, 0, 0, 0.1); text-align: start; overflow-wrap: anywhere; }
/* Round 3: a lab date is one unit ("1 mars 2026"); it never breaks in the middle at 390 px. */
.dmc-pg .dmc-pg-table td.dmc-pg-nowrap { white-space: nowrap; overflow-wrap: normal; }
.dmc-pg .dmc-pg-table tbody tr:nth-child(odd) td { background-color: rgba(0, 0, 0, 0.02); }
.dmc-pg .dmc-pg-tl { position: relative; margin: 0; padding: 4px 0 4px; list-style: none; }
.dmc-pg .dmc-pg-tl::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 15px;
    width: 3px;
    background-color: var(--dmc-pg-line);
    border-radius: 2px;
}
.dmc-pg .dmc-pg-tl > li { position: relative; padding: 6px 4px 10px 0; padding-inline-start: 44px; }
.dmc-pg .dmc-pg-tl-dot {
    position: absolute;
    top: 6px;
    inset-inline-start: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-image: var(--dmc-pg-grad-brand);
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
}
.dmc-pg .dmc-pg-tl-title { display: block; font-weight: 700; line-height: 20px; overflow-wrap: anywhere; }
.dmc-pg .dmc-pg-tl-time { display: block; color: var(--dmc-pg-muted); font-size: 14px; line-height: 20px; }

/* ---- phone (390) ---------------------------------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .dmc-pg .dmc-pg-card-body { padding: 16px 12px; }
    /* The reference keeps the doctor cards two across on a phone (.col-6); the two booking buttons stack so a long
       French or Arabic label never squeezes. Live W0924F tiles use .dmc-pg-dc-* (not the retired G1 .dmc-pg-doc*). */
    .dmc-pg .dmc-pg-dc-list { column-gap: 6%; row-gap: 14px; padding: 0 4px; }
    .dmc-pg .dmc-pg-dc-tile { padding: 8px 4px; }
    .dmc-pg .dmc-pg-dc-inperson,
    .dmc-pg .dmc-pg-dc-virtual { font-size: 14px; line-height: 20px; padding: 6px 8px; }
    .dmc-pg .dmc-pg-bookrow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .dmc-pg .dmc-pg-drop { padding: 24px 16px; }
    .dmc-pg .dmc-pg-tab { min-height: 56px; padding: 10px 6px; font-size: 14.5px; line-height: 18px; }
    .dmc-pg .dmc-pg-tab > i { display: none; }
    .dmc-pg .dmc-pg-tabbody { padding: 12px 0 0; }
    .dmc-pg .dmc-pg-table th, .dmc-pg .dmc-pg-table td { padding: 8px; }
}

/* W0924F-SCHED-DOCTORS ==============================================================================================
   Schedule page, right card "Book New Appointment" (#dmcPgDocCard) = Commander's reference "Our Doctors" card
   (public/old-dashboard/old-profile.ORIGINAL-RELATIVE-ASSETS.html, ~line 2731). Every value is the reference's own,
   read with CDP getMatchedStylesForNode + getComputedStyle at 1440 / 1116 / 768 / 390 (phase0/wave-0924f/sched/build/
   ref-matched-*.txt, ref-*.json); the media-query numbers are his. The same card on the profile (css/portal-profile.css
   .dmc-pf-doc*) is drawn from the same reference. Logical properties where he has left/right, so Arabic mirrors.
   Named differences: the close tool is DISABLED (the booking card never leaves the page); the grid wraps two per row
   (his list has two doctors and never wraps); the virtual button is aria-disabled and only shows a "coming soon" note;
   the two buttons sit in a <div>, not inside one <a> (his wraps both buttons in a link to shop.html); the card keeps the
   page's 16px margin-bottom (his is 0: at 390 px ours is the last card and the footer starts right under that margin).
   Shared with profile: wrap/overflow intent only (overflow-wrap on name + button labels); not a shared JS/HTML module.
   ================================================================================================================ */
.dmc-pg .dmc-pg-dc {
    background: radial-gradient(circle, #fff 0, #fff 50%, #ddd 100%);                  /* ref inline .card background */
}
/* Header: ref .card-header (padding .75rem 1.25rem, 1px bottom rule) with his inline navy radial. The title and the
   tools sit on one line and the tools wrap under the title when they do not fit, as his floats do. */
.dmc-pg .dmc-pg-dc-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 12px 20px;
    background-image: var(--dmc-pg-grad-brand);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 4px 4px 0 0;
    color: #fff;
}
.dmc-pg .dmc-pg-dc-title {                                         /* ref h3.card-title, inline font-weight 600 */
    margin: 0;
    color: #fff;
    font-family: inherit;
    font-size: 17.6px;
    font-weight: 600;
    line-height: 21.12px;
    text-rendering: optimizeLegibility;
    font-feature-settings: normal;
    overflow-wrap: anywhere;
}
.dmc-pg .dmc-pg-dc-tools {                                         /* ref .card-header > .card-tools */
    margin-inline-start: auto;
    margin-inline-end: -10px;
    font-size: 16px;
    line-height: 24px;
}
.dmc-pg .dmc-pg-dc-badge {                                         /* ref .badge + inline #ffc107 / #060606 / 700 / 95% */
    display: inline-block;
    padding: 0.25em 0.4em;
    background-color: #ffc107;
    border-radius: 4px;
    color: #060606;
    font-size: 15.2px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;           /* AR/FR Accepting label must wrap; EN still one short line */
    overflow-wrap: anywhere;
    max-width: 100%;
    vertical-align: baseline;
}
.dmc-pg .dmc-pg-dc-tool {                                          /* ref .btn.btn-tool + inline #e9e9e9 / #000 */
    display: inline-block;
    margin: -12px 0;
    padding: 4px 8px;
    background-color: #e9e9e9;
    border: 2px outset rgb(17, 17, 17);
    border-radius: 4px;
    color: #000;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}
.dmc-pg .dmc-pg-dc-tool:hover:not(:disabled) { border-color: #ffc107; } /* ref .btn-tool:hover (his inline colours stay) */
.dmc-pg .dmc-pg-dc-tool:disabled { opacity: 0.65; cursor: not-allowed; }
/* Body: ref .card-body (1.25rem top/bottom) with his inline 2px sides, a column flex. */
.dmc-pg .dmc-pg-dc-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 1px;
    padding: 20px 2px;
}
.dmc-pg .dmc-pg-dc-state { align-self: stretch; padding: 0 18px; }
/* The doctor list: ref ul.users-list (margin 6px 6px 0, 9px sides, 10% between the two tiles, each tile at most 363px).
   A grid of two columns reproduces his two shrinking 50% tiles exactly and lets a third or fifth doctor wrap. */
.dmc-pg .dmc-pg-dc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 363px));
    justify-content: center;
    align-items: stretch;
    align-self: stretch;
    column-gap: 10%;
    row-gap: 20px;
    margin: 6px 6px 0;
    padding: 0 9px;
    list-style: none;
    text-align: center;
}
/* A doctor alone on the last row (one, three or five doctors) sits in the middle at one tile's width. */
.dmc-pg .dmc-pg-dc-tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(363px, 45%); }
.dmc-pg .dmc-pg-dc-tile {                                          /* ref li inline style (the last background wins) */
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    min-width: 0;
    padding: 0;
    background-image: radial-gradient(circle, rgb(35, 84, 185) 0%, rgb(0, 22, 120) 100%);
    border-radius: 14px;
    box-shadow: 0 5px 17px rgba(0, 0, 0, 0.18);
    color: var(--dmc-pg-ink);
    text-align: center;
}
.dmc-pg .dmc-pg-dc-img {                                           /* ref .users-list > li img + inline opacity 74% */
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 753 / 980;          /* the art's viewBox = his PNG's shape (363 x 472.4); the file's 188x245 rounds it */
    margin: 0 0 16px;
    padding: 0;
    border-radius: 7px 7px 0 0;
    opacity: 0.74;
}
.dmc-pg .dmc-pg-dc-artfb { display: block; margin: 24px auto 16px; color: rgba(255, 255, 255, 0.74); font-size: 96px; line-height: 1; }
/* The two buttons: ref li > a inline style (a column, 10px apart, 96% wide, at most 380px). */
.dmc-pg .dmc-pg-dc-btns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-around;
    gap: 10px;
    width: 96%;
    max-width: 380px;
    color: rgba(0, 0, 0, 0.91);
    font-size: 13.3333px;
    line-height: 20px;
    text-align: center;
}
/* Silver "Book In Person Appointment": ref .our-doctors-book-in-person-btn (on his .btn). A link here, not a button. */
.dmc-pg .dmc-pg-dc-inperson {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 6px 12px;
    background-color: transparent;
    background-image: radial-gradient(circle, #fff 15%, rgba(220, 220, 220, 0.92) 74%, #c9c9c9 78%, rgb(180, 180, 180) 100%);
    border: 3px solid rgba(14, 3, 3, 0);
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    color: rgba(0, 0, 0, 0.91);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.dmc-pg .dmc-pg-dc-inperson:hover,
.dmc-pg .dmc-pg-dc-inperson:focus-visible {                        /* ref .our-doctors-book-in-person-btn:hover */
    background-image: radial-gradient(circle, #fff 15%, rgba(255, 255, 255, 0.92) 74%, #eaeaea 78%, rgb(233, 233, 233) 100%);
    color: rgba(0, 0, 0, 0.91);
    text-decoration: none;
}
.dmc-pg .dmc-pg-dc-inperson > i {                                   /* ref inline: 6px after, #00134c, 20px */
    display: block;
    padding-inline-end: 6px;
    color: #00134c;
    font-size: 20px;
    line-height: 20px;
}
.dmc-pg .dmc-pg-dc-plain { max-width: 380px; margin: 0 auto; }
/* Gold "Book Virtual Appointment": ref .our-doctors-virtual-appointment-btns (inline style + his .shop-btn rule). */
.dmc-pg .dmc-pg-dc-virtual {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 6px 12px;
    background-color: transparent;
    background-image: radial-gradient(circle, #ffca00 15%, #ffc60d 74%, #ffbe00 78%, #d9a30a 100%);
    border: 2px outset rgba(0, 0, 0, 0);
    border-radius: 4px;
    box-shadow: 1px 1px 1px 1px #000;
    color: #000b29;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.dmc-pg .dmc-pg-dc-virtual:hover,
.dmc-pg .dmc-pg-dc-virtual:focus-visible {                          /* ref ...shop-btn:hover */
    background-image: radial-gradient(circle, #ffe173 15%, #ffd852 74%, #ffd649 78%, #ebbf2a 100%);
    color: #000;
}
.dmc-pg .dmc-pg-dc-deskwrap {                                       /* ref .icon-desktop-wrap: the monitor with a lit screen */
    position: relative;
    z-index: 0;
    display: block;
    width: auto;
    height: auto;
    margin-inline-end: 0.4rem;
    line-height: 1;
    vertical-align: middle;
}
.dmc-pg .dmc-pg-dc-deskwrap::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 52%;
    width: 17px;
    height: 12px;
    background: radial-gradient(circle, #fff 15%, rgba(220, 220, 220, 0.92) 74%, #dcdcdc 78%, rgb(180, 180, 180) 100%);
    border-radius: 2px;
    transform: translateX(-50%);
}
.dmc-pg .dmc-pg-dc-deskwrap > i { position: relative; z-index: 1; color: #001938; }
/* "Virtual visits are coming soon": shown under the gold button of the tile whose button was pressed. */
.dmc-pg .dmc-pg-dc-soon {
    margin: 0;
    padding: 4px 8px;
    background-color: rgba(0, 11, 41, 0.55);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    overflow-wrap: anywhere;
}
/* AR/FR wrap for tile labels: same overflow-wrap intent as profile .dmc-pf-doc-name / retired .dmc-pg-bigbtn.
   CSS class reuse only — no shared doctor JS module (profile keeps dmc-pf-doc*; schedule keeps dmc-pg-dc*). */
.dmc-pg .dmc-pg-dc-inperson,
.dmc-pg .dmc-pg-dc-virtual {
    overflow-wrap: anywhere;
    min-width: 0;
}
.dmc-pg .dmc-pg-dc-inperson > span,
.dmc-pg .dmc-pg-dc-virtual > span {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* The doctor's name: ref h1.doctor-text (32px / 1.2, white, 6px above, .5rem below). */
.dmc-pg .dmc-pg-dc-name {
    margin: 0 0 8px;
    padding: 6px 0 0;
    color: #fff;
    font-family: inherit;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-rendering: optimizeLegibility;
    font-feature-settings: normal;
    overflow-wrap: anywhere;
}
/* Footer: ref button.btn.btn-danger.no-padding-btn "View All Members" (his inline navy radial and padding). */
.dmc-pg .dmc-pg-dc-footer {
    display: block;
    width: 100%;
    margin: 0;
    padding: 2.8px 4px;
    background-color: transparent;
    background-image: var(--dmc-pg-grad-brand);
    border: 2px outset rgb(0, 13, 55);
    border-radius: 0 0 4px 4px;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}
.dmc-pg .dmc-pg-dc-tool:focus-visible,
.dmc-pg .dmc-pg-dc-inperson:focus-visible,
.dmc-pg .dmc-pg-dc-virtual:focus-visible { outline: 3px solid var(--dmc-pg-gold); outline-offset: 2px; }
.dmc-pg .dmc-pg-dc-footer:focus-visible { outline: 3px solid var(--dmc-pg-gold); outline-offset: -5px; }
.dmc-pg .dmc-pg-dc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* His breakpoints (the numbers are his). */
@media (max-width: 1370px) {
    .dmc-pg .dmc-pg-dc-tile { gap: 5px; padding: 11px; }
}
@media (max-width: 1260px) {
    .dmc-pg .dmc-pg-dc-name {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
        align-items: flex-start;
        justify-content: space-around;
        width: 100%;
        font-size: 20px;
    }
}
@media (max-width: 767px) {
    .dmc-pg .dmc-pg-dc-name { font-size: 26px; }
}
@media (max-width: 667px) {
    .dmc-pg .dmc-pg-dc-name { font-size: 22px; }
}
@media (max-width: 606px) {
    .dmc-pg .dmc-pg-dc-tile { padding: 3px; }
}
@media (max-width: 600px) {
    .dmc-pg .dmc-pg-dc-name { font-size: 18px; }
}
@media (max-width: 480px) {
    .dmc-pg .dmc-pg-dc-name { font-size: 15px; }
}
@media (max-width: 400px) {
    .dmc-pg .dmc-pg-dc-name { font-size: 14px; }
}
/* /W0924F-SCHED-DOCTORS */

/* MOCK-ONLY OTP UX stub (PORTAL-PHONE-INDEX-OTP-DESIGN.md) — does not touch Commander protected blocks */
.dmc-otp-panel {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  background: #f7f9fc;
}
.dmc-otp-panel[hidden] { display: none !important; }
.dmc-otp-title {
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.dmc-otp-sent,
.dmc-otp-mock-hint,
.dmc-otp-status {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}
.dmc-otp-mock-hint {
  color: #6c757d;
  font-style: italic;
}
.dmc-otp-code {
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  max-width: 12rem;
}
.dmc-otp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-top: 0.35rem;
}
.dmc-otp-actions .btn-link {
  padding-left: 0;
  padding-right: 0;
}
.dmc-otp-method-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}
.dmc-otp-method-row .btn {
  font-size: 0.85rem;
}
.login .dmc-otp-panel {
  background: #fff;
}