/*
 * HT-CRM · Veritas Medical Theme
 * Aesthetic: Swiss precision meets Bosphorus warmth
 * Primary: Teal (medical authority)  |  Surface: warm ivory
 * Font: Sora (loaded by panel provider via BunnyFontProvider)
 */

/* ══════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
══════════════════════════════════════════════ */
:root {
  --crm-teal:        #0d9488;   /* teal-600  */
  --crm-teal-dark:   #0f766e;   /* teal-700  */
  --crm-teal-light:  #ccfbf1;   /* teal-100  */
  --crm-gold:        #b07d3a;   /* ochre accent — used very sparingly */
  --crm-surface:     #f5f7f8;
  --crm-white:       #ffffff;
  --crm-border:      #e4e9ec;
  --crm-border-sm:   #edf0f2;
  --crm-text-muted:  #7c8fa0;
  --crm-text-strong: #0f1e2d;
  --crm-shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --crm-shadow:      0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --crm-shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --crm-shadow-teal: 0 4px 20px rgba(13,148,136,0.18);
  --crm-radius:      10px;
  --crm-radius-sm:   7px;
  --crm-radius-lg:   14px;

  /* Okunabilirlik tabani.
     Etiket katmaninin tamami 0.6–0.65rem (10px civari) BUYUK HARF idi:
     yani bir degeri ADLANDIRAN her metin okunabilirlik tabaninin altindaydi.
     Deger metinleri zaten okunakliydi; sorun etiketlerdeydi. */
  --crm-label:       0.75rem;   /* 12px */
  --crm-label-track: 0.01em;

  /* Odak halkasi. Onceki hali teal'in %18–20 saydami idi; beyaz uzerinde
     pratikte gorunmuyordu ve klavyeyle gezen biri nerede oldugunu
     kaybediyordu. */
  --crm-focus:       0 0 0 3px rgba(13, 148, 136, 0.55);
  --crm-focus-inset: 0 0 0 1px var(--crm-white);

  /* Tablo satir zemini. Token OLMASI sart: zebra sericigi sabit acik bir
     renge (#fafbfc) gomuluyken koyu temada satirlarin yarisi BEYAZ
     kaliyordu — koyu modda karsiligi hic tanimlanmamisti. */
  --crm-row-stripe:  #fafbfc;
  --crm-row-hover:   #f0f9f8;

  /* Menu ogesi zeminleri. Bunlar da token OLMALI: sabit acik renkler koyu
     temada menuyu okunmaz yapiyordu (aktif oge neredeyse beyaz zeminde
     koyu teal yaziydi). */
  --crm-nav-hover:       #f0f9f8;
  --crm-nav-active-from: #e6f7f5;
  --crm-nav-active-to:   #f0faf9;
  --crm-nav-active-text: var(--crm-teal-dark);

  /* Panel icindeki "hafif" zeminler (bolum basligi, tablo basligi, arac
     cubugu, sayfalama, modal alt seridi). Tek tokenden gelmeleri sart:
     her biri ayri ayri sabit renk tasidiginda koyu tema karsiligini
     eklemeyi unutmak kacinilmaz oluyor. */
  --crm-subtle-bg:   #fafbfc;
  --crm-th-bg:       #f8f9fa;
}

/* ══════════════════════════════════════════════
   1 · GLOBAL LAYOUT & BODY
══════════════════════════════════════════════ */

body {
  background-color: var(--crm-surface);
  /* Subtle dot grid — like a medical form's graph paper */
  background-image: radial-gradient(
    circle,
    rgba(0, 90, 90, 0.055) 1.2px,
    transparent 1.2px
  );
  background-size: 26px 26px;
}

/* Main content wrapper — clean card over the textured body */
.fi-main-ctn {
  background: transparent;
}

.fi-main {
  background: transparent;
}

/* Page content padding refinement */
.fi-page {
  padding: 1.25rem !important;
}

/* ══════════════════════════════════════════════
   2 · SIDEBAR
══════════════════════════════════════════════ */

.fi-sidebar.fi-main-sidebar {
  background: var(--crm-white) !important;
  border-right: 1px solid var(--crm-border) !important;
}

/* Header area */
.fi-sidebar-header {
  padding: 1.125rem 1rem 1rem !important;
  border-bottom: 1px solid var(--crm-border-sm) !important;
}

