/* ============================================================================
   TEMA SİSTEMİ
   ----------------------------------------------------------------------------
   Renkler doğrudan yazılmaz; hepsi aşağıdaki token'lardan okunur. Yeni bir tema
   eklemek = yeni bir [data-theme="..."] bloğunda yalnızca token DEĞERLERİNİ
   yeniden tanımlamak. Kural dosyanın geri kalanına dokunulmaz.

   Tema ve yoğunluk <html> üzerinde iki öznitelikle taşınır:
     <html data-theme="acik|koyu|kurumsal" data-density="normal|kompakt">
   Değerler localStorage'da tutulur (hkts.tema / hkts.yogunluk) ve <head> içindeki
   küçük script tarafından CSS'ten ÖNCE uygulanır — aksi halde sayfa önce açık
   temayla çizilip koyuya atlıyor.

   DİKKAT: Yeni bir renk eklerken önce buraya token olarak ekle. Kural içine sabit
   hex yazarsan o öğe koyu temada açık temanın rengiyle kalır.
   ========================================================================== */

:root {
    /* --- marka --- */
    --hkts-primary: #22b8c6;
    --hkts-primary-dark: #0c8390;
    --hkts-primary-light: #e0f7fa;
    --hkts-primary-soft: #f1fbfc;

    /* Renkli zemin üzerindeki yazı. Temaya göre değişmez: turkuaz butonun
       üstündeki yazı koyu temada da beyaz kalmalı. */
    --hkts-on-primary: #ffffff;

    /* --- durum renkleri --- */
    --hkts-success: #1abc9c;
    --hkts-info: #00cfe8;
    --hkts-warning: #ff9f43;
    --hkts-danger: #ea5455;

    /* Rozet ve ikon zeminleri. Koyu temada açık pastel yerine koyu tint olur. */
    --hkts-success-soft: #d6f5ec;
    --hkts-info-soft: #d2f5fb;
    --hkts-warning-soft: #ffe9d4;
    --hkts-danger-soft: #fbd6d6;

    /* Tint zemin ÜZERİNDEKİ yazı. Ayrı token olmak zorunda: koyu temada tint
       koyulaşınca üstündeki koyu yazı okunamaz hale gelir. */
    --hkts-success-ink: #0e7d62;
    --hkts-info-ink: #07879b;
    --hkts-warning-ink: #b45f09;
    --hkts-danger-ink: #b53a3b;

    /* --- yüzeyler --- */
    --hkts-body-bg: #f5f8fa;
    --hkts-card-bg: #ffffff;
    --hkts-surface: #ffffff;      /* kart, açılır menü, input zemini */
    --hkts-surface-2: #eef1f4;    /* ikincil dolgu, nötr rozet */

    /* --- çizgi ve gölge --- */
    --hkts-border: #e6ecf0;
    --hkts-border-soft: #f0f3f6;
    --hkts-shadow: rgba(31,45,61,.06);
    --hkts-shadow-lg: rgba(31,45,61,.14);

    /* --- yazı --- */
    --hkts-text: #6b7785;
    --hkts-heading: #1f2d3d;
    --hkts-muted: #9aa5b1;
    --hkts-dark: #1f2d3d;

    /* --- kabuk --- */
    --hkts-sidebar-bg: #ffffff;
    --hkts-sidebar-text: #5f6b78;
    --hkts-sidebar-active: #22b8c6;
    --hkts-topbar-bg: #ffffff;
    --hkts-avatar-bg: #d8dee3;

    /* Girdi cercevesi kart ayracindan KOYU olmali; --hkts-border ile ayni
       yapilinca alanlar cercevesiz gorunuyordu. */
    --hkts-input-border: #cbd5da;
    --hkts-input-h: 42px;
    --hkts-focus-ring: rgba(34,184,198,.18);
    --hkts-select-ok: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236C7F85' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

    /* Tablo başlığı ayrı token: koyu temada gövdeyle aynı renge düşerse
       başlık satırı kaybolur. */
    --hkts-table-head-bg: #1f2d3d;
    --hkts-table-head-text: #ffffff;

    /* --- ölçüler --- */
    --hkts-sidebar-width: 240px;
    --hkts-sidebar-collapsed: 76px;

    /* Yoğunluk token'ları: kompakt mod yalnızca bunları değiştirir. */
    --hkts-content-pad: 26px 30px;
    --hkts-card-pad: 24px;
    --hkts-card-gap: 22px;
    --hkts-row-pad: 13px 14px;
    --hkts-table-font: 13.5px;
}

/* ---------------------------------------------------------------- KOYU TEMA */
[data-theme="koyu"] {
    --hkts-primary: #2fc9d7;
    --hkts-primary-dark: #7ae0ea;   /* koyu zeminde "dark" = daha AÇIK olmalı */
    --hkts-primary-light: #13363c;
    --hkts-primary-soft: #163035;

    --hkts-success: #35d1ae;
    --hkts-info: #38d9ef;
    --hkts-warning: #ffb066;
    --hkts-danger: #ff7b7b;

    --hkts-success-soft: #12332c;
    --hkts-info-soft: #10323a;
    --hkts-warning-soft: #3a2a17;
    --hkts-danger-soft: #3a1f1f;

    --hkts-success-ink: #6fd9b8;
    --hkts-info-ink: #6fd8ea;
    --hkts-warning-ink: #ffc98a;
    --hkts-danger-ink: #ff9a9a;

    --hkts-body-bg: #11171c;
    --hkts-card-bg: #1a222a;
    --hkts-surface: #1a222a;
    --hkts-surface-2: #232d36;

    --hkts-border: #2b3740;
    --hkts-border-soft: #232d36;
    --hkts-shadow: rgba(0,0,0,.35);
    --hkts-shadow-lg: rgba(0,0,0,.5);

    --hkts-text: #96a4ae;
    --hkts-heading: #e7eef2;
    --hkts-muted: #74838e;
    /* Vurgu ZEMİNİ (üstünde beyaz yazı durur), koyu yazı değil.
       Koyu temada da koyu kalmak zorunda; açık renge çevrilirse
       beyaz yazı okunamaz hale gelir. */
    --hkts-dark: #2f3d47;

    --hkts-sidebar-bg: #151c22;
    --hkts-sidebar-text: #97a5af;
    --hkts-topbar-bg: #151c22;
    --hkts-avatar-bg: #2f3b45;

    --hkts-input-border: #3b4750;
    --hkts-focus-ring: rgba(47,201,215,.25);
    --hkts-select-ok: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2396A4AE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

    --hkts-table-head-bg: #232d36;
    --hkts-table-head-text: #e7eef2;

    color-scheme: dark;
}

/* ----------------------------------------------------------- KURUMSAL TEMA */
/* Lacivert marka, ılık nötr zemin. Kliniğin kendi kurumsal rengine
   uyarlanmak istendiğinde değiştirilecek blok burasıdır. */
[data-theme="kurumsal"] {
    --hkts-primary: #2f4b7c;
    --hkts-primary-dark: #1d3159;
    --hkts-primary-light: #e2e8f3;
    --hkts-primary-soft: #f2f5fa;

    --hkts-success: #2f7d5f;
    --hkts-info: #3a6ea5;
    --hkts-warning: #c1762a;
    --hkts-danger: #b23a3a;

    --hkts-success-soft: #e2efe9;
    --hkts-info-soft: #e3ecf5;
    --hkts-warning-soft: #f6e9d9;
    --hkts-danger-soft: #f5e2e2;

    --hkts-success-ink: #23624b;
    --hkts-info-ink: #2c5580;
    --hkts-warning-ink: #8f571f;
    --hkts-danger-ink: #8c2c2c;

    --hkts-body-bg: #f4f4f2;
    --hkts-card-bg: #ffffff;
    --hkts-surface: #ffffff;
    --hkts-surface-2: #eceded;

    --hkts-border: #e0e1e0;
    --hkts-border-soft: #eceded;

    --hkts-text: #5d6670;
    --hkts-heading: #1d2733;
    --hkts-muted: #929aa3;
    --hkts-dark: #1d3159;

    --hkts-sidebar-bg: #ffffff;
    --hkts-sidebar-text: #5d6670;
    --hkts-topbar-bg: #ffffff;
    --hkts-avatar-bg: #ced5e2;

    --hkts-input-border: #c4c9cd;
    --hkts-focus-ring: rgba(47,75,124,.18);
    --hkts-select-ok: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235D6670' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

    --hkts-table-head-bg: #1d3159;
    --hkts-table-head-text: #ffffff;
}

/* ------------------------------------------------------------ KOMPAKT MOD */
/* Yalnızca ölçü token'larını değiştirir; renkle ilgisi yok, her temayla
   birlikte çalışır. Hasta listesinde ekrana yaklaşık 4-5 satır daha sığar. */
[data-density="kompakt"] {
    --hkts-content-pad: 14px 18px;
    --hkts-card-pad: 15px;
    --hkts-card-gap: 12px;
    --hkts-row-pad: 7px 10px;
    --hkts-table-font: 12.5px;
    --hkts-sidebar-width: 210px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', 'Inter', Tahoma, sans-serif;
    background: var(--hkts-body-bg);
    color: var(--hkts-text);
    font-size: 14px;
}

a { color: var(--hkts-primary); text-decoration: none; }
a:hover { color: var(--hkts-primary-dark); }

/* ================= LAYOUT ================= */
.layout {
    display: flex;
    min-height: 100vh;
}

/* ================= SIDEBAR ================= */
.sidebar {
    width: var(--hkts-sidebar-width);
    background: var(--hkts-sidebar-bg);
    border-right: 1px solid var(--hkts-border);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
    z-index: 100;
    transition: width .25s ease;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    font-size: 20px;
    font-weight: 700;
    color: var(--hkts-heading);
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar .brand .logo { width: 30px; height: 30px; flex-shrink: 0; }
.sidebar .brand .brand-text { transition: opacity .2s; }

.sidebar nav { padding: 14px 14px; }
.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    color: var(--hkts-sidebar-text);
    border-radius: 8px;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    transition: background .2s, color .2s;
}
.sidebar nav a:hover {
    background: var(--hkts-primary-soft);
    color: var(--hkts-primary-dark);
}
.sidebar nav a.active {
    background: var(--hkts-primary-light);
    color: var(--hkts-primary-dark);
    font-weight: 600;
}
.sidebar nav a i {
    width: 22px;
    font-size: 16px;
    text-align: center;
    color: inherit;
    flex-shrink: 0;
}
.sidebar nav a.active i { color: var(--hkts-primary); }
.sidebar nav a .label { transition: opacity .2s; }

/* Collapsed sidebar */
.layout.collapsed .sidebar { width: var(--hkts-sidebar-collapsed); }
.layout.collapsed .sidebar .brand { justify-content: center; padding: 18px 12px; }
.layout.collapsed .sidebar .brand .brand-text { display: none; }
.layout.collapsed .sidebar nav a { justify-content: center; padding: 11px 0; }
.layout.collapsed .sidebar nav a .label { display: none; }
.layout.collapsed .main { margin-left: var(--hkts-sidebar-collapsed); }

/* ================= MAIN ================= */
.main {
    margin-left: var(--hkts-sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: margin-left .25s ease;
}

/* ================= TOPBAR ================= */
.topbar {
    background: var(--hkts-topbar-bg);
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 26px;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--hkts-border);
}

.sidebar-toggle {
    background: transparent;
    color: var(--hkts-heading);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-toggle:hover { background: var(--hkts-primary-soft); color: var(--hkts-primary-dark); }

.topbar .spacer { flex: 1; }

.topbar-araclar .icon-btn {
    background: var(--hkts-primary-light);
    color: var(--hkts-primary-dark);
    border: none;
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    text-decoration: none;
    flex: 0 0 auto;
    transition: background .15s, color .15s;
}
.topbar-araclar .icon-btn:hover { background: var(--hkts-primary); color: var(--hkts-on-primary); }

/* Üst çubuğa taşınan sayfa başlığı (_Layout "Topbar" bölümü). Kart başlığın
   çubuğa sığan hali: küçük yuvarlak simge, tek satır başlık, alt satırda
   açıklama. Dar ekranda açıklama düşer, başlık tek satırda kısalır. */
.topbar-baslik {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.topbar-baslik .simge {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hkts-success-soft);
    color: var(--hkts-success-ink);
    font-size: 20px;
    flex: 0 0 auto;
}
.topbar-baslik .metin { min-width: 0; }
.topbar-baslik h1 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: var(--hkts-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-baslik p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--hkts-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Değerlendirme uyarısı: başlıkla simgeler arasındaki boşluğa oturan hap.
   Tamamı tıklanabilir (yoğun sohbet süzgeci); ayrıntı dökümü title'da. */
.topbar-uyari {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 18px;
    padding: 6px 6px 6px 12px;
    border-radius: 999px;
    background: var(--hkts-danger-soft);
    color: var(--hkts-danger-ink);
    border: 1px solid var(--hkts-border);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    transition: background .15s;
}
.topbar-uyari:hover { background: var(--hkts-danger); color: var(--hkts-on-primary); }
.topbar-uyari .sayi { font-weight: 700; }
.topbar-uyari .metin { overflow: hidden; text-overflow: ellipsis; }
.topbar-uyari .eylem {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--hkts-danger); color: var(--hkts-on-primary);
    font-size: 12px; font-weight: 600;
}
.topbar-uyari:hover .eylem { background: var(--hkts-danger-ink); }

.topbar-araclar .user {
    display: flex; align-items: center; gap: 12px;
    padding: 0 6px;
}
.topbar-araclar .user .info { line-height: 1.15; text-align: right; }
.topbar-araclar .user .info .name { font-weight: 600; color: var(--hkts-heading); font-size: 14px; }
.topbar-araclar .user .info .role { font-size: 12px; color: var(--hkts-text); }
.topbar-araclar .user .avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--hkts-avatar-bg);
    color: var(--hkts-on-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
    border: 2px solid var(--hkts-primary-light);
    overflow: hidden;
}
.topbar-araclar .settings-btn {
    background: transparent;
    border: none;
    color: var(--hkts-text);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    text-decoration: none;
    display: inline-flex; align-items: center;
}
.topbar-araclar .settings-btn:hover { color: var(--hkts-primary-dark); }

/* Ayarlar açılır menüsü */
.topbar-araclar .settings-menu { position: relative; }
.topbar-araclar .settings-dropdown {
    display: none;
    position: absolute;
    right: 0; top: calc(100% + 8px);
    min-width: 210px;
    background: var(--hkts-surface);
    border: 1px solid var(--hkts-border);
    border-radius: 10px;
    box-shadow: 0 8px 28px var(--hkts-shadow-lg);
    padding: 6px;
    z-index: 500;
}
.topbar-araclar .settings-dropdown.show { display: block; }
.topbar-araclar .settings-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    color: var(--hkts-heading);
    text-decoration: none;
    font-size: 13.5px;
    white-space: nowrap;
}
.topbar-araclar .settings-dropdown a:hover { background: var(--hkts-primary-light); color: var(--hkts-primary-dark); }
.topbar-araclar .settings-dropdown a i { width: 16px; text-align: center; color: var(--hkts-text); }
.topbar-araclar .settings-dropdown a:hover i { color: var(--hkts-primary-dark); }
.topbar-araclar .settings-dropdown .sep { height: 1px; background: var(--hkts-border); margin: 6px 4px; }

/* ================= CONTENT ================= */
.content { padding: var(--hkts-content-pad); }

.card {
    background: var(--hkts-card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--hkts-shadow);
    padding: var(--hkts-card-pad);
    margin-bottom: var(--hkts-card-gap);
    border: 1px solid var(--hkts-border-soft);
}
.card h1, .card h2, .card h3 { color: var(--hkts-heading); margin: 0 0 6px 0; }

/* greeting */
.greeting {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(118deg, var(--hkts-primary-soft), var(--hkts-surface) 70%);
    overflow: hidden;
    padding: 28px 32px;
}
.greeting .text h1 { font-size: 26px; font-weight: 700; }
.greeting .text p { margin: 6px 0 0; color: var(--hkts-text); }
.greeting .text strong { color: var(--hkts-primary-dark); }
.greeting .illu {
    width: 280px; height: 160px;
    background: url("/images/dashboard.svg") center/contain no-repeat;
    flex-shrink: 0;
}

/* stats */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hkts-card-gap);
    margin-bottom: var(--hkts-card-gap);
}

/* Kart iki sütun: solda ikon, sağda yazılar. İkon önceden yazıların ÜSTÜNDE
   duruyordu; dördü yan yana gelince kartlar gereksiz uzuyor ve içleri boş
   kalıyordu. Yan yana dizilim aynı bilgiyi yarı yüksekliğe sığdırıyor. */
.stat-card {
    background: var(--hkts-surface);
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--hkts-shadow);
    padding: var(--hkts-card-pad);
    border: 1px solid var(--hkts-border-soft);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    align-content: center;
}
.stat-card .icon {
    width: 46px; height: 46px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;

    /* İkon üç yazı satırının tamamı boyunca uzanır ve ortalanır. */
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
}
.stat-card .label,
.stat-card .value,
.stat-card .delta { grid-column: 2; }
.stat-card .icon.purple { background: var(--hkts-primary-light); color: var(--hkts-primary-dark); }
.stat-card .icon.green  { background: var(--hkts-success-soft); color: var(--hkts-success); }
.stat-card .icon.cyan   { background: var(--hkts-info-soft); color: var(--hkts-info); }
.stat-card .icon.orange { background: var(--hkts-warning-soft); color: var(--hkts-warning); }
.stat-card .icon.red    { background: var(--hkts-danger-soft); color: var(--hkts-danger); }
.stat-card .label { color: var(--hkts-text); font-size: 13.5px; }
.stat-card .value {
    font-size: 30px; font-weight: 700; color: var(--hkts-heading);
    margin: 2px 0 6px; letter-spacing: -.5px;
}
.stat-card .delta {
    color: var(--hkts-success); font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 4px;

    /* Dört kart yan yanayken sütun daralıyor; "12.5% vs önceki ay" tek satıra
       sığmazsa taşmak yerine alt satıra insin. */
    flex-wrap: wrap;
}
.stat-card .delta.down { color: var(--hkts-danger); }
.stat-card .delta .muted { color: var(--hkts-text); font-weight: 500; margin-left: 2px; }

