/* 7MDigital - the clinic's dashboard at /dashboard (login.html #customerShell, drawn by assets/js/customer-dashboard.js).
   It wears the admin order page's own rules from login.html - header, .header-inner, .crumbs, .logout-btn, .main,
   .detail-grid, .detail-card, .detail-row, .section-card, .badge, .key-box, .key-text, .copy-btn, .btn, the .modal sheet
   and its .modal-field inputs, and the .cs dropdown - so this sheet holds ONLY what the clinic's view adds. Every rule is
   scoped to #customerShell, #cdEditModal or a cd- class: nothing here restyles the admin panel. Loaded after login.html's
   own <style>, so on an equal selector this sheet comes last. */

/* ---- the shell: the admin #appShell's frame, shown by the [hidden] attribute instead of an inline style ---- */
#customerShell{display:flex;flex-direction:column;min-height:100vh;background:var(--bg)}
#customerShell[hidden]{display:none}
#customerShell .cd-view{flex:1 1 100%;min-width:0}
#customerShell [hidden]{display:none}

/* ---- header: the logo and "Dashboard" light together, as #brandHome and #crumbHome do on the admin page ---- */
#cdBrand{display:inline-flex;align-items:center;height:auto}
#customerShell .header-inner:has(#cdBrand:hover) #cdCrumbHome,
#customerShell .header-inner:has(#cdCrumbHome:hover) #cdCrumbHome{color:rgb(236 236 236)}
#customerShell .header-inner:has(#cdBrand:hover) #cdBrand img,
#customerShell .header-inner:has(#cdCrumbHome:hover) #cdBrand img{filter:brightness(1.4)}
#customerShell .logout-btn:disabled{opacity:.6;cursor:default}
/* The admin header grows to 597px at <=350px for its own stacked rows. The clinic's header has three short items: it
   keeps its natural height there, the logo, the crumb and Sign Out wrapping onto centred lines. */
@media(max-width:350px){
  #customerShell header{height:auto;padding-top:14px;padding-bottom:14px}
  #customerShell .header-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  #customerShell .header-inner .crumbs{flex:1 1 100%;justify-content:center}
}

/* ---- the account bar: who is signed in, and the order switcher when the account has several orders ---- */
#customerShell .section-card.cd-account{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:14px}
.cd-who{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 220px}
.cd-k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-family:system-ui,-apple-system,sans-serif}
.cd-who strong{font-size:14px;font-weight:650;color:var(--brand-navy);overflow-wrap:anywhere;font-family:system-ui,-apple-system,sans-serif}
.cd-pick{display:flex;align-items:center;gap:10px;flex:0 1 380px;min-width:0}
.cd-pick>label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap;font-family:system-ui,-apple-system,sans-serif}
.cd-pick>select,.cd-pick>.cs{flex:1 1 auto;min-width:0}
/* r2: a long clinic name is cut with an ellipsis inside the switcher, never pushing the page sideways. The admin .cs-val sets
   ellipsis and nowrap but no overflow (Chromium, Firefox, WebKit); and in WebKit a select's text runs past its box, both the
   native picker on phones (.cd-pick>select) and the hidden one behind the desktop dropdown (.cd-pick .cs-native). WebKit
   clips a select only when it draws no native control, so the hidden one (opacity 0, never seen) draws none either. */