/* Marka adi.
   Onceki kural `.fi-brand-name`'i hedefliyordu — Filament v5'te BOYLE BIR
   SINIF YOK; marka `.fi-logo` olarak render ediliyor, yani kural hicbir sey
   yapmiyordu ve uzun bir kurum adi hicbir sinira takilmadan tasiyordu.
   Kurum adlari uzun olabildigi icin (unvan + sube) hem yaziyi kuculuyoruz
   hem de basligin buyumesine izin veriyoruz. */
.fi-sidebar-header {
  /* Yukseklik sabit degil: uzun kurum adi ucuncu satira tasarsa baslik
     buyur, kirpilmaz. Alt sinir korunuyor ki kisa adlarda baslik topbar
     ile ayni hizada kalsin. */
  height: auto !important;
  min-height: 3.75rem !important;
  overflow: visible !important;
}

.fi-sidebar-header-logo-ctn {
  min-width: 0 !important;
}

.fi-logo {
  font-size: clamp(0.78rem, 0.62rem + 0.7vw, 1.025rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.25 !important;
  color: var(--crm-text-strong) !important;
  /* Sigmayan cok uzun adlar ucuncu satirdan sonra kirpilir; kelime
     ortasindan bolmek yerine once kelime sinirini dener. */
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}

/* Nav container */
.fi-sidebar-nav {
  padding: 0.5rem 0 !important;
}

/* Group labels — buyuk harf burada kaliyor: bir BOLUM adini tasiyor,
   bir veri adini degil. Ama 12px'e cikti ve tracking normale dondu. */
.fi-sidebar-group-label {
  font-size: var(--crm-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--crm-text-muted) !important;
  padding: 1.1rem 1rem 0.3rem !important;
  opacity: 1 !important;
}

/* Nav item wrapper */
.fi-sidebar-item {
  padding: 1px 6px !important;
}

/* Nav item button */
.fi-sidebar-item-btn {
  border-radius: var(--crm-radius-sm) !important;
  padding: 0.45rem 0.75rem !important;
  transition: background-color 0.12s ease, box-shadow 0.12s ease !important;
  position: relative !important;
}

.fi-sidebar-item-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 0;
  background: var(--crm-teal);
  border-radius: 0 3px 3px 0;
  transition: width 0.15s ease;
}

/* Hover yalnizca GERCEK isaretleyicisi olan cihazlarda.
   Dokunmatikte `:hover` tap'ten sonra takili kaliyor: kullanici menuden bir
   sayfaya gecince o oge acik zeminle asili kaliyordu. */
@media (hover: hover) {
  .fi-sidebar-item-btn:hover {
    background-color: var(--crm-nav-hover) !important;
  }
}

/* Aktif oge — teal sol vurgu.
   `fi-active` sinifi `.fi-sidebar-item` uzerinde duruyor, BUTONUN uzerinde
   degil; onceki `.fi-sidebar-item-btn.fi-active` secicisi hicbir zaman
   eslesmiyordu. Butonda `aria-current` da yok. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  background: linear-gradient(to right, var(--crm-nav-active-from), var(--crm-nav-active-to)) !important;
  color: var(--crm-nav-active-text) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
  width: 3px;
}

/* Item label */
.fi-sidebar-item-label {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* Item icon */
.fi-sidebar-item-icon {
  opacity: 0.7;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
  opacity: 1;
}

/* Footer */
.fi-sidebar-footer {
  border-top: 1px solid var(--crm-border-sm) !important;
  padding: 0.75rem 0.5rem !important;
}

/* ══════════════════════════════════════════════
   3 · TOPBAR
══════════════════════════════════════════════ */

.fi-topbar-ctn {
  border-bottom: 1px solid var(--crm-border) !important;
}

.fi-topbar {
  background: var(--crm-white) !important;
}

/* ══════════════════════════════════════════════
   4 · SECTIONS / CARDS
══════════════════════════════════════════════ */

.fi-section {
  background: var(--crm-white) !important;
  border: 1px solid var(--crm-border) !important;
  box-shadow: var(--crm-shadow) !important;
  border-radius: var(--crm-radius-lg) !important;
  overflow: hidden !important;
}

.fi-section-header {
  border-bottom: 1px solid var(--crm-border-sm) !important;
  padding: 0.875rem 1.25rem !important;
  background: var(--crm-subtle-bg) !important;
}

.fi-section-header-heading {
  font-size: 0.825rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--crm-text-strong) !important;
}