/* table */
.table {
    width: 100%; border-collapse: collapse;
    font-size: var(--hkts-table-font);
}
.table th, .table td {
    padding: var(--hkts-row-pad);
    text-align: left;
    border-bottom: 1px solid var(--hkts-border);
}
.table thead th {
    background: var(--hkts-table-head-bg);
    color: var(--hkts-table-head-text);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .4px;
    border-bottom: none;
}
.table thead th:first-child { border-top-left-radius: 8px; }
.table thead th:last-child { border-top-right-radius: 8px; }
.table tbody tr:hover { background: var(--hkts-primary-soft); }

/* badges */
.badge { display:inline-block; padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight:600; }
.badge.success { background: var(--hkts-success-soft); color: var(--hkts-success); }
.badge.warn    { background: var(--hkts-warning-soft); color: var(--hkts-warning); }
.badge.danger  { background: var(--hkts-danger-soft); color: var(--hkts-danger); }
.badge.info    { background: var(--hkts-info-soft); color: var(--hkts-info); }
.badge.primary { background: var(--hkts-primary-light); color: var(--hkts-primary-dark); }
.badge.gray    { background:var(--hkts-surface-2); color:var(--hkts-text); }

/* buttons */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    border-radius: 8px; border: 1px solid transparent;
    font-weight: 600; cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    font-size: 13px;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn.primary { background: var(--hkts-primary); color: var(--hkts-on-primary); }
.btn.primary:hover { background: var(--hkts-primary-dark); }
.btn.success { background: var(--hkts-success); color: var(--hkts-on-primary); }
.btn.danger  { background: var(--hkts-danger); color: var(--hkts-on-primary); }
.btn.warn    { background: var(--hkts-warning); color: var(--hkts-on-primary); }
.btn.info    { background: var(--hkts-info); color: var(--hkts-on-primary); }
.btn.dark    { background: var(--hkts-dark); color: var(--hkts-on-primary); }
.btn.light   { background: var(--hkts-surface); color: var(--hkts-text); border-color: var(--hkts-border); }
.btn.icon    { padding: 7px 9px; }

/* form */
.form-row { margin-bottom: 14px; }
.form-row label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--hkts-heading); font-size: 13px; }
.form-control,
select, textarea,
/* type belirtilmemiş input'lar da stillensin: <input name="q" /> gibi alanlar
   aksi halde tarayıcı varsayılanıyla, çıplak görünüyordu. */
input:not([type]),
input[type=text], input[type=date], input[type=email], input[type=search],
input[type=password], input[type=number], input[type=tel], input[type=color],
input[type=datetime-local], input[type=time], input[type=url] {
    width: 100%;
    /* Sabit yükseklik: metin kutusu, tarih ve açılır liste aynı satırda farklı
       yükseklikte duruyordu (tarayıcı her birine kendi iç dolgusunu veriyor). */
    min-height: var(--hkts-input-h);
    padding: 10px 12px;
    border-radius: 8px;
    /* Ayrı token: --hkts-border kart ayracı için doğru ama girdi çerçevesi olarak
       neredeyse görünmüyordu; alanlar kenarlıksız gri şeritler gibi duruyordu. */
    border: 1px solid var(--hkts-input-border);
    font-family: inherit; font-size: 13.5px;
    background: var(--hkts-surface);
    color: var(--hkts-heading);
    transition: border-color .15s, box-shadow .15s;
}
input[type=color] { padding: 4px; height: var(--hkts-input-h); }
textarea { min-height: 80px; resize: vertical; }

/* Açılır listeler tarayıcının kendi görünümüyle çiziliyor ve metin kutularının
   yanında farklı duruyordu. Yerel ok gizlenip ortak bir ok konuyor; ok rengi
   temaya göre değiştiği için görsel her temada ayrı tanımlı. */
select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: var(--hkts-select-ok);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px;
}
select::-ms-expand { display: none; }

.form-control:focus, select:focus, textarea:focus, input:focus {
    outline: none;
    border-color: var(--hkts-primary);
    box-shadow: 0 0 0 3px var(--hkts-focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--hkts-muted); }
input:disabled, select:disabled, textarea:disabled {
    background: var(--hkts-surface-2);
    color: var(--hkts-muted);
    cursor: not-allowed;
}

.option-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--hkts-border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all .15s;
    background: var(--hkts-surface);
}
.option-row:hover { border-color: var(--hkts-primary); }
.option-row input[type=radio], .option-row input[type=checkbox] { margin: 0; accent-color: var(--hkts-primary); }
.option-row.selected { border-color: var(--hkts-primary); background: var(--hkts-primary-soft); color: var(--hkts-primary-dark); }

.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.grid-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px; }

.option-grid {
    display: grid;
    /* auto-fit: bos parca birakmaz. auto-fill ile 3 secenek satirin sonuna
       yetismiyor, sagda bos alan kaliyordu. */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}
.option-grid .option-row { margin-bottom: 0; }

/* İçeriğe göre orantılı form satırları */
.frow { display: grid; gap: 16px; align-items: start; }
.frow-name-phone { grid-template-columns: 2fr 1fr; }
.frow-birth-age-job { grid-template-columns: 1.2fr 90px 1.6fr; }
.frow-mail-gender { grid-template-columns: 1fr 1.6fr; }
/* Segment eklenince dördüncü alan alt satıra düşüyordu; dördü de tek satırda.
   Grup en geniş pay: "Randevu Grubu (Pasif)" gibi uzun adlar kesilmesin. */
.frow-date-group-segment-loc { grid-template-columns: 180px 1.6fr 1fr 1.2fr; }
.frow-tags-wanted { grid-template-columns: 2fr 1fr; }

@media (max-width: 760px) {
    .grid-2, .grid-3,
    .frow-name-phone, .frow-birth-age-job, .frow-mail-gender,
    .frow-date-group-segment-loc, .frow-tags-wanted {
        grid-template-columns: 1fr;
    }
}

.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs .tab {
    padding: 8px 18px;
    border-radius: 100px;
    background: var(--hkts-surface); border: 1px solid var(--hkts-border);
    cursor: pointer; font-size: 13px; font-weight: 600; color: var(--hkts-text);
}
.tabs .tab.active { background: var(--hkts-primary); color: var(--hkts-on-primary); border-color: var(--hkts-primary); }

.form-elements-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.form-elements-tabs .tab {
    padding: 8px 18px;
    border-radius: 100px;
    background: var(--hkts-surface); border: 1px solid var(--hkts-border);
    cursor: pointer; font-size: 13px; font-weight: 600; color: var(--hkts-text);
    text-decoration: none;
}
.form-elements-tabs .tab:hover { border-color: var(--hkts-primary); color: var(--hkts-primary); }
.form-elements-tabs .tab.active { background: var(--hkts-primary); color: var(--hkts-on-primary); border-color: var(--hkts-primary); }

.filter-cards {
    display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-bottom: 18px;
}
.filter-card {
    background: var(--hkts-surface);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 12px var(--hkts-shadow);
    cursor: pointer;
    transition: all .15s;
    border: 2px solid transparent;
    text-decoration: none;
}
.filter-card:hover { transform: translateY(-2px); }
.filter-card.active { border-color: var(--hkts-primary); }
.filter-card .icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--hkts-primary-light); color: var(--hkts-primary-dark);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 10px; font-size: 16px;
}
.filter-card .label { font-size: 12px; color: var(--hkts-text); letter-spacing: .3px; }
.filter-card .num { font-weight: 700; color: var(--hkts-heading); font-size: 22px; }

.search-bar {
    display: flex; gap: 10px;
    margin-bottom: 18px;
}
.search-bar input { flex: 1; }

.priority-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; }

.alert {
    padding: 12px 16px; border-radius: 8px; margin-bottom: 14px;
    border: 1px solid transparent;
}
.alert.success { background: var(--hkts-success-soft); color: var(--hkts-success-ink); border-color: var(--hkts-border); }
.alert.danger  { background: var(--hkts-danger-soft); color: var(--hkts-danger-ink); border-color: var(--hkts-border); }
.alert.info    { background: var(--hkts-info-soft); color: var(--hkts-info-ink); border-color: var(--hkts-border); }

.optional-alert {
    background: linear-gradient(90deg, var(--hkts-primary-light) 0%, var(--hkts-primary-light) 100%);
    border: 2px solid var(--hkts-primary);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--hkts-primary-dark);
    font-size: 14px;
}
.optional-alert i {
    font-size: 22px;
    color: var(--hkts-primary);
}
.optional-alert strong {
    color: var(--hkts-heading);
}

.form-section { margin-bottom: 22px; }
.form-section > .section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700;
    color: var(--hkts-heading);
    padding-bottom: 8px; margin-bottom: 14px;
    border-bottom: 2px solid var(--hkts-primary);
}
.form-section > .section-title i { color: var(--hkts-primary); }

.collapsible {
    border: 1px solid var(--hkts-border); border-radius: 10px;
    margin-bottom: 22px; background: var(--hkts-primary-soft);
}
.collapsible > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px; font-weight: 700;
    color: var(--hkts-heading);
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary i.fa-chevron-down { margin-left: auto; transition: transform .2s; color: var(--hkts-primary); }
.collapsible[open] > summary i.fa-chevron-down { transform: rotate(180deg); }
.collapsible > summary .badge-opt {
    font-size: 12px; font-weight: 600;
    background: var(--hkts-primary-light); color: var(--hkts-primary-dark);
    padding: 2px 8px; border-radius: 10px;
}
.collapsible .collapsible-body { padding: 0 18px 16px; }

.kanban {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.kanban .col {
    background: var(--hkts-surface); border-radius: 12px; padding: 14px;
    box-shadow: 0 2px 12px var(--hkts-shadow);
}

.list-group .item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; border: 1px solid var(--hkts-border);
    border-radius: 8px; margin-bottom: 8px; background: var(--hkts-surface);
}

.item-list { background: var(--hkts-surface); border-radius: 8px; }
.item-row { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--hkts-border); }
.item-row:last-child { border-bottom: none; }
.item-row .number { color: var(--hkts-text); min-width: 30px; }
.item-row .content { flex: 1; color: var(--hkts-heading); }
.item-row .actions { display: flex; gap: 6px; }
.item-row .actions button { width: 30px; height: 30px; border: none; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.item-row .actions .edit-btn { background: var(--hkts-primary-light); color: var(--hkts-primary); }
.item-row .actions .delete-btn { background: var(--hkts-danger-soft); color: var(--hkts-danger); }
.item-row .actions .up-btn, .item-row .actions .down-btn { background: var(--hkts-surface-2); color: var(--hkts-text); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; z-index: 999; }
.modal-backdrop.show { display: flex; }
.modal {
    background: var(--hkts-surface); border-radius: 12px; padding: 22px; width: 92%; max-width: 540px;
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.modal h3 { margin: 0 0 12px 0; }
.modal .actions { display:flex; justify-content:flex-end; gap:8px; margin-top: 14px; }

/* Dört kart yan yana yalnızca yeterli genişlikte okunur. Daha darda hem başlık
   ("Yeni Hastalar") hem değişim yazısı ("12.5% vs önceki ay") sarmaya başlayıp
   kartları uzatıyor; o noktada ikişerli düzen daha derli toplu. */
@media (max-width: 1280px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
    .filter-cards { grid-template-columns: repeat(2,1fr); }
    .greeting .illu { width: 200px; height: 130px; }
}
@media (max-width: 720px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s; }
    .layout.mobile-open .sidebar { transform: translateX(0); }
    .main { margin-left: 0 !important; }
    .stats, .filter-cards { grid-template-columns: 1fr; }
    .greeting .illu { display: none; }
}

.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(118deg, var(--hkts-primary-light), var(--hkts-body-bg));
}
.login-box {
    background: var(--hkts-surface); border-radius: 14px; padding: 34px;
    width: 380px;
    box-shadow: 0 18px 50px var(--hkts-shadow-lg);
    border: 1px solid var(--hkts-border);
}
.login-box .brand {
    display:flex; align-items:center; gap: 10px; justify-content: center; margin-bottom: 18px;
    color: var(--hkts-heading); font-size: 24px; font-weight: 700;
}

.cell-truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fc-event { cursor: pointer; }

/* ================= Patient details ================= */
.patient-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.back-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.back-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--hkts-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hkts-heading);
    background: var(--hkts-surface);
}
.title-group h1 {
    margin: 0;
    color: var(--hkts-heading);
    font-size: 28px;
}
.title-group p {
    margin: 4px 0 0;
    color: var(--hkts-text);
}

.patient-profile-card,
.info-card,
.flow-card,
.detail-tabs-card {
    background: var(--hkts-surface);
    border: 1px solid var(--hkts-border-soft);
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--hkts-shadow);
    margin-bottom: 18px;
}

.patient-profile {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--hkts-border);
}
.patient-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #4f46e5;
    color: var(--hkts-on-primary);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.patient-info h2 { margin: 0; color: var(--hkts-heading); }
.patient-meta { display: flex; gap: 10px; margin-top: 6px; align-items: center; }
.status-badge.active { background: var(--hkts-success-soft); color: var(--hkts-success-ink); padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.status-badge.inactive { background: var(--hkts-surface-2); color: var(--hkts-text); padding: 3px 10px; border-radius: 999px; font-size: 12px; }

.tags-section { padding: 14px 20px 18px; }
.tags-section .label { color: var(--hkts-heading); font-weight: 600; margin-bottom: 8px; }
.tags-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag.green { background: var(--hkts-primary-light); color: var(--hkts-primary-dark); border-radius: 999px; padding: 4px 10px; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }

.info-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.info-card-header,
.flow-card-header,
.detail-tabs-header {
    background: var(--hkts-heading);
    color: var(--hkts-on-primary);
    font-weight: 600;
    padding: 10px 14px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.info-card-body { padding: 14px 16px; }
.info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hkts-border);
}
.info-row .label { color: var(--hkts-text); }
.info-row .value { color: var(--hkts-heading); font-weight: 500; }

.priority-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}
.priority-indicator.high { background: #ea5455; }
.priority-indicator.medium { background: #ff9f43; }
.priority-indicator.low { background: #28c76f; }

/* --- Etkileşim akışı (hasta detayı) ---------------------------------------
   Etkileşim geçmişinin tek gösterimi. Satır düzeni bilinçli olarak sabit:
   tarih/saat → tip → giriş yapan → not → aksiyon tarihi. */
.flow-card-header { background: var(--hkts-primary); }
.flow-card-header .flow-count { font-weight: 500; font-size: 12px; opacity: .8; }

/* Aksiyon butonları sağda: göz önce akışı okur, butonlar ikincil. */
.flow-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hkts-border);
}

.flow-empty {
    padding: 26px 16px;
    text-align: center;
    color: var(--hkts-text);
}
.flow-empty i { display: block; font-size: 22px; margin-bottom: 8px; opacity: .5; }

.flow-table-wrap { overflow-x: auto; }
/* Sabit yüzdeli kolonlar: içeriğe göre daralıp sola yığılmasınlar, genişliğe
   eşit dağılsınlar. table-layout:fixed olmadan uzun not diğerlerini eziyordu. */
.flow-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.flow-table th {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hkts-text);
    background: var(--hkts-primary-soft);
    padding: 9px 14px;
    border-bottom: 1px solid var(--hkts-border);
    white-space: nowrap;
}
.flow-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--hkts-border-soft);
    vertical-align: middle;
}
.flow-table tbody tr:last-child td { border-bottom: none; }
.flow-table tbody tr:hover { background: var(--hkts-primary-soft); }

/* Tarih ve saat tek satırda — iki satıra bölmek satır yüksekliğini boş yere artırıyordu. */
.flow-time { white-space: nowrap; }
.flow-time strong { color: var(--hkts-heading); font-weight: 600; }
.flow-time span { color: var(--hkts-text); font-size: 12px; margin-left: 5px; }
.flow-source { color: var(--hkts-text); white-space: nowrap; }
.flow-note { color: var(--hkts-heading); overflow-wrap: anywhere; }
.flow-note .muted, .flow-target .muted { color: var(--hkts-muted); }
.flow-note .flow-move {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--hkts-text);
}
.flow-target { color: var(--hkts-heading); font-weight: 500; white-space: nowrap; }
.flow-target i { color: var(--hkts-text); margin-right: 4px; }

/* Etkileşim tipi rozeti. Renk sınıfı EtkilesimRenkleri.Sinif() ile üretilir. */
.flow-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
}
.flow-chip.ok      { background: var(--hkts-success-soft); color: var(--hkts-success-ink); border-color: var(--hkts-border); }
.flow-chip.wait    { background: var(--hkts-warning-soft); color: var(--hkts-warning-ink); border-color: var(--hkts-border); }
.flow-chip.info    { background: var(--hkts-info-soft); color: var(--hkts-info-ink); border-color: var(--hkts-border); }
.flow-chip.bad     { background: var(--hkts-danger-soft); color: var(--hkts-danger-ink); border-color: var(--hkts-border); }
.flow-chip.neutral { background: var(--hkts-surface-2); color: var(--hkts-text); border-color: var(--hkts-border); }

