/* One KankMed screen palette. Keep this layer shared by every page and desk.
   Important layer rules intentionally beat the legacy per-page important colours.
   Screen-only rules preserve prescription/document printing and map rendering. */
@layer kankmed-theme {
  @media screen {
    :root {
      color-scheme: dark;
      --kank-bg: #0c0715;
      --kank-panel: #170e25;
      --kank-panel-raised: #1b102d;
      --kank-action: #291443;
      --kank-hover: #3b205b;
      --kank-line: #4b3c60;
      --kank-outline: #b7acc9;
      --kank-white: #ffffff;
      --kank-ink: #1a1030;
      --bg: var(--kank-bg) !important;
      --surface: var(--kank-panel) !important;
      --surface-2: var(--kank-panel-raised) !important;
      --surface-3: var(--kank-action) !important;
      --card: var(--kank-panel) !important;
      --line: var(--kank-line) !important;
      --text: var(--kank-white) !important;
      --ink: var(--kank-white) !important;
      --muted: var(--kank-white) !important;
      --dim: var(--kank-white) !important;
      --faint: var(--kank-white) !important;
      --accent: var(--kank-action) !important;
      --accent-line: var(--kank-outline) !important;
    }

    html, body, #app {
      background: var(--kank-bg) !important;
      color: var(--kank-white) !important;
    }
    body { font-family: "Segoe UI", "Helvetica Neue", system-ui, sans-serif; }
    main { background-color: transparent !important; }
    :where(h1,h2,h3,h4,h5,h6,p,li,label,legend,dt,dd,th,td,summary,address,small,
        strong,b,em,span,a,code,pre,.muted,.field-help,.hint,.eyebrow,.price,.error,.err,.ok):not(:where(.gm-style,.gm-style *,.leaflet-container,.leaflet-container *)) {
      color: var(--kank-white) !important;
      -webkit-text-fill-color: currentColor !important;
    }

    :where(.top,.owner-topbar,.patient-login-header,.site-legal,footer,.owner-sidebar) {
      background: var(--kank-bg) !important;
      color: var(--kank-white) !important;
      border-color: var(--kank-line) !important;
    }
    :where(.card,.price-card,.book-option,.auth-card,.metric-card,.table-wrap,
        .doctor-dropdown,.staff-summary-row,.account-summary-row,.rx-preview,
        .rx-outbound,.document-item,.verify,.nin-provider-result,.privacy-note,
        .safety-reveal,.empty-state,.bubble,.upload-box,dialog,.modal,.modal-card,.modal-content) {
      background: var(--kank-panel) !important;
      color: var(--kank-white) !important;
      border-color: var(--kank-line) !important;
      box-shadow: none !important;
    }
    html:has(link[href*="download.css"]) section { background: var(--kank-panel) !important; border-color: var(--kank-line) !important; }
    html:has(link[href*="security.css"]) main { background: var(--kank-panel) !important; }
    :where(.notice,.warning,.warn,.tier-explainer,.ai-line,.triage-card,.payment-badge,
        .offer-banner,.rx-status,.rx-correction,.document-review-note,.pill,.step,
        .secure-chip,.status,.status-badge,.badge,.state,.avatar,.km-lowbw-badge,
        .km-lowbw-banner,.toast,.pay-deadline,#notice,#call-bar,#patient-install,.review-sandbox-notice) {
      background: var(--kank-panel-raised) !important;
      color: var(--kank-white) !important;
      border-color: var(--kank-outline) !important;
      box-shadow: none !important;
    }
    :where(th,.rx-outbound pre) { background: var(--kank-panel-raised) !important; }
    :where(td,th,fieldset,.hist-row,.doc-row,.doctor-document-row,.waiting-summary,
        .rx-medicine,.next,.chk) { border-color: var(--kank-line) !important; }

    /* SMS, WhatsApp, Back and other secondary actions use the same purple fill. */
    :where(button,.btn,.button,.primary,.secondary,.wa-link,.chip,.km-lowbw-btn,
        input[type=button],input[type=submit],input[type=reset],#wa-app,#kank-whatsapp-fab):not(:where(.gm-style,.gm-style *,.leaflet-container,.leaflet-container *)) {
      background: var(--kank-action) !important;
      color: var(--kank-white) !important;
      -webkit-text-fill-color: var(--kank-white) !important;
      border: 1px solid var(--kank-outline) !important;
      box-shadow: none !important;
      filter: none !important;
    }
    :where(button,.btn,.button,.primary,.secondary,.wa-link,.chip,#wa-app,#kank-whatsapp-fab):not(:disabled):not(:where(.gm-style,.gm-style *,.leaflet-container,.leaflet-container *)):hover {
      background: var(--kank-hover) !important;
      border-color: var(--kank-white) !important;
    }
    :where(button,.btn,.button,.primary,.secondary,.chip):not(:disabled):not(:where(.gm-style,.gm-style *,.leaflet-container,.leaflet-container *)):active {
      background: #1d0d32 !important;
    }
    :where(button,.btn,.button):where(:disabled,[aria-disabled=true]):not(:where(.gm-style,.gm-style *,.leaflet-container,.leaflet-container *)) {
      background: #21152f !important;
      border-color: #756587 !important;
      color: #d7d0e2 !important;
      -webkit-text-fill-color: #d7d0e2 !important;
      opacity: 1 !important;
    }
    :where(.book-option,.owner-tab,.chip,.tabs button,.state-list button):where(.active,[aria-pressed=true],[aria-current]) {
      background: #35204f !important;
      border-color: var(--kank-white) !important;
      color: var(--kank-white) !important;
    }
    /* Keep the familiar red for ending calls or destructive actions. */
    :where(button,.btn,.button):where(.danger,.btn-danger,.call-decline,.rx-danger,.call-end) {
      background: #a62929 !important;
      border-color: #d88585 !important;
      color: var(--kank-white) !important;
    }
    :where(button,.btn,.button):where(.danger,.btn-danger,.call-decline,.rx-danger,.call-end):hover:not(:disabled) { background: #bc3232 !important; }

    /* The same readable white entry fields on every desk and sign-in page. */
    :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]),select,textarea):not(:where(.gm-style,.gm-style *,.leaflet-container,.leaflet-container *)) {
      background-color: #fff !important;
      color: var(--kank-ink) !important;
      -webkit-text-fill-color: var(--kank-ink) !important;
      caret-color: var(--kank-ink) !important;
      border: 1px solid #7b6a99 !important;
      color-scheme: light;
      opacity: 1 !important;
      box-shadow: none !important;
      -webkit-box-shadow: none !important;
    }
    select option { background: #fff !important; color: var(--kank-ink) !important; }
    :where(input,textarea)::placeholder { color: #6b5f7e !important; -webkit-text-fill-color: #6b5f7e !important; opacity: 1 !important; }
    input:where(:-webkit-autofill,:autofill) {
      -webkit-text-fill-color: var(--kank-ink) !important;
      box-shadow: 0 0 0 1000px #fff inset !important;
      -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    }
    :where(input,select,textarea):where(:disabled,[readonly]):not([type=button]):not([type=submit]):not([type=reset]) {
      background-color: #f0ecf6 !important;
      color: #4a3f60 !important;
      -webkit-text-fill-color: #4a3f60 !important;
    }
    :where(input[type=checkbox],input[type=radio]) { accent-color: #8b5fd0 !important; }
    :where(input,select,textarea,button,a,summary,.btn,.button):focus-visible:not(:where(.gm-style,.gm-style *,.leaflet-container,.leaflet-container *)) {
      outline: 3px solid #e8e2f1 !important;
      outline-offset: 3px !important;
    }
    .guard-list li::before { background: var(--kank-panel-raised) !important; color: #fff !important; }
  }
}