.fi-section-header-description {
  font-size: 0.75rem !important;
  color: var(--crm-text-muted) !important;
}

/* ══════════════════════════════════════════════
   5 · TABLES
══════════════════════════════════════════════ */

/* Table container */
.fi-ta-main {
  border-radius: var(--crm-radius-lg) !important;
  border: 1px solid var(--crm-border) !important;
  overflow: hidden !important;
  box-shadow: var(--crm-shadow) !important;
  background: var(--crm-white) !important;
}

/* Header cells — medical label style */
.fi-ta-header-cell {
  font-size: var(--crm-label) !important;
  font-weight: 700 !important;
  letter-spacing: var(--crm-label-track) !important;
  text-transform: none !important;
  color: var(--crm-text-muted) !important;
  background: var(--crm-th-bg) !important;
  border-bottom: 2px solid var(--crm-border) !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}

/* Body rows — compact density: 137k+ lead imports made the default row
   height (Filament's own padding is fairly generous) show too few rows per
   screen. Cuts vertical cell padding without touching text size, so
   truncated/tooltip'd columns still read fine. */
.fi-ta-row {
  transition: background-color 0.1s ease !important;
  border-bottom: 1px solid var(--crm-border-sm) !important;
}

.fi-ta-cell {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}

.fi-ta-row:last-child {
  border-bottom: none !important;
}

/* Row hover — teal left accent stripe */
.fi-ta-row:hover {
  background-color: var(--crm-row-hover) !important;
}

.fi-ta-row:hover .fi-ta-cell:first-child {
  box-shadow: inset 3px 0 0 var(--crm-teal) !important;
}

/* Striped rows */
.fi-ta-row:nth-child(even) {
  background-color: var(--crm-row-stripe) !important;
}

.fi-ta-row:hover,
.fi-ta-row:nth-child(even):hover {
  background-color: var(--crm-row-hover) !important;
}

/* Table toolbar (search + actions row) */
.fi-ta-header-toolbar {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--crm-border-sm) !important;
  background: var(--crm-subtle-bg) !important;
}

/* Filters above table */
.fi-ta-filters-before-content {
  border-bottom: 1px solid var(--crm-border-sm) !important;
  background: var(--crm-subtle-bg) !important;
  padding: 0.875rem 1rem !important;
}

/* Pagination */
.fi-pagination {
  border-top: 1px solid var(--crm-border-sm) !important;
  background: var(--crm-subtle-bg) !important;
  padding: 0.625rem 1rem !important;
}

/* ══════════════════════════════════════════════
   6 · SEARCH INPUT
══════════════════════════════════════════════ */

.fi-ta-search-field .fi-input {
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  background: var(--crm-white) !important;
}

/* Focus ring */
.fi-ta-search-field:focus-within {
  box-shadow: var(--crm-focus) !important;
}

/* ══════════════════════════════════════════════
   7 · BADGES
══════════════════════════════════════════════ */

.fi-badge {
  font-size: var(--crm-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
}

/* ══════════════════════════════════════════════
   8 · BUTTONS
══════════════════════════════════════════════ */

.fi-btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  letter-spacing: -0.01em !important;
  transition: all 0.14s ease !important;
}

/* Primary button — teal with subtle lift */
.fi-btn.fi-color-primary {
  box-shadow: var(--crm-shadow-sm) !important;
}

.fi-btn.fi-color-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--crm-shadow-teal) !important;
}

/* ══════════════════════════════════════════════
   9 · FORM INPUTS
══════════════════════════════════════════════ */

.fi-input-wrp,
.fi-fo-select-wrp {
  border-radius: 8px !important;
}

.fi-input {
  border-radius: 8px !important;
  font-size: 0.875rem !important;
}

/* Focus ring */
.fi-input:focus {
  box-shadow: var(--crm-focus) !important;
}

/* ══════════════════════════════════════════════
   10 · STATS OVERVIEW WIDGETS
══════════════════════════════════════════════ */