.flow-general-note {
    padding: 12px 16px;
    border-top: 1px solid var(--hkts-border);
    background: var(--hkts-surface);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.flow-general-note .label {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--hkts-text);
    margin-bottom: 5px;
}
.flow-general-note .text { color: var(--hkts-heading); white-space: pre-line; }

.detail-tabs-body { padding: 14px 16px; }
.tabs-section { display: flex; gap: 8px; }
.detail-tab {
    border: 1px solid rgba(255,255,255,.25);
    background: transparent;
    color: var(--hkts-on-primary);
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
}
.detail-tab.active { background: #3b82f6; border-color: #3b82f6; }
.detail-tab-content { display: none; }
.detail-tab-content.active { display: block; }
.dates-table { width: 100%; border-collapse: collapse; }
.dates-table th, .dates-table td { padding: 10px; border-bottom: 1px solid var(--hkts-border); text-align: left; }
.reference-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reference-item .label { font-size: 12px; color: var(--hkts-text); }
.reference-item .value { color: var(--hkts-heading); font-weight: 600; margin-top: 4px; }

/* ================= Interaction modal ================= */
.interaction-modal {
    width: 94%;
    max-width: 1120px;
    padding: 0;
    overflow: hidden;
}
.interaction-modal-header {
    background: #3f3ac8;
    color: var(--hkts-on-primary);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.interaction-modal-header h3 { margin: 0; }
.interaction-modal-header .subtitle { color: #d7dcff; font-size: 12px; margin-top: 4px; }
.interaction-modal .close-btn {
    background: transparent;
    color: var(--hkts-on-primary);
    border: none;
    cursor: pointer;
    font-size: 18px;
}
.interaction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 12px;
}
.panel-col {
    border: 1px solid var(--hkts-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--hkts-surface);
}
.panel-title {
    background: #4f46e5;
    color: var(--hkts-on-primary);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 10px;
}
.panel-body { padding: 10px; }
.panel-body.scroll {
    max-height: 300px;
    overflow-y: auto;
}
.char-count {
    margin-top: 8px;
    text-align: right;
    font-size: 12px;
    color: var(--hkts-text);
}
.interaction-modal .actions {
    padding: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid var(--hkts-border);
}

@media (max-width: 980px) {
    .info-cards-grid,
    .interaction-grid,
    .reference-info {
        grid-template-columns: 1fr;
    }
}

/* ================= Patient List Modern ================= */
.page-header-card {
    background: var(--hkts-surface);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px var(--hkts-shadow);
    border: 1px solid var(--hkts-border-soft);
}
.page-icon {
    font-size: 32px;
}
.page-title-group h1 {
    margin: 0;
    font-size: 24px;
    color: var(--hkts-heading);
}
.page-title-group p {
    margin: 4px 0 0;
    color: var(--hkts-text);
    font-size: 14px;
}

.filter-cards-modern {
    display: grid;
    /* Sabit 5 sütun yerine sığdığı kadar: Randevular ekranında 6 kart var. */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.filter-card-modern {
    background: var(--hkts-surface);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 12px var(--hkts-shadow);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.filter-card-modern:hover {
    transform: translateY(-2px);
    border-color: var(--hkts-primary-light);
}
.filter-card-modern.active {
    border-color: var(--hkts-primary);
    background: var(--hkts-primary-soft);
}
.fc-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--hkts-primary-light);
    color: var(--hkts-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.fc-content {
    flex: 1;
    min-width: 0;
}
.fc-label {
    font-size: 11px;
    color: var(--hkts-text);
    text-transform: uppercase;
    letter-spacing: .3px;
    font-weight: 600;
    margin-bottom: 6px;
}
.fc-big-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--hkts-heading);
    line-height: 1;
}
.fc-big-num span {
    font-size: 13px;
    color: var(--hkts-text);
    font-weight: 500;
}
.fc-nums {
    display: flex;
    gap: 16px;
}
.fc-num-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fc-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.fc-num.aktif { color: var(--hkts-primary); }
.fc-num.pasif { color: var(--hkts-danger); }
.fc-num-label {
    font-size: 10px;
    color: var(--hkts-text);
    margin-top: 4px;
    text-transform: uppercase;
}

.search-bar-modern {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
}
.search-input-wrap {
    flex: 1;
    position: relative;
}
.search-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hkts-text);
}
.search-input-wrap input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border-radius: 8px;
    border: 1px solid var(--hkts-border);
    font-size: 14px;
}
.table-info {
    font-size: 12px;
    color: var(--hkts-text);
    margin-bottom: 10px;
}
.table-responsive {
    overflow-x: auto;
}
.table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.table-modern thead th {
    background: var(--hkts-dark);
    color: var(--hkts-on-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .4px;
    padding: 14px 12px;
    text-align: left;
    white-space: nowrap;
}
.table-modern thead th:first-child { border-top-left-radius: 8px; }
.table-modern thead th:last-child { border-top-right-radius: 8px; }
.table-modern tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--hkts-border);
    vertical-align: middle;
}
.table-modern tbody tr:hover {
    background: var(--hkts-primary-soft);
}
.empty-row {
    text-align: center;
    color: var(--hkts-muted);
    padding: 40px !important;
}
.cell-center { text-align: center; }
.cell-truncate {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.priority-dot-lg {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

/* Öncelik artık ayrı bir sütun değil, adın solundaki nokta. */
.priority-dot-sm {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: 1px;
    flex-shrink: 0;
}

/* Hasta listesi sütun genişlikleri.
   Sıra: # / hasta / grup / etkileşim / hedef gün / kayıt günü / giriş / not / işlemler

   Yüzdeyle veriliyor: sabit piksel verildiğinde artan genişliğin TAMAMI esnek olan
   ad sütununa gidiyor, tablonun ortasında kocaman bir boşluk kalıp diğer sütunlar
   sağa yığılıyordu. Yüzdede her sütun ekranla birlikte büyüyor.
   table-layout:fixed yüzdeleri bağlayıcı yapar (içerik sütunu şişiremez) ve
   kesme/üç nokta düzgün çalışır; min-width dar ekranda ezilme yerine kaydırma verir. */
.table-hasta {
    table-layout: fixed;
    min-width: 1080px;
}
/* 8 sutun, toplam %100. "Kayit Gunu" ve "Doktor" sutunlari kaldirildi;
   bosalan yer okunabilirligi en cok artiran sutunlara dagitildi. */
/* 12 sutun, toplam %100. Sira numarasi sutunu kaldirildi. */
/* Uzun basliklar tasmasin: 12 sutunla "SON ETKILESIMI KIM YAPTI" gibi
   adlar nowrap ile hucresine sigmayip yan sutunun uzerine biniyordu.
   Basliklar artik sarar; alta hizalanir ki tek ve cift satirli basliklar
   ayni tabanda dursun. */
.table-hasta thead th {
    white-space: normal;
    vertical-align: bottom;
    line-height: 1.25;
}

/* 12 sutun dar ekranda ezilmesin: sigmiyorsa tablo yatay kayar. */
.table-hasta { min-width: 1180px; }

.table-hasta th:nth-child(1)  { width: 18%; }  /* hasta bilgisi */
.table-hasta th:nth-child(2)  { width: 6%; }   /* segment */
.table-hasta th:nth-child(3)  { width: 6%; }   /* gecis onay */
.table-hasta th:nth-child(4)  { width: 9%; }   /* grup */
.table-hasta th:nth-child(5)  { width: 12%; }  /* etkilesim */
.table-hasta th:nth-child(6)  { width: 6%; }   /* hedef gun */
.table-hasta th:nth-child(7)  { width: 7%; }   /* etkilesim oranlari */
.table-hasta th:nth-child(8)  { width: 7%; }   /* son etkilesim gunu */
.table-hasta th:nth-child(9)  { width: 8%; }   /* giris */
.table-hasta th:nth-child(10) { width: 9%; }   /* son etkilesimi kim yapti */
.table-hasta th:nth-child(11) { width: 4%; }   /* not */
.table-hasta th:nth-child(12) { width: 8%; }   /* islemler */

/* Sabit düzende sütun genişliği zaten sınır; ayrıca piksel sınırı gerekmiyor.
   Uzun ad/telefon da hücreden taşmak yerine üç noktayla kesilsin. */
.table-hasta .cell-truncate { max-width: none; }
.table-hasta .patient-name,
.table-hasta .patient-phone {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gün sayacı: tam tarih yerine "+14" / "-5". Rakamlar alt alta hizalansın
   diye tabular rakam kullanılıyor; tam tarih hücrenin title'ında. */
.cell-sayac { white-space: nowrap; }
.gun-sayac {
    display: inline-block;
    min-width: 42px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--hkts-surface-2);
    color: var(--hkts-text);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    cursor: default;
}
/* Yaklaşan hedef gün vurgulu, geçmiş hedef gün kırmızı. */
.gun-sayac.ileri {
    background: var(--hkts-primary-light);
    color: var(--hkts-primary-dark);
}
.gun-sayac.gecikti {
    background: var(--hkts-danger-soft);
    color: var(--hkts-danger-ink);
}
.bos-deger { color: var(--hkts-muted); }

/* Hasta segmenti (A/B/C/D). İş akışı grubuyla karışmasın diye grup rozetinden
   farklı bir görünüm: nötr çerçeveli, renksiz. */
.segment-rozet {
    display: inline-block;
    min-width: 26px;
    padding: 3px 9px;
    border: 1px solid var(--hkts-border);
    border-radius: 6px;
    background: var(--hkts-primary-soft);
    color: var(--hkts-heading);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* Giriş tipi: "Bizden Giriş" tam hâliyle sütuna sığmıyor, kısaltılıp
   kaynağa göre renklendiriliyor. Tam etiket title'da. */
.giris-rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.giris-rozet i { font-size: 11px; opacity: .85; }
.giris-kurum { background: var(--hkts-primary-light); color: var(--hkts-primary-dark); }
.giris-hasta { background: var(--hkts-success-soft); color: var(--hkts-success-ink); }
.giris-sistem { background: var(--hkts-surface-2); color: var(--hkts-text); }

/* Not ikonu: üzerine gelince notu baloncukta gösterir. Notu olmayan satırda
   soluk ve tıklanamaz durur — boş bir baloncuk açmanın anlamı yok. */
.not-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--hkts-warning-soft);
    color: var(--hkts-warning-ink);
    transition: all .15s;
}
.not-icon:hover,
.not-icon:focus {
    background: #ffc107;
    color: var(--hkts-on-primary);
    outline: none;
}
.not-icon.bos {
    background: transparent;
    color: var(--hkts-muted);
    cursor: default;
}

.not-balon {
    position: fixed;
    z-index: 1200;
    display: none;
    max-width: 320px;
    max-height: 180px;
    overflow: hidden;
    padding: 10px 13px;
    border-radius: 10px;
    background: var(--hkts-dark);
    color: var(--hkts-on-primary);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 8px 28px rgba(31,45,61,.28);
    pointer-events: none;
}
.not-balon.show { display: block; }

.patient-cell .patient-name {
    font-weight: 600;
    color: var(--hkts-heading);
    margin-bottom: 2px;
}
.patient-cell .patient-phone {
    font-size: 12px;
    color: var(--hkts-text);
}
.patient-cell .patient-phone i {
    margin-right: 4px;
}

/* Telefon numarasi -> WhatsApp sohbeti (bkz. Views/Shared/_TelefonLink.cshtml).
   Numaranin kendisi normal metin gibi durur; tiklanabilir oldugunu WhatsApp
   ikonu ve hover'daki alt cizgi belli eder. */
.wa-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.wa-link:hover {
    color: #25d366;
    text-decoration: underline;
}
.wa-link i.fa-whatsapp {
    margin-left: 5px;
    color: #25d366;
    opacity: .75;
}
.wa-link:hover i.fa-whatsapp {
    opacity: 1;
}

.group-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
/* Dar rozet: "Randevu(A)". Durum harfi adın önüne geçmesin diye soluk. */
.group-badge-kisa { padding: 5px 10px; }
.group-badge-kisa .gb-durum {
    opacity: .7;
    margin-left: 2px;
    font-weight: 700;
}
.badge-aktif {
    background: var(--hkts-success-soft);
    color: var(--hkts-success-ink);
}
.badge-pasif {
    background: var(--hkts-warning-soft);
    color: var(--hkts-warning-ink);
}
.badge-none {
    background: var(--hkts-surface-2);
    color: var(--hkts-text);
}

.gender-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
}
.gender-icon.female {
    background: var(--hkts-danger-soft);
    color: var(--hkts-danger-ink);
}
.gender-icon.male {
    background: var(--hkts-info-soft);
    color: var(--hkts-info-ink);
}

.action-btns {
    display: flex;
    gap: 6px;
}
.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all .15s;
    text-decoration: none;
}
.action-btn.edit {
    background: var(--hkts-primary-light);
    color: var(--hkts-primary-dark);
}
.action-btn.edit:hover {
    background: var(--hkts-primary);
    color: var(--hkts-on-primary);
}
.action-btn.add {
    background: var(--hkts-success-soft);
    color: var(--hkts-success-ink);
}
.action-btn.add:hover {
    background: var(--hkts-success);
    color: var(--hkts-on-primary);
}
.action-btn.view {
    background: var(--hkts-danger-soft);
    color: #ea5455;
}
.action-btn.view:hover {
    background: var(--hkts-danger);
    color: var(--hkts-on-primary);
}

@media (max-width: 1200px) {
    .filter-cards-modern {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .filter-cards-modern {
        grid-template-columns: 1fr 1fr;
    }
    .search-bar-modern {
        flex-wrap: wrap;
    }
    .search-input-wrap {
        width: 100%;
    }
}

/* ================= WhatsApp Sohbet Paneli ================= */
.wa-panel {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 14px;
    align-items: start;
}
.wa-side {
    background: var(--hkts-card-bg);
    border: 1px solid var(--hkts-border);
    border-radius: 12px;
    overflow: hidden;
}
.wa-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--hkts-border);
}
.wa-search i { color: var(--hkts-text); }
.wa-search input {
    flex: 1;
    border: 1px solid var(--hkts-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
}
.wa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--hkts-border);
}
.wa-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 100px;
    background: var(--hkts-surface-2);
    color: var(--hkts-text);
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
.wa-chip span { background: rgba(0,0,0,.08); border-radius: 100px; padding: 0 6px; }
.wa-chip.active { background: var(--hkts-primary); color: var(--hkts-on-primary); }
.wa-chip.cevap.active { background: var(--hkts-danger); }
.wa-chip.bekle.active { background: var(--hkts-warning); }
.wa-chip.acil.active { background: var(--hkts-dark); }
.wa-list { max-height: 62vh; overflow-y: auto; }
.wa-item {
    display: flex;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--hkts-border);
    color: inherit;
}
.wa-item:hover { background: var(--hkts-primary-soft); color: inherit; }
.wa-item.active { background: var(--hkts-primary-light); }
.wa-item-body { flex: 1; min-width: 0; }
.wa-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wa-name { font-weight: 600; color: var(--hkts-heading); font-size: 13px; }
.wa-time { font-size: 11px; color: var(--hkts-text); white-space: nowrap; }
.wa-preview {
    font-size: 12px;
    color: var(--hkts-text);
    margin: 3px 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-item-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-day { font-size: 10px; color: var(--hkts-muted); margin-left: auto; }
.wa-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--hkts-on-primary); text-transform: uppercase; flex-shrink: 0;
    background: var(--hkts-primary);
}
.wa-avatar.big { width: 46px; height: 46px; font-size: 18px; }
.wa-avatar.cevap { background: var(--hkts-danger); }
.wa-avatar.bekle { background: var(--hkts-warning); }
.wa-avatar.kuyruk { background: var(--hkts-muted); }
.wa-tag {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 100px;
    background: var(--hkts-surface-2); color: var(--hkts-text);
}
.wa-tag.cevap { background: var(--hkts-danger-soft); color: var(--hkts-danger); }
.wa-tag.bekle { background: var(--hkts-warning-soft); color: var(--hkts-warning-ink); }
.wa-tag.kuyruk { background: var(--hkts-surface-2); color: var(--hkts-text); }
.wa-tag.acil { background: var(--hkts-dark); color: var(--hkts-on-primary); }
.wa-count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px;
    background: var(--hkts-danger); color: var(--hkts-on-primary); font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.wa-empty { text-align: center; color: var(--hkts-muted); padding: 26px 12px; font-size: 13px; }

.wa-thread-wrap {
    background: var(--hkts-card-bg);
    border: 1px solid var(--hkts-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wa-thread-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--hkts-border);
}
.wa-thread-name { font-weight: 700; color: var(--hkts-heading); font-size: 15px; }
.wa-thread-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 3px; }
.wa-analysis {
    display: flex; flex-wrap: wrap; gap: 18px; row-gap: 8px;
    padding: 10px 16px; background: var(--hkts-primary-soft);
    border-bottom: 1px solid var(--hkts-border);
}
.wa-an-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.wa-an-item .lbl { font-size: 10px; font-weight: 700; color: var(--hkts-muted); letter-spacing: .3px; }
.wa-an-item strong { color: var(--hkts-heading); }
.acil-text { color: var(--hkts-danger); }

/* Elle ayar formu flex akisini bozmasin: form kutusu yok sayilir, icindeki
   .wa-an-item'lar dogrudan .wa-analysis'in cocugu gibi dizilir. */
