/* The account and legal pages in the navy and gold look (preview).
   Those pages are styled by the app's own admin.css, which draws everything
   from a handful of colour names; this sheet gives those names their navy
   and gold values and sets by hand the few places with fixed colours.
   It is loaded after admin.css, on the patient and clinic pages only. */
:root{
  color-scheme:dark;
  --paper:#0B1622; --paper-deep:#0F1E2D; --white:#13263A;
  --ink:#F6F0E2; --ink-soft:rgba(246,240,226,.72);
  --line:rgba(205,166,91,.26);
  --turquoise:#CDA65B; --turquoise-deep:#DDBB78; --gold:#CDA65B;
  --logo-green:#F6F0E2; --logo-orange:#DDBB78;
  --shadow-sm:0 1px 3px rgba(0,0,0,.35); --shadow-md:0 18px 40px -18px rgba(0,0,0,.6);
}
html, body{ background:#0B1622; }

/* the top bar stays cream, so the navy and gold logo shows, as on the rest of the site */
header.crm-header{
  color-scheme:light;
  --paper:#FBF7EE; --paper-deep:#F1E9D6; --white:#FFFFFF; --ink:#142433; --ink-soft:#566371; --line:rgba(176,137,60,.34);
  --turquoise:#8C6A22; --turquoise-deep:#8C6A22;
  --logo-green:#12263A; --logo-orange:#BF8A1E;
  background:rgba(255,253,248,.96); border-bottom-color:rgba(176,137,60,.34); color:var(--ink);
}
header.crm-header .brand-nzo{
  background:linear-gradient(180deg, #DDAA3C 18%, #C08A1E 52%, #9C6C12 86%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#BF8A1E;
}

/* lettering on coral buttons and round icons stays white */
.btn, .btn:hover, .auth-icon, .gains-tab.active, .cb-btn-accept, .cm-btn-save{ color:#fff; }
.auth-icon{ background:linear-gradient(135deg, #CDA65B, #C1503F); }
.btn-ghost{ color:var(--ink); border-color:rgba(246,240,226,.4); }
.btn-ghost:hover{ border-color:#DDBB78; color:#fff; }
a{ color:#DDBB78; }
header.crm-header a{ color:inherit; }

/* fields */
input, select, textarea{ background:#0B1622; color:var(--ink); border-color:rgba(205,166,91,.3); }
input::placeholder, textarea::placeholder{ color:rgba(246,240,226,.45); }
input:focus, select:focus, textarea:focus{ border-color:#CDA65B; box-shadow:0 0 0 4px rgba(205,166,91,.16); outline:none; }
input[type="checkbox"], input[type="radio"]{ accent-color:#CDA65B; }

/* notices and status labels had pale fixed backgrounds */
.alert-error, .badge-lost, .badge-rejected{ background:rgba(193,80,63,.18); color:#F2B7AB; border-color:rgba(193,80,63,.5); }
.badge-matched, .badge-pending{ background:rgba(205,166,91,.16); color:#EBCB8B; }
.badge-new, .badge-suspended{ background:rgba(246,240,226,.12); color:rgba(246,240,226,.85); }
.badge-consultation, .badge-booked{ background:rgba(111,168,220,.18); color:#A9CDEE; }
.badge-completed, .badge-approved{ background:rgba(76,154,114,.22); color:#9AD9B6; }
.alert-success{ background:rgba(76,154,114,.18); color:#9AD9B6; border-color:rgba(76,154,114,.5); }

/* cards */
.auth-card, .legal-doc, .card{ border-color:var(--line); }
.legal-doc h1, .legal-doc h2, .auth-card h1{ color:var(--ink); }

/* ============================================================
   Clinic portal, Services page. The page had three cards of three different
   widths stacked against the left edge, with half the screen empty beside
   them. Here: the specialty in one band across the top, then the treatments
   and the services side by side, and the choices as tidy, even tiles.
   The page is recognised by its own treatment list (#clinicTreatmentGroups).
   ============================================================ */
main .wrap:has(#clinicTreatmentGroups){
  display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:22px 24px; align-items:start;
}
main .wrap:has(#clinicTreatmentGroups) > *{ grid-column:1 / -1; margin-bottom:0; }
main .wrap:has(#clinicTreatmentGroups) > .back-link{ justify-self:start; margin-bottom:-10px; }
main .wrap:has(#clinicTreatmentGroups) > h1{ margin:0; font-size:2rem; }
main .wrap:has(#clinicTreatmentGroups) > p.muted{ margin:-14px 0 6px; font-size:.95rem; max-width:70ch; }
main .wrap:has(#clinicTreatmentGroups) > .card{ max-width:none !important; margin:0 !important; padding:26px 28px 28px; }
main .wrap:has(#clinicTreatmentGroups) > .card:has(#clinicTreatmentGroups){ grid-column:1; }
main .wrap:has(#clinicTreatmentGroups) > .card:has(.service-list){ grid-column:2; }
main .wrap:has(#clinicTreatmentGroups) .card-head{ margin-bottom:12px; }
main .wrap:has(#clinicTreatmentGroups) .card-head h3{ font-size:1.25rem; }
main .wrap:has(#clinicTreatmentGroups) .card > p.muted{ margin:0 0 18px; font-size:.9rem; line-height:1.55; max-width:62ch; }
.card-icon, .account-stat-icon{ background:rgba(205,166,91,.14); color:#DDBB78; }
main .wrap:has(#clinicTreatmentGroups) form > .btn{ margin-top:20px !important; padding:10px 24px; font-size:.88rem; }

/* the specialty: the explanation on the left, the choice and its button on the right */
main .wrap > .card:has(#specialty){ display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px, 440px); column-gap:40px; align-items:center; }
main .wrap > .card:has(#specialty) > .card-head{ grid-column:1; }
main .wrap > .card:has(#specialty) > p.muted{ grid-column:1; margin:0; }
main .wrap > .card:has(#specialty) > form{ grid-column:2; grid-row:1 / span 2; display:flex; gap:12px; align-items:flex-end; }
main .wrap > .card:has(#specialty) > form .field{ flex:1; margin:0; }
main .wrap > .card:has(#specialty) > form > .btn{ margin-top:0 !important; padding:11px 22px; white-space:nowrap; }

/* treatments: even tiles in columns, the chosen ones lit in gold */
.treatment-group{ margin-bottom:22px; }
.treatment-group-label{ color:#DDBB78; margin-bottom:12px; }
.treatment-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; }
.treatment-option{
  border-radius:10px; padding:11px 14px; font-size:.9rem; line-height:1.3;
  background:rgba(11,22,34,.55); border-color:rgba(205,166,91,.22); transition:border-color .15s, background .15s;
}
.treatment-option:hover{ border-color:rgba(221,187,120,.7); }
.treatment-option:has(input:checked){ background:rgba(205,166,91,.15); border-color:#CDA65B; color:#fff; }

/* services: the same treatment for the longer options */
main .wrap:has(#clinicTreatmentGroups) .service-list{ margin-top:0; }
.service-option{
  border-radius:10px; padding:14px 16px; background:rgba(11,22,34,.55); border-color:rgba(205,166,91,.22); transition:border-color .15s, background .15s;
}
.service-option:hover{ border-color:rgba(221,187,120,.7); }
.service-option:has(input:checked){ background:rgba(205,166,91,.13); border-color:#CDA65B; }
.service-option-desc{ line-height:1.5; }

@media (max-width:900px){
  main .wrap:has(#clinicTreatmentGroups){ grid-template-columns:minmax(0, 1fr); }
  main .wrap:has(#clinicTreatmentGroups) > .card:has(#clinicTreatmentGroups),
  main .wrap:has(#clinicTreatmentGroups) > .card:has(.service-list){ grid-column:1; }
  main .wrap > .card:has(#specialty){ display:block; }
  main .wrap > .card:has(#specialty) > p.muted{ margin-bottom:16px; }
  main .wrap:has(#clinicTreatmentGroups) > .card{ padding:20px 18px 22px; }
  .treatment-list{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ============================================================
   The other portal pages.
   ============================================================ */
/* Application form, application status and a clinic's patient page: their
   boxes were narrow and pushed against the left edge, with the rest of the
   screen empty. They now sit in one centred column, like the settings pages. */
main .wrap:has(> .card[style*="max-width"]):not(:has(#clinicTreatmentGroups)){ max-width:860px; }
main .wrap:has(> .card[style*="max-width"]):not(:has(#clinicTreatmentGroups)) > :is(.card, .alert){ max-width:none !important; }
main .wrap:has(> .card[style*="max-width"]):not(:has(#clinicTreatmentGroups)) > .card{ padding:28px 30px; }
main .wrap:has(> .grid-2){ max-width:980px; }
main .wrap > h1{ font-size:2rem; margin-bottom:8px; }
main .wrap > h1 + p.muted{ font-size:.95rem; margin:0 0 22px; }
main .wrap > h1 + p:has(> .badge){ margin:0 0 20px; }
main .wrap > h1 + .card{ margin-top:18px; }
main .card .card-head h3{ font-size:1.2rem; }
main .card > p.muted{ line-height:1.55; }

/* the details table: quiet labels, clear values, no hover stripe */
main .card table td{ padding:14px 12px; }
main .card table td.muted{ width:36%; font-size:.86rem; }
main .card table td:not(.muted){ font-weight:600; color:var(--ink); }
main .card table tbody tr:hover{ background:none; }
main .card > p:has(> .badge){ margin:0 0 8px; }

/* buttons inside the pages: a comfortable size */
main form .btn{ padding:10px 24px; font-size:.88rem; }
main .field label{ font-size:.86rem; }
main .field input, main .field select, main .field textarea{ padding-top:11px; padding-bottom:11px; }

/* dashboards */
.account-stat .stat-num{ font-size:1.7rem; }
.app-row{ background:rgba(11,22,34,.45); border-color:rgba(205,166,91,.2); padding:16px 18px; }
.app-row:hover{ border-color:#CDA65B; }
.app-row-title{ font-size:1rem; }
.app-row-date{ font-size:.82rem; line-height:1.5; }
.period-filter{ background:rgba(11,22,34,.6); }
.period-btn.is-active{ background:#CDA65B; color:#0B1622; }

/* phones: the status label goes under the text instead of squeezing it */
@media (max-width:700px){
  .app-row{ flex-wrap:wrap; gap:10px; }
  .app-row-main{ flex:1 1 100%; }
  .app-row-arrow{ margin-left:auto; }
  main .wrap:has(> .card[style*="max-width"]):not(:has(#clinicTreatmentGroups)) > .card{ padding:20px 18px; }
  main .card table td.muted{ width:42%; }
}

/* ---- a patient's page: "this patient is not going ahead" ---- */
/* closed until the clinic opens it, so it is never pressed by accident */
/* Clinic portal patient page: details left, status and price right */
.cpd{ max-width:1080px; }
.cpd-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin:6px 0 18px; }
.cpd-title{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.cpd-title h1{ margin:0; }
.cpd-contact{ display:flex; flex-wrap:wrap; gap:8px; }
.cpd-pill{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; border:1px solid rgba(205,166,91,.32); font-size:.86rem; color:inherit; text-decoration:none; max-width:100%; overflow-wrap:anywhere; }
.cpd-pill:hover{ border-color:#DDBB78; background:rgba(205,166,91,.10); }
.cpd-pill svg{ flex:none; color:#DDBB78; }
.cpd-alert{ margin:0 0 14px; }
.cpd-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; align-items:start; }
.cpd-side{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.cpd-grid .card{ margin:0; }
.cpd-details table{ width:100%; }
.cpd-details td{ padding:8px 10px; vertical-align:top; }
.cpd-details td:first-child{ width:42%; }
@media (max-width:880px){ .cpd-grid{ grid-template-columns:1fr; } }

/* Patient status: compact choices in a row; a hint under them for the one picked */
.status-choices{ margin:4px 0 10px; padding:0; border:0; display:flex; flex-wrap:wrap; gap:8px; }
.status-choices legend{ float:left; width:100%; margin:0 0 10px; padding:0; font-size:.86rem; line-height:1.5; }
.status-choice{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid rgba(205,166,91,.25); border-radius:999px; font-size:.88rem; cursor:pointer; transition:border-color .15s, background .15s; }
.status-choice:hover{ border-color:rgba(205,166,91,.55); }
.status-choice input{ position:absolute; opacity:0; pointer-events:none; }
.status-dot{ flex:none; width:14px; height:14px; border-radius:50%; border:2px solid rgba(246,240,226,.45); }
.status-choice input:checked ~ .status-dot{ border-color:#DDBB78; background:radial-gradient(circle, #DDBB78 0 40%, transparent 46%); }
.status-choice input:focus-visible ~ .status-dot{ outline:2px solid #DDBB78; outline-offset:2px; }
.status-choice:has(input:checked){ border-color:#DDBB78; background:rgba(205,166,91,.12); font-weight:600; }
.status-lost.status-choice:has(input:checked){ border-color:rgba(193,80,63,.75); background:rgba(193,80,63,.12); }
.status-lost.status-choice input:checked ~ .status-dot{ border-color:#F2B7AB; background:radial-gradient(circle, #F2B7AB 0 40%, transparent 46%); }
.status-hints p{ display:none; margin:0 0 12px; font-size:.82rem; color:rgba(246,240,226,.7); }
.status-form:has(input[value="MATCHED"]:checked) .status-hints [data-for="MATCHED"],
.status-form:has(input[value="CONSULTATION"]:checked) .status-hints [data-for="CONSULTATION"],
.status-form:has(input[value="BOOKED"]:checked) .status-hints [data-for="BOOKED"],
.status-form:has(input[value="COMPLETED"]:checked) .status-hints [data-for="COMPLETED"],
.status-form:has(input[value="LOST"]:checked) .status-hints [data-for="LOST"]{ display:block; }
/* the reason and comment show only when "Not going ahead" is picked (browsers without :has() always show them) */
.status-form:has(input[name="stage"][value="LOST"]:not(:checked)) .status-lost-fields{ display:none; }
.status-lost-fields{ margin:0 0 12px; }
.price-row{ display:flex; align-items:flex-end; gap:10px; }
.price-row .field{ flex:1; min-width:0; margin:0; }
.closed-card{ border-color:rgba(193,80,63,.4); }
.closed-card .card-icon{ background:rgba(193,80,63,.16); color:#F2B7AB; }

/* ---- patient login and sign-up: the way to the clinic pages, at the top ---- */
.auth-switch{ margin:-12px 0 22px; padding:10px 14px; border-radius:10px; font-size:.88rem; background:rgba(205,166,91,.12); border:1px solid rgba(205,166,91,.4); }
.auth-switch a{ font-weight:600; white-space:nowrap; }