.fi-wi-stats-overview-stat {
  border-radius: var(--crm-radius-lg) !important;
  border: 1px solid var(--crm-border) !important;
  box-shadow: var(--crm-shadow) !important;
  overflow: hidden !important;
  background: var(--crm-white) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.fi-wi-stats-overview-stat:hover {
  box-shadow: var(--crm-shadow-teal) !important;
  transform: translateY(-2px) !important;
}

.fi-wi-stats-overview-stat-value {
  font-size: 1.875rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}

.fi-wi-stats-overview-stat-label {
  font-size: var(--crm-label) !important;
  font-weight: 700 !important;
  letter-spacing: var(--crm-label-track) !important;
  text-transform: none !important;
  color: var(--crm-text-muted) !important;
}

.fi-wi-stats-overview-stat-description {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════════════════════
   11 · PAGE HEADERS
══════════════════════════════════════════════ */

.fi-header-heading {
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  font-size: 1.4rem !important;
  color: var(--crm-text-strong) !important;
}

.fi-header-subheading {
  font-size: 0.8125rem !important;
  color: var(--crm-text-muted) !important;
}

/* ══════════════════════════════════════════════
   12 · TABS (Saved Views bar)
══════════════════════════════════════════════ */

.fi-tabs {
  border-bottom: 1px solid var(--crm-border) !important;
}

.fi-tabs-item {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  padding: 0.625rem 0.875rem !important;
  transition: color 0.12s ease !important;
}

/* Active tab underline */
.fi-tabs-item[aria-selected="true"] {
  font-weight: 700 !important;
  color: var(--crm-teal-dark) !important;
}

/* ══════════════════════════════════════════════
   13 · NOTIFICATIONS / TOASTS
══════════════════════════════════════════════ */

.fi-no-notification {
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07) !important;
  border: 1px solid var(--crm-border) !important;
}

/* ══════════════════════════════════════════════
   14 · MODALS
══════════════════════════════════════════════ */

.fi-modal-window {
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--crm-border) !important;
}

.fi-modal-header {
  border-bottom: 1px solid var(--crm-border-sm) !important;
  padding: 1.25rem 1.5rem !important;
}

.fi-modal-heading {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.fi-modal-footer {
  border-top: 1px solid var(--crm-border-sm) !important;
  background: var(--crm-subtle-bg) !important;
  padding: 0.875rem 1.5rem !important;
}

/* ══════════════════════════════════════════════
   15 · EMPTY STATE
══════════════════════════════════════════════ */

.fi-ta-empty-state {
  padding: 4rem 2rem !important;
}

.fi-ta-empty-state-icon-bg {
  opacity: 0.18 !important;
}

.fi-ta-empty-state-heading {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--crm-text-strong) !important;
}

/* ══════════════════════════════════════════════
   16 · FILTER INDICATORS (active filter chips)
══════════════════════════════════════════════ */

.fi-ta-filter-indicators {
  padding: 0.5rem 1rem !important;
}