.wa-analysis form.wa-an-form { display: contents; }
.wa-an-item select.wa-an-sel {
    font-size: 12px; height: 26px; padding: 2px 6px; max-width: 180px;
    border: 1px solid var(--hkts-border); border-radius: 4px; background: var(--hkts-surface);
    color: var(--hkts-heading);
}
.wa-an-item select.wa-an-sel:disabled { background: var(--hkts-surface-2); color: var(--hkts-muted); }
/* Etkilesim tipinin rengi = gotturdugu grubun rengi (is takip diyagrami). */
.etk-nokta {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    flex: none; box-shadow: 0 0 0 2px #fff;
}
.wa-an-item .elle { color: #ff9f43; font-size: 12px; }
.wa-an-item .catisma { color: var(--hkts-danger); font-size: 12px; }

.wa-thread {
    padding: 16px;
    background: var(--hkts-primary-soft);
    max-height: 52vh;
    overflow-y: auto;
}
.wa-day-sep { text-align: center; margin: 14px 0 10px; }
.wa-day-sep span {
    background: var(--hkts-surface); border: 1px solid var(--hkts-border); color: var(--hkts-text);
    font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 100px;
}
.wa-row { display: flex; margin-bottom: 8px; }
.wa-row.out { justify-content: flex-end; }
.wa-bubble {
    max-width: 72%;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--hkts-surface);
    border: 1px solid var(--hkts-border);
    box-shadow: 0 1px 2px rgba(31,45,61,.04);
}
.wa-bubble.out { background: var(--hkts-primary-light); border-color: var(--hkts-primary-light); }
.wa-bubble.pending { opacity: .72; border-style: dashed; }
.wa-text { color: var(--hkts-heading); font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.wa-meta { margin-top: 5px; font-size: 10.5px; color: var(--hkts-muted); display: flex; flex-wrap: wrap; gap: 4px; }
.wa-meta .dot { opacity: .5; }
.wa-meta .ok { color: var(--hkts-success); font-weight: 600; }
.wa-meta .fail { color: var(--hkts-danger); font-weight: 600; }
.wa-meta .wait { color: var(--hkts-warning); font-weight: 600; }

.wa-composer { padding: 12px 16px; border-top: 1px solid var(--hkts-border); }
.wa-composer textarea {
    width: 100%; min-height: 70px; resize: vertical;
    border: 1px solid var(--hkts-border); border-radius: 8px; padding: 10px;
    font-family: inherit; font-size: 13px; outline: none;
}
.wa-composer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.wa-warn { margin-top: 8px; font-size: 12px; color: var(--hkts-warning-ink); }

.nav-badge {
    background: var(--hkts-danger); color: var(--hkts-on-primary); font-size: 10px; font-weight: 700;
    border-radius: 100px; padding: 1px 6px; margin-left: 6px;
}
.icon-btn .nav-badge {
    position: absolute; top: 2px; right: 0; margin: 0;
}

@media (max-width: 1000px) {
    .wa-panel { grid-template-columns: 1fr; }
    .wa-list { max-height: 40vh; }
}

/* ============================================================================
   ARAYÜZ VARYANTLARI
   ----------------------------------------------------------------------------
   Tema (renk) ile bağımsız çalışırlar; her varyant her temayla birleşebilir.
     data-nav="yan|ust"                    menü yerleşimi
     data-arayuz="tam|resepsiyon|hekim"    role göre menü kapsamı
   ========================================================================== */

/* ------------------------------------------------------------ ÜST MENÜ */
/* Yan menü yerine yatay üst şerit. Geniş ekranlarda içeriğe tam genişlik
   bırakır; tek ekranda çok sütunlu tablolara bakan kliniklerde tercih edilir. */
[data-nav="ust"] .layout { flex-direction: column; }
[data-nav="ust"] .sidebar {
    position: sticky;
    width: 100%;
    height: auto;
    inset: 0 auto auto 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-right: none;
    border-bottom: 1px solid var(--hkts-border);
    overflow: visible;
}
[data-nav="ust"] .sidebar .brand { padding: 14px 12px 14px 6px; font-size: 18px; }
[data-nav="ust"] .sidebar nav {
    display: flex;
    align-items: center;
    /* Bağlantılar şeridin ortasında; "safe" dar ekranda sığmazsa sola yaslar ki
       baştaki öğe kırpılmasın (desteklemeyen tarayıcı ikinci satırı yok sayar). */
    justify-content: center;
    justify-content: safe center;
    gap: 2px;
    padding: 0;
    overflow-x: auto;
    flex: 1;
}
[data-nav="ust"] .sidebar nav a {
    margin-bottom: 0;
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 15px;
    gap: 8px;
}
/* Üst menüde metin çok yer kaplıyor: ikon + kısa etiket yeterli. */
[data-nav="ust"] .sidebar nav a i { width: auto; font-size: 16px; }
[data-nav="ust"] .main { margin-left: 0; }
[data-nav="ust"] .topbar { top: 0; }
/* Daraltma düğmesi yan menüye özgü; üst menüde anlamı yok. */
[data-nav="ust"] .sidebar-toggle { display: none; }

/* --------------------------------------------------- ROLE GÖRE MENÜ KAPSAMI
   Menü bağlantıları data-rol ile etiketlenir; seçilen arayüzde kendi rolünü
   taşımayanlar gizlenir.

   ÖNEMLİ: Bu YALNIZCA görünüm sadeleştirmesidir, yetki denetimi DEĞİLDİR.
   Gizlenen bağlantının adresi elle yazılırsa sayfa yine açılır. Gerçek
   kısıtlama sunucu tarafında ([Authorize(Roles=...)]) yapılmak zorundadır;
   bu katman onun yerine geçmez, yanına gelir. */
[data-arayuz="resepsiyon"] .sidebar nav a:not([data-rol~="resepsiyon"]),
[data-arayuz="hekim"]      .sidebar nav a:not([data-rol~="hekim"]) { display: none; }

/* ------------------------------------------------------- AYAR SEÇİCİLERİ */
.ayar-grup { padding: 8px 12px 10px; }
.ayar-grup + .ayar-grup { border-top: 1px solid var(--hkts-border); }
.ayar-grup .ayar-baslik {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hkts-muted);
    margin-bottom: 7px;
}
.ayar-secenekler { display: flex; gap: 5px; flex-wrap: wrap; }
.ayar-sec {
    flex: 1 1 auto;
    min-width: 56px;
    padding: 7px 9px;
    border: 1px solid var(--hkts-border);
    border-radius: 7px;
    background: var(--hkts-surface);
    color: var(--hkts-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background .15s, color .15s, border-color .15s;
}
.ayar-sec:hover { border-color: var(--hkts-primary); color: var(--hkts-primary-dark); }
.ayar-sec[aria-pressed="true"] {
    background: var(--hkts-primary-light);
    border-color: var(--hkts-primary);
    color: var(--hkts-primary-dark);
}
.ayar-sec:focus-visible { outline: 2px solid var(--hkts-primary); outline-offset: 1px; }

/* Tema düğmesindeki renk noktası: seçenek adı yerine rengi göstermek daha hızlı
   okunuyor, özellikle kurumsal tema eklendiğinde. */
.ayar-sec .nokta {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: -1px;
    border: 1px solid var(--hkts-shadow-lg);
}

/* Ayar menüsü artık iki bölümlü: üstte sayfa bağlantıları, altta görünüm. */
.topbar-araclar .settings-dropdown { min-width: 248px; }

/* ---------------------------------------------- Giriş / kurulum ekranı ek */
/* Kart ile tema seçici tek sütunda hizalı dursun. */
.login-shell { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 16px; }

.login-alt-baslik {
    text-align: center;
    margin: 0 0 4px;
    color: var(--hkts-text);
}
/* Yardım metinleri: eskiden satır içi #888 idi, koyu temada okunmuyordu. */
.login-yardim {
    display: block;
    color: var(--hkts-muted);
    font-size: 13px;
    margin-top: 0;
}
.login-box .login-yardim { text-align: center; }
.login-box small.login-yardim { text-align: left; margin-top: 4px; }

.login-gonder { width: 100%; justify-content: center; }


/* Giriş ekranı tema seçici — sağ üst köşe.
   Yalnızca ikon: metin etiketleri kartın yanında gereksiz ağırlık yapıyordu.
   Varsayılan renk soluk (--hkts-muted); seçili olan yumuşak bir daire içinde
   vurgulanır. Amaç göze çarpmadan bulunabilir olmak. */
.tema-secici {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10;
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--hkts-surface);
    border: 1px solid var(--hkts-border);
    box-shadow: 0 2px 10px var(--hkts-shadow);
}
.tema-secici .ayar-sec {
    min-width: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--hkts-muted);
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}
.tema-secici .ayar-sec:hover {
    border: none;
    background: var(--hkts-surface-2);
    color: var(--hkts-heading);
}
.tema-secici .ayar-sec[aria-pressed="true"] {
    border: none;
    background: var(--hkts-primary-light);
    color: var(--hkts-primary-dark);
}

/* Dar ekranda kart üstteki seçicinin altına kaymasın. */
@media (max-width: 520px) {
    .tema-secici { top: 10px; right: 10px; }
    .login-shell { padding-top: 64px; }
}

/* Etkileşim oranı rozeti — hastadan gelen etkileşimin toplam içindeki payı.
   Renk tek başına anlam taşıdığı için yüzde de yazılı: renk körlüğünde ya da
   siyah-beyaz çıktıda bilgi kaybolmasın. Eşikler PatientList.cshtml'de. */
