/* SOURCE_patient_panel_css_20260320_token_phase1 */
:root {
  /* Tipografi — 3 rol (D2): Body=Satoshi, Display=Space Grotesk, Data=mono. */
  --font-primary: "Satoshi", sans-serif; /* body (korunur) */
  --font-display: "Space Grotesk", "Satoshi", sans-serif; /* baslik + buyuk sayilar */
  --font-mono: "Spline Sans Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular",
    "Menlo", "Consolas", monospace; /* aksesyon/tarih/olcum + kalibrasyon seridi */

  /* D3 Part 4 — notr omurga repoint: eski sicak griler -> cool Graphite palet.
     Navbar (dark chrome) + brand/lumen + semantik sinyaller sonraki tura ertelendi. */
  --color-page-bg: var(--graphite-50); /* #f8f9fa (sicak) -> #f7f9fb (cool nötr) */
  --color-sidebar-bg: var(--graphite-50); /* #fafaf8 (krem) -> cool nötr */
  --color-card-bg: #ffffff; /* saf beyaz panel — palette token yok, korunur */
  /* D4 — navbar chrome tema-bazli ayrildi: hasta sakin lacivert (VL §0 calm),
     hekim near-black okuma-odasi (VL §5 "navbar graphite-900"). */
  --color-navbar-bg-patient: #0f2b4a; /* hasta: sakin lacivert chrome (korunur) */
  --color-navbar-bg-doctor: var(--graphite-900); /* hekim: #0e1116 near-black okuma-odasi */

  --color-text-heading: var(--graphite-700); /* #0f2b4a navy -> #2c333d cool mürekkep (AA 12.74:1) */
  --color-text-body: var(--graphite-700); /* #3d3c38 -> #2c333d (AA 12.74:1) */
  --color-text-secondary: var(--graphite-500); /* #888780 (3.61, sub-AA!) -> #5a636e (AA 6.10:1) */
  --color-text-hint: var(--graphite-400); /* #b4b2a9 -> #9aa3ad (hint tier; kullanimsiz) */

  --color-border-default: var(--graphite-200); /* #e8e6df -> #d7dce2 cool kenarlik */
  --color-border-medium: var(--graphite-400); /* #b4b2a9 -> #9aa3ad (kenarlik rolu) */

  /* D3 Part 4b — brand aksani repoint: kurumsal #185fa5 -> kalibre Lumen. */
  --color-primary: var(--lumen-600); /* #185fa5 -> #1a709e (AA 5.45/white) */
  --color-primary-hover: var(--lumen-700); /* #0c447c -> #155f88 (AA 6.94) */
  --color-primary-light: var(--lumen-tint); /* #e8f2fc -> #e6f2f9 */
  --color-danger: #c62828;
  --color-danger-bg: #ffebee;
  --color-danger-border: rgba(198, 40, 40, 0.2);

  /* D3 Part 4c — semantik sinyaller: draft/muted sicak gri -> cool Graphite;
     review -> Lumen. Klinik renkler (action=Caution, done=Confirmed, danger=Critical)
     VL §2.3 ile zaten birebir -> korunur. Pending (mor) VL'de tanimsiz -> dokunulmadi. */
  --status-draft-bg: var(--graphite-100); /* #f4f3f0 -> #eef1f4 */
  --status-draft-border: var(--graphite-400); /* #b4b2a9 -> #9aa3ad */
  --status-draft-text: var(--graphite-500); /* #5f5e5a -> #5a636e (AA 5.38 on draft-bg) */

  --status-action-bg: #fdf3e3;
  --status-action-border: #ef9f27;
  --status-action-text: #854f0b;

  --status-review-bg: var(--lumen-tint); /* #e8f2fc -> #e6f2f9 */
  --status-review-border: var(--lumen-500); /* #378add -> #2a93cc (gorunur aksan kenarlik) */
  --status-review-text: var(--lumen-700); /* #0c447c -> #155f88 (AA 6.10 on review-bg) */

  --status-pending-bg: #eeedfe;
  --status-pending-border: #7f77dd;
  --status-pending-text: #3c3489;

  --status-done-bg: #e8f7f1;
  --status-done-border: #1d9e75;
  --status-done-text: #085041;

  /* D5 Part 2 — kanonik chip tone token'lari. Iki kelime dagarcigi (semantik +
     stage) tek matriste bu 6 tone'a yonlenir (bkz. patient_pages.css chip matrisi).
     :root varsayilan = hasta/semantik (--status-*); hekim teması --tr-stage-*'a
     override eder (doctor_panel.css) → hekim dark'ta da dogru doner. */
  --tr-chip-critical-text: var(--color-danger);
  --tr-chip-critical-bg: var(--color-danger-bg);
  --tr-chip-critical-border: var(--color-danger-border);
  --tr-chip-caution-text: var(--status-action-text);
  --tr-chip-caution-bg: var(--status-action-bg);
  --tr-chip-caution-border: var(--status-action-border);
  --tr-chip-review-text: var(--status-review-text);
  --tr-chip-review-bg: var(--status-review-bg);
  --tr-chip-review-border: var(--status-review-border);
  --tr-chip-confirmed-text: var(--status-done-text);
  --tr-chip-confirmed-bg: var(--status-done-bg);
  --tr-chip-confirmed-border: var(--status-done-border);
  --tr-chip-neutral-text: var(--status-draft-text);
  --tr-chip-neutral-bg: var(--status-draft-bg);
  --tr-chip-neutral-border: var(--status-draft-border);
  --tr-chip-pending-text: var(--status-pending-text);
  --tr-chip-pending-bg: var(--status-pending-bg);
  --tr-chip-pending-border: var(--status-pending-border);

  /* D5 Part 3 — empty-state: tema-agnostik token-driven (eski ad-hoc hex/gradient
     literal'leri VL §4'e aykiriydi + dark'ta bozulurdu). :root = mevcut hasta
     (light) degerleri birebir; hekim teması dark-uyarli token'lara override eder
     (doctor_panel.css). --tr-empty-icon lumen-600-rgb token'i ile dark'ta lumen-400'e
     doner (negatoskop). */
  --tr-empty-border: #d6e1ee;
  --tr-empty-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --tr-empty-bg-soft: linear-gradient(180deg, #fbfcfe 0%, #f5f8fc 100%);
  --tr-empty-warning-border: rgba(249, 168, 37, 0.32);
  --tr-empty-warning-bg: linear-gradient(180deg, #fffdf7 0%, #fff7e8 100%);
  --tr-empty-title: #132238;
  --tr-empty-body: #5f7186;
  --tr-empty-icon: rgba(var(--lumen-600-rgb), 0.62);
  --tr-empty-icon-qa: rgba(61, 60, 56, 0.48);

  --type-h1-size: 28px;
  --type-h1-weight: 700;
  --type-h1-letter-spacing: -0.5px;

  --type-h2-size: 20px;
  --type-h2-weight: 700;
  --type-h2-letter-spacing: -0.3px;

  --type-h3-size: 15px;
  --type-h3-weight: 600;
  --type-h3-letter-spacing: 0;

  --type-body-size: 14px;
  --type-body-weight: 400;
  --type-body-line-height: 1.6;

  --type-meta-size: 12px;
  --type-meta-weight: 400;
  --type-meta-line-height: 1.5;

  /* --- D1 scale tokens — additive single-source vocabulary (henüz referanssız) --- */
  /* Spacing — 4px taban */
  --space-0: 0;
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.5rem; /* 24 */
  --space-6: 2rem; /* 32 */
  --space-7: 3rem; /* 48 */
  --space-8: 4rem; /* 64 */

  /* Radius — mevcut kullanımı kapsar (btn 7, card 10, pill) */
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Elevation — cool graphite gölge; mevcut değerler korunur */
  --elev-1: 0 2px 10px rgba(15, 43, 74, 0.04);
  --elev-2: 0 10px 24px rgba(15, 43, 74, 0.05);
  --elev-3: 0 18px 38px rgba(15, 43, 74, 0.08);
  --elev-4: 0 24px 52px rgba(16, 37, 63, 0.1);

  /* Z-index — Bootstrap konvansiyonuyla hizalı */
  --z-base: 0;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-toast: 1080;

  /* --- D3 adlandirilmis palet — "Negatoskop" omurgasi (additive; alias repoint sonra) --- */
  /* Graphite — cool true-neutral notr omurga */
  --graphite-50: #f7f9fb;
  --graphite-100: #eef1f4;
  --graphite-200: #d7dce2;
  --graphite-400: #9aa3ad;
  --graphite-500: #5a636e;
  --graphite-700: #2c333d;
  --graphite-800: #1a1f26;
  --graphite-900: #0e1116;
  /* Lumen — "kalibre isik" aksani (negatoskop backlight / D65 tani monitoru) */
  --lumen-600: #1a709e; /* primary metin/dolgu/link; AA beyaz 5.45 / tint 4.78 (taslak #1e7fb4 4.42 sub-AA idi) */
  --lumen-700: #155f88; /* hover/active/pressed (koyu); AA beyaz 6.94 */
  --lumen-500: #2a93cc; /* dekoratif/buyuk aksan; metin DEGIL (beyaz 3.42) */
  --lumen-400: #38bdf8; /* dark tema aksani */
  --lumen-tint: #e6f2f9; /* light soft zemin */
  /* D4 — rgba-tabani triplet'ler: dekoratif lumen wash'lerini rgba(var(--..), a)
     desenine gecirmek + tema-bazli aksan kaydirmak icin (light->dark) additive primitive.
     Henuz referanssiz (wash literal donusumu D4 Part 2). */
  --lumen-600-rgb: 26, 112, 158; /* #1a709e — light aksan rgba tabani */
  --lumen-400-rgb: 56, 189, 248; /* #38bdf8 — dark aksan rgba tabani */

  /* Lightbox yuzey dili (D3 imza): ince cool kenarlik + ust ic-isik (backlight) */
  --tr-lightbox-border: var(--graphite-200);
  --tr-lightbox-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 10px 22px -16px rgba(56, 189, 248, 0.22);
}

body,
.tr-app {
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 26, 112, 158;
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: 26, 112, 158;
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-link-hover-color-rgb: 21, 95, 136;
  --bs-focus-ring-color: rgba(26, 112, 158, 0.2);
  --tr-surface: #ffffff;
  --tr-bg-soft: var(--color-page-bg);
  --tr-border-soft: var(--color-border-default);
  --tr-text-main: var(--color-text-heading);
  --tr-text-muted: var(--color-text-secondary);
  --tr-brand: var(--color-primary);
  --tr-brand-soft: var(--color-primary-light);
  --tr-success-soft: var(--status-done-bg);
  font-family: var(--font-primary);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  color: var(--color-text-body);
}

/* Patient-only corporate redesign tokens and component skin. */
/* D1 — paylasimli tema token'lari: patient + doctor tek kaynak (drift-proof).
   Tema bloklari yalnizca gercekten ayrisan degerleri override eder. */
.tr-patient-theme,
.tr-doctor-theme {
  --tr-font-sans: var(--font-primary);
  --tr-font-display: var(--font-display);
  --tr-font-mono: var(--font-mono);
  --tr-primary: var(--color-primary);
  --tr-primary-hover: var(--color-primary-hover);
  --tr-app-bg: var(--color-page-bg);
  --tr-surface-base: var(--color-card-bg);
  --tr-surface-tint: rgba(248, 251, 255, 0.92);
  --tr-border: var(--color-border-default);
  --tr-text-heading: var(--color-text-heading);
  --tr-text-body: var(--color-text-body);
  --tr-text-kicker: var(--color-text-secondary);
  --tr-focus-ring: 0 0 0 3px rgba(26, 112, 158, 0.12);
  --tr-success: var(--status-done-text);
  --tr-success-bg: var(--status-done-bg);
  --tr-success-border: var(--status-done-border);
  --tr-info: var(--status-review-text);
  --tr-info-bg: var(--status-review-bg);
  --tr-warning-bg: var(--status-action-bg);
  --tr-danger: var(--color-danger);
  --tr-danger-bg: var(--color-danger-bg);
  --tr-danger-border: var(--color-danger-border);
  --tr-muted-text: var(--status-draft-text);
  --tr-muted-bg: var(--status-draft-bg);
  --tr-muted-border: var(--status-draft-border);
  --tr-heading-track: var(--type-h2-letter-spacing);
  --tr-heading-track-tight: var(--type-h1-letter-spacing);
  --tr-copy-size-sm: var(--type-meta-size);

  /* D5 Part 1 — button + card varyant matrisi: tema-agnostik tek tanim
     (panel_shared.css) bu token'lardan beslenir. Bu blok = hasta/varsayilan
     degerler; hekim teması (doctor_panel.css) yalniz farklari override eder. */
  --tr-btn-radius: var(--radius-sm); /* hasta 7px */
  --tr-btn-pad-y: 9px;
  --tr-btn-pad-x: 18px;
  --tr-btn-size: var(--type-body-size); /* hasta 14px; doctor -> Bootstrap 1rem */
  --tr-btn-weight: 600;
  --tr-btn-primary-ink: #ffffff; /* dolgu uzerinde metin; doctor dark -> graphite-900 */
  /* solid primary buton zemini: varsayilan = sistem cyan (hekim boyle kalir);
     hasta teması --tr-journey (yesil = hastanin eylemi) ile override eder. */
  --tr-btn-primary-bg: var(--tr-primary);
  --tr-btn-primary-bg-hover: var(--tr-primary-hover);
  --tr-btn-outline-border: var(--tr-primary);
  --tr-btn-outline-bg: transparent;
  --tr-card-radius: var(--radius-md); /* hasta 10px */
  --tr-card-border-color: var(--tr-border);
  --tr-card-shadow: var(--elev-1);
  --tr-card-pad: var(--space-4); /* 1rem */
}

.tr-patient-theme {
  --tr-card-bg: var(--color-card-bg);
  --tr-card-bg-soft: var(--color-card-bg);
  --tr-surface-soft: var(--color-card-bg);
  --tr-surface-muted: var(--color-page-bg);
  --tr-border-strong: var(--color-border-medium);
  --tr-border-soft: var(--color-border-default);
  --tr-primary-soft: var(--color-primary-light);
  /* Renk gorev-ayrimi (hasta): yesil = hastanin KENDI eylemi/yolculugu
     (solid primary CTA, stepper/progress aktif adim, tamamlandi); cyan = sistem
     /navigasyon/inceleme. --tr-journey AA-guvenli (#137a55 beyaz metin 5.33:1,
     mevcut cyan butonun 5.45 agirligiyla es). Parlak kimlik yesili #1d9e75 yalniz
     metin-disi tint/dot'ta (upload-flow icinde) kalir; buton dolgusu daima journey
     yesili -> ada panelle birlesir + latent sub-AA buton (#1d9e75=3.39) duzelir. */
  --tr-journey: #137a55;
  --tr-journey-hover: #0f6647;
  --tr-journey-tint: var(--status-done-bg);
  --tr-journey-ring: rgba(19, 122, 85, 0.22);
  --tr-btn-primary-bg: var(--tr-journey);
  --tr-btn-primary-bg-hover: var(--tr-journey-hover);
  --tr-text-soft: var(--color-text-body);
  --tr-shadow-sm: 0 10px 24px rgba(16, 37, 63, 0.05);
  --tr-shadow-md: 0 18px 38px rgba(16, 37, 63, 0.08);
  --tr-shadow-lg: 0 24px 52px rgba(16, 37, 63, 0.1);
  --tr-warning: var(--status-action-border);
  --tr-review-text: var(--status-review-text);
  --tr-review-bg: var(--status-review-bg);
  --tr-review-border: var(--status-review-border);
  --tr-action-text: var(--status-action-text);
  --tr-action-bg: var(--status-action-bg);
  --tr-action-border: var(--status-action-border);
  --tr-tone-review-text: var(--tr-review-text);
  --tr-tone-review-bg: var(--tr-review-bg);
  --tr-tone-review-border: var(--tr-review-border);
  --tr-tone-action-text: var(--tr-action-text);
  --tr-tone-action-bg: var(--tr-action-bg);
  --tr-tone-action-border: var(--tr-action-border);
  --tr-tone-success-text: var(--tr-success);
  --tr-tone-success-bg: var(--tr-success-bg);
  --tr-tone-success-border: var(--tr-success-border);
  --tr-tone-muted-text: var(--tr-muted-text);
  --tr-tone-muted-bg: var(--tr-muted-bg);
  --tr-tone-muted-border: var(--tr-muted-border);
  --tr-body-size: var(--type-body-size);
  --tr-kicker-size: var(--type-meta-size);

  --bs-primary: var(--tr-primary);
  --bs-primary-rgb: 26, 112, 158;
  --bs-link-color: var(--tr-primary);
  --bs-link-color-rgb: 26, 112, 158;
  --bs-link-hover-color: var(--tr-primary-hover);
  --bs-link-hover-color-rgb: 21, 95, 136;
  --bs-focus-ring-color: rgba(26, 112, 158, 0.2);
  --bs-success: var(--tr-success);
  --bs-success-rgb: 8, 80, 65;
  --bs-info: var(--tr-info);
  --bs-info-rgb: 21, 95, 136; /* D3 4c: review=lumen-700 */
  --bs-warning: var(--tr-warning);
  --bs-warning-rgb: 239, 159, 39;
  --bs-danger: var(--tr-danger);
  --bs-danger-rgb: 198, 40, 40;

  background: var(--tr-app-bg) !important;
  font-family: var(--tr-font-sans);
  color: var(--tr-text-body);
}

/* ============================================================================
   D5 Part 1 — button + card: tema-agnostik TEK TANIM, token-driven.
   Eskiden 3x tekrar (tr-patient-theme / tr-patient-dashboard / tr-doctor-theme)
   -> tek kural bloku. Tema farklari token override'larinda: hasta degerleri
   .tr-patient-theme/.tr-doctor-theme paylasimli blokunda (varsayilan), hekim
   farklari doctor_panel.css .tr-doctor-theme blokunda. Davranis-koruyan
   (gorsel diff ~= 0). KONUM: en erken yuklenen dosya = "base"; sonraki
   dosyalardaki ayni-ozgulluklu baglamsal override'lar (doctor_panel
   filter-quick-link, patient_pages) eskisi gibi kazanir. Dark btn ink
   --tr-btn-primary-ink token'iyla doner; dark outline yeniden-stili
   doctor_panel.css yuksek-ozgulluk override'da kalir.
   ============================================================================ */
.tr-patient-theme .btn-primary,
.tr-patient-dashboard .btn-primary,
.tr-doctor-theme .btn-primary {
  background: var(--tr-btn-primary-bg);
  color: var(--tr-btn-primary-ink);
  border: 1px solid var(--tr-btn-primary-bg);
  border-radius: var(--tr-btn-radius);
  padding: var(--tr-btn-pad-y) var(--tr-btn-pad-x);
  font-size: var(--tr-btn-size);
  font-weight: var(--tr-btn-weight);
  cursor: pointer;
  transition: background 0.15s;
}

.tr-patient-theme .btn-primary:hover,
.tr-patient-theme .btn-primary:focus,
.tr-patient-dashboard .btn-primary:hover,
.tr-patient-dashboard .btn-primary:focus,
.tr-doctor-theme .btn-primary:hover,
.tr-doctor-theme .btn-primary:focus {
  background: var(--tr-btn-primary-bg-hover);
  border-color: var(--tr-btn-primary-bg-hover);
  color: var(--tr-btn-primary-ink);
}

/* Focus ring solid primary butonda aksanla uyumlu (hasta: yesil; hekim cyan'i
   --bs-focus-ring uzerinden korur, journey-ring yalniz hasta teması tanimlar). */
.tr-patient-theme .btn-primary:focus-visible,
.tr-patient-dashboard .btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-journey-ring, rgba(19, 122, 85, 0.22));
}