.fi-ta-filter-indicators-badges-ctn .fi-badge {
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════
   17 · DARK MODE OVERRIDES
   Filament manages dark mode via html.dark class (Alpine.store('theme')).
   Do NOT use @media (prefers-color-scheme: dark) — it conflicts with
   Filament's manual toggle because the OS preference stays dark even
   when the user explicitly selects light mode in the panel.
══════════════════════════════════════════════ */

/* Explicit light-mode resets — ensure OS-default dark users see correct
   light colors when Filament removes html.dark after a manual toggle. */
html:not(.dark) {
  --crm-surface:     #f5f7f8;
  --crm-white:       #ffffff;
  --crm-border:      #e4e9ec;
  --crm-border-sm:   #edf0f2;
  --crm-text-muted:  #7c8fa0;
  --crm-text-strong: #0f1e2d;
  --crm-row-stripe:  #fafbfc;
  --crm-row-hover:   #f0f9f8;
  --crm-nav-hover:       #f0f9f8;
  --crm-nav-active-from: #e6f7f5;
  --crm-nav-active-to:   #f0faf9;
  --crm-nav-active-text: var(--crm-teal-dark);
  --crm-subtle-bg:       #fafbfc;
  --crm-th-bg:           #f8f9fa;
}

html:not(.dark) body {
  background-image: radial-gradient(
    circle,
    rgba(0, 90, 90, 0.055) 1.2px,
    transparent 1.2px
  );
  background-size: 26px 26px;
}

/* Dark mode via Filament's html.dark class */
html.dark {
  --crm-surface: #0f1923;
  --crm-white: #18232f;
  --crm-border: #2a3a4a;
  --crm-border-sm: #213040;
  --crm-text-muted: #6b82a0;
  --crm-text-strong: #e8edf2;
  --crm-row-stripe: #16212c;
  --crm-row-hover: #1a2d38;
  --crm-nav-hover: #1b2a36;
  --crm-nav-active-from: rgba(13, 148, 136, 0.22);
  --crm-nav-active-to: rgba(13, 148, 136, 0.06);
  --crm-nav-active-text: #5eead4;
  --crm-subtle-bg: #18242f;
  --crm-th-bg: #18242f;
}

html.dark body {
  background-image: radial-gradient(
    circle,
    rgba(13, 148, 136, 0.06) 1.2px,
    transparent 1.2px
  );
}

html.dark .fi-sidebar.fi-main-sidebar {
  background: #121e2a !important;
  border-right-color: var(--crm-border) !important;
}

html.dark .fi-wi-stats-overview-stat {
  background: #18232f !important;
}

html.dark .fi-topbar {
  background: #121e2a !important;
}

html.dark .fi-ta-main {
  background: var(--crm-white) !important;
}

/* ══════════════════════════════════════════════
   18 · KANBAN BOARD (Lead Kanban)
══════════════════════════════════════════════ */

/* Kanban columns get card treatment */
[class*="kanban-column"] {
  border-radius: var(--crm-radius-lg) !important;
  border: 1px solid var(--crm-border) !important;
}

/* ══════════════════════════════════════════════
   19 · INFOLIST (Lead View detail page)
══════════════════════════════════════════════ */

.fi-in-entry {
  padding: 0.5rem 0 !important;
}

.fi-in-entry-label {
  font-size: var(--crm-label) !important;
  font-weight: 700 !important;
  letter-spacing: var(--crm-label-track) !important;
  text-transform: none !important;
  color: var(--crm-text-muted) !important;
  margin-bottom: 0.2rem !important;
}

.fi-in-text {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--crm-text-strong) !important;
}

/* ══════════════════════════════════════════════
   20 · SCROLLBAR (Webkit)
══════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 90, 90, 0.18);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(13, 148, 136, 0.35);
}

/* ══════════════════════════════════════════════
   21 · KLAVYE ODAGI
   ──────────────────────────────────────────────
   Temada yalnizca iki :focus kurali vardi (arama kutusu ve form girdisi)
   ve ikisi de teal'i %18–20 saydamlikta kullaniyordu — beyaz uzerinde
   pratikte gorunmez. Buton, kenar cubugu baglantisi, tablo satiri, sekme
   ve sayfalama icin hicbir kural yoktu: klavyeyle gezen biri nerede
   oldugunu goremiyordu.

   :focus degil :focus-visible kullaniliyor — fareyle tiklayinda halka
   cikmaz, yalnizca klavye/erisilebilirlik gezintisinde cikar.
══════════════════════════════════════════════ */

.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-link:focus-visible,
.fi-sidebar-item-btn:focus-visible,
.fi-ta-record-checkbox:focus-visible,
.fi-tabs-item:focus-visible,
.fi-pagination-item button:focus-visible,
.fi-dropdown-list-item:focus-visible,
.fi-fo-select-wrp:focus-within,
a:focus-visible {
  outline: none !important;
  box-shadow: var(--crm-focus-inset), var(--crm-focus) !important;
  border-radius: var(--crm-radius-sm) !important;
}

/* Tablo satirlarinda halka kirpilmasin */
.fi-ta-row:focus-within {
  box-shadow: inset 3px 0 0 var(--crm-teal) !important;
}

/* ══════════════════════════════════════════════
   22 · HAREKET AZALTMA
   ──────────────────────────────────────────────
   Temada 12 gecis/donusum var (hover'da translateY + teal parlama).
   Vestibuler rahatsizligi olan ya da sistemde "hareketi azalt" secmis
   kullanicilar icin bunlar kapatilir. Renk/kontrast degismez.
══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fi-btn:hover,
  .fi-wi-stats-overview-stat:hover,
  .fi-sidebar-item-btn:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════
   23 · GIRIS EKRANI
   ──────────────────────────────────────────────
   Temada tek bir fi-simple-layout kurali yoktu: giris, urunun ilk
   goruldugu ekran oldugu halde en tasarlanmamis yuzeyiydi. Panelin
   kendi dilini (nokta izgara zemin, kart, teal odak) buraya tasiyor.
══════════════════════════════════════════════ */