.oran-rozet {
    display: inline-block;
    min-width: 44px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.oran-yuksek { background: var(--hkts-success-soft); color: var(--hkts-success-ink); }
.oran-orta   { background: #fdf3d4; color: #8a6100; }
.oran-dusuk  { background: var(--hkts-warning-soft); color: var(--hkts-warning-ink); }
.oran-sifir  { background: #23272b; color: #ffffff; }
.oran-yok    { background: transparent; color: var(--hkts-muted); font-weight: 500; }

/* Koyu temada sarı ve siyah bantlar zeminle karışıyor; ayrı tanımlı. */
[data-theme="koyu"] .oran-orta  { background: #3a3418; color: #f0d98a; }
[data-theme="koyu"] .oran-sifir { background: #000000; color: #d8dee2; border-color: #3a464f; }

/* Geçiş onayı: onay bekleyen grup değişikliği önerisi, listeden tek tıkla
   onaylanır ya da reddedilir. Öneri yoksa hücre sessiz kalır ("-"). */
.gecis-onay { display: flex; flex-direction: column; gap: 5px; }
.gecis-soru {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--hkts-warning-ink);
}
.gecis-butonlar { display: flex; gap: 4px; }
.gecis-btn {
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 3px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.4;
}
.gecis-btn.evet { background: var(--hkts-success-soft); color: var(--hkts-success-ink); }
.gecis-btn.hayir { background: var(--hkts-surface-2); color: var(--hkts-text); }
.gecis-btn:hover { filter: brightness(.94); }
.gecis-btn:focus-visible { outline: 2px solid var(--hkts-primary); outline-offset: 1px; }

/* Sıralanabilir sütun başlığı: tıklanınca yön değişir. Ok, hangi yönde
   sıralandığını gösterir; hiç sıralanmamışsa nötr çift ok. */
.th-sirala { padding: 0 !important; }
.th-sirala a {
    display: block;
    padding: 14px 12px;
    color: inherit;
    text-decoration: none;
    white-space: normal;
}
.th-sirala a:hover { background: rgba(255,255,255,.10); }
.th-sirala a:focus-visible { outline: 2px solid var(--hkts-primary); outline-offset: -2px; }
.sirala-ok { margin-left: 5px; opacity: .75; font-size: 10px; }

/* Geçiş onayı ikon düğmeleri: dar sütuna sığsın diye metin yerine ikon. */
.gecis-onay { display: inline-flex; }
.gecis-butonlar { display: flex; gap: 4px; }
.gecis-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* .table-modern thead th kuralı text-align:left veriyor ve seçici önceliği
   .cell-center'dan yüksek; ortalanacak başlıklar bu yüzden sola yaslı kalıyordu. */
.table-modern thead th.cell-center { text-align: center; }

/* Grup geçişi onay kutusu — tablodaki ikonlara basınca açılır. Küçük tutuldu:
   tek soru soruyor, uzun modal gereksiz. */
.gecis-modal { max-width: 400px; padding: 20px; }
.gecis-modal h3 { font-size: 16px; }
.gecis-modal-metin {
    margin: 0 0 4px;
    color: var(--hkts-text);
    font-size: 13.5px;
    line-height: 1.5;
}

/* Karar verilmiş geçişin sonucu: sütun aksiyon bitince durum gösterir. */
.gecis-sonuc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.gecis-sonuc.gecti   { background: var(--hkts-success-soft); color: var(--hkts-success-ink); }
.gecis-sonuc.gecmedi { background: var(--hkts-surface-2);    color: var(--hkts-text); }
.gecis-sonuc i { font-size: 11px; }


/* ============================================================================
   ANASAYFA PANELİ — randevu akışı grafiği ve bugünün randevuları
   ----------------------------------------------------------------------------
   Grafik bir kütüphaneyle değil, sunucuda hesaplanan koordinatlarla çizilen
   SVG ile üretilir. Sebep: sayfada harici script yok, çevrimdışı da çalışır ve
   çizgi renkleri tema token'larından okunur, yani koyu/kurumsal temada
   kendiliğinden uyum sağlar.

   Üç dönem (günlük/haftalık/aylık) sunucudan hazır gelir; sekme yalnızca
   hangisinin görüneceğini değiştirir, sunucuya gidiş yoktur.
   ========================================================================== */

.panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: var(--hkts-card-gap);
    margin-bottom: var(--hkts-card-gap);
    align-items: start;
}
@media (max-width: 1100px) {
    .panel-grid { grid-template-columns: 1fr; }
}

.panel-baslik {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.panel-baslik h3 { margin: 0 0 3px; color: var(--hkts-heading); font-size: 16px; }
.panel-baslik .alt { margin: 0; color: var(--hkts-muted); font-size: 12.5px; }

/* --- sekmeler ------------------------------------------------------------ */
.panel-sekme {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: 10px;
    background: var(--hkts-surface-2);
    margin-bottom: 14px;
}
.sekme-btn {
    border: 0;
    background: transparent;
    color: var(--hkts-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sekme-btn:hover { color: var(--hkts-heading); }
.sekme-btn.aktif {
    /* Koyu temada --hkts-surface, şerit zemini olan --hkts-surface-2 ile neredeyse
       aynı çıkıyordu ve seçili sekme belli olmuyordu; marka tinti kullanılıyor. */
    background: var(--hkts-primary-light);
    color: var(--hkts-primary-dark);
}
.sekme-btn:focus-visible { outline: 2px solid var(--hkts-primary); outline-offset: 1px; }

/* Seçili olmayan dönemler DOM'da kalır, yalnızca gizlenir. */
.sekme-govde { display: none; }
.sekme-govde.aktif { display: block; }

.sekme-aralik {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--hkts-muted);
}

/* --- 3B pasta grafik ------------------------------------------------------
   Derinlik, dilimin ön yarısına eklenen bir "yan duvar" ile veriliyor. Duvarın
   rengi ayrı bir token değil; üst yüzeyle aynı renk alıp brightness filtresiyle
   koyulaştırılıyor, böylece üç temada da doğru tonu kendiliğinden buluyor. */
.pasta-sarma {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.pasta-svg {
    flex: 1 1 300px;
    min-width: 0;
    max-width: 420px;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 10px 14px var(--hkts-shadow));
}
.pasta-ust { stroke: var(--hkts-surface); stroke-width: 1.5; }
.pasta-yan { filter: brightness(.68); }

.pasta-geldi   { fill: var(--hkts-success); }
.pasta-gelmedi { fill: var(--hkts-danger); }

.pasta-yuzde {
    fill: #ffffff;              /* dilim rengi her temada koyu; beyaz her ikisinde de okunur */
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    pointer-events: none;
}

/* Renk anahtarı: pastanın yanındaki okunur döküm. */
.pasta-anahtar {
    flex: 0 1 190px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pasta-anahtar li {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 4px 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--hkts-border-soft);
}
.pasta-anahtar li:last-child { border-bottom: 0; }
.pasta-anahtar .chip { width: 12px; height: 12px; border-radius: 3px; }
.pasta-chip-geldi   { background: var(--hkts-success); }
.pasta-chip-gelmedi { background: var(--hkts-danger); }
.pasta-anahtar .ad { font-size: 13px; color: var(--hkts-text); }
.pasta-anahtar .yuzde {
    font-size: 19px; font-weight: 700; color: var(--hkts-heading);
    letter-spacing: -.4px;
}
/* Adet, ismin altına ikinci satıra düşer: renk ve yüzde sütunları hizalı kalsın. */
.pasta-anahtar .adet {
    grid-column: 2 / -1;
    font-size: 11.5px; color: var(--hkts-muted);
    margin-top: -4px;
}
.pasta-anahtar li.toplam {
    grid-template-columns: 1fr auto;
    margin-top: 4px; padding-top: 12px;
    border-top: 1px solid var(--hkts-border);
    border-bottom: 0;
}
.pasta-anahtar li.toplam .ad { font-weight: 600; color: var(--hkts-heading); }
.pasta-anahtar li.toplam .adet {
    grid-column: auto;
    margin-top: 0;
    font-size: 15px; font-weight: 700; color: var(--hkts-heading);
}

.grafik-bos {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; height: 200px; text-align: center;
    color: var(--hkts-muted); font-size: 13px;
}
.grafik-bos i { font-size: 26px; color: var(--hkts-border); }

/* --- grafiğin altındaki sayı şeridi -------------------------------------- */
.akis-ozet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--hkts-border-soft);
}
@media (max-width: 560px) {
    .akis-ozet { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
}
.akis-ozet .kutu { text-align: center; }
.akis-ozet .sayi { font-size: 22px; font-weight: 700; color: var(--hkts-heading); letter-spacing: -.4px; }
.akis-ozet .sayi.iyi   { color: var(--hkts-success); }
.akis-ozet .sayi.dusuk { color: var(--hkts-warning); }
.akis-ozet .ad { font-size: 12px; color: var(--hkts-text); margin-top: 2px; }
.akis-ozet .ad i { font-size: 9px; margin-right: 4px; vertical-align: middle; }

/* .delta yalnızca .stat-card altında biçimlenmişti; özet şeridinde de aynı
   görünsün diye kural buraya genişletildi. */
.akis-ozet .delta {
    font-size: 11.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px;
}
.akis-ozet .delta .muted { color: var(--hkts-muted); font-weight: 500; }

/* --- bugünün randevuları ------------------------------------------------- */
.bugun-kart .bugun-sayac {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 16px;
}
.bugun-kart .bugun-sayac b {
    font-size: 34px; font-weight: 700; color: var(--hkts-heading); letter-spacing: -1px;
}
.bugun-kart .bugun-sayac span { font-size: 13px; color: var(--hkts-text); }

.bugun-liste { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; }
.bugun-liste li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--hkts-border-soft);
}
.bugun-liste li:last-child { border-bottom: 0; }
.bugun-avatar {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hkts-primary-light); color: var(--hkts-primary-dark);
    font-size: 12.5px; font-weight: 700;
}
.bugun-bilgi { min-width: 0; flex: 1; }
.bugun-bilgi .ad {
    display: block; font-size: 13.5px; font-weight: 600; color: var(--hkts-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none;
}
.bugun-bilgi .ad:hover { color: var(--hkts-primary-dark); }
.bugun-bilgi .detay {
    display: block; font-size: 11.5px; color: var(--hkts-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bugun-liste .ara {
    color: var(--hkts-text); font-size: 14px; padding: 4px 6px; border-radius: 6px;
    text-decoration: none;
}
.bugun-liste .ara:hover { background: var(--hkts-surface-2); color: var(--hkts-primary-dark); }

/* Liste boşken kartın çökmemesi için sabit yükseklikli sakin bir blok. */
.bugun-bos {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 34px 10px; text-align: center;
    color: var(--hkts-muted); font-size: 13px;
}
.bugun-bos i { font-size: 26px; color: var(--hkts-border); }

/* ============================================================================
   HİZMET & ÜRÜN MODÜLÜ
   ----------------------------------------------------------------------------
   Form bölümleri, örnek tasarımdaki gibi sol üstünde kıvrık uçlu yeşil bir
   etiket taşır. Etiket ayrı bir görsel değil; şeridin altındaki koyu üçgen
   ::after ile çizilir, böylece tema rengi değişince kendiliğinden uyar.
   ========================================================================== */

.kart-bolum {
    position: relative;
    border: 1px solid var(--hkts-border);
    border-radius: 10px;
    padding: 34px 18px 18px;
    margin: 26px 0 0;
    background: var(--hkts-surface);
}
.kart-bolum + .kart-bolum { margin-top: 30px; }

.kart-bolum > .bolum-etiket {
    position: absolute;
    top: -14px;
    left: -1px;
    display: inline-block;
    padding: 5px 14px;
    border-radius: 4px 4px 4px 0;
    /* Şerit rengi bilerek TEK bir koyu turkuaz: --hkts-primary-dark koyu temada
       açık tona dönüyor ve üstündeki beyaz yazı okunmuyordu. Bu ton hem açık hem
       koyu kart zemininde beyaz yazıyla okunur kalır. */
    background: #0c8390;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}
/* Şeridin altındaki kıvrım. */
.kart-bolum > .bolum-etiket::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    border-width: 6px 6px 0 0;
    border-style: solid;
    border-color: var(--hkts-heading) transparent transparent transparent;
    opacity: .55;
}

/* Form ızgarası: alanlar örnekteki gibi ikili / üçlü sıralar halinde durur. */
.kart-izgara {
    display: grid;
    gap: 4px 16px;
    grid-template-columns: repeat(var(--sutun, 2), minmax(0, 1fr));
}
.kart-izgara .tam { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .kart-izgara { grid-template-columns: 1fr; }
}

/* Geniş modal: iki bölüm yan yana sığsın. */
.modal.genis { max-width: 900px; }
.modal.genis .modal-govde {
    max-height: min(70vh, 640px);
    overflow-y: auto;
    padding-right: 4px;
}
.modal .modal-baslik {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 4px;
}
.modal .modal-baslik h3 { margin: 0; }
.modal .kapat {
    border: 0; background: transparent; cursor: pointer;
    color: var(--hkts-muted); font-size: 20px; line-height: 1; padding: 4px;
}
.modal .kapat:hover { color: var(--hkts-heading); }

/* İki bölümü yan yana koyan sarmal (hizmet formu örneğindeki düzen). */
.bolum-ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
@media (max-width: 820px) {
    .bolum-ikili { grid-template-columns: 1fr; }
}

/* --- katalog listeleri ---------------------------------------------------- */

.katalog-ust {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.katalog-suzgec {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
}
.katalog-suzgec .form-row { margin: 0; min-width: 150px; }
.katalog-suzgec .form-row.dar { min-width: 120px; }

.ozet-serit {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.ozet-rozet {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 9px;
    background: var(--hkts-surface-2);
    font-size: 12.5px; font-weight: 600; color: var(--hkts-text);
}
.ozet-rozet b { font-size: 15px; color: var(--hkts-heading); }
.ozet-rozet.iyi     { background: var(--hkts-success-soft); color: var(--hkts-success-ink); }
.ozet-rozet.iyi b   { color: var(--hkts-success-ink); }
.ozet-rozet.uyari   { background: var(--hkts-warning-soft); color: var(--hkts-warning-ink); }
.ozet-rozet.uyari b { color: var(--hkts-warning-ink); }
.ozet-rozet.tehlike   { background: var(--hkts-danger-soft); color: var(--hkts-danger-ink); }
.ozet-rozet.tehlike b { color: var(--hkts-danger-ink); }

/* Hizmet renginin listedeki karşılığı. */
.renk-nokta {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 7px; vertical-align: middle;
    border: 1px solid var(--hkts-border);
}

/* Para sütunları sağa yaslı ve rakamları hizalı: göz alt alta karşılaştırsın. */
.para {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.para .kur { color: var(--hkts-muted); font-size: 11px; margin-left: 3px; }
.para .tl {
    display: block; font-size: 11.5px; color: var(--hkts-muted);
    font-weight: 500;
}

.stok-deger { font-weight: 700; font-variant-numeric: tabular-nums; }
.stok-deger.kritik { color: var(--hkts-danger); }
.stok-birim { color: var(--hkts-muted); font-weight: 500; font-size: 11.5px; margin-left: 3px; }

.mini-etiket {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
    white-space: nowrap;
}
.mini-etiket.kritik { background: var(--hkts-danger-soft); color: var(--hkts-danger-ink); }
.mini-etiket.miad   { background: var(--hkts-warning-soft); color: var(--hkts-warning-ink); }
.mini-etiket.hizmet { background: var(--hkts-primary-light); color: var(--hkts-primary-dark); }
.mini-etiket.urun   { background: var(--hkts-info-soft); color: var(--hkts-info-ink); }

/* --- hasta detayındaki kalem listesi -------------------------------------- */

.kalem-liste { list-style: none; margin: 0; padding: 0; }
.kalem-liste li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px 12px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--hkts-border-soft);
}
.kalem-liste li:last-child { border-bottom: 0; }
.kalem-liste .ad {
    font-size: 13.5px; font-weight: 600; color: var(--hkts-heading);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kalem-liste .alt {
    grid-column: 2 / -1;
    font-size: 11.5px; color: var(--hkts-muted);
    margin-top: -2px;
}
.kalem-liste .islem { display: flex; gap: 4px; }

.kalem-bos {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 28px 10px; text-align: center;
    color: var(--hkts-muted); font-size: 13px;
}
.kalem-bos i { font-size: 24px; color: var(--hkts-border); }

/* --- işlem kayıtları raporu ----------------------------------------------- */

.rapor-hasta {
    border: 1px solid var(--hkts-border);
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
    background: var(--hkts-surface);
}
.rapor-hasta > summary {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    background: var(--hkts-surface-2);
    list-style: none;
}
.rapor-hasta > summary::-webkit-details-marker { display: none; }
.rapor-hasta > summary:hover { background: var(--hkts-primary-soft); }
.rapor-hasta .hasta-ad {
    font-size: 14px; font-weight: 700; color: var(--hkts-heading);
    display: flex; align-items: center; gap: 8px;
}
.rapor-hasta .hasta-alt { font-size: 11.5px; color: var(--hkts-muted); margin-top: 2px; }
.rapor-hasta .rapor-eylem { display: flex; align-items: center; gap: 10px; }
.rapor-hasta .rapor-eylem .btn { padding: 6px 12px; }
.rapor-hasta .govde { padding: 4px 16px 14px; }

.grup-rozet {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 100px;
    font-size: 11px; font-weight: 600;
    background: var(--hkts-surface-2); color: var(--hkts-text);
}

.kur-notu {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: 9px;
    background: var(--hkts-info-soft); color: var(--hkts-info-ink);
    font-size: 12.5px; margin-bottom: 16px;
}
.kur-notu.eski { background: var(--hkts-warning-soft); color: var(--hkts-warning-ink); }
.kur-notu b { font-variant-numeric: tabular-nums; }

/* --- yazdırma ------------------------------------------------------------- */

.yazdir-sayfa {
    max-width: 1000px;
    margin: 0 auto;
    padding: 28px;
    color: #1f2d3d;
    background: #ffffff;
}
.yazdir-baslik {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; border-bottom: 2px solid #1f2d3d; padding-bottom: 12px; margin-bottom: 18px;
}
.yazdir-baslik h1 { margin: 0 0 4px; font-size: 20px; }
.yazdir-baslik .alt { margin: 0; font-size: 12px; color: #6b7785; }
.yazdir-ozet {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-bottom: 20px;
}
.yazdir-ozet .kutu {
    border: 1px solid #e6ecf0; border-radius: 8px; padding: 10px 12px;
}
.yazdir-ozet .sayi { font-size: 18px; font-weight: 700; }
.yazdir-ozet .ad { font-size: 11px; color: #6b7785; }
.yazdir-hasta { margin-bottom: 18px; break-inside: avoid; page-break-inside: avoid; }
.yazdir-hasta h2 {
    font-size: 14px; margin: 0 0 2px;
    border-bottom: 1px solid #e6ecf0; padding-bottom: 5px;
}
.yazdir-hasta .kunye { font-size: 11px; color: #6b7785; margin: 0 0 8px; }
.yazdir-tablo { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.yazdir-tablo th, .yazdir-tablo td {
    border-bottom: 1px solid #eef1f4; padding: 6px 8px; text-align: left;
}
.yazdir-tablo th { background: #f5f8fa; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.yazdir-tablo td.para, .yazdir-tablo th.para { text-align: right; }
.yazdir-tablo tfoot td { font-weight: 700; border-top: 2px solid #1f2d3d; border-bottom: 0; }

.yazdir-arac { max-width: 1000px; margin: 16px auto 0; padding: 0 28px; display: flex; gap: 8px; }

@media print {
    .yazdir-arac { display: none !important; }
    .yazdir-sayfa { padding: 0; max-width: none; }
    /* Yazdırırken tarayıcının kendi başlık/altbilgisi dışında her şey siyah beyaz
       okunur olmalı; zeminleri koruyalım diye renk basımı isteniyor. */
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* "Son etkileşimi kim yaptı" sütununda yapay zeka rozeti. Kullanıcı adlarından
   ayrı görünmeli: listede "AI" adında bir personel varmış gibi okunmasın. */
.mini-etiket.ai {
    background: var(--hkts-primary-light);
    color: var(--hkts-primary-dark);
}

/* Hizmet kartındaki sarf malzeme satırları: ürün, miktar, kaldır. */
.sarf-satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.sarf-satir:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
    .sarf-satir { grid-template-columns: minmax(0, 1fr) 90px auto; }
}

/* Hizmet satırının altındaki sarf malzeme notu. Kalem değil, bilgi: bu yüzden
   ayrı satır değil, tarih/adet bilgisinin devamında ayrı renkte durur. */
.sarf-notu {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 5px;
    background: var(--hkts-info-soft);
    color: var(--hkts-info-ink);
    font-size: 11px;
    font-weight: 600;
}
.sarf-notu i { font-size: 9px; }

/* Fatura kutusundaki yüklü dosya künyesi. */
.fatura-dosya {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--hkts-success-soft);
    color: var(--hkts-success-ink);
    margin-bottom: 14px;
}
.fatura-dosya > i { font-size: 18px; }
.fatura-dosya .bilgi { min-width: 0; flex: 1; }
.fatura-dosya .ad {
    display: block; font-size: 13px; font-weight: 600; color: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fatura-dosya .alt { display: block; font-size: 11px; opacity: .8; }
.fatura-yukle-form { margin-bottom: 4px; }

/* ============================================================================
   DAR EKRANDA ÜST ÇUBUK
   ----------------------------------------------------------------------------
   Çubuk sabit genişlikli yedi öğe taşıyor: menü düğmesi, üç bildirim düğmesi,
   kullanıcı adı, avatar ve ayar düğmesi. 375 pikselde toplamları ekranı 22
   piksel aşıyor ve TÜM SAYFA yana kayıyordu. Tablo kaydırması değil, gövde
   kaydırmasıydı: her ekranda her kaydırmada sayfa sağa sola oynuyordu.

   Çözüm öğeleri kısmak: yazılar gizlenir, ölçüler küçülür, en darda ikincil
   düğmeler düşer. Hiçbiri kaybolmaz — hepsi sol menüde ya da ayar menüsünde
   zaten var.
   ========================================================================== */
@media (max-width: 720px) {
    .topbar {
        padding: 0 12px;
        gap: 8px;
        /* Öğeler yine de sığmazsa çubuk kendi içinde kaysın, sayfa değil. */
        overflow-x: auto;
        scrollbar-width: none;
    }
    .topbar::-webkit-scrollbar { display: none; }

    .topbar-araclar .icon-btn { width: 34px; height: 34px; font-size: 14px; }
    .topbar-baslik { gap: 8px; }
    .topbar-baslik .simge { width: 34px; height: 34px; font-size: 16px; }
    .topbar-baslik h1 { font-size: 15px; }
    .topbar-baslik p { display: none; }
    /* Dar ekranda uyarı yalnızca çan + sayı; metin ve düğme title'da kalır. */
    .topbar-uyari { margin-left: 4px; padding: 6px 10px; gap: 5px; }
    .topbar-uyari .metin, .topbar-uyari .eylem { display: none; }

    /* Avatar zaten kimin girdiğini söylüyor; ad ve rol yazısı yer kaplıyor. */
    .topbar-araclar .user { gap: 8px; padding: 0; }
    .topbar-araclar .user .info { display: none; }
    .topbar-araclar .user .avatar { width: 36px; height: 36px; font-size: 14px; border-width: 1px; }

    .topbar-araclar .settings-btn { padding: 6px; font-size: 17px; }
    .sidebar-toggle { width: 34px; height: 34px; font-size: 18px; }
}

@media (max-width: 430px) {
    /* Hareketler ve Eposta düğmeleri düşer; ikisi de sol menüde duruyor.
       WhatsApp kalır, çünkü cevap bekleyen sohbet rozetini o taşıyor. */
    .topbar-araclar .icon-btn.topbar-ikincil { display: none; }
}

/* Ayar menüsü çubuğun son öğesi; dar ekranda açılır kutusu ekranın dışına
   taşmasın diye sağ kenara sabitlenir. */
@media (max-width: 520px) {
    .topbar-araclar .settings-dropdown {
        position: fixed;
        right: 8px;
        left: 8px;
        top: 64px;
        min-width: 0;
    }
}

/* Dar ekranda sarmalayıcısı olmayan tablolar.

   Uygulamada on altı tablo doğrudan kartın içinde duruyor, kaydırma sarmalayıcısı
   yok. 375 pikselde bunlar kartı ve sayfayı yana taşırıyordu. Her birine elle
   sarmalayıcı eklemek yerine tablonun KENDİSİ dar ekranda kaydırılabilir bir
   bloğa dönüşür: içerik erişilebilir kalır, sayfa yerinde durur.

   Yalnızca kartın DOĞRUDAN çocuğu olan tablolara uygulanır; zaten sarmalayıcı
   içinde olanlar (.table-responsive, .flow-table-wrap) etkilenmez. */
@media (max-width: 720px) {
    .card > table.table,
    .card > table.table-modern {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* Kalan iki taşma kaynağı: WhatsApp ekranları.

   1) Izgara sütunu "1fr" aslında minmax(AUTO, 1fr) demek ve alt sınırı içeriğin
      kendi genişliği. İçinde geniş bir tablo olan sütun bu yüzden küçülmüyor,
      ızgarayı ve sayfayı şişiriyordu. minmax(0, 1fr) alt sınırı sıfırlar.
   2) Satır içi stille kurulmuş beş ve altı sütunlu süzgeç ızgaraları telefonda
      tek sütuna iner. */
@media (max-width: 900px) {
    .wa-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 720px) {
    .card > div[style*="grid-template-columns"],
    .card div[style*="repeat("] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Sarmalayıcısı olmayan tablolar için genel ağ: tablo dar ekranda kendisi
       kaydırılabilir bir bloğa dönüşür. Zaten sarmalayıcı içinde olanlarda
       kaydırma tabloya geçer, kullanıcı için sonuç aynıdır. */
    table.table,
    table.table-modern {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* Yazdırma sayfası tarayıcıda da açılabiliyor; telefonda dört sütunlu özet ve
   geniş tablo sayfayı taşırıyordu. Kâğıt çıktısı etkilenmez, bu kurallar
   yalnızca dar EKRAN için. */
@media screen and (max-width: 720px) {
    .yazdir-sayfa, .yazdir-arac { padding-left: 12px; padding-right: 12px; }
    .yazdir-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yazdir-hasta { overflow-x: auto; }
    .yazdir-baslik { flex-direction: column; }
    .yazdir-baslik p[style] { text-align: left !important; }
}

/* Son iki taşma kaynağı: sarmalayan düğme sıraları ve takvim araç çubuğu.

   Satır içi "display:flex" ile kurulmuş düğme sıraları sarma tanımı taşımadığı
   için telefonda yan yana dizilip sayfayı taşırıyordu. FullCalendar'ın kendi
   araç çubuğu da aynı sebeple taşıyor. İkisi de dar ekranda alt satıra iner. */
@media (max-width: 720px) {
    .card div[style*="display:flex"],
    .card div[style*="display: flex"] { flex-wrap: wrap; }

    .fc .fc-toolbar { flex-wrap: wrap; gap: 8px; }
    .fc .fc-toolbar-title { font-size: 16px; }
    .fc .fc-button { padding: 4px 8px; font-size: 12px; }
}

/* WhatsApp ekranındaki süzgeç ızgaraları ve düğme sıraları tablette de taşıyor;
   bu ekran diğerlerinden daha kalabalık olduğu için eşiği yukarı çekiyoruz. */
@media (max-width: 1100px) {
    .card div[style*="display:flex"],
    .card div[style*="display: flex"] { flex-wrap: wrap; }

    .card > div[style*="repeat("],
    .card div[style*="repeat("] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    }
}

/* 320 pikselde (eski küçük telefonlar) kalan iki taşma: süzgeç kartları ve
   hasta künyesi. İkisi de sabit en küçük genişlik taşıyordu. */
@media (max-width: 380px) {
    .filter-cards-modern { grid-template-columns: minmax(0, 1fr); }
    .filter-card-modern { min-width: 0; }

    .patient-profile { flex-wrap: wrap; }
    .patient-info { min-width: 0; }
    .patient-info h2 { font-size: 18px; word-break: break-word; }
    .patient-meta { flex-wrap: wrap; }
}

/* ============================================================================
   YANA TAŞMANIN KÖKÜ
   ----------------------------------------------------------------------------
   .main bir esnek öğe ve esnek öğenin varsayılan min-width değeri "auto":
   içeriğinden daha dar olamıyor. Geniş bir tablo bu yüzden .main'i, o da
   sayfayı büyütüyor ve TÜM SAYFA yana kayıyordu. min-width: 0 bu kilidi açar.

   Kilit açılınca tablonun kendisi taşar; bu yüzden kaydırma KARTA verilir.
   Tabloyu display:block yapmak işe yaramıyor: blok tablonun satırları içerik
   genişliğine büzülür ve geniş ekranda kartın sağı boş kalır (WhatsApp mesaj
   listesinde görüldü). Tablo tablo kalır, kartı doldurur; sığmazsa kart yatay
   kayar. Yalnızca doğrudan tablo taşıyan kartlar etkilenir.
   ========================================================================== */
.main { min-width: 0; }
.content { min-width: 0; }

.card:has(> table.table),
.card:has(> table.table-modern) {
    overflow-x: auto;
}

/* Kalan dört taşma. Hepsinin kökü aynı: bir öğe içeriğinden dar olamıyor.

   1) .wa-grid'in ikinci sütunu "1fr" — yani minmax(AUTO, 1fr). İçindeki geniş
      liste sütunu küçültmüyor. Yalnızca dar ekran kuralında değil, TABANDA da
      düzeltilmeli; 1024 pikselde de taşıyordu.
   2) "flex:1" taşıyan kutular da aynı sebeple küçülmüyor.
   3) Düğme sıraları kartın dışında da olabiliyor; sarma kuralı genişletildi.
   4) 320 pikselde içerik kenar boşluğu tek başına 60 piksel yiyor. */
.wa-grid { grid-template-columns: 300px minmax(0, 1fr) !important; }
@media (max-width: 900px) {
    .wa-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

[style*="flex:1"], [style*="flex: 1"] { min-width: 0; }
.wa-thread-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1100px) {
    div[style*="display:flex"],
    div[style*="display: flex"],
    form[style*="display:flex"] { flex-wrap: wrap; }
}

@media (max-width: 380px) {
    :root { --hkts-content-pad: 16px 12px; }
    .card { padding: 14px; }
}

/* Son iki taşma.

   .wa-an-item satırları sarmıyordu ve içindeki sabit genişlikli seçim kutuları
   dar ekranda satırı taşırıyordu. Arama formundaki düğme de aynı sebeple
   taşıyordu: form ızgarasının son sütunu "auto", düğme küçülmüyor. */
.wa-an-item { flex-wrap: wrap; }
.wa-an-item select.wa-an-sel { max-width: 100%; }

@media (max-width: 1100px) {
    /* Süzgeç formlarının son "auto" sütunu düğmeyi taşırıyor; ızgara sarsın. */
    .card form[style*="grid-template-columns"] > *,
    .card div[style*="grid-template-columns"] > * { min-width: 0; }
}

/* ============================================================================
   KAYIT FORMU — Kişisel Bilgi bölümü
   ----------------------------------------------------------------------------
   Girdi grubu: kutunun yanına yapışık küçük bir düğme ya da simge (denetle,
   e-posta yaz, ülke kodu). Kutu ile ek aynı yükseklikte ve tek çerçeve gibi
   görünür; ek sağda ya da (.sol) solda durabilir.
   ========================================================================== */

.girdi-grup {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.girdi-grup > input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.girdi-grup > .girdi-ek {
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--hkts-input-h);
    border: 1px solid var(--hkts-input-border);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: var(--hkts-surface-2);
    color: var(--hkts-text);
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    transition: color .15s, background .15s;
}
.girdi-grup > .girdi-ek:hover { color: var(--hkts-primary-dark); background: var(--hkts-primary-light); }
.girdi-grup > .girdi-ek:focus-visible { outline: 2px solid var(--hkts-primary); outline-offset: 1px; }

/* Solda duran ek (telefon ülke simgesi): yuvarlatma taraf değiştirir. */
.girdi-grup > .girdi-ek.sol {
    order: -1;
    border-left: 1px solid var(--hkts-input-border);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    color: var(--hkts-primary);
    cursor: default;
}
.girdi-grup > .girdi-ek.sol:hover { background: var(--hkts-surface-2); color: var(--hkts-primary); }
.girdi-grup > .girdi-ek.sol + input {
    border-radius: 0 8px 8px 0;
}

/* Vatandaşlık numarası denetim sonucu çerçevede de görünsün. */
.girdi-grup.gecerli > input,
.girdi-grup.gecerli > .girdi-ek { border-color: var(--hkts-success); }
.girdi-grup.gecerli > .girdi-ek { color: var(--hkts-success); }
.girdi-grup.gecersiz > input,
.girdi-grup.gecersiz > .girdi-ek { border-color: var(--hkts-danger); }
.girdi-grup.gecersiz > .girdi-ek { color: var(--hkts-danger); }

.alan-iletisi { display: block; margin-top: 4px; font-size: 11.5px; color: var(--hkts-success-ink); }
.alan-iletisi.hata { color: var(--hkts-danger-ink); }

/* Zorunlu alan boş bırakılıp gönderilmeye çalışılınca kırmızı çerçeve;
   sayfa ilk açıldığında değil, kullanıcı alana dokunduktan sonra. */
.kayit-kisisel input:user-invalid { border-color: var(--hkts-danger); }
.alan-iletisi:empty { display: none; }

/* Etiketler tek satırda kalsın; biri alta kayınca aynı sıradaki kutular
   hizadan çıkıyordu ("Vatandaşlık numarası"). */
.kayit-kisisel .form-row > label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kenar menüsüyle birlikte içerik alanı daralınca üç sütun sıkışıyor. */
@media (max-width: 1180px) {
    .kayit-kisisel .kart-izgara,
    .kayit-kisisel ~ .form-section .kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .kayit-kisisel .kart-izgara,
    .kayit-kisisel ~ .form-section .kart-izgara { grid-template-columns: 1fr; }
}

/* ============================================================================
   KAYIT FORMU — Medikal Bilgiler bölümü
   ========================================================================== */
.kayit-medikal .kart-izgara + .kart-izgara { margin-top: 6px; }
.kayit-medikal textarea { min-height: 64px; resize: vertical; }
.kayit-medikal .birim { color: var(--hkts-muted, #7a8a93); font-weight: 400; }

/* BMI hesaplanan alan: yazılamaz olduğu dolgusundan anlaşılsın. */
.kayit-medikal input.salt-okunur {
    background: var(--hkts-surface-2);
    color: var(--hkts-text);
    cursor: default;
}

/* ============================================================================
   KAYIT FORMU — Diğer Bilgiler bölümü
   ========================================================================== */
.kayit-diger .kart-izgara + .kart-izgara { margin-top: 6px; }

/* İzin seçimleri: etiket solda, seçim kutusu sağda aynı satırda. */
.kayit-diger .izin-izgara { gap: 10px 32px; margin-bottom: 8px; }
.kayit-diger .izin-satir {
    display: grid;
    grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}
.kayit-diger .izin-satir > label { margin: 0; text-align: right; font-weight: 500; }
@media (max-width: 700px) {
    .kayit-diger .izin-satir { grid-template-columns: 1fr; gap: 4px; }
    .kayit-diger .izin-satir > label { text-align: left; }
}

.kayit-diger .alt-baslik {
    margin: 18px 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hkts-text);
}

/* Arama simgesi süs; tıklanmaz. */
.girdi-grup > .girdi-ek.sol.arama { color: var(--hkts-muted); }

.kayit-diger .personel-izgara { gap: 10px 16px; }
.kayit-diger .personel-secim {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    min-width: 0;
}
.kayit-diger .personel-secim input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--hkts-primary); }
.kayit-diger .personel-secim span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kayit-diger textarea { min-height: 72px; resize: vertical; }

/* Form içi kısa açıklama metni. */
.form-ipucu { color: var(--hkts-muted); font-size: 13px; }

/* Son etkileşim günü: geçmişte kalan süre. Hedef gün sayacının renkli
   "+3 / -4" görünümünden bilinçli olarak ayrı — iki sütun karışmasın. */
.gun-sayac.gecmis {
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--hkts-muted);
    font-weight: 500;
    font-variant-numeric: normal;
    padding-inline: 0;
    white-space: nowrap;
}

/* ============================================================================
   KAYIT FORMU — Etkileşim bölümü
   Tipler seçilebilir kartlar halinde; nokta rengi tipin götürdüğü grubun rengi.
   ========================================================================== */
.kayit-etkilesim .etk-secim {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.kayit-etkilesim .etk-kart {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--hkts-input-border);
    border-radius: 8px;
    background: var(--hkts-surface, #fff);
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.kayit-etkilesim .etk-kart:hover { border-color: var(--hkts-primary); }
.kayit-etkilesim .etk-kart input { margin: 0; accent-color: var(--hkts-primary); }
.kayit-etkilesim .etk-kart .etk-nokta {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.kayit-etkilesim .etk-kart .etk-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kayit-etkilesim .etk-kart .etk-hedef {
    grid-column: 3;
    color: var(--hkts-muted);
    font-size: 11.5px;
    font-weight: 400;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kayit-etkilesim .etk-kart.yok { grid-template-columns: auto minmax(0, 1fr); color: var(--hkts-muted); }
.kayit-etkilesim .etk-kart.secili {
    border-color: var(--hkts-primary);
    background: var(--hkts-primary-light);
    box-shadow: 0 0 0 1px var(--hkts-primary) inset;
}
.kayit-etkilesim .etk-kart.yok.secili { color: var(--hkts-text); }

.kayit-etkilesim .etk-ayrinti.kapali { opacity: .5; }
.kayit-etkilesim .etk-ayrinti .tam { grid-column: 1 / -1; }
.kayit-etkilesim textarea { min-height: 60px; resize: vertical; }

.kayit-etkilesim .giris-secim { display: flex; flex-wrap: wrap; gap: 6px 16px; min-height: var(--hkts-input-h); align-items: center; }
.kayit-etkilesim .giris-secenek { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }
.kayit-etkilesim .giris-secenek input { margin: 0; accent-color: var(--hkts-primary); }

@media (max-width: 700px) {
    .kayit-etkilesim .etk-secim { grid-template-columns: 1fr; }
}

.kayit-etkilesim .alt-etiket { display:block; margin:0 0 8px; font-weight:600; }

/* ============================================================================
   HASTA DETAYI — Medikal Bilgiler penceresi
   ========================================================================== */
.baslik-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.medikal-ac { position: relative; }
.medikal-ac .alerji-rozet {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 4px; border-radius: 50%;
    background: var(--hkts-danger); color: #fff; font-size: 11px;
}

.medikal-modal { max-width: 760px; }
.medikal-modal .modal-govde { max-height: min(70vh, 640px); overflow-y: auto; }
.medikal-modal .medikal-hasta { margin: 0 0 12px; color: var(--hkts-muted); font-weight: 500; }

.medikal-modal .alerji-uyari {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; margin-bottom: 14px; border-radius: 8px;
    background: var(--hkts-danger-soft); color: var(--hkts-danger-ink);
    border: 1px solid var(--hkts-danger);
}
.medikal-modal .alerji-uyari i { margin-top: 2px; }
.medikal-modal .alerji-uyari .metin { white-space: pre-line; }

.medikal-modal .medikal-olculer {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px;
}
.medikal-modal .olcu {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; border-radius: 8px; background: var(--hkts-surface-2);
}
.medikal-modal .olcu .etiket { font-size: 12px; color: var(--hkts-muted); }
.medikal-modal .olcu .deger { font-size: 18px; font-weight: 700; color: var(--hkts-text); }
.medikal-modal .bmi-sinif { align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.medikal-modal .bmi-sinif.iyi { background: var(--hkts-primary-light); color: var(--hkts-success-ink); }
.medikal-modal .bmi-sinif.uyari { background: var(--hkts-surface); color: var(--hkts-warning-ink, #9a6a00); border: 1px solid currentColor; }
.medikal-modal .bmi-sinif.kotu { background: var(--hkts-danger-soft); color: var(--hkts-danger-ink); }

.medikal-modal .medikal-liste { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.medikal-modal .medikal-satir { padding: 8px 0; border-bottom: 1px solid var(--hkts-input-border); min-width: 0; }
.medikal-modal .medikal-satir dt { font-size: 12.5px; color: var(--hkts-muted); margin-bottom: 3px; }
.medikal-modal .medikal-satir dd { margin: 0; color: var(--hkts-text); white-space: pre-line; overflow-wrap: anywhere; }

.medikal-modal .medikal-bos { text-align: center; padding: 26px 10px; color: var(--hkts-muted); }
.medikal-modal .medikal-bos i { font-size: 30px; opacity: .6; }
.medikal-modal .medikal-bos p { margin: 8px 0 0; }

@media (max-width: 600px) {
    .medikal-modal .medikal-liste { grid-template-columns: 1fr; }
    .medikal-modal .olcu .deger { font-size: 16px; }
}
.medikal-modal .bmi-sinif.iyi { background: var(--hkts-success-soft); color: var(--hkts-success-ink); }
.medikal-modal .bmi-sinif.uyari { background: var(--hkts-warning-soft); color: var(--hkts-warning-ink); border: 0; }
/* Başlıkta iki düğme var; dar ekranda başlığın altına insin, taşmasın. */
.patient-detail-header { flex-wrap: wrap; gap: 10px; }

/* ============================================================================
   ÖDEME YAP
   ----------------------------------------------------------------------------
   Üstten alta: hasta kartı, randevu sorusu, tarih sırası, kalem satırları,
   tahsilat satırları + Toplam/Dağıtılan. Kalem ve tahsilat satırları odeme.js
   ile çizilir; buradaki sınıf adları oradaki şablonla eşleşir.
   ========================================================================== */

/* --- hasta kartı --- */
.odeme-hasta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px 20px;
    padding: 16px 20px;
}
.odeme-hasta .avatar {
    width: 72px; height: 72px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hkts-avatar-bg); color: var(--hkts-surface);
    font-size: 24px; font-weight: 700; letter-spacing: .5px;
}
.odeme-hasta .ad { font-size: 20px; font-weight: 600; line-height: 1.2; padding-top: 4px; }
.odeme-hasta .ad a { color: var(--hkts-primary); text-decoration: none; }
.odeme-hasta .ad a:hover { color: var(--hkts-primary-dark); }
.odeme-hasta .bilgi { margin: 0; display: grid; gap: 8px; min-width: 280px; font-size: 13.5px; }
.odeme-hasta .bilgi > div { display: flex; justify-content: space-between; gap: 24px; }
.odeme-hasta .bilgi dt { font-weight: 600; color: var(--hkts-heading); }
.odeme-hasta .bilgi dd { margin: 0; color: var(--hkts-text); }

/* --- randevu sorusu --- */
.odeme-randevu {
    background: var(--hkts-primary-light);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.odeme-randevu > p { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--hkts-heading); }
.odeme-randevu > label {
    display: inline-flex; align-items: center; gap: 8px;
    margin-right: 24px; color: var(--hkts-heading); cursor: pointer;
}
.odeme-randevu input[type=radio] { margin: 0; width: 18px; height: 18px; accent-color: var(--hkts-primary); }
.odeme-randevu .randevu-secim { margin-top: 12px; max-width: 420px; }
.odeme-randevu .randevu-secim .form-ipucu { margin: 0; }

/* --- tarih / saat / takip --- */
.odeme-ust { margin-bottom: 16px; }

/* --- kalem satırları --- */
.odeme-kalemler { padding: 4px 20px; margin-bottom: 12px; }
.odeme-satir { padding: 16px 0; }
.odeme-satir + .odeme-satir { border-top: 1px solid var(--hkts-border); }

.odeme-satir .satir-izgara {
    display: grid;
    grid-template-columns:
        minmax(140px, 1.2fr) minmax(220px, 3fr) minmax(80px, .6fr) minmax(90px, .7fr)
        auto minmax(90px, .6fr) minmax(90px, .7fr) auto;
    gap: 12px;
    align-items: end;
}
.odeme-satir .satir-izgara .form-row { margin: 0; min-width: 0; }
.odeme-satir .satir-izgara label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odeme-satir .satir-izgara label i { width: 14px; text-align: center; }

/* Vadeli fiyat: iki durumlu anahtar. Gerçek kutu gizli, görünen pist ve top. */
.odeme-satir .form-row.vadeli .anahtar {
    position: relative;
    display: inline-flex; align-items: center;
    height: var(--hkts-input-h); margin: 0; cursor: pointer;
}
.odeme-satir .anahtar input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.odeme-satir .anahtar span {
    position: relative;
    width: 46px; height: 26px; border-radius: 13px;
    background: var(--hkts-surface-2);
    border: 1px solid var(--hkts-input-border);
    transition: background .15s, border-color .15s;
}
.odeme-satir .anahtar span::after {
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--hkts-surface);
    border: 1px solid var(--hkts-input-border);
    box-sizing: border-box;
    transition: transform .15s;
}
.odeme-satir .anahtar input:checked + span { background: var(--hkts-primary); border-color: var(--hkts-primary); }
.odeme-satir .anahtar input:checked + span::after { transform: translateX(20px); border-color: transparent; }
.odeme-satir .anahtar input:focus-visible + span { box-shadow: 0 0 0 3px var(--hkts-focus-ring); }
.odeme-satir .anahtar input:disabled + span { opacity: .5; cursor: not-allowed; }

.odeme-satir .satir-sil {
    width: 30px; height: 30px; margin-bottom: 6px;
    border: 0; border-radius: 6px;
    background: var(--hkts-danger); color: var(--hkts-on-primary);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px;
}
.odeme-satir .satir-sil:hover { background: var(--hkts-danger-ink); }

/* Kayıtlı kalem: seçim kutusu yerine kilitli ad. */
.odeme-satir .kalem-sabit {
    min-height: var(--hkts-input-h);
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--hkts-border);
    background: var(--hkts-surface-2); color: var(--hkts-heading);
    font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.odeme-satir .kalem-sabit i { color: var(--hkts-muted); flex: 0 0 auto; }

.odeme-satir .satir-tutar { margin-top: 8px; font-size: 12.5px; color: var(--hkts-muted); }
.odeme-satir .satir-tutar:empty { display: none; }
.odeme-satir .satir-tutar.hata { color: var(--hkts-danger-ink); font-weight: 600; }
.odeme-satir hr { border: 0; border-top: 1px solid var(--hkts-border-soft); margin: 12px 0; }

/* Yardımcı personel: ana satırın altında, içeri çekili. */
.odeme-satir .yardimci-satir {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 12px; align-items: end;
    padding-left: 96px;
}
.odeme-satir .yardimci-satir + .yardimci-satir { margin-top: 8px; }
.odeme-satir .yardimci-satir .form-row { margin: 0; min-width: 0; }
.yuvarlak-dugme {
    width: 32px; height: 32px; margin-bottom: 5px;
    border-radius: 50%; border: 1px solid currentColor; background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px;
    transition: background .15s;
}
.yuvarlak-dugme.ekle { color: var(--hkts-success); }
.yuvarlak-dugme.ekle:hover { background: var(--hkts-success-soft); }
.yuvarlak-dugme.sil { color: var(--hkts-danger); }
.yuvarlak-dugme.sil:hover { background: var(--hkts-danger-soft); }

.satir-alt { display: flex; justify-content: flex-end; margin-bottom: 24px; }

/* --- tahsilat yöntemi düğmeleri --- */
.odeme-yontemleri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.odeme-yontemleri .btn.yontem { background: var(--hkts-success); color: var(--hkts-on-primary); padding: 7px 12px; }
.odeme-yontemleri .btn.yontem:hover:not(:disabled) { background: var(--hkts-success-ink); }

/* --- tahsilat listesi + özet --- */
.odeme-alt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}
.odeme-satiri {
    display: grid;
    grid-template-columns: 32px minmax(130px, 1fr) minmax(140px, 1.3fr) minmax(120px, 1.3fr) minmax(200px, 2fr);
    gap: 12px;
    align-items: start;
    padding: 12px 0 12px 8px;
    border-bottom: 1px solid var(--hkts-border);
}
.odeme-satiri .odeme-sil, .odeme-satiri .odeme-sil-yer { width: 28px; height: 28px; margin-top: 7px; }
.odeme-satiri .odeme-sil {
    border: 0; border-radius: 50%;
    background: var(--hkts-danger); color: var(--hkts-on-primary);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px;
}
.odeme-satiri .odeme-sil:hover { background: var(--hkts-danger-ink); }
.odeme-satiri .yontem-ad { padding-top: 10px; min-width: 0; }
.odeme-satiri .yontem-ad strong { display: block; font-size: 14px; color: var(--hkts-heading); }
.odeme-satiri .yontem-ad small { display: block; margin-top: 2px; font-size: 12px; color: var(--hkts-muted); }
.odeme-satiri .kapora {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px; font-size: 13px; color: var(--hkts-text); cursor: pointer;
}
.odeme-satiri .kapora input { margin: 0; width: 16px; height: 16px; accent-color: var(--hkts-primary); }
.odeme-satiri .odeme-ek { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.odeme-satiri .odeme-ek:empty { display: none; }
.odeme-sayfa .salt-okunur { background: var(--hkts-surface-2); color: var(--hkts-text); cursor: default; }
.odeme-satiri.acik-hesap .yontem-ad strong { color: var(--hkts-text); }

.odeme-ozet { display: flex; flex-direction: column; gap: 16px; }
.ozet-kutu { border-radius: 10px; padding: 16px 18px; font-size: 14px; }
.ozet-kutu h4 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.ozet-kutu > div > div + div { margin-top: 4px; }
.ozet-kutu.toplam { background: var(--hkts-primary-light); color: var(--hkts-primary-dark); }
.ozet-kutu.dagitilan { background: var(--hkts-success-soft); color: var(--hkts-success-ink); }
.ozet-kutu.dagitilan.hata { background: var(--hkts-danger-soft); color: var(--hkts-danger-ink); }
.ozet-kutu .fazla-uyari { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; }
.ozet-kutu .uyari { margin-top: 6px; font-size: 12.5px; color: var(--hkts-warning-ink); }

.odeme-kaydet {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 24px; padding-top: 16px;
    border-top: 1px solid var(--hkts-border);
}

/* --- dar ekran --- */
@media (max-width: 1280px) {
    .odeme-satir .satir-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
    .odeme-satir .satir-izgara .genis { grid-column: span 2; }
    .odeme-alt { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1100px) {
    .odeme-alt { grid-template-columns: 1fr; }
    .odeme-satir .yardimci-satir { padding-left: 0; }
}
/* Kenar menüsüyle içerik 660px'in altına inince beş sütunlu tahsilat satırı
   sığmıyor; tutar/kur ikinci, banka/taksit üçüncü sıraya iner. */
@media (max-width: 960px) {
    .odeme-satiri { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); padding-left: 0; }
    .odeme-satiri .odeme-sil, .odeme-satiri .odeme-sil-yer { grid-column: 1; }
    .odeme-satiri .yontem-ad { grid-column: 2 / -1; padding-top: 4px; }
    .odeme-satiri .odeme-tutar { grid-column: 2; }
    .odeme-satiri .odeme-kur { grid-column: 3; }
    .odeme-satiri .odeme-ek { grid-column: 2 / -1; }
}

/* --- İşlem Kayıtları: hasta satırındaki ödeme özeti ve buton --- */
.rapor-islem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rapor-islem .odeme-btn { padding: 6px 10px; font-size: 12.5px; }
.rapor-hasta .odeme-durum { display: block; font-size: 11.5px; margin-top: 2px; color: var(--hkts-success-ink); }
.rapor-hasta .odeme-durum .acik { color: var(--hkts-danger-ink); font-weight: 600; }
@media (max-width: 700px) {
    .odeme-hasta { grid-template-columns: auto minmax(0, 1fr); }
    .odeme-hasta .bilgi { grid-column: 1 / -1; min-width: 0; }
    .odeme-satir .satir-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .odeme-satir .satir-izgara .genis { grid-column: 1 / -1; }
    .odeme-satir .satir-sil { grid-column: 1 / -1; justify-self: end; margin: 0; }
    .odeme-satir .yardimci-satir { grid-template-columns: auto minmax(0, 1fr) auto; }
    .odeme-satir .yardimci-satir .form-row + .form-row { grid-column: 2; }
    .odeme-satir .yardimci-satir .yuvarlak-dugme.sil { grid-column: 3; grid-row: 1; }
    .odeme-kaydet { flex-direction: column-reverse; }
    .odeme-kaydet .btn { justify-content: center; }
    .rapor-islem { justify-content: flex-start; }
}

/* ============================================================================
   ETKİLEŞİM TİPLERİ
   ----------------------------------------------------------------------------
   Kart ızgarası: her tip bir kart, sol şerit rengi hedef grubun rengi
   (--renk kart üzerinde inline verilir). Araç çubuğu, sürükle-bırak,
   modal ve toast burada; kartlar etkilesim-tipleri.js tarafından çizilir.
   ========================================================================== */
.et-sayfa { display: flex; flex-direction: column; gap: 14px; }
/* hidden özniteliği aşağıdaki display kurallarına yenilmesin (not, kullanım kutusu, sil düğmesi, boş durum). */
.et-sayfa [hidden], .et-modal [hidden], .et-bos[hidden] { display: none !important; }

/* --- araç çubuğu --- */
.et-arac {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 14px 18px;
}
.et-ozet { display: flex; gap: 8px; flex-wrap: wrap; }
.et-ozet-kart {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 76px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
    background: var(--hkts-surface-2); color: var(--hkts-text);
    border: 1.5px solid transparent; font: inherit; line-height: 1.15;
    transition: background .15s, border-color .15s;
}
.et-ozet-kart b { font-size: 20px; color: var(--hkts-heading); }
.et-ozet-kart span { font-size: 11.5px; color: var(--hkts-muted); text-transform: uppercase; letter-spacing: .4px; }
.et-ozet-kart:hover { border-color: var(--hkts-border); }
.et-ozet-kart.secili { background: var(--hkts-primary-light); border-color: var(--hkts-primary); }
.et-ozet-kart.secili b { color: var(--hkts-primary-dark); }
.et-ozet-kart.uyari b { color: var(--hkts-warning-ink); }
.et-ozet-kart.uyari.secili { background: var(--hkts-warning-soft); border-color: var(--hkts-warning); }

.et-arama { position: relative; flex: 1 1 260px; min-width: 200px; }
.et-arama i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--hkts-muted); }
.et-arama input { width: 100%; padding-left: 34px; }

.et-ipucu { margin: -4px 4px 0; font-size: 12.5px; color: var(--hkts-muted); }
.et-ipucu i { margin-right: 4px; }

/* --- ızgara ve kart --- */
.et-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.et-kart {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px 12px 20px;
    background: var(--hkts-surface);
    border: 1px solid var(--hkts-border);
    border-radius: 12px;
    box-shadow: 0 2px 10px var(--hkts-shadow);
    overflow: hidden;
    transition: box-shadow .15s, transform .15s, opacity .15s;
}
.et-kart:hover { box-shadow: 0 6px 18px var(--hkts-shadow); }
.et-kart .et-serit { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--renk, var(--hkts-muted)); }
.et-kart.pasif { opacity: .62; }
.et-kart.pasif .et-serit { background: repeating-linear-gradient(180deg, var(--renk) 0 6px, transparent 6px 10px); }
.et-kart.vurgu { box-shadow: 0 0 0 3px var(--hkts-focus-ring); }
.et-kart.surukleniyor { opacity: .4; transform: scale(.98); }
.et-izgara.suzulu .et-tut { visibility: hidden; }

.et-kart header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.et-kart .et-tut {
    display: inline-flex; gap: 1px; color: var(--hkts-muted); cursor: grab;
    padding: 4px 2px; margin-left: -6px; border-radius: 6px; font-size: 13px;
}
.et-kart .et-tut:hover { background: var(--hkts-surface-2); color: var(--hkts-text); }
.et-kart:active .et-tut { cursor: grabbing; }
.et-kart .et-ikon {
    width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--renk, var(--hkts-muted)) 16%, var(--hkts-surface));
    color: var(--renk, var(--hkts-muted)); font-size: 15px;
}
.et-kart .et-ikon .nokta { width: 12px; height: 12px; border-radius: 50%; background: var(--renk, var(--hkts-muted)); }
.et-kart h3 {
    flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.25;
    color: var(--hkts-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.et-kart h3 .sistem { font-size: 11px; color: var(--hkts-muted); margin-left: 4px; }

.et-hedef {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    background: var(--hkts-surface-2); color: var(--hkts-heading);
}
.et-hedef i { color: var(--hkts-muted); font-size: 12px; }
.et-hedef .nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--renk, var(--hkts-muted)); }
.et-hedef.yok { background: var(--hkts-warning-soft); color: var(--hkts-warning-ink); }
.et-hedef.yok i { color: inherit; }

.et-aciklama {
    margin: 0; font-size: 13px; line-height: 1.45; color: var(--hkts-text);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 3.6em;
}
.et-aciklama em { color: var(--hkts-muted); }

.et-kart footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--hkts-border); }
.et-sayi { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--hkts-muted); }
.et-sayi i { font-size: 11px; }
.et-sayi.var { color: var(--hkts-primary-dark); font-weight: 600; text-decoration: none; }
a.et-sayi.var:hover { text-decoration: underline; }
.et-kart footer .btn { margin-left: auto; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }

.et-bos { padding: 48px 16px; text-align: center; color: var(--hkts-muted); }
.et-bos i { font-size: 34px; display: block; margin-bottom: 8px; }
.et-bos p { margin: 0; }

/* --- iki durumlu anahtar --- */
.et-anahtar { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: 0 0 auto; margin: 0; font-weight: 400; }
.et-anahtar input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.et-anahtar .pist {
    position: relative; width: 38px; height: 22px; border-radius: 999px;
    background: var(--hkts-surface-2); border: 1.5px solid var(--hkts-border);
    transition: background .15s, border-color .15s; flex: 0 0 auto;
}
.et-anahtar .pist::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
    background: var(--hkts-surface); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s;
}
.et-anahtar input:checked + .pist { background: var(--hkts-success); border-color: var(--hkts-success); }
.et-anahtar input:checked + .pist::after { transform: translateX(16px); }
.et-anahtar input:focus-visible + .pist { box-shadow: 0 0 0 3px var(--hkts-focus-ring); }
.et-anahtar input:disabled + .pist { opacity: .5; cursor: wait; }
.et-anahtar .etiket { font-size: 13px; color: var(--hkts-text); }
/* Modal içindeki anahtar: .form-row label'ın blok/kalın kuralı burada geçersiz,
   yoksa pist ve yazı üst üste biniyordu. */
.et-etiket { display: block; margin-bottom: 6px; font-weight: 600; color: var(--hkts-heading); font-size: 13px; }
.et-modal .form-row label.et-anahtar.buyuk {
    display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 400;
    min-height: var(--hkts-input-h, 38px);
}
.et-modal .form-row label.et-anahtar.buyuk .etiket { font-size: 13.5px; color: var(--hkts-text); }

/* --- modal --- */
.et-modal { max-width: 640px; padding: 0; overflow: hidden; }
.et-modal-baslik {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    border-bottom: 1px solid var(--hkts-border); background: var(--hkts-surface-2);
}
.et-modal-baslik h3 { margin: 0; flex: 1; font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-modal-renk { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--hkts-surface); }
.et-modal form { padding: 18px 20px 16px; }
.et-modal .form-row label small { font-weight: 400; color: var(--hkts-muted); }
.et-modal .form-row > input[readonly] { background: var(--hkts-surface-2); color: var(--hkts-muted); }
.et-not { display: block; margin-top: 6px; font-size: 12px; color: var(--hkts-muted); }
.et-renk-satir { display: flex; align-items: center; gap: 8px; }
.et-renk-satir input[type=color] { width: 40px; height: var(--hkts-input-h, 38px); padding: 2px; border-radius: 8px; border: 1px solid var(--hkts-input-border); background: var(--hkts-surface); cursor: pointer; flex: 0 0 auto; }
.et-renk-satir input[name=renk] { flex: 1; min-width: 0; font-family: ui-monospace, monospace; }
.et-kullanim { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 12px; border-radius: 8px; background: var(--hkts-surface-2); font-size: 12.5px; color: var(--hkts-text); }
.et-kullanim i { color: var(--hkts-muted); margin-right: 4px; }
.et-modal .actions { align-items: center; }

/* --- toast --- */
.et-toast-alan { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 1200; pointer-events: none; }
.et-toast {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px;
    background: var(--hkts-heading); color: var(--hkts-surface); font-size: 13px; max-width: 360px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.et-toast.goster { opacity: 1; transform: none; }
.et-toast.ok i { color: var(--hkts-success); }
.et-toast.hata { background: var(--hkts-danger-ink); color: #fff; }
.et-toast.hata i { color: #fff; }

@media (max-width: 700px) {
    .et-arac { padding: 12px; gap: 10px; }
    .et-ozet { width: 100%; }
    .et-ozet-kart { flex: 1; min-width: 0; padding: 6px 8px; }
    .et-arac > .btn { width: 100%; justify-content: center; }
    .et-izgara { grid-template-columns: 1fr; }
    .et-modal .grid-2 { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================================
   HASTA DETAYI — Etkileşim & İşlem Bilgileri paneli
   ----------------------------------------------------------------------------
   Kayıt formundan taşınan iki bölüm. <details> ile açılır-kapanır; kapalıyken
   başlıkta özet çipler durur. Grup kartları kayıt formundaki .kayit-etkilesim
   stillerini olduğu gibi kullanır.
   ========================================================================== */
.ei-panel { padding: 0; overflow: hidden; }
.ei-panel > summary { list-style: none; }
.ei-panel > summary::-webkit-details-marker { display: none; }

.ei-baslik {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; cursor: pointer; user-select: none;
    background: var(--hkts-surface);
    transition: background .15s;
}
.ei-baslik:hover { background: var(--hkts-surface-2); }
.ei-panel[open] > .ei-baslik { border-bottom: 1px solid var(--hkts-border); }
.ei-ad { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--hkts-heading); font-size: 14.5px; }
.ei-ad i { color: var(--hkts-primary); }
.ei-ozet { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.ei-cip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--hkts-surface-2); color: var(--hkts-text); white-space: nowrap;
}
.ei-cip i { font-size: 11px; color: var(--hkts-muted); }
.ei-cip .nokta { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ei-ok { color: var(--hkts-muted); transition: transform .2s; }
.ei-panel[open] .ei-ok { transform: rotate(180deg); }
.ei-panel[open] .ei-ozet { display: none; }

.ei-govde { padding: 0 16px 16px; }
.ei-sekmeler { display: flex; gap: 4px; margin: 0 -16px 16px; padding: 0 16px; border-bottom: 1px solid var(--hkts-border); }
.ei-sekme {
    background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 11px 14px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--hkts-muted);
    cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.ei-sekme:hover { color: var(--hkts-heading); }
.ei-sekme.secili { color: var(--hkts-primary-dark); border-bottom-color: var(--hkts-primary); }
.ei-sekme-icerik { display: none; }
.ei-sekme-icerik.secili { display: block; }

.ei-panel .form-row label small { font-weight: 400; color: var(--hkts-muted); }
.ei-onay { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 400 !important; min-height: var(--hkts-input-h); cursor: pointer; margin: 0; }
.ei-onay input { margin: 0; accent-color: var(--hkts-primary); }
.ei-eylem { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--hkts-border); }
.ei-ipucu { font-size: 12px; color: var(--hkts-muted); }
.ei-ipucu i { margin-right: 3px; }

@media (max-width: 700px) {
    .ei-baslik { gap: 8px; }
    .ei-ozet { width: 100%; order: 3; }
    .ei-ad { flex: 1; }
    .ei-sekme { padding: 10px 10px; font-size: 13px; }
    .ei-eylem .btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   HASTA LİSTESİ — segment rozeti telefonun yanında, "Son mesaj" sütunu
   ========================================================================== */
.patient-phone { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.segment-mini {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .3px; line-height: 1.5;
    background: var(--hkts-primary-soft); color: var(--hkts-primary-dark);
    border: 1px solid var(--hkts-border);
}

.cell-mesaj { max-width: 280px; }
.son-mesaj {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; align-items: start;
    width: 100%; max-width: 280px; padding: 4px 6px; margin: -4px -6px;
    border: 0; border-radius: 8px; background: none; font: inherit; text-align: left;
    color: var(--hkts-text); cursor: pointer;
}
.son-mesaj:hover { background: var(--hkts-surface-2); }
.son-mesaj > i { font-size: 13px; margin-top: 2px; }
.son-mesaj.gelen > i { color: var(--hkts-success-ink); }
.son-mesaj.giden > i { color: var(--hkts-muted); }
.son-mesaj .metin {
    grid-column: 2; font-size: 12.5px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.son-mesaj .zaman { grid-column: 2; font-size: 11px; color: var(--hkts-muted); }
/* Açık durumda satır büyür, tam metin sarılarak okunur. */
.son-mesaj.acik .metin { white-space: pre-wrap; overflow: visible; word-break: break-word; }
.son-mesaj.acik { background: var(--hkts-surface-2); }

/* Hasta detayındaki kartlar açılır-kapanır: başlık summary, sağda ok.
   Kapalıyken başlık kartın tamamı olduğundan alt köşeler de yuvarlak. */
details.acilir { padding: 0; }
details.acilir > summary { list-style: none; cursor: pointer; user-select: none; gap: 10px; }
details.acilir > summary::-webkit-details-marker { display: none; }
details.acilir > summary .flow-count { margin-left: auto; }
details.acilir > summary .acilir-ok { font-size: 12px; opacity: .8; transition: transform .2s; }
details.acilir[open] > summary .acilir-ok { transform: rotate(180deg); }
details.acilir:not([open]) > summary { border-radius: 12px; }
details.acilir > summary:hover { filter: brightness(1.05); }

/* ============================================================================
   GÖMÜLÜ YERLEŞİM (_GomuluLayout) ve Geçiş Kuralları içindeki Etkileşim
   Tipleri penceresi
   ========================================================================== */
body.gomulu { background: var(--hkts-body-bg); margin: 0; }
.gomulu-govde { padding: 16px 18px 24px; }
.et-gomulu-baslik { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.et-gomulu-baslik .simge {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hkts-primary-light); color: var(--hkts-primary-dark); font-size: 18px;
}
.et-gomulu-baslik h2 { margin: 0; font-size: 18px; color: var(--hkts-heading); }
.et-gomulu-baslik p { margin: 2px 0 0; font-size: 12.5px; color: var(--hkts-muted); }

.etk-tipleri-modal {
    max-width: 1180px; width: 96%; height: 90vh; padding: 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.etk-tipleri-modal .et-modal-baslik { flex: 0 0 auto; }
.etk-tipleri-modal .et-modal-baslik h3 i { color: var(--hkts-primary); margin-right: 6px; }
.etk-tipleri-modal iframe { flex: 1; width: 100%; border: 0; background: var(--hkts-body-bg); }
@media (max-width: 700px) {
    .etk-tipleri-modal { width: 100%; height: 100vh; border-radius: 0; }
}

/* ============================================================================
   YAN MENÜ — konu grupları
   Başlık küçük büyük-harf etiket; daraltılmış menüde ve üst menü modunda
   başlık gizlenir, yalnızca ince bir ayırıcı kalır.
   ========================================================================== */
.sidebar nav .nav-grup { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hkts-border); }
.sidebar nav .nav-grup-baslik {
    display: block; padding: 2px 14px 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--hkts-muted); white-space: nowrap; overflow: hidden;
}
.layout.collapsed .sidebar nav .nav-grup-baslik { display: none; }
.layout.collapsed .sidebar nav .nav-grup { margin-top: 6px; padding-top: 6px; }
/* Arayüz modunda tüm bağlantıları gizlenen grup başlığıyla birlikte kaybolur. */
[data-arayuz="resepsiyon"] .sidebar nav .nav-grup:not([data-rol~="resepsiyon"]),
[data-arayuz="hekim"]      .sidebar nav .nav-grup:not([data-rol~="hekim"]) { display: none; }

/* Grup başlıkları açılır-kapanır: başlık düğme, ok yönü durumu söyler;
   kapalı grubun bağlantıları gizli. Daraltılmış menü ve üst menü modunda
   başlık zaten gizli olduğundan bağlantılar her zaman görünür. */
.sidebar nav .nav-grup-baslik {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: 0; cursor: pointer; font-family: inherit; border-radius: 6px;
}
.sidebar nav .nav-grup-baslik:hover { color: var(--hkts-primary-dark); background: var(--hkts-primary-soft); }
.sidebar nav .nav-grup-baslik i { font-size: 9px; transition: transform .2s; }
.sidebar nav .nav-grup.acik .nav-grup-baslik i { transform: rotate(180deg); }
.sidebar nav .nav-grup:not(.acik) .nav-grup-icerik { display: none; }
.layout.collapsed .sidebar nav .nav-grup:not(.acik) .nav-grup-icerik { display: block; }
/* Rol süzgeci her durumda kazanır (daraltılmış/üst menüdeki "her zaman görünür" kuralından da). */
[data-arayuz="resepsiyon"] .sidebar nav a:not([data-rol~="resepsiyon"]),
[data-arayuz="hekim"]      .sidebar nav a:not([data-rol~="hekim"]) { display: none !important; }

/* ---------------------------------------------- ÜST MENÜDE AÇILIR GRUPLAR
   Grup başlığı üst şeritte bir menü öğesi; tıklayınca bağlantılar altına
   açılan panelde listelenir. Aynı anda tek grup açık, dışarı tıklayınca kapanır. */
[data-nav="ust"] .sidebar nav { overflow: visible; }
[data-nav="ust"] .sidebar nav .nav-grup { position: relative; margin: 0; padding: 0; border: 0; }
[data-nav="ust"] .sidebar nav .nav-grup-baslik {
    width: auto; gap: 7px; padding: 10px 14px; border-radius: 8px;
    font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--hkts-sidebar-text); white-space: nowrap;
}
[data-nav="ust"] .sidebar nav .nav-grup-baslik i { font-size: 11px; }
[data-nav="ust"] .sidebar nav .nav-grup.acik .nav-grup-baslik,
[data-nav="ust"] .sidebar nav .nav-grup.aktif-icerir .nav-grup-baslik {
    background: var(--hkts-primary-light); color: var(--hkts-primary-dark); font-weight: 600;
}
[data-nav="ust"] .sidebar nav .nav-grup-icerik {
    display: none;
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 120;
    min-width: 230px; padding: 6px;
    background: var(--hkts-sidebar-bg); border: 1px solid var(--hkts-border); border-radius: 10px;
    box-shadow: 0 10px 30px var(--hkts-shadow-lg);
}
[data-nav="ust"] .sidebar nav .nav-grup.acik .nav-grup-icerik { display: block; }
[data-nav="ust"] .sidebar nav .nav-grup-icerik a { margin-bottom: 2px; padding: 9px 12px; }
/* Sağa yakın gruplar ekran dışına taşmasın. */
[data-nav="ust"] .sidebar nav .nav-grup.sag .nav-grup-icerik { left: auto; right: 0; }

/* ------------------------------------------ ÜST MENÜDE SAĞDAKİ ARAÇLAR
   Hareketler / e-posta / WhatsApp / kullanıcı / ayarlar bloğu (.topbar-araclar)
   üst menü modunda script ile menü şeridinin sağına taşınır; üst çubuk
   yalnızca sayfa başlığı taşıyorsa görünür, yoksa gizlenir. */
.topbar-araclar { display: flex; align-items: center; gap: 14px; }
[data-nav="ust"] .sidebar .topbar-araclar { margin-left: auto; gap: 10px; padding-right: 4px; }
[data-nav="ust"] .sidebar .topbar-araclar .icon-btn { width: 36px; height: 36px; font-size: 15px; }
[data-nav="ust"] .sidebar .topbar-araclar .user .avatar { width: 38px; height: 38px; font-size: 15px; }
[data-nav="ust"] .topbar.bos { display: none; }
[data-nav="ust"] .topbar { height: 58px; }

/* ============================================================================
   HASTA DETAYI — sekmeli düzen
   Profil kartının altında sekme çubuğu; her sekme bir bölüm. Genel sekmesi
   salt okunur bilgi kartları (dl listeleri), diğerleri mevcut kartlar.
   ========================================================================== */
.hd-sekmeler {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 6px;
    background: var(--hkts-surface); border: 1px solid var(--hkts-border-soft); border-radius: 12px;
    box-shadow: 0 2px 12px var(--hkts-shadow);
}
.hd-sekme {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border: 0; border-radius: 8px; background: none;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--hkts-muted); cursor: pointer;
    transition: background .15s, color .15s;
}
.hd-sekme i { font-size: 14px; }
.hd-sekme .sayi {
    min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
    font-size: 11px; font-weight: 700; background: var(--hkts-surface-2); color: var(--hkts-text);
}
.hd-sekme:hover { background: var(--hkts-surface-2); color: var(--hkts-heading); }
.hd-sekme.secili { background: var(--hkts-primary-light); color: var(--hkts-primary-dark); }
.hd-sekme.secili .sayi { background: var(--hkts-primary); color: var(--hkts-on-primary); }
.hd-pane { display: none; }
.hd-pane.secili { display: block; }
/* Sekme içindeki tek kartın alt boşluğu sayfa sonunda gereksiz. */
.hd-pane > .flow-card:last-child { margin-bottom: 0; }

/* --- Genel sekmesi --- */
.hd-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.hd-kart {
    background: var(--hkts-surface); border: 1px solid var(--hkts-border-soft); border-radius: 12px;
    box-shadow: 0 2px 12px var(--hkts-shadow); overflow: hidden;
}
.hd-kart-baslik {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    font-weight: 600; font-size: 13.5px; color: var(--hkts-heading);
    background: var(--hkts-surface-2); border-bottom: 1px solid var(--hkts-border);
}
.hd-kart-baslik i { color: var(--hkts-primary); }
.hd-kart-govde { padding: 12px 14px; }
.hd-liste { margin: 0; padding: 4px 14px; }
.hd-liste > div {
    display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: baseline;
    padding: 8px 0; border-bottom: 1px solid var(--hkts-border);
}
.hd-liste > div:last-child { border-bottom: 0; }
.hd-liste dt { margin: 0; font-size: 12.5px; color: var(--hkts-muted); }
.hd-liste dd { margin: 0; font-size: 13.5px; color: var(--hkts-heading); font-weight: 500; word-break: break-word; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.hd-liste dd a { color: var(--hkts-primary-dark); }
.hd-cip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--hkts-surface-2); color: var(--hkts-text);
}
.hd-cip .nokta { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.hd-cip.ok { background: var(--hkts-success-soft); color: var(--hkts-success-ink); }
.hd-cip.pasif { background: var(--hkts-danger-soft); color: var(--hkts-danger-ink); }
.hd-etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hd-not { font-size: 13.5px; line-height: 1.5; color: var(--hkts-text); white-space: pre-wrap; padding: 10px 12px; border-radius: 8px; background: var(--hkts-surface-2); }
.hd-bos { color: var(--hkts-muted); font-size: 13px; }
.hd-tehlike {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--hkts-danger); border-radius: 10px;
    font-size: 12.5px; color: var(--hkts-muted);
}

@media (max-width: 700px) {
    .hd-sekmeler { gap: 2px; padding: 4px; }
    .hd-sekme { padding: 8px 10px; font-size: 12.5px; gap: 6px; }
    .hd-sekme span { display: none; }
    .hd-sekme.secili span { display: inline; }
    .hd-izgara { grid-template-columns: 1fr; }
    .hd-liste > div { grid-template-columns: 110px minmax(0, 1fr); }
}

/* Geçiş kuralı formu: kaynak/hedef grup onay kutusu listeleri. */
.grup-secim-baslik { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.grup-secim-baslik .hepsi { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; font-size: 12px; color: var(--hkts-primary-dark); cursor: pointer; }
.grup-secim-baslik .hepsi input { margin: 0; accent-color: var(--hkts-primary); }
.grup-secim {
    display: grid; gap: 4px; max-height: 190px; overflow-y: auto;
    padding: 6px; border: 1px solid var(--hkts-input-border); border-radius: 8px; background: var(--hkts-surface);
}
.grup-secenek {
    display: flex !important; align-items: center; gap: 8px; margin: 0 !important;
    padding: 5px 8px; border-radius: 6px; font-weight: 500 !important; font-size: 13px; cursor: pointer;
}
.grup-secenek:hover { background: var(--hkts-surface-2); }
.grup-secenek:has(input:checked) { background: var(--hkts-primary-light); color: var(--hkts-primary-dark); }
.grup-secenek input { margin: 0; accent-color: var(--hkts-primary); }
.grup-secenek .nokta { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.grup-secim-not { display: block; margin-top: 5px; font-size: 11.5px; color: var(--hkts-muted); }
/* Koşul tipine göre gizlenen alanlar; hidden özniteliği .form-row kurallarına yenilmesin. */
#ruleForm [hidden] { display: none !important; }

/* Geçiş kuralı tablosu: kaynak grup bölüm başlığı; kaynak adı satırlarda tekrar etmez. */
.table tbody tr.kural-bolum,
.table tbody tr.kural-bolum:hover { background: var(--hkts-surface-2); }
.kural-bolum td { padding: 8px 14px; font-size: 12.5px; }
.kural-bolum .nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.kural-bolum .ad { font-weight: 600; }
.kural-bolum .adet { margin-left: 10px; color: var(--hkts-muted); }
.kural-ok { color: var(--hkts-muted); font-size: 11px; margin-right: 4px; }
/* Ok + hedef rozeti, koşul rozeti ve işlem düğmeleri tek satırda kalsın; kırılınca satırlar üç kat uzuyordu. */
.kural-hedef, .kural-kosul, #rulesTable .badge, #rulesTable td:last-child { white-space: nowrap; }
/* İşlem düğmeleri flex satırı: inline formlar bazı tarayıcılarda (eklenti enjeksiyonu)
   bloğa bölünüp alt alta düşüyordu; flex öğesi olarak yatay kalırlar. */
.kural-islem { display: flex; align-items: center; gap: 4px; }
.kural-islem form { display: flex; margin: 0; }
/* Koşul sütunu: etkileşim kuralı (çoğunluk) düz metin + balon ikon; zaman kuralı
   (azınlık) saat ikonlu turuncu rozet — göz önce istisnayı yakalar. */
.kural-kosul > .fa { color: var(--hkts-primary); width: 16px; text-align: center; margin-right: 4px; }
.kural-kosul .badge .fa { margin-right: 3px; }