.tr-patient-theme .btn-outline-primary,
.tr-patient-dashboard .btn-outline-primary,
.tr-doctor-theme .btn-outline-primary {
  color: var(--tr-primary);
  border-color: var(--tr-btn-outline-border);
  background: var(--tr-btn-outline-bg);
}

.tr-patient-theme .btn-outline-primary:hover,
.tr-patient-theme .btn-outline-primary:focus,
.tr-patient-dashboard .btn-outline-primary:hover,
.tr-patient-dashboard .btn-outline-primary:focus,
.tr-doctor-theme .btn-outline-primary:hover,
.tr-doctor-theme .btn-outline-primary:focus {
  color: #fff;
  background-color: var(--tr-primary);
  border-color: var(--tr-primary);
}

.tr-patient-theme .card,
.tr-patient-theme .tr-card,
.tr-patient-dashboard .card,
.tr-patient-dashboard .tr-card,
.tr-doctor-theme .card,
.tr-doctor-theme .tr-card {
  background: var(--tr-surface-base);
  border: 1px solid var(--tr-card-border-color);
  border-radius: var(--tr-card-radius);
  box-shadow: var(--tr-card-shadow);
}

.tr-patient-theme .card .card-body,
.tr-doctor-theme .card .card-body {
  padding: var(--tr-card-pad);
}