.fi-simple-layout {
  background-color: var(--crm-surface) !important;
  background-image: radial-gradient(
    circle,
    rgba(0, 90, 90, 0.055) 1.2px,
    transparent 1.2px
  ) !important;
  background-size: 26px 26px !important;
}

.fi-simple-main {
  background: var(--crm-white) !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: var(--crm-shadow-md) !important;
  padding: 2.25rem 2rem !important;
}

.fi-simple-header-heading {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--crm-text-strong) !important;
}

.fi-simple-header-subheading {
  color: var(--crm-text-muted) !important;
  font-size: 0.875rem !important;
}

/* Marka adi giris kartinin ustunde nefes alsin */
.fi-simple-layout .fi-logo {
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: var(--crm-text-strong) !important;
  margin-bottom: 0.25rem !important;
}

.fi-simple-main .fi-btn {
  width: 100% !important;
  justify-content: center !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

html.dark .fi-simple-layout {
  background-color: #0f1923 !important;
  background-image: radial-gradient(
    circle,
    rgba(45, 212, 191, 0.05) 1.2px,
    transparent 1.2px
  ) !important;
}

html.dark .fi-simple-main {
  background: #18232f !important;
  border-color: #2a3a4a !important;
}

html.dark .fi-simple-header-heading,
html.dark .fi-simple-layout .fi-logo {
  color: #e8edf2 !important;
}

/* ══════════════════════════════════════════════
   24 · MOBIL / DAR EKRAN
   ──────────────────────────────────────────────
   Tema 776 satir boyunca tek bir kirilim noktasi tanimlamamisti; masaustu
   varsayilarak yazilmisti. Filament'in kendi kurallari 64rem'in ALTINDA
   kapali kenar cubugunu ekran disina tasir (`translate: -100%`), 64rem'in
   USTUNDE ise `sidebarCollapsibleOnDesktop` icin ikon seridi olarak yerinde
   birakir (`position: sticky`).

   Dar ekranda kapali menunun icerigin ustunde kalmasi bu ayrimin bozulmasi
   demek. Asagidaki kurallar Filament'in ZATEN amacladigi davranisi dar
   ekranda acikca dayatir: kapaliyken ne yer kaplar ne de tiklamayi yakalar.
   Kurallar yalnizca 64rem altinda gecerli, masaustu seridine dokunmaz.
══════════════════════════════════════════════ */

@media (max-width: 63.9375rem) {
  /* Kapali kenar cubugu: yer kaplamaz, tiklamayi yakalamaz, icerigi ortmez. */
  .fi-sidebar:not(.fi-sidebar-open) {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border-right-width: 0 !important;
  }

  /* Icerik dar ekranda tam genislik kullanir. */
  .fi-main-ctn {
    padding-inline-start: 0 !important;
  }

  .fi-main {
    max-width: 100% !important;
  }

  /* Menuyu acan buton her zaman gorunur ve ulasilabilir olmali;
     kullanicinin bildirdigi "menu genisletme tam gorunmuyor" buydu. */
  .fi-topbar {
    position: relative !important;
    z-index: 40 !important;
  }

  .fi-topbar-open-sidebar-btn,
  .fi-topbar-close-sidebar-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }

  /* Masaustune ozgu daraltma dugmeleri dar ekranda anlamsiz. */
  .fi-topbar-collapse-sidebar-btn-ctn,
  .fi-topbar-open-collapse-sidebar-btn,
  .fi-topbar-close-collapse-sidebar-btn {
    display: none !important;
  }

  /* Acikken kenar cubugu icerigin ustune binen bir katman olarak durur. */
  .fi-sidebar.fi-sidebar-open {
    z-index: 40 !important;
    pointer-events: auto !important;
  }

  /* Dar ekranda sayfa kenar boslugu daralsin — icerik nefes alsin. */
  .fi-page {
    padding: 0.875rem !important;
  }

  /* Genis tablolar sayfayi yatay kaydirmaya zorlamasin. */
  .fi-ta-ctn {
    overflow-x: auto !important;
  }
}