#customerShell .cd-pick .cs-val{overflow:hidden}
.cd-pick select{overflow:hidden}
.cd-pick .cs-native{-webkit-appearance:none;appearance:none}
/* Phones and tablets: the native picker, in the admin "Hours for" navy. 16px so iOS does not zoom the page on focus. */
.cd-pick>select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:12px 42px 12px 14px;font-size:16px;font-weight:700;font-family:system-ui,-apple-system,sans-serif;color:#fff;cursor:pointer;border:none;border-radius:6px;outline:none;text-overflow:ellipsis;background-color:#13244c;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238dc1ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"),var(--brand-dark);background-repeat:no-repeat,no-repeat;background-position:right 15px center,center;background-size:17px,auto}
.cd-pick>select:focus-visible{box-shadow:0 0 0 3px rgba(141,193,255,.4)}
.cd-pick>select option{color:#111827;background:#fff;font-weight:600}
@media(max-width:520px){
  .cd-pick{flex:1 1 100%;flex-direction:column;align-items:stretch;gap:6px}
}

/* ---- notes, messages and the empty / loading cards ---- */
#customerShell .login-err.cd-banner{margin:0 0 14px;text-align:left}
.cd-note{margin:0 0 14px;padding:12px 14px;border-radius:4px;font-size:13px;line-height:1.5;color:#585037;background:#fff0dd;border:1px solid #fff0dd;border-left:4.5px solid #ffba68b0;font-family:system-ui,-apple-system,sans-serif;overflow-wrap:anywhere}
.cd-note .btn{margin-top:10px}
/* r2: the answer under "Email me a confirmation link" (the old .cd-note p+p never matched: a button sits between the two). */
.cd-note .btn+p{margin-top:8px}
.cd-msg{margin:4px 0 8px;font-size:13px;line-height:1.55;color:var(--text);font-family:system-ui,-apple-system,sans-serif}
.cd-hint{margin:8px 0 6px;font-size:12px;line-height:1.5;color:var(--muted);font-family:system-ui,-apple-system,sans-serif}
.cd-hint a,.cd-msg a,.cd-foot a{color:var(--blue);font-weight:650;text-decoration:underline}
#customerShell .section-card.cd-loading{padding:22px 16px;color:var(--muted);font-size:13px;font-family:system-ui,-apple-system,sans-serif}
.cd-foot{margin:4px 0 28px;text-align:center;font-size:12px;line-height:1.6;color:var(--muted);font-family:system-ui,-apple-system,sans-serif}

/* ---- the cards: a title with its pill or its Edit button, a missing value in words, an amber "waiting" pill ---- */
#customerShell .cd-h3 .badge{margin-left:6px;font-size:10px;padding:5px 7px}
#customerShell .cd-h3 .cd-edit{margin-left:auto;align-self:center}
#customerShell .btn.cd-edit{padding:8px 13px;font-size:11.5px;letter-spacing:.03em;border-radius:6px;gap:5px}
#customerShell .detail-row .val.cd-none{color:var(--muted);font-weight:500}
#customerShell .badge.cd-wait{background:#fef3c7;color:#92400e}
/* r2: between waiting and done - the eForm is in the clinic's Oscar, its key not entered yet. */
#customerShell .badge.cd-mid{background:#dbeafe;color:#1e40af}
/* The order card's header: Edit details on the left where the admin card has Back, the EMR emblem on the right. With no
   button (a clinic 7MDigital edits for it) the emblem sits in the middle. */
#customerShell .detail-card>.page-hdr.cd-hdr{padding:18px 0 4px}
#customerShell .detail-card>.page-hdr .btn.cd-edit-big{flex:0 1 190px;font-size:13px;gap:5px}
#customerShell .cd-hdr-solo .emr-mark{align-content:center}
/* <=700px the admin grid becomes an inline column that shrinks to its content: here the cards keep the full width. */
#customerShell .cd-view .detail-grid{width:100%}

/* ---- the activation key: the admin .key-box, wrapping a long key instead of running past a phone screen ---- */
#customerShell .key-text{min-width:0;overflow-wrap:anywhere;word-break:break-all}
#customerShell .key-text.cd-key-status{font-size:15px;font-weight:600;word-break:normal}
#customerShell .key-box.cd-nokey,#customerShell .key-box.cd-nokey:hover{cursor:default;background:#061537}
/* r2: "Email me a confirmation link" under a key that waits for the email to be verified. */
#customerShell .cd-keycard .btn.cd-verify{margin-top:4px}
@media(max-width:520px){
  #customerShell .key-box{flex-direction:column;align-items:stretch}
  #customerShell .key-text{font-size:17px}
  #customerShell .key-box .copy-btn{align-items:center}
}

/* ---- the eForm card: two downloads side by side, the install steps under a summary ---- */
.cd-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px}
.cd-actions .btn{flex:1 1 200px;padding:15px 18px;font-size:12.5px;letter-spacing:.02em}
#customerShell .btn.cd-alt{background:#e9e9e9;color:#252525;border:2.5px solid #e9e9e9}
#customerShell .btn.cd-alt:hover{background:#dedede;border-color:#dedede}
.cd-guide{margin-top:12px;border-top:1px solid #f1f5f9;padding-top:10px;font-family:system-ui,-apple-system,sans-serif}
.cd-guide summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--brand-navy)}
.cd-steps{margin:12px 0 4px;padding-left:22px;font-size:13px;line-height:1.6;color:var(--text)}
.cd-steps li{margin:0 0 8px}
.cd-steps code{font-weight:700;background:#f1f6ff;border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}

/* ---- the edit sheet: the admin order sheet, smaller. 16px fields on iOS only, so the page does not zoom in. ---- */
#cdEditModal .modal{max-width:620px}
#cdEditModal .modal-field input:disabled{background:#f1f5f9;color:var(--muted)}
/* r2: under the Oscar box, the address that will be saved; and, for a connected clinic, what changing it does. */
#cdEditModal .cd-oscar-norm{margin:5px 0 0;font-size:12px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;font-family:system-ui,-apple-system,sans-serif}
#cdEditModal .cd-oscar-warn{grid-column:1/-1;padding:10px 12px;border-radius:4px;font-size:12.5px;line-height:1.5;color:#585037;background:#fff0dd;border-left:4.5px solid #ffba68b0;font-family:system-ui,-apple-system,sans-serif;overflow-wrap:anywhere}
#cdEditModal .cd-oscar-warn p{margin:0 0 8px}
#cdEditModal .cd-check{display:flex;align-items:center;gap:8px;font-weight:650;color:#3d3520;cursor:pointer}
#cdEditModal .cd-check input{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--blue)}
@supports (-webkit-touch-callout:none){
  #cdEditModal .modal-field input,#cdEditModal .modal-field select{font-size:16px}
}