/* btn-link patient-ozel kalir (doctor btn-link = Bootstrap default; dokunulmadi). */
.tr-patient-theme .btn-link {
  color: var(--tr-primary);
}

.tr-patient-theme .btn-link:hover,
.tr-patient-theme .btn-link:focus {
  color: var(--tr-primary-hover);
}

.tr-patient-theme .progress {
  background-color: #e9eff7;
  border-radius: 999px;
}

.tr-patient-theme .progress-bar {
  background-color: var(--tr-primary);
  border-radius: 999px;
}

.tr-patient-theme .badge {
  font-weight: 600;
}

.tr-patient-theme .badge.bg-success,
.tr-patient-theme .badge.text-bg-success,
.tr-patient-theme .text-bg-success {
  color: var(--tr-success) !important;
  background-color: var(--tr-success-bg) !important;
}

.tr-patient-theme .badge.bg-info,
.tr-patient-theme .badge.text-bg-info,
.tr-patient-theme .text-bg-info {
  color: var(--tr-info) !important;
  background-color: var(--tr-info-bg) !important;
}

.tr-patient-theme .badge.bg-warning,
.tr-patient-theme .badge.text-bg-warning,
.tr-patient-theme .text-bg-warning {
  color: #7a5a00 !important;
  background-color: var(--tr-warning-bg) !important;
}

.tr-patient-theme .badge.bg-danger,
.tr-patient-theme .badge.text-bg-danger,
.tr-patient-theme .text-bg-danger {
  color: var(--tr-danger) !important;
  background-color: var(--tr-danger-bg) !important;
}