/* ============================================================
   SUPPLIER PORTAL — Login & Layout
   Amber/orange palette, compact spacing
   ============================================================ */

:root {
    --sp-primary: #f59e0b;
    --sp-primary-dark: #d97706;
    --sp-primary-light: #fbbf24;
    /* Segmented (pill) tab — AKTİF segment rengi. Portal STANDARDI: tek kaynak.
       Mevzuat Uyum (.cmp-seg-btn) + Filo/Dorse/Sürücü L2 (.sp-l2tab) ortak active rengi.
       Marka turuncusu (sp-gradient bitiş tonu). */
    --sp-seg-active: #ea580c;
    --sp-gradient: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    --sp-bg: #fafaf9;
    --sp-bg-card: #ffffff;
    --sp-bg-input: #f5f5f4;
    --sp-text: #1c1917;
    --sp-text-muted: #78716c;
    --sp-text-secondary: #57534e;
    --sp-border: #e7e5e4;
    --sp-bg-soft: #f8f8f7;
    --sp-bg-hover: #eeedeb;
    --sp-bg-body: #fafaf9;
    --sp-danger: #dc2626;
    --sp-radius: 10px;
    --sp-radius-sm: 6px;
    --sp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --sp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

    --sp-login-bg-start: #1c0f00;
    --sp-login-bg-mid: #2a1a08;
    --sp-login-bg-end: #3d2410;
    --sp-login-node: rgba(245, 158, 11, 0.25);
    --sp-login-node-glow: rgba(245, 158, 11, 0.5);

    --sp-topbar-h: 60px;
    --sp-sidebar-w: 248px;
    --sp-sidebar-collapsed: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--sp-bg);
    color: var(--sp-text);
    line-height: 1.5;
}

/* ============================================================
   FİLO YÖNETİMİ — sub-tabs, grid, vehicle modal
   ============================================================ */

/* Alt tab bar (örnek modül pattern) */
.sp-subtabs {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.sp-subtab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sp-subtab svg { width: 15px; height: 15px; }
.sp-subtab:hover { color: var(--sp-text); border-color: var(--sp-primary); }
.sp-subtab.active {
    background: var(--sp-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 9px -2px rgba(234, 88, 12, 0.4);
}

.sp-fmpane { display: none; }
.sp-fmpane.active { display: block; animation: spFadeIn 0.22s ease; }

/* ----------------------------------------------------------------------------
   Level-2 sub-tabs (kompakt pill — Mevzuat .cmp-seg paterniyle uyumlu).
   Varlık tab'larının (Araçlar/Dorseler/Sürücüler) içinde alt-tab şeridi:
   [Liste][Lastik][Bakım][Muayene][Evrak]. Mor accent (portal varsayılan).
   ---------------------------------------------------------------------------- */
.sp-l2tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--sp-bg-soft, var(--sp-border));
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sp-l2tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sp-l2tab svg { width: 14px; height: 14px; }
.sp-l2tab:hover { color: var(--sp-text); }
.sp-l2tab.active {
    background-color: var(--sp-seg-active);   /* Mevzuat Uyum .cmp-seg ile ortak standart active rengi */
    color: #fff;
}
.sp-l2pane { display: none; }
.sp-l2pane.active { display: block; animation: spFadeIn 0.22s ease; }

/* Empty-state — alt-tab içinde "hazırlanıyor" mesajı için (Lastik/Bakım/Muayene/Evrak) */
.sp-l2-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 24px;
    text-align: center;
    background: var(--sp-bg-card);
    border: 1px dashed var(--sp-border);
    border-radius: 12px;
    color: var(--sp-text-muted);
}
.sp-l2-soon-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--sp-bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #797bf2;
    font-size: 22px;
}
.sp-l2-soon h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-l2-soon p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    max-width: 440px;
}
.sp-l2-soon-badge {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, #797bf2 0%, #5b5dd6 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sp-kpi-grid-7 { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1400px) { .sp-kpi-grid-7 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .sp-kpi-grid-7 { grid-template-columns: repeat(2, 1fr); } }

/* Status list (Genel Bakış) */
.sp-status-list { display: flex; flex-direction: column; }
.sp-status-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 2px;
    font-size: 13px; color: var(--sp-text);
    border-bottom: 1px solid var(--sp-border);
}
.sp-status-row:last-child { border-bottom: none; }
.sp-status-pill {
    min-width: 30px; text-align: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
}
.sp-status-pill.green { background: rgba(16,185,129,0.14); color: #059669; }
.sp-status-pill.amber { background: rgba(245,158,11,0.16); color: var(--sp-primary-dark); }
.sp-status-pill.orange { background: rgba(249,115,22,0.16); color: #c2410c; }
.sp-status-pill.red { background: rgba(239,68,68,0.14); color: #dc2626; }
.sp-doc-mini {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: #4338ca;
    background: rgba(99,102,241,0.12);
    border-radius: 9999px;
}

/* Grid toolbar */
.sp-grid-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.sp-grid-toolbar-left, .sp-grid-toolbar-right { display: flex; align-items: center; gap: 8px; }
.sp-grid-search {
    padding: 8px 12px;
    border: 1.5px solid var(--sp-border);
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 13px;
    color: var(--sp-text);
    outline: none;
    min-width: 220px;
    transition: border-color 0.2s ease;
}
.sp-grid-search:focus { border-color: var(--sp-primary); }

.sp-btn-danger {
    color: var(--sp-danger);
    border-color: var(--sp-border);
}
.sp-btn-danger:hover:not(:disabled) { border-color: var(--sp-danger); background: #fef2f2; }
.sp-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.sp-btn-danger svg { width: 14px; height: 14px; }
.sp-btn-danger-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: var(--sp-radius-sm);
    background-color: #ef4444;
    background-image: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.sp-btn-danger-solid:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25); }
.sp-btn-danger-solid:disabled { opacity: 0.5; cursor: not-allowed; }
.sp-btn-danger-solid svg,
.sp-btn-danger-solid i { width: 14px; height: 14px; font-size: 13px; }

/* Yeşil "tamamla/onayla" aksiyon butonu (emerald) — danger-solid ile aynı yapı, "tamamlandı" çağrışımı.
   Bakım popup'ı "Tamamla" gibi pozitif-bitirme aksiyonları için. */
.sp-btn-success-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: var(--sp-radius-sm);
    background-color: #10b981;
    background-image: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.sp-btn-success-solid:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 2px 6px rgba(5, 150, 105, 0.28); }
.sp-btn-success-solid:disabled { opacity: 0.5; cursor: not-allowed; }
.sp-btn-success-solid svg,
.sp-btn-success-solid i { width: 14px; height: 14px; font-size: 13px; }

/* Grid row action buttons */
.fm-row-actions { display: flex; gap: 5px; justify-content: center; }
.fm-row-btn {
    width: 26px; height: 26px;
    border: none;
    background: var(--sp-bg-input);
    color: var(--sp-text-muted);
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.14s ease, color 0.14s ease;
}
.fm-row-btn svg { width: 13px; height: 13px; }
.fm-row-btn:hover { background: var(--sp-primary); color: #fff; }
.fm-row-btn.danger:hover { background: var(--sp-danger); color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   FİRMAM > KULLANICILAR — su-* prefix (supplier-user)
   ════════════════════════════════════════════════════════════════════ */
.su-list { margin-top: 8px; }
.su-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--sp-text-muted);
    font-size: 13px;
    background: var(--sp-bg-body);
    border-radius: var(--sp-radius-sm);
}
.su-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.su-table thead th {
    text-align: left;
    font-weight: 700;
    color: var(--sp-text-muted);
    letter-spacing: 0.4px;
    font-size: 10.5px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--sp-border);
}
.su-table tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-text);
    vertical-align: middle;
}
.su-table tbody tr:last-child td { border-bottom: 0; }
.su-table tbody tr:hover { background: rgba(245,158,11,0.04); }
.su-table .su-mut { color: var(--sp-text-muted); font-size: 11.5px; }
.su-table .su-actions { text-align: right; width: 50px; }
.su-self {
    font-size: 10.5px;
    color: #797bf2;
    font-weight: 600;
    margin-left: 4px;
}
.su-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.su-badge i {
    width: 5px; height: 5px; border-radius: 50%; display: inline-block;
}
.su-badge-live { background: rgba(16,185,129,0.13); color: #047857; }
.su-badge-live i { background: #10b981; }
.su-badge-pend { background: rgba(245,158,11,0.14); color: #b45309; }
.su-badge-pend i { background: #f59e0b; animation: cm-pulse 1.6s infinite; }
.su-remove-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--sp-border);
    color: var(--sp-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.su-remove-btn svg { width: 14px; height: 14px; }
.su-remove-btn:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.08); }
/* Mobil yetki ikonu — su-remove-btn kabuğu, turuncu hover (yıkıcı değil) */
.su-table .su-actions { width: 84px; white-space: nowrap; }
.su-table .su-actions .su-remove-btn + .su-remove-btn { margin-left: 6px; }
.su-mauth-btn:hover { border-color: var(--sp-primary); color: var(--sp-primary); background: rgba(245,158,11,0.10); }

/* ════════════════════════════════════════════════════════════════════
   MOBİL UYGULAMA YETKİSİ — sp-mauth-* (Profilim kartı + #SpModalMobileAuth)
   Logitera Kullanıcı Kartı "Mobil Yetkisi" tab'ının portal karşılığı (mobile-auth.js)
   ════════════════════════════════════════════════════════════════════ */
/* Profilim özet kartı */
.sp-mauth-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.sp-mauth-kpi {
    padding: 10px 12px;
    background-color: var(--sp-bg-body);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
}
.sp-mauth-kpi span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--sp-text-muted); }
.sp-mauth-kpi strong { display: block; margin-top: 3px; font-size: 14px; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mauth-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-mauth-chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    color: #b45309;
    background-color: rgba(245,158,11,0.13);
    border: 1px solid rgba(245,158,11,0.28);
}
.sp-mauth-chip.is-none { color: var(--sp-text-muted); background-color: var(--sp-bg-body); border: 1px dashed var(--sp-border); font-weight: 500; }
@media (max-width: 700px) { .sp-mauth-summary { grid-template-columns: 1fr; } }

/* Modal — mobil uygulama durumu paneli */
.sp-mauth-status {
    padding: 10px 12px;
    background-color: var(--sp-bg-body);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-size: 12.5px;
}
.sp-mauth-status-muted { color: var(--sp-text-muted); }
.sp-mauth-status-empty { display: flex; align-items: center; gap: 8px; color: var(--sp-text-muted); }
.sp-mauth-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 14px;
}
.sp-mauth-status-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-mauth-status-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--sp-text-muted); }
.sp-mauth-status-value { font-size: 12.5px; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mauth-badge {
    display: inline-flex; align-items: center; align-self: flex-start;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.sp-mauth-badge.ms-active     { color: #047857; background-color: rgba(16,185,129,0.13); border: 1px solid rgba(16,185,129,0.3); }
.sp-mauth-badge.ms-background { color: #b45309; background-color: rgba(245,158,11,0.13); border: 1px solid rgba(245,158,11,0.3); }
.sp-mauth-badge.ms-logged_out { color: #b91c1c; background-color: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.3); }
.sp-mauth-badge.ms-closed,
.sp-mauth-badge.ms-none       { color: var(--sp-text-muted); background-color: var(--sp-bg-card); border: 1px solid var(--sp-border); }
@media (max-width: 700px) { .sp-mauth-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sp-mauth-shot-row { margin: 0; }

/* Araç çubuğu */
.sp-mauth-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-top: 4px;
}
.sp-mauth-toolbar-title { display: flex; align-items: center; gap: 8px; }
.sp-mauth-toolbar-title strong { font-size: 13px; color: var(--sp-text); }
.sp-mauth-count {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
    color: var(--sp-text-muted);
    background-color: var(--sp-bg-body);
    border: 1px solid var(--sp-border);
}
.sp-mauth-count.is-some { color: #b45309; background-color: rgba(245,158,11,0.13); border-color: rgba(245,158,11,0.28); }
.sp-mauth-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-mauth-tool { padding: 5px 10px; font-size: 11.5px; }
.sp-mauth-tool i { margin-right: 4px; font-size: 10.5px; }

/* Arama */
.sp-mauth-search {
    display: flex; align-items: center; gap: 8px;
    padding: 0 10px;
    height: 36px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sp-mauth-search:focus-within { border-color: var(--sp-primary); box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.sp-mauth-search svg { width: 15px; height: 15px; color: var(--sp-text-muted); flex-shrink: 0; }
.sp-mauth-search input { flex: 1; min-width: 0; border: 0; outline: 0; background-color: transparent; font-size: 13px; color: var(--sp-text); }
.sp-mauth-search input::placeholder { color: var(--sp-text-muted); }

/* Ağaç */
.sp-mauth-tree {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
    overflow: hidden;
}
.sp-mauth-empty { padding: 28px 16px; text-align: center; color: var(--sp-text-muted); font-size: 13px; }
.sp-mauth-list { list-style: none; margin: 0; padding: 0; }
.sp-mauth-node > .sp-mauth-row {
    display: flex; align-items: center; gap: 8px;
    min-height: 40px;
    padding-right: 12px;
    border-bottom: 1px solid var(--sp-border);
    transition: background-color 0.12s ease;
}
.sp-mauth-list.sp-mauth-level-0 > .sp-mauth-node:last-child > .sp-mauth-row { border-bottom: 0; }
.sp-mauth-node > .sp-mauth-row:hover { background-color: rgba(245,158,11,0.05); }
.sp-mauth-node.is-checked > .sp-mauth-row { background-color: rgba(245,158,11,0.07); }
.sp-mauth-node.is-hit > .sp-mauth-row .sp-mauth-name { color: #b45309; font-weight: 700; }
.sp-mauth-toggle {
    width: 22px; height: 22px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: transparent; border: 0; border-radius: 5px;
    color: var(--sp-text-muted); cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.sp-mauth-toggle svg { width: 13px; height: 13px; }
.sp-mauth-toggle:hover { background-color: rgba(245,158,11,0.12); color: var(--sp-primary); }
.sp-mauth-toggle.is-leaf { visibility: hidden; cursor: default; }
.sp-mauth-node.is-open > .sp-mauth-row .sp-mauth-toggle { transform: rotate(90deg); color: var(--sp-primary); }
.sp-mauth-check { position: relative; display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.sp-mauth-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sp-mauth-box {
    width: 18px; height: 18px;
    border: 1.5px solid var(--sp-border);
    border-radius: 5px;
    background-color: var(--sp-bg-card);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.sp-mauth-check:hover .sp-mauth-box { border-color: var(--sp-primary); }
.sp-mauth-check input:checked + .sp-mauth-box {
    background-color: var(--sp-primary); border-color: var(--sp-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}
.sp-mauth-check input:indeterminate + .sp-mauth-box {
    border-color: var(--sp-primary);
    background-image: linear-gradient(var(--sp-primary), var(--sp-primary));
    background-size: 10px 2.5px; background-position: center; background-repeat: no-repeat;
}
.sp-mauth-check input:focus-visible + .sp-mauth-box { box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }
.sp-mauth-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sp-mauth-dot.is-root { background-color: var(--sp-primary); }
.sp-mauth-dot.is-child { background-color: #10b981; }
.sp-mauth-name { font-size: 13px; color: var(--sp-text); cursor: default; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-mauth-node[data-level="0"] > .sp-mauth-row .sp-mauth-name { font-weight: 600; }
.sp-mauth-sub { font-size: 11px; color: var(--sp-text-muted); white-space: nowrap; cursor: pointer; }

/* Footer mesajı — ok/err renkleri */
.sp-modal-foot-msg.is-ok { color: #047857; }
.sp-modal-foot-msg.is-err { color: #b91c1c; }

/* ════════════════════════════════════════════════════════════════════
   ADRES DEFTERİM — ab-* (Kaynaklarım > Adres Defterim; address-book.js)
   Yalnız modül-özel kurallar; sekme/KPI/grid/filtre global sp-* sınıflarından gelir.
   ════════════════════════════════════════════════════════════════════ */
.ab-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 1100px) { .ab-charts { grid-template-columns: 1fr; } }
.ab-chart { width: 100%; height: 300px; }
.ab-chart-sm { height: 260px; }
.ab-card-actions { margin-left: auto; display: flex; gap: 6px; }
.ab-seg { padding: 4px 10px; font-size: 11.5px; }
.ab-seg.active { border-color: var(--sp-primary); color: var(--sp-primary); background-color: rgba(245,158,11,0.10); }
.ab-count {
    margin-left: auto;
    padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
    color: var(--sp-text-muted);
    background-color: var(--sp-bg-body);
    border: 1px solid var(--sp-border);
}
.ab-empty-note { padding: 28px 16px; text-align: center; color: var(--sp-text-muted); font-size: 13px; }

/* Adres tipi — çubuk görünümü */
.ab-type-bars { display: flex; flex-direction: column; gap: 10px; }
.ab-type-row { display: grid; grid-template-columns: 180px 1fr 90px; gap: 12px; align-items: center; }
.ab-type-name { font-size: 12.5px; font-weight: 600; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-type-track { height: 10px; border-radius: 999px; background-color: var(--sp-bg-body); border: 1px solid var(--sp-border); overflow: hidden; }
.ab-type-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.ab-type-val { font-size: 12px; color: var(--sp-text-muted); text-align: right; white-space: nowrap; }
.ab-type-val b { color: var(--sp-text); }
@media (max-width: 700px) { .ab-type-row { grid-template-columns: 120px 1fr 80px; } }

/* Adres tipi — kart görünümü */
.ab-type-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ab-type-card {
    padding: 12px 14px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-body);
    border-left-width: 4px;
}
.ab-type-card strong { display: block; font-size: 20px; color: var(--sp-text); line-height: 1.2; }
.ab-type-card span { display: block; font-size: 11.5px; color: var(--sp-text-muted); margin-top: 3px; }
.ab-type-card em { font-style: normal; font-size: 11px; color: var(--sp-text-muted); }

/* Şehir detay tablosu */
.ab-table-wrap { overflow-x: auto; }
.ab-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ab-table th {
    text-align: left; font-weight: 700; font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--sp-text-muted); padding: 8px 10px; border-bottom: 1px solid var(--sp-border); white-space: nowrap;
}
.ab-table td { padding: 8px 10px; border-bottom: 1px solid var(--sp-border); color: var(--sp-text); white-space: nowrap; }
.ab-table tbody tr:last-child td { border-bottom: 0; }
.ab-table tbody tr:hover { background-color: rgba(245,158,11,0.04); }
.ab-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ab-pct { display: inline-flex; align-items: center; gap: 8px; }
.ab-pct-track { width: 90px; height: 6px; border-radius: 999px; background-color: var(--sp-bg-body); border: 1px solid var(--sp-border); overflow: hidden; }
.ab-pct-fill { height: 100%; background-color: var(--sp-primary); }
.ab-badge {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
}
.ab-badge.is-high { color: #047857; background-color: rgba(16,185,129,0.13); }
.ab-badge.is-mid  { color: #b45309; background-color: rgba(245,158,11,0.14); }
.ab-badge.is-low  { color: var(--sp-text-muted); background-color: var(--sp-bg-body); border: 1px solid var(--sp-border); }
.ab-badge.is-on   { color: #047857; background-color: rgba(16,185,129,0.13); }
.ab-badge.is-off  { color: var(--sp-text-muted); background-color: var(--sp-bg-body); border: 1px solid var(--sp-border); }

/* Davet modal — bilgi kutusu */
.su-invite-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(121,123,242,0.08);
    border: 1px solid rgba(121,123,242,0.25);
    border-left: 3px solid #797bf2;
    border-radius: 6px;
    font-size: 12px;
    color: var(--sp-text);
    line-height: 1.5;
    text-align: left;
}
.su-invite-info svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: #797bf2;
    margin-top: 1px;
}
.su-invite-info strong { color: #4f46e5; font-weight: 700; }

/* DevExtreme grid container — Filo ekranı için kart wrap (sp-dxgrid class ile aynı görsel) */
#fmVehicleGrid, #fmTrailerGrid {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 8px;
}

/* Grid yüklenirken algı hızı — DevExtreme render olana kadar shimmer satırlar */
.sp-grid-skel { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.sp-grid-skel-row {
    height: 32px;
    border-radius: var(--sp-radius-sm);
    background: linear-gradient(90deg,
        rgba(245, 158, 11, 0.06) 0%,
        rgba(245, 158, 11, 0.14) 50%,
        rgba(245, 158, 11, 0.06) 100%);
    background-size: 200% 100%;
    animation: spGridSkelShimmer 1.2s ease-in-out infinite;
}
.sp-grid-skel-head {
    height: 40px;
    background: linear-gradient(90deg,
        rgba(245, 158, 11, 0.14) 0%,
        rgba(245, 158, 11, 0.22) 50%,
        rgba(245, 158, 11, 0.14) 100%);
    background-size: 200% 100%;
}
@keyframes spGridSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Filo ID-specific (sp-dxgrid class'ı zaten markup'ta var, ID kuralları backward-compat) */
#fmVehicleGrid .dx-datagrid, #fmTrailerGrid .dx-datagrid {
    background: transparent; font-family: 'Inter', sans-serif;
}
#fmVehicleGrid .dx-datagrid-headers, #fmTrailerGrid .dx-datagrid-headers {
    background: var(--sp-bg-input); color: var(--sp-text);
    font-weight: 700; border-bottom: 1px solid var(--sp-border);
}
#fmVehicleGrid .dx-datagrid-rowsview .dx-row > td,
#fmTrailerGrid .dx-datagrid-rowsview .dx-row > td {
    padding: 4px 10px; font-size: 12.5px; color: var(--sp-text); line-height: 1.35;
}
#fmVehicleGrid .dx-datagrid-rowsview .dx-data-row:hover > td,
#fmTrailerGrid .dx-datagrid-rowsview .dx-data-row:hover > td { background: rgba(245,158,11,0.06); }
#fmVehicleGrid .dx-datagrid .dx-row-alt > td,
#fmTrailerGrid .dx-datagrid .dx-row-alt > td { background: rgba(0,0,0,0.015); }
#fmVehicleGrid .dx-datagrid-rowsview .dx-selection > td,
#fmVehicleGrid .dx-datagrid-rowsview .dx-selection.dx-row:hover > td,
#fmTrailerGrid .dx-datagrid-rowsview .dx-selection > td,
#fmTrailerGrid .dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
    background: rgba(245,158,11,0.12) !important;
}
#fmVehicleGrid .dx-checkbox-checked .dx-checkbox-icon,
#fmTrailerGrid .dx-checkbox-checked .dx-checkbox-icon {
    background: var(--sp-primary); border-color: var(--sp-primary); color: #fff;
}
#fmVehicleGrid .dx-pager .dx-page.dx-selection,
#fmTrailerGrid .dx-pager .dx-page.dx-selection {
    background: var(--sp-gradient); color: #fff;
}

/* Modal — geniş (araç formu). Yüksek özgüllük: .sp-modal (text-align:center, 400px;
   ~satır 1422) ve .sp-modal-form (420px; ~satır 691) sonra geldiği için tek-class
   .sp-modal-xl'i ezerdi. İki class hedefleyip (0,2,0) sıradan bağımsız garantiliyoruz.
   text-align:left — label'lar .sp-modal'dan center miras alıp ortalanıyordu. */
/* §7.5 Size Hierarchy (2026-06-05 Hakan kararı):
   xs=360 (mini onay rezerve) · sm=620 (kompakt mini form) · md=880 (standart form) · lg=1120 (en büyük şu an) · xl=1280 (rezerve, gelecek için)
   Rota → lg, xl gelecek için saklı. */
.sp-modal.sp-modal-xl,
.sp-modal-form.sp-modal-xl { max-width: 1280px; width: 96vw; text-align: left; padding: 0; }

/* Modal sub-tab
   2026-06-23 STANDART — sub-tab sayısı modal genişliğini (lg=1120) aşınca KIRPMA/scroll yerine
   flex-wrap:wrap ile ALT SATIRA akar (eski "7 tab tek satıra sığar" varsayımı geçti; araç modalı 10 tab →
   son tab kırpılıyordu). Form modalında gizli navigasyon olmaması için tüm sekmeler bir bakışta görünür.
   ⚠️ Eski wrap-HACK (overflow:hidden + border-TOP + margin-top:-1px) "çift çizgi" bug'ı yaratıyordu →
   o KULLANILMAZ. Düz flex-wrap + mevcut border-BOTTOM / margin-bottom:-1px deseni güvenli: alt satır tab'ları
   container border'ına oturur (tek temiz çizgi); üst satır(lar)da satırlar arası gri çizgi YOK → çakışma yok,
   aktif tab kendi 2px primary indicator'ünü olduğu yerde taşır. */
.sp-modal-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 24px;
    border-bottom: 1px solid var(--sp-border);
    background-color: var(--sp-bg);
}
.sp-modal-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;        /* parent .sp-modal-subtabs border-bottom 1px gri çizgisini ez — çift çizgi bug fix */
    white-space: nowrap;        /* Tab metni asla wrap olmaz — "Boyutlar & Kapasite" tek satır */
    transition: color 0.15s ease, border-color 0.15s ease;
}
.sp-modal-subtab svg { width: 14px; height: 14px; }
.sp-modal-subtab:hover { color: var(--sp-text); }
.sp-modal-subtab.active {
    color: var(--sp-primary-dark);
    border-bottom-color: var(--sp-primary);
}

/* SpRouteModal'dan global'e taşındı (2026-06-05 fmVehicleModal yeni mod disabled tab pattern):
   vid > 0 gerektiren tab'lar (Belgeler/Kiralamalar/Lastikler) yeni mod'da disabled.
   pointer-events: auto — tooltip görünebilsin diye (click handler JS'te yutar). */
.sp-modal-subtab:disabled,
.sp-modal-subtab.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
    background-color: transparent;
    color: var(--sp-text-muted);
}
.sp-modal-subtab:disabled:hover,
.sp-modal-subtab.is-disabled:hover {
    background-color: transparent;
    color: var(--sp-text-muted);
    border-bottom-color: transparent;
}

/* ── Tab Dikkat Noktası — yanıp sönen kırmızı uyarı (yeniden kullanılabilir standart) ──
   Bir tab butonuna .sp-tab-alert eklenince sağ üst köşede yanıp sönen kırmızı nokta belirir
   (geçmiş bakım/muayene gibi dikkat isteyen durumlar). Toggle: spTabAlert(sel, on) (portal.js).
   Tüm tab seviyeleri için ortak: .sp-subtab / .sp-l2tab / .sp-tiretab / .sp-modal-subtab.
   Renk #ef4444 = protected danger accent. Nokta pointer-events:none → tıklamayı engellemez. */
.sp-tab-alert { position: relative; }
.sp-tab-alert::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ef4444;
    pointer-events: none;
    animation: sp-tab-alert-pulse 2s ease-in-out infinite;
}
@keyframes sp-tab-alert-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); opacity: 1; }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); opacity: 0.6; }
}

/* Sabit yükseklik — sekme/veri değişince popup zıplamaz, içerik kendi içinde kayar. */
.sp-vehicle-body { height: 60vh; overflow-y: auto; }
.sp-vpane { display: none; flex-direction: column; gap: 7px; }
.sp-vpane.active { display: flex; animation: spFadeIn 0.2s ease; }

/* Araç foto */
.sp-vphoto { display: flex; align-items: center; gap: 14px; }
.sp-vphoto-preview {
    width: 92px; height: 64px;
    border-radius: var(--sp-radius-sm);
    background: var(--sp-bg-input);
    border: 1px dashed var(--sp-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--sp-text-muted);
    overflow: hidden;
    flex-shrink: 0;
}
.sp-vphoto-preview svg { width: 26px; height: 26px; }
.sp-vphoto-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Note box */
.sp-note-box {
    display: flex; align-items: flex-start; gap: 9px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: var(--sp-radius-sm);
    padding: 11px 13px;
    font-size: 12px;
    color: var(--sp-text-muted);
    line-height: 1.5;
}
.sp-note-box svg { width: 16px; height: 16px; color: var(--sp-primary-dark); flex-shrink: 0; margin-top: 1px; }
.sp-note-box strong { color: var(--sp-text); }

/* Toggle switch */
.sp-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--sp-bg-input);
    border-radius: var(--sp-radius-sm);
}
.sp-toggle-row strong { display: block; font-size: 13px; color: var(--sp-text); }
.sp-toggle-row span { font-size: 11.5px; color: var(--sp-text-muted); }
.sp-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.sp-switch input { opacity: 0; width: 0; height: 0; }
.sp-switch-track {
    position: absolute; inset: 0;
    background: var(--sp-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.sp-switch-track::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.sp-switch input:checked + .sp-switch-track { background: var(--sp-primary); }
.sp-switch input:checked + .sp-switch-track::before { transform: translateX(18px); }

/* ============================================================
   PORTAL — Shell (topbar + sidebar + main)
   ============================================================ */

.sp-body {
    background: var(--sp-bg);
    min-height: 100vh;
}

/* --- Top Bar --- */
.sp-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--sp-topbar-h);
    background: var(--sp-bg-card);
    border-bottom: 1px solid var(--sp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    z-index: 1000;
}

.sp-topbar-left { display: flex; align-items: center; gap: 14px; }

.sp-hamburger {
    width: 34px; height: 34px;
    border: none;
    background: transparent;
    color: var(--sp-text-muted);
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sp-hamburger:hover { background: var(--sp-bg-input); color: var(--sp-primary-dark); }
.sp-hamburger svg { width: 19px; height: 19px; }

.sp-topbar-brand { display: flex; align-items: center; gap: 9px; }
.sp-topbar-mark {
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--sp-gradient);
    box-shadow: 0 3px 8px -2px rgba(234, 88, 12, 0.5);
}
.sp-topbar-name { font-size: 15px; font-weight: 700; color: var(--sp-text); letter-spacing: -0.2px; }

.sp-topbar-right { display: flex; align-items: center; gap: 4px; }
/* User chip ikonlardan biraz ayrılsın — geçiş hissi */
.sp-topbar-right .sp-user-chip { margin-left: 8px; }

.sp-icon-btn {
    position: relative;
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: var(--sp-text-muted);
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sp-icon-btn:hover { background: var(--sp-bg-input); color: var(--sp-primary-dark); }
.sp-icon-btn.is-open { background: var(--sp-bg-input); color: var(--sp-primary-dark); }   /* Analiz Parametreleri paneli açık */
.sp-icon-btn svg { width: 18px; height: 18px; }

/* Kokpit ikonu — mor vurgulu (CanliTakip turuncu, Kokpit mor) */
.sp-kokpit-btn { color: #797bf2; }
.sp-kokpit-btn:hover { background: rgba(121,123,242,.12); color: #6366f1; }
.sp-kokpit-dot {
    position: absolute; top: 6px; right: 6px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #797bf2;
    box-shadow: 0 0 0 2px var(--sp-bg-card);
    animation: kpDotPulse 2s ease-in-out infinite;
}
@keyframes kpDotPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--sp-bg-card), 0 0 0 0 rgba(121,123,242,.5); }
    50%      { box-shadow: 0 0 0 2px var(--sp-bg-card), 0 0 0 5px rgba(121,123,242,0); }
}
.sp-notif-dot {
    position: absolute; top: 7px; right: 7px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #ef4444; border: 2px solid var(--sp-bg-card);
}

/* --- User Chip + Dropdown --- */
.sp-user-chip {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    padding: 5px 9px 5px 5px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.sp-user-chip:hover { background: var(--sp-bg-input); }

.sp-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--sp-gradient);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.sp-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sp-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.sp-user-name { font-size: 12.5px; font-weight: 600; color: var(--sp-text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-user-role { font-size: 10.5px; color: var(--sp-text-muted); }
.sp-chev { width: 14px; height: 14px; color: var(--sp-text-muted); transition: transform 0.2s ease; }
.sp-user-chip.open .sp-chev { transform: rotate(180deg); }

.sp-user-menu {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    width: 200px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-lg);
    padding: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.sp-user-chip.open .sp-user-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }

.sp-user-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px;
    font-size: 13px; font-weight: 500;
    color: var(--sp-text);
    text-decoration: none;
    border-radius: var(--sp-radius-sm);
    transition: background-color 0.13s ease;
}
.sp-user-menu-item:hover { background: var(--sp-bg-input); }
.sp-user-menu-item svg { width: 15px; height: 15px; color: var(--sp-text-muted); }
.sp-user-menu-item.sp-danger-item { color: var(--sp-danger); }
.sp-user-menu-item.sp-danger-item svg { color: var(--sp-danger); }
.sp-user-menu-divider { height: 1px; background: var(--sp-border); margin: 5px 8px; }

/* --- Sidebar --- */
.sp-sidebar {
    position: fixed;
    top: var(--sp-topbar-h); left: 0; bottom: 0;
    width: var(--sp-sidebar-w);
    background: var(--sp-bg-card);
    border-right: 1px solid var(--sp-border);
    display: flex;
    flex-direction: column;
    transition: width 0.22s ease;
    z-index: 900;
}
.sp-sidebar.collapsed { width: var(--sp-sidebar-collapsed); }

.sp-nav { flex: 1; overflow-y: auto; padding: 6px 0; }
.sp-nav::-webkit-scrollbar { width: 5px; }
.sp-nav::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: 3px; }

.sp-nav-group { margin-bottom: 2px; }
.sp-nav-title {
    padding: 9px 20px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1px;
    text-transform: none;
    color: var(--sp-text-muted);
    opacity: 0.7;
    white-space: nowrap;
}
.sp-sidebar.collapsed .sp-nav-title { opacity: 0; height: 14px; padding: 6px 0; }

.sp-nav-item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    margin: 1px 8px;
    padding: 7px 12px;
    font-size: 13px; font-weight: 500;
    color: var(--sp-text-muted);
    text-decoration: none;
    border-radius: var(--sp-radius-sm);
    transition: background-color 0.14s ease, color 0.14s ease;
    white-space: nowrap;
}
.sp-nav-item:hover { background: rgba(245, 158, 11, 0.09); color: var(--sp-text); }
/* Aktif: solid turuncu blok yerine yumuşak amber tint + sol accent çubuğu */
.sp-nav-item.active {
    background: rgba(245, 158, 11, 0.13);
    color: var(--sp-primary-dark);
    font-weight: 600;
}
.sp-nav-item.active::before {
    content: "";
    position: absolute;
    left: 3px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 56%;
    background: var(--sp-primary);
    border-radius: 3px;
}
.sp-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.sp-nav-item.active svg { stroke: var(--sp-primary-dark); }
.sp-nav-item span { overflow: hidden; text-overflow: ellipsis; }

.sp-nav-badge {
    margin-left: auto;
    background: var(--sp-bg-input);
    color: var(--sp-text-muted);
    font-size: 10.5px; font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}
.sp-nav-item.active .sp-nav-badge { background: rgba(245,158,11,0.22); color: var(--sp-primary-dark); }

.sp-sidebar.collapsed .sp-nav-item { justify-content: center; padding: 9px; margin: 1px 10px; }
.sp-sidebar.collapsed .sp-nav-item span,
.sp-sidebar.collapsed .sp-nav-badge { display: none; }
.sp-sidebar.collapsed .sp-nav-item::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px); top: 50%;
    transform: translateY(-50%);
    padding: 6px 11px;
    background: var(--sp-text);
    color: #fff;
    font-size: 12px; font-weight: 500;
    border-radius: var(--sp-radius-sm);
    white-space: nowrap;
    opacity: 0; visibility: hidden;
    transition: opacity 0.14s ease;
    z-index: 1001;
}
.sp-sidebar.collapsed .sp-nav-item:hover::after { opacity: 1; visibility: visible; }

.sp-sidebar-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--sp-border);
    display: flex; flex-direction: column; gap: 2px;
    font-size: 10.5px; color: var(--sp-text-muted);
}
.sp-ver { opacity: 0.6; }
.sp-sidebar.collapsed .sp-sidebar-foot { display: none; }

/* --- Main --- */
.sp-main {
    margin-left: var(--sp-sidebar-w);
    margin-top: var(--sp-topbar-h);
    padding: 22px;
    min-height: calc(100vh - var(--sp-topbar-h));
    transition: margin-left 0.22s ease;
}
.sp-sidebar.collapsed ~ .sp-main { margin-left: var(--sp-sidebar-collapsed); }

/* --- Sections (SPA panes) --- */
.sp-section { display: none; }
.sp-section.active { display: block; animation: spFadeIn 0.22s ease; }

.sp-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 18px;
}
.sp-page-head h1 { font-size: 21px; font-weight: 800; color: var(--sp-text); letter-spacing: -0.4px; }
.sp-page-head p { font-size: 13px; color: var(--sp-text-muted); margin-top: 2px; }

.sp-badge-soft {
    background: rgba(245, 158, 11, 0.12);
    color: var(--sp-primary-dark);
    font-size: 11.5px; font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}

/* --- Hero --- */
/* Hero: koyu/siyah blok KALDIRILDI → sayfanın açık karakteriyle uyumlu
   yumuşak amber karşılama bandı (sidebar/pager ile aynı standart dil). */
.sp-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(245,158,11,0.14) 0%, rgba(245,158,11,0.05) 55%, var(--sp-bg-card) 100%);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 22px 24px;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.sp-hero-glow {
    position: absolute;
    width: 240px; height: 240px;
    right: -70px; top: -110px;
    background: radial-gradient(circle, rgba(245,158,11,0.16) 0%, transparent 70%);
    pointer-events: none;
}
.sp-hero-content { z-index: 1; }
.sp-hero-content h2 { font-size: 19px; font-weight: 700; color: var(--sp-text); margin-bottom: 5px; }
.sp-hero-content h2 strong { color: var(--sp-primary-dark); }
.sp-hero-content p { font-size: 13px; color: var(--sp-text-muted); }
.sp-hero-icon { z-index: 1; color: rgba(245, 158, 11, 0.5); }
.sp-hero-icon svg { width: 56px; height: 56px; }

/* --- KPI (standardize 2026-06-05) — `.sp-kpi-card` yeni standart class adı, `.sp-kpi` geri uyumluluk için alias --- */
.sp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.sp-kpi,
.sp-kpi-card {
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 16px;
    display: flex; align-items: center; gap: 13px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.sp-kpi:hover,
.sp-kpi-card:hover { box-shadow: var(--sp-shadow); transform: translateY(-2px); }
.sp-kpi-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sp-kpi-icon svg { width: 20px; height: 20px; color: #fff; }
.kpi-amber  { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.kpi-green  { background: linear-gradient(135deg, #10b981, #059669); }
.kpi-blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.kpi-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
/* ⭐ Acil/uyarı KPI ikon rengi — "Tarihi Geçmiş" gibi aksiyon gerektiren metrikler */
.kpi-rose   { background: linear-gradient(135deg, #ef4444, #dc2626); }
.sp-kpi-body { display: flex; flex-direction: column; }
.sp-kpi-value { font-size: 22px; font-weight: 800; color: var(--sp-text); line-height: 1.1; }
.sp-kpi-label { font-size: 12px; color: var(--sp-text-muted); margin-top: 2px; }
/* ⭐ KPI değerinin inline sub-text'i — "₺ 2.050 / 3 araç" gibi
   Değerden daha küçük, muted renk, sol margin ile boşluk */
.sp-kpi-value-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--sp-text-muted);
    margin-left: 6px;
    white-space: nowrap;
}

/* ── KPI kompakt varyant (STANDART) — .sp-kpi-grid.is-compact ──────────────────
   5-6 KPI'yı geniş ekranda TEK SATIRA sığdırmak için. Kart iç boşluğu/ikon/font
   küçülür; sütun sayısı içerikten (auto-fit) gelir → 6 kart tek satır, dar ekranda
   nazikçe sarar. Standart: gerektiğinde grid'e `is-compact` ekle (örn. Bildirim
   Logları KPI bandı #nlKpiGrid). 4 KPI'lık normal grid'e dokunmaz. */
.sp-kpi-grid.is-compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.sp-kpi-grid.is-compact .sp-kpi,
.sp-kpi-grid.is-compact .sp-kpi-card { padding: 12px; gap: 10px; }
.sp-kpi-grid.is-compact .sp-kpi-icon { width: 36px; height: 36px; border-radius: 9px; }
.sp-kpi-grid.is-compact .sp-kpi-icon svg { width: 17px; height: 17px; }
.sp-kpi-grid.is-compact .sp-kpi-icon i { font-size: 15px; }
.sp-kpi-grid.is-compact .sp-kpi-value { font-size: 18px; }
.sp-kpi-grid.is-compact .sp-kpi-label { font-size: 11px; }
/* Geniş ekranda 6 kartı garanti tek satır (auto-fit minmax'in alt sınırını sabitler). */
@media (min-width: 1280px) {
    .sp-kpi-grid.is-compact { grid-template-columns: repeat(6, 1fr); }
}

/* --- Cards --- */
.sp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.sp-card {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 18px 20px;
}
.sp-card-head { margin-bottom: 14px; }
.sp-card-head h3 { font-size: 15px; font-weight: 700; color: var(--sp-text); }
.sp-card-desc { font-size: 13px; color: var(--sp-text-muted); margin-bottom: 14px; line-height: 1.55; }

/* Kart içi çoklu buton satırı (örn. Depolar: "Tanımları Yönet" + "Depo Kurulumu") */
.sp-card-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-card-btnrow > .sp-btn,
.sp-card-btnrow > .sp-btn-ghost { flex: 1 1 auto; justify-content: center; }
/* Tek buton → tüm satırı kaplamasın (çok geniş duruyordu). Sola hizalı, içeriğe göre
   doğal genişlik. 2+ buton hâlâ satırı eşit paylaşır (yukarıdaki flex:1 1 auto). */
.sp-card-btnrow > .sp-btn:only-child,
.sp-card-btnrow > .sp-btn-ghost:only-child {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 180px;
    justify-content: center;
}

/* Depo Tanımları filtre iç-satırı (Ürün Tanımları .prod-filter-row deseniyle aynı) */
.dep-filter-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: nowrap;
}
.dep-filter-row .sp-group {
    flex: 1 1 0;
    min-width: 0;
    grid-column: unset;
}
.dep-filter-row .sp-group:first-child { flex: 2 1 0; }   /* Arama 2x geniş */
.dep-filter-row .dep-filter-actions { flex: 0 0 auto; margin-left: 4px; }
@media (max-width: 900px) {
    .dep-filter-row { flex-wrap: wrap; }
    .dep-filter-row .sp-group,
    .dep-filter-row .sp-group:first-child { flex: 1 1 calc(50% - 5px); }
    .dep-filter-row .dep-filter-actions { flex: 1 1 100%; justify-content: flex-end; margin-left: 0; }
}

/* Depo Tanımları — tip tab şeridi (Ürün Tanımları .sp-prod-types deseniyle aynı) */
.sp-dep-types { margin-bottom: 12px; }
.sp-dep-types .sp-subtab { position: relative; padding-right: 36px; }
.sp-dep-type-count {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background-color: var(--sp-bg-input);
    color: var(--sp-text-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sp-dep-types .sp-subtab.active .sp-dep-type-count {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* --- Checklist --- */
.sp-checklist { display: flex; flex-direction: column; gap: 9px; }
.sp-check-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--sp-text-muted);
}
.sp-check-mark {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--sp-border);
    position: relative;
    flex-shrink: 0;
}
.sp-check-item.done { color: var(--sp-text); }
.sp-check-item.done .sp-check-mark { background: #10b981; border-color: #10b981; }
.sp-check-item.done .sp-check-mark::after {
    content: '';
    position: absolute;
    width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    top: 2px; left: 5.5px;
    transform: rotate(45deg);
}

/* --- Empty states --- */
.sp-empty {
    background: var(--sp-bg-card);
    border: 1px dashed var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 56px 24px;
    text-align: center;
}
.sp-empty-art {
    width: 76px; height: 76px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: rgba(245, 158, 11, 0.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--sp-primary);
}
.sp-empty-art svg { width: 36px; height: 36px; }
.sp-empty h3 { font-size: 17px; font-weight: 700; color: var(--sp-text); margin-bottom: 7px; }
.sp-empty p { font-size: 13px; color: var(--sp-text-muted); max-width: 380px; margin: 0 auto 16px; line-height: 1.55; }
.sp-empty-tag {
    display: inline-block;
    background: rgba(245, 158, 11, 0.12);
    color: var(--sp-primary-dark);
    font-size: 11px; font-weight: 600;
    padding: 5px 13px;
    border-radius: 999px;
}
.sp-empty-mini {
    text-align: center;
    padding: 26px 12px;
    color: var(--sp-text-muted);
}
.sp-empty-mini svg { width: 28px; height: 28px; margin-bottom: 8px; opacity: 0.4; }
.sp-empty-mini p { font-size: 12.5px; }

/* --- Profile photo --- */
.sp-photo-box { display: flex; align-items: center; gap: 18px; }
.sp-photo-avatar {
    width: 74px; height: 74px;
    border-radius: 50%;
    background: var(--sp-gradient);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
}
.sp-photo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-photo-actions { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.sp-photo-hint { font-size: 11px; color: var(--sp-text-muted); }

/* --- Info grid --- */
.sp-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
}
.sp-info-row {
    display: flex; flex-direction: column; gap: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-info-row span { font-size: 11.5px; color: var(--sp-text-muted); }
.sp-info-row strong { font-size: 13.5px; font-weight: 600; color: var(--sp-text); }

/* --- Form Modal --- */
.sp-modal-form {
    max-width: 420px;
    max-height: 92vh;                     /* viewport'a sığsın — uzun modal'lar (multi-tab, kalem grid) dikey taşmaz */
    text-align: left;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;               /* head + body + foot dikey kolon */
}
.sp-modal-form > .sp-modal-form-body {
    flex: 0 1 auto;                       /* grow YOK → kısa içerikte body küçük (picker), shrink VAR → uzun içerikte modal max-height taşarsa body küçülür + scroll'lu */
    overflow-y: auto;                     /* head/foot fixed; body taşınca kendi içinde scroll */
    min-height: 0;                        /* flex item min-content height bypass — scroll çalışsın */
}

/* Modal Size Variants (2026-06-05 — sp_ui_standards §7.5 size scale) — KULLANIM:
   <div class="sp-modal sp-modal-form sp-modal-{sm|md|lg|xl}"> ...
   sp-modal-form default 420px (kompakt — tek alan). md ~620px (mini modal, 2 alan yan yana).
   lg ~760px (orta form). xl 880px (geniş multi-tab modal). */
/* ⚠️ KRİTİK — TÜM size variant'larda `text-align: left` + `padding: 0` AÇIKÇA tanımlı olmalı.
   Sebep: .sp-modal base class (line 1754+) source order'da .sp-modal-form (line 978) SONRASINDA tanımlı,
   text-align: center + padding: 24px override ediyor. Variant rule'larında specificity (0,2,0) ile
   .sp-modal'ı geçmek için bu 2 property açıkça yazılmalı — yoksa modal başlık ortalı, label'lar input
   üstüne kayar, footer altında 24px ekstra beyaz boşluk olur. */
.sp-modal-form.sp-modal-xs { max-width: 360px;  width: 94vw; text-align: left; padding: 0; }
.sp-modal-form.sp-modal-sm { max-width: 620px;  width: 94vw; text-align: left; padding: 0; }
.sp-modal-form.sp-modal-md { max-width: 880px;  width: 94vw; text-align: left; padding: 0; }
.sp-modal-form.sp-modal-lg { max-width: 1120px; width: 96vw; text-align: left; padding: 0; }
.sp-modal-form-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 11px 24px 12px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-modal-head-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-modal-form-head h3 { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--sp-text); }
.sp-modal-meta { font-size: 11px; color: var(--sp-text-muted); line-height: 1.3; }
.sp-modal-meta b { font-weight: 600; color: var(--sp-text); }
.sp-modal-meta .sp-meta-sep { margin: 0 7px; opacity: 0.4; }
/* Standart "popup header log değerleri" — label : değer (değer hafif kalın). Durum dışında badge kullanılmaz. */
.sp-modal-meta .sp-meta-field { display: inline-flex; align-items: center; gap: 4px; }
.sp-modal-meta .sp-meta-label { color: var(--sp-text-muted); font-weight: 500; }
.sp-modal-meta .sp-meta-val { font-weight: 600; color: var(--sp-text); }
/* Kapatma butonu — belirgin dairesel buton (önce çok cılızdı). */
.sp-modal-close {
    width: 34px; height: 34px;
    border: none; background: var(--sp-bg-input);
    color: var(--sp-text);
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.sp-modal-close:hover { background: var(--sp-danger); color: #fff; transform: rotate(90deg); }
.sp-modal-close svg { width: 19px; height: 19px; }
.sp-modal-form-body { padding: 16px 24px; display: flex; flex-direction: column; gap: 13px; scrollbar-gutter: stable; }
/* Uzun içerikli (kart/grafik istifli) modal gövdeleri için scroll güvencesi. Flex-column body'de
   overflow:hidden taşıyan kartlar (.rvd-card) min-height:auto→0 olup KÜÇÜLEBİLİR; içerik 92vh'yi aşınca
   body scroll etmek yerine kartı ezer (içerik kırpılır, scroll çıkmaz). flex-shrink:0 → çocuklar doğal
   yüksekliğini korur, body taşar ve overflow-y:auto scroll'u devreye girer. Opt-in (mevcut modalları etkilemez). */
.sp-modal-form-body.sp-scrollbody > * { flex-shrink: 0; }
.sp-modal-form-foot {
    display: flex; justify-content: flex-end; gap: 9px;
    padding: 14px 24px;
    border-top: 1px solid var(--sp-border);
    background: var(--sp-bg);
}
.sp-modal-form-foot .sp-btn,
.sp-modal-form-foot .sp-btn-ghost,
.sp-modal-form-foot .sp-btn-success-solid,
.sp-modal-form-foot .sp-btn-danger-solid { margin-top: 0; padding: 9px 20px; font-size: 13px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    .sp-sidebar { transform: translateX(-100%); }
    .sp-sidebar.mobile-open { transform: translateX(0); }
    .sp-main { margin-left: 0; }
    .sp-sidebar.collapsed ~ .sp-main { margin-left: 0; }
    .sp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .sp-grid-2 { grid-template-columns: 1fr; }
    .sp-info-grid { grid-template-columns: 1fr; }
    .sp-user-meta { display: none; }
}

/* ============================================================
   LOGIN — Two-panel layout
   ============================================================ */

.sp-login {
    min-height: 100vh;
    display: flex;
    background: var(--sp-bg);
}

/* --- Left Panel --- */
.sp-login-left {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        var(--sp-login-bg-start) 0%,
        var(--sp-login-bg-mid) 50%,
        var(--sp-login-bg-end) 100%);
    background-size: 200% 200%;
    animation: spGradientShift 18s ease infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 32px;
    color: #fff;
}

@keyframes spGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.sp-node {
    position: absolute;
    border-radius: 50%;
    background: var(--sp-login-node);
    box-shadow: 0 0 24px var(--sp-login-node-glow);
    animation: spNodeFloat 8s ease-in-out infinite;
}

.sp-node--1 { width: 16px; height: 16px; top: 18%; left: 12%; animation-delay: 0s; }
.sp-node--2 { width: 10px; height: 10px; top: 32%; right: 18%; animation-delay: 1.5s; }
.sp-node--3 { width: 14px; height: 14px; bottom: 24%; left: 22%; animation-delay: 3s; }
.sp-node--4 { width: 8px; height: 8px; bottom: 18%; right: 14%; animation-delay: 4.5s; }

@keyframes spNodeFloat {
    0%, 100% { transform: translate(0, 0); opacity: 0.5; }
    50% { transform: translate(8px, -10px); opacity: 1; }
}

.sp-brand {
    text-align: center;
    margin-bottom: 36px;
    z-index: 1;
}

.sp-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.sp-brand-logo img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
}

.sp-brand-logo span {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
}

.sp-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-size: 12px;
    font-weight: 500;
    color: var(--sp-primary-light);
}

.sp-brand-badge svg {
    width: 14px;
    height: 14px;
}

.sp-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 460px;
    width: 100%;
    z-index: 1;
}

.sp-feature {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--sp-radius);
    padding: 14px;
    backdrop-filter: blur(8px);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sp-feature:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.sp-feature svg {
    width: 22px;
    height: 22px;
    color: var(--sp-primary-light);
    margin-bottom: 8px;
}

.sp-feature strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #fff;
}

.sp-feature span {
    display: block;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* --- Right Panel --- */
.sp-login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--sp-bg);
}

.sp-form-box {
    width: 100%;
    max-width: 380px;
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius);
    padding: 32px 28px;
    box-shadow: var(--sp-shadow-lg);
}

.sp-form-logo {
    text-align: center;
    margin-bottom: 18px;
}

.sp-form-logo img {
    height: 36px;
    width: auto;
}

.sp-form-header {
    text-align: center;
    margin-bottom: 22px;
}

.sp-form-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--sp-text);
    margin-bottom: 4px;
}

.sp-form-header p {
    font-size: 13px;
    color: var(--sp-text-muted);
}

.sp-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sp-text);
    margin-bottom: 5px;
}

.sp-input {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--sp-bg-input);
    border: 1.5px solid transparent;
    border-radius: var(--sp-radius-sm);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sp-input:focus-within {
    border-color: var(--sp-primary);
    background: var(--sp-bg-card);
}

.sp-input.has-error {
    border-color: var(--sp-danger);
    background: #fef2f2;
}

.sp-input > svg {
    width: 16px;
    height: 16px;
    color: var(--sp-text-muted);
    margin-left: 12px;
    flex-shrink: 0;
}

.sp-input input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-size: 13.5px;
    color: var(--sp-text);
    outline: none;
    font-family: inherit;
}

.sp-input input::placeholder {
    color: var(--sp-text-muted);
    opacity: 0.7;
}

.sp-eye {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    color: var(--sp-text-muted);
    display: flex;
    align-items: center;
}

.sp-eye:hover { color: var(--sp-primary); }

.sp-eye svg { width: 16px; height: 16px; }

.sp-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    margin-top: -4px;
}

.sp-remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--sp-text-muted);
    user-select: none;
}

.sp-remember input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--sp-primary);
    cursor: pointer;
}

.sp-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--sp-danger);
    padding: 9px 12px;
    border-radius: var(--sp-radius-sm);
    font-size: 12.5px;
    text-align: center;
}

.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--sp-gradient);
    color: #fff;
    border: none;
    padding: 7px 13px;
    border-radius: var(--sp-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    font-family: inherit;
    margin-top: 0;
}
.sp-btn svg { width: 14px; height: 14px; }

.sp-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -2px rgba(245, 158, 11, 0.4);
}

.sp-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.sp-btn.loading span { opacity: 0.6; }

.sp-btn svg { width: 16px; height: 16px; }

.sp-form-footer {
    margin-top: 18px;
    text-align: center;
    font-size: 11.5px;
    color: var(--sp-text-muted);
    line-height: 1.6;
}

.sp-form-footer p { margin: 2px 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .sp-login { flex-direction: column; }
    .sp-login-left { display: none; }
    .sp-login-right { padding: 16px; min-height: 100vh; }
    .sp-form-box { padding: 28px 22px; }
}

/* ============================================================
   SIGNUP — Multi-step wizard
   ============================================================ */

.sp-signup {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background:
        radial-gradient(circle at 15% 20%, rgba(245, 158, 11, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(234, 88, 12, 0.06) 0%, transparent 40%),
        var(--sp-bg);
}

.sp-signup-card {
    width: 100%;
    max-width: 560px;
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-lg);
    padding: 28px 32px;
    position: relative;
}

.sp-signup-head {
    text-align: center;
    margin-bottom: 22px;
    position: relative;
}

.sp-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--sp-radius-sm);
    background: var(--sp-bg-input);
    color: var(--sp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sp-back:hover {
    background: var(--sp-primary);
    color: #fff;
}

.sp-back svg { width: 16px; height: 16px; }

.sp-signup-logo {
    margin-bottom: 12px;
}

.sp-signup-logo img {
    height: 36px;
    width: auto;
}

.sp-signup-title h2 {
    font-size: 19px;
    font-weight: 700;
    color: var(--sp-text);
    margin-bottom: 4px;
}

.sp-signup-title p {
    font-size: 12.5px;
    color: var(--sp-text-muted);
}

/* --- Stepper --- */
.sp-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 22px;
}

.sp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.sp-step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sp-bg-input);
    color: var(--sp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sp-step.active .sp-step-circle {
    background: var(--sp-gradient);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 4px 10px -2px rgba(245, 158, 11, 0.4);
}

.sp-step.done .sp-step-circle {
    background: #10b981;
    color: #fff;
}

.sp-step span {
    font-size: 11px;
    color: var(--sp-text-muted);
    font-weight: 500;
}

.sp-step.active span,
.sp-step.done span {
    color: var(--sp-text);
}

.sp-step-line {
    flex: 0 0 60px;
    height: 2px;
    background: var(--sp-bg-input);
    margin: 0 6px;
    margin-bottom: 18px;
    border-radius: 2px;
    transition: background-color 0.25s ease;
}

.sp-step-line.done {
    background: #10b981;
}

/* --- Panes --- */
.sp-signup-form {
    display: flex;
    flex-direction: column;
}

.sp-pane {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.sp-pane.active {
    display: flex;
    animation: spFadeIn 0.25s ease;
}

@keyframes spFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 12 kolonlu hizalı grid (form standardı). Alanlar kendi track'ini DOLDURUR —
   max-width cap yok, sağda boşluk kalmaz. Genişlik = anlamına göre span. */
.sp-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px 10px;
}
.sp-row > .sp-group { grid-column: span 6; }          /* varsayılan: yarım satır */
.sp-row.sp-row-3 > .sp-group { grid-column: span 4; } /* üçlü satır: eşit 3 */
.sp-row > .sp-full { grid-column: 1 / -1; }           /* tam satır */

/* Anlamına göre span: xs ~ yıl/gün · sm ~ sayı/tarih · md ~ yarım · lg ~ geniş.
   Satırdaki alanlar 12'yi tamamlar → her şey hizalı, boşluksuz. */
.sp-row > .sp-group.sp-col-2 { grid-column: span 2; }  /* altılı satır: eşit 6 (1/6) */
.sp-row > .sp-group.sp-col-3 { grid-column: span 3; }
.sp-row > .sp-group.sp-col-4 { grid-column: span 4; }
.sp-row > .sp-group.sp-col-6 { grid-column: span 6; }
.sp-row > .sp-group.sp-col-8 { grid-column: span 8; }

.sp-group label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--sp-text);
    margin-bottom: 2px;
}

.sp-group input,
.sp-group select,
.sp-group textarea {
    width: 100%;
    padding: 5px 9px;
    border: 1.5px solid var(--sp-border);
    background: var(--sp-bg-input);
    border-radius: var(--sp-radius-sm);
    font-family: inherit;
    font-size: 12px;
    /* Dolu değerler koyu + 500 ağırlık → placeholder'dan net ayrışır */
    color: var(--sp-text);
    font-weight: 500;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    outline: none;
}

/* (Eski max-width cap sistemi kaldırıldı — span tabanlı 12-grid'e geçildi.) */

/* Placeholder standardı — soluk/muted + normal ağırlık (dolu değerden belirgin ayrı). */
.sp-group input::placeholder,
.sp-group textarea::placeholder { color: var(--sp-text-muted); opacity: 1; font-weight: 400; }

/* type=date — BOŞ hâl soluk (placeholder gibi); .has-value (JS ekler) ya da
   :focus → SEÇİLİ/aktif = koyu. type=date CSS ile boş/dolu ayrımı yapamaz. */
.sp-group input[type=date]::-webkit-datetime-edit,
.sp-group input[type=date]::-webkit-datetime-edit-text,
.sp-group input[type=date]::-webkit-datetime-edit-day-field,
.sp-group input[type=date]::-webkit-datetime-edit-month-field,
.sp-group input[type=date]::-webkit-datetime-edit-year-field { color: var(--sp-text-muted); }
.sp-group input[type=date].has-value::-webkit-datetime-edit,
.sp-group input[type=date].has-value::-webkit-datetime-edit-text,
.sp-group input[type=date].has-value::-webkit-datetime-edit-day-field,
.sp-group input[type=date].has-value::-webkit-datetime-edit-month-field,
.sp-group input[type=date].has-value::-webkit-datetime-edit-year-field,
.sp-group input[type=date]:focus::-webkit-datetime-edit,
.sp-group input[type=date]:focus::-webkit-datetime-edit-text,
.sp-group input[type=date]:focus::-webkit-datetime-edit-day-field,
.sp-group input[type=date]:focus::-webkit-datetime-edit-month-field,
.sp-group input[type=date]:focus::-webkit-datetime-edit-year-field { color: var(--sp-text); }
.sp-group input[type=date]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.sp-group input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 0.85; }

/* ── Bildirim tarihi durum rozeti ────────────────────────────────────────────
   Araç modalı > Bildirimler sekmesindeki tarih alanlarında, etiket SATIRINA sağa
   yaslı kompakt bir durum pill'i (gün kaldı / süresi doldu). Label flex olur →
   input ve grup yüksekliği DEĞİŞMEZ (mevcut compact oran birebir korunur).
   .sp-datefield class'ı JS (fleet.js notifBadge) tarafından eklenir. */
.sp-group.sp-datefield label {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sp-date-badge {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
/* Renkler korumalı accent tonları (light-only) */
.sp-date-badge-expired { background-color: rgba(239, 68, 68, 0.12); color: #dc2626; }
.sp-date-badge-week    { background-color: rgba(245, 158, 11, 0.15); color: #b45309; }
.sp-date-badge-month   { background-color: rgba(59, 130, 246, 0.12); color: #2563eb; }
.sp-date-badge-valid   { background-color: rgba(16, 185, 129, 0.12); color: #059669; }

/* ── Form içi aksiyon satırı (buton grubu) ───────────────────────────────────
   Bare <button> .sp-row (12-grid) içinde tek kolona düşüp metni sarıyordu →
   flex container ile buton içeriğine göre boyutlanır, sarmaz. */
.sp-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.sp-form-actions .sp-btn-ghost,
.sp-form-actions .sp-btn { white-space: nowrap; }

/* ── KM Tespit Bildirimi ─────────────────────────────────────────────────────
   Ayar gövdesi: modal body'nin gap:13px dikey ritmini wrapper içinde de uygula
   (aksi halde iç .sp-row/alanlar yapışık görünür — body gap yalnız doğrudan çocuklara işler). */
.sp-km-body {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.sp-km-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 2px;
}
.sp-km-info:empty { display: none; }
.sp-km-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input);
    font-size: 11px;
    font-weight: 500;
    color: var(--sp-text);
}
.sp-km-chip i { color: var(--sp-text-muted); font-size: 11px; }
.sp-km-chip strong { font-weight: 600; }
.sp-km-chip-ok i { color: #059669; }
.sp-km-chip-warn i { color: #b45309; }

.sp-group input:focus,
.sp-group select:focus,
.sp-group textarea:focus {
    border-color: var(--sp-primary);
    background: var(--sp-bg-card);
}

.sp-group input.has-error,
.sp-group select.has-error,
.sp-group textarea.has-error {
    border-color: var(--sp-danger);
    background: #fef2f2;
}

.sp-group textarea {
    resize: vertical;
    min-height: 44px;
    font-family: inherit;
}

.sp-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--sp-text-muted);
    margin-top: 4px;
}

.sp-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--sp-primary);
    flex-shrink: 0;
    cursor: pointer;
}

.sp-check a {
    color: var(--sp-primary-dark);
    text-decoration: underline;
}

.sp-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.sp-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
    padding: 6px 11px;
    border-radius: var(--sp-radius-sm);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    font-family: inherit;
}

.sp-btn-ghost:hover {
    border-color: var(--sp-primary);
    background: var(--sp-bg-input);
}

.sp-btn-ghost svg { width: 13px; height: 13px; }

/* Outline aksiyon butonu — normalde çerçeveli, hover'da içi dolar (toplu e-posta bildirimi vb.).
   Seçim yokken disabled (soluk + not-allowed). Toplu işlem butonları için standart. */
.sp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: transparent;
    border: 1px solid var(--sp-primary);
    color: var(--sp-primary-dark);
    padding: 6px 13px;
    border-radius: var(--sp-radius-sm);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.sp-btn-outline svg { width: 14px; height: 14px; }

.sp-btn-outline:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
}

/* Disabled — "yok" gibi durmasın diye opacity yerine net pasif görünüm:
   hafif gri dolgu + görünür çerçeve + soluk metin (devre dışı buton olduğu belli olur).
   NOT: native [disabled] hover event'i bastırır (popover çıkmaz) → JS .is-disabled class'ı
   kullanır (buton aktif kalır, hover popover çalışır; tıklama handler'da bloklanır). */
.sp-btn-outline:disabled,
.sp-btn-outline.is-disabled {
    cursor: not-allowed;
    background-color: var(--sp-bg-input);
    border-color: var(--sp-border);
    color: var(--sp-text-muted);
}

/* Araç popup "Muayene" sekmesi — Aktif/Son Muayene kartı (vehicle-inspection-tab.js renderActiveCard).
   Verdict'e göre sol kenar aksanı; alanlar 3 sütun definition grid. Diğer öğeler bm-* sınıflarını paylaşır. */
.vins-active-wrap { margin: 0 0 12px; }
.vins-active {
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-border);
    border-radius: 8px;
    padding: 12px 14px;
    background-color: var(--sp-bg-card);
}
.vins-active.is-pass { border-left-color: #059669; }
.vins-active.is-fail { border-left-color: #dc2626; }
.vins-active.is-pending { border-left-color: #d97706; }
.vins-active-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.vins-active-label { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.vins-active-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 16px;
}
.vins-af { display: flex; flex-direction: column; gap: 2px; }
.vins-af > span { font-size: 11px; color: var(--sp-text-muted); }
.vins-af > b { font-size: 13px; color: var(--sp-text); font-weight: 600; }

.sp-pane .sp-btn {
    margin-top: 0;
    padding: 9px 18px;
    font-size: 13px;
}

/* --- Summary (Step 3) --- */
.sp-summary {
    background: var(--sp-bg-input);
    border-radius: var(--sp-radius-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-summary-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-summary-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-primary-dark);
    letter-spacing: 0.3px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--sp-border);
    margin-bottom: 2px;
}

.sp-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    padding: 2px 0;
}

.sp-summary-row span {
    color: var(--sp-text-muted);
}

.sp-summary-row strong {
    color: var(--sp-text);
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* --- Modal --- */
.sp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 5, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* spConfirm (genel onay/uyarı pop-up'ı) — modal-üzerinde-modal stack pattern'i için
   z-index 10001 (sp-modal-overlay'den +2). Aksi halde purOrder/sipariş gibi modal
   açıkken spConfirm aynı z-index'te (9999) DOM sırasına düşer ve arkada kalır. */
#spConfirmOverlay {
    z-index: 10001;
}

/* Stacked modal — başka bir modal (firma/iş emri detayı) ÜZERİNE açılan leaf aksiyon modalları.
   Maliyet (SpRetreadCost) + Stoğa Aktar (SpReturnRetread) detay modalı üstünde açıldığında
   9999 DOM sırasına düşüp arkada kalmasın diye 10001 (spConfirm ile aynı stack katmanı). */
#SpModalRetreadCost,
#SpModalReturnRetread,
#SpModalSendToRetread,
#SpModalTireCost {
    z-index: 10001;
}

.sp-modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.sp-modal {
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-lg);
    max-width: 400px;
    width: calc(100% - 32px);
    padding: 24px;
    transform: translateY(12px) scale(0.96);
    transition: transform 0.2s cubic-bezier(.16,1,.3,1);
    text-align: center;
}

.sp-modal-overlay.show .sp-modal {
    transform: translateY(0) scale(1);
}

.sp-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.sp-modal-icon svg { width: 26px; height: 26px; color: #fff; }

.sp-modal-icon.error    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.sp-modal-icon.warning  { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); }
.sp-modal-icon.success  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.sp-modal-icon.info     { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }

.sp-modal h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-text);
    margin-bottom: 8px;
}

.sp-modal p {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin-bottom: 18px;
    line-height: 1.55;
    white-space: pre-line;
}

.sp-modal-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.sp-modal-actions .sp-btn {
    margin-top: 0;
    padding: 8px 22px;
    font-size: 13px;
}

/* --- Password Strength Meter --- */
.sp-pwd-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -4px;
}

.sp-pwd-bar {
    flex: 1;
    height: 4px;
    background: var(--sp-bg-input);
    border-radius: 2px;
    overflow: hidden;
}

.sp-pwd-fill {
    height: 100%;
    width: 0%;
    background: var(--sp-danger);
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 2px;
}

.sp-pwd-text {
    font-size: 11.5px;
    font-weight: 600;
    min-width: 70px;
    text-align: right;
}

.sp-pwd-reqs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    padding: 8px 10px;
    background: var(--sp-bg-input);
    border-radius: var(--sp-radius-sm);
}

.sp-pwd-req {
    font-size: 11.5px;
    color: var(--sp-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-pwd-req i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sp-border);
    position: relative;
    flex-shrink: 0;
}

.sp-pwd-req i::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    top: 1px;
    left: 4px;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sp-pwd-req.valid {
    color: #10b981;
}

.sp-pwd-req.valid i {
    background: #10b981;
}

.sp-pwd-req.valid i::before {
    opacity: 1;
}

/* --- Hint label --- */
.sp-hint {
    font-weight: 400;
    color: var(--sp-text-muted);
    font-size: 11px;
}

/* --- Success State --- */
.sp-success {
    text-align: center;
    padding: 8px 4px;
}

.sp-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    color: var(--sp-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.sp-success-icon svg {
    width: 30px;
    height: 30px;
}

.sp-success h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-text);
    margin-bottom: 10px;
}

.sp-success p {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin-bottom: 8px;
    line-height: 1.55;
}

.sp-success strong {
    color: var(--sp-text);
}

.sp-success-note {
    font-size: 11.5px !important;
    color: var(--sp-text-muted);
    margin-bottom: 20px !important;
    font-style: italic;
}

.sp-btn-block {
    display: inline-flex;
    width: 100%;
    text-decoration: none;
    justify-content: center;
}

/* --- Verify Email States --- */
.sp-verify-state {
    text-align: center;
    padding: 16px 4px;
}

.sp-verify-state h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-text);
    margin: 14px 0 8px;
}

.sp-verify-state p {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin-bottom: 20px;
    line-height: 1.55;
}

/* Onay sonrası geri sayım satırı — ana mesajın altında, daha sessiz */
.sp-verify-state .sp-verify-redirect {
    font-size: 12px;
    margin-top: -10px;
}

.sp-verify-redirect #verifyCountdown {
    font-weight: 700;
    color: var(--sp-primary);
}

.sp-verify-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--sp-bg-input);
    border-top-color: var(--sp-primary);
    border-radius: 50%;
    margin: 12px auto;
    animation: spSpin 0.9s linear infinite;
}

@keyframes spSpin {
    to { transform: rotate(360deg); }
}

/* --- Sign-up Link (Login footer) --- */
.sp-signup-link {
    color: var(--sp-primary-dark);
    font-weight: 600;
    text-decoration: none;
}

.sp-signup-link:hover {
    text-decoration: underline;
}

@media (max-width: 580px) {
    .sp-signup-card { padding: 22px 18px; }
    .sp-row, .sp-row.sp-row-3 { grid-template-columns: 1fr; }
    .sp-step-line { flex-basis: 28px; }
}

/* ============================================================
   DASHBOARD (placeholder)
   ============================================================ */

.sp-dashboard {
    min-height: 100vh;
    padding: 24px;
    background: var(--sp-bg);
}

.sp-dashboard-header {
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius);
    padding: 18px 22px;
    box-shadow: var(--sp-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.sp-dashboard-header h1 {
    font-size: 18px;
    font-weight: 600;
    color: var(--sp-text);
}

.sp-dashboard-header h1 small {
    font-size: 13px;
    font-weight: 400;
    color: var(--sp-text-muted);
    margin-left: 8px;
}

.sp-logout-btn {
    background: transparent;
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
    padding: 6px 14px;
    border-radius: var(--sp-radius-sm);
    font-size: 12.5px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
}

.sp-logout-btn:hover {
    background: var(--sp-bg-input);
    border-color: var(--sp-primary);
}

.sp-dashboard-content {
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius);
    padding: 32px;
    box-shadow: var(--sp-shadow);
    text-align: center;
    color: var(--sp-text-muted);
}

.sp-dashboard-content h2 {
    font-size: 20px;
    color: var(--sp-text);
    margin-bottom: 8px;
}

/* ==================================================================
   TRAILERS (Chat-C / Dorseler) — kendi domain bloğu
   2026-06-08 STANDARTLAŞTIRMA: dorse modal'ı global sp-modal-subtab + sp-vpane
   pattern'ine geçirildi (araç popup'ıyla AYNI görsel, çift çizgi fix dahil).
   Eski tr-subtabs/tr-subtab/tr-pane/tr-body sub-tab CSS rule'ları SİLİNDİ —
   HTML'de tr-* class'ları JS bind'leri (trailers.js .tr-subtab[data-ttab],
   .tr-pane[data-tpane]) için co-exist olarak KORUNDU.
   tr-body validation marker rule (~3239) ayrı bloktadır, korunuyor.
   ================================================================== */

/* ==== DRIVERS (Chat-B) — kendi prefix'li blok, ortak class override edilmez ==== */
/* SABİT yükseklik — içerik/sekmeye göre popup boyu oynamasın (kullanıcı isteği) */
.sp-driver-body { height: 62vh; overflow-y: auto; }

/* Sürücü tipi radio satırı (inline style yerine) */
/* Fotoğraf — Bilgiler tab'ında en üstte ortada (yuvarlak avatar) */
.dr-photo-top { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; }
.dr-photo-top .sp-vphoto-preview { width: 76px; height: 76px; border-radius: 50%; }
.dr-photo-top .sp-vphoto-preview img { border-radius: 50%; }

/* Sürücü tipi — KOMPAKT kart. Native radio gizli; seçim = turuncu border + dolgu + sağ köşede tik dairesi. */
.dr-radio-row { display: flex; gap: 8px; align-items: stretch; padding-top: 4px; }
.dr-radio {
    position: relative;
    flex: 1 1 0;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-weight: 600; font-size: 12.5px;
    padding: 9px 32px 9px 12px;          /* sağda köşe tik için boşluk */
    border: 1.5px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
    color: var(--sp-text-muted);
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.dr-radio input { position: absolute; opacity: 0; width: 0; height: 0; }   /* yuvarlak native radio gizli */
.dr-radio::after {                       /* köşe tik dairesi */
    content: '';
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid var(--sp-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; line-height: 1; color: #fff; font-weight: 700;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dr-radio:hover { border-color: var(--sp-primary); }
.dr-radio:has(input:checked) {
    border-color: var(--sp-primary);
    background-color: rgba(245, 158, 11, 0.08);
    color: var(--sp-text);
}
.dr-radio:has(input:checked)::after {
    content: '✓';
    border-color: var(--sp-primary);
    background-color: var(--sp-primary);
}

/* Şifre satırı (input + göster/üret butonları) */
.dr-pwd-row { display: flex; gap: 8px; align-items: center; }
.dr-pwd-row input { flex: 1; }
.dr-icon-sm { width: 16px; height: 16px; }

/* JS ile aç/kapa edilen ilk gizli durum (inline display:none yerine) */
.dr-hide { display: none; }

/* Inputlar soluk/bordersuz görünmesin — SADECE sürücü modalı scope'unda
   (ortak .sp-group input GLOBAL override edilmez; sadece .dr-modal-wide altında) */
.dr-modal-wide .sp-group input,
.dr-modal-wide .sp-group select,
.dr-modal-wide .sp-group textarea {
    border-color: var(--sp-border);
    background: var(--sp-bg-card);
}
.sp-dpane { display: none; flex-direction: column; gap: 7px; }
.sp-dpane.active { display: flex; animation: spFadeIn 0.2s ease; }
.dr-subtabs {
    display: flex;
    gap: 4px;
    padding: 0 24px;
    border-bottom: 1px solid var(--sp-border);
    background: var(--sp-bg);
}
.dr-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.dr-subtab svg { width: 14px; height: 14px; }
.dr-subtab:hover { color: var(--sp-text); }
.dr-subtab.active {
    color: var(--sp-primary-dark);
    border-bottom-color: var(--sp-primary);
}
/* Yeni ekleme modunda kilitli sekme (Belgeler/Bildirimler — kayıtlı sürücü gerektirir).
   pointer-events:auto bırakılır → tıklama JS guard'ında (switchDTab) engellenir (sp-modal-subtab deseni). */
.dr-subtab.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.dr-subtab.is-disabled:hover { color: var(--sp-text-muted); border-bottom-color: transparent; }

/* Sürücü modalı — araç ("Yeni Araç") modalı ile AYNI kompakt genişlik (sp-modal-xl: 880px/94vw).
   .sp-modal-form (max-width:420px) tek class olduğu için bileşik selector ile specificity garanti
   (Chat-A'nın sp-modal-xl deseniyle aynı). Ortak sp-modal-xl override EDİLMEZ, kendi class'ım. */
.sp-modal.dr-modal-wide,
.sp-modal-form.dr-modal-wide { max-width: 880px; width: 94vw; }

/* "Yeni Sürücü Ekle" — sp-btn (Sorgula) ile aynı boyut/standartta */
.dr-btn-add {
    background: var(--sp-gradient);
    color: #fff;
    border: none;
    padding: 7px 13px;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.3;
    border-radius: var(--sp-radius-sm);
    box-shadow: 0 4px 12px -3px rgba(234, 88, 12, 0.35);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.dr-btn-add:hover { box-shadow: 0 6px 14px -2px rgba(234, 88, 12, 0.45); transform: translateY(-1px); }
.dr-btn-add:active { transform: translateY(1px); }
.dr-btn-add svg { width: 14px; height: 14px; }

/* Bildirimler sekmesi — bölüm başlığı */
.dr-section-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-primary-dark);
    letter-spacing: 0.4px;
    margin: 12px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sp-border);   /* çizgi gri (sp-docs-divider ile aynı) */
}

/* ==== ALARMS (Chat-B) — KOMPAKT; ortak .sp-controls/.sp-content-card reuse ==== */
/* Slim özet şerit: skor + KPI tek satır */
.al-summary { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.al-score {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-width: 110px;
    background: var(--sp-bg-card);
    border: 2px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 8px 16px;
    transition: border-color 0.25s ease;
}
.al-score-num { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--sp-text); }
.al-score-cap { font-size: 10.5px; font-weight: 600; color: var(--sp-text-muted); }
.al-score-sub { font-size: 9.5px; font-weight: 500; color: var(--sp-text-muted); opacity: 0.8; margin-top: 1px; }
.al-kpi {
    display: flex; align-items: center; gap: 7px;
    flex: 1; min-width: 110px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 8px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.al-kpi:hover { border-color: var(--sp-primary); }
.al-kpi.active { border-color: var(--sp-primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22); }
.al-kpi-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; font-style: normal; }
.al-dot-crit { background: #ef4444; }
.al-dot-warn { background: #f59e0b; }
.al-dot-info { background: #3b82f6; }
.al-dot-clean { background: #10b981; }
.al-kpi b { font-size: 17px; font-weight: 800; color: var(--sp-text); }
.al-kpi span { font-size: 11.5px; color: var(--sp-text-muted); font-weight: 600; }

.al-count { margin-left: auto; font-size: 12px; color: var(--sp-text-muted); font-weight: 600; }

.al-list { display: flex; flex-direction: column; gap: 7px; }
.al-item {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 9px 14px 9px 16px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.al-item:hover { box-shadow: var(--sp-shadow); border-color: var(--al-c); }
.al-stripe {
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--al-c);
    border-radius: var(--sp-radius-sm) 0 0 var(--sp-radius-sm);
}
.al-ic {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--al-c) 14%, transparent);
    color: var(--al-c);
}
.al-ic svg { width: 15px; height: 15px; }
.al-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.al-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-line1 strong { font-size: 12.5px; color: var(--sp-text); }
.al-badge { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.al-rel { font-size: 11.5px; color: var(--sp-text); font-weight: 600; }
.al-desc { font-size: 11px; color: var(--sp-text-muted); }
.al-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; }
.al-ago { font-size: 11.5px; font-weight: 700; }
.al-go { font-size: 10.5px; color: var(--sp-primary-dark); font-weight: 600; }

.al-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px 20px;
    color: var(--sp-text-muted);
}
.al-empty svg { width: 34px; height: 34px; opacity: 0.5; }
.al-empty p { font-size: 12.5px; }

/* ==== BİLDİRİMLER kategori PILL bar — Alarmlar/Dosya Kontrolleri ile aynı görsel
   (nt-pill ayrı namespace; davranış: tek seçim, "Tümü" varsayılan aktif). */
.nt-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.nt-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nt-pill:hover { color: var(--sp-text); border-color: var(--sp-primary); }
.nt-pill svg { width: 15px; height: 15px; }
.nt-pill.active {
    background: var(--sp-gradient);
    color: #fff;
    border-color: transparent;
}
.nt-pill-count {
    background: rgba(0,0,0,0.08); color: inherit;
    font-size: 11px; font-weight: 700;
    padding: 1px 8px; border-radius: 999px;
    min-width: 22px; text-align: center;
}
.nt-pill.active .nt-pill-count { background: rgba(255,255,255,0.22); }

/* ==== ALARM kategori PILL bar — Dosya Kontrolleri .dc-pills ile birebir görsel
   (al-pill ayrı naming çünkü tab-bazlı; davranış: tek seçim, "Tümü" varsayılan aktif). */
.al-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.al-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.al-pill:hover { color: var(--sp-text); border-color: var(--sp-primary); }
.al-pill svg { width: 15px; height: 15px; }
.al-pill.active {
    background: var(--sp-gradient);
    color: #fff;
    border-color: transparent;
}
.al-pill-count {
    background: rgba(0,0,0,0.08); color: inherit;
    font-size: 11px; font-weight: 700;
    padding: 1px 8px; border-radius: 999px;
    min-width: 22px; text-align: center;
}
.al-pill.active .al-pill-count { background: rgba(255,255,255,0.22); }

/* ==== ALARM ACCORDION — varlık-bazlı (dc-asset paterniyle hizalı) ====
   Eski .al-item flat liste kaldırıldı; yerine .al-asset (head + body) ve içine .al-doc satırları. */
.al-asset {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.al-asset:hover { box-shadow: var(--sp-shadow); }
.al-asset.open { border-color: var(--sp-primary); box-shadow: var(--sp-shadow); }

.al-asset-head {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;  /* ic | name | badges | çan | count | caret */
    align-items: center; gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    background: transparent;
    border: none; width: 100%;
    text-align: left;
    font-family: inherit;
}
.al-asset-head .al-asset-ic {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245, 158, 11, 0.12);
    color: var(--sp-primary-dark);
}
.al-asset-head .al-asset-ic svg { width: 16px; height: 16px; }

.al-asset-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.al-asset-name strong { font-size: 13px; color: var(--sp-text); font-weight: 700; }
.al-asset-name span { font-size: 11px; color: var(--sp-text-muted); }

/* Severity rozetleri — count + label, sadece sıfırdan büyükse görünür (JS varolanları render eder) */
.al-asset-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.al-asset-badge {
    font-size: 10.5px; font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.al-asset-badge.al-sev-critical { background: rgba(239,68,68,0.14); color: #dc2626; }
.al-asset-badge.al-sev-warning  { background: rgba(245,158,11,0.18); color: #b45309; }
.al-asset-badge.al-sev-info     { background: rgba(59,130,246,0.14); color: #2563eb; }
.al-asset-badge.al-sev-missing  { background: rgba(148,163,184,0.18); color: #475569; }

.al-asset-count {
    font-size: 11px; font-weight: 700;
    color: var(--sp-text-muted);
    padding: 3px 10px;
    background: var(--sp-bg-input);
    border-radius: 999px;
    white-space: nowrap;
}

.al-asset-caret {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--sp-text-muted);
    transition: transform 0.2s ease;
}
.al-asset-caret svg { width: 14px; height: 14px; }
.al-asset.open .al-asset-caret { transform: rotate(180deg); }

/* Bildirim aç/kapa rozeti (eski "Bildirimler" sekmesinin Alarmlar'a taşınmış hâli) */
.al-asset-bell {
    width: 28px; height: 28px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    border: 1px solid transparent;
}
.al-asset-bell svg { width: 15px; height: 15px; }
.al-asset-bell.on  { color: #059669; background: rgba(16,185,129,0.12); }
.al-asset-bell.on:hover  { background: rgba(16,185,129,0.20); }
.al-asset-bell.off { color: #d97706; background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.35); }
.al-asset-bell.off:hover { background: rgba(245,158,11,0.26); }
.al-asset-bell.is-loading { opacity: 0.5; pointer-events: none; }
/* Çan yokken (sürücü) grid kolonunu doldurur → caret hep en sağda kalır */
.al-asset-bell-spacer { width: 0; height: 0; }

/* Plaka yanı "araç kartını aç" (kalem) butonu */
.al-asset-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.al-asset-open {
    width: 22px; height: 22px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; cursor: pointer; color: var(--sp-text-muted);
    transition: background-color 0.18s ease, color 0.18s ease;
}
.al-asset-open:hover { background: var(--sp-bg-input); color: var(--sp-primary-dark); }
.al-asset-open svg { width: 13px; height: 13px; }

/* Dosya Kontrolleri — asset adı yanı "kartı aç" (kalem) butonu (al-asset-open ile aynı görünüm) */
.dc-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dc-asset-open {
    width: 22px; height: 22px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; cursor: pointer; color: var(--sp-text-muted);
    transition: background-color 0.18s ease, color 0.18s ease;
}
.dc-asset-open:hover { background: var(--sp-bg-input); color: var(--sp-primary-dark); }
.dc-asset-open svg { width: 13px; height: 13px; }

/* "Sessiz Risk" özet çipi + nokta */
.al-dot-silent { background: #f59e0b; }
.al-kpi-silent.active { border-color: #f59e0b; background: rgba(245,158,11,0.12); }

/* Asset body — alarmları içerir */
.al-asset-body {
    border-top: 1px solid var(--sp-border);
    padding: 6px 14px 10px;
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(245, 245, 244, 0.5);
}

/* Tek alarm satırı — sol severity nokta + metin + rozet + aksiyon */
.al-doc {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center; gap: 10px;
    padding: 7px 8px;
    border-radius: var(--sp-radius-sm);
    transition: background-color 0.12s ease;
}
.al-doc:hover { background: var(--sp-bg-card); }
.al-doc-dot { width: 8px; height: 8px; border-radius: 50%; }
.al-doc-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.al-doc-text strong { font-size: 12.5px; color: var(--sp-text); font-weight: 700; }
.al-doc-desc { font-size: 11px; color: var(--sp-text-muted); }
.al-doc-badge {
    font-size: 10.5px; font-weight: 700;
    padding: 2px 9px; border-radius: 999px;
    white-space: nowrap;
}

/* Aksiyon butonları */
.al-doc-act {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 11px; font-weight: 600;
    color: var(--sp-primary-dark);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.al-doc-act:hover { background: rgba(245,158,11,0.08); border-color: var(--sp-primary); }
.al-doc-act svg { width: 12px; height: 12px; }

/* Dosya aksiyon butonu — <label> wrapping <input type="file"> (native picker) */
.al-doc-act.al-act-file { color: #2563eb; }
.al-doc-act.al-act-file:hover { background: rgba(37, 99, 235, 0.08); border-color: #2563eb; }
.al-doc-act.al-act-file.is-loading {
    opacity: 0.6;
    pointer-events: none;
    background: var(--sp-bg-input);
}
.al-doc-act.al-act-file.is-loading::after {
    content: 'Yükleniyor…';
    margin-left: 4px;
    font-size: 10px;
    color: var(--sp-text-muted);
}

/* Inline tarih edit form — date alarmlar için */
.al-edit {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 8px 4px;
    margin-top: 2px;
    border-top: 1px dashed var(--sp-border);
}
.al-edit-label { font-size: 11px; color: var(--sp-text-muted); font-weight: 600; }
.al-edit-input {
    padding: 5px 10px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 12px;
    color: var(--sp-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.al-edit-input:focus {
    outline: none;
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 2px rgba(245,158,11,0.18);
}
.al-edit-save, .al-edit-cancel {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.al-edit-save {
    background: var(--sp-gradient); color: #fff;
    border: 1px solid transparent;
}
.al-edit-save:hover { filter: brightness(0.96); }
.al-edit-save:disabled { opacity: 0.6; cursor: not-allowed; }
.al-edit-cancel {
    background: transparent; color: var(--sp-text-muted);
    border: 1px solid var(--sp-border);
}
.al-edit-cancel:hover { color: var(--sp-text); border-color: var(--sp-text-muted); }

/* missing severity dot için yeni renk */
.al-dot-missing { background: #94a3b8; }

@media (max-width: 720px) {
    .al-kpi span { display: none; }
    .al-asset-head { grid-template-columns: auto 1fr auto auto auto; }  /* ic | name | çan | count | caret (badges alt satır) */
    .al-asset-badges { grid-column: 1 / -1; padding: 2px 0 0; }
    .al-doc { grid-template-columns: 12px 1fr auto; }
    .al-doc-act { grid-column: 2 / -1; justify-self: end; }
}

/* ==== DOCCONTROLS (Chat-B) — Dosya Kontrolleri; varlık-merkezli 2-seviye accordion ==== */
/* Yapı: pill kategori (Çekici/Dorse/Sürücü) → varlık satırı (progress bar) → belge listesi (inline).
   Tarih chip/gün sayıları YOK — sadece Yüklü/Eksik (proxy: tarih girilmiş = yüklü).
   Inline tarih edit: mevcut VehiclesSubmit/DriversSubmit endpoint'lerini çağırır.
   Mevzuat Uyum tab'ı ile sorumluluk ayrımı: bu sekme = belgenin VARLIĞI; uyum = TARİH/SÜRE. */

.al-dot-missing { background: #94a3b8; }

/* Pill kategori bar — tek seçim, üst özet bu seçime göre filtrelenir */
.dc-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.dc-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dc-pill:hover { color: var(--sp-text); border-color: var(--sp-primary); }
.dc-pill svg { width: 15px; height: 15px; }
.dc-pill.active {
    background: var(--sp-gradient);
    color: #fff;
    border-color: transparent;
}
.dc-pill-count {
    background: rgba(0,0,0,0.08); color: inherit;
    font-size: 11px; font-weight: 700;
    padding: 1px 8px; border-radius: 999px;
    min-width: 22px; text-align: center;
}
.dc-pill.active .dc-pill-count { background: rgba(255,255,255,0.22); }

/* Varlık konteyneri (kategoriye göre filtrelenmiş liste) */
.dc-assets { display: flex; flex-direction: column; gap: 6px; }

/* Varlık satırı — kapalıyken sadece header + progress bar; tıklayınca body açılır */
.dc-asset {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.dc-asset:hover { box-shadow: var(--sp-shadow); }
.dc-asset.open { border-color: var(--sp-primary); box-shadow: var(--sp-shadow); }

.dc-asset-head {
    display: grid;
    grid-template-columns: auto 1fr 200px auto auto;
    align-items: center; gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    background: transparent;
    border: none; width: 100%;
    text-align: left;
    font-family: inherit;
}
.dc-asset-head .dc-asset-ic {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245, 158, 11, 0.12);
    color: var(--sp-primary-dark);
}
.dc-asset-head .dc-asset-ic svg { width: 16px; height: 16px; }
.dc-asset-name {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0;
}
.dc-asset-name strong { font-size: 13px; color: var(--sp-text); font-weight: 700; }
.dc-asset-name span { font-size: 11px; color: var(--sp-text-muted); }

/* Progress bar — gri zemin + yeşil dolu kısım (yüklü oran) */
.dc-progress {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
.dc-progress-bar {
    flex: 1; height: 8px;
    background: var(--sp-bg-input);
    border-radius: 999px;
    overflow: hidden;
}
.dc-progress-fill {
    height: 100%;
    background: #10b981;
    border-radius: 999px;
    transition: width 0.25s ease;
}
.dc-progress-fill.warn { background: #f59e0b; }
.dc-progress-fill.crit { background: #ef4444; }
.dc-progress-text { font-size: 11px; font-weight: 700; color: var(--sp-text-muted); white-space: nowrap; }

.dc-asset-count {
    font-size: 11px; font-weight: 700;
    color: var(--sp-text-muted);
    padding: 3px 10px;
    background: var(--sp-bg-input);
    border-radius: 999px;
    white-space: nowrap;
}
.dc-asset-count.has-miss { background: rgba(239,68,68,0.12); color: #b91c1c; }

.dc-asset-caret {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--sp-text-muted);
    transition: transform 0.2s ease;
}
.dc-asset-caret svg { width: 14px; height: 14px; }
.dc-asset.open .dc-asset-caret { transform: rotate(180deg); }

/* Varlık body — belge listesi (asset açıldığında görünür) */
.dc-asset-body {
    border-top: 1px solid var(--sp-border);
    padding: 6px 14px 10px;
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(245, 245, 244, 0.5);
}

/* Bölüm başlığı — modal'daki sp-docs-divider muadili (Yasal Evraklar / Sigorta vs.) */
.dc-section {
    display: flex; align-items: center; justify-content: space-between;
    margin: 8px 4px 2px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--sp-border);
}
.dc-section:first-child { margin-top: 2px; }
.dc-section-title {
    font-size: 10.5px; font-weight: 700;
    color: var(--sp-primary-dark);
    letter-spacing: 0.04em;
}
.dc-section-count {
    font-size: 10.5px; font-weight: 700;
    color: var(--sp-text-muted);
    padding: 1px 8px;
    background: var(--sp-bg-card);
    border-radius: 999px;
}

/* Belge satırı — sol: ikon + ad; sağ: durum badge + eylem buton(lar) */
.dc-doc {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center; gap: 10px;
    padding: 6px 8px;
    border-radius: var(--sp-radius-sm);
    transition: background-color 0.12s ease;
}
.dc-doc:hover { background: var(--sp-bg-card); }
.dc-doc-ic {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--sp-text-muted);
}
.dc-doc-ic svg { width: 13px; height: 13px; }
.dc-doc-name { font-size: 12.5px; color: var(--sp-text); font-weight: 600; }
.dc-doc-st {
    font-size: 10.5px; font-weight: 700;
    padding: 2px 9px; border-radius: 999px;
    white-space: nowrap;
}
.dc-doc-st.ok { background: rgba(16,185,129,0.14); color: #059669; }
.dc-doc-st.miss { background: rgba(148,163,184,0.18); color: #64748b; }

.dc-doc-act {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 11px; font-weight: 600;
    color: var(--sp-primary-dark);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dc-doc-act:hover { background: rgba(245,158,11,0.08); border-color: var(--sp-primary); }
.dc-doc-act svg { width: 12px; height: 12px; }

/* Dosya tipi action — <label> wrapping <input type="file"> (native file picker, user-gesture güvenli) */
.dc-doc-act-file {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 11px; font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.dc-doc-act-file:hover { background: rgba(37, 99, 235, 0.08); border-color: #2563eb; }
.dc-doc-act-file svg { width: 12px; height: 12px; }
.dc-doc-act-file.is-loading {
    opacity: 0.6;
    pointer-events: none;
    background: var(--sp-bg-input);
}
.dc-doc-act-file.is-loading::after {
    content: 'Yükleniyor…';
    margin-left: 4px;
    font-size: 10px;
    color: var(--sp-text-muted);
}

/* Dosya bölümü başlığı — turuncu yerine mavi (date/file görsel ayrımı) */
.dc-section.file .dc-section-title { color: #2563eb; }
.dc-section.file { border-bottom-color: rgba(37, 99, 235, 0.32); }

/* Dosya tipi doc satırı — hafif mavi tonla tarih satırlarından ayrı görünür */
.dc-doc.is-file { background: rgba(37, 99, 235, 0.025); }
.dc-doc.is-file:hover { background: rgba(37, 99, 235, 0.06); }

/* ==== ANA DASHBOARD (Tedarikçi giriş) — sadeleştirilmiş operasyonel düzen ====
   Vitrin elementleri (sps-hero, sps-timeline, sps-proof-grid, sps-d4-grid) kaldırıldı.
   sps-ops-strip artık en üstte; "hd-emphasis" modifier ile daha öne çıkarılır. */
.sps-ops-strip.hd-emphasis {
    border: 1.5px solid var(--sp-primary);
    box-shadow: var(--sp-shadow);
    background: linear-gradient(135deg, rgba(245,158,11,0.04), rgba(245,158,11,0.01));
}
.sps-ops-strip.hd-emphasis .sps-ops-it-body b { font-size: 20px; }

/* Hızlı eylemler — 4 buton barı (Filo Yönetimi > Genel Bakış'taki .fo-quick patterniyle hizalı) */
.hd-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 12px 0 14px;
}
.hd-quick-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--sp-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hd-quick-btn:hover {
    background: rgba(245,158,11,0.06);
    border-color: var(--sp-primary);
    color: var(--sp-primary-dark);
}
.hd-quick-btn svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--sp-primary-dark); }

@media (max-width: 720px) {
    .hd-quick { grid-template-columns: repeat(2, 1fr); }
}

/* ==== GENEL BAKIŞ (Fleet Overview) — anomali-merkezli operasyonel dashboard ====
   İlke: anomali ilk bakışta görünsün (kırmızı şerit), sayılar net, gereksiz görsel yok. */

/* Anomali şeridi — sadece expired > 0 ise görünür, kırmızı tonlu, dikkat çekici */
.fo-alert-bar {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 14px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(220,38,38,0.06));
    border: 1px solid rgba(239,68,68,0.35);
    border-left: 4px solid #ef4444;
    border-radius: var(--sp-radius-sm);
    color: var(--sp-text);
}
.fo-alert-bar svg { width: 22px; height: 22px; flex-shrink: 0; color: #ef4444; }
.fo-alert-text { flex: 1; font-size: 13px; line-height: 1.45; }
.fo-alert-text strong { color: #dc2626; font-weight: 700; }
.fo-alert-go {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: #ef4444; color: #fff;
    border: none; border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.fo-alert-go:hover { background: #dc2626; }

/* Sağlık skoru kartı — büyük yüzde + 3 alt skor */
.fo-health {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    margin: 0 0 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
}
.fo-health-main {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 20px 16px;
    background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(245,158,11,0.02));
    border-right: 1px solid var(--sp-border);
}
.fo-health-num {
    font-size: 44px; font-weight: 800;
    color: #10b981;
    line-height: 1;
}
.fo-health-cap { font-size: 12px; font-weight: 600; color: var(--sp-text-muted); }
.fo-health-state {
    margin-top: 4px;
    padding: 2px 12px;
    background: var(--sp-bg-input);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    color: var(--sp-text);
}

.fo-health-subs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.fo-sub {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 16px 12px;
    border-right: 1px solid var(--sp-border);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.fo-sub:last-child { border-right: none; }
.fo-sub:hover { background: rgba(245,158,11,0.04); }
.fo-sub-num { font-size: 22px; font-weight: 700; line-height: 1; color: var(--sp-text); }
.fo-sub-cap { font-size: 11.5px; font-weight: 600; color: var(--sp-text-muted); }
.fo-sub-hint { font-size: 10.5px; color: var(--sp-text-muted); margin-top: 2px; }

@media (max-width: 720px) {
    .fo-health { grid-template-columns: 1fr; }
    .fo-health-main { border-right: none; border-bottom: 1px solid var(--sp-border); }
}

/* Aksiyon kartları — Süresi Doldu / Yaklaşıyor / Hiç Girilmemiş (3 sütun) */
.fo-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 14px 0;
}
.fo-action-card {
    display: flex; flex-direction: column;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
}
.fo-action-card.crit { border-top: 3px solid #ef4444; }
.fo-action-card.warn { border-top: 3px solid #f59e0b; }
.fo-action-card.miss { border-top: 3px solid #94a3b8; }
.fo-action-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sp-border);
    background: var(--sp-bg-input);
}
.fo-action-head strong { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.fo-action-icon { display: flex; }
.fo-action-card.crit .fo-action-icon { color: #ef4444; }
.fo-action-card.warn .fo-action-icon { color: #f59e0b; }
.fo-action-card.miss .fo-action-icon { color: #64748b; }
.fo-action-head svg { width: 16px; height: 16px; }
.fo-action-count {
    font-size: 13px; font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
}
.fo-action-card.crit .fo-action-count { background: rgba(239,68,68,0.14); color: #dc2626; }
.fo-action-card.warn .fo-action-count { background: rgba(245,158,11,0.16); color: #b45309; }
.fo-action-card.miss .fo-action-count { background: rgba(148,163,184,0.18); color: #475569; }

.fo-action-list { flex: 1; padding: 6px 0; min-height: 180px; }
.fo-action-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 7px 14px;
    border-bottom: 1px dashed var(--sp-border);
}
.fo-action-item:last-child { border-bottom: none; }
.fo-item-asset { font-size: 12px; font-weight: 700; color: var(--sp-text); }
.fo-item-doc { font-size: 11px; color: var(--sp-text-muted); }
.fo-item-hint {
    grid-column: 2; grid-row: 1 / 3;
    align-self: center;
    font-size: 10.5px; font-weight: 600;
    white-space: nowrap;
}
.fo-action-card.crit .fo-item-hint { color: #dc2626; }
.fo-action-card.warn .fo-item-hint { color: #b45309; }
.fo-action-card.miss .fo-item-hint { color: #64748b; }

.fo-action-empty {
    padding: 28px 14px; text-align: center;
    font-size: 12px; color: var(--sp-text-muted);
}

.fo-action-go {
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--sp-border);
    font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--sp-primary-dark);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s ease;
}
.fo-action-go:hover { background: rgba(245,158,11,0.06); }

@media (max-width: 920px) {
    .fo-action-grid { grid-template-columns: 1fr; }
    .fo-action-list { min-height: auto; }
}

/* Hızlı eylemler — 4 buton barı */
.fo-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 6px 0 14px;
}
.fo-quick {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--sp-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fo-quick:hover {
    background: rgba(245,158,11,0.06);
    border-color: var(--sp-primary);
    color: var(--sp-primary-dark);
}
.fo-quick svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--sp-primary-dark); }

@media (max-width: 720px) {
    .fo-quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ==== TOPLU BİLDİRİM MODAL (Dosya Kontrolleri — "Toplu Bildirim" butonu) ==== */
/* sp-modal-form default 420px dar; bu modal için 680px (spot-cari/vault paterni) */
.sp-modal-form.dc-bn-modal { max-width: 680px; width: 94vw; text-align: left; padding: 0; }

.dc-bn-info {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 4px 0 14px;
    padding: 10px 14px;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: var(--sp-radius-sm);
    font-size: 12px; line-height: 1.5; color: var(--sp-text);
}
.dc-bn-info svg { width: 16px; height: 16px; flex-shrink: 0; color: #2563eb; margin-top: 1px; }
.dc-bn-info strong { font-weight: 700; }
/* Text node + inline <strong>'lar flex item olarak parçalanmasın — tek wrapper div */
.dc-bn-info-text { flex: 1; min-width: 0; }

.dc-bn-targets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}
.dc-bn-tgt {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--sp-bg-card);
    border: 1.5px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dc-bn-tgt:hover { border-color: var(--sp-primary); background: rgba(245, 158, 11, 0.04); }
.dc-bn-tgt input[type="checkbox"] {
    width: 18px; height: 18px;
    flex-shrink: 0;
    accent-color: var(--sp-primary);
    cursor: pointer;
}
.dc-bn-tgt:has(input:checked) {
    border-color: var(--sp-primary);
    background: rgba(245, 158, 11, 0.06);
}
.dc-bn-tgt:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--sp-bg-input);
}
.dc-bn-tgt-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dc-bn-tgt-l strong { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.dc-bn-tgt-l em { font-size: 11px; color: var(--sp-text-muted); font-style: normal; }

@media (max-width: 640px) {
    .dc-bn-targets { grid-template-columns: 1fr; }
}

/* Inline tarih edit form (belgeye basınca açılır) */
.dc-edit {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 8px 4px;
    margin-top: 2px;
    border-top: 1px dashed var(--sp-border);
}
.dc-edit-label { font-size: 11px; color: var(--sp-text-muted); font-weight: 600; }
.dc-edit-input {
    padding: 5px 10px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 12px;
    color: var(--sp-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dc-edit-input:focus {
    outline: none;
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 2px rgba(245,158,11,0.18);
}
.dc-edit-save, .dc-edit-cancel {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: var(--sp-radius-sm);
    font-family: inherit; font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dc-edit-save {
    background: var(--sp-gradient); color: #fff;
    border: 1px solid transparent;
}
.dc-edit-save:hover { filter: brightness(0.96); }
.dc-edit-save:disabled { opacity: 0.6; cursor: not-allowed; }
.dc-edit-cancel {
    background: transparent; color: var(--sp-text-muted);
    border: 1px solid var(--sp-border);
}
.dc-edit-cancel:hover { color: var(--sp-text); border-color: var(--sp-text-muted); }

.dc-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px 20px;
    color: var(--sp-text-muted);
}
.dc-empty svg { width: 34px; height: 34px; opacity: 0.5; }
.dc-empty p { font-size: 12.5px; }

@media (max-width: 740px) {
    .dc-asset-head { grid-template-columns: auto 1fr auto auto; }
    .dc-progress { grid-column: 1 / -1; padding: 4px 0 2px; }
    .dc-doc { grid-template-columns: 22px 1fr auto; }
    .dc-doc-act { grid-column: 2 / -1; justify-self: end; }
}

/* ==== NOTIFY (Chat-B) — Bildirimler/Sessiz Risk; .al-summary/.al-score/.al-kpi reuse ==== */
.nt-list { display: flex; flex-direction: column; gap: 7px; }
.nt-item {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--nt-c);
    border-radius: var(--sp-radius-sm);
    padding: 9px 14px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.nt-item:hover { box-shadow: var(--sp-shadow); }
.nt-ic {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--nt-c) 14%, transparent);
    color: var(--nt-c);
}
.nt-ic svg { width: 15px; height: 15px; }
.nt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nt-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nt-l1 strong { font-size: 12.5px; color: var(--sp-text); }
.nt-badge { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.nt-sub { font-size: 11px; color: var(--sp-text-muted); }
.nt-right { flex-shrink: 0; }
.nt-go { font-size: 10.5px; color: var(--sp-primary-dark); font-weight: 600; }
.nt-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px 20px;
    color: var(--sp-text-muted);
}
.nt-empty svg { width: 34px; height: 34px; opacity: 0.5; }
.nt-empty p { font-size: 12.5px; }

/* ==== BULKIMPORT (Chat-B) — Toplu İçe Aktar; ortak .sp-controls/.sp-content-card reuse ==== */
.bi-note { margin: 12px 0; }
.bi-mode-tabs { display: flex; gap: 6px; }
.bi-mode {
    padding: 7px 16px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bi-mode:hover { color: var(--sp-text); border-color: var(--sp-primary); }
.bi-mode.active { background: var(--sp-gradient); color: #fff; border-color: transparent; }

.bi-preview { display: flex; flex-direction: column; gap: 10px; }
.bi-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px 20px; color: var(--sp-text-muted); text-align: center;
}
.bi-empty svg { width: 34px; height: 34px; opacity: 0.5; }
.bi-empty p { font-size: 12.5px; max-width: 460px; }

.bi-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.bi-chip {
    font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
    background: var(--sp-bg-input); color: var(--sp-text-muted);
}
.bi-chip.new { background: rgba(16,185,129,0.14); color: #059669; }
.bi-chip.upd { background: rgba(59,130,246,0.14); color: #2563eb; }
.bi-chip.err { background: rgba(239,68,68,0.14); color: #dc2626; }

.bi-tbl { display: flex; flex-direction: column; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); overflow: hidden; }
.bi-tr {
    display: grid; grid-template-columns: 130px 140px 1fr; gap: 10px;
    padding: 8px 14px; font-size: 12px; color: var(--sp-text);
    border-bottom: 1px solid var(--sp-border);
}
.bi-tr:last-child { border-bottom: none; }
.bi-th { background: var(--sp-bg-input); font-weight: 700; color: var(--sp-text-muted); font-size: 11px; letter-spacing: 0.03em; }
.bi-b { font-size: 10.5px; font-weight: 700; padding: 1px 9px; border-radius: 999px; }
.bi-b.new { background: rgba(16,185,129,0.16); color: #059669; }
.bi-b.upd { background: rgba(59,130,246,0.16); color: #2563eb; }
.bi-b.err { background: rgba(239,68,68,0.16); color: #dc2626; }

/* Şablon Tasarla — alan seçici */
.bi-pick { max-height: 56vh; overflow-y: auto; }
.bi-pick-grp {
    font-size: 12px; font-weight: 700; color: var(--sp-primary-dark);
    letter-spacing: 0.04em;
    margin: 14px 0 6px; padding-bottom: 5px;
    border-bottom: 1px solid var(--sp-border);
}
.bi-pick-grp:first-child { margin-top: 0; }
.bi-pick-list {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px;
}
.bi-pick-item {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--sp-text);
    padding: 4px 2px; cursor: pointer;
}
.bi-pick-item input { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--sp-primary); cursor: pointer; }
.bi-pick-item.locked { color: var(--sp-text-muted); cursor: default; }
.bi-pick-item em { font-size: 11px; color: var(--sp-text-muted); font-style: italic; }
.bi-pick-tag {
    font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: rgba(245, 158, 11, 0.14); color: var(--sp-primary-dark);
}
@media (max-width: 860px) { .bi-pick-list { grid-template-columns: repeat(2, 1fr); } }

/* ==== VEHICLE REQ (Chat-B) — araç modalı zorunlu-alan hata işareti ====
   .sp-vehicle-body input/select.has-error → ortak .sp-group input border'ını
   yener (specificity 0,2,1 > 0,1,1; !important YOK). */
.sp-vehicle-body input.has-error,
.sp-vehicle-body select.has-error,
.tr-body input.has-error,
.tr-body select.has-error,
.sp-spot-cari-body input.has-error,
.sp-spot-cari-body select.has-error {
    border-color: var(--sp-danger);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

/* ==== SPOT — Sahip(Mükellef) satırı + Yeni Mükellef mini-modal =================
   "Spot/Alt-Taşıyıcı" Mülkiyet seçildiğinde araç modalında görünür "Sahip" alanı
   ve yanındaki "+ Yeni Mükellef" butonu (label altında, input ile dikey hizalı).
   Mini-modal: sp-modal-sm — sp-modal'in dar varyantı, araç modal'ı üstünde overlay. */
.sp-spot-owner-row { /* Hidden by default via [hidden]; CSS yalnız layout düzeltir */ }
/* .sp-row display:grid, UA [hidden] kuralını (display:none) eziyordu — Sahip(Mükellef) satırı
   Mülkiyet seçilmeden de görünüyordu. Özmal ve boş seçimde satır gerçekten gizlensin. */
.sp-spot-owner-row[hidden] { display: none; }
.sp-spot-add-col { display: flex; flex-direction: column; }
.sp-spot-add-col > .sp-btn-ghost.sp-spot-add {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px;                  /* sp-field input height ile uyumlu */
    padding: 0 12px;
    border: 1px dashed var(--sp-border);
    color: var(--sp-primary);
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sp-spot-add-col > .sp-btn-ghost.sp-spot-add:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}
.sp-spot-add-col > .sp-btn-ghost.sp-spot-add > svg { width: 14px; height: 14px; }

/* Yeni Mükellef (Cari Kart) modal — sp-modal-form modifier (ms-modal/vts-modal paterniyle aynı).
   Bileşik selector .sp-modal-form.spot-cari-modal ile (0,2,0) specificity — sp-modal-form'un
   420px default'unu garanti eder. Araç modal'ı üstünde açıldığı için z-index zorla. */
.sp-modal-form.spot-cari-modal { max-width: 620px; width: 94vw; text-align: left; padding: 0; }
.spot-cari-modal .sp-modal-form-body { min-height: 200px; }
#spotCariModalOverlay { z-index: 2147483647; }
/* spModal (genel warning/success/error toast popup) — TÜM modallerin ÜSTÜNDE olmalı.
   cmpv-overlay (ihlal modal) ve diğer yüksek z-index'li modallerde uyarılar arkada kalmasın.
   Pattern: spotCariModalOverlay ile aynı (max int32). */
#spModalOverlay { z-index: 2147483647; }
/* SpFileAttach kendi confirm overlay'ı (dosya silme onayı) — yüksek z-index'li modal
   üstünde tetiklendiğinde arkada kalmasın (ihlal modal'ından dosya silme akışı). */
#spfaConfirmOverlay { z-index: 2147483647; }

/* Kasa/Banka Hesabı modal — sp-modal-form modifier (spot-cari-modal ile aynı boyut) */
.sp-modal-form.vault-modal { max-width: 620px; width: 94vw; text-align: left; padding: 0; }
.vault-modal .sp-modal-form-body { min-height: 200px; }
.sp-vault-body input.has-error,
.sp-vault-body select.has-error {
    border-color: var(--sp-danger);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

/* Tahsilat/Tediye modal — sp-modal-form modifier (vault-modal eşi, tek form 2 view) */
.sp-modal-form.pm-modal { max-width: 720px; width: 94vw; text-align: left; padding: 0; }
.pm-modal .sp-modal-form-body { min-height: 220px; }
.sp-pm-body input.has-error,
.sp-pm-body select.has-error {
    border-color: var(--sp-danger);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

/* ==== Cari Yönetimi → Ayarlar → Gider Kalemi Seç modal (Faz C) =================
   Mevcut sp-modal-form + sp-modal-xl iskeleti kullanır; sadece içerideki accordion +
   KPI şeridi + kart-tipi seçim grid'i için ek stiller. Tüm renkler --sp-* token'ından. */
.sp-modal-form.ci-select-modal { max-width: 880px; width: 94vw; text-align: left; padding: 0; }
.ci-select-modal .sp-modal-form-body { min-height: 400px; max-height: 70vh; overflow-y: auto; }

/* KPI üst şeridi */
.ci-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.ci-stat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); }
.ci-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ci-stat-icon svg { width: 20px; height: 20px; color: #fff; }
.ci-stat-icon.total    { background: var(--sp-primary); }
.ci-stat-icon.module   { background: #6366f1; }
.ci-stat-icon.selected { background: #10b981; }
.ci-stat-info { display: flex; flex-direction: column; }
.ci-stat-value { font-size: 18px; font-weight: 700; color: var(--sp-text); line-height: 1.1; }
.ci-stat-label { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }

/* Aksiyon barı */
.ci-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; padding: 10px 12px; background: var(--sp-bg-input); border-radius: var(--sp-radius); }
.ci-actions .sp-btn-ghost { padding: 6px 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.ci-actions .sp-btn-ghost svg { width: 14px; height: 14px; }
.ci-actions .ci-act-quick { color: var(--sp-primary); border-color: var(--sp-primary); }
.ci-actions-spacer { flex: 1; }
.ci-search { position: relative; display: flex; align-items: center; }
.ci-search svg { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--sp-text-muted); pointer-events: none; }
.ci-search input { padding: 6px 10px 6px 30px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); background: var(--sp-bg-card); color: var(--sp-text); font-size: 13px; min-width: 220px; transition: border-color 0.15s ease; }
.ci-search input:focus { outline: none; border-color: var(--sp-primary); }

/* Accordion grup başlığı */
.ci-accordion { display: flex; flex-direction: column; gap: 14px; }
.ci-group { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); overflow: hidden; }
.ci-group-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--sp-bg-input); border-bottom: 1px solid var(--sp-border); }
.ci-group-name { font-weight: 700; font-size: 13px; color: var(--sp-text); }
.ci-group-count { font-size: 11px; color: var(--sp-text-muted); }

/* Kalem kartları — grid */
.ci-group-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 12px; }
.ci-card { padding: 10px 12px; background: var(--sp-bg-card); border: 1.5px solid var(--sp-border); border-radius: var(--sp-radius-sm); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.ci-card:hover { border-color: var(--sp-primary); background: rgba(245, 158, 11, 0.04); }
.ci-card.ci-selected { border-color: var(--sp-primary); background: rgba(245, 158, 11, 0.10); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15); }
.ci-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.ci-card-name { font-weight: 600; font-size: 12.5px; color: var(--sp-text); line-height: 1.3; flex: 1; }
.ci-badge.in-module { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: #6366f1; color: #fff; font-weight: 600; flex-shrink: 0; }
.ci-card-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.ci-meta-chip { font-size: 10.5px; padding: 2px 7px; border-radius: 4px; background: var(--sp-bg-input); color: var(--sp-text-muted); border: 1px solid var(--sp-border); }
.ci-meta-chip.amber { background: rgba(245, 158, 11, 0.12); color: var(--sp-primary-dark); border-color: rgba(245, 158, 11, 0.4); }
.ci-meta-chip.green { background: rgba(16, 185, 129, 0.12); color: #047857; border-color: rgba(16, 185, 129, 0.4); }

/* Boş sonuç */
.ci-no-results { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 16px; color: var(--sp-text-muted); }
.ci-no-results svg { width: 36px; height: 36px; color: var(--sp-text-muted); }
.ci-no-results[hidden] { display: none; }

/* ==== Para tutarı renkleri (grid hücreleri — Faz B/D/E ortak) ==================
   Borçlu/negatif kırmızımsı, alacaklı/pozitif yeşilimsi. Protected accent renkler. */
.sp-money-pos  { color: #059669; font-weight: 600; }
.sp-money-neg  { color: var(--sp-danger); font-weight: 600; }
.sp-money-zero { color: var(--sp-text-muted); }

/* ==== Cari Yönetimi → Raporlar (Faz E) =========================================
   3 segment (Cari Ekstre / Bakiye / Yaşlandırma) — pane içi sekme grubu.
   ca-rep-tab segment butonları + ca-rep-kpi özet kartları + ca-ext-* ekstre tablosu. */
.ca-rep-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ca-rep-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background: var(--sp-bg-card);
    color: var(--sp-text-muted);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ca-rep-tab svg { width: 15px; height: 15px; }
.ca-rep-tab:hover { border-color: var(--sp-primary); color: var(--sp-primary); }
.ca-rep-tab.active { background: var(--sp-gradient); border-color: transparent; color: #fff; }
.ca-rep-pane { display: none; }
.ca-rep-pane.active { display: block; }

/* KPI özet kartları (Bakiye + Yaşlandırma üstü) */
.ca-rep-kpi { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ca-rep-kpi:empty { display: none; }
.ca-rep-kpi-card {
    flex: 1; min-width: 150px;
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-border);
    border-radius: var(--sp-radius);
}
.ca-rep-kpi-card.amber { border-left-color: var(--sp-primary); }
.ca-rep-kpi-card.green { border-left-color: #10b981; }
.ca-rep-kpi-card.red   { border-left-color: var(--sp-danger); }
.ca-rep-kpi-val { font-size: 17px; font-weight: 700; color: var(--sp-text); }
.ca-rep-kpi-lbl { font-size: 11.5px; color: var(--sp-text-muted); }

/* Cari Ekstre — ekran içi tablo (yazdır penceresinde inline CSS ayrı) */
.ca-rep-cari { min-width: 260px; }
.ca-ext-doc { font-size: 13px; }
.ca-ext-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--sp-border); }
.ca-ext-cari-name { font-size: 15px; font-weight: 700; color: var(--sp-text); }
.ca-ext-cari-sub { font-size: 12px; color: var(--sp-text-muted); margin-top: 2px; }
.ca-ext-period { font-size: 12.5px; color: var(--sp-text); white-space: nowrap; }
.ca-ext-table { width: 100%; border-collapse: collapse; }
.ca-ext-table th, .ca-ext-table td { border: 1px solid var(--sp-border); padding: 6px 9px; font-size: 12.5px; }
.ca-ext-table th { background: var(--sp-bg-input); color: var(--sp-text); text-align: left; font-weight: 700; }
.ca-ext-table td { color: var(--sp-text); }
.ca-ext-num { text-align: right; }
.ca-ext-devir td { background: var(--sp-bg-input); font-style: italic; color: var(--sp-text-muted); }
.ca-ext-table tfoot td { background: var(--sp-bg-input); font-weight: 700; }
.ca-ext-kapanis td { background: rgba(245, 158, 11, 0.12); }
.ca-ext-empty { text-align: center; color: var(--sp-text-muted); font-style: italic; }

/* Genel Bakış (Cockpit) — son cari hareketleri listesi */
.ca-recent-list { display: flex; flex-direction: column; }
.ca-recent-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 6px;
    border-bottom: 1px solid var(--sp-border);
    font-size: 13px;
}
.ca-recent-row:last-child { border-bottom: none; }
.ca-recent-date { color: var(--sp-text-muted); width: 90px; flex-shrink: 0; }
.ca-recent-cari { flex: 1; font-weight: 600; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-recent-amount { width: 130px; text-align: right; font-weight: 700; color: var(--sp-text); }
.ca-recent-ref { width: 120px; text-align: right; color: var(--sp-text-muted); font-size: 12px; }

/* ==== Operasyon → Yeni Sipariş modalı (sipariş / harita-merkezli konum / paket) === */
.sp-modal-form.op-order-modal { text-align: left; max-width: 1080px; width: 95vw; }
/* Sipariş modalinde bölüm başlıkları UPPERCASE değil — normal yazım */
.op-order-modal .sp-docs-divider { text-transform: none; letter-spacing: 0; }
/* Modal yüksekliği tablar arası SABİT — boyut alanlara göre değişmesin */
.op-order-modal .sp-modal-form-body.op-order-body {
    min-height: 620px; max-height: 72vh; overflow-y: auto;
}
.op-order-body input.has-error,
.op-order-body select.has-error,
.op-order-body textarea.has-error {
    border-color: var(--sp-danger);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

/* Yükleme & Boşaltma — iki sütunlu adres bloğu + gömülü harita */
.op-loc-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.op-loc-col {
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius);
    background: var(--sp-bg-card); padding: 12px 14px;
}
.op-loc-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid var(--sp-border);
}
.op-loc-head strong { font-size: 13px; color: var(--sp-text); }
.op-loc-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.op-loc-dot.sender { background: #797bf2; }
.op-loc-dot.receiver { background: #10b981; }
.op-geo-chip {
    margin-left: auto; font-size: 10.5px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    background: var(--sp-bg-input); color: var(--sp-text-muted);
}
.op-geo-chip.ok { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.op-geo-chip.warn { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.op-geo-chip.bad { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.op-geo-actions { margin: 2px 0 8px; }
.op-geo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px;
    border: 1px dashed var(--sp-border); color: var(--sp-primary); font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.op-geo-btn:hover { background: rgba(121, 123, 242, 0.08); border-color: var(--sp-primary); }
.op-geo-btn svg { width: 14px; height: 14px; }

/* Adres defteri autocomplete */
.op-ac-wrap { position: relative; }
.op-ac-list {
    display: none; position: absolute; z-index: 30;
    left: 0; right: 0; top: 100%; margin-top: 3px;
    max-height: 240px; overflow-y: auto;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.op-ac-list.show { display: block; }
.op-ac-item {
    padding: 8px 11px; cursor: pointer;
    border-bottom: 1px solid var(--sp-border);
    transition: background-color 0.12s ease;
}
.op-ac-item:last-child { border-bottom: none; }
.op-ac-item:hover { background: var(--sp-bg-input); }
.op-ac-item strong { display: block; font-size: 12.5px; color: var(--sp-text); }
.op-ac-meta { display: block; font-size: 11px; color: var(--sp-text-muted); margin-top: 1px; }
.op-ac-empty { padding: 9px 11px; font-size: 11.5px; color: var(--sp-text-muted); font-style: italic; }

/* "Adresi adres defterine kaydet" affordance — yeni adres girilince belirir */
.op-savebook {
    margin-top: 8px; padding: 8px 10px;
    background: rgba(121, 123, 242, 0.07);
    border: 1px dashed var(--sp-primary); border-radius: var(--sp-radius);
}
.op-savebook-check {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--sp-text); cursor: pointer; font-weight: 600;
}
.op-savebook-check input { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.op-savebook-hint { display: block; font-size: 10.5px; color: var(--sp-text-muted); margin-top: 3px; padding-left: 22px; }

/* Pill seçici — dropdown yerine buton grubu (etiket + pill'ler tek satırda, kompakt) */
.op-pillrow { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; }
.op-pillrow-label {
    flex-shrink: 0; width: 104px;
    font-size: 11.5px; font-weight: 600; color: var(--sp-text-muted);
}
.op-pills { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.op-pills.has-error {
    outline: 2px solid rgba(239, 68, 68, 0.4); outline-offset: 3px;
    border-radius: var(--sp-radius);
}
.op-pill {
    padding: 5px 11px; font-size: 11px; font-weight: 600;
    border: 1px solid var(--sp-border); border-radius: 999px;
    background: var(--sp-bg-card); color: var(--sp-text-muted); cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.op-pill:hover { border-color: var(--sp-primary); color: var(--sp-text); }
.op-pill.active { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }

/* İki toggle yan yana — kompakt */
.op-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.op-toggle-grid .sp-toggle-row { margin: 0; }

/* Sipariş tab — 2 sütun: sol (firma + pill'ler) / sağ (Tahsilat kartı) */
.op-siparis-grid {
    display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px;
    align-items: start; margin-bottom: 6px;
}
.op-pay-card {
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius);
    background: var(--sp-bg-card); padding: 12px 14px;
}
.op-pay-card .sp-toggle-row { margin: 0; background: transparent; border: 0; padding: 0; }
.op-pay-types { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--sp-border); }
.op-pay-label { display: block; width: auto; flex: none; margin-bottom: 6px; }
@media (max-width: 760px) { .op-siparis-grid { grid-template-columns: 1fr; } }

.op-scope-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.op-scope-chip {
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    color: var(--sp-text-muted); padding: 6px 10px; border-radius: 999px;
    font-size: 12px; cursor: pointer; line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.op-scope-chip:hover { color: var(--sp-text); border-color: #797bf2; }
.op-scope-chip.active {
    background: rgba(121, 123, 242, 0.12); border-color: #797bf2; color: #797bf2; font-weight: 600;
}
.op-scope-chip[data-scope="1"].active,
.op-scope-chip[data-scope="2"].active,
.op-scope-chip[data-scope="3"].active {
    background: rgba(37, 99, 235, 0.14); border-color: #2563eb; color: #2563eb;
}
.op-scope-hint {
    font-size: 11px; color: var(--sp-text-muted); margin-top: 4px;
}

.op-order-map-wrap { margin-top: 14px; }
.op-order-map-hint {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--sp-text-muted); margin-bottom: 6px;
}
.op-order-map-hint svg { width: 14px; height: 14px; flex-shrink: 0; }
.op-order-map {
    width: 100%; height: 300px;
    border-radius: var(--sp-radius); border: 1px solid var(--sp-border);
}
/* Gömülü harita işaretçisi (Leaflet divIcon) */
.op-map-pin span {
    display: block; width: 18px; height: 18px;
    border: 2.5px solid #fff; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); margin: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Paketler — liste + paket detay mini-modali */
.op-pkg-list { display: flex; flex-direction: column; gap: 6px; }
.op-pkg-empty {
    padding: 18px; text-align: center; font-size: 12.5px;
    color: var(--sp-text-muted); border: 1px dashed var(--sp-border);
    border-radius: var(--sp-radius);
}
.op-pkgitem {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius); background: var(--sp-bg-card);
}
.op-pkgitem-main { flex: 1; min-width: 0; }
.op-pkgitem-name { display: block; font-size: 13px; color: var(--sp-text); }
.op-pkgitem-meta { display: block; font-size: 11.5px; color: var(--sp-text-muted); margin-top: 2px; }
.op-pkgitem-act { display: flex; gap: 6px; flex-shrink: 0; }
.op-pkgitem-edit, .op-pkgitem-del {
    width: 32px; height: 32px; border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm); background: var(--sp-bg-input);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.op-pkgitem-edit { color: var(--sp-primary); }
.op-pkgitem-edit svg { width: 15px; height: 15px; }
.op-pkgitem-edit:hover { background: rgba(121, 123, 242, 0.1); border-color: var(--sp-primary); }
.op-pkgitem-del { color: var(--sp-danger); font-size: 18px; line-height: 1; }
.op-pkgitem-del:hover { background: var(--sp-danger); color: #fff; border-color: var(--sp-danger); }
/* Paket statü rozeti (104-110) + terminal (107-110) salt-okunur görünümü */
.op-pkgitem-status { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.op-pkgitem-terminal { opacity: 0.82; }
.op-pkgitem-edit:disabled, .op-pkgitem-del:disabled { opacity: 0.4; cursor: not-allowed; }
.op-pkgitem-edit:disabled:hover { background: var(--sp-bg-input); border-color: var(--sp-border); }
.op-pkgitem-del:disabled:hover { background: var(--sp-bg-input); color: var(--sp-danger); border-color: var(--sp-border); }
.op-pkg-add { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.op-pkg-add svg { width: 14px; height: 14px; }

/* Paket detay mini-modali — sipariş modalinin üstünde açılır */
.op-pkg-overlay { z-index: 2147483647; }
.sp-modal-form.op-pkg-modal { text-align: left; }

/* Sipariş grid satır aksiyonları — Düzenle / Sil */
.op-row-actions { display: inline-flex; gap: 4px; align-items: center; justify-content: center; }
.op-row-btn {
    width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background: var(--sp-bg-card); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.op-row-btn svg { width: 14px; height: 14px; }
.op-row-btn i.fas { font-size: 12.5px; line-height: 1; }
.op-row-actions { flex-wrap: nowrap; gap: 5px; padding-right: 2px; }
.op-row-btn { flex-shrink: 0; }
.op-row-edit { color: var(--sp-primary); }
.op-row-edit:hover { background: rgba(121, 123, 242, 0.1); border-color: var(--sp-primary); }
.op-row-del { color: var(--sp-danger); }
.op-row-del:hover { background: var(--sp-danger); color: #fff; border-color: var(--sp-danger); }
/* Sefer listesi aksiyonları <a> linkleri — altçizgi yok, harita ikonu yeşil vurgu */
.op-row-btn { text-decoration: none; }
.op-row-map { color: #10b981; }
.op-row-map:hover { background: rgba(16, 185, 129, 0.1); border-color: #10b981; }
.op-row-story { color: #797bf2; }
.op-row-story:hover { background: rgba(121, 123, 242, 0.1); border-color: #797bf2; }
.op-row-kokpit { color: #10b981; }
.op-row-kokpit:hover { background: rgba(16, 185, 129, 0.1); border-color: #10b981; }

/* Sefer Uyum Raporu görüntüleyici (grid'den) — kart stilleri global lt-cmp-* */
.op-cmp-modal { max-width: 440px; width: 94vw; }
.op-cmp-body { padding: 16px 18px; max-height: 66vh; overflow-y: auto; }
.op-cmp-badge:hover { filter: brightness(.92); }
.op-cmp-loading { padding: 24px; text-align: center; color: var(--sp-text-muted); font-size: 12.5px; }

/* Sipariş Belge Yönetimi (Koçzer "Güvenli Tedarikçi" — G1) */
.op-tab-badge {
    display: inline-block; min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: 999px; background: var(--sp-danger); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
    margin-left: 6px; vertical-align: middle;
}
/* ============================================================
   Belge Yönetimi — Grid kart layout (her belge tipi = bir kart)
   Tasarım: hep görünür, direkt yükleme, kompakt + portal teması
   ============================================================ */
.op-docs-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; padding: 0 2px 8px; border-bottom: 1px solid var(--sp-border);
}
.op-docs-toolbar-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: var(--sp-text);
}
.op-docs-toolbar-title svg { width: 14px; height: 14px; color: var(--sp-primary); }
.op-docs-toolbar-hint { font-weight: 500; font-size: 11px; color: var(--sp-text-muted); }
.op-docs-refresh {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; color: var(--sp-text-muted);
    transition: color 0.15s ease, background-color 0.15s ease;
}
.op-docs-refresh:hover { color: var(--sp-primary); background: rgba(121, 123, 242, 0.08); }
.op-docs-refresh svg { width: 13px; height: 13px; }

.op-docs-required {
    padding: 8px 11px; margin-bottom: 10px;
    background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--sp-radius); color: var(--sp-danger);
    font-size: 11.5px; font-weight: 600;
}

.op-docs-loading,
.op-docs-empty {
    grid-column: 1 / -1;
    padding: 22px; text-align: center; font-size: 11.5px;
    color: var(--sp-text-muted); border: 1px dashed var(--sp-border);
    border-radius: var(--sp-radius);
}

/* Grid — responsive, otomatik sığdırma */
.op-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

/* Kart — kompakt, dikey 3 bölge */
.op-doctype-cell {
    display: flex; flex-direction: column;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.op-doctype-cell:hover { border-color: var(--sp-primary); box-shadow: 0 2px 8px rgba(121, 123, 242, 0.08); }

/* YÜKLÜ kart — yeşil tema (başarı, uyumlu, doğrulanmış) */
.op-doctype-cell.has-files { border-color: rgba(16, 185, 129, 0.45); }
.op-doctype-cell.has-files:hover { border-color: #10b981; box-shadow: 0 2px 10px rgba(16, 185, 129, 0.14); }
.op-doctype-cell.has-files .op-doctype-head { background: rgba(16, 185, 129, 0.06); border-bottom-color: rgba(16, 185, 129, 0.2); }
.op-doctype-cell.has-files .op-doctype-icon { background: rgba(16, 185, 129, 0.16); color: #059669; }

/* BLOCK eksik belge için kırmızı vurgu — yeşil has-files'ı ezer */
.op-doctype-cell.is-missing-block { border-color: rgba(239, 68, 68, 0.55) !important; background: rgba(239, 68, 68, 0.04); }
.op-doctype-cell.is-missing-block:hover { border-color: var(--sp-danger) !important; }
.op-doctype-cell.is-missing-block .op-doctype-head { background: rgba(239, 68, 68, 0.06); }
.op-doctype-cell.is-missing-warn { border-color: rgba(245, 158, 11, 0.55) !important; background: rgba(245, 158, 11, 0.04); }
.op-doctype-cell.is-missing-warn .op-doctype-head { background: rgba(245, 158, 11, 0.06); }

/* HEAD — ikon + ad + sayı rozet */
.op-doctype-head {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 9px;
    background: rgba(15, 23, 42, 0.025);
    border-bottom: 1px solid var(--sp-border);
}
.op-doctype-icon {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(121, 123, 242, 0.12); color: var(--sp-primary);
    border-radius: 4px; flex-shrink: 0;
}
.op-doctype-icon svg { width: 11px; height: 11px; }
.op-doctype-name {
    flex: 1; min-width: 0;
    font-size: 11.5px; font-weight: 600; color: var(--sp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-doctype-count {
    min-width: 18px; height: 16px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 700;
    background: rgba(15, 23, 42, 0.08); color: var(--sp-text-muted);
    border-radius: 8px; flex-shrink: 0;
}
/* Yüklü kart için yeşil sayaç (başarı tonu) */
.op-doctype-count.has-files { background: #10b981; color: #fff; }

/* BODY — yüklü dosya listesi veya boş durum */
.op-doctype-files {
    flex: 1;
    display: flex; flex-direction: column;
    gap: 3px; padding: 6px 7px; min-height: 56px;
    max-height: 110px; overflow-y: auto;
}
.op-doctype-files::-webkit-scrollbar { width: 4px; }
.op-doctype-files::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: 2px; }
.op-doctype-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; gap: 4px; padding: 8px 4px;
    color: var(--sp-text-muted); font-size: 10.5px; font-style: italic;
}
.op-doctype-empty svg { width: 22px; height: 22px; opacity: 0.4; }
.op-doctype-file {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 5px 4px 7px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 4px;
    font-size: 10.5px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.op-doctype-file:hover { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.4); }
/* Resim önizleme thumbnail (sol kenarda) */
.op-doctype-file-thumb {
    width: 22px; height: 22px; border-radius: 3px; flex-shrink: 0;
    background-size: cover; background-position: center;
    background-color: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.08);
    cursor: pointer;
}
.op-doctype-file-thumb-ico {
    width: 22px; height: 22px; border-radius: 3px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.05); color: #64748b;
}
.op-doctype-file-thumb-ico svg { width: 12px; height: 12px; }
.op-doctype-file-name {
    flex: 1; min-width: 0;
    color: #0f172a; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; text-decoration: none;
}
.op-doctype-file-name:hover { color: #059669; text-decoration: underline; }
.op-doctype-file-act {
    background: rgba(15, 23, 42, 0.04); border: 0; padding: 3px;
    cursor: pointer; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.op-doctype-file-act:hover { background: rgba(15, 23, 42, 0.1); color: #0f172a; }
.op-doctype-file-act.is-del { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.op-doctype-file-act.is-del:hover { background: var(--sp-danger); color: #fff; }
.op-doctype-file-act svg { width: 13px; height: 13px; stroke-width: 2.2; }

/* FOOT — Dosya Yükle dashed buton */
.op-doctype-upload {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 8px;
    background: transparent;
    border: 0; border-top: 1px dashed var(--sp-border);
    color: var(--sp-primary); font-weight: 600; font-size: 10.5px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.op-doctype-upload:hover { background: rgba(121, 123, 242, 0.08); color: var(--sp-primary); }
.op-doctype-upload:disabled { opacity: 0.5; cursor: not-allowed; }
.op-doctype-upload svg { width: 11px; height: 11px; }
.op-doctype-upload.is-loading { opacity: 0.6; pointer-events: none; }
.op-doctype-upload.is-loading::after {
    content: ''; width: 9px; height: 9px;
    border: 1.5px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: op-doc-spin 0.7s linear infinite;
}
@keyframes op-doc-spin { to { transform: rotate(360deg); } }

/* Sipariş kaydedilmeden önce: tüm kartlar disabled görünüm */
.op-docs-grid.is-locked .op-doctype-cell { opacity: 0.55; pointer-events: none; }
.op-docs-grid.is-locked .op-doctype-upload { color: var(--sp-text-muted); }

/* ============================================================
   FILEATTACH (Chat-A — paylaşımlı belge bileşeni, .spfa-/.sp-docs-)
   ============================================================ */
/* ⭐ Section başlık standardı (2026-06-16): başlık METNİ TURUNCU üstte, GRİ çizgi başlığın ALTINDA
   (çizgi turuncu DEĞİL; eskiden çizgi başlığın yanındaydı — flex + ::after). dr-section-label
   (Sürücü popup bildirim sekmesi) yapısı genele taşındı. Tüm SP modal/form section'larına uygulanır. */
.sp-docs-divider {
    margin: 12px 0 8px;
    padding-bottom: 6px;
    font-size: 12px; font-weight: 700; color: var(--sp-primary-dark);   /* BAŞLIK turuncu */
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--sp-border);   /* çizgi GRİ (turuncu DEĞİL) */
}
.sp-docs-divider::after { content: none; }
/* Section başlık + sağda aksiyon butonu — aynı satır, çizginin ÜSTÜNDE (örn. "Tespit Edilen Kusurlar [+ Kusur Ekle]"). */
.sp-docs-divider.has-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sp-docs-divider.has-action .sp-btn {
    padding: 5px 11px;
    font-size: 11.5px;
    text-transform: none;
    letter-spacing: 0;
}
.sp-docs-hint {
    display: flex; align-items: flex-start; gap: 9px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: var(--sp-radius-sm);
    padding: 12px 14px;
    font-size: 12.5px; color: var(--sp-text-muted); line-height: 1.5;
}
.sp-docs-hint svg { width: 16px; height: 16px; color: var(--sp-primary-dark); flex-shrink: 0; margin-top: 1px; }
.sp-docs-hint strong { color: var(--sp-text); }

/* ── Info kutusu tema varyantları (modifier) ──
   Default (modifier YOK) = amber (geri uyumlu — mevcut tüm hint'ler aynı kalır).
   Kullanım: <div class="sp-docs-hint is-info"> · is-primary/is-warning/is-success/is-danger/is-neutral.
   Yalnız background-color + border-color + ikon rengi değişir; metin daima okunur (--sp-text-muted).
   Korunan accent renkleri (sabit): #2563eb mavi · #059669 yeşil · #dc2626 kırmızı · amber=primary. */
.sp-docs-hint.is-info    { background-color: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.22); }
.sp-docs-hint.is-info svg    { color: #2563eb; }
.sp-docs-hint.is-success { background-color: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.22); }
.sp-docs-hint.is-success svg { color: #059669; }
.sp-docs-hint.is-warning,
.sp-docs-hint.is-primary { background-color: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.20); }
.sp-docs-hint.is-warning svg,
.sp-docs-hint.is-primary svg { color: var(--sp-primary-dark); }
.sp-docs-hint.is-danger  { background-color: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.22); }
.sp-docs-hint.is-danger svg  { color: #dc2626; }
.sp-docs-hint.is-neutral { background-color: var(--sp-bg-hover); border-color: var(--sp-border); }
.sp-docs-hint.is-neutral svg { color: var(--sp-text-muted); }

/* ── Araç popup ilk sekme — ana tarih özeti kutusu (.sp-docs-hint tabanlı) ──────────
   Çerçeve normalde SİLİK (transparent) → kutu yumuşak tonlu zemin olarak durur. Üzerine
   gelince çerçeve + hafif gölge belirir → tıklanabilir olduğu anlaşılır. Sağda küçük "Düzenle"
   ipucu (tıklayınca Bildirimler sekmesine gider — kutunun kendi click handler'ı). is-danger/
   is-warning zemini korunur; bu blok yalnız border'ı yönetir. is-* bloğundan SONRA gelir (specificity). */
.sp-docs-hint.sp-vkeydate-box {
    cursor: pointer;
    border-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sp-docs-hint.sp-vkeydate-box:hover {
    border-color: var(--sp-border);
    box-shadow: 0 2px 9px -4px rgba(0, 0, 0, 0.22);
}
.sp-vkeydate-rows { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.sp-vkeydate-row { display: flex; align-items: center; gap: 7px; }
.sp-vkeydate-row strong { color: var(--sp-text); white-space: nowrap; }
.sp-vkeydate-date { color: var(--sp-text); font-weight: 600; }
.sp-vkeydate-edit {
    flex: 0 0 auto; align-self: center;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600;
    color: var(--sp-text-muted); opacity: 0.65;
    white-space: nowrap;
    transition: color 0.15s ease, opacity 0.15s ease;
}
.sp-vkeydate-edit svg { width: 13px; height: 13px; }
.sp-docs-hint.sp-vkeydate-box:hover .sp-vkeydate-edit { color: var(--sp-primary-dark); opacity: 1; }

/* Ana tarih kutusu, üstteki uyum/KTY şeridine yakın dursun: cmpw şeridinin margin-bottom (12px)
   + body gap (13px) = 25px çift boşluk veriyordu → standart tek boşluğa (13px body gap) indir. */
.sp-vehicle-body .cmpw-modstrip { margin-bottom: 0; }

.spfa-loading, .spfa-empty {
    padding: 22px; text-align: center;
    font-size: 12.5px; color: var(--sp-text-muted);
}
.spfa-head { display: flex; gap: 8px; margin-bottom: 12px; }
.spfa-badge {
    font-size: 11.5px; font-weight: 600;
    padding: 4px 11px; border-radius: 999px;
}
.spfa-badge.ok { background: rgba(16,185,129,0.14); color: #059669; }
.spfa-badge.miss { background: rgba(239,68,68,0.12); color: #dc2626; }
.spfa-badge b { font-weight: 800; }

.spfa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.spfa-card {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 12px;
    background: var(--sp-bg-card);
    display: flex; flex-direction: column; gap: 9px;
}
.spfa-card.has { border-color: rgba(16,185,129,0.4); }
.spfa-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spfa-card-title { font-size: 12.5px; font-weight: 600; color: var(--sp-text); }
.spfa-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.spfa-tag.ok { background: rgba(16,185,129,0.14); color: #059669; }
.spfa-tag.miss { background: rgba(239,68,68,0.12); color: #dc2626; }

.spfa-files { display: flex; flex-direction: column; gap: 5px; }
.spfa-file {
    display: flex; align-items: center; gap: 7px;
    background: var(--sp-bg-input);
    border-radius: var(--sp-radius-sm);
    padding: 6px 9px;
}
.spfa-file svg { width: 14px; height: 14px; color: var(--sp-text-muted); flex-shrink: 0; }
.spfa-file-name {
    flex: 1; font-size: 12px; color: var(--sp-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-decoration: none;
}
a.spfa-file-name:hover { color: var(--sp-primary-dark); text-decoration: underline; }
.spfa-del {
    width: 22px; height: 22px; border: none;
    background: transparent; color: var(--sp-text-muted);
    border-radius: 4px; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.14s ease, color 0.14s ease;
}
.spfa-del svg { width: 12px; height: 12px; }
.spfa-del:hover { background: var(--sp-danger); color: #fff; }

.spfa-upload {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 1.5px dashed var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 9px;
    font-size: 12px; font-weight: 600; color: var(--sp-text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.spfa-upload svg { width: 14px; height: 14px; }
.spfa-upload:hover { border-color: var(--sp-primary); color: var(--sp-primary-dark); background: rgba(245,158,11,0.05); }

.spfa-progress {
    display: flex; align-items: center; gap: 8px;
    height: 6px;
}
.spfa-progress {
    height: auto; padding: 4px 0;
}
.spfa-progress-fill {
    height: 6px; width: 0%;
    background: var(--sp-gradient);
    border-radius: 3px;
    flex: 1;
    transition: width 0.2s ease;
}
.spfa-progress-text { font-size: 11px; font-weight: 700; color: var(--sp-primary-dark); min-width: 34px; text-align: right; }

@media (max-width: 580px) { .spfa-grid { grid-template-columns: 1fr; } }

/* Sefer paneli içinde SpFileAttach — panel dar (~460px), kompakt mod
   - Tek sütun
   - Daha küçük padding/gap, font, dash kutu yüksekliği
   - "Yüklü/Eksik" badge'leri tek satır küçük */
#kpRsDocMount .spfa-grid { grid-template-columns: 1fr; gap: 6px; }
#kpRsDocMount .spfa-head { gap: 6px; margin-bottom: 6px; }
#kpRsDocMount .spfa-badge { font-size: 10.5px; padding: 2px 7px; }
#kpRsDocMount .spfa-card { padding: 8px 10px; gap: 6px; border-radius: 6px; }
#kpRsDocMount .spfa-card-title { font-size: 11.5px; }
#kpRsDocMount .spfa-tag { font-size: 9.5px; padding: 1px 6px; }
#kpRsDocMount .spfa-files { gap: 3px; }
#kpRsDocMount .spfa-file { padding: 4px 7px; gap: 6px; }
#kpRsDocMount .spfa-file svg { width: 12px; height: 12px; }
#kpRsDocMount .spfa-file-name { font-size: 11.5px; }
#kpRsDocMount .spfa-del { width: 18px; height: 18px; }
#kpRsDocMount .spfa-del svg { width: 10px; height: 10px; }
#kpRsDocMount .spfa-upload { padding: 5px 8px; font-size: 11px; border-width: 1px; }
#kpRsDocMount .spfa-upload svg { width: 12px; height: 12px; }

/* ==================================================================
   SETTINGS / MAIL (Chat-C / Genel Ayarlar) — kendi domain bloğu
   Ortak class redefine YOK. ms- prefixli yeni class'lar.
   ================================================================== */
/* Mail popup — POPUP STANDARDI (araç/sürücü modalı ile aynı): yüksek özgüllük
   (.sp-modal-form tek-class 420px'i ezer) + text-align:left + padding:0 →
   merkez/üst-sol fazlalık bug'ı çözülür. 560px (form küçük, xl 880 fazla geniş).
   Band-aid'ler kaldırıldı: alanlar <sp-field>/<sp-select> + global Sıkı standart. */
.sp-modal.ms-modal,
.sp-modal-form.ms-modal { max-width: 560px; width: 94vw; text-align: left; padding: 0; }
/* Gövde veri/sekme yokken de sabit dursun (popup zıplamasın) */
.ms-modal .sp-modal-form-body { min-height: 320px; }
/* Kart artık STANDART .sp-card deseni (Profilim'deki gibi) — custom
   ms-setting-card/ico/body KALDIRILDI. Sadece durum satırı + nokta kaldı. */
.ms-setting-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 14px;
    font-size: 12.5px;
    color: var(--sp-text-muted);
}
.ms-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sp-text-muted);
    flex: 0 0 auto;
}
.ms-dot.ok { background: #10b981; }
.ms-dot.soon { background: #f59e0b; }   /* Hazırlanıyor / yakında (amber) — sayfası henüz yapılmamış tanım kartları */

/* SMS Test Modu rozeti (Genel Ayarlar kartı) */
.sms-testmode-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 99px;
    font-size: 11px; font-weight: 700;
    background: rgba(245, 158, 11, 0.16); color: #f59e0b;
}

/* ============================================================
   ANA FORM STANDARDI — filtre çubuğu + kart + DevExtreme tema
   (Logitera tab_VehicleManagement_shipping_drivers paterninin
    portal/amber uyarlaması. Tüm portal listeleri bunu örnek alır.)
   ============================================================ */

/* --- Kontrol / filtre çubuğu --- */
.sp-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
/* Standalone — .sp-controls dışında da (örn. VTS sağlayıcı arama kartı içinde) stillenir */
.sp-control-search {
    box-sizing: border-box;
    padding: 6px 11px;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius-sm);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--sp-text);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sp-control-search:focus { border-color: var(--sp-primary); box-shadow: 0 0 0 3px rgba(245, 158, 11, .12); }
/* Filtre çubuğu bağlamında flex davranışı */
.sp-controls .sp-control-search { flex: 1 1 260px; min-width: 200px; }
.sp-controls .sp-ctrl-select {
    min-width: 120px;
    padding: 6px 10px;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius-sm);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--sp-text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s ease;
}
.sp-controls .sp-ctrl-select:focus { border-color: var(--sp-primary); }
.sp-controls .sp-btn,
.sp-controls .sp-btn-ghost { white-space: nowrap; }

/* Muayene İşlemler filtresi 8 kontrol içeriyor (Bakım'dan 2 select fazla: Sonuç + Kayıt Durumu + Tip).
   Tek satıra sığsın, "Yeni Muayene" alt satıra kaymasın → arama+select min-width'leri kompaktlaştır.
   Scope'lu (#fmInsOpsSection) — global filtre barı etkilenmez. */
#fmInsOpsSection .sp-controls .sp-control-search { flex: 1 1 150px; min-width: 150px; }
#fmInsOpsSection .sp-controls .sp-ctrl-select { min-width: 104px; }

/* --- Gelişmiş filtre paneli (Detaylı Filtreler) --- */
.sp-panel {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.sp-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) { .sp-filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sp-filter-grid { grid-template-columns: 1fr; } }
.sp-filter-item { display: flex; flex-direction: column; gap: 4px; }
.sp-filter-item label { font-size: 11px; font-weight: 600; color: var(--sp-text-muted); }
/* ⭐ Hibrit filter dropdown — "Çekici (3)" formatında count + 0 olanlar dim+disabled.
   Gmail/Linear "zero-result preview" pattern'i; kullanıcı seçimden önce sonuç önizler. */
.sp-filter-item select option.is-empty-option {
    color: var(--sp-text-muted);
    font-style: italic;
}
/* Standart portal dropdown — sp-ctrl-select ile birebir aynı görünüm */
.sp-filter-item select,
.sp-filter-item input[type="text"],
.sp-filter-item input[type="number"],
.sp-filter-item input[type="date"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius-sm);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--sp-text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s ease;
}
.sp-filter-item select:focus,
.sp-filter-item input:focus { border-color: var(--sp-primary); }
.sp-panel-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }

/* --- İçerik kartı (grid sarmalayıcı) --- */
.sp-content-card {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    overflow: hidden;
}
.sp-content-card-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-content-card-header svg { width: 17px; height: 17px; color: var(--sp-primary-dark); }

/* ⭐ View Toggle (Kart / Liste) — content-card-header sağına yapışır.
   Pattern: pur-type-chip ailesi (Satın Alma chip'leriyle tutarlı) — tek renk, aktif amber primary. */
.sp-view-toggle {
    display: inline-flex;
    margin-left: auto;
    gap: 4px;
    padding: 3px;
    background-color: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: 99px;
}
.sp-view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: none;
    border: none;
    border-radius: 99px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sp-view-toggle-btn:hover { color: var(--sp-text); }
.sp-view-toggle-btn svg { width: 13px; height: 13px; }
.sp-view-toggle-btn.active {
    background-color: var(--sp-primary);
    color: #fff;
}
.sp-view-toggle-btn.active svg { color: #fff; }
.sp-content-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text);
    margin: 0;
}
.sp-content-card-body { padding: 12px; }

/* --- DevExtreme grid — portal/amber tema (reusable) --- */
.sp-dxgrid .dx-datagrid { background: transparent; font-family: 'Inter', sans-serif; }
.sp-dxgrid .dx-datagrid-headers {
    background: var(--sp-bg-input);
    color: var(--sp-text);
    font-weight: 700;
    border-bottom: 1px solid var(--sp-border);
}
.sp-dxgrid .dx-datagrid-rowsview .dx-row > td { padding: 4px 10px; font-size: 12.5px; color: var(--sp-text); line-height: 1.35; }
.sp-dxgrid .dx-datagrid-rowsview .dx-data-row:hover > td { background: rgba(245, 158, 11, 0.06); }
.sp-dxgrid .dx-datagrid .dx-row-alt > td { background: rgba(0, 0, 0, 0.015); }
.sp-dxgrid .dx-datagrid-rowsview .dx-selection > td,
.sp-dxgrid .dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
    background: rgba(245, 158, 11, 0.12) !important; /* DevExtreme seçim rengini override */
}
.sp-dxgrid .dx-checkbox-checked .dx-checkbox-icon {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
}
/* ============ Filtre satırı + header filter ============
   Revize (2026-05-26 — 1.png feedback):
   1) Header filter ikonu (T) çok kaba → ufalt + soluklaştır, hover'da netleş
   2) Filter row arama input'ları çok soluk → arka plan + border ile belirginleştir */
.sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor-input { font-size: 12px; }

/* Header filter ikonu — varsayılan büyük "T" şekli → sade nokta benzeri */
.sp-dxgrid .dx-header-filter {
    color: var(--sp-text-muted);
    font-size: 10px;
    opacity: 0.35;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.sp-dxgrid .dx-header-filter.dx-header-filter-empty {
    color: var(--sp-text-muted);
    opacity: 0.25;
}
.sp-dxgrid .dx-datagrid-headers .dx-header-row td:hover .dx-header-filter {
    opacity: 0.85;
}
.sp-dxgrid .dx-header-filter:hover {
    color: var(--sp-primary);
    opacity: 1 !important;
}
/* Aktif filtre (filter applied) → primary renk + hep görünür */
.sp-dxgrid .dx-header-filter:not(.dx-header-filter-empty) {
    color: var(--sp-primary);
    opacity: 1;
}

/* Filter row input — yumuşak yarı-saydam border + hafif lighter bg → lupa ikon ile
   beraber tek "input kutusu" gibi görünür. DevExtreme'in default underline'ı kaldırıldı
   (çift çizgi olmasın). Light/dark tema kendi rgba kontrastını kullanır. */
.sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell {
    background: var(--sp-bg-input);
}
.sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor {
    background: var(--sp-bg-card);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 5px;
    margin: 3px 4px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
/* DevExtreme'in kendi alt-çizgi underline (Material tarz) → kaldır; çift border görünmesin */
.sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor::before,
.sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor::after {
    display: none;
    border: none;
}
.sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor .dx-texteditor-container,
.sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor-input {
    border: none;
    box-shadow: none;
    background: transparent;
}
.sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor:hover {
    border-color: rgba(245, 158, 11, 0.35);
}
.sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor.dx-state-focused {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.12);
}
/* Dark tema — siyah border görünmediği için ters kontrast (beyaz yarı-saydam) */
body.is-dark .sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor {
    border-color: rgba(255, 255, 255, 0.08);
}
body.is-dark .sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor:hover {
    border-color: rgba(245, 158, 11, 0.45);
}
.sp-dxgrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor.dx-state-focused::after {
    border-color: var(--sp-primary);
}
.sp-dxgrid .dx-datagrid-filter-row .dx-placeholder,
.sp-dxgrid .dx-datagrid-filter-row .dx-placeholder::before {
    color: var(--sp-text-muted);
    opacity: 0.55;
}
/* Filter row "lupa" ikonu (varsayılan) — biraz daha belirgin */
.sp-dxgrid .dx-datagrid-filter-row .dx-menu-item-content .dx-icon-filter-operations {
    color: var(--sp-text-muted);
    opacity: 0.65;
}
.sp-dxgrid .dx-datagrid-group-panel { padding: 8px 6px; }
.sp-dxgrid .dx-group-panel-message { font-size: 12px; color: var(--sp-text-muted); }
.sp-dxgrid .dx-datagrid-search-panel { margin-left: 8px; }
.sp-dxgrid .dx-toolbar { background: transparent; }
/* Toolbar dxButton'ları — amber/portal */
.sp-dxgrid .dx-toolbar .dx-button.dx-button-normal {
    background: var(--sp-bg-input);
    border-color: var(--sp-border);
    color: var(--sp-text);
    border-radius: var(--sp-radius-sm);
}
.sp-dxgrid .dx-toolbar .dx-button.dx-button-normal.dx-state-hover { background: var(--sp-bg-card); border-color: var(--sp-primary); }
.sp-dxgrid .dx-toolbar .dx-button.dx-button-mode-contained.dx-button-default,
.sp-dxgrid .dx-toolbar .dx-button.dx-button-success {
    background: var(--sp-gradient);
    border-color: transparent;
    color: #fff;
}
.sp-dxgrid .dx-toolbar .dx-button.dx-button-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: transparent;
    color: #fff;
}
.sp-dxgrid .dx-toolbar .dx-button.dx-state-disabled { opacity: 0.5; }
/* Pager + sayfa boyutu seçici */
.sp-dxgrid .dx-pager { background: transparent; padding: 10px 6px 2px; }
.sp-dxgrid .dx-pager .dx-page.dx-selection,
.sp-dxgrid .dx-pager .dx-page-size.dx-selection {
    background: var(--sp-gradient);
    color: #fff;
    border-radius: var(--sp-radius-sm);
}
/* Tek aksiyon kolonu — butonlar tek satırda inline */
.sp-dxgrid .sp-row-actions { display: flex; gap: 4px; justify-content: center; align-items: center; }

/* Filo Yönetimi araç grid'inde sürücü pill'leri */
.sp-dxgrid .fm-driver-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
}
.sp-dxgrid .fm-driver-pill.primary {
    background: rgba(16,185,129,0.10);
    color: #047857;
    border-color: rgba(16,185,129,0.22);
}
.sp-dxgrid .fm-driver-pill.assistant {
    background: rgba(249,115,22,0.10);
    color: #c2410c;
    border-color: rgba(249,115,22,0.25);
}
.sp-dxgrid .fm-driver-empty {
    color: var(--sp-text-muted);
    font-size: 11.5px;
    opacity: 0.6;
}
/* Satır içi aksiyon ikon butonları (düzenle / sil / geri al) */
.sp-dxgrid .sp-rowbtn {
    width: 26px; height: 26px;
    border: none;
    border-radius: var(--sp-radius-sm);
    background: var(--sp-bg-input);
    color: var(--sp-text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.14s ease, color 0.14s ease;
}
.sp-dxgrid .sp-rowbtn svg { width: 13px; height: 13px; }
.sp-dxgrid .sp-rowbtn.edit:hover { background: var(--sp-primary); color: #fff; }
.sp-dxgrid .sp-rowbtn.del:hover { background: var(--sp-danger); color: #fff; }
.sp-dxgrid .sp-rowbtn.restore { color: #059669; }
.sp-dxgrid .sp-rowbtn.restore:hover { background: #10b981; color: #fff; }
/* ⭐ Detay (göz) — bilgi/görüntüleme aksiyonu için (backend lock veya read-only akış) */
.sp-dxgrid .sp-rowbtn.detay { color: #2563eb; }
.sp-dxgrid .sp-rowbtn.detay:hover { background: #3b82f6; color: #fff; }
/* ⭐ Yeni kayıt ekleme satır-aksiyonu — STANDART generic sınıf (araç satırından muayene/bakım işlemi açtırma) — emerald */
.sp-dxgrid .sp-rowbtn.add { color: #059669; }
.sp-dxgrid .sp-rowbtn.add:hover { background-color: #10b981; color: #fff; }
/* ⭐ E-Posta Bildirimi satır-aksiyonu — mavi (zarf/iletişim). Modifiersiz .sp-rowbtn'lerin hover'ı yoktu → görünür hover. */
.sp-dxgrid .sp-rowbtn.mail { color: #2563eb; }
.sp-dxgrid .sp-rowbtn.mail:hover { background-color: #3b82f6; color: #fff; }
/* Genel fallback — herhangi bir modifiersiz .sp-rowbtn de hover'da belirginleşsin (renk + hafif yukarı). */
.sp-dxgrid .sp-rowbtn:hover { background-color: var(--sp-border); color: var(--sp-text); }
/* Silinmiş satır — soluk + kırmızı sol şerit */
.sp-dxgrid .dx-data-row.sp-row-deleted > td { opacity: 0.62; }
.sp-dxgrid .dx-data-row.sp-row-deleted > td:first-child { box-shadow: inset 3px 0 0 var(--sp-danger); }

/* Muayene İşlemleri — sonuç bazlı soft satır tint'i (badge renginin açık opacity'li hâli).
   rgba korumalı accent renkleri (yeşil/kırmızı/amber) — şeffaflık CSS standardının izin verdiği istisna.
   .dx-data-row + sonuç sınıfı (3 sınıf) DevExtreme rowAlternation'ı (2 sınıf) geçer. */
.sp-dxgrid .dx-data-row.ins-row-pass > td    { background-color: rgba(16, 185, 129, 0.07); }
.sp-dxgrid .dx-data-row.ins-row-fail > td    { background-color: rgba(239, 68, 68, 0.07); }
.sp-dxgrid .dx-data-row.ins-row-pending > td { background-color: rgba(245, 158, 11, 0.09); }
/* Hover'da hafif belirginleşir — DevExtreme .dx-state-hover'ı geçmek için 4 sınıf */
.sp-dxgrid .dx-data-row.ins-row-pass.dx-state-hover > td    { background-color: rgba(16, 185, 129, 0.13); }
.sp-dxgrid .dx-data-row.ins-row-fail.dx-state-hover > td    { background-color: rgba(239, 68, 68, 0.13); }
.sp-dxgrid .dx-data-row.ins-row-pending.dx-state-hover > td { background-color: rgba(245, 158, 11, 0.15); }

/* ============================================================
   PORTAL GENEL UI STANDARDI (kullanıcı talebi — .sp-body scope)
   Tüm formlar/grid'ler otomatik alır (Araçlar/Sürücüler/Dorseler/
   Genel Ayarlar...). .sp-body sadece portal layout'unda → Geowix
   ana uygulamaya SIZMAZ. Amaç: sert/degrade turuncu kütleleri
   sidebar'ın yumuşak amber diliyle ORANTILI hale getirmek.
   !important: DevExtreme override zorunluluğu (CSS std §05 istisnası,
   id-scoped eski .dx kurallarını tek standartla süpersede eder).
   ============================================================ */

/* 1) Birincil butonlar: degrade + ağır gölge + zıplama → düz amber + nazik */
.sp-body .sp-btn {
    background: var(--sp-primary);
    box-shadow: none;
}
.sp-body .sp-btn:hover:not(:disabled) {
    background: var(--sp-primary-dark);
    transform: none;
    box-shadow: 0 2px 7px -2px rgba(245, 158, 11, 0.38);
}

/* 2) DevExtreme pager aktif sayfa/boyut: solid degrade → yumuşak amber
      tint + amber-koyu metin (sidebar aktif item diliyle aynı) */
.sp-body .dx-pager .dx-page.dx-selection,
.sp-body .dx-pager .dx-page-size.dx-selection {
    background: rgba(245, 158, 11, 0.16) !important;
    color: var(--sp-primary-dark) !important;
    box-shadow: none !important;
    font-weight: 600;
}

/* 3) DevExtreme toolbar birincil/success butonları: degrade → düz amber */
.sp-body .dx-toolbar .dx-button.dx-button-mode-contained.dx-button-default,
.sp-body .dx-toolbar .dx-button.dx-button-success {
    background: var(--sp-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* 4) Seçili satır: standart yumuşak amber tint — tüm grid'ler aynı */
.sp-body .dx-datagrid-rowsview .dx-selection > td,
.sp-body .dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
    background: rgba(245, 158, 11, 0.12) !important;
}

/* 5) Checkbox: marka amber'i korunur ama düz (degrade yok) — ölçülü aksan */
.sp-body .dx-checkbox-checked .dx-checkbox-icon {
    background: var(--sp-primary) !important;
    border-color: var(--sp-primary) !important;
}

/* 6) Column Chooser popup — DevExtreme overlay'i <body>'ye basar, .sp-dxgrid scope'u
   ulaşmaz. Portal/amber temasına çekilir (DX override → !important, kurallar gereği). */
.sp-body .dx-datagrid-column-chooser.dx-overlay-content {
    background: var(--sp-bg-card) !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: var(--sp-radius) !important;
    box-shadow: var(--sp-shadow-lg) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.sp-body .dx-datagrid-column-chooser .dx-popup-title {
    background: var(--sp-bg) !important;
    color: var(--sp-text) !important;
    border-bottom: 1px solid var(--sp-border) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
}
.sp-body .dx-datagrid-column-chooser .dx-popup-title .dx-closebutton {
    color: var(--sp-text-muted) !important;
}
.sp-body .dx-datagrid-column-chooser .dx-popup-title .dx-closebutton:hover {
    color: var(--sp-danger) !important;
}
.sp-body .dx-datagrid-column-chooser .dx-popup-content { padding: 8px !important; }
.sp-body .dx-datagrid-column-chooser .dx-list-item {
    border-radius: var(--sp-radius-sm) !important;
    color: var(--sp-text) !important;
    font-size: 12.5px !important;
    min-height: 0 !important;
}
/* Checkbox + kolon adı AYNI satırda (DX bazen alt alta diziyordu) */
.sp-body .dx-datagrid-column-chooser .dx-list-item .dx-list-item-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
}
.sp-body .dx-datagrid-column-chooser .dx-list-item .dx-list-item-content .dx-checkbox {
    flex: 0 0 auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}
.sp-body .dx-datagrid-column-chooser .dx-list-item.dx-state-hover {
    background: rgba(245, 158, 11, 0.08) !important;
}
.sp-body .dx-datagrid-column-chooser .dx-empty-message {
    color: var(--sp-text-muted) !important;
    font-size: 12.5px !important;
}

/* ============================================================
   CANLI TAKİP — portal-native tam ekran Leaflet sayfası (lt- prefix)
   Ayrı sayfa (/SupplierPortal/CanliTakip); sidebar yok, harita odaklı.
   ============================================================ */
.lt-page { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.lt-top {
    flex: 0 0 auto;
    height: 52px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px;
    background: var(--sp-bg-card);
    border-bottom: 1px solid var(--sp-border);
}
.lt-top-l { display: flex; align-items: center; gap: 10px; }
.lt-top-l svg { width: 20px; height: 20px; color: var(--sp-primary-dark); }
.lt-top-title { font-size: 15px; font-weight: 700; color: var(--sp-text); }
.lt-top-r { display: flex; align-items: center; gap: 14px; }
.lt-stat { font-size: 12px; color: var(--sp-text-muted); }
.lt-stat b { color: var(--sp-text); font-weight: 700; }
.lt-wrap { flex: 1 1 auto; display: flex; min-height: 0; }
.lt-side {
    flex: 0 0 340px;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--sp-border);
    background: var(--sp-bg);
}
.lt-side-head { padding: 10px; border-bottom: 1px solid var(--sp-border); }
.lt-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 6px; }

/* ============ CanliTakip kompakt arac satiri (.lt-vrow) — 2026-05-25 ============
   3.png estetigi: tek satir (~48px), durum dot solda, plaka + alt-bilgi orta,
   risk uyarisi + zaman + chevron sagda. Sol-border renkli risk gosterir. */
.lt-vrow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 10px;
    margin: 3px 4px;
    border-radius: 7px;
    border: 1px solid transparent;
    border-left-width: 3px;
    background: var(--sp-bg-card);
    color: var(--sp-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lt-vrow:hover {
    background: var(--sp-bg-input);
    border-color: var(--sp-border, var(--sp-line, #2a2a30));
}
.lt-vrow.active {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    border-left-color: var(--sp-primary, #f59e0b);
}
.lt-vrow.risk-high { border-left-color: #ef4444; }
.lt-vrow.risk-warn { border-left-color: #f59e0b; }

.lt-vrow-dot {
    flex: none;
    width: 9px; height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
.lt-vrow-dot.sig-fresh    { background: #10b981; }
.lt-vrow-dot.sig-recent   { background: #3b82f6; }
.lt-vrow-dot.sig-delayed  { background: #f59e0b; animation: cm-pulse 1.6s infinite; }
.lt-vrow-dot.sig-lost     { background: #6b7280; opacity: 0.6; }

.lt-vrow-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.lt-vrow-plate {
    font-size: 13px;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
    letter-spacing: 0.3px;
    color: var(--sp-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lt-vrow-sub {
    font-size: 11px;
    color: var(--sp-text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lt-vrow-speed {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.lt-vrow-speed.mov-on   { color: #10b981; }
.lt-vrow-speed.mov-stop { color: #f59e0b; opacity: 0.85; }

/* Belge uyari chip'i — sub satirinda inline (bizim filomuzdaki arac icin) */
.lt-vrow-doc {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lt-vrow-doc.doc-expired  { color: #ef4444; }
.lt-vrow-doc.doc-critical { color: #f59e0b; }
.lt-vrow-doc.doc-warning  { color: #ca8a04; }

/* ============ Kompakt expand alani — yalniz .active + meta dolu araclarda ============
   Modulle uyumlu: 2-3 mini satir + 2 kucuk aksiyon. Side panel HALA tam detay icin var. */
.lt-vrow { flex-wrap: wrap; }     /* expand alani alt satira aksin */
.lt-vrow-x {
    flex: 0 0 100%;
    display: none;
    margin: 5px 0 2px 17px;       /* dot ile hizali sol (9px dot + 8px gap) */
    padding-top: 6px;
    border-top: 1px dashed var(--sp-border);
}
.lt-vrow.active .lt-vrow-x { display: block; }
.lt-vrow-x-r {
    font-size: 11px;
    color: var(--sp-text-muted);
    line-height: 1.5;
    margin: 1px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.lt-vrow-x-r > * { display: inline; }
.lt-vrow-x-ico { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; opacity: 0.75; }
.lt-vrow-x-link {
    color: var(--sp-primary-dark);
    text-decoration: none;
    font-weight: 600;
}
.lt-vrow-x-link:hover { text-decoration: underline; }
.lt-vrow-x-overdue { color: #ef4444; font-weight: 600; }
.lt-vrow-x-own {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 9px;
    line-height: 1.4;
}
.lt-vrow-x-own.ozmal  { background: rgba(99,102,241,.14);  color: #4338ca; }
.lt-vrow-x-own.kiralik { background: rgba(245,158,11,.16); color: #92400e; }
.lt-vrow-x-acts {
    display: flex;
    gap: 5px;
    margin-top: 6px;
}
.lt-vrow-x-btn {
    flex: 1 1 auto;
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 8px;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
    color: var(--sp-text);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lt-vrow-x-btn:hover {
    background: var(--sp-bg-input);
    border-color: var(--sp-primary);
    color: var(--sp-primary-dark);
}

.lt-vrow-aside {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lt-vrow-warn {
    width: 13px; height: 13px;
    color: #ef4444;
}
.lt-vrow-time {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--sp-text-muted);
    opacity: 0.85;
}
.lt-vrow-chev {
    width: 12px; height: 12px;
    color: var(--sp-text-muted);
    opacity: 0.5;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.lt-vrow:hover .lt-vrow-chev,
.lt-vrow.active .lt-vrow-chev { opacity: 1; transform: translateX(2px); }

.lt-veh {
    padding: 9px 11px;
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    margin-bottom: 4px;
    border: 1px solid transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.lt-veh:hover { background: rgba(245, 158, 11, 0.07); }
.lt-veh.active { background: rgba(245, 158, 11, 0.12); border-color: var(--sp-primary); }
.lt-veh-plate { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.lt-veh-sub { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }
.lt-veh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.lt-veh-dot.on { background: #10b981; }
.lt-veh-dot.stale { background: var(--sp-text-muted); }
.lt-map { flex: 1 1 auto; min-width: 0; position: relative; }
#ltMap { width: 100%; height: 100%; }
.lt-empty { padding: 24px 12px; text-align: center; color: var(--sp-text-muted); font-size: 12.5px; }
.leaflet-popup-content { font-family: 'Inter', sans-serif; font-size: 12.5px; }
.leaflet-popup-content b { color: var(--sp-text); }

/* Simülasyon toggle */
.lt-sim { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sp-text-muted); cursor: pointer; user-select: none; }
.lt-sim input { accent-color: var(--sp-primary); cursor: pointer; }

/* KPI / hızlı filtre */
.lt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; border-bottom: 1px solid var(--sp-border); }
.lt-kpi {
    text-align: center; padding: 7px 2px; border-radius: var(--sp-radius-sm);
    cursor: pointer; border: 1px solid transparent; transition: background-color .12s ease, border-color .12s ease;
}
.lt-kpi:hover { background: rgba(245, 158, 11, 0.07); }
.lt-kpi.active { background: rgba(245, 158, 11, 0.12); border-color: var(--sp-primary); }
.lt-kpi b { display: block; font-size: 16px; font-weight: 800; color: var(--sp-text); }
.lt-kpi b.g { color: #059669; } .lt-kpi b.a { color: var(--sp-primary-dark); } .lt-kpi b.m { color: var(--sp-text-muted); }
.lt-kpi span { font-size: 10.5px; color: var(--sp-text-muted); }

/* Marker (yöne dönen + durum renkli) */
.lt-mk { width: 30px; height: 30px; }
.lt-mk-arrow {
    width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent;
    border-bottom: 22px solid #059669; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
    transform-origin: 50% 60%;
}
.lt-mk.moving .lt-mk-arrow { border-bottom-color: #10b981; }
.lt-mk.stopped .lt-mk-arrow { border-bottom-color: #6b7280; }
.lt-mk.offline .lt-mk-arrow { border-bottom-color: #9ca3af; opacity: .6; }
.lt-mk.over .lt-mk-arrow { border-bottom-color: #ef4444; }
.lt-mk-plate {
    position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 4px;
    font-size: 10px; font-weight: 700; padding: 1px 5px; white-space: nowrap; color: var(--sp-text);
}

/* Araç detay kartı (harita üstü) */
.lt-card {
    position: absolute; top: 14px; right: 14px; width: 340px; max-height: calc(100% - 28px); z-index: 600;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-lg); padding: 0;
    display: flex; flex-direction: column; overflow: hidden;
}
.lt-card-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--sp-border); background: linear-gradient(180deg, rgba(245,158,11,.05), transparent); position: relative; }
.lt-card-x { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; font-size: 18px; line-height: 1; color: var(--sp-text-muted); cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background-color .15s ease, color .15s ease; }
.lt-card-x:hover { background: var(--sp-bg-input); color: var(--sp-text); }
.lt-card-plate { font-size: 17px; font-weight: 800; color: var(--sp-text); letter-spacing: .3px; padding-right: 24px; }
.lt-card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.lt-card-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.6; }
.lt-card-badge.moving { background: rgba(16,185,129,.16); color: #059669; }
.lt-card-badge.stopped { background: rgba(245,158,11,.16); color: var(--sp-primary-dark); }
.lt-card-badge.offline { background: var(--sp-bg-input); color: var(--sp-text-muted); }
.lt-card-badge.over { background: rgba(239,68,68,.16); color: #dc2626; }
.lt-card-badge.fresh { background: rgba(16,185,129,.12); color: #059669; }
.lt-card-badge.delayed { background: rgba(245,158,11,.16); color: var(--sp-primary-dark); }
.lt-card-badge.lost { background: rgba(239,68,68,.12); color: #dc2626; }
.lt-card-badge.prov { background: rgba(99,102,241,.12); color: #4338ca; }
.lt-card-rows { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; overflow-y: auto; flex: 1; min-height: 0; }
.lt-card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--sp-border); }
.lt-card-row:last-child { border-bottom: 0; }
.lt-card-row > span { color: var(--sp-text-muted); flex-shrink: 0; }
.lt-card-row > b { color: var(--sp-text); font-weight: 600; text-align: right; word-break: break-word; }
.lt-card-row a { color: var(--sp-primary-dark); text-decoration: none; }
.lt-card-row a:hover { text-decoration: underline; }
.lt-card-actions { padding: 10px 12px 12px; border-top: 1px solid var(--sp-border); display: flex; gap: 6px; background: rgba(0,0,0,.015); }
.lt-card-actions .sp-btn, .lt-card-actions .sp-btn-ghost { flex: 1; padding: 8px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.lt-card-actions .sp-btn-ghost.active { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-card-actions .sp-btn.active { filter: brightness(.92); }
.lt-card-actions svg { width: 13px; height: 13px; }

/* ============================================================
   VIC TARZI ZENGİN KPI BAR (lt-kpis-rich) + VEHICLE CARD (.lt-veh-rich)
   ============================================================ */
/* ============ CanliTakip KPI chip'leri — 2026-05-25 kompakt revizyon ============
   Onceki: her KPI buyuk kutu (~75px), 14 kutu = ~600px yer kapliyordu.
   Yeni: 3.png estetigi — yuvarlak pill chip (dot + label + sayi), flex-wrap row.
   HTML degismedi; sadece CSS pill paternine donusturuldu. */
/* CanliTakip KPI chip'leri — 10.png revizyonu (2026-05-25):
   %15 daha kucuk; grup basliklari normal case (UPPERCASE kalkti);
   chip'ler satiri esit dagilimla doldurur (flex:1 1 0). */
.lt-kpis-rich { display: flex; flex-direction: column; gap: 7px; padding: 10px 10px 12px; border-bottom: 1px solid var(--sp-border); }
.lt-kpi-grp { display: flex; flex-flow: row wrap; gap: 3px; }
.lt-kpi-grp-h {
    flex: 0 0 100%;
    display: flex; align-items: center; gap: 5px;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--sp-text-muted);
    font-weight: 600;
    padding: 0 2px;
}
.lt-kpi-grp-h svg { width: 11px; height: 11px; opacity: .7; }

.lt-kpis-rich .lt-kpi {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
    line-height: 1.2;
}
.lt-kpis-rich .lt-kpi::before {
    content: '';
    flex: none;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--sp-text-muted);
    opacity: 0.55;
}
.lt-kpis-rich .lt-kpi:hover { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, .35); }
.lt-kpis-rich .lt-kpi.active { background: rgba(245, 158, 11, 0.14); border-color: var(--sp-primary); }
.lt-kpis-rich .lt-kpi b {
    display: inline;
    font-size: 10px;
    font-weight: 700;
    color: var(--sp-text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    order: 2;
}
.lt-kpis-rich .lt-kpi span {
    display: inline;
    font-size: 10px;
    color: var(--sp-text-muted);
    line-height: 1.2;
    order: 1;
}

/* Dot renkleri — sinif bazli (CSHTML degismedi) */
.lt-kpis-rich .lt-kpi.sig-fresh::before    { background: #10b981; opacity: 1; }
.lt-kpis-rich .lt-kpi.sig-recent::before   { background: #14b8a6; opacity: 1; }
.lt-kpis-rich .lt-kpi.sig-delayed::before  { background: #f59e0b; opacity: 1; }
.lt-kpis-rich .lt-kpi.sig-lost::before     { background: #ef4444; opacity: 1; }
.lt-kpis-rich .lt-kpi.mov-on::before       { background: #10b981; opacity: 1; }
.lt-kpis-rich .lt-kpi.mov-stop::before     { background: #6b7280; opacity: 0.85; }
.lt-kpis-rich .lt-kpi.doc-exp::before      { background: #ef4444; opacity: 1; }
.lt-kpis-rich .lt-kpi.doc-crit::before     { background: #f59e0b; opacity: 1; }
.lt-kpis-rich .lt-kpi.doc-warn::before     { background: #facc15; opacity: 1; }
.lt-kpis-rich .lt-kpi.sec-unfit::before    { background: #ef4444; opacity: 1; }
.lt-kpis-rich .lt-kpi.sec-repair::before   { background: #f59e0b; opacity: 1; }
.lt-kpis-rich .lt-kpi.sec-maint::before    { background: #facc15; opacity: 1; }
.lt-kpis-rich .lt-kpi.sec-ok::before       { background: #10b981; opacity: 1; }

/* Sayi rengi — dot ile aynı (mevcut palet korundu) */
.lt-kpis-rich .lt-kpi.sig-fresh b    { color: #10b981; }
.lt-kpis-rich .lt-kpi.sig-recent b   { color: #14b8a6; }
.lt-kpis-rich .lt-kpi.sig-delayed b  { color: #f59e0b; }
.lt-kpis-rich .lt-kpi.sig-lost b     { color: #ef4444; }
.lt-kpis-rich .lt-kpi.mov-on b       { color: #10b981; }
.lt-kpis-rich .lt-kpi.mov-stop b     { color: #6b7280; }
.lt-kpis-rich .lt-kpi.doc-exp b      { color: #ef4444; }
.lt-kpis-rich .lt-kpi.doc-crit b     { color: #f59e0b; }
.lt-kpis-rich .lt-kpi.doc-warn b     { color: #ca8a04; }
.lt-kpis-rich .lt-kpi.sec-unfit b    { color: #ef4444; }
.lt-kpis-rich .lt-kpi.sec-repair b   { color: #f59e0b; }
.lt-kpis-rich .lt-kpi.sec-maint b    { color: #ca8a04; }
.lt-kpis-rich .lt-kpi.sec-ok b       { color: #10b981; }

/* Zengin araç kartı */
.lt-veh-rich { position: relative; padding: 10px 12px 12px; border: 1px solid var(--sp-border); background: var(--sp-bg-card); border-radius: 8px; margin: 6px 8px 0; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease; }
.lt-veh-rich:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); border-color: rgba(245, 158, 11, .35); transform: translateY(-1px); }
.lt-veh-rich.active { border-color: var(--sp-primary); background: rgba(245, 158, 11, .05); }
.lt-veh-rich.has-doc-expired { border-left: 3px solid #ef4444; }
.lt-veh-rich.has-doc-critical { border-left: 3px solid #f59e0b; }
.lt-veh-rich.has-doc-warning { border-left: 3px solid #facc15; }

/* ===== Kompakt araç kartı (lt-vc) — yoğun veri, küçük punto, etiketli ve sade ===== */
.lt-veh-rich.lt-vc { padding: 7px 9px 8px; margin: 10px 8px 0; }
.lt-vc-top { display: flex; align-items: center; gap: 6px; }
.lt-vc-plate { font-size: 13px; font-weight: 800; letter-spacing: .3px; color: var(--sp-text-primary); }
.lt-vc-id { font-size: 10px; color: var(--sp-text-muted); }
.lt-vc-own { margin-left: auto; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--sp-border); color: var(--sp-text-secondary); }
.lt-vc-own.ozmal { color: #10b981; border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.08); }
.lt-vc-own.kiralik { color: #3b82f6; border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.08); }
.lt-vc-own.spot { color: #f59e0b; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.08); }
.lt-vc-sub { font-size: 10.5px; color: var(--sp-text-secondary); margin-top: 2px; line-height: 1.3; }
.lt-vc-owner { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--sp-text-muted); margin-top: 2px; }
.lt-vc-owner svg { width: 11px; height: 11px; flex: none; }
.lt-vc-status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11px; font-weight: 600; margin-top: 4px; color: var(--sp-text-secondary); }
.lt-vc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sp-text-muted); }
.lt-vc-status.st-moving .lt-vc-dot { background: #10b981; }
.lt-vc-status.st-stopped .lt-vc-dot { background: #9ca3af; }
.lt-vc-status.st-off .lt-vc-dot { background: #ef4444; }
.lt-vc-st-main { color: var(--sp-text-primary); }
.lt-vc-sep { color: var(--sp-text-muted); }
.lt-vc-over { color: #ef4444; font-weight: 700; }
.lt-vc-age { color: var(--sp-text-muted); font-weight: 500; }
.lt-vc-sec-h { margin-top: 6px; }
.lt-vc-track { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--sp-text-muted); margin-top: 3px; }
.lt-vc-track svg { width: 12px; height: 12px; flex: none; color: var(--sp-text-secondary); }
.lt-vc-jobs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lt-vc-job { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9px; }
.lt-vc-job.on { background: rgba(16,185,129,.12); color: #10b981; }
.lt-vc-job.pl { background: rgba(59,130,246,.12); color: #3b82f6; }
.lt-vc-job.none { background: var(--sp-bg-body); color: var(--sp-text-muted); }
/* Görevler başlığı + İş Devam Ediyor / Planlı İş tag'leri (içinde adet badge) */
.lt-vc-jobhead { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.lt-vc-jobhead-t { font-size: 9px; font-weight: 800; letter-spacing: .5px; color: var(--sp-text-muted); }
.lt-vc-jtag { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 9px; }
.lt-vc-jtag b { min-width: 12px; text-align: center; padding: 0 4px; border-radius: 7px; font-weight: 800; }
.lt-vc-jtag.on { background: rgba(16, 185, 129, .12); color: #10b981; }
.lt-vc-jtag.on b { background: rgba(16, 185, 129, .25); }
.lt-vc-jtag.pl { background: rgba(59, 130, 246, .12); color: #3b82f6; }
.lt-vc-jtag.pl b { background: rgba(59, 130, 246, .25); }
/* İşler — rota bazlı satır (RotaID/Tarih/Şoför/öng.km/öng.süre), alt alta */
.lt-vc-route { width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid var(--sp-border); border-radius: 6px; background: var(--sp-bg-body); }
.lt-vc-route-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.lt-vc-rst-note { display: flex; align-items: flex-start; gap: 5px; font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; margin-top: 4px; line-height: 1.3; }
.lt-vc-rst-note svg { width: 12px; height: 12px; flex: none; margin-top: 1px; }
.lt-vc-rst-note.warn { color: #f59e0b; background: rgba(245, 158, 11, .12); }
.lt-vc-rst-note.late { color: #ef4444; background: rgba(239, 68, 68, .12); }
.lt-vc-route-top .rid { font-size: 11.5px; font-weight: 800; color: var(--sp-text-primary); }
.lt-vc-route-top .rdate { font-size: 10px; color: var(--sp-text-muted); }
.lt-vc-route-top .rst { margin-left: auto; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.lt-vc-route-line { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px; font-size: 10.5px; color: var(--sp-text-secondary); }
.lt-vc-route-line svg { width: 12px; height: 12px; flex: none; color: var(--sp-text-muted); vertical-align: -2px; }
.lt-vc-finish { font-weight: 600; color: var(--sp-text-primary); }
.lt-vc-finnote { font-size: 9px; font-weight: 700; padding: 0 5px; border-radius: 6px; }
.lt-vc-finnote.late { color: #ef4444; background: rgba(239, 68, 68, .12); }
.lt-vc-finnote.soon { color: var(--sp-text-muted); background: var(--sp-bg-card); }
.lt-vc-finnote.done { color: #10b981; background: rgba(16, 185, 129, .12); }

/* ===== Araçlar sidebar alt-tab'lar (Liste/Özet/Uyarılar/Boşta/Zaman) ===== */
.kp-vtab { display: flex; gap: 3px; padding: 6px 8px; position: sticky; top: 0; z-index: 2; background: var(--sp-bg-body); border-bottom: 1px solid var(--sp-border); }
.kp-vtab-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--sp-text-muted); font-size: 9px; font-weight: 700; cursor: pointer; position: relative; transition: background-color .15s ease, color .15s ease; }
.kp-vtab-btn i { font-size: 13px; }
.kp-vtab-btn:hover { background: var(--sp-bg-input); color: var(--sp-text); }
.kp-vtab-btn.on { background: rgba(121, 123, 242, .12); color: #797bf2; }
.kp-vtab-n { position: absolute; top: 1px; right: 6px; min-width: 14px; text-align: center; padding: 0 3px; border-radius: 8px; background: #ef4444; color: #fff; font-size: 8px; font-weight: 800; }
.kp-vsum { padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.kp-vsum-top { font-size: 12px; color: var(--sp-text-secondary); }
.kp-vsum-top b { font-size: 16px; font-weight: 800; color: var(--sp-text-primary); }
.kp-vsum-sub { color: var(--sp-text-muted); font-size: 11px; }
.kp-vsum-t { font-size: 9px; font-weight: 800; letter-spacing: .5px; color: var(--sp-text-muted); margin-bottom: 4px; }
.kp-stack { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--sp-border); }
.kp-stack span { display: block; height: 100%; }
.kp-leg { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 5px; }
.kp-leg-i { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--sp-text-secondary); }
.kp-leg-i i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.kp-leg-i b { color: var(--sp-text-primary); font-weight: 700; }
.kp-valert { padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.kp-valert-row { display: flex; align-items: flex-start; gap: 7px; padding: 6px 8px; border: 1px solid var(--sp-border); border-left-width: 3px; border-radius: 7px; background: var(--sp-bg-card); cursor: pointer; transition: box-shadow .15s ease; }
.kp-valert-row:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, .08); }
.kp-valert-row.err { border-left-color: #ef4444; }
.kp-valert-row.warn { border-left-color: #f59e0b; }
.kp-valert-row > i { margin-top: 1px; font-size: 12px; flex: none; }
.kp-valert-row.err > i { color: #ef4444; }
.kp-valert-row.warn > i { color: #f59e0b; }
.kp-valert-b { display: flex; flex-direction: column; min-width: 0; }
.kp-valert-pl { font-size: 11px; font-weight: 800; color: var(--sp-text-primary); }
.kp-valert-t { font-size: 10.5px; color: var(--sp-text-secondary); line-height: 1.3; }
/* Uyarılar — araç tipi bazlı filo sağlığı + problem modal */
.kp-vhealth { padding: 8px; }
.kp-vhealth .kp-vsum-t { margin-bottom: 6px; }
.kp-vhrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid var(--sp-border); }
.kp-vhrow:last-child { border-bottom: 0; }
.kp-vhrow-l { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--sp-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-vhchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 9px; border: 1px solid transparent; font-size: 10px; font-weight: 700; cursor: pointer; transition: filter .15s ease; }
.kp-vhchip b { font-weight: 800; }
.kp-vhchip:hover { filter: brightness(.95); }
.kp-vhchip.unfit { background: rgba(239, 68, 68, .12); color: #ef4444; }
.kp-vhchip.warn { background: rgba(245, 158, 11, .12); color: #f59e0b; }
/* Uyarı görünümlü Filo Sağlığı başlığı + uyarı kategori başlıkları */
.kp-alert-head { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #f59e0b; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .25); border-radius: 7px; padding: 5px 8px; margin-bottom: 6px; }
.kp-vcats { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.kp-vcat-desc { font-size: 10px; color: var(--sp-text-muted); line-height: 1.35; margin: -2px 0 4px; }
/* Boşta — mesafe nehri (kıvrılan kesik çizgi path + noktalar) */
.kp-river { display: block; width: 100%; max-width: 240px; margin: 6px auto 2px; }
.kp-river-h { max-width: 320px; }
.kp-river-toggle { display: flex; gap: 4px; justify-content: center; margin: 2px 0 4px; }
.kp-river-tg { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--sp-border); border-radius: 7px; background: var(--sp-bg-card); color: var(--sp-text-muted); font-size: 10px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.kp-river-tg i { font-size: 9px; }
.kp-river-tg.on { background: rgba(121, 123, 242, .12); color: #797bf2; border-color: rgba(121, 123, 242, .4); }
.kp-river-line { fill: none; stroke: var(--sp-border); stroke-width: 3; stroke-dasharray: 5 6; stroke-linecap: round; }
.kp-river-start { fill: #797bf2; }
.kp-river-startlbl { fill: var(--sp-text-secondary); font-size: 9px; font-weight: 700; }
.kp-river-cnt { fill: var(--sp-text-muted); font-size: 9px; font-weight: 600; }
.kp-river-dot { stroke: var(--sp-bg-body); stroke-width: 2.5; }
.kp-river-n { fill: #fff; font-size: 10px; font-weight: 800; }
.kp-river-node.empty .kp-river-n { fill: var(--sp-text-muted); }
.kp-river-lbl { fill: var(--sp-text-secondary); font-size: 9px; font-weight: 700; }
.kp-river-node[data-band] { cursor: pointer; }
.kp-river-node[data-band]:hover .kp-river-dot { stroke: #797bf2; stroke-width: 3; }
/* Boşta — görsel mesafe yolu (yatay hat + noktalar) */
.kp-vpath { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; padding: 4px 2px 2px; }
.kp-vpath::before { content: ''; position: absolute; left: 12%; right: 12%; top: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444); opacity: .45; z-index: 0; }
.kp-vpath-node { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: none; padding: 0; cursor: pointer; }
.kp-vpath-node[disabled] { cursor: default; }
.kp-vpath-dotwrap { height: 48px; display: flex; align-items: center; justify-content: center; }
.kp-vpath-dot { display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; border: 2px solid var(--sp-bg-body); box-shadow: 0 2px 7px rgba(0, 0, 0, .2); transition: transform .12s ease; }
.kp-vpath-node:not([disabled]):hover .kp-vpath-dot { transform: scale(1.14); }
.kp-vpath-node.empty .kp-vpath-dot { color: var(--sp-text-muted); box-shadow: none; }
.kp-vpath-dist { font-size: 9px; font-weight: 700; color: var(--sp-text-secondary); white-space: nowrap; }
.kp-vcat { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--sp-border); border-left: 3px solid var(--sp-border); border-radius: 7px; background: var(--sp-bg-card); color: var(--sp-text); font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.kp-vcat > i { flex: none; font-size: 13px; color: var(--sp-text-muted); }
.kp-vcat-t { flex: 1; min-width: 0; line-height: 1.3; }
.kp-vcat-n { flex: none; min-width: 20px; text-align: center; padding: 1px 7px; border-radius: 9px; background: var(--sp-bg-input); color: var(--sp-text-muted); font-size: 11px; font-weight: 800; }
.kp-vcat.on { border-left-color: #ef4444; }
.kp-vcat.on > i { color: #ef4444; }
.kp-vcat.on .kp-vcat-n { background: rgba(239, 68, 68, .14); color: #ef4444; }
.kp-vcat.on:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.kp-vcat.warn { border-left-color: #f59e0b; }
.kp-vcat.warn > i { color: #f59e0b; }
.kp-vcat.warn .kp-vcat-n { background: rgba(245, 158, 11, .14); color: #f59e0b; }
.kp-vcat.info { border-left-color: #3b82f6; }
.kp-vcat.info > i { color: #3b82f6; }
.kp-vcat.info .kp-vcat-n { background: rgba(59, 130, 246, .14); color: #3b82f6; }
.kp-vcat[disabled] { opacity: .5; cursor: default; }
.kp-hm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 20000; display: none; align-items: center; justify-content: center; padding: 16px; }
.kp-hm-overlay.show { display: flex; }
.kp-hm { width: 420px; max-width: 96vw; max-height: 86vh; display: flex; flex-direction: column; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); overflow: hidden; }
.kp-hm-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--sp-border); }
.kp-hm-title { flex: 1; font-size: 13px; font-weight: 800; color: var(--sp-text-primary); }
.kp-hm-close { flex: none; width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; color: var(--sp-text-muted); font-size: 14px; cursor: pointer; }
.kp-hm-close:hover { background: var(--sp-bg-input); color: var(--sp-text); }
.kp-hm-search { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-bottom: 1px solid var(--sp-border); }
.kp-hm-search i { color: var(--sp-text-muted); font-size: 12px; }
.kp-hm-search input { flex: 1; min-width: 0; border: 1px solid var(--sp-border); border-radius: 7px; background: var(--sp-bg-body); color: var(--sp-text); font-size: 12px; padding: 5px 9px; outline: none; }
.kp-hm-search input:focus { border-color: #797bf2; }
.kp-hm-body { padding: 10px 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.kp-hm-body > * { flex: 0 0 auto; }   /* sıkışma yerine doğal yükseklik → scroll */
.kp-hm-vw { border: 1px solid var(--sp-border); border-radius: 9px; overflow: hidden; }
.kp-hm-pt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg-card); color: var(--sp-text); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.kp-hm-pt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kp-hm-pt-nm { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-hm-pt-info { font-size: 9.5px; color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-hm-back { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 4px 10px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-card); color: var(--sp-text-secondary); font-size: 11px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.kp-hm-back:hover { border-color: #797bf2; color: #797bf2; }
.kp-hm-pt:hover { border-color: #797bf2; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.kp-hm-pt-ic { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(59,130,246,.12); color: #3b82f6; font-size: 12px; }
.kp-hm-pt-nm { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-hm-pt-n { flex: none; font-size: 10.5px; font-weight: 800; color: #3b82f6; background: rgba(59,130,246,.12); padding: 2px 8px; border-radius: 9px; }
.kp-hm-pt-ch { flex: none; color: var(--sp-text-muted); font-size: 11px; }
.lt-vc-ktyrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.kp-hm-distrow { display: flex; align-items: center; gap: 6px; padding: 5px 9px; font-size: 10.5px; font-weight: 700; color: #3b82f6; background: rgba(59,130,246,.08); border-bottom: 1px solid var(--sp-border); }
.kp-hm-distrow b { color: var(--sp-text-primary); }
.kp-hm-vw .lt-veh-rich { margin: 0; border: none; border-radius: 0; }
.kp-hm-vw .lt-veh-rich:hover { box-shadow: none; transform: none; }
.kp-hm-veh { border: 1px solid var(--sp-border); border-radius: 8px; padding: 8px 10px; background: var(--sp-bg-body); cursor: pointer; transition: border-color .15s ease; }
.kp-hm-veh:hover { border-color: #797bf2; }
.kp-hm-veh-pl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--sp-text-primary); margin-bottom: 4px; }
.kp-hm-dist { margin-left: auto; font-size: 10px; font-weight: 700; color: #3b82f6; background: rgba(59,130,246,.12); padding: 1px 7px; border-radius: 8px; }
.kp-hm-veh-pl { display: flex; align-items: center; gap: 6px; }
.kp-hm-kv { display: flex; gap: 8px; font-size: 10.5px; line-height: 1.4; margin-top: 2px; }
.kp-hm-kv .k { flex: none; width: 64px; color: var(--sp-text-muted); font-weight: 600; }
.kp-hm-kv .v { flex: 1; min-width: 0; color: var(--sp-text); font-weight: 600; }
.kp-hm-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.kp-hm-bdg { font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 8px; }
.kp-hm-bdg.ok { background: rgba(16,185,129,.12); color: #10b981; }
.kp-hm-bdg.warn { background: rgba(245,158,11,.14); color: #f59e0b; }
.kp-hm-bdg.err { background: rgba(239,68,68,.14); color: #ef4444; }
.kp-hm-veh-pl i { color: var(--sp-text-muted); font-size: 11px; }
.kp-hm-prob { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; line-height: 1.35; padding: 2px 0; }
.kp-hm-prob i { margin-top: 1px; font-size: 11px; flex: none; }
.kp-hm-prob.err { color: #ef4444; }
.kp-hm-prob.warn { color: #f59e0b; }
.kp-vtl { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.kp-vtl-head { font-size: 11px; color: var(--sp-text-secondary); margin-bottom: 4px; }
.kp-vtl-head b { color: var(--sp-text-primary); font-weight: 800; }
.kp-vtl-head .late { color: #ef4444; font-weight: 700; }
.kp-vtl-row { display: flex; align-items: center; gap: 6px; }
.kp-vtl-h { flex: none; width: 40px; font-size: 10px; color: var(--sp-text-muted); font-weight: 600; }
.kp-vtl-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--sp-border); overflow: hidden; }
.kp-vtl-f { display: block; height: 100%; border-radius: 5px; background: #3b82f6; }
.kp-vtl-f.late { background: #ef4444; }
.kp-vtl-v { flex: none; min-width: 16px; text-align: right; font-size: 10px; font-weight: 700; color: var(--sp-text-primary); }
.kp-vtl-head small { font-weight: 600; color: var(--sp-text-muted); }
.kp-vtl-head i { color: #797bf2; }
.kp-vtl-sum { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.kp-vtl-chip { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); color: var(--sp-text-secondary); }
.kp-vtl-chip b { color: var(--sp-text-primary); }
.kp-vtl-chip.busy { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #ef4444; }
.kp-vtl-chip.calm { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: #10b981; }
.kp-vtl-chip.free { background: var(--sp-bg-body); color: var(--sp-text-muted); }
.kp-vtl-rows { display: flex; flex-direction: column; gap: 3px; }
.kp-vtl-row.now { background: rgba(121,123,242,.08); border-radius: 6px; }
.kp-vtl-row.now .kp-vtl-h { color: #797bf2; font-weight: 800; }
.kp-vtl-f.busy { background: #ef4444; }
.kp-vtl-f.mid { background: #f59e0b; }
.kp-vtl-f.calm { background: #10b981; }
.kp-vtl-f.free { background: transparent; }
.kp-vtl-idle { flex: none; min-width: 50px; text-align: right; font-size: 9px; font-weight: 700; color: #f59e0b; }
.kp-vtl-idle.z { color: var(--sp-text-muted); opacity: .55; }
.kp-vtl-idle.clk { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.kp-vtl-idle.clk:hover { color: #ef4444; }
.kp-vtl-nomatch { display: flex; align-items: center; gap: 7px; padding: 9px 11px; font-size: 12px; font-weight: 700; color: var(--sp-text); }
.kp-vtl-nomatch span { color: var(--sp-text-muted); font-weight: 600; font-size: 10.5px; }
.kp-vtl-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--sp-border); font-size: 9px; color: var(--sp-text-muted); font-weight: 600; }
.kp-vtl-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
.kp-vtl-legend .dot.busy { background: #ef4444; }
.kp-vtl-legend .dot.mid { background: #f59e0b; }
.kp-vtl-legend .dot.calm { background: #10b981; }
.kp-vtl-legend .dot.free { background: var(--sp-border); }
/* Üstte tablı özet paneli — liste her zaman altta görünür */
.kp-vsumpanel { border-bottom: 2px solid var(--sp-border); background: var(--sp-bg-body); }
.kp-vtab { position: static; }
.kp-vtab-body { }   /* scroll yok — rapor tamamı görünür (#kpLeftBody scroll'lar) */
.kp-vft { margin-bottom: 8px; }
.kp-vft:last-child { margin-bottom: 0; }
.kp-vft-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.kp-vft-l { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: var(--sp-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-vft-n { flex: none; font-size: 9.5px; color: var(--sp-text-muted); }
.kp-vft-v { flex: none; min-width: 34px; text-align: right; font-size: 11px; font-weight: 800; color: var(--sp-text-primary); }
.kp-vft-bar { height: 8px; border-radius: 5px; background: var(--sp-border); overflow: hidden; }
.kp-vft-f { display: block; height: 100%; border-radius: 5px; }
.kp-vft-cap { font-size: 9.5px; color: var(--sp-text-muted); margin-top: 2px; }
/* Seferler özet — KPI grupları (Rota Bilgileri / Planlama Bilgileri) kart grid */
.kp-rsum-grp { margin-bottom: 9px; }
.kp-rsum-grp:last-child { margin-bottom: 0; }
.kp-rsum-grp-h { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; letter-spacing: .4px; color: var(--sp-text-muted); margin-bottom: 5px; }
.kp-rsum-grp-h i { color: var(--sp-primary); font-size: 10px; }
.kp-rsum-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.kp-rsum-card { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: var(--sp-radius-sm); background: var(--sp-bg-card); border: 1px solid var(--sp-border); }
.kp-rsum-card .kp-rsc-ic { flex: none; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.kp-rsum-card.rota .kp-rsc-ic { background: rgba(59, 130, 246, .14); color: #3b82f6; }
.kp-rsum-card.plan .kp-rsc-ic { background: rgba(16, 185, 129, .14); color: #10b981; }
.kp-rsum-card .kp-rsc-body { min-width: 0; line-height: 1.2; }
.kp-rsum-card .kp-rsc-v { display: block; font-size: 12.5px; font-weight: 800; color: var(--sp-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-rsum-card .kp-rsc-l { display: block; font-size: 8.5px; font-weight: 600; color: var(--sp-text-muted); letter-spacing: .2px; }
.kp-vft-cap b { color: var(--sp-text-primary); font-weight: 700; }
.kp-vft-idleline { margin-top: 2px; font-size: 9.5px; color: var(--sp-text-muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kp-vft-idleline i { color: var(--sp-text-muted); }
.kp-vft-idleline b { color: var(--sp-text-primary); font-weight: 800; }
.kp-vft-idle { margin-top: 8px; font-size: 10px; color: var(--sp-text-secondary); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kp-vft-idle i { color: var(--sp-text-muted); }
.kp-vft-idle b { color: var(--sp-text-primary); font-weight: 800; }
.kp-vidlerow { display: flex; align-items: center; gap: 6px; font-size: 10px; padding: 2px 0 2px 18px; color: var(--sp-text-secondary); }
.kp-vidlerow-l { flex: none; min-width: 64px; font-weight: 600; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-vidlerow-n { flex: none; color: var(--sp-text-muted); }
.kp-vidlerow-c { flex: 1; min-width: 0; text-align: right; color: var(--sp-text-muted); }
/* Pie chart (GPS Aktivite + İş Durumu yan yana) */
.kp-pierow { display: flex; gap: 8px; }
.kp-pieblk { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.kp-pieblk .kp-vsum-t { align-self: stretch; text-align: center; }
.kp-pie { width: 76px; height: 76px; margin: 2px 0 6px; }
.kp-pie circle { fill: none; stroke-width: 5; }
.kp-pie-track { stroke: var(--sp-border); }
.kp-pie-seg { transition: stroke-width .12s ease; }
.kp-pie-seg:hover { stroke-width: 6.5; cursor: pointer; }
.kp-pieblk .kp-leg { flex-direction: column; gap: 2px; align-items: flex-start; width: 100%; }
.kp-vlist { /* araç kartları akışı */ }
.kp-vidle { padding: 8px; }
.kp-vidle-h { font-size: 11px; color: var(--sp-text-secondary); margin-bottom: 6px; }
.kp-vidle-h b { font-size: 15px; font-weight: 800; color: var(--sp-text-primary); }
.kp-vidle-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.kp-vidle-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-card); color: var(--sp-text); font-size: 10.5px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.kp-vidle-chip i { font-size: 10px; color: var(--sp-text-muted); }
.kp-vidle-chip:hover { border-color: #797bf2; color: #797bf2; }
/* Görev kapasite/ilerleme barları (Doluluk / Yükleme / Teslimat) */
.lt-vc-bars { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; }
.lt-vc-bar { display: flex; align-items: center; gap: 6px; font-size: 9.5px; }
.lt-vc-bar-l { flex: none; width: 50px; color: var(--sp-text-muted); font-weight: 600; }
.lt-vc-bar-t { flex: 1; height: 6px; border-radius: 4px; background: var(--sp-border); overflow: hidden; }
.lt-vc-bar-f { display: block; height: 100%; border-radius: 4px; }
.lt-vc-bar-f.ok { background: #3b82f6; }
.lt-vc-bar-f.warn { background: #f59e0b; }
.lt-vc-bar-f.over { background: #ef4444; }
.lt-vc-bar-f.load { background: #f59e0b; }
.lt-vc-bar-f.deliver { background: #3b82f6; }
.lt-vc-bar-f.done { background: #10b981; }
.lt-vc-bar-v { flex: none; min-width: 40px; text-align: right; font-weight: 700; color: var(--sp-text-primary); }
.lt-vc-noload { margin-top: 5px; font-size: 10px; font-weight: 600; font-style: italic; color: var(--sp-text-muted); }
.lt-vc-morejobs-wrap { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.lt-vc-morejobs-wrap[hidden] { display: none; }   /* display:flex, hidden attribute'ünü ezmesin */
.lt-vc-morejobs { align-self: flex-start; margin-top: 2px; padding: 2px 9px; border: 1px dashed var(--sp-border); border-radius: 9px; background: transparent; color: #797bf2; font-size: 10px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.lt-vc-morejobs:hover { background: rgba(121, 123, 242, .1); border-color: #797bf2; }
.lt-vc-driver { display: flex; align-items: center; gap: 6px; }
.lt-vc-drv-ic { width: 14px; height: 14px; flex: none; color: var(--sp-text-muted); }
.lt-vc-driver .nm { font-size: 11.5px; font-weight: 700; color: var(--sp-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.lt-vc-driver .ph { font-size: 10.5px; color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-vc-driver .acts { margin-left: auto; display: flex; gap: 4px; flex: none; }
.lt-vc-act { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--sp-border); background: var(--sp-bg-body); transition: border-color .15s ease, background-color .15s ease; }
.lt-vc-act svg { width: 13px; height: 13px; }
.lt-vc-act.wa { color: #25d366; }
.lt-vc-act.tel { color: #3b82f6; }
.lt-vc-act:hover { border-color: var(--sp-primary); }
.lt-vc-kv { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.lt-vc-kv-row { display: flex; gap: 8px; font-size: 11px; line-height: 1.35; }
.lt-vc-kv-k { flex: none; width: 62px; color: var(--sp-text-muted); font-weight: 600; }
.lt-vc-kv-v { flex: 1; min-width: 0; color: var(--sp-text-primary); font-weight: 600; }
.lt-vc-kv-v.warn { color: #ef4444; }
.lt-vc-div { height: 1px; background: var(--sp-border); margin: 6px 0; }
.lt-vc-cap { /* divider'lar arası — ek margin yok */ }
.lt-vc-cap-h { font-size: 9px; font-weight: 800; letter-spacing: .5px; color: var(--sp-text-muted); margin-bottom: 4px; }
.lt-vc-cap-row { display: flex; flex-wrap: wrap; gap: 4px; }
.lt-vc-cap-tag { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 7px; border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg-body); white-space: nowrap; }
.lt-vc-cap-tag .k { font-size: 9px; font-weight: 600; color: var(--sp-text-muted); }
.lt-vc-cap-tag .v { font-size: 11px; font-weight: 700; color: var(--sp-text-primary); }
.lt-vc-warn { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.lt-vc-warn-row { font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: 6px; line-height: 1.3; }
.lt-vc-warn-row.critical { background: rgba(239,68,68,.10); color: #ef4444; }
.lt-vc-warn-row.warning { background: rgba(245,158,11,.10); color: #f59e0b; }
/* Uygunluk pasaportu satırını kompakt kartla uyumla (global .kp-risk-row sağ panelde aynı kalır) */
.lt-vc .kp-risk-row { align-items: flex-start; margin-top: 6px; padding: 4px 8px; gap: 6px; font-size: 10.5px; border-radius: 6px; border-left-width: 2px; }
.lt-vc .kp-risk-row .kp-risk-label { font-size: 10px; letter-spacing: .2px; line-height: 1.4; }
.lt-vc .kp-risk-row .kp-risk-sum { font-size: 10px; line-height: 1.4; }
.lt-vc .kp-risk-row .kp-risk-dot { width: 7px; height: 7px; margin-right: 0; margin-top: 3px; }
.lt-own { position: absolute; top: 6px; right: 8px; font-size: 10px; padding: 2px 7px; border-radius: 9px; font-weight: 700; line-height: 1.4; text-transform: capitalize; }
.lt-own.ozmal { background: rgba(99,102,241,.14); color: #4338ca; }
.lt-own.kiralik { background: rgba(245,158,11,.16); color: var(--sp-primary-dark); }
.lt-own.spot { background: rgba(13,148,136,.15); color: #0d9488; }
.lt-veh-owner { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sp-text-muted); margin-top: 4px; }
.lt-veh-owner i { font-size: 11px; color: #0d9488; }

/* Görevler tab (lt-side2) — aracın planlı/aktif rota kartları */
.lt-task-list { display: flex; flex-direction: column; gap: 8px; }
.lt-task-item { padding: 9px 10px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-card); }
.lt-task-head { display: flex; align-items: center; gap: 7px; }
.lt-task-st { flex-shrink: 0; font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.lt-task-st.aktif { background: rgba(16,185,129,.15); color: #10b981; }
.lt-task-st.planli { background: rgba(59,130,246,.15); color: #3b82f6; }
.lt-task-title { font-size: 12px; font-weight: 700; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-task-meta { font-size: 10.5px; color: var(--sp-text-muted); margin-top: 4px; }
.lt-task-date { font-size: 10.5px; color: var(--sp-text-muted); margin-top: 3px; }
.lt-task-date i { font-size: 10px; color: var(--sp-text-muted); margin-right: 3px; }
.lt-task-acts { display: flex; gap: 6px; margin-top: 8px; }
.lt-task-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; font-size: 11px; font-weight: 700; border-radius: 6px; cursor: pointer; border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.lt-task-btn i { font-size: 11px; }
.lt-task-btn:hover { border-color: var(--sp-primary); color: var(--sp-primary); }
.lt-task-btn.primary { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-task-btn.primary:hover { background: var(--sp-primary-dark); color: #fff; }
.lt-veh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding-right: 80px; }
.lt-veh-head .lt-veh-plate { font-size: 14px; font-weight: 800; color: var(--sp-text); display: inline-flex; align-items: center; gap: 5px; }
.lt-veh-head .lt-veh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-text-muted); }
.lt-veh-head .lt-veh-dot.on { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.22); }
.lt-veh-head .lt-veh-dot.stale { background: #ef4444; }
.lt-veh-mbadges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.lt-mb { font-size: 10px; padding: 1px 7px; border-radius: 9px; font-weight: 700; line-height: 1.6; }
.lt-mb.sig-fresh { background: rgba(16,185,129,.16); color: #059669; }
.lt-mb.sig-recent { background: rgba(20,184,166,.16); color: #0d9488; }
.lt-mb.sig-delayed { background: rgba(245,158,11,.18); color: var(--sp-primary-dark); }
.lt-mb.sig-lost { background: rgba(239,68,68,.16); color: #dc2626; }
.lt-mb.mov-on { background: rgba(16,185,129,.16); color: #059669; }
.lt-mb.mov-stop { background: rgba(107,114,128,.16); color: #4b5563; }
.lt-mb.mov-off { background: rgba(239,68,68,.12); color: #dc2626; }
.lt-veh-type { font-size: 11px; color: var(--sp-text-muted); margin-top: 5px; }
.lt-veh-driver { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--sp-text); margin-top: 5px; flex-wrap: wrap; }
.lt-veh-driver svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--sp-text-muted); }
.lt-veh-driver .lt-veh-phone { color: var(--sp-text-muted); font-size: 11px; }
.lt-veh-now { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--sp-text-muted); margin-top: 6px; }
.lt-veh-now > span { display: inline-flex; align-items: center; gap: 4px; }
.lt-veh-now svg { width: 11px; height: 11px; }
.lt-veh-prov { font-size: 10px; color: #4338ca; background: rgba(99,102,241,.08); padding: 2px 6px; border-radius: 4px; margin-top: 6px; display: inline-block; }
.lt-veh-docs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--sp-border); }
.lt-doc { display: inline-flex; flex-direction: column; padding: 3px 7px; border-radius: 5px; font-size: 9.5px; line-height: 1.25; min-width: 52px; }
.lt-doc b { font-weight: 700; font-size: 10px; }
.lt-doc span { font-weight: 600; font-size: 9.5px; opacity: .9; }
.lt-doc.expired { background: rgba(239,68,68,.13); color: #dc2626; border: 1px solid rgba(239,68,68,.3); }
.lt-doc.critical { background: rgba(245,158,11,.16); color: var(--sp-primary-dark); border: 1px solid rgba(245,158,11,.35); }
.lt-doc.warning { background: rgba(250,204,21,.14); color: #b45309; border: 1px solid rgba(250,204,21,.35); }

/* ============================================================
   SAĞ TAM-BOY PANEL — Flightradar tarzı (5 sekme: Genel/Hikaye/Perf/Belge/Sürücü)
   ============================================================ */
.lt-side2 {
    position: absolute; top: 0; right: 0; bottom: 0; width: 460px; max-width: 95vw; z-index: 800;
    background: var(--sp-bg-card); border-left: 1px solid var(--sp-border); box-shadow: -10px 0 30px rgba(0, 0, 0, .08);
    transform: translateX(100%); opacity: 0; pointer-events: none;
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease;
    display: flex; flex-direction: column; overflow: visible;
}
.lt-side2.show { transform: translateX(0); opacity: 1; pointer-events: auto; }
.lt-side2-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--sp-border); background: linear-gradient(180deg, rgba(245, 158, 11, .07), transparent); position: relative; }
.lt-side2-x { position: relative; background: transparent; border: 0; font-size: 22px; line-height: 1; color: var(--sp-text-muted); cursor: pointer; padding: 4px 9px; border-radius: 6px; transition: background-color .15s ease, color .15s ease; }
.lt-side2-x:hover { background: var(--sp-bg-input); color: var(--sp-text); }
/* Header sağ aksiyon grubu: Filo Kartı + ✕ kapat */
.lt-side2-head-acts { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; }
.lt-side2-card-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--sp-primary); border: 1px solid var(--sp-primary); border-radius: 6px; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, opacity .15s ease; box-shadow: 0 1px 3px rgba(121, 123, 242, .25); }
.lt-side2-card-btn:hover { background: #6366f1; box-shadow: 0 0 0 3px rgba(121, 123, 242, .25); }
.lt-side2-card-btn:disabled { opacity: .7; cursor: wait; }
.lt-side2-card-btn svg { width: 13px; height: 13px; }
.lt-side2-plate { font-size: 22px; font-weight: 800; color: var(--sp-text); letter-spacing: .4px; padding-right: 120px; }
.lt-side2-sub { font-size: 11px; color: var(--sp-text-muted); margin-top: 3px; }
.lt-side2-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lt-side2-badges .lt-mb { font-size: 11px; padding: 2px 9px; }

.lt-side2-tabs { display: flex; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg-card); padding: 0 6px; flex-shrink: 0; overflow-x: auto; }
.lt-tab { background: transparent; border: 0; padding: 11px 12px; font-size: 12.5px; font-weight: 600; color: var(--sp-text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; white-space: nowrap; }
.lt-tab:hover { color: var(--sp-text); }
.lt-tab.active { color: var(--sp-primary); border-bottom-color: var(--sp-primary); }

.lt-pane { display: none; padding: 14px 16px 18px; overflow-y: auto; flex: 1; }
.lt-pane.active { display: block; }
.lt-sec { font-size: 10.5px; letter-spacing: .6px; color: var(--sp-text-muted); font-weight: 700; margin: 14px 0 8px; padding-top: 8px; border-top: 1px dashed var(--sp-border); }
.lt-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* Skor kartları (Sağlık + Sürücü) */
.lt-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.lt-score { display: flex; align-items: center; gap: 11px; padding: 12px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 10px; }
.lt-score-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.lt-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lt-score-ring .bg { fill: none; stroke: var(--sp-border); stroke-width: 3.5; }
.lt-score-ring .fg { fill: none; stroke: #10b981; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 106.8; transition: stroke-dashoffset .5s ease, stroke .3s ease; }
.lt-score-ring.amber .fg { stroke: #f59e0b; }
.lt-score-ring.red .fg { stroke: #ef4444; }
.lt-score-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--sp-text); }
.lt-score-lbl { font-size: 11px; color: var(--sp-text-muted); line-height: 1.45; }
.lt-score-lbl small { color: var(--sp-text); font-weight: 600; font-size: 11px; }

/* Anlık metrikler 2x2 */
.lt-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lt-metric { display: flex; flex-direction: column; padding: 8px 10px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 6px; }
.lt-metric span { font-size: 10.5px; color: var(--sp-text-muted); letter-spacing: .3px; }
.lt-metric b { font-size: 14px; color: var(--sp-text); font-weight: 700; margin-top: 1px; }

/* Gauge bar */
.lt-gauges { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.lt-gauge { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.lt-gauge-l { color: var(--sp-text-muted); min-width: 60px; }
.lt-gauge-bar { flex: 1; height: 6px; background: var(--sp-bg-input); border-radius: 3px; overflow: hidden; border: 1px solid var(--sp-border); }
.lt-gauge-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #facc15, #ef4444); transition: width .4s ease; }
.lt-gauge-r { color: var(--sp-text); font-weight: 700; min-width: 50px; text-align: right; }

/* Bilgi satırı (etiket + değer) */
.lt-info-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--sp-border); font-size: 12px; }
.lt-info-row:last-child { border-bottom: 0; }
.lt-info-row span { color: var(--sp-text-muted); flex-shrink: 0; }
.lt-info-row b { color: var(--sp-text); font-weight: 600; text-align: right; word-break: break-word; }
.lt-info-row a { color: var(--sp-primary-dark); text-decoration: none; }
.lt-info-row a:hover { text-decoration: underline; }

/* Bugün özet grid */
.lt-today { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lt-today-cell { padding: 9px 10px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 6px; }
.lt-today-cell span { display: block; font-size: 10.5px; color: var(--sp-text-muted); letter-spacing: .3px; }
.lt-today-cell b { display: block; font-size: 16px; color: var(--sp-text); font-weight: 800; margin-top: 1px; line-height: 1.1; }
.lt-today-cell small { display: block; font-size: 10px; font-weight: 600; margin-top: 2px; }
.lt-today-cell small.up { color: #059669; }
.lt-today-cell small.down { color: #dc2626; }
.lt-today-cell small.neutral { color: var(--sp-text-muted); }

/* Saatlik sparkline */
.lt-spark-wrap { margin-top: 10px; }
.lt-spark-h { font-size: 11px; color: var(--sp-text-muted); margin-bottom: 4px; }
.lt-spark { display: flex; align-items: flex-end; gap: 1px; height: 50px; padding: 4px 0; background: var(--sp-bg-input); border-radius: 6px; border: 1px solid var(--sp-border); position: relative; }
.lt-spark > div { flex: 1 1 0; background: var(--sp-primary); border-radius: 1px 1px 0 0; min-height: 1px; transition: background-color .15s ease; }
.lt-spark > div:hover { background: var(--sp-primary-dark); }
.lt-spark-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--sp-text-muted); }
.lt-spark-ax { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--sp-text-muted); padding: 0 1px; margin-top: 2px; }

/* Olay Akışı paneli (timeline) */
.lt-evt-panel { position: fixed; top: 0; right: -460px; width: 420px; height: 100vh; background: var(--sp-bg-card); border-left: 1px solid var(--sp-border); box-shadow: -10px 0 30px rgba(0,0,0,.18); display: flex; flex-direction: column; z-index: 1051; transition: right .25s ease; }
.lt-evt-panel.show { right: 0; }
.lt-evt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg-input); }
.lt-evt-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--sp-text); }
.lt-evt-title svg { width: 16px; height: 16px; color: var(--sp-primary); }
.lt-evt-acts { display: flex; align-items: center; gap: 6px; }
.lt-evt-btn { background: transparent; border: 1px solid var(--sp-border); color: var(--sp-text-muted); padding: 4px 10px; font-size: 11.5px; border-radius: 5px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.lt-evt-btn:hover { background: var(--sp-bg-hover); color: var(--sp-text); }
.lt-evt-x { background: transparent; border: none; color: var(--sp-text-muted); font-size: 16px; width: 26px; height: 26px; border-radius: 5px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.lt-evt-x:hover { background: var(--sp-bg-hover); color: var(--sp-text); }
.lt-evt-filters { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--sp-border); overflow-x: auto; }
.lt-evt-flt { flex: 0 0 auto; background: transparent; border: 1px solid var(--sp-border); color: var(--sp-text-muted); padding: 4px 10px; font-size: 11.5px; border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.lt-evt-flt:hover { background: var(--sp-bg-hover); color: var(--sp-text); }
.lt-evt-flt.active { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-evt-list { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 16px; }
.lt-evt-empty { padding: 30px 10px; text-align: center; color: var(--sp-text-muted); font-size: 12.5px; }
.lt-evt-item { display: flex; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 6px; border-left: 3px solid var(--sp-border); background: var(--sp-bg-input); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.lt-evt-item:hover { background: var(--sp-bg-hover); }
.lt-evt-item.danger { border-left-color: #ef4444; }
.lt-evt-item.warn { border-left-color: #f59e0b; }
.lt-evt-item.enter { border-left-color: #10b981; }
.lt-evt-item.exit { border-left-color: #3b82f6; }
.lt-evt-item.info { border-left-color: var(--sp-primary); }
.lt-evt-time { flex: 0 0 48px; font-size: 12px; font-weight: 700; color: var(--sp-text); display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.lt-evt-time small { font-weight: 500; font-size: 10.5px; color: var(--sp-text-muted); margin-top: 2px; }
.lt-evt-msg { flex: 1 1 auto; font-size: 12px; color: var(--sp-text); line-height: 1.45; }

/* Alt aksiyon barı */
.lt-actions { display: flex; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--sp-border); }
.lt-actions .sp-btn, .lt-actions .sp-btn-ghost { flex: 1; padding: 9px; font-size: 12.5px; }
.lt-actions .sp-btn-ghost.active { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }

/* Hikaye/Performans/Belge/Sürücü içerikleri */
.lt-story-info, .lt-perf-info { font-size: 12.5px; color: var(--sp-text); padding: 8px 10px; background: var(--sp-bg-input); border-radius: 6px; }
.lt-story-anom, .lt-perf-anom { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; }
.lt-story-anom > li, .lt-perf-anom > li { display: flex; gap: 8px; padding: 6px 8px; border-radius: 5px; transition: background-color .15s ease; cursor: pointer; }
.lt-story-anom > li:hover, .lt-perf-anom > li:hover { background: rgba(245, 158, 11, .07); }
.lt-story-anom .dot, .lt-perf-anom .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.lt-story-anom .dot.speed, .lt-perf-anom .dot.speed { background: #ef4444; }
.lt-story-anom .dot.idle, .lt-perf-anom .dot.idle { background: #f59e0b; }
.lt-story-anom .dot.brake, .lt-perf-anom .dot.brake { background: #fb7185; }
.lt-story-anom .dot.jump, .lt-perf-anom .dot.jump { background: #8b5cf6; }
.lt-story-anom .dot.gap, .lt-perf-anom .dot.gap { background: #6b7280; }
.lt-story-anom .ttl, .lt-perf-anom .ttl { font-weight: 600; color: var(--sp-text); }
.lt-story-anom .sub, .lt-perf-anom .sub { color: var(--sp-text-muted); font-size: 11px; }

.lt-cmp { font-size: 12px; padding: 10px; background: var(--sp-bg-input); border-radius: 6px; color: var(--sp-text); line-height: 1.6; }
.lt-cmp .pos { color: #059669; font-weight: 700; }
.lt-cmp .neg { color: #dc2626; font-weight: 700; }

/* === Performans tab (VIC 5.png patterni) — 7 bölüm: Hero + AI + Kategori + Cmp + 30g + Olay + Öneri === */
.lt-sec-inline { display: inline-block; margin: 0 !important; padding: 0 !important; border: none !important; }

/* 1) Sürücü Hero card */
.lt2perf-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(121,123,242,0.06), rgba(245,158,11,0.03));
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    margin-bottom: 8px;
}
.lt2perf-hero-l { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.lt2perf-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #797bf2;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.lt2perf-avatar svg { width: 20px; height: 20px; }
.lt2perf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lt2perf-hero-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lt2perf-hero-name { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.lt2perf-hero-plate { font-size: 11px; color: var(--sp-text-muted); }
.lt2perf-hero-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.lt2perf-grade, .lt2perf-period {
    font-size: 10.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    color: var(--sp-text-muted);
}
.lt2perf-grade.grade-A { background: rgba(16,185,129,.14); color: #059669; border-color: rgba(16,185,129,.32); }
.lt2perf-grade.grade-B { background: rgba(20,184,166,.14); color: #0d9488; border-color: rgba(20,184,166,.32); }
.lt2perf-grade.grade-C { background: rgba(245,158,11,.14); color: #b45309; border-color: rgba(245,158,11,.32); }
.lt2perf-grade.grade-D { background: rgba(239,68,68,.14); color: #dc2626; border-color: rgba(239,68,68,.32); }
.lt2perf-grade.grade-F { background: #ef4444; color: #fff; border-color: transparent; }
.lt2perf-karne-link {
    margin-top: 6px;
    background: transparent;
    border: 1px solid var(--sp-primary);
    color: var(--sp-primary-dark);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.15s ease;
}
.lt2perf-karne-link:hover { background: rgba(245,158,11,0.08); }

.lt2perf-hero-r { position: relative; width: 64px; height: 64px; }
.lt2perf-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.lt2perf-ring .bg { fill: none; stroke: var(--sp-border); stroke-width: 3.5; }
.lt2perf-ring .fg { fill: none; stroke: #10b981; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 106.8; transition: stroke-dashoffset .5s ease, stroke .3s ease; }
.lt2perf-ring.amber .fg { stroke: #f59e0b; }
.lt2perf-ring.red .fg { stroke: #ef4444; }
.lt2perf-ring-val {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; color: var(--sp-text);
}

.lt2perf-change { font-size: 11px; font-weight: 600; color: var(--sp-text-muted); margin-bottom: 8px; }

/* 2) AI Tahminleri — 3 kart grid */
.lt2perf-ai-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.lt2perf-ai {
    padding: 8px 6px;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    text-align: center;
}
.lt2perf-ai-ico { font-size: 16px; margin-bottom: 2px; }
.lt2perf-ai-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--sp-text-muted); }
.lt2perf-ai-val { font-size: 13px; font-weight: 700; color: var(--sp-text); margin-top: 2px; }
.lt2perf-ai-sub { font-size: 10px; color: var(--sp-text-muted); margin-top: 1px; line-height: 1.3; }

/* 3) Kategori skorları — 2x2 grid */
.lt2perf-cat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.lt2perf-cat {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 6px;
}
.lt2perf-cat .ico { font-size: 14px; }
.lt2perf-cat .lbl { flex: 1; font-size: 11.5px; color: var(--sp-text); }
.lt2perf-cat .val { font-size: 14px; font-weight: 800; color: var(--sp-text); }
.lt2perf-cat.cat-driving .ico { color: #3b82f6; }
.lt2perf-cat.cat-braking .ico { color: #f59e0b; }
.lt2perf-cat.cat-fuel    .ico { color: #10b981; }
.lt2perf-cat.cat-safety  .ico { color: #ef4444; }

/* 4) Filo Karşılaştırma — 3 col */
.lt2perf-cmp-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.lt2perf-cmp {
    padding: 8px 6px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    text-align: center;
}
.lt2perf-cmp .lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--sp-text-muted); }
.lt2perf-cmp .val { font-size: 16px; font-weight: 800; color: var(--sp-text); margin-top: 2px; display: block; }
.lt2perf-cmp.lt2perf-cmp-mid { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.32); }

/* 5) Son 30 Gün — 2x2 grid */
.lt2perf-30d-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.lt2perf-30d {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 8px 10px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 6px;
}
.lt2perf-30d .val { font-size: 14px; font-weight: 800; color: var(--sp-text); }
.lt2perf-30d .lbl { font-size: 10.5px; color: var(--sp-text-muted); }

/* 6) Son Olaylar */
.lt2perf-events-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; padding-top: 8px; border-top: 1px dashed var(--sp-border); }
.lt2perf-events { list-style: none; padding: 0; margin: 0; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.lt2perf-events > li {
    display: flex; gap: 8px; padding: 6px 8px;
    background: var(--sp-bg-card);
    border-radius: 5px;
}
.lt2perf-evt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.lt2perf-events .ttl { font-weight: 600; color: var(--sp-text); font-size: 12px; }
.lt2perf-events .sub { color: var(--sp-text-muted); font-size: 10.5px; }
.lt2perf-events-empty { padding: 12px; text-align: center; color: var(--sp-text-muted); font-size: 11.5px; }

/* 7) AI Önerileri */
.lt2perf-recs { list-style: none; padding: 0; margin: 0; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.lt2perf-recs > li {
    display: flex; gap: 8px; padding: 6px 8px;
    background: rgba(245,158,11,0.06);
    border-radius: 5px;
    align-items: flex-start;
}
.lt2perf-rec-ico { flex-shrink: 0; font-size: 14px; }
.lt2perf-recs-empty { padding: 12px; text-align: center; color: var(--sp-text-muted); font-size: 11.5px; background: transparent !important; }

/* Boş durum (sürücü atanmamış) */
.lt2perf-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 40px 16px;
    color: var(--sp-text-muted);
    text-align: center;
}
.lt2perf-empty svg { width: 36px; height: 36px; opacity: 0.5; }
.lt2perf-empty p { font-size: 12.5px; }

/* Belge grid */
.lt-docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Belge gridi içinde bölüm başlığı (Yasal Evraklar / Sigorta / Bakım vb.) — grid satırını kaplar */
.lt-doc-section {
    grid-column: 1 / -1;
    font-size: 10.5px; font-weight: 700;
    color: var(--sp-primary-dark);
    letter-spacing: 0.04em;
    padding: 6px 0 2px;
    margin-top: 2px;
    border-bottom: 1px dashed var(--sp-border);
}
.lt-doc-section:first-child { margin-top: 0; }
.lt-doc-card { padding: 10px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 6px; }
.lt-doc-card.expired { background: rgba(239, 68, 68, .07); border-color: rgba(239, 68, 68, .3); }
.lt-doc-card.critical { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .35); }
.lt-doc-card.warning { background: rgba(250, 204, 21, .08); border-color: rgba(250, 204, 21, .35); }
.lt-doc-card b { display: block; font-size: 12px; color: var(--sp-text); font-weight: 700; }
.lt-doc-card span.date { display: block; font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }
.lt-doc-card span.days { display: block; font-size: 11px; font-weight: 700; margin-top: 4px; }
.lt-doc-card.expired span.days { color: #dc2626; }
.lt-doc-card.critical span.days { color: var(--sp-primary-dark); }
.lt-doc-card.warning span.days { color: #b45309; }
.lt-doc-card.ok span.days { color: #059669; }

/* Sürücü kartı */
.lt-driver-card { padding: 14px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 8px; }
.lt-driver-card .name { font-size: 15px; font-weight: 700; color: var(--sp-text); }
.lt-driver-card .meta { font-size: 12px; color: var(--sp-text-muted); margin-top: 4px; }
.lt-driver-card .contact { display: flex; gap: 6px; margin-top: 10px; }
.lt-driver-card .contact a { padding: 7px 12px; background: var(--sp-primary); color: #fff; border-radius: 5px; text-decoration: none; font-size: 12px; font-weight: 600; }
.lt-driver-card .contact a.wa { background: #25d366; }
.lt-driver-card .contact a:hover { filter: brightness(.92); }

/* Marker pulse efekti (seçili araç) */
.lt-mk.lt-pulse::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
    transform: translate(-50%, -50%); border-radius: 50%;
    border: 3px solid var(--sp-primary); opacity: .8;
    animation: lt-pulse-ring 1.6s ease-out infinite;
    pointer-events: none;
}
@keyframes lt-pulse-ring {
    0% { width: 16px; height: 16px; opacity: .85; }
    100% { width: 70px; height: 70px; opacity: 0; }
}
.lt-mk { position: relative; }

/* ============================================================
   HİKAYE TAM-EKRAN MODAL — VIC tarzı (top bar + harita + sağ KPI + alt playback)
   ============================================================ */
.lt-hist-modal { position: fixed; inset: 0; background: var(--sp-bg-card); z-index: 12000; display: none; flex-direction: column; }
.lt-hist-modal.show { display: flex; }
.lt-hist-top { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--sp-bg-card); border-bottom: 1px solid var(--sp-border); flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,.04); min-height: 44px; }
.lt-hist-top-l { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; min-width: 0; }
.lt-hist-plate { font-size: 14.5px; font-weight: 800; color: var(--sp-text); letter-spacing: .25px; line-height: 1; }
.lt-hist-driver { font-size: 11px; color: var(--sp-text-muted); }
.lt-hist-top-c { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; justify-content: center; flex-wrap: nowrap; min-width: 0; }
.lt-hist-lbl { font-size: 10px; color: var(--sp-text-muted); letter-spacing: .35px; font-weight: 700; padding: 0 2px; }
.lt-hist-sep { color: var(--sp-text-muted); padding: 0; font-size: 11px; }
.lt-hist-top-c .sp-control-search { padding: 4px 8px !important; font-size: 12px !important; height: 28px !important; }
.lt-hist-top-c .sp-btn { padding: 5px 12px !important; font-size: 12px !important; height: 28px !important; line-height: 1 !important; gap: 5px !important; }
.lt-hist-top-c .sp-btn svg { width: 12px; height: 12px; }
.lt-hist-top-r { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.lt-hist-btn { background: transparent; border: 1px solid var(--sp-border); border-radius: 5px; padding: 4px 7px; cursor: pointer; color: var(--sp-text); transition: background-color .15s ease, border-color .15s ease; display: inline-flex; align-items: center; height: 28px; }
.lt-hist-btn:hover { background: var(--sp-bg-input); border-color: var(--sp-primary); }
.lt-hist-btn svg { width: 13px; height: 13px; }
/* Faz A — Sefer Modu toggle (planlı rota overlay) */
.lt-hist-routebtn { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin-left: 8px; padding: 0 10px; border-radius: 99px; cursor: pointer; font-size: 11.5px; font-weight: 700; background: transparent; color: var(--sp-text-muted); border: 1.5px solid var(--sp-border); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.lt-hist-routebtn svg { width: 13px; height: 13px; }
.lt-hist-routebtn:hover { border-color: #797bf2; color: var(--sp-text); }
.lt-hist-routebtn.on { background: #797bf2; border-color: #797bf2; color: #fff; }

/* Faz B — Rota Uyumu sekmesi: skor kartı + durak satırları */
.lt-rc-score { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--sp-border); }
.lt-rc-score-num { font-size: 30px; font-weight: 800; line-height: 1; }
.lt-rc-score-num small { font-size: 13px; font-weight: 600; opacity: .6; }
.lt-rc-score-meta { display: flex; flex-direction: column; gap: 2px; }
.lt-rc-score-lbl { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.lt-rc-score-sub { font-size: 11.5px; color: var(--sp-text-muted); }
.lt-rc-hint { font-size: 10.5px; color: var(--sp-text-muted); margin: 0 2px 8px; padding: 5px 8px; border-radius: 6px; background: var(--sp-bg-soft); border: 1px dashed var(--sp-border); }
.lt-rc-area { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 600; color: #d97706; background: rgba(245,158,11,.14); }

/* Faz 1 — İş Emirleri takvimi (Hikaye modalı sağ panel) — kompakt */
.lt-cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.lt-cal-head .lt-cal-title { flex: 1; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--sp-text); }
.lt-cal-nav { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--sp-border); background: var(--sp-bg-card); color: var(--sp-text); font-size: 13px; line-height: 1; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.lt-cal-nav:hover { background: var(--sp-bg-hover); border-color: var(--sp-primary); }
.lt-cal-today { padding: 0 7px; height: 20px; border-radius: 5px; border: 1px solid var(--sp-border); background: var(--sp-bg-card); color: var(--sp-text-muted); font-size: 9.5px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.lt-cal-today:hover { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lt-cal-dow { margin-bottom: 2px; }
.lt-cal-dow-c { text-align: center; font-size: 8.5px; font-weight: 600; color: var(--sp-text-muted); padding: 1px 0; }
.lt-cal-days { margin-bottom: 7px; }
.lt-cal-day { position: relative; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid transparent; background: var(--sp-bg-soft); color: var(--sp-text-muted); font-size: 10px; cursor: default; padding: 0; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.lt-cal-day.empty { background: transparent; border: none; }
.lt-cal-day.has { background: var(--sp-bg-card); color: var(--sp-text); cursor: pointer; border-color: var(--sp-border); }
.lt-cal-day.has:hover { border-color: var(--sp-primary); background: var(--sp-bg-hover); }
.lt-cal-day.today { box-shadow: inset 0 0 0 1px var(--sp-primary); }
.lt-cal-day.sel { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.lt-cal-day.sel .lt-cal-dnum { color: #fff; }
.lt-cal-day[disabled] { opacity: .5; }
.lt-cal-dnum { font-weight: 600; }
.lt-cal-cbadge { position: absolute; top: 1px; right: 2px; min-width: 11px; height: 11px; padding: 0 2px; border-radius: 6px; background: var(--sp-primary); color: #fff; font-size: 7.5px; line-height: 11px; font-weight: 700; text-align: center; }
.lt-cal-day.sel .lt-cal-cbadge { background: #fff; color: var(--sp-primary); }
.lt-cal-daylbl { font-size: 10.5px; font-weight: 700; color: var(--sp-text); margin: 1px 1px 5px; }
.lt-cal-card { border: 1px solid var(--sp-border); border-radius: 7px; padding: 6px 8px; margin-bottom: 5px; background: var(--sp-bg-card); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.lt-cal-card:hover { border-color: var(--sp-primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.lt-cal-card.sel { border-color: var(--sp-primary); box-shadow: inset 0 0 0 1px var(--sp-primary); }
.lt-cal-card-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lt-cal-plate { font-size: 11.5px; font-weight: 700; color: var(--sp-text); }
.lt-cal-st { padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.lt-cal-drv { font-size: 10px; color: var(--sp-text-muted); margin-top: 2px; }
.lt-cal-desc { font-size: 10px; color: var(--sp-text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-cal-caps { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.lt-cal-cap { padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 600; color: var(--sp-text-muted); background: var(--sp-bg-soft); }
.lt-cal-card-acts { display: flex; gap: 5px; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--sp-border); }
.lt-cal-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 6px; border-radius: 5px; border: 1px solid var(--sp-border); background: var(--sp-bg-soft); color: var(--sp-text-muted); font-size: 9.5px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.lt-cal-act:hover { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-rc-ok   { background: rgba(16,185,129,.10); } .lt-rc-ok   .lt-rc-score-num { color: #10b981; }
.lt-rc-warn { background: rgba(245,158,11,.10); } .lt-rc-warn .lt-rc-score-num { color: #f59e0b; }
.lt-rc-crit { background: rgba(239,68,68,.10); }  .lt-rc-crit .lt-rc-score-num { color: #ef4444; }
.lt-rc-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--sp-border); border-left-width: 3px; margin-bottom: 6px; background: var(--sp-bg-card); }
.lt-rc-row.comp-ok   { border-left-color: #10b981; }
.lt-rc-row.comp-warn { border-left-color: #f59e0b; }
.lt-rc-row.comp-crit { border-left-color: #ef4444; }
.lt-rc-seq { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #797bf2; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.lt-rc-body { flex: 1; min-width: 0; }
.lt-rc-ttl { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.lt-rc-sub { font-size: 11px; color: var(--sp-text-muted); margin-top: 1px; }
.lt-rc-state { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-left: 4px; }
.lt-rc-state.ok   { background: rgba(16,185,129,.16); color: #10b981; }
.lt-rc-state.warn { background: rgba(245,158,11,.16); color: #f59e0b; }
.lt-rc-state.crit { background: rgba(239,68,68,.16); color: #ef4444; }

.lt-hist-body { flex: 1; display: flex; position: relative; min-height: 0; }
.lt-hist-map { flex: 1; height: 100%; background: #e9eef4; }

/* Kompakt lejand — tek satır inline chip */
/* Timeline'a bütünleşik renk legend'i (ribbon'un hemen üstünde) */
.lt-hist-legend { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 2px 2px 6px; }
.lt-hist-legend-h { display: none; }
.lt-hist-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--sp-text-muted); padding: 0; white-space: nowrap; line-height: 1; }
.lt-hist-legend-item .dot { width: 12px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.lt-hist-legend-item .dot.s1 { background: #10b981; }
.lt-hist-legend-item .dot.s2 { background: #f59e0b; }
.lt-hist-legend-item .dot.s3 { background: #ef4444; }
.lt-hist-legend-item .dot.a-stop { background: #475569; width: 12px; height: 6px; border-radius: 2px; }
.lt-hist-legend-item .dot.a-speed { background: #ef4444; border-radius: 50%; width: 7px; height: 7px; }
.lt-hist-legend-item .dot.a-brake { background: #fb7185; border-radius: 50%; width: 7px; height: 7px; }
.lt-hist-legend-item .dot.a-idle { background: #f59e0b; border-radius: 50%; width: 7px; height: 7px; }
.lt-hist-legend-item .dot.a-jump { background: #8b5cf6; border-radius: 50%; width: 7px; height: 7px; }
.lt-hist-legend-item .dot.a-gap { background: #6b7280; border-radius: 50%; width: 7px; height: 7px; }
.lt-hist-legend-item .dot.a-durak { background: #fff; border: 2px solid #f59e0b; border-radius: 50%; width: 9px; height: 9px; box-sizing: border-box; }
.lt-hist-legend-sep { width: 1px; height: 12px; background: var(--sp-border); margin: 0 2px; border: 0; align-self: center; }

.lt-hist-side { width: 430px; max-width: 36vw; background: var(--sp-bg-card); border-left: 1px solid var(--sp-border); padding: 12px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }   /* 320→430px: 6 sekme (İş Emirleri/Hareket/Duraklar/Hikaye/Noktalar/Olaylar) sığsın */
.lt-hist-sec { font-size: 11px; letter-spacing: .5px; color: var(--sp-text-muted); font-weight: 700; margin: 0; }

.lt-hist-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lt-hist-kpi { background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 6px; padding: 8px 10px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 6px; }
.lt-hist-kpi svg { width: 14px; height: 14px; color: var(--sp-text-muted); grid-row: 1 / span 2; align-self: center; }
.lt-hist-kpi b { font-size: 15px; font-weight: 800; color: var(--sp-text); line-height: 1.1; grid-column: 2; }
.lt-hist-kpi span { font-size: 10px; color: var(--sp-text-muted); letter-spacing: .3px; grid-column: 3; align-self: flex-end; }
.lt-hist-kpi.alert b { color: #dc2626; }
.lt-hist-kpi.alert svg { color: #ef4444; }

.lt-hist-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sp-border); padding-bottom: 0; }
.lt-hist-tab { flex: 1; background: transparent; border: 0; padding: 8px 6px; font-size: 12px; font-weight: 600; color: var(--sp-text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.lt-hist-tab:hover { color: var(--sp-text); }
.lt-hist-tab.active { color: var(--sp-primary); border-bottom-color: var(--sp-primary); }

.lt-hist-list { flex: 1; overflow-y: auto; font-size: 12px; }
.lt-hist-empty { padding: 20px 10px; text-align: center; color: var(--sp-text-muted); font-size: 12px; }
.lt-hist-row { padding: 8px 10px; border-bottom: 1px dashed var(--sp-border); cursor: pointer; transition: background-color .15s ease; display: flex; gap: 8px; align-items: flex-start; }
.lt-hist-row:hover { background: rgba(245, 158, 11, .07); }
.lt-hist-row .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--sp-primary); }
.lt-hist-row .dot.speed { background: #ef4444; }
.lt-hist-row .dot.brake { background: #fb7185; }
.lt-hist-row .dot.idle { background: #f59e0b; }
.lt-hist-row .dot.jump { background: #8b5cf6; }
.lt-hist-row .dot.gap { background: #6b7280; }
.lt-hist-row .dot.move { background: #10b981; }
.lt-hist-row .dot.stop { background: #3b82f6; }
.lt-hist-row .body { flex: 1; }
.lt-hist-row .ttl { font-weight: 600; color: var(--sp-text); font-size: 12px; line-height: 1.3; }
.lt-hist-row .sub { color: var(--sp-text-muted); font-size: 10.5px; margin-top: 2px; }
.lt-hist-row .meta { color: var(--sp-text); font-size: 11px; font-weight: 600; }

.lt-hist-play { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; background: linear-gradient(180deg, var(--sp-bg-card) 0%, var(--sp-bg-input) 100%); border-top: 1px solid var(--sp-border); box-shadow: 0 -2px 10px rgba(0,0,0,.06); }
.lt-hist-progress { flex: 1; }
.lt-hist-progress .lt-play-slider { width: 100%; accent-color: var(--sp-primary); cursor: pointer; }
.lt-hist-axis { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--sp-text-muted); padding: 0 2px; margin-top: 2px; }
.lt-hist-spd { border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text-muted); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 5px; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.lt-hist-spd:hover { background: var(--sp-bg-hover); }
.lt-hist-spd.active { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); box-shadow: 0 0 0 3px rgba(121, 123, 242, .18); }

/* ----- Tab badge ----- */
/* Hikaye side panel sparkline — Bugün'deki ile aynı görsel, biraz daha kompakt */
.lt-hist-spark-wrap { margin-top: 10px; margin-bottom: 4px; }
.lt-hist-spark-wrap .lt-spark { height: 42px; }
.lt-hist-spark-wrap .lt-spark > div { background: #f59e0b; }
.lt-hist-spark-wrap .lt-spark > div:hover { background: #d97706; }
.lt-hist-spark-wrap .lt-spark-h { font-size: 10.5px; font-weight: 600; }

.lt-hist-tab-badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px; font-size: 10px; font-weight: 800; line-height: 14px; border-radius: 9px; background: var(--sp-bg-input); color: var(--sp-text-muted); border: 1px solid var(--sp-border); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.lt-hist-tab.active .lt-hist-tab-badge { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-hist-tab-badge.alert { background: rgba(239, 68, 68, .12); color: #ef4444; border-color: rgba(239, 68, 68, .35); }
.lt-hist-tab.active .lt-hist-tab-badge.alert { background: #ef4444; color: #fff; border-color: #ef4444; }

/* ----- Vurgulanan satır (durak/anomali → liste sync) ----- */
.lt-hist-row--hl { background: rgba(121, 123, 242, .14) !important; box-shadow: inset 3px 0 0 var(--sp-primary); animation: lt-hl-pulse 1.4s ease; }
@keyframes lt-hl-pulse { 0%, 100% { box-shadow: inset 3px 0 0 var(--sp-primary); } 50% { box-shadow: inset 3px 0 0 var(--sp-primary), 0 0 0 4px rgba(121, 123, 242, .25); } }

/* ============================================================
   Cinematic Time Ribbon
   ============================================================ */
.lt-tr-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 6px; }
.lt-tr-top .lt-play-time { font-size: 12.5px; font-weight: 700; color: var(--sp-text); margin-left: 8px; font-variant-numeric: tabular-nums; }
.lt-tr-state { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--sp-bg-input); color: var(--sp-text); border: 1px solid var(--sp-border); transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.lt-tr-state-ico { font-size: 13px; line-height: 1; }
.lt-tr-state.state-move { background: rgba(16, 185, 129, .12); color: #047857; border-color: rgba(16, 185, 129, .35); }
.lt-tr-state.state-stop { background: rgba(245, 158, 11, .14); color: #b45309; border-color: rgba(245, 158, 11, .4); }
.lt-tr-state.state-over { background: rgba(239, 68, 68, .14); color: #b91c1c; border-color: rgba(239, 68, 68, .45); box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); animation: lt-state-pulse 1s ease-in-out infinite; }
.lt-tr-state.state-idle { background: var(--sp-bg-input); color: var(--sp-text-muted); border-color: var(--sp-border); }
@keyframes lt-state-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); } 50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, .28); } }
.lt-tr-spacer { flex: 1 1 auto; }
.lt-tr-jump { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 6px; color: var(--sp-text-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.lt-tr-jump:hover { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-tr-jump svg { width: 14px; height: 14px; }

.lt-tr-ribbon { position: relative; height: 56px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 6px; overflow: hidden; cursor: crosshair; box-shadow: inset 0 1px 3px rgba(0,0,0,.06); }
.lt-tr-density { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 10px; pointer-events: none; opacity: .9; }
.lt-tr-heat { display: block; position: absolute; top: 10px; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% - 10px); pointer-events: none; }
.lt-tr-overlay { position: absolute; top: 10px; left: 0; right: 0; bottom: 0; pointer-events: none; }

/* Slider — gizli, sadece value tutucu (etkileşim mousedown.lttr ile yapılıyor) */
.lt-tr-slider { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* GPS durak pillar — slate (gerçek duraklama; planlı renkli pin/slot'tan ayrı) */
.lt-tr-stop { position: absolute; top: 2px; bottom: 2px; background: linear-gradient(180deg, rgba(71, 85, 105, .85) 0%, rgba(71, 85, 105, .35) 100%); border-left: 1px solid #475569; border-right: 1px solid #475569; pointer-events: auto; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.lt-tr-stop:hover { background: rgba(71, 85, 105, .95); transform: scaleY(1.05); }
.lt-tr-stop::after { content: ''; position: absolute; left: 50%; top: -3px; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #475569; }

/* Anomali nabız dot */
.lt-tr-anom { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, .35), 0 0 8px rgba(239, 68, 68, .6); pointer-events: auto; cursor: pointer; animation: lt-tr-pulse 1.6s ease-in-out infinite; }
.lt-tr-anom.brake { background: #fb7185; box-shadow: 0 0 0 2px rgba(251, 113, 133, .35), 0 0 8px rgba(251, 113, 133, .6); }
.lt-tr-anom.idle { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .35), 0 0 8px rgba(245, 158, 11, .6); }
.lt-tr-anom.jump { background: #8b5cf6; box-shadow: 0 0 0 2px rgba(139, 92, 246, .35), 0 0 8px rgba(139, 92, 246, .6); }
.lt-tr-anom.gap { background: #6b7280; box-shadow: 0 0 0 2px rgba(107, 114, 128, .35), 0 0 8px rgba(107, 114, 128, .55); }
.lt-tr-anom:hover { transform: scale(1.4); }
@keyframes lt-tr-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, .35), 0 0 8px rgba(239, 68, 68, .6); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, .15), 0 0 14px rgba(239, 68, 68, .9); } }

/* Faz C — Sefer Modu: talep penceresi (slot) bandı — ribbon alt şeridinde, kesik kenarlı pencere */
.lt-tr-slot { position: absolute; bottom: 1px; height: 13px; min-width: 2px; border-radius: 2px; border: 1px solid currentColor; pointer-events: auto; cursor: help; transition: filter .15s ease; }
.lt-tr-slot:hover { filter: brightness(.95); }
.lt-tr-slot.ok { color: #10b981; background: rgba(16,185,129,.45); }
.lt-tr-slot.warn { color: #f59e0b; background: rgba(245,158,11,.45); }
.lt-tr-slot.crit { color: #ef4444; background: rgba(239,68,68,.45); }
/* Slot bandı etiketi — durak no + planlı saat (bandın üstünde, net) */
.lt-tr-slot-lbl { position: absolute; bottom: 100%; left: -1px; margin-bottom: 2px; padding: 0 4px; height: 13px; line-height: 13px; border-radius: 4px; background: #fff; border: 1px solid currentColor; color: #334155; font-size: 8.5px; font-weight: 800; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,.15); }

/* ===== Çok-şeritli Gantt timeline (Sefer Modu/rota varsa) — planlı iş vs GPS vs rota dışı vs duraklama ===== */
.lt-gantt { position: relative; padding: 3px 0 2px; }
.lt-gantt-lane { display: flex; align-items: center; height: 20px; }
.lt-gantt-lane.lt-gantt-axisrow { height: 15px; }
.lt-gantt-lbl { flex: 0 0 118px; width: 118px; box-sizing: border-box; padding-right: 8px; text-align: right; font-size: 9.5px; font-weight: 700; color: var(--sp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-gantt-track { position: relative; flex: 1 1 auto; height: 14px; background: var(--sp-bg-soft); border-radius: 4px; cursor: crosshair; }
.lt-gantt-axisrow .lt-gantt-track { background: transparent; height: 13px; cursor: default; }
.lt-gantt-axis > span { position: absolute; top: 0; transform: translateX(-50%); font-size: 9px; font-weight: 600; color: var(--sp-text-muted); font-variant-numeric: tabular-nums; }
.lt-gantt-axis > span:first-child { transform: none; }
.lt-gantt-band { position: absolute; top: 2px; bottom: 2px; min-width: 2px; border-radius: 3px; display: flex; align-items: center; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.lt-gantt-band > span { font-size: 8.5px; font-weight: 700; color: #fff; padding: 0 4px; white-space: nowrap; line-height: 1; }
.lt-gantt-band.g-gps { background: #3b82f6; }
.lt-gantt-band.g-off { background: #f97316; }
.lt-gantt-band.g-stop { background: #475569; }
.lt-gantt-band.g-plan { background: #10b981; }
.lt-gantt-band.g-plan.warn { background: #f59e0b; }
.lt-gantt-band.g-plan.crit { background: #ef4444; }
/* Planlı nokta (slot penceresi yok) — elmas + saat etiketi */
.lt-gantt-pt { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: auto; }
.lt-gantt-pt > i { width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); flex-shrink: 0; border: 1px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.lt-gantt-pt > span { font-size: 8.5px; font-weight: 800; margin-left: 3px; white-space: nowrap; color: #334155; }
/* Durum renkli elmas — tamamlanma: done yeşil / partial amber / pending soluk / çıkış mavi / dönüş gri */
.lt-gantt-pt.g-pt-done > i { background: #10b981; }
.lt-gantt-pt.g-pt-partial > i { background: #f59e0b; }
.lt-gantt-pt.g-pt-pending > i { background: #fff; border-color: #94a3b8; }
.lt-gantt-pt.g-pt-pending > span { color: #64748b; }
.lt-gantt-pt.g-pt-start > i { background: #3b82f6; }
.lt-gantt-pt.g-pt-ret > i { background: #6b7280; }
.lt-gantt-playhead { position: absolute; top: 0; bottom: 20px; width: 2px; margin-left: -1px; background: var(--sp-primary); box-shadow: 0 0 6px var(--sp-primary); z-index: 5; pointer-events: none; transition: left .1s linear; }
.lt-gantt-legend { display: flex; gap: 14px; padding: 4px 0 0 72px; font-size: 9.5px; color: var(--sp-text-muted); }
.lt-gantt-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.lt-gantt-legend i { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
.lt-gantt-legend i.g-plan { background: #10b981; }
.lt-gantt-legend i.g-gps { background: #3b82f6; }
.lt-gantt-legend i.g-off { background: #f97316; }
.lt-gantt-legend i.g-stop { background: #475569; }
/* Gantt zengin tooltip — modern interaktif bilgi kartı */
/* Modern bilgi kartı — hem Gantt tooltip'i hem harita Leaflet tooltip'i kullanır (tek standart) */
.lt-gantt-tip { position: fixed; z-index: 99999; min-width: 190px; max-width: 280px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,.22); overflow: hidden; pointer-events: none; font-size: 11px; }
.leaflet-tooltip.lt-leaflet-gtip { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 9px; box-shadow: 0 6px 22px rgba(0,0,0,.25); padding: 0; overflow: hidden; min-width: 190px; max-width: 280px; font-size: 11px; color: var(--sp-text); white-space: normal; }
.leaflet-tooltip.lt-leaflet-gtip::before { display: none; }
.gtip-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--sp-border); }
.gtip-head b { font-size: 12px; color: var(--sp-text); display: block; }
.gtip-head small { font-size: 9.5px; color: var(--sp-text-muted); }
.gtip-ico { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; }
.gtip-head.gtip-st-done .gtip-ico { background: #10b981; }
.gtip-head.gtip-st-partial .gtip-ico { background: #f59e0b; }
.gtip-head.gtip-st-pending .gtip-ico { background: #94a3b8; }
.gtip-head.gtip-st-start .gtip-ico { background: #3b82f6; }
.gtip-head.gtip-st-ret .gtip-ico { background: #6b7280; }
.gtip-head.gtip-st-gps .gtip-ico { background: #3b82f6; }
.gtip-head.gtip-st-off .gtip-ico { background: #f97316; }
.gtip-head.gtip-st-stop .gtip-ico { background: #475569; }
.gtip-body { padding: 6px 10px 8px; }
.gtip-row { display: flex; justify-content: space-between; gap: 12px; padding: 2.5px 0; }
.gtip-row > span { color: var(--sp-text-muted); flex-shrink: 0; }
.gtip-row > b { color: var(--sp-text); font-weight: 600; text-align: right; word-break: break-word; }
.gtip-row > b.gtip-ok, .gtip-row > b.gtip-st-done { color: #10b981; }
.gtip-row > b.gtip-warn, .gtip-row > b.gtip-st-partial { color: #d97706; }
.gtip-row > b.gtip-crit { color: #ef4444; }
.gtip-foot { margin-top: 4px; padding-top: 5px; border-top: 1px dashed var(--sp-border); font-size: 9.5px; color: var(--sp-text-muted); text-align: center; }

/* Faz C — gerçek varış tiki — tam boy ince çizgi + alt ucta elmas + üstte sıra no rozeti */
.lt-tr-arrival { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: currentColor; pointer-events: auto; cursor: pointer; z-index: 2; }
.lt-tr-arrival.ok { color: #10b981; }
.lt-tr-arrival.warn { color: #f59e0b; }
.lt-tr-arrival.crit { color: #ef4444; }
.lt-tr-arrival::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: currentColor; box-shadow: 0 0 4px currentColor; }
.lt-tr-arrival > .lt-tr-arr-seq { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; background: currentColor; color: #fff; font-size: 9px; line-height: 13px; font-weight: 700; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.lt-tr-arrival:hover { transform: scaleX(1.6); }

/* Playhead — neon vertical line */
.lt-tr-playhead { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent 0%, #ffffff 12%, #ffffff 88%, transparent 100%); box-shadow: 0 0 0 1px var(--sp-primary), 0 0 8px var(--sp-primary), 0 0 16px rgba(121, 123, 242, .6); pointer-events: none; transition: left .12s linear; z-index: 3; }
.lt-tr-playhead::before { content: ''; position: absolute; left: -5px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--sp-primary); box-shadow: 0 0 8px rgba(121, 123, 242, .8); }

/* Hover tooltip */
.lt-tr-tip { position: absolute; bottom: 100%; margin-bottom: 8px; padding: 5px 9px; background: rgba(15, 23, 42, .95); color: #fff; font-size: 11.5px; border-radius: 5px; pointer-events: none; transform: translateX(-50%); box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 4; white-space: nowrap; }
.lt-tr-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: rgba(15, 23, 42, .95); }

/* Ribbon-altı zaman ekseni */
.lt-tr-axis { position: relative; height: 14px; }
.lt-tr-axis > span { position: absolute; top: 0; transform: translateX(-50%); font-size: 9.5px; font-weight: 600; color: var(--sp-text-muted); font-variant-numeric: tabular-nums; }
.lt-tr-axis > span:first-child { transform: none; }
.lt-tr-axis > span:last-child { transform: translateX(-100%); }

/* ============================================================
   Playback HUD — araç üstü floating gösterge (Flightradar tarzı)
   ============================================================ */
.lt-pb-mk { background: transparent !important; border: 0 !important; }
.lt-pb-hud { position: relative; width: 72px; height: 86px; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.lt-pb-arc { position: absolute; top: 8px; left: 8px; width: 56px; height: 56px; }
.lt-pb-arc svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lt-pb-arc-bg { fill: none; stroke: rgba(15, 23, 42, .15); stroke-width: 4; }
.lt-pb-arc-fg { fill: none; stroke: #10b981; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .25s ease, stroke .2s ease; }
.lt-pb-core { position: absolute; top: 24px; left: 24px; width: 24px; height: 24px; border-radius: 50%; background: #1f2937; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(15, 23, 42, .25); }
.lt-pb-badge { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); padding: 3px 8px; min-width: 50px; text-align: center; background: #1f2937; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.3); font-variant-numeric: tabular-nums; transition: background-color .15s ease, border-color .15s ease, box-shadow .2s ease; }
.lt-pb-badge .spd { display: inline-block; font-size: 14px; font-weight: 800; line-height: 1; }
.lt-pb-badge small { display: inline-block; margin-left: 3px; font-size: 9px; font-weight: 600; opacity: .75; }

/* Hız renk kademeleri — arc + badge senkron */
.lt-pb-hud.s-low .lt-pb-arc-fg { stroke: #10b981; }
.lt-pb-hud.s-low .lt-pb-badge { background: #047857; border-color: rgba(16, 185, 129, .5); }
.lt-pb-hud.s-mid .lt-pb-arc-fg { stroke: #f59e0b; }
.lt-pb-hud.s-mid .lt-pb-badge { background: #b45309; border-color: rgba(245, 158, 11, .5); }
.lt-pb-hud.s-high .lt-pb-arc-fg { stroke: #fb923c; }
.lt-pb-hud.s-high .lt-pb-badge { background: #c2410c; border-color: rgba(251, 146, 60, .5); }
.lt-pb-hud.s-over .lt-pb-arc-fg { stroke: #ef4444; animation: lt-pb-flash 1s ease-in-out infinite; }
.lt-pb-hud.s-over .lt-pb-badge { background: #b91c1c; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .35), 0 2px 8px rgba(239, 68, 68, .55); animation: lt-pb-shake .35s linear infinite; }

.lt-pb-limit { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 7px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .3px; border-radius: 4px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,.25); animation: lt-pb-pulse 1.2s ease-in-out infinite; }

@keyframes lt-pb-flash { 0%, 100% { stroke: #ef4444; } 50% { stroke: #fca5a5; } }
@keyframes lt-pb-shake { 0%, 100% { transform: translateX(-50%); } 25% { transform: translateX(-52%); } 75% { transform: translateX(-48%); } }
@keyframes lt-pb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ============================================================
   Hikaye Merkezi Yükleniyor — sahne hazırlanıyor overlay
   ============================================================ */
.lt-hist-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 900; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.lt-hist-loader.show { opacity: 1; pointer-events: auto; }
.lt-hist-loader-card { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 14px; padding: 28px 32px 24px; box-shadow: 0 18px 50px rgba(0,0,0,.32); min-width: 340px; text-align: center; transform: scale(.92); opacity: 0; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
.lt-hist-loader.show .lt-hist-loader-card { transform: scale(1); opacity: 1; }

.lt-hist-loader-spinner { position: relative; width: 72px; height: 72px; margin: 0 auto 14px; }
.lt-hist-loader-spinner svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lt-hist-loader-bg { fill: none; stroke: var(--sp-border); stroke-width: 4; }
.lt-hist-loader-fg { fill: none; stroke: var(--sp-primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 50 200; transform-origin: center; animation: lt-hl-rotate 1.1s linear infinite; }
.lt-hist-loader-dot { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--sp-primary); box-shadow: 0 0 0 0 rgba(121, 123, 242, .55); animation: lt-hl-pulse 1.4s ease-in-out infinite; }
@keyframes lt-hl-rotate { 0% { stroke-dashoffset: 0; transform: rotate(0deg); } 100% { stroke-dashoffset: -250; transform: rotate(360deg); } }
@keyframes lt-hl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(121, 123, 242, .55); } 50% { box-shadow: 0 0 0 12px rgba(121, 123, 242, 0); } }

.lt-hist-loader-title { font-size: 15px; font-weight: 700; color: var(--sp-text); letter-spacing: .2px; }
.lt-hist-loader-sub { margin-top: 4px; font-size: 12px; color: var(--sp-text-muted); line-height: 1.4; }
.lt-hist-loader-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.lt-hist-loader-step { padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--sp-text-muted); background: var(--sp-bg-input); border: 1px solid var(--sp-border); transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.lt-hist-loader-step.active { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); transform: scale(1.05); box-shadow: 0 0 0 3px rgba(121, 123, 242, .2); }
.lt-hist-loader-step.done { background: rgba(16, 185, 129, .14); color: #047857; border-color: rgba(16, 185, 129, .4); }
.lt-hist-loader-step.done::before { content: '✓ '; font-weight: 800; }

/* ============================================================
   Sonraki Olay Önizleme Chip (üst-sağ) — navigasyon tarzı
   ============================================================ */
/* Sonraki Olay — kompakt mini chip (haritanın sol-altında, ribbon üstünde) */
.lt-hist-next { position: absolute; bottom: 12px; left: 50%; transform: translate(-50%, 16px); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-left-width: 3px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.14); z-index: 680; opacity: 0; pointer-events: none; cursor: pointer; transition: transform .3s ease, opacity .2s ease, background-color .15s ease; max-width: 280px; }
.lt-hist-next.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.lt-hist-next:hover { background: var(--sp-bg-hover); }
.lt-hist-next-ico { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sp-bg-input); color: var(--sp-text-muted); flex: 0 0 20px; }
.lt-hist-next-ico svg { width: 11px; height: 11px; }
.lt-hist-next-body { flex: 1 1 auto; min-width: 0; line-height: 1.1; display: inline-flex; align-items: baseline; gap: 5px; }
.lt-hist-next-label { font-size: 9px; font-weight: 800; letter-spacing: .4px; color: var(--sp-text-muted); }
.lt-hist-next-text { font-size: 11px; color: var(--sp-text); }
.lt-hist-next-text b { font-weight: 700; font-size: 11.5px; }
.lt-hist-next-text br { display: none; }
.lt-hist-next-text small { color: var(--sp-text-muted); font-size: 10px; margin-left: 4px; }
.lt-hist-next-text small::before { content: '· '; opacity: .6; }
.lt-hist-next.danger { border-left-color: #ef4444; }
.lt-hist-next.danger .lt-hist-next-ico { background: rgba(239, 68, 68, .14); color: #ef4444; }
.lt-hist-next.warn, .lt-hist-next.stop { border-left-color: #f59e0b; }
.lt-hist-next.warn .lt-hist-next-ico, .lt-hist-next.stop .lt-hist-next-ico { background: rgba(245, 158, 11, .14); color: #b45309; }
.lt-hist-next.jump { border-left-color: #8b5cf6; }
.lt-hist-next.jump .lt-hist-next-ico { background: rgba(139, 92, 246, .14); color: #8b5cf6; }
.lt-hist-next.gap { border-left-color: #6b7280; }
.lt-hist-next.gap .lt-hist-next-ico { background: rgba(107, 114, 128, .14); color: #6b7280; }

/* ============================================================
   Cinematic Event Banner (üst-orta) + Detay Paneli (sağ slide)
   ============================================================ */
.lt-hist-banner { position: absolute; top: 14px; left: 50%; transform: translate(-50%, -120%); display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; min-width: 360px; max-width: 540px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); z-index: 700; opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
.lt-hist-banner.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.lt-hist-banner.exit { transform: translate(-50%, -120%); opacity: 0; transition: transform .25s ease, opacity .2s ease; }
.lt-hist-banner-ico { flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--sp-bg-input); color: var(--sp-text); }
.lt-hist-banner-ico svg { width: 18px; height: 18px; }
.lt-hist-banner-body { flex: 1 1 auto; min-width: 0; }
.lt-hist-banner-title { font-size: 13px; font-weight: 700; color: var(--sp-text); line-height: 1.25; }
.lt-hist-banner-sub { font-size: 11.5px; color: var(--sp-text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-hist-banner-cta { flex: 0 0 auto; padding: 5px 12px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--sp-primary); border: 1px solid var(--sp-primary); border-radius: 6px; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.lt-hist-banner-cta:hover { background: #6366f1; box-shadow: 0 0 0 3px rgba(121, 123, 242, .25); }
.lt-hist-banner-x { flex: 0 0 22px; width: 22px; height: 22px; background: transparent; border: 0; color: var(--sp-text-muted); cursor: pointer; font-size: 13px; border-radius: 4px; transition: background-color .15s ease, color .15s ease; }
.lt-hist-banner-x:hover { background: var(--sp-bg-hover); color: var(--sp-text); }

/* Banner tür varyantları — sol kenar şerit + ikon renk */
.lt-hist-banner.danger { border-left: 4px solid #ef4444; }
.lt-hist-banner.danger .lt-hist-banner-ico { background: rgba(239, 68, 68, .12); color: #ef4444; }
.lt-hist-banner.warn { border-left: 4px solid #f59e0b; }
.lt-hist-banner.warn .lt-hist-banner-ico { background: rgba(245, 158, 11, .14); color: #f59e0b; }
.lt-hist-banner.stop { border-left: 4px solid #f59e0b; }
.lt-hist-banner.stop .lt-hist-banner-ico { background: rgba(245, 158, 11, .14); color: #d97706; }
.lt-hist-banner.jump { border-left: 4px solid #8b5cf6; }
.lt-hist-banner.jump .lt-hist-banner-ico { background: rgba(139, 92, 246, .14); color: #8b5cf6; }
.lt-hist-banner.gap { border-left: 4px solid #6b7280; }
.lt-hist-banner.gap .lt-hist-banner-ico { background: rgba(107, 114, 128, .14); color: #6b7280; }

/* Detay paneli — sağdan slide */
.lt-hist-detail { position: absolute; top: 0; bottom: 0; left: 0; width: 330px; max-width: 90%; background: var(--sp-bg-card); border-right: 1px solid var(--sp-border); box-shadow: 10px 0 30px rgba(0,0,0,.12); transform: translateX(-100%); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease; z-index: 750; display: flex; flex-direction: column; }
.lt-hist-detail.show { transform: translateX(0); opacity: 1; pointer-events: auto; }
.lt-hd-muted { color: var(--sp-text-muted); font-style: italic; }

/* Hikaye haritası — belirgin duraklama pini (bekleme dk daire içinde) */
.lt-hist-stop-pin { background: none; border: 0; }
.lt-hsp-bubble { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #475569; color: #fff; border: 2px dashed #cbd5e1; box-shadow: 0 2px 6px rgba(0,0,0,.4); font-size: 10.5px; font-weight: 800; line-height: 1; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.lt-hsp-bubble small { font-size: 7px; font-weight: 600; opacity: .85; margin-top: 1px; }
.lt-hsp-bubble:hover { background: #334155; transform: scale(1.14); }

/* Hikaye haritası — planlı durak kalıcı saat etiketi (Sefer Modu; "plan"ı haritada hisset) */
.leaflet-tooltip.kp-plan-tip { background: transparent; border: 0; box-shadow: none; padding: 0; }
.leaflet-tooltip.kp-plan-tip::before { display: none; }
.kp-plan-lbl { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 9px; background: #fff; border: 1.5px solid #797bf2; box-shadow: 0 2px 6px rgba(0,0,0,.22); font-size: 11px; font-weight: 600; color: #1e293b; white-space: nowrap; line-height: 1; }
.kp-plan-lbl > b { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #797bf2; color: #fff; font-size: 10px; font-weight: 800; }
.kp-plan-lbl-t { font-weight: 800; }
.kp-plan-lbl-y { font-size: 9px; font-weight: 700; opacity: .85; letter-spacing: .3px; }
.kp-plan-lbl.pickup  { border-color: #3b82f6; } .kp-plan-lbl.pickup  > b { background: #3b82f6; } .kp-plan-lbl.pickup  .kp-plan-lbl-y { color: #3b82f6; }
.kp-plan-lbl.delivery { border-color: #f59e0b; } .kp-plan-lbl.delivery > b { background: #f59e0b; } .kp-plan-lbl.delivery .kp-plan-lbl-y { color: #d97706; }
.kp-plan-lbl.start   { border-color: #10b981; } .kp-plan-lbl.start   > b { background: #10b981; } .kp-plan-lbl.start   .kp-plan-lbl-y { color: #10b981; }
.kp-plan-lbl.ret     { border-color: #6b7280; } .kp-plan-lbl.ret     > b { background: #6b7280; } .kp-plan-lbl.ret     .kp-plan-lbl-y { color: #6b7280; }
.lt-hist-detail-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg-input); }
.lt-hist-detail-title { font-weight: 700; font-size: 13px; color: var(--sp-text); }
.lt-hist-detail-x { background: transparent; border: 0; color: var(--sp-text-muted); width: 26px; height: 26px; border-radius: 5px; cursor: pointer; font-size: 14px; transition: background-color .15s ease, color .15s ease; }
.lt-hist-detail-x:hover { background: var(--sp-bg-hover); color: var(--sp-text); }
/* Durak/olay paneli CanliTakip lt-poi-* desenini kullanır — gövde padding'i 0, içerik (sv/rows/actions) kendi padding'ini verir */
.lt-hist-detail-body { flex: 1 1 auto; overflow-y: auto; padding: 0; }

/* ===== Sefer Uyum Raporu — header butonu + overlay kart ===== */
.lt-hist-cmpbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--sp-primary); background: var(--sp-primary); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter .15s ease, border-color .15s ease, box-shadow .15s ease; }
.lt-hist-cmpbtn:hover { filter: brightness(.93); }
.lt-hist-cmpbtn svg { width: 15px; height: 15px; }
/* Skor rozetli durum (kayıtlı / taslak) */
.lt-hist-cmpbtn.has-score { background: var(--sp-bg-card); color: var(--sp-text); border-color: var(--sp-border); padding: 4px 10px 4px 4px; gap: 8px; }
.lt-hist-cmpbtn.has-score:hover { filter: none; border-color: var(--sp-primary); }
.lt-hcmp-score { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 6px; font-size: 14px; font-weight: 800; color: #fff; background: #64748b; }
.lt-hist-cmpbtn.ok .lt-hcmp-score { background: #10b981; }
.lt-hist-cmpbtn.warn .lt-hcmp-score { background: #f59e0b; }
.lt-hist-cmpbtn.crit .lt-hcmp-score { background: #ef4444; }
.lt-hcmp-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.lt-hcmp-meta b { font-size: 11.5px; font-weight: 700; color: var(--sp-text); }
.lt-hcmp-meta small { font-size: 9px; color: var(--sp-text-muted); }
.lt-hist-cmpbtn.draft { border-style: dashed; }
.lt-hist-cmpbtn.draft .lt-hcmp-meta b { color: #b45309; }
.lt-hist-cmpbtn.dirty { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.18); }
.lt-hist-cmpbtn.dirty .lt-hcmp-meta small { color: #b45309; font-weight: 700; }
/* Kart başı durum şeridi (kayıtlı/değişti/canlı) */
.lt-cmp-statline { padding: 6px 10px; border-radius: 7px; font-size: 11px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.lt-cmp-statline.saved { background: rgba(16,185,129,.1); color: #059669; }
.lt-cmp-statline.dirty { background: rgba(245,158,11,.12); color: #b45309; }
.lt-cmp-statline.draft { background: var(--sp-bg-soft); color: var(--sp-text-muted); }
.lt-cmp-statline b { font-weight: 700; }
/* Yeniden Hesapla — progress overlay */
.lt-cmp-recalc-ov { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.14); }
.lt-cmp-recalc-box { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); box-shadow: 0 8px 28px rgba(0,0,0,.22); font-size: 12px; font-weight: 600; color: var(--sp-text); }
.lt-cmp-recalc-spin { width: 18px; height: 18px; border: 2.5px solid var(--sp-border); border-top-color: var(--sp-primary); border-radius: 50%; animation: ltcmpspin .7s linear infinite; }
@keyframes ltcmpspin { to { transform: rotate(360deg); } }
/* Uyum raporu overlay'i — .lt-cmp perf widget'ıyla (yukarıda) çakışmasın diye ayrı ad */
.lt-cmpov { position: absolute; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .35); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.lt-cmpov.show { opacity: 1; pointer-events: auto; }
.lt-cmp-card { position: relative; width: 540px; max-width: 92%; max-height: 88%; display: flex; flex-direction: column; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.3); overflow: hidden; }
.lt-cmp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg-input); }
.lt-cmp-ttl { font-size: 13.5px; font-weight: 700; color: var(--sp-text); }
.lt-cmp-x { background: transparent; border: 0; font-size: 16px; color: var(--sp-text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background-color .15s ease; }
.lt-cmp-x:hover { background: var(--sp-bg-hover); color: var(--sp-text); }
.lt-cmp-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.lt-cmp-verdict { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; }
.lt-cmp-verdict.ok   { background: rgba(16,185,129,.12); }
.lt-cmp-verdict.warn { background: rgba(245,158,11,.12); }
.lt-cmp-verdict.crit { background: rgba(239,68,68,.12); }
.lt-cmp-score { font-size: 30px; font-weight: 800; line-height: 1; color: var(--sp-text); }
.lt-cmp-score small { font-size: 13px; font-weight: 600; color: var(--sp-text-muted); }
.lt-cmp-verdict.ok   .lt-cmp-score { color: #10b981; }
.lt-cmp-verdict.warn .lt-cmp-score { color: #f59e0b; }
.lt-cmp-verdict.crit .lt-cmp-score { color: #ef4444; }
.lt-cmp-vlabel { font-size: 15px; font-weight: 800; color: var(--sp-text); }
.lt-cmp-vsub { font-size: 11.5px; color: var(--sp-text-muted); margin-top: 2px; }
.lt-cmp-bars { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.lt-cmp-bar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.lt-cmp-bl { flex: 0 0 150px; color: var(--sp-text-muted); }
.lt-cmp-bt { flex: 1; height: 7px; border-radius: 4px; background: var(--sp-bg-soft); overflow: hidden; }
.lt-cmp-bt > i { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.lt-cmp-bar > b { flex: 0 0 38px; text-align: right; font-weight: 700; color: var(--sp-text); }
.lt-cmp-seq.ok { color: #10b981; } .lt-cmp-seq.crit { color: #ef4444; }
.lt-cmp-mags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.lt-cmp-mag { flex: 1 1 72px; text-align: center; padding: 9px 4px; border-radius: 8px; background: var(--sp-bg-soft); border: 1px solid var(--sp-border); }
.lt-cmp-mag b { display: block; font-size: 15px; font-weight: 800; color: var(--sp-text); }
.lt-cmp-mag span { font-size: 9px; color: var(--sp-text-muted); }
.lt-cmp-mag.alert { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }
.lt-cmp-mag.alert b { color: #ef4444; }
.lt-cmp-rows { display: flex; flex-direction: column; }
.lt-cmp-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--sp-border); font-size: 12px; }
.lt-cmp-row:last-child { border-bottom: 0; }
.lt-cmp-row > span { color: var(--sp-text-muted); }
.lt-cmp-row > b { color: var(--sp-text); font-weight: 600; text-align: right; }
/* B — Uyum Raporu: stop-by-stop detay tablosu */
.lt-cmp-stops-h {
    margin-top: 16px; margin-bottom: 6px;
    font-size: 12px; font-weight: 700; color: var(--sp-text);
}
.lt-cmp-spill {
    display: inline-block; padding: 2px 8px; border-radius: 99px;
    font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.lt-cmp-spill.ok { background: rgba(16, 185, 129, .14); color: #059669; }
.lt-cmp-spill.late { background: rgba(239, 68, 68, .14); color: #b91c1c; }
.lt-cmp-spill.early { background: rgba(59, 130, 246, .14); color: #1d4ed8; }
.lt-cmp-spill.missed { background: rgba(107, 114, 128, .15); color: #4b5563; }

/* Faz 3 — veri kalitesi uyarısı + patron özeti + iyi-durum kutusu */
.lt-cmp-dq { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; margin-bottom: 12px; border-radius: 9px; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .32); }
.lt-cmp-dq b { font-size: 11.5px; color: #b45309; }
.lt-cmp-dq span { font-size: 10.5px; line-height: 1.5; color: var(--sp-text-muted); }
.lt-cmp-summary { padding: 9px 12px; margin-bottom: 13px; border-radius: 9px; background: var(--sp-bg-soft); border-left: 3px solid #3b82f6; font-size: 12px; line-height: 1.55; color: var(--sp-text); }
.lt-cmp-mag.good { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); }
.lt-cmp-mag.good b { color: #10b981; }

/* Faz 2 — durak başına zengin kart (tip · plan · alan giriş/çıkış · bekleme · tamamlanma) */
.lt-cmp-stopc-wrap { display: flex; flex-direction: column; gap: 8px; }
.lt-cmp-stopc { border: 1px solid var(--sp-border); border-radius: 9px; padding: 9px 10px; background: var(--sp-bg-card); }
.lt-cmp-stopc.crit { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.04); }
.lt-cmp-stopc.warn { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.04); }
.lt-cmp-stopc.ok { border-color: rgba(16,185,129,.25); }
.lt-cmp-stopc-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lt-cmp-tchip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.lt-cmp-stopc-seq { font-size: 10.5px; font-weight: 700; color: var(--sp-text-muted); }
.lt-cmp-stopc-name { flex: 1; font-size: 12px; font-weight: 700; color: var(--sp-text); min-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-cmp-stopc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; }
.lt-cmp-cell { display: flex; flex-direction: column; gap: 1px; }
.lt-cmp-cell > span { font-size: 9px; color: var(--sp-text-muted); letter-spacing: .3px; }
.lt-cmp-cell > b { font-size: 12px; font-weight: 700; color: var(--sp-text); font-variant-numeric: tabular-nums; }
.lt-cmp-stopc-area { margin-top: 8px; font-size: 10.5px; color: var(--sp-text-muted); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.lt-cmp-stopc-area b { color: var(--sp-text); }
.lt-cmp-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.lt-cmp-dot.ok { background: #10b981; }
.lt-cmp-dot.crit { background: #ef4444; }
.lt-cmp-reentry { color: #b45309; font-weight: 600; }
.lt-cmp-stopc-fin { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--sp-border); display: flex; gap: 8px; flex-wrap: wrap; }
.lt-cmp-fin { font-size: 10.5px; font-weight: 700; }
.lt-cmp-fin.ok { color: #059669; }
.lt-cmp-fin.crit { color: #dc2626; }

.lt-cmp-acts { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--sp-border); background: var(--sp-bg-input); }
.lt-cmp-karne { flex: 1; cursor: pointer; }
.lt-cmp-save { flex: 2; cursor: pointer; }

/* ============================================================
   GÜVENLİK & UYUM zenginleştirmesi — KTY, sürücü belge, akıllı şerit
   ============================================================ */
.lt-veh-rich.has-risk-unfit { border-left: 3px solid #b91c1c; box-shadow: 0 0 0 1px rgba(185, 28, 28, .25), 0 2px 8px rgba(0,0,0,.04); }
.lt-veh-rich.has-risk-unfit::after { content: '🚫 KTY UYGUNSUZ'; position: absolute; top: -8px; right: 8px; background: #b91c1c; color: #fff; font-size: 9px; padding: 2px 7px; border-radius: 9px; font-weight: 800; letter-spacing: .3px; box-shadow: 0 2px 4px rgba(0,0,0,.18); z-index: 1; }
.lt-safety-row { border-top: 1px solid rgba(239, 68, 68, .18) !important; padding-top: 7px !important; margin-top: 8px !important; }
.lt-doc.unfit { background: rgba(185, 28, 28, .12); color: #b91c1c; border: 1px solid rgba(185, 28, 28, .35); font-weight: 700; }

.lt-kty-block { display: flex; flex-direction: column; gap: 8px; }
.lt-kty-row { padding: 10px 12px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-input); }
.lt-kty-row.kty-uygun { border-color: rgba(16, 185, 129, .35); background: rgba(16, 185, 129, .04); }
.lt-kty-row.kty-eksik { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .04); }
.lt-kty-row.kty-uygunsuz { border-color: rgba(185, 28, 28, .45); background: rgba(185, 28, 28, .06); }
.lt-kty-row-h { display: flex; justify-content: space-between; align-items: center; }
.lt-kty-row-h b { font-size: 13px; color: var(--sp-text); }
.lt-kty-row-h span { font-size: 11px; font-weight: 700; }
.lt-kty-row.kty-uygun .lt-kty-row-h span { color: #059669; }
.lt-kty-row.kty-eksik .lt-kty-row-h span { color: var(--sp-primary-dark); }
.lt-kty-row.kty-uygunsuz .lt-kty-row-h span { color: #b91c1c; }
.lt-kty-issues { list-style: none; padding: 0; margin: 6px 0 0; font-size: 11.5px; color: var(--sp-text); }
.lt-kty-issues li { padding: 3px 0 3px 14px; position: relative; }
.lt-kty-issues li::before { content: '•'; position: absolute; left: 4px; color: #b91c1c; font-weight: 800; }
.lt-kty-meta { font-size: 10.5px; color: var(--sp-text-muted); margin-top: 5px; }

.lt-kty-badge { display: inline-block; padding: 2px 9px; border-radius: 9px; font-size: 10.5px; font-weight: 700; line-height: 1.5; margin-left: 6px; }
.lt-kty-badge.kty-uygun { background: rgba(16,185,129,.16); color: #059669; }
.lt-kty-badge.kty-eksik { background: rgba(245,158,11,.16); color: var(--sp-primary-dark); }
.lt-kty-badge.kty-uygunsuz { background: rgba(185,28,28,.18); color: #b91c1c; }

.lt-kpis-rich .lt-kpi.sec-unfit b { color: #b91c1c; }
.lt-kpis-rich .lt-kpi.sec-repair b { color: #ef4444; }
.lt-kpis-rich .lt-kpi.sec-maint b { color: #f59e0b; }
.lt-kpis-rich .lt-kpi.sec-ok b { color: #10b981; }

.lt-smart-bar { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px 10px; border-bottom: 1px solid var(--sp-border); background: linear-gradient(180deg, rgba(245, 158, 11, .04), transparent); }
.lt-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 14px; font-size: 11px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: filter .15s ease, transform .12s ease; line-height: 1.4; }
.lt-chip:hover { filter: brightness(.93); transform: translateY(-1px); }
.lt-chip-unfit { background: rgba(185, 28, 28, .14); color: #b91c1c; border-color: rgba(185, 28, 28, .3); }
.lt-chip-expired { background: rgba(239, 68, 68, .14); color: #dc2626; border-color: rgba(239, 68, 68, .3); }
.lt-chip-critical { background: rgba(245, 158, 11, .14); color: var(--sp-primary-dark); border-color: rgba(245, 158, 11, .3); }
.lt-chip-warning { background: rgba(250, 204, 21, .14); color: #b45309; border-color: rgba(250, 204, 21, .3); }

/* ============================================================
   ARAÇ KARTI 5.png ZENGİNLEŞTİRME — sürücü kartı + kapasite + km + iş rozeti
   ============================================================ */
.lt-veh-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--sp-primary); }
.lt-veh-plate { display: inline-flex; align-items: center; gap: 6px; }
.lt-veh-hashid { font-size: 10px; color: var(--sp-text-muted); font-weight: 600; }
.lt-mb.job-on { background: rgba(245, 158, 11, .18); color: var(--sp-primary-dark); }
.lt-mb.job-pl { background: rgba(99, 102, 241, .14); color: #4338ca; }

.lt-veh-drvcard { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 8px; margin-top: 8px; }
.lt-drv-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark)); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.lt-drv-avatar svg { width: 18px; height: 18px; }
.lt-drv-body { min-width: 0; }
.lt-drv-name { font-size: 12.5px; font-weight: 700; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-drv-phone { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }
.lt-drv-phone svg { width: 10px; height: 10px; }
.lt-drv-actions { display: flex; gap: 4px; }
.lt-drv-act { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--sp-border); background: var(--sp-bg-card); color: var(--sp-text-muted); text-decoration: none; cursor: pointer; padding: 0; transition: background-color .15s ease, color .15s ease, transform .12s ease; }
.lt-drv-act:hover { transform: translateY(-1px); }
.lt-drv-act svg { width: 13px; height: 13px; }
.lt-drv-act.wa { color: #25d366; }
.lt-drv-act.wa:hover { background: #25d366; color: #fff; border-color: #25d366; }
.lt-drv-act.tel:hover { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-drv-act.perf:hover { background: #6366f1; color: #fff; border-color: #6366f1; }

.lt-veh-cap { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.lt-cap-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 14px; color: var(--sp-text); font-weight: 600; }
.lt-cap-chip svg { width: 11px; height: 11px; color: var(--sp-text-muted); }

.lt-veh-km-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px; font-size: 11px; padding: 6px 10px; background: var(--sp-bg-input); border-radius: 6px; border: 1px solid var(--sp-border); }
.lt-veh-km-row > span { display: inline-flex; align-items: center; gap: 5px; color: var(--sp-text); font-weight: 600; }
.lt-veh-km-row svg { width: 12px; height: 12px; color: var(--sp-text-muted); }
.lt-veh-km-row .lt-sb.overdue { color: #dc2626; background: rgba(239, 68, 68, .12); padding: 2px 8px; border-radius: 10px; }
.lt-veh-km-row .lt-sb.overdue svg { color: #dc2626; }

.lt-veh-now-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-top: 8px; }
.lt-now-cell { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 6px; }
.lt-now-cell svg { width: 14px; height: 14px; color: var(--sp-primary); flex-shrink: 0; }
.lt-now-cell > div { min-width: 0; }
.lt-now-cell b { display: block; font-size: 12px; color: var(--sp-text); font-weight: 700; line-height: 1.1; }
.lt-now-cell span { display: block; font-size: 9.5px; color: var(--sp-text-muted); letter-spacing: .3px; }

.lt-veh-jobs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.lt-job-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 3px 9px; border-radius: 12px; font-weight: 700; }
.lt-job-pill.on { background: rgba(16, 185, 129, .14); color: #059669; border: 1px solid rgba(16, 185, 129, .3); }
.lt-job-pill.pl { background: rgba(99, 102, 241, .12); color: #4338ca; border: 1px solid rgba(99, 102, 241, .3); }

/* Geçmiş oynatma çubuğu */
.lt-play {
    position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 600;
    display: flex; align-items: center; gap: 12px;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-lg); padding: 10px 14px;
}
.lt-play-btn { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--sp-gradient); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lt-play-btn svg { width: 16px; height: 16px; }
.lt-play-slider { flex: 1 1 auto; accent-color: var(--sp-primary); cursor: pointer; }
.lt-play-time { flex: 0 0 auto; font-size: 12px; color: var(--sp-text-muted); min-width: 116px; text-align: center; }
.lt-play-spd { display: flex; gap: 3px; }
.lt-spd { border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text-muted); font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: var(--sp-radius-sm); cursor: pointer; }
.lt-spd.active { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-play-x { flex: 0 0 auto; border: 0; background: transparent; font-size: 18px; color: var(--sp-text-muted); cursor: pointer; }

/* ============================================================
   ARAÇ TAKİP ENTEGRASYONU (VTS) — Genel Ayarlar
   1.png paterni portal/amber uyarlaması.
   ============================================================ */
.sp-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) { .sp-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .sp-grid-3 { grid-template-columns: 1fr; } }

.sp-vts-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 1100px) { .sp-vts-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .sp-vts-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sp-vts-tiles { grid-template-columns: 1fr; } }

.sp-vts-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--sp-bg-card);
    border: 1.5px solid var(--sp-border);
    border-radius: var(--sp-radius);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.sp-vts-tile:hover { border-color: var(--sp-primary); box-shadow: var(--sp-shadow); }
.sp-vts-tile.active {
    border-color: var(--sp-primary);
    background: rgba(245, 158, 11, 0.06);
    box-shadow: 0 0 0 1px var(--sp-primary) inset;
}
.sp-vts-tile-logo {
    width: 36px; height: 36px;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--sp-radius-sm);
    background: var(--sp-bg-input);
    overflow: hidden;
}
.sp-vts-tile-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-vts-tile-logo svg { width: 18px; height: 18px; color: var(--sp-text-muted); }
.sp-vts-tile-body { flex: 1 1 auto; min-width: 0; }
.sp-vts-tile-name {
    font-size: 13px; font-weight: 600; color: var(--sp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-vts-tile-sub { font-size: 11px; color: var(--sp-text-muted); }
.sp-vts-tile-count {
    flex: 0 0 auto;
    min-width: 26px; height: 22px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    background: rgba(245, 158, 11, 0.16);
    color: var(--sp-primary-dark);
}

/* VTS config popup — popup standardı (ms-modal deseni: yüksek özgüllük, 560px,
   text-align:left + padding:0 → merkez/üst-sol bug çözülür). */
.sp-modal.vts-modal,
.sp-modal-form.vts-modal { max-width: 920px; width: 94vw; text-align: left; padding: 0; }
.vts-modal .sp-modal-form-body { min-height: 340px; max-height: 70vh; overflow-y: auto; }

/* VTS config sekmeleri (edit modu) */
.vts-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg); }
.vts-tab {
    border: none; background: transparent; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--sp-text-muted);
    padding: 11px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}
.vts-tab:hover { color: var(--sp-text); }
.vts-tab.active { color: var(--sp-primary-dark); border-bottom-color: var(--sp-primary); }
.vts-pane { display: none; }
.vts-pane.active { display: block; animation: spFadeIn 0.2s ease; }

.vts-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.vts-bar-sp { flex: 1 1 auto; }
.vts-bar-lbl { font-size: 12px; color: var(--sp-text-muted); }

/* VTS eşleştirme / liste tablosu (DevExtreme değil — sade temalı) */
.vts-tablewrap { border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); overflow: auto; max-height: 46vh; }
.vts-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.vts-tbl th {
    position: sticky; top: 0; z-index: 1;
    background: var(--sp-bg-input); color: var(--sp-text); font-weight: 700;
    text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--sp-border); white-space: nowrap;
}
.vts-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--sp-border); color: var(--sp-text); }
.vts-tbl tr:hover td { background: rgba(245, 158, 11, 0.05); }
.vts-tbl .sp-status-pill { font-size: 11px; }
.vts-act-btn {
    border: 1px solid var(--sp-border); background: var(--sp-bg-input);
    color: var(--sp-text); font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: var(--sp-radius-sm); cursor: pointer; white-space: nowrap;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.vts-act-btn.link { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.vts-act-btn.create { color: #059669; border-color: #10b981; }
.vts-act-btn.create:hover { background: #10b981; color: #fff; }
.vts-act-btn.done { background: transparent; color: var(--sp-text-muted); cursor: default; border-color: transparent; }
.vts-act-btn:disabled { opacity: .55; cursor: default; }

/* Son Konum Detayı — harita popup (zengin bilgi + bugünün hikayesi playback) */
.vts-loc-detail-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: none; align-items: center; justify-content: center; z-index: 11000; }
.vts-loc-detail-overlay.show { display: flex; }
.vts-loc-detail { background: #fff; border-radius: 12px; width: 1080px; max-width: 95vw; height: 640px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); transition: width .2s ease, height .2s ease; }
.vts-loc-detail.fullscreen { width: 95vw; height: 95vh; max-width: 95vw; max-height: 95vh; border-radius: 8px; }
.vts-loc-detail-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f7f7f9; border-bottom: 1px solid #e8e8eb; }
.vts-loc-detail-plate { font-weight: 700; font-size: 16px; color: #1f1f23; letter-spacing: .3px; }
.vts-loc-detail-head .sp-status-pill { font-size: 11px; padding: 2px 8px; }
.vts-loc-detail-head .vts-spacer { flex: 1; }
.vts-loc-detail-head button { background: transparent; border: 1px solid #d1d5db; border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer; color: #374151; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.vts-loc-detail-head button:hover { background: #f3f4f6; border-color: #9ca3af; }
.vts-loc-detail-head button.primary { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.vts-loc-detail-head button.primary:hover { filter: brightness(.92); }
.vts-loc-detail-head button.icon { padding: 5px 9px; font-weight: 700; }
.vts-loc-detail-body { flex: 1; display: flex; overflow: hidden; position: relative; }
.vts-loc-detail-map { flex: 1; min-width: 0; background: #e7eef4; }
.vts-loc-detail-side { width: 340px; border-left: 1px solid #e8e8eb; background: #fafafb; padding: 14px 16px; overflow-y: auto; font-size: 13px; }
.vts-loc-detail-side h4 { margin: 0 0 6px; font-size: 11px; color: #9ca3af; letter-spacing: .6px; font-weight: 600; }
.vts-loc-detail-side h4:not(:first-child) { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e8e8eb; }
.vts-info-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #ececef; }
.vts-info-row:last-child { border-bottom: 0; }
.vts-info-row > .lbl { color: #6b7280; flex-shrink: 0; }
.vts-info-row > .val { font-weight: 600; color: #1f1f23; text-align: right; word-break: break-word; }
.vts-info-row > .val a { color: var(--sp-primary); text-decoration: none; }
.vts-info-row > .val a:hover { text-decoration: underline; }

/* Playback bar (Bugünün Hikayesi) */
.vts-play { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 28px; padding: 8px 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); display: flex; align-items: center; gap: 10px; z-index: 1000; max-width: calc(100% - 32px); }
.vts-play-btn { background: var(--sp-primary); color: #fff; border: 0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; transition: filter .15s ease; }
.vts-play-btn:hover { filter: brightness(.92); }
.vts-play-btn.ghost { background: transparent; color: #6b7280; }
.vts-play-btn.ghost:hover { background: #f3f4f6; color: #1f1f23; }
.vts-play-range { width: 280px; max-width: 40vw; cursor: pointer; }
.vts-play-time { font-size: 12px; color: #6b7280; min-width: 130px; }
.vts-play-count { font-size: 12px; color: #1f1f23; font-weight: 600; min-width: 64px; text-align: center; }
.vts-play-speed { font-size: 12px; color: #1f1f23; font-weight: 600; background: #fef3c7; padding: 2px 8px; border-radius: 12px; min-width: 70px; text-align: center; }

/* Anomali işaretleri (timeline + harita) */
.vts-anom-list { margin: 6px 0 0; padding: 0; list-style: none; max-height: 160px; overflow-y: auto; font-size: 12px; }
.vts-anom-list li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 6px; border-radius: 4px; cursor: pointer; transition: background-color .15s ease; }
.vts-anom-list li:hover { background: #f3f4f6; }
.vts-anom-list .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.vts-anom-list .dot.speed { background: #ef4444; }
.vts-anom-list .dot.idle { background: #f59e0b; }
.vts-anom-list .dot.brake { background: #fb7185; }
.vts-anom-list .dot.jump { background: #8b5cf6; }
.vts-anom-list .dot.gap { background: #6b7280; }
.vts-anom-list .ttl { font-weight: 600; color: #1f1f23; }
.vts-anom-list .sub { color: #6b7280; font-size: 11px; }
.vts-anom-empty { color: #9ca3af; font-size: 12px; padding: 6px 0; }

/* Harita üzerinde anomali marker rengi */
.leaflet-anomaly { background: transparent; border: 0; }
.leaflet-anomaly span { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.leaflet-anomaly.speed span { background: #ef4444; }
.leaflet-anomaly.brake span { background: #fb7185; }
.leaflet-anomaly.idle span { background: #f59e0b; }
.leaflet-anomaly.jump span { background: #8b5cf6; }
.leaflet-anomaly.gap span { background: #6b7280; }

/* Son konum grid satırı tıklanabilir görünüm */
#vtsLocGrid .dx-data-row { cursor: pointer; }

/* Kolon Seçici — kendi popup (DevExtreme chooser yerine; tam kontrol) */
.sp-modal.gc-modal,
.sp-modal-form.gc-modal { max-width: 420px; width: 94vw; text-align: left; padding: 0; }
.gc-modal .sp-modal-form-body { min-height: 0; }
.gc-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.gc-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--sp-radius-sm);
    font-size: 12.5px;
    color: var(--sp-text);
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.gc-item:hover { background: rgba(245, 158, 11, 0.08); }
.gc-item input[type=checkbox] {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    accent-color: var(--sp-primary);
    margin: 0;
    cursor: pointer;
}
.gc-item span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-empty { padding: 16px 8px; text-align: center; color: var(--sp-text-muted); font-size: 12.5px; }

/* ============================================================
   MÜŞTERİLERİM (Chat-C) — cm- prefix, ortak class redefine YOK
   ============================================================ */
.cm-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
    margin: 6px 0 12px;
}
.cm-block-title svg { width: 16px; height: 16px; color: var(--sp-primary-dark); }
.cm-count {
    background: rgba(245, 158, 11, 0.16);
    color: var(--sp-primary-dark);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
}
#cmPendingWrap { margin-bottom: 20px; }
.cm-card {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cm-card-body { flex: 1 1 auto; min-width: 0; }
.cm-card-body h3 { margin: 0 0 3px; font-size: 14.5px; color: var(--sp-text); }
.cm-since { font-size: 11.5px; color: var(--sp-text-muted); margin-top: 5px; }
.cm-card-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.cm-card-actions .sp-btn,
.cm-card-actions .sp-btn-ghost { margin-top: 0; padding: 8px 14px; font-size: 12.5px; }
.cm-badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--sp-bg-input);
    color: var(--sp-text-muted);
}
.cm-badge.ok { background: rgba(16, 185, 129, 0.14); color: #059669; }

/* ==== COMPLIANCE (Uyum Chat) — Mevzuat Uyum Merkezi; .al-summary/.al-score/.al-kpi reuse ==== */
.cmp-banner {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(234, 88, 12, 0.06));
    border: 1px solid var(--sp-border);
    border-left: 3px solid #f59e0b;
    border-radius: var(--sp-radius-sm);
    padding: 11px 16px;
    margin-bottom: 12px;
}
.cmp-banner svg { width: 22px; height: 22px; flex-shrink: 0; color: #ea580c; }
.cmp-banner strong { display: block; font-size: 13px; color: var(--sp-text); }
.cmp-banner span { font-size: 11.5px; color: var(--sp-text-muted); }

.cmp-list { display: flex; flex-direction: column; gap: 7px; }
.cmp-item {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 9px 14px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.cmp-item:hover { box-shadow: var(--sp-shadow); border-color: var(--cmp-c); }
.cmp-item.is-ack { opacity: 0.62; }
.cmp-ic {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--cmp-c) 14%, transparent);
    color: var(--cmp-c);
}
.cmp-ic svg { width: 15px; height: 15px; }
.cmp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmp-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-l1 strong { font-size: 12.5px; color: var(--sp-text); }
.cmp-badge { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }

/* F3.1 — Yurt İçi / Uluslararası scope chip'leri (Belge & Muayene segment üstü) */
.cmp-scope-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px;
    background: var(--sp-bg-input);
    border-radius: 8px;
    width: fit-content;
}
.cmp-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cmp-scope-chip svg { width: 14px; height: 14px; opacity: 0.8; }
.cmp-scope-chip:hover { color: var(--sp-text); }
.cmp-scope-chip.active {
    background: var(--sp-bg-card);
    color: #4f46e5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cmp-scope-chip.active svg { color: #797bf2; opacity: 1; }
.cmp-scope-chip[data-cmp-scope="intl"].active { color: #2563eb; }
.cmp-scope-chip[data-cmp-scope="intl"].active svg { color: #2563eb; }

/* F3.5 — Uygunluk segment scope chip (Belge & Muayene ile aynı pattern, prefix cmpf-) */
.cmpf-scope-row {
    display: flex;
    gap: 6px;
    margin: 14px 0 10px;
    padding: 4px;
    background: var(--sp-bg-input);
    border-radius: 8px;
    width: fit-content;
}
.cmpf-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cmpf-scope-chip svg { width: 14px; height: 14px; opacity: 0.8; }
.cmpf-scope-chip:hover { color: var(--sp-text); }
.cmpf-scope-chip.active {
    background: var(--sp-bg-card);
    color: #4f46e5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cmpf-scope-chip.active svg { color: #797bf2; opacity: 1; }
.cmpf-scope-chip[data-cmpf-scope="intl"].active { color: #2563eb; }
.cmpf-scope-chip[data-cmpf-scope="intl"].active svg { color: #2563eb; }

/* F3.5 — Uygunluk: Uluslararası Hazır / Uygunsuz rozeti (kart başlığında) */
.cmpf-intl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: 0.2px;
}
.cmpf-intl-badge.cmpf-intl-ok {
    background: rgba(16, 185, 129, 0.13);
    color: #047857;
}
.cmpf-intl-badge.cmpf-intl-bad {
    background: rgba(239, 68, 68, 0.13);
    color: #b91c1c;
}
.cmpf-item.cmpf-intl-ready { border-left: 3px solid #10b981; }
.cmpf-item.cmpf-intl-bad-row { border-left: 3px solid #ef4444; }

/* F3.5 — Issue chip'lerinde [Uluslararası] mavi tag */
.cmpf-chip.cmpf-chip-intl {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #1e40af !important;
    border: 1px solid rgba(59, 130, 246, 0.30) !important;
    font-weight: 600;
}

/* Uluslararası belge rozeti (satır içi) */
.cmp-intl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #1e40af;
    letter-spacing: 0.2px;
}
.cmp-intl-badge svg { width: 10px; height: 10px; }
.cmp-item.cmp-intl { border-left: 3px solid #3b82f6; }
.cmp-kty {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600;
    padding: 1px 8px; border-radius: 999px;
    background: rgba(234, 88, 12, 0.12); color: #c2410c;
}
.cmp-kty svg { width: 11px; height: 11px; }
.cmp-sub { font-size: 11px; color: var(--sp-text-muted); }
.cmp-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; }
.cmp-date { font-size: 12px; font-weight: 700; color: var(--sp-text); }
.cmp-meta { font-size: 10.5px; font-weight: 600; }
.cmp-action { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; min-width: 74px; }
.cmp-act {
    font-size: 10.5px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
    color: var(--sp-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cmp-seen:hover { background: rgba(16, 185, 129, 0.12); border-color: #10b981; color: #059669; }
.cmp-undo:hover { background: rgba(245, 158, 11, 0.12); border-color: #f59e0b; color: #b45309; }
.cmp-act-bridge {
    background: rgba(121, 123, 242, 0.08);
    border-color: rgba(121, 123, 242, 0.3);
    color: #6366f1;
    margin-right: 6px;
}
.cmp-act-bridge:hover { background: rgba(121, 123, 242, 0.18); border-color: #797bf2; color: #4f46e5; }

.cmp-action { display: inline-flex; align-items: center; }
.cmp-ok-dot { color: #10b981; font-size: 14px; line-height: 1; }
.cmp-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px 20px;
    color: var(--sp-text-muted);
}
.cmp-empty svg { width: 34px; height: 34px; opacity: 0.5; }
.cmp-empty p { font-size: 12.5px; }

/* ==== COMPLIANCE FAZ 2 — Segment + İhlal Defteri (.cmp-seg-* / .cmpv-*) ==== */
.cmp-seg {
    display: inline-flex; gap: 4px;
    background: var(--sp-bg-soft, var(--sp-border));
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 12px;
}
.cmp-seg-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700;
    padding: 6px 14px; border-radius: 999px;
    border: 0; background: transparent;
    color: var(--sp-text-muted); cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cmp-seg-btn svg { width: 14px; height: 14px; }
.cmp-seg-btn.active { background-color: var(--sp-seg-active); color: #fff; }
.cmp-seg-pane { display: none; }
.cmp-seg-pane.active { display: block; }

/* İptal Riski Bandı */
.cmpv-band {
    border: 1px solid var(--sp-border);
    border-left: 4px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 12px 16px; margin-bottom: 12px;
}
.cmpv-band-empty, .cmpv-band-ok { border-left-color: #10b981; background: rgba(16, 185, 129, 0.07); }
.cmpv-band-warn { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.cmpv-band-crit { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.09); }
.cmpv-band-load { font-size: 12.5px; color: var(--sp-text-muted); }
.cmpv-band-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cmpv-band-year { font-size: 12px; font-weight: 700; color: var(--sp-text-muted); }
.cmpv-band-count { font-size: 22px; font-weight: 800; color: var(--sp-text); }
.cmpv-band-lbl { font-size: 12px; color: var(--sp-text-muted); }
.cmpv-band-sub { font-size: 12px; color: var(--sp-text-muted); margin-top: 4px; }
.cmpv-band-crit .cmpv-band-sub strong { color: #dc2626; }

/* Simülatör + legend */
.cmpv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
@media (max-width: 820px) { .cmpv-grid2 { grid-template-columns: 1fr; } }
.cmpv-sim, .cmpv-legend {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 12px 14px;
}
.cmpv-sim-head, .cmpv-legend-h {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: var(--sp-text);
    margin-bottom: 8px;
}
.cmpv-sim-head svg { width: 15px; height: 15px; color: #ea580c; }
.cmpv-sim-row, .cmpv-sim-total {
    display: flex; justify-content: space-between; font-size: 12px;
    padding: 3px 0; color: var(--sp-text-muted);
}
.cmpv-sim-row b, .cmpv-sim-total b { color: var(--sp-text); }
.cmpv-sim-total { border-top: 1px dashed var(--sp-border); margin-top: 4px; padding-top: 7px; font-weight: 700; }
.cmpv-sim-total b { color: #ea580c; font-size: 14px; }
.cmpv-sim-note { font-size: 10.5px; color: var(--sp-text-muted); margin-top: 6px; }
.cmpv-sim-defer { font-size: 11px; color: #b45309; margin-top: 6px; }
.cmpv-warn { color: #dc2626; font-weight: 700; }
.cmpv-legend small { font-size: 10.5px; color: var(--sp-text-muted); display: block; margin: 2px 0 6px; }

/* Etiketler */
.cmpv-tag {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 1px 8px; border-radius: 999px; margin-left: 4px;
}
.tag-amnesty { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.tag-defer { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.tag-count { background: rgba(239, 68, 68, 0.14); color: #dc2626; }

/* Liste */
.cmpv-list { display: flex; flex-direction: column; gap: 7px; }
.cmpv-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 9px 14px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.cmpv-item:hover { box-shadow: var(--sp-shadow); }
.cmpv-item-main { flex: 1; min-width: 0; }
.cmpv-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmpv-art { font-size: 10px; font-weight: 800; color: #ea580c; background: rgba(234, 88, 12, 0.1); padding: 1px 7px; border-radius: 999px; }
.cmpv-l1 strong { font-size: 12.5px; color: var(--sp-text); }
.cmpv-st { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.st-open { background: rgba(59, 130, 246, 0.14); color: #2563eb; }
.st-paid { background: rgba(16, 185, 129, 0.14); color: #059669; }
.st-obj { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.st-cancel { background: var(--sp-border); color: var(--sp-text-muted); }
.cmpv-l2 { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }
.cmpv-amt { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 1px; }
.cmpv-mult { font-size: 11px; font-weight: 700; color: #b45309; }
.cmpv-calc { font-size: 14px; font-weight: 800; color: var(--sp-text); }
.cmpv-base { font-size: 10px; color: var(--sp-text-muted); }
.cmpv-ops { display: flex; gap: 5px; flex-shrink: 0; }
.cmpv-op {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--sp-border); background: var(--sp-bg-card);
    border-radius: var(--sp-radius-sm); color: var(--sp-text-muted); cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.cmpv-op svg { width: 14px; height: 14px; }
.cmpv-op:hover { border-color: #ea580c; color: #ea580c; }
.cmpv-op-del:hover { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.cmpv-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px 20px; color: var(--sp-text-muted);
}
.cmpv-empty svg { width: 34px; height: 34px; opacity: 0.5; }
.cmpv-empty p { font-size: 12.5px; }
.cmpv-disclaimer {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--sp-text-muted);
    margin-top: 12px; padding: 8px 12px;
    border: 1px dashed var(--sp-border); border-radius: var(--sp-radius-sm);
}
.cmpv-disclaimer svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Modallar (self-contained — paylaşımlı sp-modal'a dokunmaz) */
.cmpv-overlay {
    position: fixed; inset: 0; z-index: 2147483600;
    background: rgba(0, 0, 0, 0.5);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.cmpv-overlay.show { display: flex; }
.cmpv-dialog {
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius);
    width: 560px; max-width: 100%; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: var(--sp-shadow);
}
.cmpv-dialog-sm { width: 420px; }
.cmpv-dialog-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--sp-border);
}
.cmpv-dialog-head h3 { font-size: 14px; font-weight: 700; color: var(--sp-text); }
.cmpv-x {
    width: 26px; height: 26px; border: 0; background: transparent;
    font-size: 20px; line-height: 1; color: var(--sp-text-muted); cursor: pointer;
    border-radius: var(--sp-radius-sm); transition: background-color 0.15s ease;
}
.cmpv-x:hover { background: var(--sp-border); }
.cmpv-dialog-body { padding: 16px 18px; overflow-y: auto; }
.cmpv-dialog-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px; border-top: 1px solid var(--sp-border);
}
.cmpv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmpv-fld { display: flex; flex-direction: column; gap: 4px; }
.cmpv-fld-full { grid-column: 1 / -1; }
.cmpv-fld label { font-size: 11.5px; font-weight: 600; color: var(--sp-text-muted); }
.cmpv-fld input, .cmpv-fld select, .cmpv-fld textarea {
    font-size: 12.5px; padding: 7px 10px;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background: var(--sp-bg-card); color: var(--sp-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cmpv-fld input:focus, .cmpv-fld select:focus, .cmpv-fld textarea:focus {
    outline: none; border-color: #ea580c;
}
.cmpv-hint { font-size: 10.5px; color: var(--sp-text-muted); }

/* Belgeler section (Modul 50) — vehicle/driver/trailer Belgeler tab'ı ile aynı pattern */
.cmpv-docs-hint {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    background: rgba(59,130,246,0.06);
    border: 1px solid rgba(59,130,246,0.22);
    border-radius: var(--sp-radius-sm);
    font-size: 12px; line-height: 1.5; color: var(--sp-text);
}
.cmpv-docs-hint i { flex-shrink: 0; margin-top: 2px; }
.cmpv-docs-hint strong { color: var(--sp-text); }

.cmpv-docs-section {
    padding-top: 12px;
    border-top: 1px dashed var(--sp-border);
}
.cmpv-section-title {
    margin: 0 0 10px;
    font-size: 13px; font-weight: 700;
    color: var(--sp-text);
    display: flex; align-items: center; gap: 6px;
}
.cmpv-confirm-msg { font-size: 12.5px; color: var(--sp-text-muted); }
.cmpv-rate-form {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--sp-border);
}
.cmpv-rate-form .cmpv-fld { flex: 1; min-width: 90px; }
.cmpv-rate-list { display: flex; flex-direction: column; gap: 6px; }
.cmpv-rate-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
}
.cmpv-rate-y { font-weight: 800; color: var(--sp-text); width: 48px; }
.cmpv-rate-a { font-size: 11.5px; color: var(--sp-text-muted); flex: 1; }
.cmpv-rate-amt { font-weight: 700; color: #ea580c; }

/* ==== COMPLIANCE FAZ 3 — Uygunluk (.cmpf-*) ==== */
.cmpf-banner svg { color: #059669; }
.cmpf-list { display: flex; flex-direction: column; gap: 7px; }
.cmpf-item {
    display: flex; align-items: flex-start; gap: 11px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--cmpf-c);
    border-radius: var(--sp-radius-sm);
    padding: 10px 14px;
    transition: box-shadow 0.15s ease;
}
.cmpf-item:hover { box-shadow: var(--sp-shadow); }
.cmpf-ic {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--cmpf-c) 14%, transparent);
    color: var(--cmpf-c);
}
.cmpf-ic svg { width: 15px; height: 15px; }
.cmpf-body { flex: 1; min-width: 0; }
.cmpf-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmpf-l1 strong { font-size: 12.5px; color: var(--sp-text); }
.cmpf-badge { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.cmpf-cat { font-size: 10px; color: var(--sp-text-muted); background: var(--sp-border); padding: 1px 7px; border-radius: 999px; }
.cmpf-meta { font-size: 11px; color: var(--sp-text-muted); margin: 3px 0; }
.cmpf-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.cmpf-chip {
    font-size: 10.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(239, 68, 68, 0.12); color: #dc2626;
}
.cmpf-chip-ok { background: rgba(16, 185, 129, 0.13); color: #059669; }
.cmpf-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px 20px; color: var(--sp-text-muted);
}
.cmpf-empty svg { width: 34px; height: 34px; opacity: 0.5; }
.cmpf-empty p { font-size: 12.5px; }

/* ==== COMPLIANCE FAZ 4a — Genel Bakış Cockpit (.cmpo-*) ==== */
.cmpo-risk {
    border: 1px solid var(--sp-border);
    border-left: 4px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 13px 16px; margin-bottom: 12px;
}
.cmpo-risk-load { background: var(--sp-bg-card); }
.cmpo-risk-load-t { font-size: 12.5px; color: var(--sp-text-muted); }
.cmpo-risk-ok { border-left-color: #10b981; background: rgba(16, 185, 129, 0.07); }
.cmpo-risk-warn { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.cmpo-risk-crit { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.09); }
.cmpo-risk-main { font-size: 14px; font-weight: 800; color: var(--sp-text); }
.cmpo-risk-crit .cmpo-risk-main { color: #dc2626; }
.cmpo-risk-sub { font-size: 11.5px; color: var(--sp-text-muted); margin-top: 3px; }

.cmpo-zone {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 13px 15px; margin-bottom: 12px;
}
.cmpo-zone-h {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: var(--sp-text);
    margin-bottom: 11px;
}
.cmpo-zone-h svg { width: 15px; height: 15px; color: #ea580c; }

/* F3.4 — Uluslararası Uyum zone (mavi accent, yurt dışı kapsamı) */
.cmpo-zone-intl {
    background: linear-gradient(180deg, rgba(59,130,246,0.04) 0%, var(--sp-bg-card) 100%);
    border-color: rgba(59,130,246,0.30);
}
.cmpo-zone-intl .cmpo-zone-h svg { color: #2563eb; }
.cmpo-zone-tag {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(59,130,246,0.12);
    color: #1e40af;
}
.cmpo-kpi.cmpo-kpi-intl {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.25);
}
.cmpo-kpi.cmpo-kpi-intl .cmpo-kpi-v { color: #1e40af; }
.cmpo-kpi.cmpo-kpi-intl-ok {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.30);
}
.cmpo-kpi.cmpo-kpi-intl-ok .cmpo-kpi-v { color: #047857; }
.cmpo-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
@media (max-width: 880px) { .cmpo-kpis { grid-template-columns: repeat(2, 1fr); } }
.cmpo-kpi {
    background: var(--sp-bg-soft, var(--sp-border));
    border-radius: var(--sp-radius-sm);
    padding: 10px 12px; text-align: center;
}
.cmpo-kpi-v { display: block; font-size: 19px; font-weight: 800; color: var(--sp-text); }
.cmpo-kpi-l { display: block; font-size: 10.5px; color: var(--sp-text-muted); margin-top: 2px; }
/* Tıklanır KPI — sunum için "her sayıya tıkla" pattern */
.cmpo-kpi-click {
    position: relative;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease, border-color .15s ease;
    border: 1px solid transparent;
}
.cmpo-kpi-click:hover {
    background: var(--sp-bg-hover);
    transform: translateY(-1px);
    border-color: #797bf2;
}
.cmpo-kpi-arrow {
    position: absolute; top: 4px; right: 6px;
    font-size: 11px; color: var(--sp-text-muted);
    opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.cmpo-kpi-click:hover .cmpo-kpi-arrow { opacity: 1; color: #797bf2; }
.cmpo-gap-click { cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.cmpo-gap-click:hover { background: rgba(121,123,242,.1); border-color: #797bf2; }
.cmpo-gap-arrow { color: var(--sp-text-muted); font-size: 11px; margin-left: 3px; opacity: 0.7; }
.cmpo-gap-click:hover .cmpo-gap-arrow { color: #797bf2; opacity: 1; }

/* B4 — İhlal listesinde "Aksiyon Oluştur" buton (yeşil aksent) */
.cmpv-op.cmpv-op-act {
    color: #10b981;
    border: 1px solid rgba(16,185,129,.35);
    background: rgba(16,185,129,.08);
}
.cmpv-op.cmpv-op-act:hover { background: #10b981; color: #fff; border-color: #10b981; }

/* B3 — Uygunsuz Fitness satırı "Aksiyon" butonu */
.cmpf-act-btn {
    align-self: center;
    padding: 5px 11px;
    border-radius: 6px;
    border: 1px solid rgba(16,185,129,.4);
    background: rgba(16,185,129,.1);
    color: #10b981;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cmpf-act-btn:hover { background: #10b981; color: #fff; border-color: #10b981; }

/* Aksiyon Al — 4 seçenekli chooser modal */
.cmpf-choose-intro {
    font-size: 12.5px;
    color: var(--sp-text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
}
.cmpf-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 540px) { .cmpf-choose-grid { grid-template-columns: 1fr; } }
.cmpf-choose-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px;
    border: 1.5px solid var(--sp-border);
    border-radius: 9px;
    background: var(--sp-bg-card);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    font-family: inherit;
}
.cmpf-choose-card:hover {
    border-color: var(--sp-primary);
    background: rgba(245,158,11,.04);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.18);
}
.cmpf-choose-card strong {
    font-size: 12.5px;
    color: var(--sp-text);
    font-weight: 700;
    line-height: 1.2;
}
.cmpf-choose-card small {
    font-size: 11px;
    color: var(--sp-text-muted);
    line-height: 1.4;
}
.cmpf-choose-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    margin-bottom: 4px;
}
.cmpf-choose-ic svg { width: 16px; height: 16px; }
.cmpf-choose-ic.ok   { background: rgba(16,185,129,.13); color: #10b981; }
.cmpf-choose-ic.info { background: rgba(99,102,241,.13); color: #6366f1; }
.cmpf-choose-ic.mut  { background: rgba(107,114,128,.13); color: #6b7280; }
.cmpf-choose-ic.warn { background: rgba(234,88,12,.13); color: #ea580c; }
.cmpf-choose-card.cmpf-choose-warn {
    border-color: rgba(234,88,12,.40);
    background: rgba(234,88,12,.04);
}
.cmpf-choose-card.cmpf-choose-warn:hover {
    background: rgba(234,88,12,.10);
    border-color: #ea580c;
}

/* Override form — uyarı şeridi */
.cmpf-ovr-warn {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    background: rgba(234,88,12,.08);
    border: 1px solid rgba(234,88,12,.30);
    border-radius: 8px;
    font-size: 12px;
    color: #c2410c;
    line-height: 1.4;
}
.cmpf-ovr-warn svg { width: 18px; height: 18px; flex-shrink: 0; color: #ea580c; }
#cmpfOvrReason {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--sp-text);
    background: var(--sp-bg-card);
    resize: vertical;
    outline: none;
}
#cmpfOvrReason:focus { border-color: var(--sp-primary); }

/* B2 — KPI label yıl rozeti (m.30/4 + Tahmini Ceza cari yıl) */
.cmpo-kpi-yr {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(121,123,242,.14);
    color: #6366f1;
    font-size: 9px;
    font-weight: 800;
    font-family: 'SF Mono', Consolas, monospace;
    vertical-align: middle;
}

.cmpo-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 880px) { .cmpo-grid2 { grid-template-columns: 1fr; } }
.cmpo-grid2 .cmpo-zone { margin-bottom: 0; }

/* Hero — ℹ Skor Detayı butonu */
.sps-score-info {
    border: 1px solid var(--sp-border); background: var(--sp-bg-card); color: #6366f1;
    padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sps-score-info:hover { background: #6366f1; color: #fff; border-color: #6366f1; }

/* Skor Detay Modal */
.sps-info-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 14000;
    display: none; align-items: center; justify-content: center;
}
.sps-info-modal.show { display: flex; }
.sps-info-box {
    background: var(--sp-bg-card); border-radius: 12px;
    width: 720px; max-width: 95vw; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.sps-info-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--sp-border); }
.sps-info-title { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--sp-text); }
.sps-info-title svg { width: 18px; height: 18px; color: #6366f1; }
.sps-info-x {
    width: 28px; height: 28px; border-radius: 6px; border: 0;
    background: transparent; color: var(--sp-text-muted); font-size: 16px; cursor: pointer;
    transition: background-color .15s ease;
}
.sps-info-x:hover { background: var(--sp-bg-hover); color: var(--sp-text-primary); }
.sps-info-body { padding: 16px 18px; overflow-y: auto; }
.sps-info-h4 {
    margin: 14px 0 8px;
    font-size: 12px; font-weight: 700; color: var(--sp-text-primary);
    letter-spacing: 0.3px;
}

.sps-info-band {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 16px; border-radius: 10px; border: 1px solid var(--sp-border);
}
.sps-info-band.sps-info-band-ok   { background: rgba(16,185,129,.08); border-color: #10b981; }
.sps-info-band.sps-info-band-warn { background: rgba(245,158,11,.08); border-color: #f59e0b; }
.sps-info-band.sps-info-band-crit { background: rgba(239,68,68,.10); border-color: #ef4444; }
.sps-info-band-l { text-align: center; min-width: 120px; }
.sps-info-band-num { font-size: 36px; font-weight: 800; line-height: 1; color: var(--sp-text); }
.sps-info-band-num small { font-size: 14px; color: var(--sp-text-muted); font-weight: 600; }
.sps-info-band-lbl { font-size: 13px; font-weight: 800; margin-top: 4px; letter-spacing: 0.4px; }
.sps-info-band-ok   .sps-info-band-lbl { color: #10b981; }
.sps-info-band-warn .sps-info-band-lbl { color: #f59e0b; }
.sps-info-band-crit .sps-info-band-lbl { color: #ef4444; }
.sps-info-band-r {
    flex: 1; font-size: 12px; color: var(--sp-text-secondary); line-height: 1.6;
    border-left: 1px dashed var(--sp-border); padding-left: 18px;
}

.sps-info-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.sps-info-tbl thead th {
    text-align: left; padding: 8px 10px;
    font-size: 10.5px; font-weight: 700; color: var(--sp-text-muted);
    border-bottom: 2px solid var(--sp-border);
    letter-spacing: 0.3px;
}
.sps-info-tbl tbody td { padding: 10px 10px; border-bottom: 1px solid var(--sp-border); vertical-align: middle; }
.sps-info-comp { font-weight: 700; color: var(--sp-text); white-space: nowrap; }
.sps-info-weight { font-family: 'SF Mono', Consolas, monospace; font-size: 11px; color: var(--sp-text-muted); white-space: nowrap; }
.sps-info-weighted { text-align: center; width: 60px; }
.sps-info-weighted b { font-size: 16px; font-weight: 800; color: #6366f1; }
.sps-info-formula {
    font-size: 10.5px; color: var(--sp-text-secondary); line-height: 1.4;
    font-family: 'SF Mono', Consolas, monospace;
}
.sps-info-formula i { color: #6366f1; font-style: normal; font-weight: 700; }
.sps-info-formula b { color: var(--sp-text); }

.sps-info-bar {
    width: 140px; height: 16px; border-radius: 4px;
    background: var(--sp-bg-input); overflow: hidden;
}
.sps-info-bar > span {
    display: block; height: 100%; padding: 0 5px; line-height: 16px;
    font-size: 10px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    box-sizing: border-box; white-space: nowrap;
}
.sps-info-bar-ok   { background: #10b981; }
.sps-info-bar-warn { background: #f59e0b; }
.sps-info-bar-crit { background: #ef4444; }

.sps-info-penalty {
    margin-top: 12px; padding: 10px 14px;
    background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3);
    border-radius: 8px; font-size: 11.5px; color: #dc2626; line-height: 1.5;
}
.sps-info-total {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding: 12px 16px;
    background: var(--sp-bg-input); border-radius: 8px; border: 2px solid #6366f1;
}
.sps-info-total-l { flex: 1; font-size: 12px; font-weight: 700; color: var(--sp-text); }
.sps-info-total-c { font-size: 11px; color: var(--sp-text-secondary); font-family: 'SF Mono', Consolas, monospace; }
.sps-info-total-c small { color: var(--sp-text-muted); }
.sps-info-total-r b { font-size: 24px; font-weight: 800; color: #6366f1; }
.sps-info-note {
    margin-top: 14px; padding: 10px 12px;
    font-size: 10.5px; color: var(--sp-text-secondary);
    background: rgba(121,123,242,.06); border-left: 3px solid #6366f1;
    border-radius: 4px; line-height: 1.5;
}

.cmpo-health-top { display: flex; gap: 14px; align-items: center; }
.cmpo-ring {
    position: relative;
    width: 78px; height: 78px; border-radius: 50%; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cmpo-ring::before {
    content: ''; position: absolute; width: 58px; height: 58px;
    border-radius: 50%; background: var(--sp-bg-card);
}
.cmpo-ring b, .cmpo-ring small { position: relative; z-index: 1; }
.cmpo-ring b { font-size: 16px; font-weight: 800; }
.cmpo-ring small { font-size: 8.5px; color: var(--sp-text-muted); }
.cmpo-setup { flex: 1; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.cmpo-setup-i { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--sp-text-muted); }
.cmpo-setup-i b { color: var(--sp-text); }
.cmpo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmpo-dot.ok { background: #10b981; }
.cmpo-dot.bad { background: #ef4444; }
.cmpo-dot.info { background: #3b82f6; }
.cmpo-gaps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.cmpo-gap {
    font-size: 10.5px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(245, 158, 11, 0.14); color: #b45309;
}
.cmpo-gap b { font-weight: 800; }
.cmpo-gap-ok { background: rgba(16, 185, 129, 0.13); color: #059669; }
.cmpo-timeline { display: flex; flex-direction: column; gap: 7px; }
.cmpo-tl {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 12px; border-radius: var(--sp-radius-sm);
    border: 1px solid var(--sp-border); border-left: 3px solid var(--sp-border);
    margin-bottom: 6px;
    letter-spacing: normal;
    text-shadow: none;
}
.cmpo-tl.past { border-left-color: var(--sp-text-muted); opacity: 0.7; }
.cmpo-tl.soon { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.06); }
.cmpo-tl.far { border-left-color: #3b82f6; }
.cmpo-tl-date {
    font-size: 12px; font-weight: 800; color: var(--sp-text);
    width: 92px; flex-shrink: 0; white-space: nowrap;
    font-family: 'SF Mono', Consolas, monospace; letter-spacing: 0.2px;
}
.cmpo-tl-title {
    flex: 1; min-width: 0;
    font-size: 11.5px; color: var(--sp-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3;
}
.cmpo-tl-left {
    font-size: 10.5px; font-weight: 700; color: var(--sp-text-muted);
    white-space: nowrap; flex-shrink: 0;
    padding: 2px 9px; border-radius: 999px;
    background: var(--sp-bg-input);
}
.cmpo-tl.soon .cmpo-tl-left { background: #ef4444; color: #fff; }
.cmpo-tl.past .cmpo-tl-left { background: var(--sp-text-muted); color: #fff; }
.cmpo-tl.far  .cmpo-tl-left { background: #3b82f6; color: #fff; }

/* Cockpit — Aksiyon Takibi ekleri */
.cmpo-kpis-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .cmpo-kpis-4 { grid-template-columns: repeat(2, 1fr); } }
.cmpo-kpis-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .cmpo-kpis-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cmpo-kpis-5 { grid-template-columns: repeat(2, 1fr); } }

/* F3.6 — Eskalasyon banner */
.cmpo-esc-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 16px;
    background: linear-gradient(135deg, rgba(239,68,68,0.10) 0%, rgba(239,68,68,0.04) 100%);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-left: 4px solid #ef4444;
    border-radius: var(--sp-radius-md);
    margin-bottom: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    animation: cmpoEscPulse 2.2s ease-in-out infinite;
}
.cmpo-esc-banner:hover {
    background: linear-gradient(135deg, rgba(239,68,68,0.16) 0%, rgba(239,68,68,0.06) 100%);
    box-shadow: 0 4px 14px -4px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}
.cmpo-esc-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #ef4444; color: #fff;
    border-radius: 50%;
}
.cmpo-esc-icon svg { width: 20px; height: 20px; }
.cmpo-esc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmpo-esc-body strong { color: #b91c1c; font-size: 13.5px; }
.cmpo-esc-body span { font-size: 11.5px; color: var(--sp-text-muted); }
.cmpo-esc-arrow { flex-shrink: 0; color: #b91c1c; opacity: 0.7; }
.cmpo-esc-arrow svg { width: 18px; height: 18px; }
@keyframes cmpoEscPulse {
    0%,100% { border-color: rgba(239, 68, 68, 0.35); }
    50%     { border-color: rgba(239, 68, 68, 0.7); }
}
.cmpo-kpi-crit .cmpo-kpi-v { color: #ef4444; }
.cmpo-goto {
    margin-left: auto; border: 0; background: transparent;
    font-size: 11px; font-weight: 700; color: #ea580c; cursor: pointer;
    padding: 2px 6px; border-radius: var(--sp-radius-sm);
    transition: background-color 0.15s ease;
}
.cmpo-goto:hover { background: rgba(234, 88, 12, 0.1); }

/* ==== COMPLIANCE FAZ 4b — Aksiyonlar (.cmpa-*) ==== */
.cmpa-banner svg { color: #2563eb; }
.cmpa-list { display: flex; flex-direction: column; gap: 7px; }
.cmpa-item {
    display: flex; align-items: center; gap: 11px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--cmpa-c);
    border-radius: var(--sp-radius-sm);
    padding: 9px 14px;
    transition: box-shadow 0.15s ease;
}
.cmpa-item:hover { box-shadow: var(--sp-shadow); }
.cmpa-prio {
    font-size: 10px; font-weight: 800; flex-shrink: 0;
    padding: 3px 9px; border-radius: 999px; min-width: 52px; text-align: center;
}
.cmpa-body { flex: 1; min-width: 0; }
.cmpa-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmpa-l1 strong { font-size: 12.5px; color: var(--sp-text); }
.cmpa-st { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.cmpa-src { font-size: 10px; color: var(--sp-text-muted); background: var(--sp-border); padding: 1px 7px; border-radius: 999px; }
.cmpa-l2 { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sp-text-muted); margin-top: 3px; flex-wrap: wrap; }
.cmpa-l2 svg { width: 12px; height: 12px; }
.cmpa-due {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 700; padding: 2px 7px; border-radius: 999px;
    transition: background-color 0.15s ease;
}
.cmpa-due svg { width: 11px; height: 11px; opacity: 0.85; }
.cmpa-dur { font-style: normal; font-weight: 600; opacity: 0.9; }
.cmpa-sev-tag {
    font-size: 9px; font-weight: 800; letter-spacing: 0.4px;
    padding: 1px 5px; border-radius: 3px; margin-right: 2px;
    background: rgba(255,255,255,0.2);
}

/* Severity (gecikme magnitude'una göre) */
.cmpa-sev-crit-od {
    background: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45);
    animation: cmpa-crit-pulse 1.8s ease-in-out infinite;
}
.cmpa-sev-crit-od .cmpa-sev-tag { background: #ef4444; color: #fff; }

.cmpa-sev-high-od {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.25);
}
.cmpa-sev-high-od .cmpa-sev-tag { background: rgba(239, 68, 68, 0.85); color: #fff; }

.cmpa-sev-new-od {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}
.cmpa-sev-new-od .cmpa-sev-tag { background: rgba(245, 158, 11, 0.9); color: #fff; }

.cmpa-sev-soon-due {
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
}
.cmpa-sev-soon-due .cmpa-sev-tag { background: rgba(245, 158, 11, 0.7); color: #fff; }

.cmpa-sev-normal { color: var(--sp-text-muted); font-weight: 600; }
.cmpa-sev-none { color: var(--sp-text-muted); font-weight: 400; }

/* Satır arka planı şiddete göre çok hafif ton */
.cmpa-sev-row-crit-od { background: rgba(239, 68, 68, 0.06); border-left-width: 4px; }
.cmpa-sev-row-high-od { background: rgba(239, 68, 68, 0.04); }
.cmpa-sev-row-new-od  { background: rgba(245, 158, 11, 0.04); }
.cmpa-sev-row-soon-due{ background: rgba(245, 158, 11, 0.025); }

@keyframes cmpa-crit-pulse {
    0%,100% { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45); }
    50%     { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.85), 0 0 0 2px rgba(239, 68, 68, 0.12); }
}

/* Kategori chip */
.cmpa-cat {
    font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
}

/* Origin (müşteri/sistem otomatik) rozeti */
.cmpa-origin {
    font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 3px;
}
.cmpa-origin-customer { background: rgba(167, 139, 250, 0.18); color: #6d28d9; }
.cmpa-origin-auto     { background: rgba(245, 158, 11, 0.16); color: #92400e; }

/* Kritik Gecikme KPI butonu vurgu */
.cmpa-kpi-crit-od { border-color: rgba(239, 68, 68, 0.4); }
.cmpa-kpi-crit-od:hover { background: rgba(239, 68, 68, 0.08); }

.cmpa-ops { display: flex; gap: 5px; flex-shrink: 0; }
.cmpa-op {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--sp-border); background: var(--sp-bg-card);
    border-radius: var(--sp-radius-sm); color: var(--sp-text-muted); cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.cmpa-op svg { width: 14px; height: 14px; }
.cmpa-op:hover { border-color: #ea580c; color: #ea580c; }
.cmpa-done:hover { border-color: #10b981; color: #059669; background: rgba(16, 185, 129, 0.08); }
.cmpa-op-del:hover { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.cmpa-op-link {
    border-color: rgba(121, 123, 242, 0.3);
    color: #6366f1;
}
.cmpa-op-link:hover { border-color: #797bf2; color: #4f46e5; background: rgba(121, 123, 242, 0.1); }
.cmpa-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px 20px; color: var(--sp-text-muted);
}
.cmpa-empty svg { width: 34px; height: 34px; opacity: 0.5; }
.cmpa-empty p { font-size: 12.5px; }

/* Bağlı müşteri kartı tıklanabilir (detay popup) — Chat-C */
.cm-card-click { cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.cm-card-click:hover { border-color: var(--sp-primary); box-shadow: 0 2px 10px -3px rgba(245,158,11,0.35); }

/* Bağlı müşteri detay popup — fleet standardı (sp-modal-xl, geniş+kompakt) */
/* Genişlik .sp-modal-form.sp-modal-xl'den (880px); cm-modal yalnız iç düzen. */
.cm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cm-col { min-width: 0; }
.cm-col .sp-info-grid { grid-template-columns: 1fr; }   /* yarım kolonda satırlar tek sütun */
@media (max-width: 760px) { .cm-cols { grid-template-columns: 1fr; } }

.cm-veh-head {
    display: flex; align-items: center; gap: 8px;
    margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--sp-text);
    border-top: 1px solid var(--sp-border); padding-top: 14px;
}
.cm-col .cm-veh-head { border-top: 0; margin-top: 0; padding-top: 0; }   /* kolon başlıkları sıkı */
.cm-veh-head svg { width: 16px; height: 16px; color: var(--sp-primary-dark); }
.cm-veh-count {
    margin-left: auto; background: rgba(245,158,11,0.16); color: var(--sp-primary-dark);
    font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px;
}
.cm-veh-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); }
.cm-veh-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 11px; font-size: 12.5px; border-bottom: 1px solid var(--sp-border);
}
.cm-veh-row:last-child { border-bottom: 0; }
.cm-veh-plate { font-weight: 700; color: var(--sp-text); min-width: 92px; }
.cm-veh-sub { color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-veh-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--sp-text-muted); }

/* Faz B — filoma aktar (başlık: tümü, satır: tek araç) */
.cm-imp-all { margin-left: 10px; padding: 5px 12px; font-size: 12px; }
.cm-veh-sub { flex: 1; }
.cm-imp-btn {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; font-size: 11.5px; font-weight: 600;
    color: var(--sp-primary-dark); background: rgba(245,158,11,0.12);
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.cm-imp-btn svg { width: 13px; height: 13px; }
.cm-imp-btn:hover { background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); color: #fff; }

/* ============ Kiralama Yönetimi — sol kayan panel (FlightRadar mantığı) ============ */
.cm-drawer-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0,0,0,0.34);
    opacity: 0; visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.cm-drawer-overlay.show { opacity: 1; visibility: visible; }

.cm-drawer {
    position: absolute; top: 0; left: 0; height: 100%;
    width: clamp(420px, 36vw, 560px);
    display: flex; flex-direction: column;
    background: var(--sp-bg-card);
    box-shadow: var(--sp-shadow-lg);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.cm-drawer-overlay.show .cm-drawer { transform: translateX(0); }

.cm-drawer-head {
    flex: none; display: flex; align-items: center; gap: 10px;
    padding: 10px 13px; border-bottom: 1px solid var(--sp-border);
}
.cm-drawer-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-drawer-id-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-drawer-id h3 {
    margin: 0; font-size: 14px; font-weight: 700; color: var(--sp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-drawer-sub {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--sp-text-muted); min-width: 0;
}
.cm-drawer-sub svg { width: 12px; height: 12px; flex: none; }
.cm-drawer-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-status-badge {
    flex: none; font-size: 10px; font-weight: 700;
    padding: 1px 8px; border-radius: 999px;
    color: var(--sp-primary-dark); background: rgba(245,158,11,0.16);
}
.cm-drawer-head .sp-modal-close { flex: none; }
.cm-mini-grid > strong.cm-mini-sm { font-size: 10.5px; font-weight: 600; color: var(--sp-text-muted); }

.cm-drawer-body {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    padding: 11px 13px 0; overflow: hidden;
}

/* Kompakt 2 kolon bilgi: etiket | değer */
.cm-mini-grid {
    flex: none;
    display: grid; grid-template-columns: 74px 1fr;
    row-gap: 4px; column-gap: 10px;
    font-size: 11.5px; align-items: baseline;
}
.cm-mini-grid > span { color: var(--sp-text-muted); font-size: 10.5px; }
.cm-mini-grid > strong { color: var(--sp-text); font-weight: 600; word-break: break-word; }

/* Müşterideki Tanımım — katlanabilir */
.cm-collapse { flex: none; margin-top: 9px; border-top: 1px solid var(--sp-border); }
.cm-collapse-head {
    width: 100%; display: flex; align-items: center; gap: 7px;
    padding: 8px 0 6px; background: none; border: 0; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--sp-text);
}
.cm-collapse-head .cm-cl-ic { width: 14px; height: 14px; color: var(--sp-primary-dark); flex: none; }
.cm-collapse-head .cm-cl-chev {
    width: 14px; height: 14px; margin-left: auto; color: var(--sp-text-muted);
    transition: transform 0.2s ease;
}
.cm-collapse-head.open .cm-cl-chev { transform: rotate(180deg); }
.cm-collapse-body { max-height: 0; overflow: hidden; transition: max-height 0.26s ease; }
.cm-collapse-body.open { max-height: 300px; }
.cm-collapse-body .cm-mini-grid { padding-bottom: 8px; }

/* Araç başlık çubuğu */
.cm-veh-bar {
    flex: none; display: flex; align-items: center; gap: 7px;
    margin-top: 9px; padding-top: 9px;
    border-top: 1px solid var(--sp-border);
    font-size: 12px; font-weight: 600; color: var(--sp-text);
}
.cm-veh-bar > svg { width: 15px; height: 15px; color: var(--sp-primary-dark); flex: none; }

/* Filtre satırı: plaka arama + sıralama */
.cm-veh-filter { flex: none; display: flex; align-items: center; gap: 7px; margin: 8px 0 7px; }
.cm-veh-search { flex: 1; position: relative; min-width: 0; }
.cm-veh-search svg {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; color: var(--sp-text-muted); pointer-events: none;
}
.cm-veh-search input {
    width: 100%; box-sizing: border-box;
    padding: 6px 10px 6px 29px; font-size: 12px;
    color: var(--sp-text); background: var(--sp-bg-input);
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.cm-veh-search input:focus {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.cm-sort {
    flex: none; max-width: 124px;
    padding: 6px 8px; font-size: 11.5px;
    color: var(--sp-text); background: var(--sp-bg-input);
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    outline: none; cursor: pointer;
}
.cm-sort:focus { border-color: var(--sp-primary); }

/* Araç toolbar — tümünü seç + toplu/çoklu aktar */
.cm-veh-tools {
    flex: none; display: flex; align-items: center; gap: 7px;
    margin-bottom: 8px;
}
.cm-selall {
    margin-right: auto; display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--sp-text-muted); cursor: pointer; user-select: none;
}
.cm-selall input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--sp-primary); }
.cm-veh-tools .cm-imp-all,
.cm-veh-tools .cm-imp-sel {
    margin-left: 0; flex: none;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; font-size: 11px; font-weight: 600;
    border-radius: var(--sp-radius-sm); cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}
.cm-veh-tools svg { width: 12px; height: 12px; }
.cm-imp-sel {
    color: #fff; background: var(--sp-primary-dark); border: 1px solid var(--sp-primary-dark);
}
.cm-imp-sel:hover:not(:disabled) { background: var(--sp-primary); border-color: var(--sp-primary); }
.cm-imp-sel:disabled { opacity: 0.45; cursor: default; }

/* Satır onay kutusu + seçili satır */
.cm-veh-chk { width: 14px; height: 14px; flex: none; cursor: pointer; accent-color: var(--sp-primary); }
.cm-veh-chk:disabled { cursor: default; opacity: 0.5; }
.cm-veh-row.sel { background: rgba(245,158,11,0.09); }

/* Zaten bağlı / filoda satır + rozet */
.cm-veh-chkph { width: 14px; height: 14px; flex: none; }
.cm-veh-row.linked { opacity: 0.72; }
.cm-veh-row.linked .cm-veh-plate { color: var(--sp-text-muted); }
.cm-veh-badge {
    flex: none; font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.cm-veh-badge.ok { color: #0f7b3f; background: rgba(16,185,129,0.16); }
.cm-veh-badge.mut { color: var(--sp-text-muted); background: rgba(120,120,120,0.14); }
.cm-veh-badge.warn { color: #9a6700; background: rgba(245,158,11,0.18); }

/* Müşteri Atamaları listesi (Adım 2.1 salt-okuma + 2.2a durum aksiyonları) */
.cm-asg-list { max-height: 240px; overflow-y: auto; }
.cm-asg-row {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 2px; font-size: 11.5px;
    border-bottom: 1px solid var(--sp-border);
}
.cm-asg-row:last-child { border-bottom: 0; }
.cm-asg-meta {
    flex: 1; min-width: 0; color: var(--sp-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Kebab + işlem menüsü */
.cm-asg-kebab {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    background: none; border: 0; border-radius: var(--sp-radius-sm);
    color: var(--sp-text-muted); cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cm-asg-kebab:hover { background: rgba(120,120,120,0.14); color: var(--sp-text); }
.cm-asg-kebab svg { width: 14px; height: 14px; }
.cm-asg-menu {
    display: none; position: absolute; top: 100%; right: 0; z-index: 50;
    min-width: 132px;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm); box-shadow: var(--sp-shadow-lg);
    padding: 4px 0; margin-top: 2px;
}
.cm-asg-row.menu-open .cm-asg-menu { display: block; }
.cm-asg-mi {
    display: block; width: 100%; text-align: left;
    padding: 6px 12px; font-size: 11.5px; font-weight: 600;
    background: none; border: 0; cursor: pointer;
    color: var(--sp-text);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cm-asg-mi:hover { background: rgba(120,120,120,0.10); }
.cm-asg-mi.ok { color: #0f7b3f; }
.cm-asg-mi.warn { color: #9a6700; }
.cm-asg-mi.danger { color: #b42318; }

/* Satır içi düzenleme (Adım 2.2b) — plaka kalır; meta+rozet+kebab gizlenir */
.cm-asg-row > .cm-asg-edit { display: none; }
.cm-asg-row.editing > .cm-asg-meta,
.cm-asg-row.editing > .cm-veh-badge,
.cm-asg-row.editing > .cm-asg-kebab,
.cm-asg-row.editing > .cm-asg-menu { display: none; }
.cm-asg-row.editing > .cm-asg-edit {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    flex: 1; min-width: 0;
}
.cm-asg-edit select,
.cm-asg-edit input[type="text"] {
    font-size: 11px; padding: 3px 6px;
    color: var(--sp-text); background: var(--sp-bg-input);
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    outline: none;
}
.cm-asg-edit input[type="text"] { width: 92px; }
.cm-asg-edit select { max-width: 95px; }
.cm-asg-edit select:focus,
.cm-asg-edit input[type="text"]:focus { border-color: var(--sp-primary); }
.cm-asg-eOk, .cm-asg-eCancel {
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    border-radius: var(--sp-radius-sm); cursor: pointer;
    border: 1px solid var(--sp-border);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cm-asg-eOk { color: #fff; background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); }
.cm-asg-eOk:hover { background: var(--sp-primary); border-color: var(--sp-primary); }
.cm-asg-eCancel { background: none; color: var(--sp-text-muted); }
.cm-asg-eCancel:hover { color: var(--sp-text); background: rgba(120,120,120,0.10); }

/* Aktarım sürerken kilit (çift-submit engeli görsel) */
.cm-busy .cm-veh-list,
.cm-busy .cm-veh-tools { pointer-events: none; }
.cm-busy .cm-imp-btn { opacity: 0.5; }

/* Aktarım sonucu — panelde kalıcı bant */
.cm-veh-result {
    flex: none; margin-bottom: 8px; padding: 8px 10px;
    border: 1px solid var(--sp-border); border-left: 3px solid var(--sp-primary);
    border-radius: var(--sp-radius-sm); background: var(--sp-bg);
}
.cm-rmsg { font-size: 11.5px; font-weight: 600; color: var(--sp-text); margin-bottom: 6px; }
.cm-rchips { display: flex; flex-wrap: wrap; gap: 5px; }
.cm-rchip { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.cm-rchip.ok { color: #0f7b3f; background: rgba(16,185,129,0.16); }
.cm-rchip.mut { color: var(--sp-text-muted); background: rgba(120,120,120,0.14); }
.cm-rchip.warn { color: #9a6700; background: rgba(245,158,11,0.18); }
.cm-rchip.err { color: #b42318; background: rgba(239,68,68,0.16); }

/* Kompakt satırlar (drawer-scope — eski modal değerlerini ezer) */
.cm-drawer .cm-veh-row { padding: 5px 9px; font-size: 11.5px; gap: 8px; }
.cm-drawer .cm-veh-plate { min-width: 84px; }
.cm-drawer .cm-veh-count { font-size: 11px; padding: 1px 8px; }
.cm-drawer .cm-veh-empty { padding: 11px; font-size: 11.5px; }
.cm-drawer .cm-imp-btn { padding: 3px 8px; font-size: 11px; gap: 4px; }
.cm-drawer .cm-imp-btn svg { width: 12px; height: 12px; }

/* Kayan araç listesi — kalan tüm yükseklik (eski sabit max-height ezilir) */
.cm-veh-list {
    flex: 1; min-height: 0; overflow-y: auto; max-height: none;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    margin-bottom: 14px;
}

/* Alt ipucu */
.cm-drawer-foot {
    flex: none; display: flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-top: 1px solid var(--sp-border);
    font-size: 10.5px; color: var(--sp-text-muted); background: var(--sp-bg);
}
.cm-drawer-foot svg { width: 13px; height: 13px; flex: none; }

@media (max-width: 560px) { .cm-drawer { width: 100vw; } }

/* ==== COMPLIANCE — Dashboard Uyarı Kartı (.cmpw-*) ==== */
.cmpw-card {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--sp-border);
    border-left: 4px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 11px 16px; margin-bottom: 14px;
}
.cmpw-card.cmpw-ok { border-left-color: #10b981; background: rgba(16, 185, 129, 0.06); }
.cmpw-card.cmpw-warn { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.cmpw-card.cmpw-crit { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.09); }
.cmpw-ic { width: 22px; height: 22px; flex-shrink: 0; }
.cmpw-ic svg { width: 22px; height: 22px; }
.cmpw-ok .cmpw-ic { color: #059669; }
.cmpw-warn .cmpw-ic { color: #b45309; }
.cmpw-crit .cmpw-ic { color: #dc2626; }
.cmpw-body { flex: 1; min-width: 0; }
.cmpw-title { display: block; font-size: 12px; font-weight: 800; color: var(--sp-text); }
.cmpw-line { display: block; font-size: 11.5px; color: var(--sp-text-muted); margin-top: 1px; }
.cmpw-crit .cmpw-line { color: #dc2626; font-weight: 600; }
.cmpw-go {
    flex-shrink: 0; border: 1px solid var(--sp-border);
    background: var(--sp-bg-card); color: #ea580c;
    font-size: 11.5px; font-weight: 700;
    padding: 6px 12px; border-radius: 999px; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cmpw-go:hover { background: rgba(234, 88, 12, 0.1); border-color: #ea580c; }

/* ============================================================================
   D1 — Güvenli Tedarikçi Skoru (Hero) — Hukuk birimi vitrini
   ============================================================================ */
/* Hibrit hero — 2 sütun yan yana: SOL Compliance · SAĞ Operasyon */
.sps-hero-grid {
    margin: 14px 0 18px;
    display: grid;
    grid-template-columns: 1fr;   /* Skor ve Operasyon kartları ALT ALTA, her biri tam satır (kullanıcı isteği 2026-08-26) */
    gap: 14px;
}
@media (max-width: 1080px) { .sps-hero-grid { grid-template-columns: 1fr; } }
.sps-hero {
    margin: 0;   /* grid içinde, dış margin grid'den */
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-left: 5px solid #6b7280;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    overflow: hidden;
    position: relative;
}
.sps-hero.sps-ok   { border-left-color: #10b981; background: linear-gradient(90deg, rgba(16,185,129,.06), var(--sp-bg-card) 40%); }
.sps-hero.sps-warn { border-left-color: #f59e0b; background: linear-gradient(90deg, rgba(245,158,11,.06), var(--sp-bg-card) 40%); }
.sps-hero.sps-crit { border-left-color: #ef4444; background: linear-gradient(90deg, rgba(239,68,68,.08), var(--sp-bg-card) 40%); }

/* Compliance hero — mor-mavi ton (uyum/ciddiyet) */
.sps-hero--compliance {
    border-left-color: #6366f1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(139, 92, 246, 0.02) 50%, var(--sp-bg-card) 100%);
}
/* Operasyonel hero — yeşil-turuncu ton (aktivite/hareket) */
.sps-hero--ops {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(245, 158, 11, 0.03) 60%, var(--sp-bg-card) 100%);
    display: flex; flex-direction: column;
}
/* Üst-sağ köşedeki kategori rozeti */
.sps-hero-tag {
    position: absolute; top: 10px; right: 12px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
    background: rgba(99, 102, 241, 0.12); color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.25);
}
.sps-hero-tag--ops { background: rgba(245, 158, 11, 0.14); color: #b45309; border-color: rgba(245, 158, 11, 0.30); }

/* Operasyonel hero — iç bloklar */
.sps-ops-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 6px; }
.sps-ops-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--sp-text-primary); }
.sps-ops-clock { font-size: 11.5px; color: var(--sp-text-muted); }


/* ── "Bugün Yolda" — sefer satırları (2026-09-01) ──────────────────────────
   Eski 12 kutuluk sayaç ızgarasının yerini alır. Sayaç ancak tek tek bakmanın
   mümkün olmadığı ölçekte anlamlı; az seferde satır listesi daha çok iş görür.
   Ölçek büyüyünce JS (.sps-today-scale) sayaç şeridine düşer.                */
.sps-today { padding: 4px 20px 2px; }

/* Sayaç şeridi — yalnız çok sefer varken (SPS_ROUTE_LIST_MAX üstü) */
.sps-today-scale {
    display: flex; align-items: center; gap: 2px;
    padding: 6px 10px; margin-bottom: 6px;
    border-radius: 8px; background: rgba(0, 0, 0, 0.03);
}
.sps-scale-n { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.sps-scale-n b { font-size: 17px; font-weight: 700; color: var(--sp-text-primary); }
.sps-scale-n small { font-size: 9.5px; letter-spacing: 0.3px; color: var(--sp-text-muted); }
.sps-scale-n--road b { color: #047857; }
.sps-scale-n--wait b { color: #b45309; }
.sps-scale-n--late b { color: #b91c1c; }
.sps-scale-sep { width: 1px; align-self: stretch; background: rgba(0, 0, 0, 0.08); }

/* Satır listesi */
.sps-today-list { display: flex; flex-direction: column; gap: 3px; }
.sps-trip {
    display: grid; align-items: center; gap: 8px;
    grid-template-columns: 8px 88px minmax(0, 0.9fr) minmax(0, 2fr) 56px auto;
    padding: 5px 9px; border-radius: 7px;
    background: rgba(0, 0, 0, 0.025);
    border-left: 3px solid #9ca3af;
    transition: background-color 0.15s ease;
}
.sps-trip:hover { background: rgba(0, 0, 0, 0.05); }
.sps-trip-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.sps-trip-plate {
    font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
    color: var(--sp-text-primary); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.sps-trip-plate[data-sps-vehicle] { cursor: pointer; }
.sps-trip-plate[data-sps-vehicle]:hover { color: #b45309; text-decoration: underline; }
.sps-trip-who {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
    font-size: 11.5px; color: var(--sp-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mobil etkinlik rozeti — durum kovalari backend MobileLiveStatus.status_code ile birebir
   (Aktif · Arka Planda · Uygulama Kapali · Oturum Kapali · Hic Acmadi). Ayrintili dort alan
   title'da; "Mobil Uygulama Aktiviteleri" raporuyla ayni sozluk. */
.sps-mob {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 1px 7px; border-radius: 999px;
    font-size: 9.5px; font-weight: 600; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis;
    background-color: rgba(0, 0, 0, 0.05); color: var(--sp-text-muted);
}
.sps-mob small { font-weight: 400; opacity: 0.85; }
.sps-mob--active { background-color: rgba(16, 185, 129, 0.16); color: #047857; }
.sps-mob--background { background-color: rgba(59, 130, 246, 0.16); color: #1d4ed8; }
.sps-mob--closed { background-color: rgba(245, 158, 11, 0.18); color: #b45309; }
.sps-mob--logged_out { background-color: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.sps-mob--never { background-color: rgba(0, 0, 0, 0.05); color: var(--sp-text-muted); }
.sps-trip-state {
    display: flex; flex-direction: column; line-height: 1.2;
    font-size: 11px; font-weight: 600; min-width: 0;
}
.sps-trip-state small {
    font-size: 10px; font-weight: 400; color: var(--sp-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Üç kaynak satırı — Plan / Şoför / GPS. Etiket sabit genişlikte, değerler alt alta hizalı okunur. */
.sps-trip-line { display: flex; align-items: baseline; gap: 4px; }
.sps-trip-line b {
    flex: 0 0 auto; font-size: 9.5px; font-weight: 700;
    color: var(--sp-text-muted);
}
.sps-trip-line b::after { content: ':'; }
.sps-trip-line--driver b { color: #2563eb; }
.sps-trip-line--gps b { color: #059669; }
.sps-trip-line em { font-style: normal; }
.sps-trip-line em.is-bad { color: #b91c1c; font-weight: 600; }
.sps-trip-line i { font-style: italic; opacity: 0.8; }

/* Durum renkleri — nokta, sol kenar ve durum metni birlikte konuşur */
.sps-trip--road { border-left-color: #10b981; }
.sps-trip--road .sps-trip-dot { background: #10b981; }
.sps-trip--road .sps-trip-state { color: #047857; }
.sps-trip--wait { border-left-color: #f59e0b; }
.sps-trip--wait .sps-trip-dot { background: #f59e0b; }
.sps-trip--wait .sps-trip-state { color: #b45309; }
.sps-trip--late { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.05); }
.sps-trip--late .sps-trip-dot { background: #ef4444; }
.sps-trip--late .sps-trip-state { color: #b91c1c; }
.sps-trip--done { border-left-color: #94a3b8; opacity: 0.72; }
.sps-trip--done .sps-trip-dot { background: #94a3b8; }
.sps-trip--done .sps-trip-state { color: var(--sp-text-muted); }

/* Durak ilerlemesi */
.sps-trip-bar { display: block; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.10); overflow: hidden; }
.sps-trip-bar i { display: block; height: 100%; border-radius: 2px; background: #10b981; transition: width 0.4s ease; }
.sps-trip--late .sps-trip-bar i { background: #ef4444; }
.sps-trip--wait .sps-trip-bar i { background: #f59e0b; }
.sps-trip--done .sps-trip-bar i { background: #94a3b8; }

/* Satır kısayolları — kart / hikaye / kokpit */
.sps-trip-acts { display: flex; gap: 3px; }
.sps-trip-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 5px;
    background: var(--sp-bg-card); color: var(--sp-text-muted);
    font-size: 10.5px; cursor: pointer; text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sps-trip-act:hover {
    background: rgba(245, 158, 11, 0.14); color: #b45309;
    border-color: rgba(245, 158, 11, 0.35);
}

.sps-trip-more { padding: 5px 4px 0; font-size: 11px; color: var(--sp-text-muted); }
.sps-trip-more a { color: #b45309; font-weight: 600; text-decoration: none; cursor: pointer; }
.sps-trip-more a:hover { text-decoration: underline; }

.sps-today-empty {
    padding: 18px 10px; text-align: center;
    font-size: 12px; color: var(--sp-text-muted);
}

/* Alt şerit — uyarı çipi + kapasite/belge mini bar tek satırda */
.sps-today-foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 20px 4px; margin-top: 6px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.sps-today-warn {
    padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    background: rgba(16, 185, 129, 0.10); color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.sps-today-warn.is-late {
    background: rgba(239, 68, 68, 0.10); color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.30);
}
.sps-today-mini {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; color: var(--sp-text-muted);
}
.sps-today-mini b { font-size: 11.5px; font-weight: 700; color: var(--sp-text-primary); }
.sps-today-bar { display: block; width: 54px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.10); overflow: hidden; }
.sps-today-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #10b981, #f59e0b); transition: width 0.4s ease; }

/* Dar ekran — sürücü ve ilerleme çubuğu düşer, plaka + durum + kısayol kalır */
@media (max-width: 1180px) {
    .sps-trip { grid-template-columns: 8px 82px minmax(0, 1fr) auto; }
    .sps-trip-who, .sps-trip-prog { display: none; }
}

/* 2 grup şerit — Sipariş üst / İş Emri (Sefer) alt */
.sps-ops-group { padding: 6px 20px 4px; }
.sps-ops-group + .sps-ops-group { border-top: 1px dashed rgba(0, 0, 0, 0.08); margin-top: 4px; padding-top: 8px; }
.sps-ops-group-head {
    display: flex; align-items: center; gap: 7px;
    padding: 4px 2px 6px;
    font-size: 12.5px;
}
.sps-ops-group-ico { font-size: 16px; }
.sps-ops-group-title {
    font-weight: 700; color: var(--sp-text-primary);
    letter-spacing: 0.5px; font-size: 11.5px;
}
.sps-ops-group-total { margin-left: auto; font-size: 11.5px; color: var(--sp-text-muted); }
.sps-ops-group-total b { font-size: 14px; font-weight: 700; color: var(--sp-text-primary); }
.sps-ops-active-num { color: #10b981 !important; }
.sps-ops-group--orders { background: linear-gradient(90deg, rgba(16, 185, 129, 0.04), transparent 60%); border-radius: 8px; }
.sps-ops-group--routes { background: linear-gradient(90deg, rgba(245, 158, 11, 0.04), transparent 60%); border-radius: 8px; }
.sps-ops-group-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.sps-ops-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 7px 10px; border-radius: 7px;
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid #9ca3af;
}
.sps-ops-tile--amber { border-left-color: #f59e0b; }
.sps-ops-tile--green { border-left-color: #10b981; }
.sps-ops-tile--blue  { border-left-color: #3b82f6; }
.sps-ops-tile--red   { border-left-color: #ef4444; }
.sps-ops-tile-ico { font-size: 12px; opacity: 0.7; }
.sps-ops-tile b { font-size: 17px; font-weight: 700; color: var(--sp-text-primary); line-height: 1.05; }
.sps-ops-tile-lbl { font-size: 10px; color: var(--sp-text-muted); }

/* Sipariş statü mini-bar (SP statüleri 97-103, Kokpit ile aynı dil) */
.sps-ops-stbar { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.sps-ops-st {
    flex: 1 1 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 4px;
    font-size: 10.5px; font-weight: 500;
    background: rgba(0,0,0,0.04); color: var(--sp-text-primary);
    border-left: 3px solid #9ca3af;
}
.sps-ops-st b { font-size: 12.5px; font-weight: 700; }
.sps-ops-st--cust { border-left-color: #64748b; background: rgba(100, 116, 139, 0.08); }
.sps-ops-st--plan { border-left-color: #6366f1; background: rgba(99, 102, 241, 0.08); color: #4338ca; }
.sps-ops-st--veh  { border-left-color: #3b82f6; background: rgba(59, 130, 246, 0.08); color: #1d4ed8; }
.sps-ops-st--del  { border-left-color: #10b981; background: rgba(16, 185, 129, 0.10); color: #047857; }

/* Bugün yükleme + teslim hedef satırı (dashed turuncu uyarı tonu) */
.sps-ops-tgtrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.sps-ops-tgt {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 6px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px dashed rgba(245, 158, 11, 0.30);
    font-size: 11px; color: var(--sp-text-primary);
}
.sps-ops-tgt-ico { font-size: 13px; }
.sps-ops-tgt b { font-size: 15px; font-weight: 700; }
.sps-ops-tgt-lbl { color: var(--sp-text-muted); font-size: 10px; }

/* Sefer kapasite + belge — mini progress bar satırı */
.sps-ops-progrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sps-ops-prog { background: rgba(0,0,0,0.025); border-radius: 6px; padding: 6px 8px; }
.sps-ops-prog-head { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sp-text-muted); margin-bottom: 4px; }
.sps-ops-prog-ico { font-size: 13px; }
.sps-ops-prog-lbl { flex: 1; }
.sps-ops-prog-head b { font-size: 12.5px; font-weight: 700; color: var(--sp-text-primary); }
.sps-ops-prog-track { height: 5px; background: rgba(0,0,0,0.08); border-radius: 3px; overflow: hidden; }
.sps-ops-prog-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.sps-ops-prog-fill--cap { background: linear-gradient(90deg, #10b981, #f59e0b); }
.sps-ops-prog-fill--doc { background: linear-gradient(90deg, #6366f1, #3b82f6); }

/* 7-gün sparkline */
.sps-ops-foot {
    display: flex; gap: 8px; padding: 8px 22px 14px; margin-top: auto;
}
.sps-ops-go {
    flex: 1; text-align: center;
    padding: 7px 12px; border-radius: 7px;
    font-size: 12px; font-weight: 600;
    background: rgba(16, 185, 129, 0.12); color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.sps-ops-go:hover { background: rgba(16, 185, 129, 0.20); color: #064e3b; }
.sps-ops-go--alt { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.30); }
.sps-ops-go--alt:hover { background: rgba(245, 158, 11, 0.20); color: #78350f; }

/* Compliance hero — ring/sub'lar daha kompakt (eşit yükseklik için) */
.sps-hero--compliance .sps-hero-main { padding: 14px 18px; gap: 16px; }
.sps-hero--compliance .sps-ring-wrap { width: 92px; height: 92px; }
.sps-hero--compliance .sps-ring { width: 92px; height: 92px; }
.sps-hero--compliance .sps-ring-val { font-size: 32px; }
.sps-hero--compliance .sps-hero-text h2 { font-size: 17px; }
.sps-hero--compliance .sps-hero-desc { font-size: 12px; margin: 4px 0; }
.sps-hero--compliance .sps-score-info {
    background: transparent; border: 0; color: var(--sp-text-muted); cursor: pointer;
    font-size: 14px; padding: 2px 4px;
}

.sps-hero-main {
    display: flex; align-items: center; gap: 20px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--sp-border);
}
.sps-ring-wrap { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.sps-ring { width: 110px; height: 110px; transform: rotate(-90deg); }
.sps-ring-bg { fill: none; stroke: var(--sp-bg-input); stroke-width: 10; }
.sps-ring-fg {
    fill: none; stroke-width: 10; stroke-linecap: round;
    transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .3s;
    stroke: #6b7280;
}
.sps-ok   .sps-ring-fg { stroke: #10b981; }
.sps-warn .sps-ring-fg { stroke: #f59e0b; }
.sps-crit .sps-ring-fg { stroke: #ef4444; }
.sps-ring-cn {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.sps-ring-val { font-size: 28px; font-weight: 800; color: var(--sp-text); line-height: 1; }
.sps-ring-lbl { font-size: 10px; color: var(--sp-text-muted); font-weight: 600; margin-top: 2px; }

.sps-hero-text { flex: 1; min-width: 0; }
.sps-hero-titlerow {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.sps-hero-text h2 {
    margin: 0; font-size: 18px; font-weight: 700; color: var(--sp-text);
    letter-spacing: -0.2px;
}
.sps-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
    background: var(--sp-bg-input); color: var(--sp-text-muted);
}
.sps-ok   .sps-badge { background: rgba(16,185,129,.16); color: #10b981; }
.sps-warn .sps-badge { background: rgba(245,158,11,.16); color: #f59e0b; }
.sps-crit .sps-badge { background: rgba(239,68,68,.16); color: #ef4444; }

.sps-hero-desc { margin: 0 0 6px; font-size: 12.5px; color: var(--sp-text-secondary); line-height: 1.5; }
.sps-hero-meta { display: flex; gap: 12px; font-size: 11px; color: var(--sp-text-muted); }
.sps-meta-it b { color: var(--sp-text); font-weight: 700; }

.sps-hero-go {
    flex-shrink: 0;
    background: #6366f1; color: #fff;
    border: 0; padding: 9px 16px;
    border-radius: 8px; font-weight: 700; font-size: 12px;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
    box-shadow: 0 2px 8px rgba(99,102,241,.25);
}
.sps-hero-go:hover { background: #4f46e5; transform: translateY(-1px); }

.sps-subgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--sp-border);
}
.sps-sub {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--sp-bg-card);
    transition: background-color .15s ease;
}
.sps-sub:hover { background: var(--sp-bg-hover); }
.sps-sub-ico { font-size: 22px; flex-shrink: 0; }
.sps-sub-body { flex: 1; min-width: 0; }
.sps-sub-val { font-size: 20px; font-weight: 800; color: var(--sp-text); line-height: 1; }
.sps-sub-lbl { font-size: 11px; color: var(--sp-text-muted); font-weight: 600; margin: 3px 0 2px; letter-spacing: 0.3px; }
.sps-sub-sub { font-size: 11px; color: var(--sp-text-secondary); }

@media (max-width: 880px) {
    .sps-hero-main { flex-wrap: wrap; }
    .sps-hero-text { flex-basis: 100%; order: 2; }
    .sps-subgrid { grid-template-columns: repeat(2, 1fr); }
}

/* D2.1 — Sıfır kayıt uyarısı (meta satırında) */
.sps-meta-zero {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(239,68,68,.12); color: #dc2626;
    font-weight: 700; font-size: 11px;
}
.sps-meta-zero b { color: #dc2626; }

/* D2.2 — 3 Kanıt Kartı (Hero altı, hukuk vitrini) */
.sps-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* Şeffaflık kartı kaldırıldı → 2 kart */
    gap: 12px;
    margin: 14px 0 18px;
}
@media (max-width: 980px) { .sps-proof-grid { grid-template-columns: 1fr; } }
.sps-proof-card {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
    display: flex; flex-direction: column;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.sps-proof-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); border-color: var(--sp-border-light); }
.sps-proof-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--sp-border);
}
.sps-proof-ico { font-size: 20px; line-height: 1; }
.sps-proof-title { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--sp-text); }
.sps-proof-badge {
    padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
    background: var(--sp-bg-input); color: var(--sp-text-muted);
}
.sps-proof-badge.sps-pb-ok   { background: rgba(16,185,129,.16); color: #10b981; }
.sps-proof-badge.sps-pb-warn { background: rgba(245,158,11,.16); color: #f59e0b; }
.sps-proof-badge.sps-pb-crit { background: rgba(239,68,68,.16); color: #ef4444; }

.sps-proof-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sps-proof-line {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    padding: 3px 0;
    font-size: 12px;
}
.sps-proof-line > span { color: var(--sp-text-muted); }
.sps-proof-line > b { color: var(--sp-text); font-weight: 700; text-align: right; }
.sps-proof-link { color: #6366f1; text-decoration: none; font-weight: 700; }
.sps-proof-link:hover { text-decoration: underline; }
.sps-warn-text { color: #f59e0b; font-weight: 700; }
.sps-ok-text { color: #10b981; font-weight: 700; }

.sps-proof-note {
    font-size: 11px; color: var(--sp-text-secondary);
    line-height: 1.5; margin-top: 8px;
    padding-top: 8px; border-top: 1px dashed var(--sp-border);
}
.sps-proof-actions {
    display: flex; gap: 6px; margin-top: 10px;
    padding-top: 10px; border-top: 1px dashed var(--sp-border);
}
.sps-proof-action {
    flex: 1; padding: 6px 8px; border-radius: 6px;
    border: 1px solid var(--sp-border); background: var(--sp-bg-input);
    color: var(--sp-text-primary); font-size: 11px; font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sps-proof-action:hover { background: #6366f1; border-color: #6366f1; color: #fff; }

/* ============================================================================
   D3.2 — Acil Durum Banner (Hero üstü, kırmızı, kritik varsa)
   ============================================================================ */
.sps-emergency {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 12px;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(239,68,68,.14), rgba(239,68,68,.06));
    border: 1px solid rgba(239,68,68,.4);
    border-left: 5px solid #ef4444;
    border-radius: 10px;
    animation: spsEmgPulse 2s ease-in-out infinite;
}
@keyframes spsEmgPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.18); }
    50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.sps-emg-ico {
    font-size: 22px;
    color: #dc2626;
    flex-shrink: 0;
}
.sps-emg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sps-emg-title {
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px;
    color: #dc2626;
}
.sps-emg-line {
    font-size: 12.5px; color: var(--sp-text); font-weight: 600;
    line-height: 1.4;
}
.sps-emg-go {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 8px;
    border: 0;
    background: #dc2626;
    color: #fff;
    font-size: 11.5px; font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
    box-shadow: 0 2px 6px rgba(239,68,68,.3);
}
.sps-emg-go:hover { background: #b91c1c; }

/* ============================================================================
   D3.1 — Mevzuat Takvimi (Hero ile Proof arası)
   ============================================================================ */
.sps-timeline {
    margin: 0 0 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 14px 16px;
}
.sps-tl-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--sp-border);
}
.sps-tl-ico { font-size: 18px; }
.sps-tl-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--sp-text); }
.sps-tl-sub { margin-left: auto; font-size: 11px; color: var(--sp-text-muted); font-style: italic; }

.sps-tl-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}
.sps-tl-card {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-left: 4px solid #6b7280;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sps-tl-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.sps-tl-past { border-left-color: #6b7280; opacity: 0.7; }
.sps-tl-soon { border-left-color: #f59e0b; background: rgba(245,158,11,.06); }
.sps-tl-far  { border-left-color: #10b981; background: rgba(16,185,129,.04); }

.sps-tl-date {
    font-size: 16px; font-weight: 800; color: var(--sp-text);
    font-family: 'SF Mono', Consolas, monospace;
    letter-spacing: 0.3px;
}
.sps-tl-days {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px;
    background: var(--sp-bg-card); color: var(--sp-text-muted);
}
.sps-tl-soon .sps-tl-days { background: #f59e0b; color: #fff; }
.sps-tl-past .sps-tl-days { background: #6b7280; color: #fff; }
.sps-tl-far  .sps-tl-days { background: #10b981; color: #fff; }

.sps-tl-list {
    margin: 8px 0 0;
    padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 4px;
}
.sps-tl-list li {
    font-size: 11.5px; color: var(--sp-text-secondary);
    padding-left: 14px; position: relative;
    line-height: 1.45;
}
.sps-tl-list li::before {
    content: '•';
    position: absolute; left: 4px; top: 0;
    color: var(--sp-text-muted); font-weight: 700;
}

/* ============================================================================
   D4 — Risk Matrisi + Audit Trail (hukuk delil zinciri)
   ============================================================================ */
.sps-d4-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
    margin: 14px 0 18px;
}
.sps-d4-grid--single { grid-template-columns: 1fr; }   /* Audit Trail kaldırıldı, sadece Risk Matrisi tek-sütun */
@media (max-width: 980px) { .sps-d4-grid { grid-template-columns: 1fr; } }

.sps-d4-card {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex; flex-direction: column;
}
.sps-d4-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--sp-border);
}
.sps-d4-ico { font-size: 18px; }
.sps-d4-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--sp-text); }
.sps-d4-sub { margin-left: auto; font-size: 11px; color: var(--sp-text-muted); font-style: italic; }

/* Risk Matrisi */
.sps-matrix {
    display: flex; flex-direction: column; gap: 4px;
}
.sps-mx-row {
    display: grid;
    grid-template-columns: 92px repeat(4, 1fr);   /* B6 — 4 kolon: Kayıt · KTY · Filo · Uygunsuz */
    gap: 4px;
}
.sps-mx-head .sps-mx-colhd {
    font-size: 9.5px; font-weight: 700; color: var(--sp-text-muted);
    text-align: center; letter-spacing: 0.3px;
    padding: 4px 6px;
}
.sps-mx-rowlbl {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    font-size: 12px; font-weight: 700; color: var(--sp-text);
    background: var(--sp-bg-input); border-radius: 6px;
}
.sps-mx-ico { font-size: 16px; }
.sps-mx-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 6px;
    border-radius: 6px;
    background: var(--sp-bg-input);
    border: 1px solid transparent;
    transition: transform .15s ease;
}
.sps-mx-cell:hover { transform: translateY(-1px); }
.sps-mx-cell b { font-size: 18px; font-weight: 800; line-height: 1; }
.sps-mx-cell span { font-size: 9.5px; color: var(--sp-text-muted); margin-top: 2px; font-weight: 600; }
.sps-mx-cell.ok    { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.25); }
.sps-mx-cell.ok b  { color: #10b981; }
.sps-mx-cell.warn  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); }
.sps-mx-cell.warn b { color: #f59e0b; }
.sps-mx-cell.crit  { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); }
.sps-mx-cell.crit b { color: #ef4444; }
.sps-mx-cell.empty b { color: var(--sp-text-muted); font-size: 14px; }
.sps-mx-cell.empty span { color: var(--sp-text-muted); }
.sps-mx-cell.total b { color: var(--sp-text); }

.sps-d4-legend {
    display: flex; gap: 12px;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed var(--sp-border);
    font-size: 10.5px; color: var(--sp-text-muted);
}
.sps-d4-lg-it { display: inline-flex; align-items: center; gap: 4px; }
.sps-d4-dot { width: 8px; height: 8px; border-radius: 2px; }
.sps-d4-dot.ok { background: #10b981; }
.sps-d4-dot.warn { background: #f59e0b; }
.sps-d4-dot.crit { background: #ef4444; }

/* Audit Trail */
.sps-audit {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 280px; overflow-y: auto;
}
.sps-audit-empty {
    padding: 20px; text-align: center;
    color: var(--sp-text-muted); font-size: 11.5px;
}
.sps-audit-row {
    display: flex; gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--sp-bg-input);
    border-left: 3px solid #6b7280;
    transition: background-color .15s ease;
}
.sps-audit-row:hover { background: var(--sp-bg-hover); }
.sps-au-ok   { border-left-color: #10b981; }
.sps-au-warn { border-left-color: #f59e0b; }
.sps-au-crit { border-left-color: #ef4444; }
.sps-au-date {
    flex-shrink: 0; width: 100px;
    font-size: 10px; color: var(--sp-text-muted);
    font-family: 'SF Mono', Consolas, monospace;
    font-weight: 600;
}
.sps-au-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sps-au-line1 {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    font-size: 11.5px;
}
.sps-au-act {
    font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
    background: var(--sp-bg-card); color: var(--sp-text);
    letter-spacing: 0.3px;
}
.sps-au-crit .sps-au-act { background: rgba(239,68,68,.18); color: #dc2626; }
.sps-au-warn .sps-au-act { background: rgba(245,158,11,.18); color: #f59e0b; }
.sps-au-ent { font-weight: 700; color: var(--sp-text); }
.sps-au-route { color: var(--sp-text-muted); font-size: 11px; }
.sps-au-reason { font-size: 11px; color: var(--sp-text-secondary); font-style: italic; }
.sps-au-meta { font-size: 10px; color: var(--sp-text-muted); }
.sps-d4-more {
    display: block; text-align: center;
    margin-top: 10px; padding: 8px;
    background: var(--sp-bg-input); border-radius: 6px;
    color: #6366f1; text-decoration: none;
    font-size: 11.5px; font-weight: 700;
    transition: background-color .15s ease;
}
.sps-d4-more:hover { background: #6366f1; color: #fff; }

/* ============================================================================
   D5 — Operasyonel Özet (kompakt strip) + Onboarding (collapse)
   ============================================================================ */
.sps-ops-strip {
    margin: 0 0 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 10px 14px;
}
/* D5 — Operasyonel Pulse — tek-satır kompakt strip (yeni) */
.sps-ops-pulse {
    margin: 0 0 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    font-size: 12.5px;
}
.sps-op-it { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; }
.sps-op-it b { font-size: 15px; font-weight: 700; color: var(--sp-text-primary); }
.sps-op-it span:not(.sps-op-it-ico) { color: var(--sp-text-muted); font-size: 11.5px; }
.sps-op-it-ico { font-size: 14px; opacity: 0.85; }
.sps-op-it-ico.amber { color: #f59e0b; }
.sps-op-it-ico.green { color: #10b981; }
.sps-op-it-ico.blue  { color: #3b82f6; }
.sps-op-sep { width: 1px; height: 22px; background: var(--sp-border); margin: 0 4px; }
@media (max-width: 780px) {
    .sps-ops-pulse { gap: 2px; padding: 6px 10px; font-size: 11.5px; }
    .sps-op-it b { font-size: 14px; }
    .sps-op-sep { display: none; }
}
.sps-ops-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px; margin-bottom: 10px;
    border-bottom: 1px solid var(--sp-border);
}
.sps-ops-ico { font-size: 14px; color: var(--sp-text-muted); }
.sps-ops-title { font-size: 12px; font-weight: 700; color: var(--sp-text); letter-spacing: 0.2px; }
.sps-ops-sub { margin-left: auto; font-size: 10.5px; color: var(--sp-text-muted); font-style: italic; }

.sps-ops-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 720px) { .sps-ops-items { grid-template-columns: repeat(2, 1fr); } }
.sps-ops-it {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--sp-bg-input);
    transition: transform .15s ease;
}
.sps-ops-it:hover { transform: translateY(-1px); }
.sps-ops-it-ico {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
}
.sps-ops-it-ico.amber  { background: rgba(245,158,11,.18); color: #f59e0b; }
.sps-ops-it-ico.green  { background: rgba(16,185,129,.18); color: #10b981; }
.sps-ops-it-ico.blue   { background: rgba(59,130,246,.18); color: #3b82f6; }
.sps-ops-it-ico.purple { background: rgba(168,85,247,.18); color: #a855f7; }
.sps-ops-it-body { display: flex; flex-direction: column; line-height: 1.2; }
.sps-ops-it-body b { font-size: 16px; font-weight: 800; color: var(--sp-text); }
.sps-ops-it-body span { font-size: 10.5px; color: var(--sp-text-muted); font-weight: 600; }

/* Onboarding — details/summary (varsayılan kapalı, ihtiyaç olursa aç) */
.sps-onboarding {
    margin: 0 0 14px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    overflow: hidden;
}
.sps-onboarding > summary {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color .15s ease;
}
.sps-onboarding > summary::-webkit-details-marker { display: none; }
.sps-onboarding > summary:hover { background: var(--sp-bg-hover); }
.sps-ob-ico { font-size: 16px; }
.sps-ob-title { flex: 1; font-size: 12px; font-weight: 700; color: var(--sp-text); letter-spacing: 0.2px; }
.sps-ob-chev { font-size: 14px; color: var(--sp-text-muted); transition: transform .2s ease; }
.sps-onboarding[open] .sps-ob-chev { transform: rotate(180deg); }
.sps-ob-body { padding: 14px; border-top: 1px solid var(--sp-border); margin: 0; }

/* ==== COMPLIANCE Tier B+C — grid satır + strip + modal şeridi ==== */
/* DevExtreme satır boyaması — kaynak özgüllüğü için !important zorunlu */
.cmpw-row-unfit > td { background-color: rgba(239, 68, 68, 0.07) !important; }
.cmpw-row-unfit:hover > td { background-color: rgba(239, 68, 68, 0.12) !important; }

.cmpw-strip {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--sp-border); border-left: 3px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 8px 12px; margin-bottom: 10px;
    font-size: 12px; color: var(--sp-text); cursor: pointer;
}
.cmpw-strip svg { width: 15px; height: 15px; flex-shrink: 0; }
.cmpw-strip span { flex: 1; }
.cmpw-strip b { font-weight: 800; }
.cmpw-strip-crit { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.07); }
.cmpw-strip-crit svg { color: #dc2626; }
.cmpw-strip-warn { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.cmpw-strip-warn svg { color: #b45309; }
.cmpw-strip-go {
    flex-shrink: 0; border: 0; background: transparent;
    font-size: 11.5px; font-weight: 700; color: #ea580c; cursor: pointer;
    padding: 2px 6px; border-radius: var(--sp-radius-sm);
    transition: background-color 0.15s ease;
}
.cmpw-strip-go:hover { background: rgba(234, 88, 12, 0.12); }

.cmpw-modstrip {
    display: flex; align-items: flex-start; gap: 9px;
    border-radius: var(--sp-radius-sm);
    padding: 9px 12px; margin-bottom: 12px;
}
.cmpw-modstrip svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.cmpw-modstrip strong { display: block; font-size: 12px; font-weight: 800; }
.cmpw-modstrip span { display: block; font-size: 11.5px; margin-top: 1px; }
.cmpw-modstrip-crit { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.cmpw-modstrip-warn { background: rgba(245, 158, 11, 0.12); color: #b45309; }

/* ============ Toplu işlem progress modalı (paylaşımlı) ============ */
.sp-modal-progress { text-align: center; padding: 22px 28px; min-width: 260px; }
.sp-modal-progress h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--sp-text); }
.sp-modal-progress p  { margin: 0; font-size: 12.5px; color: var(--sp-text-muted); }
.sp-progress-spinner {
    width: 36px; height: 36px; margin: 0 auto 12px;
    border: 3px solid var(--sp-border);
    border-top-color: var(--sp-primary);
    border-radius: 50%;
    animation: sp-spin 0.7s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-progress-bar {
    width: 100%; height: 6px; margin-top: 12px;
    background: var(--sp-bg-input);
    border-radius: 999px; overflow: hidden;
}
.sp-progress-fill {
    height: 100%; width: 0%;
    background: var(--sp-primary);
    transition: width 0.18s ease;
}

/* ============ Adım 2.3 — Yeni Atama (manuel müşteriye ata) ============ */
.cm-asg-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.cm-asg-new-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 11px; font-weight: 600;
    color: var(--sp-primary-dark); background: rgba(245,158,11,0.12);
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.cm-asg-new-btn:hover { background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); color: #fff; }
.cm-asg-new-btn svg { width: 12px; height: 12px; }

.cm-asg-newform {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    padding: 8px 4px 10px; margin-bottom: 8px;
    border-bottom: 1px dashed var(--sp-border);
}
.cm-asg-newform select,
.cm-asg-newform input[type=text] {
    font-size: 11px; padding: 3px 6px;
    color: var(--sp-text); background: var(--sp-bg-input);
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    outline: none;
}
.cm-asg-newform #cmNewAsgVeh { flex: 1; min-width: 140px; max-width: 100%; }
.cm-asg-newform #cmNewAsgType { max-width: 110px; }
.cm-asg-newform input[type=text] { width: 92px; }
.cm-asg-newform select:focus,
.cm-asg-newform input[type=text]:focus { border-color: var(--sp-primary); }
.cm-asg-newform .cm-asg-eOk,
.cm-asg-newform .cm-asg-eCancel {
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    border-radius: var(--sp-radius-sm); cursor: pointer;
    border: 1px solid var(--sp-border);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cm-asg-newform .cm-asg-eOk { color: #fff; background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); }
.cm-asg-newform .cm-asg-eOk:hover { background: var(--sp-primary); border-color: var(--sp-primary); }
.cm-asg-newform .cm-asg-eCancel { background: none; color: var(--sp-text-muted); }
.cm-asg-newform .cm-asg-eCancel:hover { color: var(--sp-text); background: rgba(120,120,120,0.10); }

/* ============ Kiralama Yönetimi — Zenginleştirilmiş Müşteri Kartları ============ */
.cm-card {
    display: flex; flex-direction: column; gap: 9px;
    padding: 14px 16px;
}
.cm-card-head { display: flex; align-items: center; gap: 9px; }
.cm-dot {
    flex: none; width: 9px; height: 9px; border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.cm-dot-live    { background: #10b981; }                                /* yeşil */
.cm-dot-pending { background: #f59e0b; animation: cm-pulse 1.6s infinite; }  /* amber pulse */
.cm-dot-new     { background: #3b82f6; }                                /* mavi */
.cm-dot-empty   { background: var(--sp-text-muted); opacity: 0.45; }    /* gri */
@keyframes cm-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.45); } 50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); } }

.cm-card-name {
    flex: 1; min-width: 0;
    font-size: 14.5px; font-weight: 700; color: var(--sp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-card-badges { flex: none; display: flex; gap: 5px; }
.cm-card-badge {
    font-size: 10px; font-weight: 700;
    padding: 2px 9px; border-radius: 999px;
}
.cm-badge-ok  { color: #0f7b3f; background: rgba(16,185,129,0.16); }
.cm-badge-new { color: #1e40af; background: rgba(59,130,246,0.16); }

.cm-card-contact {
    font-size: 12px; color: var(--sp-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cm-card-metrics {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; padding: 10px 0;
    border-top: 1px solid var(--sp-border);
    border-bottom: 1px solid var(--sp-border);
}
.cm-metric { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cm-metric-val {
    font-size: 16px; font-weight: 700; color: var(--sp-text);
    line-height: 1.1;
}
.cm-metric-lbl {
    font-size: 10.5px; color: var(--sp-text-muted);
    text-transform: lowercase; letter-spacing: 0.2px;
}
/* Orta sütun (fırsat) öne çıkarılır */
.cm-metric-key .cm-metric-val {
    color: var(--sp-primary-dark);
    font-size: 17px;
}
.cm-metric-key .cm-metric-lbl {
    color: var(--sp-primary-dark); font-weight: 600;
}

.cm-card-dates {
    font-size: 10.5px; color: var(--sp-text-muted);
    margin-top: -2px;
}

/* ============ Kart tıklanabilirlik affordance ============ */
.cm-card { position: relative; padding-right: 32px; }
.cm-card-chev {
    position: absolute; top: 50%; right: 12px;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    color: var(--sp-text-muted); opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.cm-card-click { transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.cm-card-click:hover { transform: translateY(-1px); }
.cm-card-click:hover .cm-card-chev {
    opacity: 1; color: var(--sp-primary-dark);
    transform: translateY(-50%) translateX(3px);
}
.cm-card-click:active { transform: translateY(0); }

/* ============ Kompakt müşteri kartı (yeni tasarım) ============
   Anchor olarak render edilir, click direkt /SupplierPortal/MusteriDetay/{id}
   tam sayfasını açar. Tek satır mantığı: dot + (ad + stat) + (tarih + chev).
   Yükseklik ~58px — eski "büyük kart" yaklaşık 3 misli yer kaplıyordu. */
.cm-card.cm-card-compact {
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    padding: 14px 44px 14px 18px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}
/* Sol köşede ince accent şerit — kart kimliği güçlensin */
.cm-card.cm-card-compact::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(245,158,11,0.4), rgba(245,158,11,0.05));
    opacity: 0.7;
    transition: opacity 0.2s ease, width 0.2s ease;
}
.cm-card.cm-card-compact:hover::before {
    width: 4px;
    opacity: 1;
    background: linear-gradient(180deg, rgba(245,158,11,0.85), rgba(245,158,11,0.25));
}
.cm-card.cm-card-compact .cm-dot {
    flex: none;
    margin-top: 4px;     /* baş hizalansın */
}
.cm-card-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.cm-card-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cm-card.cm-card-compact .cm-card-name {
    font-size: 14.5px;
    font-weight: 700;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.1px;
}

/* KPI şeridi (yeni) — bilgilendirici rozet seti */
.cm-card-kpi {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.cm-kpi {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    background: var(--sp-bg-body);
    border: 1px solid var(--sp-border);
    color: var(--sp-text-muted);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cm-kpi svg { width: 12px; height: 12px; flex: none; }
.cm-kpi b { font-weight: 800; color: var(--sp-text); }
.cm-kpi-ok {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.35);
    color: #047857;
}
.cm-kpi-ok b { color: #047857; }
.cm-kpi-info {
    background: rgba(59, 130, 246, 0.09);
    border-color: rgba(59, 130, 246, 0.30);
    color: #1e40af;
}
.cm-kpi-info b { color: #1e40af; }
.cm-kpi-warn {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #b45309;
}
.cm-kpi-warn b { color: #b45309; }
.cm-kpi-opp {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.4);
    color: #b45309;
}
.cm-kpi-opp b { color: #b45309; }
.cm-kpi-mute {
    background: var(--sp-bg-body);
    border-color: var(--sp-border);
    color: var(--sp-text-muted);
}
.cm-kpi-audit {
    background: rgba(121, 123, 242, 0.08);
    border-color: rgba(121, 123, 242, 0.30);
    color: #4f46e5;
    cursor: help;
}
.cm-kpi-audit b { color: #4f46e5; }
.cm-card.cm-card-compact:hover .cm-kpi-audit { border-color: rgba(121, 123, 242, 0.6); }

/* Kart hover'da KPI'lar parlasın */
.cm-card.cm-card-compact:hover .cm-kpi { border-color: var(--sp-border-strong, var(--sp-border)); }
.cm-card.cm-card-compact:hover .cm-kpi-ok { border-color: rgba(16, 185, 129, 0.6); }
.cm-card.cm-card-compact:hover .cm-kpi-info { border-color: rgba(59, 130, 246, 0.55); }
.cm-card.cm-card-compact:hover .cm-kpi-warn { border-color: rgba(245, 158, 11, 0.6); }
.cm-card.cm-card-compact:hover .cm-kpi-opp { border-color: rgba(245, 158, 11, 0.7); }

/* Eski .cm-card-stat backward-compat (başka yerde kullanılıyorsa kalsın) */
.cm-card-stat {
    font-size: 11.5px;
    color: var(--sp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════════════
   HERO KART — Kiralama Yönetimi modülün ana yüzü
   Ferah, görsel, sunum-kalite. Avatar + ad + statü + 3 KPI tile + audit footer.
   Click: anchor href → /SupplierPortal/MusteriDetay/{id}
   ════════════════════════════════════════════════════════════════════ */
/* HERO kart v2 — sıkı, şık, harmonik. ~110-120px. Pill tabanlı, tile yok. */
.cm-card.cm-card-hero {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
        "avatar header  date"
        "avatar mydef   date"
        "avatar lead    chev"
        "avatar metrics chev";
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
    padding: 14px 16px;          /* base .cm-card padding-right 32px override */
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    transition: transform 0.16s ease, box-shadow 0.18s ease, border-color 0.16s ease;
}
.cm-card.cm-card-hero::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 2px;
    background: rgba(245, 158, 11, 0.45);
    border-radius: 0 2px 2px 0;
    transition: width 0.18s ease, background-color 0.18s ease, top 0.18s ease, bottom 0.18s ease;
}
.cm-card.cm-card-hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(245, 158, 11, 0.30);
    border-color: rgba(245, 158, 11, 0.45);
}
.cm-card.cm-card-hero:hover::before { width: 3px; top: 0; bottom: 0; background: #f59e0b; }

/* Avatar — küçük, kare-radius */
.cm-hero-avatar {
    grid-area: avatar;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    align-self: start;
    margin-top: 2px;
}

/* Header sırası: ad + statü (tek satır, inline) */
.cm-hero-head {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.cm-hero-title-block { display: contents; }   /* eski markup uyum — title-block tek satıra düşer */
.cm-hero-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}
.cm-hero-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sp-text);
    letter-spacing: -0.15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
}
.cm-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1.5px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex: none;
}
.cm-hero-status-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.cm-hero-status.cm-dot-live { background: rgba(16,185,129,0.12); color: #047857; }
.cm-hero-status.cm-dot-live .cm-hero-status-dot { background: #10b981; }
.cm-hero-status.cm-dot-pending { background: rgba(245,158,11,0.14); color: #b45309; }
.cm-hero-status.cm-dot-pending .cm-hero-status-dot { background: #f59e0b; animation: cm-pulse 1.6s infinite; }
.cm-hero-status.cm-dot-new { background: rgba(59,130,246,0.12); color: #1e40af; }
.cm-hero-status.cm-dot-new .cm-hero-status-dot { background: #3b82f6; }
.cm-hero-status.cm-dot-empty { background: rgba(107,114,128,0.10); color: var(--sp-text-muted); }
.cm-hero-status.cm-dot-empty .cm-hero-status-dot { background: var(--sp-text-muted); }

.cm-hero-badge {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1.5px 7px;
    border-radius: 999px;
    background: #3b82f6;
    color: #fff;
    letter-spacing: 0.3px;
    flex: none;
}

/* mydef rozeti — header'ın altında subtle bant */
.cm-hero-mydef {
    grid-area: mydef;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 11.5px;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    align-self: start;
    color: var(--sp-text-muted);
}
.cm-hero-mydef-icon { font-size: 12px; opacity: 0.85; }
.cm-hero-mydef-shortname {
    font-weight: 600;
    color: var(--sp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.cm-hero-mydef-name {
    font-weight: 400;
    color: var(--sp-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.cm-hero-mydef-id {
    color: var(--sp-text-muted);
    padding-left: 7px;
    border-left: 1px solid var(--sp-border);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 10.5px;
}
.cm-hero-mydef-id b { color: #797bf2; font-weight: 700; }

/* Metrics satırı — inline pill'ler (KPI + audit) */
.cm-hero-kpis {
    grid-area: metrics;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    margin-top: 1px;
}
.cm-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--sp-text-muted);
    background: transparent;
    border: 1px solid transparent;
    line-height: 1.3;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cm-pill svg { width: 12px; height: 12px; flex: none; opacity: 0.85; }
.cm-pill b { font-weight: 700; color: var(--sp-text); }
.cm-pill.pill-ok { color: #047857; background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.20); }
.cm-pill.pill-ok b { color: #047857; }
.cm-pill.pill-info { color: #1e40af; background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.18); }
.cm-pill.pill-info b { color: #1e40af; }
.cm-pill.pill-warn { color: #b45309; background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); }
.cm-pill.pill-warn b { color: #b45309; }
.cm-pill.pill-opp { color: #b45309; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.30); }
.cm-pill.pill-opp b { color: #b45309; }
.cm-pill.pill-mute { color: var(--sp-text-muted); }

/* Audit pill — küçük, subtle separator + ufak ikon */
.cm-pill-audit {
    color: var(--sp-text-muted);
    background: transparent;
    border: 0;
    padding: 3px 0;
    border-left: 1px solid var(--sp-border);
    padding-left: 10px;
    margin-left: 2px;
    font-size: 11px;
}
.cm-pill-audit svg { opacity: 0.6; }
.cm-pill-audit b { color: var(--sp-text); font-weight: 600; }
.cm-pill-audit em {
    font-style: normal;
    color: var(--sp-text-muted);
    margin-left: 4px;
    font-size: 10.5px;
}
.cm-pill-audit.audit-accepted svg { color: #10b981; opacity: 0.9; }

/* Sağ üstte tarih (tek satır, küçük) */
.cm-hero-date {
    grid-area: date;
    align-self: start;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    white-space: nowrap;
}

/* Sağ altta chevron */
.cm-hero-chev {
    grid-area: chev;
    width: 18px;
    height: 18px;
    color: var(--sp-text-muted);
    opacity: 0.5;
    align-self: end;
    justify-self: end;
    margin-bottom: 1px;
    transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.cm-card.cm-card-hero:hover .cm-hero-chev {
    color: #f59e0b;
    opacity: 1;
    transform: translateX(3px);
}

/* Müşterilerim kartı — "Müşterideki Tanımım" rozeti (Firma Kısa Ad · Ünvan · ID) */
.cm-card-mydef {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 9px;
    background: rgba(121,123,242,.10);
    border: 1px solid rgba(121,123,242,.30);
    border-radius: 5px;
    font-size: 11.5px;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    align-self: flex-start;
}
.cm-card-mydef-icon { font-size: 11px; }
.cm-card-mydef-shortname {
    font-weight: 700;
    color: var(--sp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.cm-card-mydef-name {
    font-weight: 500;
    color: var(--sp-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.cm-card-mydef-id {
    color: var(--sp-text-muted);
    padding-left: 6px;
    border-left: 1px solid var(--sp-border);
}
.cm-card-mydef-id b {
    color: #797bf2;
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.cm-card-aside {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 14px;     /* chev için yer */
}
.cm-card-aside .cm-since {
    font-size: 11px;
    color: var(--sp-text-muted);
    white-space: nowrap;
    margin-top: 0;
}
/* Kompakt rozetler — büyük "Aktif/Yeni" pill yerine sadece "Yeni" küçük chip */
.cm-card.cm-card-compact .cm-card-badge {
    font-size: 9.5px;
    padding: 1px 7px;
    flex: none;
}

/* ============================================================
   SÜRÜCÜ PERFORMANS POPUP (Hangfire daily aggregate)
   ============================================================ */
.dp-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 13000; display: none; align-items: center; justify-content: center; padding: 24px; }
.dp-overlay.show { display: flex; }
.dp-modal { background: var(--sp-bg-card); border-radius: 14px; width: 720px; max-width: 95vw; max-height: 92vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.4); position: relative; }
.dp-x { position: absolute; top: 12px; right: 14px; background: transparent; border: 0; font-size: 22px; color: var(--sp-text-muted); cursor: pointer; padding: 4px 10px; border-radius: 6px; z-index: 2; transition: background-color .15s ease, color .15s ease; }
.dp-x:hover { background: var(--sp-bg-input); color: var(--sp-text); }
.dp-body { padding: 20px 22px; }

.dp-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px; color: var(--sp-text-muted); font-size: 13px; }
.dp-spinner { width: 36px; height: 36px; border: 3px solid var(--sp-border); border-top-color: var(--sp-primary); border-radius: 50%; animation: dp-spin 0.8s linear infinite; }
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-empty { text-align: center; padding: 24px; color: var(--sp-text-muted); font-size: 13px; background: var(--sp-bg-input); border-radius: 8px; }
.dp-empty small { display: block; margin-top: 6px; color: var(--sp-text-muted); font-size: 11px; }

/* Hero card */
.dp-hero { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 16px; align-items: center; padding: 18px; background: linear-gradient(135deg, rgba(245, 158, 11, .05), rgba(245, 158, 11, 0)); border-radius: 12px; border: 1px solid var(--sp-border); }
.dp-hero-side { text-align: center; }
.dp-avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; overflow: hidden; }
.dp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dp-avatar svg { width: 28px; height: 28px; }
.dp-driver-name { font-size: 14px; font-weight: 700; color: var(--sp-text); }
.dp-driver-plate { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }
.dp-hero-score { position: relative; width: 130px; height: 130px; margin: 0 auto; }
.dp-ring { width: 100%; height: 100%; }
.dp-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dp-ring-value { font-size: 32px; font-weight: 800; line-height: 1; }
.dp-ring-max { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }
.dp-hero-meta { text-align: center; }
.dp-grade { display: inline-flex; flex-direction: column; padding: 10px 16px; border-radius: 10px; color: #fff; }
.dp-grade-letter { font-size: 24px; font-weight: 800; line-height: 1; }
.dp-grade-label { font-size: 10px; letter-spacing: .5px; margin-top: 2px; opacity: .92; }
.dp-trend { margin-top: 10px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 12px; display: inline-block; }
.dp-trend.up { background: rgba(16, 185, 129, .14); color: #059669; }
.dp-trend.down { background: rgba(239, 68, 68, .14); color: #dc2626; }

/* Sections */
.dp-section { margin-top: 18px; }
.dp-sec-h { margin: 0 0 10px; font-size: 11px; letter-spacing: .5px; color: var(--sp-text-muted); font-weight: 700; }

/* Categories (4 bar) */
.dp-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dp-cat { padding: 10px 12px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 8px; }
.dp-cat-h { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sp-text); }
.dp-cat-h svg { width: 16px; height: 16px; flex-shrink: 0; }
.dp-cat-h span { flex: 1; font-weight: 600; }
.dp-cat-h b { font-size: 14px; font-weight: 800; }
.dp-cat-bar { margin-top: 6px; height: 6px; background: var(--sp-bg-card); border-radius: 3px; overflow: hidden; border: 1px solid var(--sp-border); }
.dp-cat-bar span { display: block; height: 100%; transition: width .5s ease; }

/* Stats (30 gün) */
.dp-stats { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
.dp-stat { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 8px; }
.dp-stat svg { width: 18px; height: 18px; flex-shrink: 0; }
.dp-stat b { display: block; font-size: 16px; font-weight: 800; color: var(--sp-text); line-height: 1.1; }
.dp-stat span { display: block; font-size: 10.5px; color: var(--sp-text-muted); letter-spacing: .3px; }
.dp-stat.red b { color: #dc2626; }

/* Comparison */
.dp-cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 14px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 8px; }
.dp-cmp > div { text-align: center; }
.dp-cmp span { display: block; font-size: 11px; color: var(--sp-text-muted); }
.dp-cmp b { display: block; font-size: 20px; font-weight: 800; color: var(--sp-text); margin-top: 2px; }
.dp-cmp-vs { font-weight: 800; font-size: 14px; }
.dp-cmp-vs.up { color: #059669; }
.dp-cmp-vs.down { color: #dc2626; }
.dp-rank { margin-top: 10px; padding: 8px 12px; background: rgba(245, 158, 11, .08); border-radius: 8px; text-align: center; font-size: 12px; color: var(--sp-text); }
.dp-rank b { color: var(--sp-primary-dark); font-size: 14px; }

/* Events */
.dp-events { list-style: none; padding: 0; margin: 0; max-height: 220px; overflow-y: auto; }
.dp-events li { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px dashed var(--sp-border); }
.dp-events li:last-child { border-bottom: 0; }
.dp-ev-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.dp-ev-ttl { font-size: 12.5px; font-weight: 600; color: var(--sp-text); }
.dp-ev-sub { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }

/* ============ Bana Tanımlı Filo — dxDataGrid'e geçiş ============ */
.cm-veh-grid { flex: 1; min-height: 0; margin-bottom: 14px; }
.cm-veh-grid .cm-imp-btn { margin: 0; }

/* cm-veh-bar içindeki aktarma butonları (eski cm-veh-tools yerine) */
.cm-veh-bar .cm-imp-sel,
.cm-veh-bar .cm-imp-all {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; font-size: 11px; font-weight: 600;
    border-radius: var(--sp-radius-sm); cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}
.cm-veh-bar .cm-imp-sel svg,
.cm-veh-bar .cm-imp-all svg { width: 12px; height: 12px; }
.cm-veh-bar .cm-imp-all { margin-left: 6px; }
.cm-veh-bar .cm-imp-sel {
    color: #fff; background: var(--sp-primary-dark); border: 1px solid var(--sp-primary-dark);
}
.cm-veh-bar .cm-imp-sel:hover:not(:disabled) { background: var(--sp-primary); border-color: var(--sp-primary); }
.cm-veh-bar .cm-imp-sel:disabled { opacity: 0.45; cursor: default; }
.cm-veh-bar .cm-imp-all {
    color: var(--sp-primary-dark); background: rgba(245,158,11,0.12);
    border: 1px solid var(--sp-border);
}
.cm-veh-bar .cm-imp-all:hover:not(:disabled) { background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); color: #fff; }

/* grid durum hücresi rozetleri */
.cm-g-badge { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.cm-g-badge.ok   { color: #0f7b3f; background: rgba(16,185,129,0.16); }
.cm-g-badge.mut  { color: var(--sp-text-muted); background: rgba(120,120,120,0.14); }
.cm-g-badge.none { color: var(--sp-text-muted); }
.cm-g-done  { color: var(--sp-text-muted); }
.cm-g-plate { font-weight: 700; }

/* ============================================================
   FİLO ŞOFÖR PERFORMANS RAPORU — Canlı Takip modal (fr- prefix)
   ============================================================ */
/* Filo Performans Raporu — sağ kenar tam-boy panel (slide-in) */
.fr-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 13500; display: none; align-items: stretch; justify-content: flex-end; }
.fr-overlay.show { display: flex; }
.fr-modal {
    background: var(--sp-bg-card); width: 580px; max-width: 96vw; height: 100%;
    display: flex; flex-direction: column; overflow: visible;
    box-shadow: -14px 0 40px rgba(0, 0, 0, .25);
    transform: translateX(100%); animation: fr-slide-in .25s cubic-bezier(.4,0,.2,1) forwards;
    position: relative;
}
@keyframes fr-slide-in { to { transform: translateX(0); } }
.fr-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(180deg, rgba(245, 158, 11, .06), transparent); border-bottom: 1px solid var(--sp-border); }
.fr-head-l { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--sp-text); }
.fr-head-l svg { width: 18px; height: 18px; color: var(--sp-primary); }
.fr-period { display: flex; gap: 4px; margin-left: auto; }
.fr-period-btn { border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text-muted); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 6px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.fr-period-btn:hover { background: var(--sp-bg-hover); }
.fr-period-btn.active { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.fr-x { background: transparent; border: 0; font-size: 20px; color: var(--sp-text-muted); cursor: pointer; padding: 4px 9px; border-radius: 6px; transition: background-color .15s ease; }
.fr-x:hover { background: var(--sp-bg-input); color: var(--sp-text); }
.fr-body { padding: 16px; overflow-y: auto; }
.fr-loading, .fr-empty { padding: 36px; text-align: center; color: var(--sp-text-muted); font-size: 13px; }
.fr-empty small { color: var(--sp-text-muted); font-size: 11px; }

.fr-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fr-kpi { background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 8px; padding: 11px 12px; text-align: center; }
.fr-kpi b { display: block; font-size: 19px; font-weight: 800; color: var(--sp-text); line-height: 1.15; }
.fr-kpi span { font-size: 10.5px; color: var(--sp-text-muted); letter-spacing: .3px; }
.fr-period-label { font-size: 11px; color: var(--sp-text-muted); margin-top: 6px; }

.fr-sec { font-size: 11px; letter-spacing: .6px; color: var(--sp-text-muted); font-weight: 700; margin: 18px 0 8px; }

.fr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fr-table thead th { text-align: left; padding: 7px 10px; font-size: 10.5px; letter-spacing: .3px; color: var(--sp-text-muted); border-bottom: 2px solid var(--sp-border); }
.fr-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--sp-border); color: var(--sp-text); }
.fr-table tbody tr:hover { background: rgba(245, 158, 11, .05); }
.fr-table .fr-row-risk { background: rgba(239, 68, 68, .05); }
.fr-rank { font-weight: 800; color: var(--sp-text-muted); width: 36px; }
.fr-driver { font-weight: 700; }
.fr-plate { color: var(--sp-text-muted); }
.fr-score { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.fr-bar { flex: 1; height: 6px; background: var(--sp-bg-input); border-radius: 3px; overflow: hidden; border: 1px solid var(--sp-border); }
.fr-bar span { display: block; height: 100%; }
.fr-score b { font-size: 13px; min-width: 26px; text-align: right; }
.fr-grade { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; }

.fr-trend { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 8px 4px 0; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 8px; }
.fr-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.fr-trend-val { font-size: 11px; font-weight: 700; color: var(--sp-text); }
.fr-trend-bar { width: 100%; max-width: 48px; border-radius: 3px 3px 0 0; min-height: 4px; }
.fr-trend-lbl { font-size: 9.5px; color: var(--sp-text-muted); }

/* ============================================================
   EVRAK BİLDİRİMLERİ — Canlı Takip sağ kenar paneli (CCP ccp-notif deseni)
   ============================================================ */
.lt-notif-trigger { position: relative; }
.lt-notif-badge {
    position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 9px; background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
}
.lt-notif-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw; z-index: 13800;
    background: var(--sp-bg-card); border-left: 1px solid var(--sp-border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, .14);
    transform: translateX(100%); opacity: 0; pointer-events: none;
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease;
    display: flex; flex-direction: column;
}
.lt-notif-panel.show { transform: translateX(0); opacity: 1; pointer-events: auto; }
.lt-notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid var(--sp-border);
    background: linear-gradient(180deg, rgba(245, 158, 11, .07), transparent);
}
.lt-notif-head-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--sp-text); }
.lt-notif-head-title svg { width: 17px; height: 17px; color: var(--sp-primary); }
.lt-notif-x { background: transparent; border: 0; font-size: 17px; color: var(--sp-text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background-color .15s ease; }
.lt-notif-x:hover { background: var(--sp-bg-input); color: var(--sp-text); }

.lt-notif-tabs { display: flex; border-bottom: 1px solid var(--sp-border); }
.lt-notif-tab { flex: 1; background: transparent; border: 0; padding: 10px; font-size: 12.5px; font-weight: 600; color: var(--sp-text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.lt-notif-tab:hover { color: var(--sp-text); }
.lt-notif-tab.active { color: var(--sp-primary); border-bottom-color: var(--sp-primary); }

.lt-notif-body { flex: 1; overflow-y: auto; }
.lt-notif-content { display: none; padding: 10px; }
.lt-notif-content.active { display: block; }
.lt-notif-loading { padding: 28px; text-align: center; color: var(--sp-text-muted); font-size: 12.5px; }
.lt-notif-ok { padding: 24px; text-align: center; color: #059669; font-size: 13px; font-weight: 600; }

/* KPI bandı — 5 stat */
.lt-notif-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 10px; }
.lt-notif-stat { text-align: center; padding: 7px 2px; border-radius: 6px; border: 1px solid var(--sp-border); background: var(--sp-bg-input); }
.lt-notif-stat b { display: block; font-size: 16px; font-weight: 800; line-height: 1.1; }
.lt-notif-stat span { font-size: 9px; color: var(--sp-text-muted); letter-spacing: .2px; }
.lt-notif-stat.expired b { color: #ef4444; }
.lt-notif-stat.critical b { color: #f97316; }
.lt-notif-stat.warning b { color: #ca8a04; }
.lt-notif-stat.normal b { color: #059669; }
.lt-notif-stat.empty b { color: #6b7280; }

/* Accordion item */
.lt-notif-item { border: 1px solid var(--sp-border); border-left-width: 3px; border-radius: 7px; margin-bottom: 6px; overflow: hidden; }
.lt-notif-item-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; cursor: pointer; background: var(--sp-bg-card); transition: background-color .15s ease; }
.lt-notif-item-head:hover { background: var(--sp-bg-input); }
.lt-notif-item-name { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.lt-notif-item-count { min-width: 19px; height: 19px; line-height: 19px; text-align: center; border-radius: 10px; color: #fff; font-size: 10.5px; font-weight: 800; padding: 0 5px; }
.lt-notif-chev { width: 14px; height: 14px; color: var(--sp-text-muted); transition: transform .2s ease; }
.lt-notif-item.expanded .lt-notif-chev { transform: rotate(180deg); }
.lt-notif-item-docs { display: none; padding: 4px 11px 8px; }
.lt-notif-item.expanded .lt-notif-item-docs { display: block; }
.lt-notif-doc { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--sp-border); font-size: 12px; }
.lt-notif-doc:last-child { border-bottom: 0; }
.lt-notif-doc > span:first-child { color: var(--sp-text); }
.lt-notif-doc-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.lt-notif-doc-badge.expired { background: rgba(239, 68, 68, .14); color: #dc2626; }
.lt-notif-doc-badge.critical { background: rgba(249, 115, 22, .14); color: #ea580c; }
.lt-notif-doc-badge.warning { background: rgba(234, 179, 8, .16); color: #a16207; }
.lt-notif-doc-badge.normal { background: rgba(16, 185, 129, .12); color: #059669; }
.lt-notif-doc-badge.empty { background: var(--sp-bg-input); color: #6b7280; }

/* ============================================================
   CANLI TAKİP HEADER — ikon çubuğu + tooltip (lt-ico)
   ============================================================ */
.lt-top-r { display: flex; align-items: center; gap: 5px; }
.lt-ico-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 34px; min-width: 34px; padding: 0 8px;
    border: 1px solid var(--sp-border); background: var(--sp-bg-card); border-radius: 8px;
    color: var(--sp-text); cursor: pointer; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lt-ico-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.lt-ico-btn:hover { background: var(--sp-bg-input); border-color: var(--sp-primary); }
.lt-ico-info { cursor: default; }
/* Adres Defterine Ekle — yeşil tema (4.png referans, sağ-click context paterninin paraleli) */
.lt-ico-btn.lt-ico-addaddr {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.4);
}
.lt-ico-btn.lt-ico-addaddr:hover {
    background: rgba(16, 185, 129, 0.12);
    border-color: #10b981;
    color: #0f7b3f;
}
.lt-ico-btn.lt-ico-addaddr:active {
    background: rgba(16, 185, 129, 0.2);
}
.lt-ico-info:hover { background: var(--sp-bg-card); border-color: var(--sp-border); }
.lt-ico-mini { font-size: 12px; font-weight: 700; color: var(--sp-text); }
.lt-ico-sep { width: 1px; height: 20px; background: var(--sp-border); margin: 0 2px; }

/* Otomatik yenile toggle — açıkken amber */
.lt-ico-toggle:has(input:checked) { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.lt-ico-toggle:has(input:checked):hover { filter: brightness(.93); }

/* Tooltip — header altında açılır */
.lt-ico-btn[data-tip]:not([data-tip=""])::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 7px); right: 0;
    background: #1f2430; color: #fff; font-size: 11px; font-weight: 500;
    padding: 6px 10px; border-radius: 6px; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    opacity: 0; transform: translateY(-3px); pointer-events: none;
    transition: opacity .15s ease, transform .15s ease; z-index: 14000;
}
.lt-ico-btn[data-tip]:not([data-tip=""])::before {
    content: ''; position: absolute; top: calc(100% + 2px); right: 12px;
    border: 5px solid transparent; border-bottom-color: #1f2430;
    opacity: 0; transition: opacity .15s ease; pointer-events: none; z-index: 14000;
}
.lt-ico-btn[data-tip]:not([data-tip=""]):hover::after { opacity: 1; transform: translateY(0); }
.lt-ico-btn[data-tip]:not([data-tip=""]):hover::before { opacity: 1; }

/* Evrak badge ikon butonda */
.lt-ico-btn .lt-notif-badge { top: -5px; right: -5px; }

/* ============================================================
   HARİTA KATMANLARI — POI panel + marker + en yakın (lt-layers / lt-poi)
   ============================================================ */
.lt-layers-wrap { position: relative; display: inline-flex; }
.lt-layers-menu {
    position: absolute; top: calc(100% + 7px); right: 0; width: 270px; z-index: 14000;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 9px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 8px;
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    overflow: visible;   /* iç dropdown'lar (lt-zd-pop) taşabilsin */
}
.lt-layers-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lt-lm-sec { font-size: 10px; letter-spacing: .5px; color: var(--sp-text-muted); font-weight: 700; padding: 8px 6px 4px; }
.lt-lm-row { display: flex; align-items: center; gap: 7px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--sp-text); transition: background-color .12s ease; }
.lt-lm-row:hover { background: var(--sp-bg-input); }
.lt-lm-row input { cursor: pointer; margin: 0; }
.lt-lm-hint { font-size: 11px; color: var(--sp-text-muted); padding: 6px 8px; display: none; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.20); border-radius: 5px; margin-bottom: 6px; line-height: 1.4; }
/* Harita görünümü base layer — Sokak/Uydu kompakt yan-yana */
.lt-lm-baserow { display: flex; gap: 4px; padding: 2px 0 6px; }
.lt-lm-baseopt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 4px; font-size: 11.5px; cursor: pointer; border: 1px solid var(--sp-border); border-radius: 6px; transition: background-color .15s ease, border-color .15s ease; }
.lt-lm-baseopt:has(input:checked) { background: rgba(121, 123, 242, 0.12); border-color: #797bf2; font-weight: 600; }
.lt-lm-baseopt input { display: none; }
/* Sekmeli katman menüsü — yatay 4 tab */
.lt-lm-tabs { display: flex; gap: 2px; padding: 6px 0 4px; border-bottom: 1px solid var(--sp-border); margin-bottom: 6px; }
.lt-lm-tab { flex: 1; padding: 6px 4px; font-size: 11px; font-weight: 600; color: var(--sp-text-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.lt-lm-tab:hover { color: var(--sp-text-primary); }
.lt-lm-tab.is-active { color: #797bf2; border-bottom-color: #797bf2; }
.lt-lm-panel { display: block; }
.lt-lm-panel[hidden] { display: none; }
.lt-lm-zoomtip { font-size: 10.5px; color: #f59e0b; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.20); border-radius: 5px; padding: 5px 7px; margin-top: 6px; line-height: 1.4; }
.lt-lm-zoomtip b { color: #b45309; }
/* Layer button — aktif katman rozet sayısı */
.lt-ico-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #f59e0b; color: #fff;
    border-radius: 8px; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--sp-bg-card);
    line-height: 1;
}
/* Katman label sağında canlı sayım/state göstergesi */
.lt-lm-state {
    margin-left: auto; font-size: 10.5px; font-weight: 600;
    padding: 1px 6px; border-radius: 3px;
    display: inline-flex; align-items: center; gap: 3px;
}
.lt-lm-state.is-loading { color: #f59e0b; }
.lt-lm-state.is-loading .lt-spin { animation: lt-spin 0.8s linear infinite; display: inline-block; }
.lt-lm-state.is-ok      { color: #10b981; background: rgba(16, 185, 129, 0.10); }
.lt-lm-state.is-empty   { color: var(--sp-text-muted); background: rgba(0,0,0,0.04); }
.lt-lm-state.is-warn    { color: #b91c1c; background: rgba(220, 38, 38, 0.08); }
.lt-lm-row { position: relative; overflow: hidden; }
/* Yükleniyor satırında shimmer efekti — kullanıcı sistemin çalıştığını hisseder */
.lt-lm-row.is-loading::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.18), transparent);
    animation: lt-shimmer 1.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lt-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lt-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/* Üstte global progress bar — Overpass yüklenirken çıkar (YouTube tarzı kırmızı şerit) */
.lt-lm-progress {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, #f59e0b, #797bf2, #10b981, transparent);
    background-size: 50% 100%;
    animation: lt-progress 1.5s linear infinite;
    border-radius: 9px 9px 0 0;
    display: none;
}
.lt-layers-menu.is-busy .lt-lm-progress { display: block; }
@keyframes lt-progress {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}
/* Map sol-üst DİKEY toolbar — Google Maps draw tools tarzı (12.png referans) */
.lt-vtb {
    position: absolute; top: 12px; left: 12px; z-index: 405;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: rgba(255, 255, 255, 0.97); border: 1px solid var(--sp-border);
    border-radius: 10px; padding: 4px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    width: 42px;
}
.lt-vtb-btn {
    width: 34px; height: 34px; padding: 0;
    background: transparent; border: 1px solid transparent; border-radius: 7px;
    color: #475569; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lt-vtb-btn:hover { background: rgba(245, 158, 11, 0.10); color: #b45309; }
.lt-vtb-btn.is-active { background: #f59e0b; color: #fff; }
.lt-vtb-btn svg { width: 17px; height: 17px; }
.lt-vtb-sep { width: 24px; height: 1px; background: var(--sp-border); margin: 2px 0; }
/* Zoom kompakt rozet — sayı + 2-satır mesaj */
.lt-vtb-zoom {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    width: 34px; padding: 4px 0; border-radius: 7px;
    background: rgba(0,0,0,0.04); color: #475569;
    text-align: center; line-height: 1.1;
}
.lt-vtb-zoom b { font-size: 14px; font-weight: 700; color: #1f2937; }
.lt-vtb-zoom-msg { font-size: 8.5px; opacity: 0.75; margin-top: 1px; }
.lt-vtb-zoom.is-ready { background: rgba(16, 185, 129, 0.18); color: #065f46; }
.lt-vtb-zoom.is-ready b { color: #065f46; }
.lt-vtb-zoom.is-near { background: rgba(245, 158, 11, 0.20); color: #92400e; }
.lt-vtb-zoom.is-near b { color: #92400e; }
/* Üst-orta busy chip — yükleme bilgisi (toolbar dışında, dikkat çeker) */
.lt-busychip {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    z-index: 406;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 20px;
    background: rgba(31, 41, 55, 0.92); color: #fff;
    font-size: 12px; font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.lt-busychip .lt-spin { animation: lt-spin 0.8s linear infinite; display: inline-block; }
.lt-poi-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lt-poi-dot.fuel { background: #f59e0b; }
.lt-poi-dot.restaurant { background: #ef4444; }
.lt-poi-dot.rest { background: #3b82f6; }
.lt-poi-dot.repair { background: #8b5cf6; }
/* Uluslararası nakliye dotları */
/* ============ Araçlar toggle + Alan Seç dropdown (toolbar) ============ */
.lt-ico-veh.active { background: rgba(16, 185, 129, 0.12); border-color: #10b981; color: #0f7b3f; }
.lt-ico-veh:not(.active) { opacity: 0.55; }

.lt-area-wrap { position: relative; display: inline-flex; }
.lt-area-menu {
    position: absolute; top: 100%; right: 0; margin-top: 6px;
    min-width: 200px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    padding: 8px;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 600;
}
.lt-area-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lt-area-head { font-size: 11px; font-weight: 700; color: var(--sp-text-muted); letter-spacing: 0.4px; padding: 4px 8px; }
.lt-area-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 10px;
    border: 1px solid transparent; background: transparent;
    border-radius: 5px; color: var(--sp-text); font-size: 12.5px;
    cursor: pointer; text-align: left;
    transition: background-color .15s ease;
}
.lt-area-item:hover { background: var(--sp-bg-input); border-color: var(--sp-primary, #f59e0b); }
.lt-area-item svg { width: 14px; height: 14px; color: var(--sp-primary, #f59e0b); }
.lt-area-hint { font-size: 10.5px; color: var(--sp-text-muted); padding: 6px 10px 2px; line-height: 1.5; }

/* Çizim modu aktif iken cursor + overlay ipucu */
.lt-map.lt-draw-active { cursor: crosshair; }

/* Floating harita kontrolü — CanliTakip sol-alt (Lokasyonlar lt-mapctrl paterni) */
.lt-mapctrl {
    position: absolute; bottom: 16px; left: 16px;
    display: flex; flex-direction: column; gap: 4px;
    z-index: 401;
}
.lt-mapctrl-btn {
    width: 36px; height: 36px; padding: 0;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 6px;
    color: var(--sp-text-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
    transition: background-color .15s ease, color .15s ease;
}
.lt-mapctrl-btn:hover { background: var(--sp-bg-input); color: #0f172a; }
.lt-mapctrl-btn svg { width: 16px; height: 16px; }
/* lt-mapctrl içindeki area-menu yukarı-sağa açılsın (sol-alt köşede olduğu için) */
.lt-mapctrl .lt-area-menu { top: auto; bottom: calc(100% + 6px); right: auto; left: 0; margin-top: 0; }

/* ============ Alan Seç sağ drawer (.lt-sel-drawer) ============ */
.lt-sel-drawer {
    position: absolute; top: 12px; right: 12px;
    width: 340px; max-height: calc(100% - 24px);
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
    display: flex; flex-direction: column;
    opacity: 0; transform: translateX(12px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 850;   /* lt-side2 (800) üstünde olsun ki sağ panel kapalı/açık fark etmesin */
}
.lt-sel-drawer[aria-hidden="false"] { opacity: 1; transform: translateX(0); pointer-events: auto; }
.lt-sel-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sp-border);
    background: linear-gradient(90deg, rgba(245,158,11,0.07), transparent);
}
.lt-sel-head svg { width: 14px; height: 14px; color: var(--sp-primary, #f59e0b); }
.lt-sel-head h4 { flex: 1; margin: 0; font-size: 13px; font-weight: 700; color: var(--sp-text); }
.lt-sel-close {
    width: 22px; height: 22px; padding: 0;
    border: 0; background: transparent;
    color: var(--sp-text-muted); font-size: 16px; line-height: 1;
    cursor: pointer; border-radius: 4px;
}
.lt-sel-close:hover { background: var(--sp-bg-input); color: #ef4444; }

.lt-sel-summary {
    padding: 8px 14px;
    font-size: 12px; color: var(--sp-text-muted);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
/* Tip eşleştirme bölümü — drawer içinde POI kategorisi → adres tipi mapping */
.lt-sel-map { padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,0.04); background: var(--sp-bg-input); }
.lt-sel-map-title { font-size: 11px; font-weight: 600; color: var(--sp-text-muted); letter-spacing: 0.4px; margin-bottom: 8px; }
.lt-sel-map-rows { display: flex; flex-direction: column; gap: 6px; }
.lt-sel-map-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--sp-bg-card); border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; }
.lt-sel-map-row .lt-sel-map-cat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; min-width: 110px; }
.lt-sel-map-row .lt-sel-map-cat b { font-size: 11px; color: var(--sp-text-muted); font-weight: 500; }
.lt-sel-map-row select, .lt-sel-map-row input.lt-sel-map-newname {
    flex: 1 1 auto; min-width: 100px; padding: 4px 8px; font-size: 12px;
    border: 1px solid rgba(0,0,0,0.10); border-radius: 4px;
    background: var(--sp-bg-card); color: var(--sp-text-primary);
}
.lt-sel-map-row input.lt-sel-map-newname { background: #fff7ed; border-color: #f59e0b; }
.lt-sel-map-row select:focus, .lt-sel-map-row input.lt-sel-map-newname:focus { outline: none; border-color: #797bf2; box-shadow: 0 0 0 2px rgba(121,123,242,0.15); }
.lt-sel-map-hint { font-size: 10.5px; color: var(--sp-text-muted); margin-top: 6px; line-height: 1.35; }
.lt-sel-map-hint b { color: #f59e0b; }
.lt-sel-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 14px; border-bottom: 1px solid rgba(0,0,0,0.04); }
.lt-sel-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border: 1px solid rgba(0,0,0,0.06);
    background: var(--sp-bg-card);
    color: var(--sp-text-muted);
    border-radius: 999px; font-size: 11px; font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lt-sel-chip:hover { background: var(--sp-bg-input); }
.lt-sel-chip.active { background: var(--sp-primary, #f59e0b); border-color: var(--sp-primary, #f59e0b); color: #fff; }

.lt-sel-allrow { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid rgba(0,0,0,0.04); }
.lt-sel-allchk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sp-text); cursor: pointer; }
.lt-sel-count { font-size: 11px; color: var(--sp-text-muted); font-variant-numeric: tabular-nums; }

.lt-sel-list { flex: 1; overflow-y: auto; padding: 4px; max-height: 280px; }
.lt-sel-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 5px; cursor: pointer; }
.lt-sel-item:hover { background: var(--sp-bg-input); }
.lt-sel-item input { flex: none; }
.lt-sel-item-icon { width: 18px; text-align: center; }
.lt-sel-item-body { flex: 1; min-width: 0; }
.lt-sel-item-name { font-size: 12.5px; font-weight: 600; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-sel-item-meta { font-size: 10.5px; color: var(--sp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lt-sel-opts { padding: 8px 14px; border-top: 1px solid rgba(0,0,0,0.04); font-size: 11.5px; color: var(--sp-text-muted); }
.lt-sel-opts label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.lt-sel-foot { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--sp-border); background: var(--sp-bg-input); }
.lt-sel-foot .sp-btn { background: #10b981; border-color: #10b981; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.lt-sel-foot .sp-btn:hover { background: #0f7b3f; border-color: #0f7b3f; }
.lt-sel-foot .sp-btn svg { width: 13px; height: 13px; }

.lt-poi-dot.intl-border { background: #dc2626; }
.lt-poi-dot.intl-port   { background: #0369a1; }
.lt-poi-dot.intl-ferry  { background: #0d9488; }
.lt-poi-dot.intl-rail   { background: #7c3aed; }
.lt-poi-dot.intl-air    { background: #0891b2; }
.lt-poi-dot.intl-hub    { background: #f59e0b; }
.lt-poi-dot.intl-lez    { background: #be123c; }
/* AB lojistiği için ek POI dot renkleri */
.lt-poi-dot.truck_wash  { background: #0e7490; }
.lt-poi-dot.adblue      { background: #84cc16; }
.lt-poi-dot.charging    { background: #22c55e; }
.lt-poi-dot.safe_park   { background: #b91c1c; }
/* LEZ bölge pin'i — daha küçük, dashed border */
.lt-intl-pin.lt-lez-pin { width: 18px; height: 18px; border: 1.5px dashed rgba(255,255,255,0.7); }
.lt-lez-tip { background: #1f2937; color: #fff; font-size: 11px; padding: 4px 8px; border: 1px solid #be123c; border-radius: 4px; }

/* ============ Uluslararası nakliye marker + popup ============
   Statik küratör veri (intl_logistics_points.json) — Overpass değil. */
.lt-intl-mk { background: transparent; border: none; }
.lt-intl-pin {
    /* 2026-08-13: damla pin -> TAM DAIRE (POI marker'lariyla ayni dil), 32->22px */
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.lt-intl-sym {
    /* daire pin -> ters dondurme kaldirildi */
    font-size: 10px; line-height: 1;
}

.lt-intl-pop { min-width: 260px; max-width: 320px; }
.lt-intl-pop-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    margin: -10px -10px 8px;
    color: #fff;
    border-radius: 6px 6px 0 0;
}
.lt-intl-pop-sym { font-size: 18px; }
.lt-intl-pop-cat {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.5px;
}
.lt-intl-pop-body h4 {
    margin: 0 0 8px;
    font-size: 14px; font-weight: 700;
    color: var(--sp-text);
}
.lt-intl-pop-row {
    font-size: 12px; margin: 3px 0; color: var(--sp-text);
}
.lt-intl-pop-row b { color: var(--sp-text-muted); font-weight: 600; margin-right: 4px; }
.lt-intl-pop-notes {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--sp-bg-input);
    border-radius: 5px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
    line-height: 1.5;
    font-style: italic;
}
.lt-intl-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
.lt-intl-chip.rail { background: rgba(124, 58, 237, 0.13); color: #6b21a8; }
.lt-intl-pop-acts { margin-top: 10px; }
.lt-intl-pop-acts .lt-poi-btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lt-intl-pop-acts svg { width: 14px; height: 14px; }

/* POI marker (harita) */
.lt-poi-mk {
    width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35); color: #fff; font-size: 10px;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}

/* Sağ panel — Yakındaki Noktalar bloğu */
.lt-near { display: flex; flex-direction: column; gap: 2px; }
.lt-near-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; font-size: 12px; }
.lt-near-row .lt-poi-dot { width: 8px; height: 8px; }
.lt-near-lbl { flex: 1; color: var(--sp-text-muted); }
.lt-near-row b { color: var(--sp-text); font-weight: 700; }
.lt-near-name { font-size: 10.5px; color: var(--sp-text-muted); padding: 0 0 4px 15px; border-bottom: 1px dashed var(--sp-border); }
.lt-near-empty { font-size: 11.5px; color: var(--sp-text-muted); padding: 8px 4px; }

/* ============================================================
   POI DETAY SOL PANELİ — Flightradar deseni (lt-poi-side)
   ============================================================ */
.lt-poi-side {
    position: absolute; top: 0; left: 0; bottom: 0; width: 340px; max-width: 90vw; z-index: 850;
    background: var(--sp-bg-card); border-right: 1px solid var(--sp-border);
    box-shadow: 10px 0 30px rgba(0, 0, 0, .12);
    transform: translateX(-100%); opacity: 0; pointer-events: none;
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease;
    display: flex; flex-direction: column; overflow: visible;
}
.lt-poi-side.show { transform: translateX(0); opacity: 1; pointer-events: auto; }
.lt-poi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--sp-border); }
.lt-poi-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lt-poi-head-ico .lt-poi-mk { width: 30px; height: 30px; font-size: 14px; }
.lt-poi-head-name { font-size: 14px; font-weight: 800; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-poi-head-type { font-size: 11px; color: var(--sp-text-muted); }
.lt-poi-x { background: transparent; border: 0; font-size: 17px; color: var(--sp-text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background-color .15s ease; }
.lt-poi-x:hover { background: var(--sp-bg-input); color: var(--sp-text); }
.lt-poi-body { flex: 1; overflow-y: auto; }

.lt-poi-sv { height: 200px; background: var(--sp-bg-input); position: relative; transition: height .2s ease; }
.lt-poi-sv.sv-big { height: 420px; }
.lt-poi-sv-frame { width: 100%; height: 100%; border: 0; display: block; }
/* Street View panel içi büyüt/küçült butonu — sol üst (Google kontrolleri sağ üstte) */
.lt-sv-expand {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .55); border: 0; border-radius: 7px; cursor: pointer; color: #fff;
    transition: background-color .15s ease;
}
.lt-sv-expand:hover { background: rgba(0, 0, 0, .8); }
.lt-sv-expand svg { width: 15px; height: 15px; }
.lt-poi-sv-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--sp-text-muted); font-size: 11.5px; text-align: center; padding: 0 20px; }
.lt-poi-sv-empty svg { width: 30px; height: 30px; }

.lt-poi-rows { padding: 10px 14px; }
.lt-poi-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--sp-border); font-size: 12.5px; }
.lt-poi-row:last-child { border-bottom: 0; }
.lt-poi-row > span { color: var(--sp-text-muted); flex-shrink: 0; }
.lt-poi-row > b { color: var(--sp-text); font-weight: 600; text-align: right; word-break: break-word; }
.lt-poi-row a { color: var(--sp-primary-dark); text-decoration: none; }
.lt-poi-row a:hover { text-decoration: underline; }

.lt-poi-actions { display: flex; gap: 8px; padding: 10px 14px 14px; }
.lt-poi-btn { flex: 1; text-align: center; padding: 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--sp-border); background: var(--sp-bg-card); color: var(--sp-text); transition: background-color .15s ease, border-color .15s ease; }
.lt-poi-btn:hover { background: var(--sp-bg-input); border-color: var(--sp-primary); }
.lt-poi-btn.primary { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-poi-btn.primary:hover { filter: brightness(.93); background: var(--sp-primary); }
/* Adres Defterine Ekle — yeşil varyant (4.png referans, topbar #ltAddAddrBtn ile tutarli) */
.lt-poi-btn.lt-poi-addaddr {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.lt-poi-btn.lt-poi-addaddr:hover {
    background: #0f7b3f;
    border-color: #0f7b3f;
    filter: none;
}
.lt-poi-btn.lt-poi-addaddr svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ============================================================
   ARAÇ İZİ — başlangıç + duraklama marker + track noktası modalı
   ============================================================ */
.lt-tp-mk { position: relative; width: 20px; height: 20px; cursor: pointer; }
.lt-tp-pin { display: block; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.lt-tp-mk.start .lt-tp-pin { background: #10b981; }
.lt-tp-mk.stop .lt-tp-pin { background: #f59e0b; }
.lt-tp-lbl {
    position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
    background: #1f2430; color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 8px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.lt-tp-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 12500; display: none; align-items: center; justify-content: center; padding: 24px; }
.lt-tp-modal.show { display: flex; }
.lt-tp-box { background: var(--sp-bg-card); border-radius: 12px; width: 420px; max-width: 95vw; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.lt-tp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--sp-border); }
.lt-tp-title { font-size: 15px; font-weight: 800; color: var(--sp-text); }
.lt-tp-sub { font-size: 12px; color: var(--sp-text-muted); margin-top: 2px; }

/* ============================================================
   Harita Zenginleştirme — Adres Arama / ReverseGeocode / Plus Code
   (MapServices AutoComplete + ReverseGeocode + Google Plus Code)
   ============================================================ */

/* --- Adres Arama overlay (harita sol üst) --- */
.lt-addr-search { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 620; width: 320px; max-width: calc(100% - 24px); }
.lt-addr-box { display: flex; align-items: center; gap: 7px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 10px; padding: 7px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.lt-addr-box:focus-within { border-color: var(--sp-primary); box-shadow: 0 6px 18px rgba(0,0,0,.16), 0 0 0 3px rgba(245,158,11,.16); }
.lt-addr-ico { width: 15px; height: 15px; color: var(--sp-text-muted); flex-shrink: 0; }
.lt-addr-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--sp-text); font-size: 12.5px; font-family: inherit; }
.lt-addr-input::placeholder { color: var(--sp-text-muted); }
.lt-addr-clear { flex-shrink: 0; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--sp-bg-input); color: var(--sp-text-muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; transition: background-color 0.15s ease, color 0.15s ease; }
.lt-addr-clear:hover { background: var(--sp-danger); color: #fff; }

.lt-addr-results { margin-top: 6px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 10px; box-shadow: 0 10px 26px rgba(0,0,0,.18); max-height: 280px; overflow-y: auto; }
.lt-addr-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 11px; cursor: pointer; border-bottom: 1px dashed var(--sp-border); transition: background-color 0.12s ease; }
.lt-addr-item:last-child { border-bottom: 0; }
.lt-addr-item:hover { background: var(--sp-bg-input); }
.lt-addr-item-ico { width: 13px; height: 13px; color: var(--sp-primary-dark); flex-shrink: 0; margin-top: 2px; }
.lt-addr-item-txt { min-width: 0; }
.lt-addr-item-main { font-size: 12.5px; font-weight: 600; color: var(--sp-text); word-break: break-word; }
.lt-addr-item-sub { font-size: 11px; color: var(--sp-text-muted); margin-top: 1px; word-break: break-word; }
.lt-addr-empty { padding: 10px 12px; font-size: 11.5px; color: var(--sp-text-muted); text-align: center; }
.lt-addr-loading { padding: 10px 12px; font-size: 11.5px; color: var(--sp-text-muted); text-align: center; }

/* Adres arama geçici marker */
.lt-addr-pin { display: flex; align-items: center; justify-content: center; }
.lt-addr-pin svg { width: 30px; height: 30px; color: var(--sp-primary-dark); filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }

/* --- ReverseGeocode adres satırı (panel içi) --- */
.lt-addr-resolving { color: var(--sp-text-muted); font-style: italic; }
.lt-addr-resolved { color: var(--sp-text); }

/* --- Plus Code satırı (kopyalanabilir) --- */
.lt-pluscode { display: inline-flex; align-items: center; gap: 6px; }
.lt-pluscode-val { font-family: 'Consolas', 'Courier New', monospace; font-weight: 700; color: var(--sp-text); letter-spacing: .3px; }
.lt-pluscode-copy { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--sp-border); border-radius: 5px; background: var(--sp-bg-input); color: var(--sp-text-muted); cursor: pointer; padding: 0; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.lt-pluscode-copy:hover { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.lt-pluscode-copy svg { width: 11px; height: 11px; }
.lt-pluscode-copy.copied { background: #10b981; border-color: #10b981; color: #fff; }
.lt-pluscode-loading { color: var(--sp-text-muted); font-style: italic; font-weight: 400; }

/* Evrak paneli — KTY rozeti + yüklü dosyalar + kayıt yok */
.lt-notif-none { color: var(--sp-text-muted) !important; }
.lt-notif-kty { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px; margin-right: 5px; white-space: nowrap; }
.lt-notif-kty.kty-ok { background: rgba(16,185,129,.14); color: #059669; }
.lt-notif-kty.kty-warn { background: rgba(245,158,11,.16); color: #b45309; }
.lt-notif-kty.kty-bad { background: rgba(185,28,28,.16); color: #b91c1c; }
.lt-notif-files { margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--sp-border); }
.lt-notif-files:empty { display: none; }
.lt-notif-files-h { font-size: 10px; letter-spacing: .4px; color: var(--sp-text-muted); font-weight: 700; margin-bottom: 5px; }
.lt-notif-files-n { background: var(--sp-primary); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 9.5px; }
.lt-notif-files-loading, .lt-notif-files-empty { font-size: 11px; color: var(--sp-text-muted); padding: 3px 0; }
.lt-notif-file { display: flex; align-items: center; gap: 7px; padding: 4px 0; }
.lt-notif-file svg { width: 13px; height: 13px; color: var(--sp-text-muted); flex-shrink: 0; }
.lt-notif-file-info { display: flex; flex-direction: column; min-width: 0; }
.lt-notif-file-name { font-size: 11.5px; color: var(--sp-primary-dark); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-notif-file-name:hover { text-decoration: underline; }
.lt-notif-file-type { font-size: 9.5px; color: var(--sp-text-muted); }

/* ===== Canlı Takip — panel aç/kapa tutamağı (X yerine estetik kenar tutamağı) ===== */
/* Sol taban paneli (.lt-side) tutamakla daraltılabilir; default açık. */
.lt-side { position: relative; z-index: 760; transition: flex-basis .26s cubic-bezier(.4, 0, .2, 1); }
.lt-side.lt-collapsed { flex-basis: 0; min-width: 0; border-right-color: transparent; }
.lt-side.lt-collapsed > *:not(.lt-panel-handle) { display: none; }

/* Tutamak — panelin harita tarafı kenarında, dikey ortada */
.lt-panel-handle {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 22px; height: 64px; z-index: 6;
    display: flex; align-items: center; justify-content: center;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    color: var(--sp-text-muted); cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
    transition: color .15s ease, background-color .15s ease;
}
.lt-panel-handle:hover { color: var(--sp-primary); background: var(--sp-bg-input); }
.lt-panel-handle svg { width: 13px; height: 13px; transition: transform .2s ease; }
.lt-panel-handle.lt-handle-flip svg { transform: rotate(180deg); }
/* sol panel → tutamak sağ kenarda; sağ panel → sol kenarda */
.lt-panel-handle.h-right { right: -22px; border-left: 0; border-radius: 0 9px 9px 0; }
.lt-panel-handle.h-left { left: -22px; border-right: 0; border-radius: 9px 0 0 9px; }

/* Eski X butonları — tutamak ile değiştirildi */
#lt2Close, #ltPoiClose, #ltNotifClose, #frClose { display: none; }

/* ============ Operasyon Kokpiti (K1 — tam-ekran canlı harita) ============ */
.kp-cockpit {
    position: fixed; inset: 0; z-index: 2500;
    display: none; flex-direction: column;
    background: var(--sp-bg);
}
.kp-cockpit.kp-active { display: flex; }

/* Komuta çubuğu */
.kp-bar {
    flex: none; display: flex; align-items: center; gap: 18px;
    height: 52px; padding: 0 16px;
    background: var(--sp-bg-card); border-bottom: 1px solid var(--sp-border);
}
.kp-bar-id { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--sp-text); }
.kp-bar-id svg { width: 18px; height: 18px; color: var(--sp-primary-dark); }
.kp-stats { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kp-stat { font-size: 12px; color: var(--sp-text-muted); display: flex; align-items: center; gap: 5px; }
.kp-stat b { font-size: 14px; font-weight: 700; color: var(--sp-text); }
.kp-stat i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kp-s-move i { background: #10b981; }
.kp-s-stop i { background: #f59e0b; }
.kp-s-off  i { background: #9ca3af; }
.kp-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kp-updated { font-size: 11px; color: var(--sp-text-muted); }
.kp-bar-btn {
    width: 32px; height: 32px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm); color: var(--sp-text); cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kp-bar-btn:hover { background: rgba(120,120,120,0.12); }
.kp-bar-btn svg { width: 16px; height: 16px; }
.kp-bar-exit:hover { background: var(--sp-danger); border-color: var(--sp-danger); color: #fff; }

/* Evrak Bildirimleri zili — Filo Compliance özeti (K5.4) */
.kp-bell-btn { position: relative; }
.kp-bell-btn.has-alerts { animation: kp-bell-pulse 2s ease-in-out infinite; }
@keyframes kp-bell-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
}
.kp-bell-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 800; line-height: 18px;
    text-align: center; border-radius: 9px;
    box-shadow: 0 0 0 2px var(--sp-bg-card);
}
.kp-bell-badge.warn { background: #f59e0b; }

.kp-fleet-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.kp-fleet-overview-cell {
    padding: 10px 12px; border-radius: 8px; border-left: 4px solid var(--kp-risk-c);
    background: var(--kp-risk-bg);
}
.kp-fleet-overview-cell b { display: block; font-size: 22px; font-weight: 800; color: var(--kp-risk-c); }
.kp-fleet-overview-cell span { font-size: 11px; color: var(--sp-text-muted); }
.kp-fleet-overview-list { max-height: 280px; overflow-y: auto; }
.kp-fleet-overview-item {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 7px 10px; border-bottom: 1px solid var(--sp-border); font-size: 12px;
    cursor: pointer; transition: background-color .12s ease;
}
.kp-fleet-overview-item:hover { background: rgba(120,120,120,.08); }
.kp-fleet-overview-item .kp-risk-label { font-weight: 700; font-size: 10px; }

/* Gövde */
.kp-body { flex: 1; min-height: 0; display: flex; position: relative; }
/* Sol & sağ panel — EŞİT genişlik (320px), kenar tutamağıyla daraltılır */
.kp-side {
    flex: none; width: 320px; display: flex; flex-direction: column;
    background: var(--sp-bg-card); position: relative; z-index: 760;
    transition: width .26s cubic-bezier(.4, 0, .2, 1);
}
.kp-left { border-right: 1px solid var(--sp-border); }
.kp-right { width: 320px; border-left: 1px solid var(--sp-border); display: none; }
.kp-right.show { display: flex; }
/* Tutamakla daraltma — Canlı İzleme lt-panel-handle deseni (dikey ortada) */
.kp-side.kp-collapsed { width: 0; min-width: 0; border-color: transparent; }
.kp-side.kp-collapsed > *:not(.lt-panel-handle) { display: none; }
.kp-map { flex: 1; min-width: 0; position: relative; }
.kp-map-wrap { flex: 1; min-width: 0; position: relative; display: flex; }
.kp-map-wrap > .kp-map { flex: 1; }

/* Panel başlık */
.kp-side-head {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 7px 12px; border-bottom: 1px solid var(--sp-border);
    font-size: 11.5px; font-weight: 700; color: var(--sp-text);
    letter-spacing: 0.2px;
}
.kp-side-toggle {
    width: 22px; height: 22px; flex: none;
    background: none; border: 0; cursor: pointer; color: var(--sp-text-muted);
    font-size: 15px; line-height: 1;
    transition: transform 0.2s ease, color 0.15s ease;
}
.kp-side-toggle:hover { color: var(--sp-text); }

/* Segmentler */
.kp-segs { flex: none; display: flex; gap: 3px; padding: 6px 8px; border-bottom: 1px solid var(--sp-border); }
.kp-seg {
    flex: 1; padding: 4px 6px; font-size: 10.5px; font-weight: 600;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm); color: var(--sp-text-muted); cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    letter-spacing: 0.15px;
}
.kp-seg.active { background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); color: #fff; }

/* Arama */
.kp-side-search { flex: none; position: relative; padding: 6px 8px; }
.kp-side-search svg {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 12px; color: var(--sp-text-muted); pointer-events: none;
}
.kp-side-search input {
    width: 100%; box-sizing: border-box;
    padding: 5px 10px 5px 26px; font-size: 11px;
    color: var(--sp-text); background: var(--sp-bg-input);
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); outline: none;
}
.kp-side-search input:focus { border-color: var(--sp-primary); }
.kp-vlist-search { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--sp-bg-card); border-bottom: 1px solid var(--sp-border); }
.kp-vlist-searchin svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: var(--sp-text-muted); pointer-events: none; }
.kp-vlist-searchin input { width: 100%; box-sizing: border-box; padding: 6px 10px 6px 26px; font-size: 11px; color: var(--sp-text); background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); outline: none; }
.kp-vlist-searchin input:focus { border-color: var(--sp-primary); }

/* Panel gövdesi (kaydırılabilir) */
.kp-side-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.kp-empty { padding: 18px 12px; text-align: center; font-size: 12px; color: var(--sp-text-muted); }

/* Araç satırı */
.kp-veh-row {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: var(--sp-radius-sm); cursor: pointer;
    transition: background-color 0.13s ease;
}
.kp-veh-row:hover { background: rgba(120,120,120,0.10); }
.kp-veh-row.active { background: rgba(245,158,11,0.14); }
.kp-veh-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kp-d-moving { background: #10b981; }
.kp-d-stopped { background: #f59e0b; }
.kp-d-offline { background: #9ca3af; }
.kp-veh-main { flex: 1; min-width: 0; }
.kp-veh-plate { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.kp-veh-sub { font-size: 10.5px; color: var(--sp-text-muted); }
.kp-veh-spd { flex: none; font-size: 11px; font-weight: 700; color: #0f7b3f; }

/* Sağ panel — araç detayı */
.kp-rt-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; }
.kp-rt-head strong { font-size: 14px; font-weight: 700; color: var(--sp-text); }
.kp-rt-st { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; }
.kp-rt-st.kp-d-moving { background: #10b981; }
.kp-rt-st.kp-d-stopped { background: #f59e0b; }
.kp-rt-st.kp-d-offline { background: #9ca3af; }
.kp-rt-row {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 6px 4px; font-size: 12px; border-bottom: 1px solid var(--sp-border);
}
.kp-rt-row span { color: var(--sp-text-muted); }
.kp-rt-row strong { color: var(--sp-text); font-weight: 600; text-align: right; word-break: break-word; }
/* Sağ panel — zengin detay (3.png deseni: plaka başlığı + rozetler) */
.kp-rt-id {
    padding: 2px 2px 11px; margin-bottom: 2px;
    border-bottom: 1px solid var(--sp-border);
}
.kp-rt-plate { font-size: 21px; font-weight: 800; color: var(--sp-text); letter-spacing: .4px; }
.kp-rt-id .lt-side2-badges { margin-top: 8px; }
.kp-rt-foot { display: flex; flex-direction: column; gap: 7px; padding: 14px 2px 4px; }
.kp-rt-btn {
    width: 100%; padding: 8px; font-size: 12px; font-weight: 600;
    color: #fff; background: var(--sp-primary-dark); border: 1px solid var(--sp-primary-dark);
    border-radius: var(--sp-radius-sm); cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kp-rt-btn:hover { background: var(--sp-primary); }
.kp-rt-btn-ghost {
    color: var(--sp-text); background: var(--sp-bg-input); border-color: var(--sp-border);
}
.kp-rt-btn-ghost:hover { background: rgba(120, 120, 120, 0.12); border-color: var(--sp-border); }

/* Harita marker (Leaflet divIcon) */
.kp-mk-wrap { background: none; border: 0; }
.kp-mk {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    cursor: pointer;
}
.kp-mk-arrow {
    width: 0; height: 0;
    border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
    border-bottom: 9px solid #fff;   /* yön oku HEP BEYAZ — durum rengi dairede */
    filter: none;
}
.kp-mk-moving  .kp-mk-circle { background: #10b981; }
.kp-mk-stopped .kp-mk-circle { background: #f59e0b; }
.kp-mk-offline .kp-mk-circle { background: #9ca3af; }
.kp-mk-plate {
    font-size: 9px; font-weight: 700; color: var(--sp-text);
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    padding: 0 4px; border-radius: 3px; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* ===== İş Emri (Pozisyon) formu — sağ panel içi (O3.2) ===== */
.kp-ie { display: flex; flex-direction: column; gap: 9px; }
.kp-ie-veh {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 800; color: var(--sp-text);
    padding: 2px 2px 9px; border-bottom: 1px solid var(--sp-border);
}
.kp-ie-field { display: flex; flex-direction: column; gap: 3px; }
.kp-ie-field > label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .3px; color: var(--sp-text-muted);
}
.kp-ie-input {
    width: 100%; box-sizing: border-box; padding: 6px 8px;
    font-size: 12px; color: var(--sp-text);
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm); outline: none;
    transition: border-color .15s ease;
}
.kp-ie-input:focus { border-color: var(--sp-primary); }
textarea.kp-ie-input { resize: vertical; min-height: 38px; font-family: inherit; }
.kp-ie-stops-h {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .3px; color: var(--sp-text-muted); margin-top: 4px;
}
.kp-ie-stops { display: flex; flex-direction: column; gap: 7px; }
.kp-ie-stop {
    border: 1px solid var(--sp-border); border-left: 3px solid var(--sp-text-muted);
    border-radius: var(--sp-radius-sm); padding: 7px 8px; background: var(--sp-bg-input);
}
.kp-ie-stop-start    { border-left-color: #10b981; }
.kp-ie-stop-pickup   { border-left-color: #3b82f6; }
.kp-ie-stop-delivery { border-left-color: #f59e0b; }
.kp-ie-stop-waypoint { border-left-color: #797bf2; }
.kp-ie-stop-return   { border-left-color: #6b7280; }
.kp-ie-stop-h {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; margin-bottom: 5px;
}
.kp-ie-stop-badge { font-size: 11px; font-weight: 700; color: var(--sp-text); }
.kp-ie-stop-x {
    width: 18px; height: 18px; flex: none; line-height: 1; font-size: 13px;
    background: none; border: 0; cursor: pointer; color: var(--sp-text-muted);
    transition: color .15s ease;
}
.kp-ie-stop-x:hover { color: var(--sp-danger); }
.kp-ie-stop-edit {
    width: 20px; height: 18px; flex: none; line-height: 1; font-size: 11px;
    background: none; border: 0; cursor: pointer; color: var(--sp-text-muted);
    margin-left: auto; transition: color .15s ease;
}
.kp-ie-stop-edit:hover { color: var(--sp-primary); }
.kp-ie-stop-pick { position: relative; }
.kp-ie-results {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: none;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm); margin-top: 2px;
    max-height: 180px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.kp-ie-results.show { display: block; }
.kp-ie-res-item {
    padding: 6px 8px; font-size: 11.5px; color: var(--sp-text); cursor: pointer;
    transition: background-color .12s ease;
}
.kp-ie-res-item:hover { background: rgba(120,120,120,.12); }
.kp-ie-res-item small { display: block; color: var(--sp-text-muted); font-size: 10px; }
.kp-ie-stop-addr {
    font-size: 10.5px; color: var(--sp-text-muted); margin-top: 4px; word-break: break-word;
}
.kp-ie-stop-addr.set { color: var(--sp-text); }
.kp-ie-addrow { display: flex; gap: 6px; }
.kp-ie-add {
    flex: 1; padding: 6px; font-size: 11px; font-weight: 600;
    background: var(--sp-bg-input); border: 1px dashed var(--sp-border);
    border-radius: var(--sp-radius-sm); color: var(--sp-text-muted); cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.kp-ie-add:hover { color: var(--sp-primary); border-color: var(--sp-primary); }

/* ===== Güzergah: sol harita (stats + timeline overlay) + sağ nokta paneli (İş Emri) ===== */
.kp-ie-guzergah { display: flex; gap: 14px; align-items: stretch; margin-top: 6px; }
/* Harita sütunu — overlay'ler (rozet/timeline) için konumlandırma bağlamı */
.kp-ie-guzergah-map { flex: 1 1 56%; min-width: 0; position: relative; }
.kp-ie-guzergah-map .kp-ie-map { height: 470px; min-height: 0; }
/* Mesafe/süre rozetleri — harita üzerinde sağ-üst (Leaflet zoom sol-üstte) */
.kp-ie-guzergah-map .sp-route-map-stats { top: 10px; right: 10px; left: auto; bottom: auto; }
/* Zaman çizelgesi — harita üzerinde alt overlay (FRP "Hızlı Rota" deseni) */
.kp-ie-guzergah-map .sp-route-timeline-wrap {
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1001;
    padding: 9px 11px 7px; border-radius: 10px;
    background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--sp-border); box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
body.is-dark .kp-ie-guzergah-map .sp-route-timeline-wrap { background: rgba(28, 25, 23, .86); }
.kp-ie-guzergah-map .sp-route-timeline-wrap .sp-route-timeline {
    background: transparent; border: 0; padding: 0; margin: 0; overflow-x: auto;
}
/* Sağ panel (layout pane) — üstte "Adres Ekle" butonu · altında kaydırılan nokta listesi */
.kp-ie-guzergah-points {
    flex: 1 1 44%; min-width: 0; display: flex; flex-direction: column; height: 470px;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background: var(--sp-bg-card); padding: 10px;
}
.kp-ie-points-h {
    flex: none; font-size: 10.5px; font-weight: 700;
    letter-spacing: .3px; color: var(--sp-text-muted); margin-bottom: 7px;
}
.kp-ie-guzergah-points .kp-ie-stops { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 3px; }
.kp-ie-guzergah-points .kp-ie-addrow { flex: none; margin-bottom: 9px; }
.kp-ie-guzergah-points .kp-ie-addrow:empty { margin: 0; }
/* Boş güzergah uyarısı — tıklanabilir kart */
.kp-ie-points-empty {
    flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 11px; text-align: center; color: var(--sp-text-muted); font-size: 12px; line-height: 1.5; padding: 22px;
    background: var(--sp-bg-input); border: 1.5px dashed var(--sp-border); border-radius: var(--sp-radius-sm);
    cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.kp-ie-points-empty:hover { border-color: var(--sp-primary); color: var(--sp-text); background: rgba(120, 123, 242, .06); }
.kp-ie-points-empty i { font-size: 26px; opacity: .65; color: var(--sp-primary); }
.kp-ie-points-empty b { color: var(--sp-text); }
.kp-ie-addmain {
    width: 100%; padding: 10px; font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--sp-primary); color: #fff; border: 0;
    border-radius: var(--sp-radius-sm); cursor: pointer; transition: filter .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 8px rgba(120, 123, 242, .28);
}
.kp-ie-addmain:hover { filter: brightness(1.06); box-shadow: 0 4px 12px rgba(120, 123, 242, .38); }
.kp-ie-addmain[hidden] { display: none; }   /* display:inline-flex, [hidden]'ı ezmesin diye */
/* Yük Bağla / Yeni Yük Oluştur — iki butonlu satır */
.kp-sa-cargo-btns { display: flex; gap: 8px; }
.kp-sa-cargo-btns .kp-ie-addmain { flex: 1; width: auto; }
.kp-sa-bind { background: transparent; color: var(--sp-primary); border: 1px solid var(--sp-primary); box-shadow: none; }
.kp-sa-bind:hover { background: rgba(120, 123, 242, .08); box-shadow: none; filter: none; }
.kp-sa-cargo-bound-ico { font-size: 9px; opacity: .7; color: var(--sp-primary); margin-right: 1px; }
@media (max-width: 1000px) {
    .kp-ie-guzergah { flex-direction: column; }
    .kp-ie-guzergah-points { height: auto; max-height: 360px; }
    .kp-ie-guzergah-map .kp-ie-map { height: 340px; }
}

/* ===== Compliance Pasaportu (RiskBadge) — K5 — hukuk sunumu altyapısı ===== */
.kp-risk-ok       { --kp-risk-c: #10b981; --kp-risk-bg: rgba(16, 185, 129, 0.10); }
.kp-risk-warning  { --kp-risk-c: #f59e0b; --kp-risk-bg: rgba(245, 158, 11, 0.10); }
.kp-risk-critical { --kp-risk-c: #fb923c; --kp-risk-bg: rgba(251, 146, 60, 0.12); }
.kp-risk-unfit    { --kp-risk-c: #ef4444; --kp-risk-bg: rgba(239, 68, 68, 0.12); }

.kp-risk-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--kp-risk-c); margin-right: 5px; vertical-align: middle;
    box-shadow: 0 0 0 2px var(--kp-risk-bg);
}

.kp-risk-row {
    display: flex; align-items: center; gap: 7px;
    margin-top: 4px; padding: 6px 9px; border-radius: var(--sp-radius-sm);
    background: var(--kp-risk-bg);
    border-left: 3px solid var(--kp-risk-c);
    font-size: 11.5px; color: var(--sp-text); cursor: pointer;
    transition: background-color .15s ease;
}
.kp-risk-row:hover { background: rgba(120, 120, 120, 0.08); }
.kp-risk-row .kp-risk-label { font-weight: 800; color: var(--kp-risk-c); letter-spacing: .3px; flex: none; }
.kp-risk-row .kp-risk-sum { color: var(--sp-text-muted); flex: 1; min-width: 0; }
.kp-risk-row:empty { display: none; }

.kp-passport-modal {
    position: fixed; inset: 0; z-index: 3100; display: none;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .5); padding: 20px;
}
.kp-passport-modal.show { display: flex; }
.kp-passport-box {
    width: 480px; max-width: 96vw; max-height: 88vh;
    display: flex; flex-direction: column;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); overflow: hidden;
}
.kp-passport-head {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid var(--sp-border);
    font-size: 14px; font-weight: 800; color: var(--sp-text);
}
.kp-passport-x {
    width: 28px; height: 28px; line-height: 1; font-size: 17px;
    background: none; border: 0; cursor: pointer; color: var(--sp-text-muted);
    border-radius: 6px; transition: background-color .15s ease, color .15s ease;
}
.kp-passport-x:hover { background: var(--sp-bg-input); color: var(--sp-text); }
.kp-passport-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }

.kp-passport {
    padding: 14px; border-radius: 8px; border: 1px solid var(--kp-risk-c);
    background: var(--kp-risk-bg);
}
.kp-passport-banner {
    display: flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 800; color: var(--kp-risk-c); margin-bottom: 8px;
}
.kp-passport-sum { font-size: 12.5px; color: var(--sp-text); margin-bottom: 12px; }
.kp-passport-issues { list-style: none; padding: 0; margin: 0; }
.kp-passport-issues li {
    padding: 8px 10px; margin-bottom: 5px; background: var(--sp-bg-card);
    border-left: 3px solid var(--kp-risk-c); border-radius: 4px; font-size: 12px;
}
.kp-passport-issues li b { color: var(--sp-text); display: block; }
.kp-passport-issues li small { color: var(--sp-text-muted); }

/* İş Emri popup — merkezi modal (sipariş açma deseni, kullanıcı dostu) */
.kp-modal {
    position: fixed; inset: 0; z-index: 3000; display: none;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .5); padding: 20px;
}
.kp-modal.show { display: flex; }
/* Sadece-modal modu (operasyon → İş Emri): opak örtü dashboard/haritayı gizler, modal üstte kalır */
body.kp-modalonly::before { content: ''; position: fixed; inset: 0; background: var(--sp-bg-body); z-index: 2999; }
body.kp-modalonly .kp-modal { background: var(--sp-bg-body); }
.kp-modal-box {
    /* Sabit boyut — içerik (durak ekle/sil, tab geçişi) popup'ı büyütüp küçültmesin.
       Body içeride scroll eder, dış kutu standart oranda kalır. */
    width: 620px; height: 720px;
    max-width: 96vw; max-height: 92vh;
    display: flex; flex-direction: column;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); overflow: hidden;
}

/* ===== Adres / Durak Ekle modalı (#kpStopAddModal) ===== */
.kp-stopadd-modal { z-index: 3200; }   /* İş Emri modalının (3000) üstünde */
.kp-stopadd-modal .kp-modal-box { width: 560px; height: auto; max-height: 88vh; }
.kp-stopadd-modal .sp-modal-form-body { flex: 1; min-height: 0; overflow-y: auto; }
.kp-sa-search { position: relative; }
.kp-sa-results {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 30; display: none;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm); margin-top: 2px;
    max-height: 220px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.kp-sa-res-item { padding: 6px 9px; font-size: 11.5px; color: var(--sp-text); cursor: pointer; transition: background-color .12s ease; }
.kp-sa-res-item:hover { background: rgba(120,120,120,.12); }
.kp-sa-res-item small { display: block; color: var(--sp-text-muted); font-size: 10px; }
.kp-sa-picked {
    margin-top: 6px; padding: 7px 9px; border-radius: var(--sp-radius-sm);
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    font-size: 11.5px; color: var(--sp-text); word-break: break-word;
}
.kp-sa-kinds { display: flex; gap: 16px; margin-top: 2px; }
.kp-sa-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--sp-text); }
.kp-sa-cargo { border-top: 1px solid var(--sp-border); padding-top: 11px; margin-top: 2px; }
.kp-sa-cargo-h { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--sp-text-muted); margin-bottom: 7px; }
.kp-sa-cargo-empty { font-size: 11.5px; color: var(--sp-text-muted); padding: 2px 0 9px; }
.kp-sa-cargo-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.kp-sa-cargo-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 9px; border: 1px solid var(--sp-border); border-left: 3px solid var(--sp-primary);
    border-radius: var(--sp-radius-sm); background: var(--sp-bg-input); font-size: 11.5px; color: var(--sp-text);
}
.kp-sa-cargo-to { color: var(--sp-text-muted); }
.kp-sa-cargo-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.kp-sa-cargo-edit { background: none; border: 0; cursor: pointer; color: var(--sp-text-muted); font-size: 11px; line-height: 1; transition: color .15s ease; }
.kp-sa-cargo-edit:hover { color: var(--sp-primary); }
.kp-sa-cargo-x { background: none; border: 0; cursor: pointer; color: var(--sp-text-muted); font-size: 13px; line-height: 1; transition: color .15s ease; }
.kp-sa-cargo-x:hover { color: var(--sp-danger); }
.kp-sa-cargo-form { border: 1px dashed var(--sp-border); border-radius: var(--sp-radius-sm); padding: 10px; margin-bottom: 8px; background: var(--sp-bg-input); }
.kp-sa-cargo-grid { display: grid; grid-template-columns: 1.5fr .7fr; gap: 8px; }
.kp-sa-cargo-grid .kp-sa-cargo-addr { grid-column: 1 / -1; }
.kp-sa-cargo-grid .kp-sa-cg-full { grid-column: 1 / -1; }
.kp-sa-cargo-formfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
/* Zaman planı — adreste geçecek süre + planlanan varış başlangıç/bitiş, tek satır (3 kolon) */
.kp-sa-time-grid { display: grid; grid-template-columns: 0.8fr 1fr 1fr; gap: 8px; }
.kp-sa-time-grid .kp-ie-input { min-width: 0; }
/* durak kartında yük bilgisi özeti */
.kp-ie-stop-cargos { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.kp-ie-stop-cargo { font-size: 10.5px; color: var(--sp-text); background: rgba(120,123,242,.10); border-radius: 4px; padding: 2px 6px; }
.kp-ie-stop-cargo-in { background: rgba(16, 185, 129, .12); }   /* teslim edilecek (gelen) sipariş — yeşil tonu */
/* durak kartında otomatik teslimat rozeti (yükten türetilen) */
.kp-ie-stop-auto { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 9.5px; font-weight: 600; color: var(--sp-primary); background: rgba(120, 123, 242, .10); border-radius: 4px; padding: 2px 7px; }
.kp-ie-stop-auto i { font-size: 9px; }
/* durak kartında zaman planı özeti */
.kp-ie-stop-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.kp-ie-stop-time { font-size: 10px; color: var(--sp-text-secondary); background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 4px; padding: 2px 6px; }
.kp-ie-stop-time i { color: var(--sp-primary); margin-right: 3px; font-size: 9px; }

/* İş Emri form — 2 sütunlu üst alanlar (popup genişledi → akıllı yerleşim) */
.kp-ie-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kp-ie-grid-5 { grid-template-columns: repeat(5, 1fr); }   /* 1. satır: Plaka·Sürücü·Taşıma·Sefer·Hareket */
.kp-ie-grid + .kp-ie-grid { margin-top: 10px; }            /* ardışık grid satırları arası boşluk */
.kp-ie-grid .kp-ie-field { min-width: 0; }
.kp-ie-grid .kp-ie-field-full { grid-column: 1 / -1; }
.kp-ie-grid .kp-ie-field-half { grid-column: span 2; }
.kp-ie-grid .kp-ie-rownew { grid-column-start: 1; }     /* yeni satır başlat (önceki satır eksik dolsa bile) */
/* Sefer Kapsamı — tek sütuna sığan kompakt radyo grubu */
.kp-ie-scope-radios { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 5px 2px; font-size: 12px; }
.kp-ie-scope-radios label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.kp-ie-hint { font-size: 10.5px; color: var(--sp-text-muted); margin-top: 2px; }
.kp-modal-head {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--sp-border);
}
.kp-modal-title { font-size: 14px; font-weight: 800; color: var(--sp-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-modal-x {
    width: 28px; height: 28px; flex: none; line-height: 1; font-size: 17px;
    background: none; border: 0; cursor: pointer; color: var(--sp-text-muted);
    border-radius: 6px; transition: background-color .15s ease, color .15s ease;
}
.kp-modal-x:hover { background: var(--sp-bg-input); color: var(--sp-text); }
/* İş Emri + Sabit Güzergah modalları — sipariş modalı standardı (sp-modal-form-head/body/foot)
   kp-modal-box içinde: gövde flex ile scroll eder, footer altta sabit kalır (border-top + bg). */
.kp-order-box { padding: 0; width: 1140px; max-width: 96vw; height: 860px; max-height: 94vh; }
.kp-order-box .sp-modal-form-body { flex: 1; min-height: 0; overflow-y: auto; }
.kp-order-box .sp-modal-form-foot { align-items: center; }
.kp-order-box .sp-modal-form-foot .kp-ie-foot-msg { margin-right: auto; font-size: 12px; line-height: 1.3; }
.kp-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }

/* Canlı Takip — geçmiş izi yükleme rozeti (seçili aracın yanında, Leaflet tooltip) */
.leaflet-tooltip.lt-track-tip {
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    color: var(--sp-text); font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.leaflet-tooltip.lt-track-tip::before { display: none; }
.lt-tl-spin {
    width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--sp-border); border-top-color: var(--sp-primary);
    animation: lt-tl-rot .7s linear infinite;
}
@keyframes lt-tl-rot { to { transform: rotate(360deg); } }

/* Canlı Takip — Müşteri Bölgeleri (geofence) */
.lt-lm-select {
    width: 100%; margin: 2px 0 4px; padding: 6px 8px;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    border-radius: 6px; color: var(--sp-text); font-size: 12.5px; cursor: pointer;
}
.lt-lm-row-inline { justify-content: space-between; }
.lt-lm-num {
    width: 78px; padding: 4px 6px; background: var(--sp-bg-input);
    border: 1px solid var(--sp-border); border-radius: 6px; color: var(--sp-text); font-size: 12px;
}
.lt-zone-mk {
    width: 12px; height: 12px; border-radius: 50%;
    background: #f59e0b; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.lt-zone-toasts {
    position: absolute; right: 14px; bottom: 14px; z-index: 660;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.lt-zone-toast {
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-left: 3px solid #6b7280;
    border-radius: 8px; padding: 9px 13px; font-size: 12px; font-weight: 600;
    color: var(--sp-text); box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    opacity: 0; transform: translateX(20px);
    transition: opacity .2s ease, transform .2s ease; max-width: 300px;
}
.lt-zone-toast.show { opacity: 1; transform: translateX(0); }
.lt-zone-toast.enter { border-left-color: #10b981; }
.lt-zone-toast.exit { border-left-color: #f59e0b; }

/* Canlı Takip — Sesli Uyarı popover (header ikonuna bağlı, kompakt) */
.lt-alert-wrap { position: relative; }
.lt-alert-pop {
    position: absolute; top: calc(100% + 7px); right: 0; width: 296px; z-index: 14000;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 11px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.lt-alert-pop.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lt-ap-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 13px; border-bottom: 1px solid var(--sp-border);
}
.lt-ap-htitle { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--sp-text); }
.lt-ap-htitle svg { width: 16px; height: 16px; color: var(--sp-primary); }
.lt-ap-body { padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.lt-ap-body.off { opacity: .4; pointer-events: none; }
.lt-ap-card { border: 1px solid var(--sp-border); border-radius: 9px; overflow: hidden; }
.lt-ap-card-h { display: flex; align-items: center; gap: 9px; padding: 8px 9px; }
.lt-ap-ico { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lt-ap-ico svg { width: 16px; height: 16px; }
.lt-ap-ico.speed { background: rgba(239, 68, 68, .14); color: #ef4444; }
.lt-ap-ico.idle { background: rgba(59, 130, 246, .14); color: #3b82f6; }
.lt-ap-ico.signal { background: rgba(245, 158, 11, .16); color: #f59e0b; }
.lt-ap-ico.zone { background: rgba(124, 58, 237, .14); color: #7c3aed; }
.lt-ap-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lt-ap-ct b { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.lt-ap-ct span { font-size: 10.5px; color: var(--sp-text-muted); }
.lt-ap-th {
    display: flex; align-items: center; gap: 6px; padding: 7px 9px;
    border-top: 1px solid var(--sp-border); background: var(--sp-bg-input);
    font-size: 11px; color: var(--sp-text-muted);
}
.lt-ap-card.al-off .lt-ap-th { opacity: .4; }
.lt-al-th {
    width: 56px; padding: 3px 6px; background: var(--sp-bg-card);
    border: 1px solid var(--sp-border); border-radius: 6px; color: var(--sp-text); font-size: 12px; font-weight: 600;
}
.lt-ap-foot { display: flex; gap: 8px; padding: 10px 11px; border-top: 1px solid var(--sp-border); }
.lt-ap-btn {
    flex: 1; padding: 8px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer;
    border: 1px solid var(--sp-border); background: var(--sp-bg-card); color: var(--sp-text);
    transition: background-color .15s ease, border-color .15s ease;
}
.lt-ap-btn:hover { background: var(--sp-bg-input); }
.lt-ap-btn.primary { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.lt-ap-btn.primary:hover { filter: brightness(.94); background: var(--sp-primary); }

/* Toggle switch */
.lt-sw { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; cursor: pointer; }
.lt-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.lt-sw-t { position: absolute; inset: 0; background: var(--sp-border); border-radius: 11px; transition: background-color .18s ease; }
.lt-sw-t::before {
    content: ''; position: absolute; width: 17px; height: 17px; left: 2px; top: 2px;
    background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .18s ease;
}
.lt-sw input:checked + .lt-sw-t { background: #10b981; }
.lt-sw input:checked + .lt-sw-t::before { transform: translateX(17px); }

.lt-zone-toast.danger { border-left-color: #ef4444; }

/* Paylaşılabilir Canlı Takip — public sayfa */
.trk-page { display: flex; flex-direction: column; height: 100vh; }
.trk-top {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; background: var(--sp-bg-card); border-bottom: 1px solid var(--sp-border);
}
.trk-brand { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: var(--sp-text); }
.trk-brand svg { width: 20px; height: 20px; color: var(--sp-primary); }
.trk-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.trk-plate { font-size: 16px; font-weight: 800; color: var(--sp-text); letter-spacing: .4px; }
.trk-upd { font-size: 11px; color: var(--sp-text-muted); }
.trk-map { flex: 1 1 auto; min-height: 0; }
#trkMap { width: 100%; height: 100%; }
.trk-bar {
    flex: none; display: flex; gap: 8px; padding: 10px 14px;
    background: var(--sp-bg-card); border-top: 1px solid var(--sp-border);
}
.trk-stat {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px; background: var(--sp-bg-input); border-radius: 8px;
}
.trk-stat span { font-size: 10px; letter-spacing: .4px; color: var(--sp-text-muted); font-weight: 700; }
.trk-stat b { font-size: 14px; font-weight: 800; color: var(--sp-text); }
.trk-mk {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--sp-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35); border: 2px solid #fff;
}
.trk-mk svg { width: 19px; height: 19px; }
.trk-invalid { max-width: 360px; margin: 80px auto 0; text-align: center; padding: 0 24px; color: var(--sp-text); }
.trk-invalid svg { width: 56px; height: 56px; color: var(--sp-text-muted); }
.trk-invalid h2 { font-size: 18px; font-weight: 800; margin: 14px 0 6px; }
.trk-invalid p { font-size: 13px; color: var(--sp-text-muted); line-height: 1.5; }

/* Canlı Takip — link paylaşım modalı */
.lt-share-modal {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 13000;
    display: none; align-items: center; justify-content: center; padding: 24px;
}
.lt-share-modal.show { display: flex; }
.lt-share-box {
    background: var(--sp-bg-card); border-radius: 12px; width: 440px; max-width: 95vw;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4); display: flex; flex-direction: column; overflow: hidden;
}
.lt-share-head {
    padding: 14px 16px; border-bottom: 1px solid var(--sp-border);
    background: linear-gradient(180deg, rgba(245, 158, 11, .07), transparent);
}
.lt-share-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--sp-text); }
.lt-share-title svg { width: 17px; height: 17px; color: var(--sp-primary); }
.lt-share-body { padding: 14px 16px; }
.lt-share-veh { font-size: 15px; font-weight: 800; color: var(--sp-text); margin-bottom: 12px; }
.lt-share-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; color: var(--sp-text); }
.lt-share-link { display: flex; gap: 8px; }
.lt-share-link input {
    flex: 1; min-width: 0; padding: 8px 10px; font-size: 12px;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 7px; color: var(--sp-text);
}
.lt-share-hint { font-size: 11px; color: var(--sp-text-muted); margin-top: 9px; line-height: 1.5; }
.lt-share-foot { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--sp-border); }

/* Haritada sağ tık menüsü */
.lt-ctxmenu {
    position: fixed; z-index: 14500; display: none;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 9px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .24); padding: 5px; min-width: 232px;
}
.lt-ctxmenu.show { display: block; }
.lt-ctx-item {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--sp-text); cursor: pointer;
    transition: background-color .12s ease;
}
.lt-ctx-item:hover { background: var(--sp-bg-input); }
.lt-ctx-item svg { width: 16px; height: 16px; color: var(--sp-primary); flex-shrink: 0; }

/* Adres Defterine Ekle modalı */
.sp-am-modal {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 14200;
    display: none; align-items: center; justify-content: center; padding: 24px;
}
.sp-am-modal.show { display: flex; }
.sp-am-box {
    /* 680 → 1040: Genel sekmesi artık form + harita iki kolon (2026-09-07) */
    background: var(--sp-bg-card); border-radius: 12px; width: 1040px; max-width: 96vw;
    height: 720px; max-height: 94vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.sp-am-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid var(--sp-border);
    background: linear-gradient(180deg, rgba(245, 158, 11, .07), transparent);
}
.sp-am-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--sp-text); }
.sp-am-title svg { width: 17px; height: 17px; color: var(--sp-primary); }
.sp-am-x { background: transparent; border: 0; font-size: 17px; color: var(--sp-text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background-color .15s ease; }
.sp-am-x:hover { background: var(--sp-bg-input); color: var(--sp-text); }
.sp-am-tabs { display: flex; border-bottom: 1px solid var(--sp-border); padding: 0 8px; }
.sp-am-tab {
    background: transparent; border: 0; padding: 10px 12px; font-size: 12px; font-weight: 600;
    color: var(--sp-text-muted); cursor: pointer; border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.sp-am-tab.active { color: var(--sp-primary-dark); border-bottom-color: var(--sp-primary); }
.sp-am-body { padding: 12px 16px; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; }
.sp-am-pane { display: none; }
.sp-am-pane.active { display: block; }
.sp-am-geo { position: relative; margin-bottom: 12px; }
.sp-am-geo input {
    width: 100%; padding: 8px 11px; font-size: 12.5px; border-radius: 7px;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border); color: var(--sp-text);
}
.sp-am-geo-results {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 5;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18); max-height: 220px; overflow-y: auto;
}
.sp-am-geo-item { padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--sp-border); }
.sp-am-geo-item:last-child { border-bottom: 0; }
.sp-am-geo-item:hover { background: var(--sp-bg-input); }
.sp-am-geo-item b { display: block; font-size: 12.5px; color: var(--sp-text); }
.sp-am-geo-item span { display: block; font-size: 11px; color: var(--sp-text-muted); }
.sp-am-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; }
.sp-am-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-bottom: 9px; }
.sp-am-f { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; min-width: 0; }
.sp-am-row > .sp-am-f, .sp-am-row3 > .sp-am-f { margin-bottom: 0; min-width: 0; }
.sp-am-f label { font-size: 11px; font-weight: 600; color: var(--sp-text-muted); }
.sp-am-in {
    padding: 7px 10px; font-size: 12.5px; border-radius: 7px; font-family: inherit;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border); color: var(--sp-text);
    width: 100%; min-width: 0; box-sizing: border-box;
}
.sp-am-in:invalid { border-color: #ef4444; }
.sp-am-in:focus { outline: none; border-color: var(--sp-primary); }
textarea.sp-am-in { resize: vertical; }
.sp-am-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sp-text); cursor: pointer; margin-bottom: 10px; }
.sp-am-coord { font-size: 11.5px; color: var(--sp-text-muted); }
.sp-am-coord b { color: var(--sp-text); margin-left: 6px; }
.sp-am-cov-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.sp-am-radio { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sp-text); cursor: pointer; }
.sp-am-rad-in { font-size: 12px; color: var(--sp-text-muted); }
.sp-am-rad-in input { width: 70px; padding: 4px 7px; border-radius: 6px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); color: var(--sp-text); }
.sp-am-map { height: 260px; border-radius: 9px; overflow: hidden; border: 1px solid var(--sp-border); }
/* Genel sekmesi — form (sol) + Haritada Konum (sağ); Logitera adres kartı paritesi */
.sp-am-genel { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.sp-am-genel-form { min-width: 0; }
.sp-am-mapcard {
    position: sticky; top: 0;
    padding: 12px;
    background-color: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
}
.sp-am-mapcard .sp-am-geo { margin-bottom: 10px; }
.sp-am-mapcard .sp-am-row { margin-bottom: 6px; }
.sp-am-mapcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.sp-am-mapcard-head svg { width: 15px; height: 15px; color: var(--sp-primary); flex-shrink: 0; }
.sp-am-mapcard-head small { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--sp-text-muted); }
#spAmMapSlotGenel .sp-am-map { height: 320px; margin-bottom: 10px; background-color: var(--sp-bg-card); }
#spAmMapSlotKapsama .sp-am-map { height: 260px; }
.sp-am-mapslot:empty { display: none; }
.sp-am-map-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-am-map-actions .sp-am-coord { margin-left: auto; }
@media (max-width: 980px) {
    .sp-am-genel { grid-template-columns: 1fr; }
    .sp-am-mapcard { position: static; }
}
.sp-am-cov-hint { font-size: 11px; color: var(--sp-text-muted); margin-top: 8px; line-height: 1.5; }
.sp-am-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--sp-border); }

/* Adres modalı — Kaydet butonu pasif görünümü (zorunlu alanlar dolana kadar) */
.lt-ap-btn:disabled, .lt-ap-btn.sp-am-disabled { opacity: .45; cursor: not-allowed; }
.lt-ap-btn:disabled:hover, .lt-ap-btn.sp-am-disabled:hover { background: var(--sp-bg-card); }
.lt-ap-btn.primary:disabled, .lt-ap-btn.primary.sp-am-disabled { background: var(--sp-primary); }

/* Adres modalı — Kapsama: elle çizim butonları */
.sp-am-poly-btns { display: none; align-items: center; gap: 6px; }
.sp-am-poly-btn {
    padding: 4px 10px; font-size: 11.5px; font-weight: 600; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--sp-border); background: var(--sp-bg-card); color: var(--sp-text);
    transition: background-color .12s ease;
}
.sp-am-poly-btn:hover { background: var(--sp-bg-input); }

/* Adres modalı — Adım C1: section başlık + toggle grid + tab overflow */
.sp-am-tabs { overflow-x: auto; white-space: nowrap; }
.sp-am-tabs::-webkit-scrollbar { height: 3px; }
.sp-am-tabs::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: 2px; }
.sp-am-sec {
    font-size: 13px;
    color: var(--sp-primary-dark); font-weight: 700;
    margin: 4px 0 10px; padding-bottom: 5px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-am-tog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.sp-am-tog {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 11px; border: 1px solid var(--sp-border); border-radius: 7px;
    background: var(--sp-bg-input); cursor: pointer;
}
.sp-am-tog .sp-am-tog-lbl { flex: 1; font-size: 11.5px; font-weight: 600; color: var(--sp-text); }
.sp-am-tog .lt-sw { width: 34px; height: 19px; }
.sp-am-tog .lt-sw-t::before { width: 15px; height: 15px; }
.sp-am-tog .lt-sw input:checked + .lt-sw-t::before { transform: translateX(15px); }

/* Adres modalı — Adım C2: dosya / resim yükleme */
.sp-am-files { margin-bottom: 12px; }
.sp-am-file-drop {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px; border: 2px dashed var(--sp-border); border-radius: 9px;
    background: var(--sp-bg-input); cursor: pointer;
    color: var(--sp-text-muted); font-size: 12.5px; font-weight: 600;
    transition: border-color .15s ease, background-color .15s ease;
}
.sp-am-file-drop:hover { border-color: var(--sp-primary); background: rgba(245, 158, 11, .06); color: var(--sp-text); }
.sp-am-file-drop svg { width: 18px; height: 18px; }
.sp-am-file-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.sp-am-file-list:empty { display: none; }
.sp-am-file-item {
    position: relative; border: 1px solid var(--sp-border); border-radius: 8px; overflow: hidden;
    background: var(--sp-bg-input); aspect-ratio: 1 / 1; display: flex; flex-direction: column;
}
.sp-am-file-thumb { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sp-am-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-am-file-thumb svg { width: 36px; height: 36px; color: var(--sp-text-muted); }
.sp-am-file-meta { padding: 4px 6px; background: var(--sp-bg-card); border-top: 1px solid var(--sp-border); font-size: 10px; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-am-file-rm {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
    background: rgba(0, 0, 0, .65); color: #fff; border: 0; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1;
}
.sp-am-file-rm:hover { background: #ef4444; }

/* Adres modalı — eksik zorunlu alan vurgusu (Kaydet'e basınca) */
.sp-am-in.sp-am-err { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); }

/* Canlı Takip — Bölge tipi custom dropdown (search + count) */
.lt-zd { position: relative; margin: 2px 0 4px; }
.lt-zd-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px; background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    border-radius: 6px; color: var(--sp-text); font-size: 12.5px; cursor: pointer;
    transition: border-color .12s ease;
}
.lt-zd-btn:hover { border-color: var(--sp-primary); }
.lt-zd-btn svg { width: 14px; height: 14px; color: var(--sp-text-muted); flex-shrink: 0; }
.lt-zd-pop {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 14100;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.lt-zd-pop.open { display: block; }
.lt-zd-srch { padding: 6px; border-bottom: 1px solid var(--sp-border); }
.lt-zd-srch input {
    width: 100%; padding: 5px 8px; font-size: 12px; border-radius: 6px;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border); color: var(--sp-text);
}
.lt-zd-list { max-height: 260px; overflow-y: auto; padding: 4px; }
.lt-zd-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 9px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--sp-text);
    transition: background-color .1s ease;
}
.lt-zd-item:hover { background: var(--sp-bg-input); }
.lt-zd-item.active { background: rgba(245, 158, 11, .14); color: var(--sp-primary-dark); font-weight: 700; }
.lt-zd-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-zd-count {
    flex-shrink: 0; min-width: 22px; text-align: center;
    background: var(--sp-bg-card); color: var(--sp-text-muted);
    padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 700;
    border: 1px solid var(--sp-border);
}
.lt-zd-item.active .lt-zd-count { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-zd-empty { padding: 12px; text-align: center; color: var(--sp-text-muted); font-size: 12px; }

/* POI panelinde çok satırlı değer (çalışma saatleri vb.) */
.lt-poi-multi { white-space: pre-line; line-height: 1.55; font-weight: 600; }

/* POI — yeni kategori dot renkleri */
.lt-poi-dot.truck_stop { background: #0ea5e9; }
.lt-poi-dot.car_wash { background: #06b6d4; }
.lt-poi-dot.toll { background: #dc2626; }
.lt-poi-dot.pharmacy { background: #10b981; }
.lt-poi-dot.atm { background: #a855f7; }

/* POI — kategori altı marka chip-row */
.lt-poi-brands { display: none; flex-wrap: wrap; gap: 4px; padding: 3px 22px 6px; }
.lt-poi-brands.show { display: flex; }
.lt-poi-brand {
    padding: 2px 8px; border: 1px solid var(--sp-border); border-radius: 11px;
    background: var(--sp-bg-card); color: var(--sp-text); font-size: 10.5px;
    font-weight: 600; cursor: pointer; user-select: none;
    transition: background-color .12s ease, border-color .12s ease;
}
.lt-poi-brand:hover { border-color: var(--sp-primary); }
.lt-poi-brand.active { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.lt-poi-brand .cnt {
    display: inline-block; margin-left: 4px; padding: 0 5px;
    background: rgba(0, 0, 0, .08); border-radius: 8px; font-size: 9.5px;
}
.lt-poi-brand.active .cnt { background: rgba(255, 255, 255, .25); }

/* POI panel — "En Yakın Aracım" vurgu */
.lt-poi-row.lt-poi-near b { color: var(--sp-primary-dark); }

/* ===== K5.8 — Compliance Audit sayfası (supplier portal /ComplianceAudit) ===== */
.ca-page { padding: 20px 24px; max-width: 1400px; margin: 0 auto; }
.ca-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ca-top-l { display: flex; align-items: center; gap: 10px; }
.ca-top-l svg { width: 24px; height: 24px; color: var(--sp-primary-dark); }
.ca-top-title { font-size: 18px; font-weight: 800; color: var(--sp-text); }
.ca-top-sub { font-size: 11.5px; color: var(--sp-text-muted); margin-left: 6px; }

.ca-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.ca-kpi {
    padding: 14px 16px; border-radius: 10px; border-left: 5px solid var(--kp-risk-c);
    background: var(--kp-risk-bg);
}
.ca-kpi b { display: block; font-size: 28px; font-weight: 800; color: var(--kp-risk-c); }
.ca-kpi span { font-size: 11px; color: var(--sp-text-muted); letter-spacing: .4px; }

.ca-filter {
    padding: 14px; background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    border-radius: 10px; margin-bottom: 14px;
}
.ca-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ca-filter-row label { font-size: 11px; font-weight: 700; color: var(--sp-text-muted); }

.ca-list-wrap {
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 10px; overflow: hidden;
}
.ca-list-head {
    display: grid; grid-template-columns: 160px 1fr 110px 1fr 140px 80px;
    gap: 10px; padding: 11px 14px; background: var(--sp-bg-input);
    border-bottom: 1px solid var(--sp-border);
    font-size: 10.5px; font-weight: 700; color: var(--sp-text-muted);
}
.ca-list { max-height: calc(100vh - 380px); overflow-y: auto; }
.ca-item {
    display: grid; grid-template-columns: 160px 1fr 110px 1fr 140px 80px;
    gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--sp-border);
    font-size: 12px; align-items: center;
    transition: background-color .12s ease;
}
.ca-item:hover { background: rgba(120,120,120,.06); }
.ca-item-when { color: var(--sp-text); }
.ca-item-when small { display: block; color: var(--sp-text-muted); font-size: 10.5px; }
.ca-item-entity { color: var(--sp-text); font-weight: 600; }
.ca-item-entity small { display: block; color: var(--sp-text-muted); font-weight: 400; }
.ca-item-risk { padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; text-align: center; color: var(--kp-risk-c); background: var(--kp-risk-bg); }
.ca-item-reason { color: var(--sp-text); font-size: 11.5px; line-height: 1.4; word-break: break-word; }
.ca-item-route { font-size: 11.5px; color: var(--sp-text); }
.ca-item-route small { display: block; color: var(--sp-text-muted); }
.ca-item-route a { color: var(--sp-primary-dark); text-decoration: none; }
.ca-act-btn {
    padding: 4px 10px; font-size: 11px; font-weight: 600;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    border-radius: 6px; color: var(--sp-text); cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.ca-act-btn:hover { background: rgba(120,120,120,.12); border-color: var(--sp-primary); }
.ca-empty { padding: 30px; text-align: center; color: var(--sp-text-muted); font-size: 12.5px; }

/* ============================================================================
   G3 — Sipariş Print/Export menüsü (modal header'da ⋮ dropdown) — KOMPAKT
   ============================================================================ */
.sp-modal-head-actions { display:flex; align-items:center; gap:6px; }
.op-print-menu { position:relative; }
.op-print-trigger { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; font-weight:600; font-size:12px; }
.op-print-trigger svg { width:13px; height:13px; }

/* hidden attribute UA stylesheet'ini class selector ezdiği için
   açık halini :not([hidden]) ile sınırla — varsayılan kapalı garantilenir */
.op-print-dropdown { display:none; }
.op-print-dropdown:not([hidden]) {
    position:absolute; right:0; top:calc(100% + 5px); z-index:9999;
    min-width:230px; background:#fff; border:1px solid #e5e7eb; border-radius:8px;
    box-shadow:0 10px 28px rgba(15,23,42,.16);
    padding:4px; display:flex; flex-direction:column; gap:1px;
}
.op-print-item {
    display:flex; align-items:flex-start; gap:8px; padding:6px 9px; border:0;
    background:transparent; border-radius:5px; cursor:pointer; text-align:left;
    transition:background-color .15s ease;
}
.op-print-item:hover { background:#f3f4f6; }
.op-print-item svg { width:13px; height:13px; color:#475569; flex-shrink:0; margin-top:1px; }
.op-print-item span { display:block; font-weight:600; font-size:11px; color:#0f172a; line-height:1.25; }
.op-print-item small { display:block; font-size:9.5px; color:#64748b; margin-top:1px; line-height:1.2; }
.op-print-item-strong { background:#f8fafc; border:1px dashed #cbd5e1; }
.op-print-item-strong:hover { background:#eef2ff; border-color:#797bf2; }
.op-print-item-strong span { color:#4338ca; }
.op-print-sep { height:1px; background:#e5e7eb; margin:3px 0; }
.op-print-item:disabled { opacity:.5; cursor:not-allowed; }
.op-print-item:disabled:hover { background:transparent; }

/* ============================================================================
   G4 — Mail Composer Popup — KOMPAKT (fontlar ~%25 küçük, modal daha geniş)
   ============================================================================ */
.op-mail-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; font-weight:600; font-size:12px; }
.op-mail-btn svg { width:13px; height:13px; }

.op-mail-modal { width:min(1340px, 96vw); }
.op-mail-body {
    display:grid; grid-template-columns: 230px 1fr; gap:12px;
    padding:10px 14px !important;
}

/* Şablon kolonu */
.op-mail-tpl-col { background:#f9fafb; border:1px solid #e5e7eb; border-radius:6px; padding:8px; display:flex; flex-direction:column; gap:7px; }
.op-mail-tpl-title { font-weight:600; font-size:10.5px; color:#0f172a; display:flex; align-items:center; gap:5px; letter-spacing:.3px; }
.op-mail-tpl-title svg { width:12px; height:12px; color:#64748b; }
.op-mail-tpl-grid { display:flex; flex-direction:column; gap:4px; max-height:560px; overflow-y:auto; padding-right:3px; }
.op-mail-tpl-grid::-webkit-scrollbar { width:5px; }
.op-mail-tpl-grid::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.op-mail-tpl-card {
    background:#fff; border:1px solid #e5e7eb; border-radius:5px; padding:6px 8px;
    cursor:pointer;
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .1s ease;
    display:flex; align-items:center; gap:7px;
    position:relative;
}
.op-mail-tpl-card:hover { border-color:#c7d2fe; background:#fafbff; transform:translateX(1px); }
/* Aktif kart — sol mor şerit + glow + hafif "öne çıkma" */
.op-mail-tpl-card.active {
    border-color:#797bf2; background:#eef2ff;
    box-shadow: inset 3px 0 0 #797bf2, 0 2px 8px rgba(121,123,242,.15);
    transform:translateX(2px);
}
.op-mail-tpl-card.active .op-mail-tpl-card-name { color:#4338ca; }
.op-mail-tpl-card.active .op-mail-tpl-card-icon { box-shadow:0 0 0 2px rgba(121,123,242,.18); }

.op-mail-tpl-card-icon {
    width:22px; height:22px; border-radius:5px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff;
    transition:box-shadow .15s ease;
}
.op-mail-tpl-card-icon svg { width:12px; height:12px; }
.op-mail-tpl-card-body { flex:1; min-width:0; }
.op-mail-tpl-card-name { font-size:10.5px; font-weight:600; color:#0f172a; line-height:1.2; }
.op-mail-tpl-card-cat { font-size:9px; color:#64748b; margin-top:1px; line-height:1.2; }
.op-mail-tpl-foot { padding-top:6px; border-top:1px dashed #cbd5e1; }
.op-mail-tpl-foot small { color:#64748b; font-size:9px; line-height:1.35; }

/* Şablon kategori renkleri — canlı modern paleti (siyah/karanlık kasvet yok) */
.tpl-cat-operasyon { background:linear-gradient(135deg, #6366f1, #4f46e5); }
.tpl-cat-gumruk    { background:linear-gradient(135deg, #0ea5e9, #0284c7); }
.tpl-cat-finans    { background:linear-gradient(135deg, #10b981, #059669); }
.tpl-cat-iletisim  { background:linear-gradient(135deg, #14b8a6, #0d9488); }
.tpl-cat-genel     { background:linear-gradient(135deg, #94a3b8, #64748b); }

/* Composer kolon */
.op-mail-form-col { display:flex; flex-direction:column; gap:7px; min-width:0; }
.op-mail-row { display:flex; flex-direction:column; gap:3px; }
.op-mail-row-2col { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.op-mail-row-2col > div { display:flex; flex-direction:column; gap:3px; }
.op-mail-lbl { font-size:10px; font-weight:600; color:#475569; display:flex; align-items:center; gap:7px; letter-spacing:.3px; }
.op-mail-req { color:#ef4444; }

/* Input alanları kompakt */
.op-mail-form-col input[type=text],
.op-mail-form-col input[type=email],
.op-mail-form-col textarea,
.op-mail-form-col select {
    padding:5px 8px; font-size:11.5px; border:1px solid #cbd5e1; border-radius:4px;
    background:#fff; color:#0f172a;
}
.op-mail-form-col input:focus,
.op-mail-form-col textarea:focus,
.op-mail-form-col select:focus {
    outline:none; border-color:#797bf2; box-shadow:0 0 0 2px rgba(121,123,242,.15);
}

.op-mail-preview-btn {
    margin-left:auto; padding:2px 7px; font-size:9.5px; border:1px solid #cbd5e1; border-radius:4px;
    background:#fff; color:#475569; display:inline-flex; align-items:center; gap:3px; cursor:pointer;
}
.op-mail-preview-btn:hover { background:#f3f4f6; border-color:#797bf2; color:#797bf2; }
.op-mail-preview-btn svg { width:10px; height:10px; }

.op-mail-body-row { position:relative; }
.op-mail-body-area { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:10.5px; line-height:1.45; resize:vertical; min-height:160px; }
.op-mail-preview { border:1px solid #e5e7eb; border-radius:5px; padding:10px; background:#fff; min-height:160px; max-height:320px; overflow-y:auto; font-size:11.5px; }

/* Ekler */
.op-mail-attach { border:1px solid #e5e7eb; border-radius:6px; padding:8px; background:#fafbfc; display:flex; flex-direction:column; gap:6px; }
.op-mail-attach-head { display:flex; justify-content:space-between; align-items:center; }
.op-mail-attach-head strong { font-size:10.5px; color:#0f172a; letter-spacing:.3px; }
.op-mail-attach-count { font-size:9.5px; color:#64748b; background:#fff; padding:1px 7px; border-radius:10px; border:1px solid #e5e7eb; }
.op-mail-attach-sec { font-size:9px; font-weight:700; color:#64748b; letter-spacing:.4px; margin-bottom:3px; }
.op-mail-attach-gen, .op-mail-attach-docs, .op-mail-attach-files { display:flex; flex-direction:column; gap:3px; }
.op-mail-attach-gen { flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; }
.op-mail-attach-gen .op-mail-attach-sec { width:100%; margin:0; }
.op-mail-genchip {
    display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:12px;
    background:#fff; border:1px solid #e5e7eb; cursor:pointer; font-size:10px;
    transition:border-color .15s ease, background-color .15s ease;
}
.op-mail-genchip input { accent-color:#797bf2; cursor:pointer; width:11px; height:11px; }
.op-mail-genchip:hover { border-color:#797bf2; }
.op-mail-genchip input:checked + span { color:#4338ca; font-weight:600; }

.op-mail-docs-list { display:flex; flex-direction:column; gap:3px; max-height:140px; overflow-y:auto; padding-right:2px; }
.op-mail-docs-empty { font-size:10px; color:#94a3b8; font-style:italic; padding:3px 0; }
.op-mail-docitem {
    display:flex; align-items:center; gap:6px; padding:3px 6px;
    background:#fff; border:1px solid #e5e7eb; border-radius:4px;
    transition:border-color .15s ease, background-color .15s ease;
}
.op-mail-docitem:hover { border-color:#c7d2fe; background:#fafbff; }
.op-mail-docitem input { accent-color:#797bf2; cursor:pointer; width:12px; height:12px; flex-shrink:0; }
/* Thumb (sol) — resim vs doc ayrımı, tıklanabilir önizleme tetikleyici */
.op-mail-docitem-thumb {
    width:22px; height:22px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:3px; cursor:pointer;
    transition:background-color .15s ease, color .15s ease;
}
.op-mail-docitem-thumb svg { width:12px; height:12px; }
.op-mail-docitem[data-isimg="1"] .op-mail-docitem-thumb { background:rgba(16,185,129,.12); color:#059669; }
.op-mail-docitem[data-isimg="1"] .op-mail-docitem-thumb:hover { background:rgba(16,185,129,.22); }
.op-mail-docitem[data-isimg="0"] .op-mail-docitem-thumb { background:rgba(15,23,42,.06); color:#64748b; }
.op-mail-docitem[data-isimg="0"] .op-mail-docitem-thumb:hover { background:rgba(15,23,42,.12); color:#0f172a; }
.op-mail-docitem-name {
    flex:1; min-width:0; font-size:10.5px; color:#0f172a; font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
}
.op-mail-docitem-name:hover { color:#797bf2; text-decoration:underline; }
.op-mail-docitem-type { font-size:9px; color:#64748b; background:#f1f5f9; padding:1px 6px; border-radius:6px; flex-shrink:0; font-weight:500; }
/* Sağ tarafta küçük preview/download butonu */
.op-mail-docitem-preview {
    width:22px; height:22px; padding:0; flex-shrink:0;
    background:transparent; border:1px solid transparent; border-radius:3px;
    color:#64748b; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.op-mail-docitem-preview:hover { background:#f1f5f9; color:#797bf2; border-color:#c7d2fe; }
.op-mail-docitem-preview svg { width:12px; height:12px; }

.op-mail-userfiles { display:flex; flex-direction:column; gap:3px; }
.op-mail-userfile {
    display:flex; align-items:center; gap:6px; padding:3px 7px; background:#eef2ff; border:1px dashed #cbd5e1; border-radius:4px; font-size:10.5px;
}
.op-mail-userfile-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-mail-userfile-del { background:transparent; border:0; cursor:pointer; color:#ef4444; padding:0; }
.op-mail-userfile-del:hover { color:#dc2626; }

.op-mail-addfile {
    display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:1px dashed #cbd5e1; border-radius:4px;
    background:#fff; cursor:pointer; font-size:10.5px; color:#475569; align-self:flex-start;
    transition:border-color .15s ease, color .15s ease;
}
.op-mail-addfile:hover { border-color:#797bf2; color:#797bf2; }
.op-mail-addfile svg { width:11px; height:11px; }
.op-mail-hint { font-size:9px; color:#94a3b8; }

/* ============================================================================
   G4M6 — Mail Composer: Compose/History segment toggle + history list — KOMPAKT
   ============================================================================ */
.op-mail-segment {
    display:inline-flex; align-self:flex-start; background:#f1f5f9; border-radius:5px;
    padding:2px; gap:2px; margin-bottom:3px;
}
.op-mail-seg {
    background:transparent; border:0; padding:3px 10px; font-size:10px; font-weight:600;
    color:#64748b; cursor:pointer; border-radius:3px; display:inline-flex; align-items:center; gap:5px;
    transition:background-color .15s ease, color .15s ease; letter-spacing:.3px;
}
.op-mail-seg:hover { color:#0f172a; }
.op-mail-seg.active { background:#fff; color:#0f172a; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.op-mail-seg-count {
    background:#797bf2; color:#fff; font-size:8.5px; padding:1px 5px; border-radius:7px; font-weight:700;
}
.op-mail-seg.active .op-mail-seg-count { background:#797bf2; }

/* History panel — [hidden] CSS specificity bug fix:
   .op-mail-hist class selector UA [hidden] kuralını ezerdi → loader "Yeni Mail"de bile görünürdü */
.op-mail-hist { display:none; }
.op-mail-hist:not([hidden]) { display:flex; flex-direction:column; gap:3px; max-height:560px; overflow-y:auto; padding-right:3px; }
.op-mail-hist-empty { padding:18px 12px; text-align:center; color:#94a3b8; font-size:10.5px; font-style:italic; }
.op-mail-hist-item {
    background:#fff; border:1px solid #e5e7eb; border-radius:5px; padding:7px 9px;
    transition:border-color .15s ease;
}
.op-mail-hist-item:hover { border-color:#cbd5e1; }
.op-mail-hist-row1 { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.op-mail-hist-subject { flex:1; font-weight:600; font-size:10.5px; color:#0f172a; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-mail-hist-status { font-size:8.5px; padding:1px 6px; border-radius:8px; font-weight:600; flex-shrink:0; letter-spacing:.3px; }
.op-mail-hist-status.ok { background:#dcfce7; color:#15803d; }
.op-mail-hist-status.err { background:#fee2e2; color:#b91c1c; }
.op-mail-hist-row2 { font-size:9.5px; color:#64748b; margin-top:3px; display:flex; gap:7px; flex-wrap:wrap; }
.op-mail-hist-meta-to { color:#475569; }
.op-mail-hist-meta-att { background:#f1f5f9; padding:1px 5px; border-radius:6px; }
.op-mail-hist-actions { margin-top:5px; display:flex; gap:5px; }
.op-mail-hist-action {
    font-size:9.5px; padding:2px 7px; border:1px solid #e5e7eb; border-radius:3px; background:#fff;
    cursor:pointer; color:#475569; display:inline-flex; align-items:center; gap:3px;
}
.op-mail-hist-action:hover { border-color:#797bf2; color:#797bf2; }
.op-mail-hist-action svg { width:10px; height:10px; }
.op-mail-hist-body { margin-top:6px; padding:8px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:3px; max-height:200px; overflow-y:auto; font-size:10.5px; }
.op-mail-hist-body[hidden] { display:none; }
.op-mail-hist-err { margin-top:5px; padding:5px 8px; background:#fef2f2; border-left:3px solid #ef4444; color:#991b1b; font-size:9.5px; border-radius:0 3px 3px 0; }

/* ============================================================================
   G4M7 — Sipariş Olay Geçmişi / Timeline
   ============================================================================ */
.op-events-toolbar { display:flex; justify-content:space-between; align-items:center; padding:6px 8px 12px; }
.op-events-title { font-weight:600; font-size:14px; color:#0f172a; display:flex; align-items:center; gap:8px; }
.op-events-title svg { width:16px; height:16px; color:#475569; }
.op-event-add-btn { display:inline-flex; align-items:center; gap:6px; }
.op-event-add-btn svg { width:14px; height:14px; }

.op-event-addform { background:#fafbff; border:1px dashed #cbd5e1; border-radius:8px; padding:14px; margin-bottom:14px; }
.op-event-addgrid { display:grid; grid-template-columns: 200px 1fr; gap:10px 12px; }
.op-event-cell { display:flex; flex-direction:column; gap:4px; }
.op-event-cell-full { grid-column: 1 / -1; }
.op-event-cell label { font-size:11px; font-weight:600; color:#64748b; }
.op-event-cell select, .op-event-cell input, .op-event-cell textarea {
    padding:7px 10px; border:1px solid #cbd5e1; border-radius:4px; font-size:13px; font-family:inherit;
    background:#fff; color:#0f172a;
}
.op-event-cell select:focus, .op-event-cell input:focus, .op-event-cell textarea:focus {
    outline:none; border-color:#797bf2; box-shadow:0 0 0 3px rgba(121,123,242,.12);
}
.op-event-actions { grid-column: 1 / -1; display:flex; gap:8px; justify-content:flex-end; }

/* Timeline */
.op-event-timeline { padding:0 8px 12px; position:relative; }
.op-event-empty { text-align:center; padding:32px 16px; color:#94a3b8; font-style:italic; font-size:13px; }
.op-event-row {
    display:grid; grid-template-columns: 36px 1fr; gap:12px; padding:10px 0; position:relative;
}
.op-event-row::before {
    content:''; position:absolute; left:17px; top:34px; bottom:-10px; width:2px; background:#e5e7eb;
}
.op-event-row:last-child::before { display:none; }

.op-event-icon {
    width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:#fff; z-index:1; position:relative;
}
.op-event-icon svg { width:16px; height:16px; }
.op-event-icon.t-ORDER_CREATED   { background:#10b981; }
.op-event-icon.t-ORDER_UPDATED   { background:#64748b; }
.op-event-icon.t-STATUS_CHANGE   { background:#797bf2; }
.op-event-icon.t-NOTE            { background:#3b3b40; }
.op-event-icon.t-FLAG            { background:#f59e0b; }
.op-event-icon.t-DELAY           { background:#ef4444; }
.op-event-icon.t-CONTACT         { background:#0ea5e9; }
.op-event-icon.t-MAIL_SENT       { background:#6366f1; }
.op-event-icon.t-DOC_UPLOAD      { background:#0f766e; }
.op-event-icon.t-DOC_DELETE      { background:#94a3b8; }
.op-event-icon.t-OTHER           { background:#6b7280; }

.op-event-card {
    background:#fff; border:1px solid #e5e7eb; border-radius:6px; padding:10px 12px;
}
.op-event-row1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.op-event-label { font-weight:600; font-size:13px; color:#0f172a; flex:1; min-width:0; }
.op-event-type-badge {
    font-size:10px; padding:2px 8px; border-radius:10px; background:#f1f5f9; color:#475569;
    letter-spacing:.3px;
}
.op-event-row2 { font-size:11px; color:#64748b; margin-top:2px; display:flex; gap:10px; flex-wrap:wrap; }
.op-event-note { margin-top:6px; padding:6px 10px; background:#f9fafb; border-left:3px solid #e5e7eb; font-size:12px; color:#0f172a; border-radius:0 4px 4px 0; white-space:pre-wrap; }
.op-event-change { margin-top:6px; font-size:11px; color:#475569; display:flex; gap:4px; align-items:center; }
.op-event-change-old { background:#fee2e2; color:#991b1b; padding:1px 6px; border-radius:4px; }
.op-event-change-new { background:#dcfce7; color:#15803d; padding:1px 6px; border-radius:4px; }
.op-event-row.virtual .op-event-card { background:#fafbfc; }
.op-event-row.virtual .op-event-label { color:#475569; }

/* ============================================================================
   G5 — Compliance (Kural Motoru) UI
   ============================================================================ */

/* Header — title satırı (h3 + status chip + compliance chip inline) */
.op-title-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Sipariş durum chip — backend renkleriyle dinamik (geowix_order_status_*_color) */
.op-status-chip {
    display:inline-flex; align-items:center;
    padding:2px 9px; border-radius:10px; font-size:9.5px; font-weight:700;
    background:#f1f5f9; color:#475569; border:1px solid transparent;
    letter-spacing:.3px; line-height:1.3;
    white-space:nowrap;
}

/* Header compliance chip — kompakt, h3 yanında bayrak */
.op-compliance-chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:2px 8px; border-radius:10px; font-size:9.5px; font-weight:700;
    background:#f1f5f9; color:#475569; border:1px solid #e5e7eb;
    letter-spacing:.3px;
    line-height:1.3;
}
.op-compliance-dot { width:6px; height:6px; border-radius:50%; background:#94a3b8; }
.op-compliance-chip.ok    { background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
.op-compliance-chip.ok    .op-compliance-dot { background:#10b981; }
.op-compliance-chip.warn  { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.op-compliance-chip.warn  .op-compliance-dot { background:#f59e0b; }
.op-compliance-chip.block { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.op-compliance-chip.block .op-compliance-dot { background:#ef4444; }
.op-compliance-chip.info  { background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
.op-compliance-chip.info  .op-compliance-dot { background:#3b82f6; }

/* Belgeler tab'ı içinde banner */
/* Kompakt — yükseklik ~%30 azaltıldı, sipariş içinde dikey alan kazanıyor */
.op-compliance-banner {
    border-radius:6px; padding:0; margin:6px 6px 10px; border:1px solid #e5e7eb; overflow:hidden;
    background:#fff;
}
.op-cb-head {
    display:flex; align-items:center; gap:8px; padding:6px 10px;
    border-bottom:1px solid #e5e7eb;
}
.op-cb-head-icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.op-cb-head-icon svg { width:11px; height:11px; }
.op-cb-head-text { flex:1; min-width:0; }
.op-cb-head-title { font-weight:700; font-size:11.5px; color:#0f172a; line-height:1.2; }
.op-cb-head-sub { font-size:9.5px; color:#64748b; margin-top:1px; line-height:1.2; }
.op-cb-toggle {
    background:transparent; border:0; cursor:pointer; padding:3px 6px; color:#64748b; border-radius:3px;
    display:inline-flex; align-items:center; gap:3px; font-size:10px;
}
.op-cb-toggle:hover { background:#f1f5f9; color:#0f172a; }
.op-cb-toggle svg { width:9px; height:9px; transition:transform .2s ease; }
.op-cb-toggle.expanded svg { transform:rotate(180deg); }

/* Severity-color border (sol) */
.op-compliance-banner.sev-ok     { border-color:#10b981; }
.op-compliance-banner.sev-warn   { border-color:#f59e0b; }
.op-compliance-banner.sev-block  { border-color:#ef4444; }
.op-compliance-banner.sev-ok    .op-cb-head { background:#f0fdf4; }
.op-compliance-banner.sev-warn  .op-cb-head { background:#fffbeb; }
.op-compliance-banner.sev-block .op-cb-head { background:#fef2f2; }
.op-compliance-banner.sev-ok    .op-cb-head-icon { background:#10b981; }
.op-compliance-banner.sev-warn  .op-cb-head-icon { background:#f59e0b; }
.op-compliance-banner.sev-block .op-cb-head-icon { background:#ef4444; }

.op-cb-body { padding:0; }
.op-cb-body[hidden] { display:none; }
.op-cb-section-title {
    padding:5px 10px; font-size:9.5px; font-weight:700; color:#64748b;
    letter-spacing:.4px; background:#f9fafb; border-top:1px solid #f1f5f9;
}
.op-cb-item {
    display:flex; align-items:center; gap:7px; padding:5px 10px; border-top:1px solid #f1f5f9;
    font-size:10.5px;
}
.op-cb-item-icon { width:13px; height:13px; flex-shrink:0; }
.op-cb-item.present .op-cb-item-icon { color:#10b981; }
.op-cb-item.missing-block .op-cb-item-icon { color:#ef4444; }
.op-cb-item.missing-warn .op-cb-item-icon  { color:#f59e0b; }
.op-cb-item.missing-info .op-cb-item-icon  { color:#3b82f6; }
.op-cb-item-doc { font-weight:600; color:#0f172a; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-cb-item-rule { font-size:9.5px; color:#64748b; }
.op-cb-item-sev { font-size:8.5px; padding:1px 6px; border-radius:8px; font-weight:700; letter-spacing:.3px; }
.op-cb-item-sev.BLOCK { background:#fee2e2; color:#991b1b; }
.op-cb-item-sev.WARN  { background:#fef3c7; color:#92400e; }
.op-cb-item-sev.INFO  { background:#dbeafe; color:#1e40af; }
.op-cb-item.present .op-cb-item-sev { opacity:.5; }

.op-cb-empty { padding:10px; text-align:center; color:#94a3b8; font-style:italic; font-size:10.5px; }

/* ============================================================================
   G6 — Pulse Şeridi (Operasyon dashboard) + Anomali Popup
   ============================================================================ */

/* PULSE BAR — kompakt 8 metrik kart, responsive grid */
.op-pulse-bar {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap:8px; margin-bottom:14px;
}
.op-pulse-card {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:#fff; border:1px solid #e5e7eb; border-radius:8px;
    border-left:3px solid #94a3b8;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.op-pulse-clickable { cursor:pointer; }
.op-pulse-clickable:hover { box-shadow:0 4px 12px rgba(15,23,42,.06); }
/* Aktif KPI filter — primary border + soft amber arka plan */
.op-pulse-clickable.active {
    border-color: var(--sp-primary);
    background: rgba(245, 158, 11, 0.05);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.12);
}
.op-pulse-clickable.active .op-pulse-value { color: var(--sp-primary-dark); }

/* ============ Operasyon hızlı filtre stripleri (op-quick-filters) ============
   Tarih chip'leri + Durum multi-select chip stripi. Toolbar altında subtle bg ile ayrılır. */
.op-quick-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    margin-bottom: 10px;
}
.op-qf-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 26px;
}
.op-qf-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
    letter-spacing: 0.3px;
    margin-right: 4px;
    min-width: 50px;
}
.op-qf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--sp-bg-card);
    color: var(--sp-text-muted);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.op-qf-chip:hover {
    background: var(--sp-bg-input);
    border-color: rgba(245, 158, 11, 0.35);
    color: var(--sp-text);
}
.op-qf-chip.active {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
    font-weight: 600;
}
.op-qf-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.op-qf-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sp-text-muted);
    flex-shrink: 0;
}
.op-qf-clear {
    width: 22px; height: 22px;
    padding: 0;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
    color: var(--sp-text-muted);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    margin-left: 4px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.op-qf-clear:hover {
    background: #ef4444; border-color: #ef4444; color: #fff;
}
/* Dark tema — chip border yumuşat */
body.is-dark .op-qf-chip { border-color: rgba(255, 255, 255, 0.08); }

.op-pulse-icon {
    width:32px; height:32px; border-radius:6px;
    background:#f1f5f9; display:flex; align-items:center; justify-content:center;
    color:#475569; flex-shrink:0;
}
.op-pulse-icon svg { width:16px; height:16px; }
.op-pulse-body { flex:1; min-width:0; }
.op-pulse-label { font-size:11px; color:#64748b; font-weight:500; line-height:1.2; }
.op-pulse-value { font-size:18px; font-weight:700; color:#0f172a; line-height:1.2; margin-top:2px; }

/* Tip renkleri */
.op-pulse-card.t-active    { border-left-color:#3b3b40; }
.op-pulse-card.t-active    .op-pulse-icon { background:#eef0f2; color:#3b3b40; }
.op-pulse-card.t-today     { border-left-color:#10b981; }
.op-pulse-card.t-today     .op-pulse-icon { background:#dcfce7; color:#15803d; }
.op-pulse-card.t-pickup    { border-left-color:#0ea5e9; }
.op-pulse-card.t-pickup    .op-pulse-icon { background:#e0f2fe; color:#0369a1; }
.op-pulse-card.t-delivery  { border-left-color:#6366f1; }
.op-pulse-card.t-delivery  .op-pulse-icon { background:#e0e7ff; color:#4338ca; }
.op-pulse-card.t-overdue   { border-left-color:#ef4444; }
.op-pulse-card.t-overdue   .op-pulse-icon { background:#fee2e2; color:#b91c1c; }
.op-pulse-card.t-anomaly   { border-left-color:#f59e0b; }
.op-pulse-card.t-anomaly   .op-pulse-icon { background:#fef3c7; color:#92400e; }
.op-pulse-card.t-compliance{ border-left-color:#10b981; }
.op-pulse-card.t-compliance .op-pulse-icon { background:#dcfce7; color:#15803d; }
.op-pulse-card.t-refresh   { border-left-color:#797bf2; }
.op-pulse-card.t-refresh   .op-pulse-icon { background:#eef2ff; color:#4338ca; }
.op-pulse-card.t-refresh   .op-pulse-value { font-size:13px; }

/* Active state — kritik sayılarda kırmızı pulse */
.op-pulse-card.alert { animation: opPulseAlert 1.4s ease-in-out infinite; }
@keyframes opPulseAlert {
    0%, 100% { background:#fff; }
    50% { background:#fef2f2; }
}

/* ANOMALI POPUP */
.op-anomaly-modal { width:min(960px, 96vw); }
.op-anomaly-body { padding:14px 18px !important; display:flex; flex-direction:column; gap:12px; }
.op-anomaly-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.op-anomaly-filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.op-anomaly-filters select {
    padding:6px 10px; border:1px solid #cbd5e1; border-radius:4px; font-size:12px; background:#fff;
}
.op-anomaly-filters select:focus { outline:none; border-color:#797bf2; }

.op-anomaly-list { display:flex; flex-direction:column; gap:6px; max-height:540px; overflow-y:auto; padding-right:4px; }
.op-anomaly-empty { padding:32px 16px; text-align:center; color:#94a3b8; font-style:italic; font-size:13px; }

.op-anomaly-item {
    background:#fff; border:1px solid #e5e7eb; border-radius:6px; padding:10px 12px;
    border-left:4px solid #94a3b8;
}
.op-anomaly-item.sev-CRITICAL,
.op-anomaly-item.sev-HIGH { border-left-color:#ef4444; }
.op-anomaly-item.sev-MEDIUM { border-left-color:#f59e0b; }
.op-anomaly-item.sev-LOW { border-left-color:#3b82f6; }
.op-anomaly-item.resolved { opacity:.55; border-left-color:#10b981; }

.op-anomaly-row1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.op-anomaly-type-badge { font-size:10px; padding:2px 8px; border-radius:10px; font-weight:700; }
.op-anomaly-type-badge.BLOCK_MISSING    { background:#fee2e2; color:#991b1b; }
.op-anomaly-type-badge.DELIVERY_OVERDUE { background:#fef3c7; color:#92400e; }
.op-anomaly-type-badge.PICKUP_OVERDUE   { background:#fef3c7; color:#92400e; }
.op-anomaly-type-badge.NO_DOCS          { background:#e0e7ff; color:#4338ca; }
.op-anomaly-sev-badge { font-size:10px; padding:2px 8px; border-radius:10px; font-weight:700; }
.op-anomaly-sev-badge.CRITICAL, .op-anomaly-sev-badge.HIGH { background:#fee2e2; color:#991b1b; }
.op-anomaly-sev-badge.MEDIUM { background:#fef3c7; color:#92400e; }
.op-anomaly-sev-badge.LOW    { background:#dbeafe; color:#1e40af; }
.op-anomaly-order { font-weight:600; font-size:12px; color:#475569; }
.op-anomaly-order a { color:#797bf2; text-decoration:none; cursor:pointer; }
.op-anomaly-order a:hover { text-decoration:underline; }

.op-anomaly-desc { font-size:13px; color:#0f172a; margin-top:6px; line-height:1.4; }
.op-anomaly-meta { font-size:11px; color:#64748b; margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; }

.op-anomaly-actions { margin-top:8px; display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.op-anomaly-resolve-input {
    flex:1; padding:5px 8px; font-size:12px; border:1px solid #cbd5e1; border-radius:4px;
    max-width:300px;
}
.op-anomaly-resolve-input:focus { outline:none; border-color:#797bf2; }
.op-anomaly-resolve-btn {
    padding:5px 12px; font-size:12px; background:#10b981; color:#fff; border:0; border-radius:4px;
    cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:4px;
}
.op-anomaly-resolve-btn:hover { background:#059669; }
.op-anomaly-resolve-btn svg { width:11px; height:11px; }

.op-anomaly-resolved-info {
    margin-top:6px; font-size:11px; color:#15803d; padding:5px 10px; background:#dcfce7; border-radius:4px;
}

/* Olay Akışı paneli — kp-cockpit z-index 2500 üstüne çıksın (1051 default yetersiz) */
#kpEventPanel { z-index: 2600; }

/* ============================================================================
   SİPARİŞ MODAL — Üst Özet Şeridi (KPI + Timeline + Smart Panel + Quick Actions)
   Tasarım: kompakt, hep görünür, hiç tıklamadan tam resim
   ============================================================================ */

/* A) KPI ŞERİDİ */
.op-osum { margin-bottom: 12px; }
.op-osum-kpis {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
    margin-bottom: 10px;
}
.op-osum-kpi {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 8px;
    background: #fff; border: 1px solid var(--sp-border);
    border-radius: 6px;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.op-osum-kpi:hover { border-color: rgba(121, 123, 242, 0.4); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05); }
.op-osum-kpi-ico {
    width: 26px; height: 26px; border-radius: 5px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.op-osum-kpi-ico svg { width: 13px; height: 13px; }
.op-osum-ico-pkg    { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.op-osum-ico-weight { background: linear-gradient(135deg, #f59e0b, #d97706); }
.op-osum-ico-volume { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.op-osum-ico-doc    { background: linear-gradient(135deg, #10b981, #059669); }
.op-osum-ico-mail   { background: linear-gradient(135deg, #ec4899, #db2777); }
.op-osum-ico-age    { background: linear-gradient(135deg, #94a3b8, #64748b); }
.op-osum-kpi-body { flex: 1; min-width: 0; }
.op-osum-kpi-v {
    font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.1;
    display: flex; align-items: baseline; gap: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-osum-kpi-v small { font-size: 9.5px; font-weight: 600; color: #64748b; }
.op-osum-kpi-l { font-size: 9.5px; color: #64748b; font-weight: 500; line-height: 1.2; margin-top: 1px; }

/* B) STATÜ TIMELINE — yatay 4 nokta + ilerleme çizgisi */
.op-tline {
    position: relative; padding: 14px 20px 6px;
    background: #fff; border: 1px solid var(--sp-border); border-radius: 6px;
}
.op-tline-bar {
    position: absolute; left: 38px; right: 38px; top: 22px; height: 3px;
    background: #e5e7eb; border-radius: 2px;
}
.op-tline-fill {
    height: 100%; background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 2px; transition: width .35s ease;
}
.op-tline-steps {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.op-tline-step {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    cursor: default;
}
.op-tline-dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid #cbd5e1;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.op-tline-step.done .op-tline-dot { background: #10b981; border-color: #10b981; }
.op-tline-step.active .op-tline-dot {
    background: #10b981; border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
    transform: scale(1.1);
}
.op-tline-lbl { font-size: 10px; color: #64748b; font-weight: 500; }
.op-tline-step.done .op-tline-lbl,
.op-tline-step.active .op-tline-lbl { color: #059669; font-weight: 600; }
/* Terminal başarısız (101 Teslim Edilemedi / 102 İptal / 103 İade) — ilerleme yeşil, son adım kırmızı */
.op-tline-failed .op-tline-fill { background: linear-gradient(90deg, #10b981, #ef4444); }
.op-tline-failed .op-tline-step.active .op-tline-dot { background: #ef4444; border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2); }
.op-tline-failed .op-tline-step.active .op-tline-lbl { color: #ef4444; }

/* C) AKILLI ÖNERİLER KARTI */
.op-smart-card {
    margin-top: 10px;
    background: linear-gradient(135deg, #fafbff, #f5f7ff);
    border: 1px solid #e0e7ff; border-radius: 6px;
    padding: 9px 10px;
}
.op-smart-head {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 7px;
    font-size: 10.5px; font-weight: 700; color: #4338ca;
    letter-spacing: .3px;
}
.op-smart-head svg { width: 13px; height: 13px; color: #797bf2; }
.op-smart-items { display: flex; flex-direction: column; gap: 5px; }
.op-smart-item {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 6px 8px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 5px;
    font-size: 10.5px; color: #0f172a; line-height: 1.35;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.op-smart-item:hover { border-color: #c7d2fe; background: #fafbff; }
.op-smart-item-ico {
    width: 18px; height: 18px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
}
.op-smart-item-ico svg { width: 11px; height: 11px; }
.op-smart-item-body { flex: 1; min-width: 0; }
.op-smart-item-title { font-weight: 600; }
.op-smart-item-meta { font-size: 9.5px; color: #64748b; margin-top: 1px; }
.op-smart-item.sev-block .op-smart-item-ico { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.op-smart-item.sev-warn  .op-smart-item-ico { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.op-smart-item.sev-ok    .op-smart-item-ico { background: rgba(16, 185, 129, 0.14); color: #059669; }
.op-smart-item.sev-info  .op-smart-item-ico { background: rgba(59, 130, 246, 0.14); color: #2563eb; }
.op-smart-empty { padding: 8px; text-align: center; font-size: 10px; color: #94a3b8; font-style: italic; }

/* D) HIZLI AKSİYON MENÜSÜ — header'da 3 nokta dropdown */
.op-quickact-menu { position: relative; }
.op-quickact-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 28px; padding: 0;
}
.op-quickact-trigger svg { width: 14px; height: 14px; }
.op-quickact-dropdown { display: none; }
.op-quickact-dropdown:not([hidden]) {
    position: absolute; right: 0; top: calc(100% + 5px); z-index: 9999;
    min-width: 240px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
    padding: 4px; display: flex; flex-direction: column; gap: 1px;
}
.op-quickact-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 7px 9px; border: 0; background: transparent;
    border-radius: 5px; cursor: pointer; text-align: left;
    transition: background-color .15s ease;
}
.op-quickact-item:hover { background: #f3f4f6; }
.op-quickact-item svg { width: 14px; height: 14px; color: #475569; flex-shrink: 0; margin-top: 1px; }
.op-quickact-item span { display: block; font-weight: 600; font-size: 11.5px; color: #0f172a; line-height: 1.2; }
.op-quickact-item small { display: block; font-size: 9.5px; color: #64748b; margin-top: 2px; line-height: 1.2; }

/* Responsive — küçük ekranda KPI'lar 3 sütuna düşsün */
@media (max-width: 900px) {
    .op-osum-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .op-osum-kpis { grid-template-columns: repeat(2, 1fr); }
    .op-tline { padding: 12px 12px 4px; }
    .op-tline-bar { left: 28px; right: 28px; }
}

/* ETA satırı — Alım/Teslim için kalan/geçen zaman bilgi çubuğu */
.op-eta-row {
    display: flex; align-items: center; gap: 8px;
    margin-top: -4px; margin-bottom: 8px;
    padding: 5px 10px;
    background: linear-gradient(135deg, #fafbff, #f5f7ff);
    border: 1px solid #e0e7ff; border-radius: 5px;
    font-size: 11px; line-height: 1.3;
}
.op-eta-row[hidden] { display: none; }
.op-eta-icon { color: #797bf2; display: inline-flex; flex-shrink: 0; }
.op-eta-icon svg { width: 13px; height: 13px; }
.op-eta-item { display: inline-flex; align-items: center; gap: 5px; }
.op-eta-item[hidden] { display: none; }
.op-eta-lbl { color: #64748b; font-weight: 500; }
.op-eta-val { font-weight: 700; padding: 1px 7px; border-radius: 8px; }

/* Renk tonları — kalan zamana göre */
.op-eta-val.future { background: rgba(16, 185, 129, .12); color: #047857; }   /* >1 gün: yeşil  */
.op-eta-val.soon   { background: rgba(245, 158, 11, .15); color: #b45309; }   /* <24sa: amber   */
.op-eta-val.past   { background: rgba(239, 68, 68, .12); color: #b91c1c; }    /* geçti: kırmızı */

.op-eta-sep { color: #cbd5e1; padding: 0 2px; }
.op-eta-sep[hidden] { display: none; }

/* ============================================================================
   RESİM LIGHTBOX — sipariş belgesi resimlerini büyük göster + galeri navigasyon
   Tasarım: dark backdrop, ortalanmış büyük resim, sol/sağ ok, thumb şeridi
   ============================================================================ */
.op-lightbox-overlay {
    position: fixed; inset: 0; z-index: 2700;
    background: rgba(15, 23, 42, 0.88);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: op-lb-fade 0.15s ease;
}
.op-lightbox-overlay[hidden] { display: none; }
@keyframes op-lb-fade { from { opacity: 0; } to { opacity: 1; } }

.op-lightbox-frame {
    display: flex; flex-direction: column;
    width: 100%; height: 100%; max-width: 1400px;
    background: #1a1a1d;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* HEAD — başlık + sayaç + indir + kapat */
.op-lightbox-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.op-lightbox-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.op-lightbox-title {
    color: #e5e7eb; font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 600px;
}
.op-lightbox-counter {
    color: #94a3b8; font-size: 11px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px; font-weight: 500;
}
.op-lightbox-actions { display: flex; align-items: center; gap: 6px; }
.op-lightbox-btn {
    width: 32px; height: 32px; padding: 0;
    border: 0; background: rgba(255, 255, 255, 0.06);
    color: #e5e7eb; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.op-lightbox-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.op-lightbox-btn svg { width: 14px; height: 14px; }
.op-lightbox-close:hover { background: var(--sp-danger); color: #fff; }

/* BODY — sol/sağ ok + ortada resim */
.op-lightbox-body {
    flex: 1;
    display: flex; align-items: stretch;
    min-height: 0;
    position: relative;
}
.op-lightbox-stage {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    min-width: 0; min-height: 0;
    background: #0f0f12;
}
.op-lightbox-img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.op-lightbox-loading {
    color: #94a3b8; font-size: 12px;
    padding: 20px;
}

.op-lightbox-nav {
    width: 44px;
    border: 0; background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.op-lightbox-nav:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.op-lightbox-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.op-lightbox-nav svg { width: 22px; height: 22px; }

/* THUMBS — alt şerit, mini önizlemeler */
.op-lightbox-thumbs {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    flex-shrink: 0;
    min-height: 56px;
}
.op-lightbox-thumbs:empty { display: none; }
.op-lightbox-thumbs::-webkit-scrollbar { height: 4px; }
.op-lightbox-thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }
.op-lightbox-thumb {
    width: 44px; height: 44px; flex-shrink: 0;
    background-size: cover; background-position: center;
    background-color: #2a2a30;
    border: 2px solid transparent; border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.op-lightbox-thumb:hover { transform: scale(1.05); border-color: rgba(255, 255, 255, 0.3); }
.op-lightbox-thumb.active { border-color: #10b981; }

/* Mobile responsive */
@media (max-width: 720px) {
    .op-lightbox-overlay { padding: 0; }
    .op-lightbox-frame { border-radius: 0; }
    .op-lightbox-nav { width: 36px; }
    .op-lightbox-title { max-width: 200px; font-size: 12px; }
}

/* ============================================================================
   O1 — Kokpit Sipariş Havuzu (sol panel "Siparişler" segmenti)
   ============================================================================ */
.kp-order-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--sp-border);
    background: var(--sp-bg-secondary);
}
.kp-ord-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-input);
    color: var(--sp-text-muted);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    user-select: none;
    line-height: 1.4;
}
.kp-ord-chip:hover { border-color: #797bf2; color: var(--sp-text-primary); }
.kp-ord-chip.on.c-bekleyen { background: rgba(245,158,11,.16); border-color: #f59e0b; color: #f59e0b; }
.kp-ord-chip.on.c-atanmis  { background: rgba(99,102,241,.16); border-color: #6366f1; color: #6366f1; }
.kp-ord-chip.on.c-yolda    { background: rgba(59,130,246,.16); border-color: #3b82f6; color: #3b82f6; }
.kp-ord-chip.on.c-tamam    { background: rgba(16,185,129,.16); border-color: #10b981; color: #10b981; }

/* Hinterland menüsü — bölge listesi (max yükseklik + scroll) ve isim araması */
.kp-hint-list { max-height: 240px; overflow-y: auto; }
.kp-hint-search { display: flex; align-items: center; gap: 6px; padding: 4px 4px 8px; }
.kp-hint-search i { color: var(--sp-text-muted); font-size: 11px; }
.kp-hint-search input {
    flex: 1; box-sizing: border-box;
    border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text);
    border-radius: var(--sp-radius-sm); padding: 5px 9px; font-size: 11.5px; outline: none;
    transition: border-color .15s ease;
}
.kp-hint-search input:focus { border-color: var(--sp-primary); }
/* Leaflet interaktif çizimler (hinterland poligonu vb.) tıklanınca focus çerçevesi/outline olmasın */
.leaflet-interactive:focus,
path.leaflet-interactive:focus,
.leaflet-container path:focus { outline: none; }

/* Faz 2 — Sipariş Filtresi (tab-group) buton-menüsü */
.kp-ordgrp-btn { width: auto; gap: 5px; padding: 0 9px; }
.kp-ordgrp-lbl { font-size: 11px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sol Siparişler sidebar'ı — tarih + Filtreler aynı satırda (filtre tarihin sağında) */
.kp-ord-daterow { display: flex; align-items: stretch; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg-body); }
.kp-ord-daterow .kp-cal-trigger-wrap { flex: 1; min-width: 0; margin: 0; padding: 0; border-bottom: 0; background: transparent; }
.kp-ordfilter-sidebtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; padding: 0 12px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-input); color: var(--sp-text); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.kp-ordfilter-sidebtn:hover { border-color: #797bf2; color: #797bf2; }
.kp-ordfilter-sidebtn i { color: #797bf2; }
.kp-ordgrp-menu { max-height: 462px; overflow-x: auto; overflow-y: hidden; min-width: 1240px; max-width: 96vw; }

/* Sefer Filtreleri menüsü (Tedarikçi / Araç / Şoför / Nokta) — 4 sütunlu aramalı checklist */
.kp-rtf-menu { max-height: 462px; overflow-x: auto; overflow-y: hidden; min-width: 940px; max-width: 96vw; }
.kp-rtf-col { flex: 1 1 0; min-width: 0; max-height: 380px; overflow-y: auto; border-left: 1px solid var(--sp-border); padding: 0 8px; }
.kp-rtf-col:first-child { border-left: 0; }
.kp-rtf-list { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
/* Kartlar sipariş "Yükleme/Toplama Noktaları" ile aynı (kp-ordpt-row + kp-hint-stats);
   sıkışıp kırpılmasınlar: flex:none + overflow görünür (.lt-lm-row overflow:hidden'ı ezer) */
.kp-rtf-row { flex: none; overflow: visible; }
/* Sipariş Filtresi — sütunlar (süreç/anomali | yükleme noktaları | il/ilçe | nitelikler) */
.kp-ordf-grid { display: flex; align-items: stretch; gap: 0; }
.kp-ordf-col { min-width: 0; max-height: 380px; display: flex; flex-direction: column; }
.kp-ordf-col-tabs { flex: 0 0 220px; overflow-y: auto; padding-right: 8px; }
.kp-ordf-col-pts { flex: 0 0 320px; overflow-y: auto; border-left: 1px solid var(--sp-border); padding-left: 10px; margin-left: 2px; }
.kp-ordf-col-geo { flex: 0 0 440px; overflow-y: auto; border-left: 1px solid var(--sp-border); padding-left: 10px; margin-left: 2px; }
.kp-ordf-col-attr { flex: 1 1 auto; min-width: 240px; overflow-y: auto; border-left: 1px solid var(--sp-border); padding-left: 10px; margin-left: 2px; }
/* 4. sütun — Sipariş Nitelikleri chip'leri (çoklu seçim) */
.kp-attr-wrap { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.kp-attr-chip.on, .kp-attr-all.on { background: rgba(121,123,242,.16); border-color: #797bf2; color: #797bf2; }
.kp-attr-chip b { font-weight: 700; }
.kp-attr-bo { color: #10b981; }
.kp-attr-bp { color: #f59e0b; }

/* Sade sidebar başlıkları (nokta / hinterland / sipariş detay) — ad solda, kapat (×) sağ üstte (lt-side2-head varsayılan flex değil) */
.kp-point-side .lt-side2-head, .kp-hint-side .lt-side2-head, .kp-ord-detail-side .lt-side2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kp-point-side .lt-side2-hl, .kp-hint-side .lt-side2-hl, .kp-ord-detail-side .lt-side2-hl { flex: 1; min-width: 0; }
.kp-point-side .lt-side2-x, .kp-hint-side .lt-side2-x, .kp-ord-detail-side .lt-side2-x { flex: none; }
.kp-ord-detail-side .lt-side2-plate { padding-right: 0; }   /* flex header'da 120px sağ boşluk gereksiz */
/* Nokta (lokasyon marker) detay sidebar'ı içeriği */
.kp-pt-sv { width: 100%; height: 180px; flex: none; border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: var(--sp-bg-input); }
.kp-pt-sv iframe { width: 100%; height: 180px; border: 0; display: block; }
.kp-pt-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.kp-pt-bdg { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; }
.kp-pt-bdg-p { color: #10b981; background: rgba(16,185,129,.14); }
.kp-pt-bdg-d { color: #3b82f6; background: rgba(59,130,246,.14); }
.kp-pt-info { margin-bottom: 8px; }
.kp-pt-info-name { font-weight: 700; font-size: 13px; color: var(--sp-text); }
.kp-pt-info-addr { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; line-height: 1.35; }
.kp-pt-veh { padding: 5px 0; border-bottom: 1px solid var(--sp-border); font-size: 11.5px; }
.kp-pt-veh:last-child { border-bottom: 0; }
.kp-pt-veh-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kp-pt-veh-dt { font-size: 10px; color: var(--sp-text-muted); margin-top: 2px; }
.kp-pt-veh-plate { font-weight: 700; color: var(--sp-text); }
.kp-pt-veh-plate small { font-weight: 400; color: var(--sp-text-muted); margin-left: 4px; }
.kp-pt-veh-meta { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.kp-pt-st { font-size: 9px; font-weight: 700; padding: 0 6px; border-radius: 7px; line-height: 16px; }
.kp-pt-st.st-moving { color: #10b981; background: rgba(16,185,129,.14); }
.kp-pt-st.st-stopped { color: #f59e0b; background: rgba(245,158,11,.14); }
.kp-pt-st.st-over { color: #ef4444; background: rgba(239,68,68,.14); }
.kp-pt-st.st-offline { color: var(--sp-text-muted); background: var(--sp-bg-input); }
.kp-pt-job { font-size: 9px; font-weight: 700; padding: 0 6px; border-radius: 7px; line-height: 16px; }
.kp-pt-job-free { color: #10b981; background: rgba(16,185,129,.14); }
.kp-pt-job-planned { color: #f59e0b; background: rgba(245,158,11,.14); }
.kp-pt-job-busy { color: #3b82f6; background: rgba(59,130,246,.14); }

/* Sipariş detay sidebar — tag / timeline / paket / rota */
.kp-ord-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.kp-ord-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: var(--sp-bg-input); color: var(--sp-text-muted); border: 1px solid var(--sp-border); }
.kp-ord-tag-st { color: #797bf2; background: rgba(121,123,242,.14); border-color: rgba(121,123,242,.4); }
.kp-ord-tag-anom { color: #ef4444; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); }
.kp-ord-tag-attr { color: #f59e0b; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
.kp-ord-tag-type { color: var(--sp-text); }
/* Sipariş detay başlığı — sipariş no altında müşteri / müşteri sip. no */
.kp-ord-hsub { font-size: 12px; font-weight: 600; color: var(--sp-text); letter-spacing: normal; margin-top: 3px; line-height: 1.3; }
.kp-ord-hsub2 { font-size: 11px; font-weight: 400; color: var(--sp-text-muted); margin-top: 1px; }
.kp-ord-tl { display: flex; flex-direction: column; }
.kp-ord-tl-step { display: flex; gap: 9px; position: relative; padding-bottom: 12px; }
.kp-ord-tl-step:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: var(--sp-border); }
.kp-ord-tl-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; z-index: 1; }
.kp-ord-tl-c { min-width: 0; }
.kp-ord-tl-t { font-size: 10px; font-weight: 700; color: var(--sp-text-muted); letter-spacing: .02em; }
.kp-ord-tl-n { font-size: 12.5px; font-weight: 600; color: var(--sp-text); }
.kp-ord-tl-s { font-size: 11px; color: var(--sp-text-muted); }
.kp-ord-pkg { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--sp-border); }
.kp-ord-pkg:last-child { border-bottom: 0; }
.kp-ord-pkg-ic { color: #797bf2; font-size: 18px; flex: none; width: 22px; text-align: center; }
.kp-ord-pkg-c { flex: 1; min-width: 0; }
.kp-ord-pkg-n { font-size: 12px; font-weight: 600; color: var(--sp-text); }
.kp-ord-pkg-st { font-size: 9px; font-weight: 700; color: #797bf2; background: rgba(121,123,242,.14); padding: 0 5px; border-radius: 6px; }
.kp-ord-pkg-m { font-size: 10.5px; color: var(--sp-text-muted); }
.kp-ord-route { border: 1px solid var(--sp-border); border-radius: 8px; padding: 7px 9px; margin-top: 4px; }
.kp-ord-route-h { font-weight: 700; font-size: 12px; color: var(--sp-text); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.kp-ord-route-h i { color: #797bf2; }
.kp-ord-route-st { margin-left: auto; font-size: 9px; font-weight: 700; color: #797bf2; background: rgba(121,123,242,.14); padding: 1px 7px; border-radius: 7px; }
.kp-ord-route-pkgst { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 7px; }
.kp-ord-route-past { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--sp-border); font-size: 11px; }
.kp-ord-route-past:last-child { border-bottom: 0; }
.kp-ord-route-past-t { font-weight: 600; color: var(--sp-text); }
.kp-ord-route-past-m { color: var(--sp-text-muted); flex: none; }
.kp-pt-dist { color: #797bf2; font-weight: 700; }
.kp-pt-more { font-size: 10.5px; color: var(--sp-text-muted); padding-top: 4px; }
.kp-pt-mini { font-size: 9px; font-weight: 700; min-width: 22px; text-align: center; padding: 0 4px; border-radius: 7px; line-height: 15px; display: inline-block; margin-left: 3px; }
.kp-pt-mini-o { color: #10b981; background: rgba(16,185,129,.14); }
.kp-pt-mini-p { color: #f59e0b; background: rgba(245,158,11,.14); }
.kp-pt-tabs { display: flex; gap: 6px; margin: 10px 0 8px; }
.kp-pt-tab { flex: 1; padding: 6px 8px; border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text-muted); border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.kp-pt-tab.is-active { background: rgba(121,123,242,.16); border-color: #797bf2; color: #797bf2; }
.kp-pt-tab b { margin-left: 4px; }
.kp-pt-list { display: flex; flex-direction: column; gap: 4px; }
.kp-pt-ord { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 6px 8px; border: 1px solid var(--sp-border); background: var(--sp-bg-card); border-radius: 8px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.kp-pt-ord:hover { border-color: #797bf2; background: rgba(121,123,242,.08); }
.kp-pt-ord-no { font-weight: 700; font-size: 12px; color: var(--sp-text); }
.kp-pt-ord-sub { font-size: 10.5px; color: var(--sp-text-muted); }
/* 3. sütun — İl | İlçe yan yana mini listeler + sipariş/paket badge */
.kp-geo-pair { display: flex; gap: 8px; margin-bottom: 6px; }
.kp-geo-mini { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.kp-geo-list { overflow-y: auto; min-height: 56px; max-height: 118px; }
.kp-geo-row { align-items: center; }
.kp-geo-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-geo-badges { display: inline-flex; gap: 3px; flex: none; }
.kp-geo-bdg { font-size: 9px; font-weight: 700; min-width: 24px; text-align: center; padding: 0 4px; border-radius: 7px; line-height: 15px; }
.kp-geo-bdg-o { color: #10b981; background: rgba(16,185,129,.14); }
.kp-geo-bdg-p { color: #f59e0b; background: rgba(245,158,11,.14); }
/* Mini liste sütun başlığı (İl/İlçe · Sip · Pkt) — kaydırınca üstte sabit */
.kp-geo-head { display: flex; align-items: center; gap: 8px; padding: 1px 6px 3px; font-size: 10px; font-weight: 700; color: var(--sp-text-muted); border-bottom: 1px solid var(--sp-border); position: sticky; top: 0; background: var(--sp-bg-card); z-index: 1; }
.kp-geo-hl { font-size: 9px; min-width: 24px; text-align: center; }
.kp-geo-hl-o { color: #10b981; }
.kp-geo-hl-p { color: #f59e0b; }
.kp-ordpt-list { overflow-y: auto; flex: 1; }
/* Adres tipi = sınırlı kutu (layout); içindeki her nokta = kart */
.kp-ordpt-grpbox { border: 1px solid var(--sp-border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: var(--sp-bg-card); }
.kp-ordpt-grpbox .kp-ordpt-grp { margin: 0; padding: 7px 9px; background: var(--sp-bg-input); border-bottom: 1px solid var(--sp-border); }
.kp-ordpt-grpbody { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.kp-ordpt-row { align-items: flex-start; margin: 0; padding: 7px 8px; border: 1px solid var(--sp-border); border-radius: 7px; background: var(--sp-bg-body); transition: border-color .15s ease, box-shadow .15s ease; }
.kp-ordpt-row:hover { border-color: #797bf2; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.kp-ordpt-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.kp-ordpt-title { font-weight: 600; font-size: 12px; line-height: 1.3; }
.kp-ordpt-sub { font-size: 10.5px; color: var(--sp-text-muted); }
/* Adres tipi grup başlığı — kendi "tümünü seç" checkbox'ı */
.kp-ordpt-grp { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.kp-ordpt-grp > span { flex: 1; min-width: 0; }
.kp-ordpt-grp input { margin: 0; flex: none; cursor: pointer; }
.kp-ordpt-grpn { font-weight: 700; color: var(--sp-text-muted); }
.kp-ordgrp-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; background: transparent; color: var(--sp-text); font-size: 12px; cursor: pointer; border-radius: 6px; text-align: left; transition: background-color .12s ease; }
.kp-ordgrp-item:hover { background: var(--sp-bg-input); }
.kp-ordgrp-item.on { background: rgba(121,123,242,.16); color: #797bf2; font-weight: 600; }
.kp-ordgrp-item > span:first-of-type { flex: 1; }
.kp-ordgrp-item i { width: 16px; text-align: center; color: var(--sp-text-muted); }
.kp-ordgrp-item.on i { color: #797bf2; }
.kp-ordgrp-badge { font-size: 10px; font-weight: 700; min-width: 18px; text-align: center; padding: 1px 5px; border-radius: 9px; background: var(--sp-bg-secondary); color: var(--sp-text-muted); }
.kp-ordgrp-item.on .kp-ordgrp-badge { background: rgba(121,123,242,.25); color: #797bf2; }
/* Sipariş paneli aktif tab bilgi şeridi */
.kp-ord-tabinfo { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: var(--sp-text); border-bottom: 1px solid var(--sp-border); background: var(--sp-bg-secondary); }
.kp-ord-tabinfo i { color: #797bf2; font-size: 11px; }
.kp-ord-tabinfo b { margin-left: auto; color: #797bf2; }
/* Faz 2 — sol panel genişletme (tarih-tipi chip'leri tek satıra sığsın) */
.kp-side.kp-left { width: 380px; }
/* Tarih tipi (query_type) tek-seçim chip satırı — sipariş takviminin üstünde */
.kp-ord-datetype { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg-secondary); }
.kp-ord-dtchip { flex: 1; min-width: 0; padding: 4px 4px; font-size: 10.5px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text-muted); border-radius: 6px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.kp-ord-dtchip:hover { border-color: #797bf2; color: var(--sp-text); }
.kp-ord-dtchip.on { background: rgba(121,123,242,.16); border-color: #797bf2; color: #797bf2; }
/* Sipariş kartı seçim checkbox'ı + seçili durum */
.kp-ord-cbwrap { display: inline-flex; align-items: center; margin-right: 6px; cursor: pointer; }
.kp-ord-cbwrap input { cursor: pointer; margin: 0; }
.kp-order-card.sel { border-color: #797bf2; box-shadow: 0 0 0 1px #797bf2 inset; }

.kp-order-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
}
.kp-order-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    line-height: 1.35;
}
.kp-order-card:hover {
    background: var(--sp-bg-hover);
    border-color: #797bf2;
    transform: translateY(-1px);
}
.kp-ord-r1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}
.kp-ord-no {
    font-weight: 700;
    font-size: 11px;
    color: var(--sp-text-primary);
    font-family: 'SF Mono', Consolas, monospace;
}
.kp-ord-st {
    font-size: 9.5px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}
.kp-ord-st.bekleyen { background: rgba(245,158,11,.18); color: #f59e0b; }
.kp-ord-st.atanmis  { background: rgba(99,102,241,.18); color: #6366f1; }
.kp-ord-st.yolda    { background: rgba(59,130,246,.18); color: #3b82f6; }
.kp-ord-st.tamam    { background: rgba(16,185,129,.18); color: #10b981; }
.kp-ord-r2 {
    font-size: 11px;
    color: var(--sp-text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kp-ord-r3 {
    font-size: 10.5px;
    color: var(--sp-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kp-ord-r4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    color: var(--sp-text-muted);
}
.kp-ord-rt {
    font-family: 'SF Mono', Consolas, monospace;
    color: var(--sp-text-secondary);
}

/* Faz 1 — Seferler (rota) listesi */
.kp-route-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
}

/* ===== Durak Detay Paneli (#kpStopSide) — harita marker tık ===== */
.kp-stop-detail { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.kp-stop-row { display: flex; gap: 10px; align-items: flex-start; }
.kp-stop-ico { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--sp-text-muted); }
.kp-stop-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kp-stop-lbl { font-size: 10px; color: var(--sp-text-muted); font-weight: 600; }
.kp-stop-row strong { font-size: 13px; color: var(--sp-text); line-height: 1.3; }
.kp-stop-kindbadge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: #797bf2; }
.kp-stop-kindbadge.kind-start, .kp-stop-kindbadge.kind-return { background: #10b981; }
.kp-stop-kindbadge.kind-pickup { background: #3b82f6; }
.kp-stop-kindbadge.kind-delivery { background: #f59e0b; }
.kp-stop-seqno { font-size: 11px; color: var(--sp-text-muted); font-weight: 600; }
.kp-stop-sec { font-size: 11px; font-weight: 700; color: var(--sp-text-muted); letter-spacing: .03em; margin-top: 4px; }
.kp-stop-order { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); }
.kp-stop-order-no { font-size: 12px; font-weight: 700; color: var(--sp-text); }
.kp-stop-order-cust { flex: 1; font-size: 11px; color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-stop-order-pkg { flex: 0 0 auto; font-size: 10px; font-weight: 600; color: var(--sp-text-muted); }

/* Alım/Teslim durak sipariş satırı — sol renkli şerit + gerçekleşme rozeti */
.kp-stop-order.kind-pickup { border-left: 3px solid #3b82f6; }
.kp-stop-order.kind-delivery { border-left: 3px solid #f59e0b; }
.kp-stop-pkg-state { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.kp-stop-pkg-state.ok { background: rgba(16,185,129,.16); color: #10b981; }
.kp-stop-pkg-state.crit { background: rgba(239,68,68,.16); color: #ef4444; }
.kp-stop-pkg-state.plan { background: rgba(148,163,184,.16); color: #94a3b8; }

/* D1 — Street View embed */
.kp-stop-sv { position: relative; width: 100%; height: 160px; border-radius: 8px; overflow: hidden; margin-bottom: 4px; border: 1px solid var(--sp-border); }
.kp-stop-sv iframe { width: 100%; height: 100%; border: 0; display: block; }
.kp-stop-sv-full { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; text-decoration: none; }
.kp-stop-sv-full:hover { background: rgba(0,0,0,.75); }

/* D2 — Durak uyum rozeti (büyük) */
.kp-stop-comp { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--sp-border); }
.kp-stop-comp i { font-size: 18px; flex: 0 0 auto; }
.kp-stop-comp > div { display: flex; flex-direction: column; }
.kp-stop-comp-lbl { font-size: 10px; color: var(--sp-text-muted); font-weight: 600; }
.kp-stop-comp strong { font-size: 13px; }
.kp-stop-comp.comp-ok { background: rgba(16,185,129,.1); } .kp-stop-comp.comp-ok i, .kp-stop-comp.comp-ok strong { color: #10b981; }
.kp-stop-comp.comp-warn { background: rgba(245,158,11,.1); } .kp-stop-comp.comp-warn i, .kp-stop-comp.comp-warn strong { color: #f59e0b; }
.kp-stop-comp.comp-crit { background: rgba(239,68,68,.1); } .kp-stop-comp.comp-crit i, .kp-stop-comp.comp-crit strong { color: #ef4444; }
.kp-stop-comp.comp-pending { background: rgba(59,130,246,.1); } .kp-stop-comp.comp-pending i, .kp-stop-comp.comp-pending strong { color: #3b82f6; }

/* Header'da iki rozet (Yükleme + Teslim) yan yana */
.kp-stop-kindbadge + .kp-stop-kindbadge { margin-left: 4px; }

/* D0 — Durak Tipi: alım/teslim bağımsız toggle (ikisi de açılabilir) */
.kp-stop-typebar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 9px 11px; border-radius: 8px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); }
.kp-stop-typebar-lbl { font-size: 11px; font-weight: 700; color: var(--sp-text-muted); margin-right: 1px; }
.kp-stop-typetgl {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 99px; cursor: pointer;
    font-size: 12px; font-weight: 700; line-height: 1.4;
    background: transparent; color: var(--sp-text-muted);
    border: 1.5px solid var(--sp-border);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kp-stop-typetgl i { font-size: 10px; }
.kp-stop-typetgl:hover { border-color: var(--sp-text-muted); color: var(--sp-text); }
.kp-stop-typetgl.pickup.on { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.kp-stop-typetgl.delivery.on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.kp-stop-type-msg { font-size: 11px; font-weight: 600; color: var(--sp-text-muted); }
.kp-stop-type-msg.ok { color: #10b981; }
.kp-stop-type-msg.err { color: #ef4444; }

/* İlgili Kişi / Müşteri (geowix_customer) bloğu */
.kp-stop-cust { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border-radius: 8px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); }
.kp-stop-cust-id { display: flex; align-items: center; gap: 9px; }
.kp-stop-cust-ico { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(121,123,242,.14); color: #797bf2; }
.kp-stop-cust-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kp-stop-cust-main strong { font-size: 13px; color: var(--sp-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-stop-cust-type { font-size: 10px; color: var(--sp-text-muted); font-weight: 600; }
.kp-stop-cust-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.kp-stop-cust-badge.linked { background: rgba(16,185,129,.16); color: #10b981; }
.kp-stop-cust-badge.unlinked { background: rgba(245,158,11,.16); color: #f59e0b; }
.kp-stop-cust-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sp-text); text-decoration: none; padding: 2px 0; }
.kp-stop-cust-row i { color: var(--sp-text-muted); width: 14px; text-align: center; }
.kp-stop-cust-row:hover { color: #797bf2; }
.kp-stop-cust-row:hover i { color: #797bf2; }
.kp-stop-comp.comp-na { background: var(--sp-bg-card); } .kp-stop-comp.comp-na i, .kp-stop-comp.comp-na strong { color: var(--sp-text-muted); }

/* D3/D4 — Talep penceresi + bekleme hızlı düzenleme */
.kp-stop-edit { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); }
.kp-stop-edit-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kp-stop-edit-row label { font-size: 12px; color: var(--sp-text-muted); font-weight: 600; }
.kp-stop-edit-times { display: flex; align-items: center; gap: 6px; }
.kp-stop-slot, .kp-stop-dwell { padding: 4px 7px; border-radius: 6px; border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text); font-size: 12px; }
.kp-stop-dwell { width: 70px; text-align: right; }
.kp-stop-slot-save { justify-content: center; }
.kp-stop-slot-msg { font-size: 11px; font-weight: 600; text-align: center; }
.kp-stop-slot-msg.ok { color: #10b981; } .kp-stop-slot-msg.err { color: #ef4444; }

/* D6 — Hızlı aksiyon çubuğu */
.kp-stop-actions { display: flex; gap: 6px; margin-top: 10px; }
.kp-stop-actions .sp-btn-ghost { flex: 1; justify-content: center; padding: 7px; }

/* ===== Durak Detay Paneli — kompakt yeniden tasarım (.kp-sp-*) ===== */
.kp-sp-head { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--sp-border); background: linear-gradient(180deg, rgba(245,158,11,.06), transparent); flex-shrink: 0; }
.kp-sp-head-main { flex: 1; min-width: 0; }
.kp-sp-head-title { display: flex; align-items: center; gap: 8px; }
.kp-sp-seq { flex: 0 0 auto; min-width: 26px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--sp-primary); color: #fff; font-size: 12px; font-weight: 800; }
.kp-sp-name { font-size: 15px; font-weight: 800; color: var(--sp-text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-sp-head-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.kp-sp-close { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--sp-text-muted); cursor: pointer; font-size: 15px; transition: background-color .15s ease, color .15s ease; }
.kp-sp-close:hover { background: var(--sp-bg-input); color: var(--sp-text); }

.kp-sp-body { flex: 1; min-height: 0; overflow-y: auto; background: var(--sp-bg); }
.kp-sp-detail { padding: 11px; display: flex; flex-direction: column; gap: 9px; }

/* Metrik KPI şeridi */
.kp-sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 5px; }
.kp-sp-kpi { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 4px; border-radius: 6px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); text-align: center; }
.kp-sp-kpi > span { font-size: 9.5px; font-weight: 600; color: var(--sp-text-muted); letter-spacing: 0; }
.kp-sp-kpi > b { font-size: 12.5px; font-weight: 700; color: var(--sp-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kp-sp-kpi > em { font-size: 9px; font-style: normal; color: var(--sp-text-muted); }

/* S1 — Stop panel durum şeridi (rota paneliyle aynı dil) */
.kp-sp-status-row { margin: 8px 0 2px; }
.kp-sp-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 99px;
    font-size: 11px; font-weight: 700; line-height: 1.5;
}
.kp-sp-status-pill.ok { background: rgba(16,185,129,.14); color: #059669; }
.kp-sp-status-pill.current {
    background: rgba(59,130,246,.14); color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(59,130,246,.18);
    animation: kp-stop-pulse 1.6s ease-in-out infinite;
}
.kp-sp-status-pill.pending { background: var(--sp-bg-input); color: var(--sp-text-muted); }
.kp-sp-status-pill.start { background: rgba(99,102,241,.12); color: #4338ca; }

/* Stop panel Plan/Gerçek time block wrapper — rota panelin .kp-rsp-stop-time stilini kullanır */
.kp-sp-time-wrap .kp-rsp-stop-time { margin-top: 4px; margin-bottom: 4px; }

/* S4 — GPS Doğrulama kartı (50m geofence ile araç bu noktaya girdi mi) */
.kp-sp-gps {
    border-radius: 7px; padding: 8px 11px;
    border: 1px solid var(--sp-border); background: var(--sp-bg-card);
    display: flex; flex-direction: column; gap: 5px;
}
.kp-sp-gps.visited { border-left: 3px solid #10b981; }
.kp-sp-gps.missed { border-left: 3px solid #ef4444; }
.kp-sp-gps-h {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    font-size: 11.5px; font-weight: 700; color: var(--sp-text);
}
.kp-sp-gps-h i { color: var(--sp-primary); }
.kp-sp-gps-h small { font-size: 9.5px; font-weight: 500; color: var(--sp-text-muted); }
.kp-sp-gps-status {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 6px;
    font-size: 11.5px; font-weight: 700;
}
.kp-sp-gps-status.ok { background: rgba(16,185,129,.12); color: #059669; }
.kp-sp-gps-status.err { background: rgba(239,68,68,.12); color: #b91c1c; }
.kp-sp-gps-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 3px 2px; font-size: 11.5px;
}
.kp-sp-gps-row > span { color: var(--sp-text-muted); }
.kp-sp-gps-row > b { color: var(--sp-text); font-weight: 700; font-variant-numeric: tabular-nums; }

.kp-sp-gps-empty {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 7px;
    background: var(--sp-bg-input); border: 1px dashed var(--sp-border);
    font-size: 11.5px; color: var(--sp-text-muted);
}
.kp-sp-gps-empty > i { color: var(--sp-text-muted); }
.kp-sp-gps-load {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: auto;
    padding: 3px 10px; border-radius: 99px;
    border: 1px solid var(--sp-primary); background: transparent; color: var(--sp-primary);
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.kp-sp-gps-load:hover { background: var(--sp-primary); color: #fff; }
.kp-sp-gps-load i { font-size: 10px; }

/* S6 — GPS inline progress (yükleme → analiz) */
.kp-sp-gps-loading {
    flex-direction: row; align-items: center;
    background: rgba(120, 123, 242, .07); border-color: rgba(120, 123, 242, .25);
    color: var(--sp-text);
}
.kp-sp-gps-loading > i { color: var(--sp-primary); animation: kp-gps-spin 1.2s linear infinite; }
.kp-sp-gps-loader { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.kp-sp-gps-loader-lbl { font-size: 11px; font-weight: 600; color: var(--sp-text); }
.kp-sp-gps-loader-lbl small { color: var(--sp-text-muted); font-weight: 500; margin-left: 4px; }
.kp-sp-gps-loader-bar { height: 4px; border-radius: 2px; background: var(--sp-bg-input); overflow: hidden; }
.kp-sp-gps-loader-bar i {
    display: block; height: 100%;
    background: linear-gradient(90deg, #797bf2 0%, #6366f1 100%);
    transition: width .3s ease;
}
@keyframes kp-gps-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* S6 — GPS hata durumu */
.kp-sp-gps-err {
    background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .25);
    color: #b91c1c;
}
.kp-sp-gps-err > i { color: #b91c1c; }

/* Planlanan / gerçekleşen varış */
.kp-sp-times { display: flex; flex-direction: column; gap: 4px; }
.kp-sp-time { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--sp-text-muted); }
.kp-sp-time b { color: var(--sp-text); font-weight: 700; }
.kp-sp-time.plan i { color: #3b82f6; }
.kp-sp-time.act i { color: #10b981; }

/* Genel kart + başlık */
.kp-sp-card { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 8px; padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; }
.kp-sp-cardh { font-size: 11.5px; font-weight: 700; color: var(--sp-text); letter-spacing: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kp-sp-cardh > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.kp-sp-cardh i { color: var(--sp-primary); }
.kp-sp-addr { font-size: 12.5px; color: var(--sp-text); line-height: 1.35; }

/* Randevu penceresi — split (tarih + saat) */
.kp-sp-slotrow { display: flex; flex-direction: column; gap: 3px; }
.kp-sp-slotrow.split { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 6px; }
.kp-sp-slotrow.split label { grid-column: 1 / -1; }
.kp-sp-slotrow label { font-size: 11px; font-weight: 600; color: var(--sp-text-muted); display: flex; align-items: center; gap: 6px; }
.kp-sp-slot-auto { font-size: 9px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 1px 6px; border-radius: 99px; background: rgba(121,123,242,.14); color: #797bf2; cursor: help; }
.kp-sp-slotrow input[type="date"], .kp-sp-slotrow input[type="time"] {
    width: 100%; padding: 5px 8px; font-size: 12px; font-variant-numeric: tabular-nums;
    border-radius: 6px; border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text);
}
.kp-sp-slotrow .kp-stop-dwell { text-align: left; padding: 5px 8px; font-size: 12px; border-radius: 6px; border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text); }
.kp-sp-unit { font-size: 11px; color: var(--sp-text-muted); margin-left: 6px; }

/* Auto-save status indicator (kart başlığında sağda) */
.kp-stop-autosave {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0;
    transition: opacity .2s ease;
}
.kp-stop-autosave.ok { color: #059669; }
.kp-stop-autosave.err { color: #b91c1c; }
.kp-stop-autosave:empty { display: none; }

/* Bölüm başlığı (yüklenecek / teslim) */
.kp-sp-sec { font-size: 11px; font-weight: 700; letter-spacing: .03em; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.kp-sp-sec.pickup { color: #3b82f6; }
.kp-sp-sec.delivery { color: #f59e0b; }
/* S8 — Boş durum (sipariş yok) — zengin */
.kp-sp-noord {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 22px 16px; text-align: center;
    background: var(--sp-bg-card); border: 1px dashed var(--sp-border); border-radius: 10px;
    color: var(--sp-text);
}
.kp-sp-noord-icon { font-size: 28px; opacity: .65; line-height: 1; margin-bottom: 4px; }
.kp-sp-noord-title { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.kp-sp-noord-sub { font-size: 11px; color: var(--sp-text-muted); line-height: 1.4; max-width: 280px; }

/* Sipariş kartı (durum + paket tipi + kap) */
.kp-sp-ord { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-left: 3px solid var(--sp-border); }
.kp-sp-ord.kind-pickup { border-left-color: #3b82f6; }
.kp-sp-ord.kind-delivery { border-left-color: #f59e0b; }
.kp-sp-ord-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kp-sp-ord-no { font-size: 12.5px; font-weight: 800; color: var(--sp-text); display: inline-flex; align-items: center; gap: 6px; }
.kp-sp-ord-no i { color: var(--sp-text-muted); font-size: 11px; }
.kp-sp-ord-st { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.kp-sp-ord-cust { font-size: 11.5px; color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-sp-ord-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; font-size: 11px; color: var(--sp-text-muted); }
.kp-sp-ord-meta i { font-size: 10px; }

/* F3 — Quick Docs: KARE THUMBNAIL GRID (sipariş kartı + sefer paneli ortak) */
.kp-quickdocs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
    margin-top: 6px;
}
.kp-quickdocs:empty { display: none; }
.kp-quickdocs-item {
    display: flex; flex-direction: column;
    padding: 0; border-radius: 7px;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.kp-quickdocs-item:hover { border-color: var(--sp-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.kp-quickdocs-item.more { cursor: default; }
.kp-quickdocs-item.more:hover { transform: none; box-shadow: none; border-color: var(--sp-border); }

.kp-quickdocs-thumb {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    overflow: hidden;
    position: relative;
}
.kp-quickdocs-thumb.img { background: linear-gradient(135deg, rgba(120,123,242,.1) 0%, rgba(99,102,241,.18) 100%); color: #6366f1; }
.kp-quickdocs-thumb.pdf { background: linear-gradient(135deg, rgba(239,68,68,.08) 0%, rgba(239,68,68,.2) 100%); color: #b91c1c; }
.kp-quickdocs-thumb.doc { background: linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(59,130,246,.2) 100%); color: #1d4ed8; }
.kp-quickdocs-thumb.xls { background: linear-gradient(135deg, rgba(16,185,129,.08) 0%, rgba(16,185,129,.2) 100%); color: #059669; }
.kp-quickdocs-thumb.other { background: var(--sp-bg-input); color: var(--sp-text-muted); }
.kp-quickdocs-thumb.more { background: var(--sp-bg-input); color: var(--sp-text-muted); font-size: 13px; }
.kp-quickdocs-thumb.more b { font-size: 16px; font-weight: 800; color: var(--sp-text); }
.kp-quickdocs-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.kp-quickdocs-name {
    font-size: 9px; font-weight: 600;
    padding: 3px 5px;
    text-align: center;
    background: var(--sp-bg-card);
    color: var(--sp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    border-top: 1px solid var(--sp-border);
}

/* + Ekle kartı (kare, dashed) */
.kp-quickdocs-add {
    display: flex; flex-direction: column;
    padding: 0; border: 0; background: transparent;
    cursor: pointer; overflow: hidden;
    aspect-ratio: 1 / 1; border-radius: 7px;
    transition: transform .12s ease;
}
.kp-quickdocs-add .kp-quickdocs-thumb {
    background: transparent;
    border: 1.5px dashed var(--sp-border);
    color: var(--sp-text-muted);
    border-radius: 7px 7px 0 0;
    border-bottom: 0;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.kp-quickdocs-add .kp-quickdocs-name {
    border: 1.5px dashed var(--sp-border);
    border-top: 0;
    background: transparent;
    color: var(--sp-text-muted);
    border-radius: 0 0 7px 7px;
    transition: border-color .15s ease, color .15s ease;
}
.kp-quickdocs-add:hover { transform: translateY(-1px); }
.kp-quickdocs-add:hover .kp-quickdocs-thumb,
.kp-quickdocs-add:hover .kp-quickdocs-name {
    border-color: var(--sp-primary); color: var(--sp-primary);
    border-style: solid;
    background: rgba(120, 123, 242, .04);
}

/* Sefer paneli — strip biraz daha sıkı, üst margin az */
#kpRsDocsStrip .kp-quickdocs { margin-top: 6px; margin-bottom: 8px; padding: 0 14px; }

/* S9 — Image Lightbox (slider + zoom) */
/* Lightbox — Sipariş popup ile aynı kompakt modal pattern */
.kp-imgview-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);     /* sipariş popup gibi yarı saydam koyu */
    z-index: 100003;
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.kp-imgview-overlay.show { display: flex; }
.kp-imgview-shell {
    position: relative;
    width: 100%;
    max-width: 800px;               /* kompakt — büyük değil */
    max-height: 85vh;
    display: flex; flex-direction: column;
    background: #ffffff;            /* solid beyaz */
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.kp-imgview-stage {
    flex: 1; min-height: 200px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    background: #f3f4f6;            /* açık gri — kart içi resim çerçevesi */
    padding: 16px;
}
.kp-imgview-stage > img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    transition: transform .15s ease;
    cursor: zoom-in;
    user-select: none;
    display: block;
}
.kp-imgview-spinner {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 36px;
    pointer-events: none;
}
.kp-imgview-close {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px; border-radius: 6px;
    background: rgba(255, 255, 255, .9); border: 1px solid var(--sp-border);
    color: var(--sp-text-muted); font-size: 14px; cursor: pointer; z-index: 2;
    transition: background-color .15s ease, color .15s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.kp-imgview-close:hover { background: rgba(239, 68, 68, .12); color: #b91c1c; border-color: #b91c1c; }
.kp-imgview-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .95); border: 1px solid var(--sp-border);
    color: var(--sp-text); font-size: 14px; cursor: pointer; z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    transition: background-color .15s ease, color .15s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.kp-imgview-nav.prev { left: 10px; }
.kp-imgview-nav.next { right: 10px; }
.kp-imgview-nav:hover { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.kp-imgview-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px;
    background: #ffffff;
    border-top: 1px solid var(--sp-border);
    color: var(--sp-text);
}
.kp-imgview-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kp-imgview-info b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sp-text); }
.kp-imgview-info small { font-size: 10.5px; color: var(--sp-text-muted); }
.kp-imgview-tools { display: flex; align-items: center; gap: 4px; }
.kp-imgview-tool {
    width: 30px; height: 30px; border-radius: 6px;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    color: var(--sp-text); cursor: pointer; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kp-imgview-tool:hover { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.kp-imgview-zoomlbl {
    font-size: 11.5px; font-weight: 700; min-width: 50px; text-align: center;
    color: var(--sp-text); font-variant-numeric: tabular-nums;
}

/* F4 — Eksik Evrak Detay Popover */
.kp-cmp-miss-pop {
    width: 300px; max-height: 420px; overflow: hidden;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    display: flex; flex-direction: column;
}
.kp-cmp-miss-pop-h {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; background: var(--sp-bg-input);
    font-size: 12.5px; font-weight: 700; color: var(--sp-text);
    border-bottom: 1px solid var(--sp-border);
}
.kp-cmp-miss-pop-h i { color: var(--sp-primary); }
.kp-cmp-miss-pop-h.ok i { color: #059669; }
.kp-cmp-miss-pop-h.err i { color: #b91c1c; }
.kp-cmp-miss-pop-h small { color: var(--sp-text-muted); font-weight: 500; margin-left: 2px; }
.kp-cmp-miss-pop-x {
    margin-left: auto; padding: 0; width: 22px; height: 22px;
    border: 0; border-radius: 5px;
    background: var(--sp-bg-card); color: var(--sp-text-muted);
    font-size: 16px; cursor: pointer; line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}
.kp-cmp-miss-pop-x:hover { background: rgba(239, 68, 68, .12); color: #b91c1c; }

.kp-cmp-miss-list {
    flex: 1; overflow-y: auto;
    padding: 6px;
    display: flex; flex-direction: column; gap: 4px;
}
.kp-cmp-miss-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 6px;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
}
.kp-cmp-miss-row.crit { border-left: 3px solid #b91c1c; background: rgba(239, 68, 68, .04); }
.kp-cmp-miss-row.warn { border-left: 3px solid #d97706; background: rgba(245, 158, 11, .04); }
.kp-cmp-miss-row.info { border-left: 3px solid #1d4ed8; background: rgba(59, 130, 246, .04); }
.kp-cmp-miss-row > i { flex: 0 0 auto; font-size: 14px; }
.kp-cmp-miss-row.crit > i { color: #b91c1c; }
.kp-cmp-miss-row.warn > i { color: #d97706; }
.kp-cmp-miss-row.info > i { color: #1d4ed8; }
.kp-cmp-miss-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kp-cmp-miss-row-body b { font-size: 12px; font-weight: 700; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-cmp-miss-row-body small { font-size: 10.5px; color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-cmp-miss-sev {
    flex: 0 0 auto; font-size: 9.5px; font-weight: 800;
    padding: 2px 7px; border-radius: 99px; letter-spacing: .4px;
}
.kp-cmp-miss-row.crit .kp-cmp-miss-sev { background: rgba(239, 68, 68, .15); color: #b91c1c; }
.kp-cmp-miss-row.warn .kp-cmp-miss-sev { background: rgba(245, 158, 11, .18); color: #b45309; }
.kp-cmp-miss-row.info .kp-cmp-miss-sev { background: rgba(59, 130, 246, .15); color: #1d4ed8; }

.kp-cmp-miss-pop-foot {
    padding: 7px 12px; border-top: 1px solid var(--sp-border);
    font-size: 10.5px; color: var(--sp-text-muted);
    background: var(--sp-bg-input);
    display: flex; align-items: center; gap: 5px;
}
.kp-cmp-miss-pop-foot i { color: var(--sp-text-muted); }

/* S7 — Evrak Tipi Seçici Popover (sipariş scope'a göre filtreli) */
.kp-docpick-pop {
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    width: 280px; max-height: 360px; overflow: hidden;
    display: flex; flex-direction: column;
}
.kp-docpick-h {
    padding: 8px 12px; font-size: 12px; font-weight: 700;
    color: var(--sp-text); border-bottom: 1px solid var(--sp-border);
    background: var(--sp-bg-input);
}
.kp-docpick-h small { font-size: 10px; color: var(--sp-primary); font-weight: 600; margin-left: 6px; }
.kp-docpick-list { overflow-y: auto; padding: 4px; flex: 1; }
.kp-docpick-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 10px; border-radius: 6px;
    background: transparent; border: 0; text-align: left;
    cursor: pointer; transition: background-color .15s ease;
    font-size: 11.5px; color: var(--sp-text);
}
.kp-docpick-item > i { font-size: 12px; color: var(--sp-primary); flex: 0 0 auto; }
.kp-docpick-item > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kp-docpick-item > small { font-size: 9.5px; color: var(--sp-text-muted); font-family: monospace; }
.kp-docpick-item:hover { background: rgba(120, 123, 242, .1); }

/* S5.2 — Tıklanabilir sipariş kartı (stop panel) */
.kp-sp-ord.clickable { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.kp-sp-ord.clickable:hover { border-color: var(--sp-primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); transform: translateY(-1px); }
.kp-sp-ord.clickable:focus { outline: 2px solid var(--sp-primary); outline-offset: 2px; }

/* S8 — Sipariş kartı accordion (expand-able) */
.kp-sp-ord.expandable { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.kp-sp-ord.expandable:hover { border-color: var(--sp-primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.kp-sp-ord.expandable:focus { outline: 2px solid var(--sp-primary); outline-offset: 2px; }
.kp-sp-ord-chev {
    margin-left: auto; font-size: 11px; color: var(--sp-text-muted);
    transition: transform .2s ease;
}
.kp-sp-ord.expanded .kp-sp-ord-chev { transform: rotate(180deg); color: var(--sp-primary); }
.kp-sp-ord.expanded { background: rgba(120, 123, 242, .04); }

.kp-sp-ord-exp-wrap { margin-top: 6px; }
.kp-sp-ord-exp-wrap[hidden] { display: none; }
.kp-sp-ord-exp-sec { padding: 6px 0; border-top: 1px dashed var(--sp-border); }
.kp-sp-ord-exp-sec:first-child { border-top: 0; padding-top: 4px; }
.kp-sp-ord-exp-sec-h {
    font-size: 10.5px; font-weight: 700; color: var(--sp-text-muted);
    margin-bottom: 5px; letter-spacing: 0;
}
/* Karşı durak butonu */
.kp-sp-ord-counter {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 10px; border-radius: 7px;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    cursor: pointer; text-align: left;
    transition: border-color .15s ease, background-color .15s ease;
}
.kp-sp-ord-counter:hover { border-color: var(--sp-primary); background: rgba(120, 123, 242, .08); }
.kp-sp-ord-counter-seq {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff; background: var(--sp-primary);
}
.kp-sp-ord-counter-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kp-sp-ord-counter-body b { font-size: 12px; font-weight: 700; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-sp-ord-counter-body small { font-size: 10.5px; color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-sp-ord-counter > i { color: var(--sp-text-muted); font-size: 11px; }

/* Paket detayları listesi */
.kp-sp-ord-pkgs { display: flex; flex-direction: column; gap: 3px; }
.kp-sp-ord-pkg-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 5px;
    background: var(--sp-bg-input);
    font-size: 11px;
}
.kp-sp-ord-pkg-row > i { color: var(--sp-primary); font-size: 10px; }
.kp-sp-ord-pkg-name { font-weight: 600; color: var(--sp-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-sp-ord-pkg-row > small { font-size: 10.5px; color: var(--sp-text-muted); font-variant-numeric: tabular-nums; }
.kp-sp-ord-pkg-bc { font-family: monospace; padding: 1px 5px; border-radius: 3px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); }

/* Aksiyon çubuğu */
.kp-sp-ord-exp-acts { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 6px; }
.kp-sp-ord-detailbtn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 6px;
    background: var(--sp-primary); color: #fff; border: 1px solid var(--sp-primary);
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease;
}
.kp-sp-ord-detailbtn:hover { background: #6366f1; }
.kp-sp-ord-detailbtn > i { font-size: 10px; }

/* S5.3 — Sipariş compliance rozeti (data-comp boş → placeholder, dolu → ok/crit) */
.kp-sp-ord-comp {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 99px;
    font-size: 10px; font-weight: 700; white-space: nowrap;
    background: transparent; color: transparent;
}
.kp-sp-ord-comp[data-comp="?"]::before { content: '...'; color: var(--sp-text-muted); font-weight: 500; }
.kp-sp-ord-comp.ok { background: rgba(16,185,129,.13); color: #059669; }
.kp-sp-ord-comp.crit { background: rgba(239,68,68,.13); color: #b91c1c; cursor: pointer; }
.kp-sp-ord-comp.crit:hover { background: rgba(239,68,68,.22); }
.kp-sp-ord-comp i { font-size: 9px; }

/* S5.4 — Sipariş gönderici → alıcı akışı */
.kp-sp-ord-flow {
    font-size: 10.5px; color: var(--sp-text-muted);
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.kp-sp-ord-flow i { font-size: 9px; opacity: .7; }
.kp-sp-ord-flow i.kp-sp-ord-arrow { color: var(--sp-primary); opacity: 1; margin: 0 2px; }

/* S5.1 — Mini Timeline çubuğu */
.kp-sp-timeline {
    border-radius: 7px; padding: 8px 11px;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
}
.kp-sp-timeline-h {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    font-size: 11.5px; font-weight: 700; color: var(--sp-text); margin-bottom: 6px;
}
.kp-sp-timeline-h i { color: var(--sp-primary); }
.kp-sp-timeline-h small { font-size: 9.5px; font-weight: 500; color: var(--sp-text-muted); display: inline-flex; align-items: center; gap: 8px; }
.kp-sp-tl-lg {
    display: inline-block; width: 10px; height: 6px; margin-right: 3px; border-radius: 2px; vertical-align: middle;
}
.kp-sp-tl-lg.plan { background: rgba(120, 123, 242, .5); border: 1px solid #797bf2; }
.kp-sp-tl-lg.gps { background: rgba(16, 185, 129, .5); border: 1px solid #10b981; }
.kp-sp-tl-lg.actual { background: #ef4444; border-radius: 99px; width: 8px; height: 8px; }

.kp-sp-timeline-track {
    position: relative; height: 24px;
    background: var(--sp-bg-input); border-radius: 4px; border: 1px solid var(--sp-border);
}
.kp-sp-tl-plan {
    position: absolute; top: 4px; bottom: 4px;
    background: rgba(120, 123, 242, .28); border-radius: 3px;
    border-left: 2px solid #797bf2; border-right: 2px solid #797bf2;
    min-width: 4px;
}
.kp-sp-tl-gps-band {
    position: absolute; top: 4px; bottom: 4px;
    background: rgba(16, 185, 129, .28);
    border-left: 2px solid #10b981; border-right: 2px solid #10b981;
    border-radius: 3px; min-width: 4px;
}
.kp-sp-tl-dot {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 10px; height: 10px; border-radius: 99px;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.kp-sp-tl-dot.actual { background: #ef4444; }
.kp-sp-tl-dot.gps-in { background: #10b981; }
.kp-sp-tl-dot.gps-out { background: #ef4444; }

.kp-sp-timeline-axis {
    position: relative; height: 14px; margin-top: 3px;
    font-size: 9.5px; color: var(--sp-text-muted); font-variant-numeric: tabular-nums;
}
.kp-sp-timeline-axis span {
    position: absolute; top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}
.kp-sp-timeline-axis span:first-child { transform: translateX(0); }
.kp-sp-timeline-axis span:last-child { transform: translateX(-100%); }
.kp-sp-ord-prog { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; }
.kp-sp-ord-prog.ok { background: rgba(16,185,129,.16); color: #10b981; }
.kp-sp-ord-prog.part { background: rgba(59,130,246,.16); color: #3b82f6; }
.kp-sp-ord-prog.crit { background: rgba(239,68,68,.16); color: #ef4444; }

/* Sipariş & Ürün Listesi — sidebar butonu + modal */
.kp-ordlist-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; margin: 4px 0 2px; font-size: 11px; font-weight: 600; border-radius: 99px; cursor: pointer; background: transparent; color: var(--sp-primary); border: 1px solid var(--sp-primary); transition: background-color .15s ease, color .15s ease; }
.kp-ordlist-btn:hover { background: var(--sp-primary); color: #fff; }
.kp-ordlist-btn i { font-size: 10px; }

.kp-olm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100002; display: none; align-items: center; justify-content: center; padding: 20px; }
.kp-olm-overlay.show { display: flex; }
.kp-olm-card { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 12px; width: 720px; max-width: 96vw; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.kp-olm-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--sp-border); }
.kp-olm-head h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--sp-text); display: flex; align-items: center; gap: 8px; }
.kp-olm-head h3 i { color: var(--sp-primary); }
.kp-olm-x { background: transparent; border: 0; font-size: 22px; line-height: 1; color: var(--sp-text-muted); cursor: pointer; padding: 2px 8px; border-radius: 6px; transition: background-color .15s ease, color .15s ease; }
.kp-olm-x:hover { background: var(--sp-bg-input); color: var(--sp-text); }
.kp-olm-body { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.kp-olm-sum { display: flex; gap: 18px; padding: 8px 12px; border-radius: 8px; background: var(--sp-bg-input); font-size: 12px; color: var(--sp-text-muted); }
.kp-olm-sum b { color: var(--sp-text); font-weight: 800; font-size: 13.5px; margin-right: 3px; }
.kp-olm-order { border: 1px solid var(--sp-border); border-radius: 10px; overflow: hidden; }
.kp-olm-ohead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: var(--sp-bg-input); border-bottom: 1px solid var(--sp-border); }
.kp-olm-ono { font-size: 13px; font-weight: 800; color: var(--sp-text); display: inline-flex; align-items: center; gap: 7px; }
.kp-olm-ono i { color: var(--sp-text-muted); font-size: 12px; }
.kp-olm-st { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.kp-olm-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 12px; font-size: 11.5px; color: var(--sp-text-muted); border-bottom: 1px solid var(--sp-border); }
.kp-olm-route .pickup i { color: #3b82f6; }
.kp-olm-route .delivery i { color: #f59e0b; }
.kp-olm-route > i { color: var(--sp-text-muted); }
.kp-olm-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.kp-olm-tbl thead th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--sp-text-muted); padding: 7px 12px; border-bottom: 1px solid var(--sp-border); }
.kp-olm-tbl thead th.num, .kp-olm-tbl tbody td.num { text-align: right; }
.kp-olm-tbl tbody td { padding: 8px 12px; border-bottom: 1px solid var(--sp-border); color: var(--sp-text); vertical-align: top; }
.kp-olm-tbl tbody tr:last-child td { border-bottom: 0; }
.kp-olm-tbl tbody td b { font-weight: 700; }
.kp-olm-sub { display: block; font-size: 10.5px; color: var(--sp-text-muted); margin-top: 2px; }

/* S3 — Sefer panelinde rota uyum şeridi */
.kp-rsp-comp-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 7px 9px; border-radius: 8px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); }
.kp-rsp-comp-title { font-size: 11px; font-weight: 700; color: var(--sp-text-muted); margin-right: 2px; }
.kp-rsp-comp-bit { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; }
.kp-rsp-comp-bit.ok { background: rgba(16,185,129,.16); color: #10b981; }
.kp-rsp-comp-bit.warn { background: rgba(245,158,11,.16); color: #f59e0b; }
.kp-rsp-comp-bit.crit { background: rgba(239,68,68,.16); color: #ef4444; }
.kp-rsp-comp-bit.pending { background: rgba(59,130,246,.16); color: #3b82f6; }
.kp-rsp-comp-bit.na { background: rgba(148,163,184,.16); color: #94a3b8; }

/* S2 — Sefer aracı canlı konum pulse efekti (harita marker'ı) */
@keyframes kpVehPulse {
    0%   { filter: drop-shadow(0 0 0 rgba(121,123,242,.7)); }
    50%  { filter: drop-shadow(0 0 9px rgba(121,123,242,.95)); }
    100% { filter: drop-shadow(0 0 0 rgba(121,123,242,.7)); }
}
.kp-veh-pulse { animation: kpVehPulse 1.4s ease-in-out infinite; z-index: 600 !important; }

/* S4 — Durak timeline saatleri (planlanan · pencere · gerçekleşen) */
.kp-rsp-tl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kp-rsp-tl span { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 5px; }
.kp-rsp-tl-plan { background: rgba(148,163,184,.16); color: var(--sp-text-muted); }
.kp-rsp-tl-slot { background: rgba(59,130,246,.12); color: #3b82f6; }
.kp-rsp-tl-act { background: rgba(16,185,129,.16); color: #10b981; }

/* S5 — Sıradaki durak vurgusu */
.kp-rsp-stop-next { background: rgba(59,130,246,.08); border-left: 3px solid #3b82f6; }
.kp-rsp-next-tag { display: inline-block; font-size: 9px; font-weight: 800; color: #fff; background: #3b82f6; padding: 1px 5px; border-radius: 4px; vertical-align: middle; letter-spacing: .03em; }

/* Sefer panelinde durak satırı — tıklanabilir + durak uyum mini rozeti */
.kp-rsp-stop[data-rsstop] { cursor: pointer; }
.kp-rsp-stop[data-rsstop]:hover { background: var(--sp-bg-card); }
.kp-rsp-stop-compline { margin-top: 3px; }
.kp-rsp-stop-comp { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 99px; }
.kp-rsp-stop-comp.comp-ok { background: rgba(16,185,129,.16); color: #10b981; }
.kp-rsp-stop-comp.comp-warn { background: rgba(245,158,11,.16); color: #f59e0b; }
.kp-rsp-stop-comp.comp-crit { background: rgba(239,68,68,.16); color: #ef4444; }
.kp-rsp-stop-comp.comp-pending { background: rgba(59,130,246,.16); color: #3b82f6; }

/* ===== Sefer Komuta Paneli (#kpRouteSide) ===== */
.kp-rsp-body { padding: 10px 12px; overflow-y: auto; flex: 1; }
.kp-rsp-foot {
    display: flex; gap: 8px; padding: 10px 12px;
    border-top: 1px solid var(--sp-border); background: var(--sp-bg-card);
}
.kp-rsp-foot .sp-btn, .kp-rsp-foot .sp-btn-ghost { flex: 1; justify-content: center; }

/* İlerleme */
.kp-rsp-prog { margin-bottom: 12px; }
.kp-rsp-prog-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--sp-text-muted); margin-bottom: 5px; font-weight: 600; }
.kp-rsp-prog-bar { height: 7px; border-radius: 99px; background: var(--sp-bg-input); overflow: hidden; }
.kp-rsp-prog-bar span { display: block; height: 100%; border-radius: 99px; transition: width 0.3s ease; }

/* KPI mini şerit */
.kp-rsp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.kp-rsp-kpi {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 4px; border-radius: 8px; background: var(--sp-bg-card); border: 1px solid var(--sp-border);
}
.kp-rsp-kpi span { font-size: 10px; color: var(--sp-text-muted); font-weight: 600; }
.kp-rsp-kpi b { font-size: 13px; color: var(--sp-text); }

/* Canlı Durum — araç anlık konum + ETA */
.kp-rsp-live {
    margin-bottom: 10px; padding: 9px 11px;
    border-radius: 8px; background: var(--sp-bg-card); border: 1px solid var(--sp-border);
}
.kp-rsp-live-row { display: flex; align-items: flex-start; gap: 9px; }
.kp-rsp-live-row svg { width: 20px; height: 20px; color: #10b981; flex: 0 0 auto; margin-top: 1px; }
.kp-rsp-live-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kp-rsp-live-lbl { font-size: 10px; color: var(--sp-text-muted); font-weight: 600; }
.kp-rsp-live-body strong { font-size: 13px; color: var(--sp-text); line-height: 1.3; }
.kp-rsp-live-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; font-size: 11px; color: var(--sp-text-muted); }
.kp-rsp-live-st { font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.kp-rsp-live-st.st-moving { background: rgba(16,185,129,0.16); color: #10b981; }
.kp-rsp-live-st.st-over { background: rgba(239,68,68,0.16); color: #ef4444; }
.kp-rsp-live-st.st-stopped { background: rgba(245,158,11,0.16); color: #f59e0b; }
.kp-rsp-live-st.st-offline { background: rgba(148,163,184,0.18); color: #94a3b8; }
.kp-rsp-live-eta { font-weight: 600; color: #3b82f6; }

/* Şoför — iletişim aksiyonları */
.kp-rsp-driver {
    margin-bottom: 10px; padding: 9px 11px;
    border-radius: 8px; background: var(--sp-bg-card); border: 1px solid var(--sp-border);
}
.kp-rsp-driver-row { display: flex; align-items: center; gap: 9px; }
.kp-rsp-driver-row svg { width: 20px; height: 20px; color: #797bf2; flex: 0 0 auto; }
.kp-rsp-driver-row strong { font-size: 13px; color: var(--sp-text); }
.kp-rsp-driver-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kp-rsp-act {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 7px; font-size: 12px; font-weight: 600;
    text-decoration: none; border: 1px solid var(--sp-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kp-rsp-act.tel { color: #10b981; }
.kp-rsp-act.tel:hover { background: rgba(16,185,129,0.12); border-color: #10b981; }
.kp-rsp-act.wa { color: #25d366; }
.kp-rsp-act.wa:hover { background: rgba(37,211,102,0.12); border-color: #25d366; }
.kp-rsp-act.mail { color: #3b82f6; }
.kp-rsp-act.mail:hover { background: rgba(59,130,246,0.12); border-color: #3b82f6; }
.kp-rsp-act.sms { color: #f59e0b; background: transparent; cursor: pointer; font-family: inherit; }
.kp-rsp-act.sms:hover { background: rgba(245,158,11,0.12); border-color: #f59e0b; }

/* İş Emri — durağa bağlı sipariş chip'leri + Sipariş Bağla butonu */
.kp-ie-stop-orders { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.kp-ie-stop-order-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 6px 2px 8px; border-radius: 99px; background: rgba(121,123,242,.12); color: #797bf2; }
.kp-ie-order-unbind { background: none; border: none; color: inherit; cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; opacity: .7; }
.kp-ie-order-unbind:hover { opacity: 1; }
.kp-ie-order-bind { margin-top: 7px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer; background: transparent; color: #797bf2; border: 1px dashed #797bf2; }
.kp-ie-order-bind:hover { background: rgba(121,123,242,.1); }

/* Sipariş seçici popover (durağa bağla) */
.kp-ordpick-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100001; display: none; align-items: center; justify-content: center; }
.kp-ordpick-overlay.show { display: flex; }
.kp-ordpick-card { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 12px; width: 440px; max-width: 92vw; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.kp-ordpick-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--sp-border); }
.kp-ordpick-head h3 { margin: 0; font-size: 14px; color: var(--sp-text); display: flex; align-items: center; gap: 8px; }
.kp-ordpick-head h3 i { color: #797bf2; }
.kp-ordpick-x { background: none; border: none; font-size: 22px; line-height: 1; color: var(--sp-text-muted); cursor: pointer; }
.kp-ordpick-body { padding: 10px 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.kp-ordpick-empty { font-size: 12px; color: var(--sp-text-muted); padding: 12px; text-align: center; }
.kp-ordpick-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--sp-border); cursor: pointer; }
.kp-ordpick-item.on { background: rgba(121,123,242,.08); border-color: #797bf2; }
.kp-ordpick-item input { cursor: pointer; width: 15px; height: 15px; accent-color: #797bf2; }
.kp-ordpick-no { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.kp-ordpick-who { flex: 1; font-size: 11px; color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-ordpick-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--sp-border); }
/* Yük Bağla — zengin sipariş kartı (alıcı, kap, ağırlık, desi, proje) */
.kp-cgpick-item { align-items: flex-start; }
.kp-cgpick-item input { margin-top: 2px; }
.kp-cgpick-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kp-cgpick-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-cgpick-no { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.kp-cgpick-no i { color: var(--sp-primary); font-size: 11px; margin-right: 3px; }
.kp-cgpick-proj { font-size: 10.5px; font-weight: 600; color: var(--sp-primary); background: rgba(120,123,242,.10); border-radius: 4px; padding: 1px 7px; }
.kp-cgpick-rcv { font-size: 11px; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-cgpick-rcv i { color: #f59e0b; font-size: 9px; margin-right: 3px; }
.kp-cgpick-dates { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10px; color: var(--sp-text-muted); }
.kp-cgpick-dates i { color: var(--sp-primary); font-size: 9px; margin-right: 3px; }
.kp-cgpick-caps { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 1px; }
.kp-cgpick-cap { font-size: 10px; color: var(--sp-text-secondary); background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 4px; padding: 1px 6px; }
.kp-cgpick-cap i { color: var(--sp-primary); font-size: 9px; margin-right: 3px; }

/* Şoföre SMS prompt modalı */
.kp-sms-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100000; display: none; align-items: center; justify-content: center; }
.kp-sms-overlay.show { display: flex; }
.kp-sms-modal-card { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 12px; width: 420px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.kp-sms-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--sp-border); }
.kp-sms-modal-head h3 { margin: 0; font-size: 15px; color: var(--sp-text); display: flex; align-items: center; gap: 8px; }
.kp-sms-modal-head h3 i { color: #f59e0b; }
.kp-sms-x { background: none; border: none; font-size: 22px; line-height: 1; color: var(--sp-text-muted); cursor: pointer; }
.kp-sms-modal-body { padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; }
.kp-sms-to { display: flex; flex-direction: column; gap: 2px; }
.kp-sms-to span { font-size: 10px; color: var(--sp-text-muted); font-weight: 600; }
.kp-sms-to strong { font-size: 13px; color: var(--sp-text); }
.kp-sms-text { width: 100%; resize: vertical; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text); font-size: 13px; font-family: inherit; }
.kp-sms-count { font-size: 11px; color: var(--sp-text-muted); text-align: right; }
.kp-sms-hint { font-size: 11px; color: var(--sp-text-muted); line-height: 1.4; }
.kp-sms-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--sp-border); }
.kp-rsp-act.sms { color: #f59e0b; }
.kp-rsp-act.sms:hover { background: rgba(245,158,11,0.12); border-color: #f59e0b; }
.kp-rsp-act-none { font-size: 11px; color: var(--sp-text-muted); font-style: italic; }

/* Atanan araç köprü kartı */
.kp-rsp-vehlink {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
    padding: 9px 11px; border-radius: 8px; cursor: pointer;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kp-rsp-vehlink:hover { background: var(--sp-bg); border-color: #797bf2; }
.kp-rsp-vehlink svg { width: 22px; height: 22px; color: #797bf2; flex: 0 0 auto; }
.kp-rsp-vehlink-meta { flex: 1; display: flex; flex-direction: column; }
.kp-rsp-vehlink-lbl { font-size: 10px; color: var(--sp-text-muted); font-weight: 600; }
.kp-rsp-vehlink-meta strong { font-size: 14px; color: var(--sp-text); }
.kp-rsp-vehlink-arrow { width: 16px !important; height: 16px !important; color: var(--sp-text-muted) !important; }

/* Duraklar */
.kp-rsp-stops { display: flex; flex-direction: column; gap: 0; margin-bottom: 8px; }
.kp-rsp-stop { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--sp-border); position: relative; }
.kp-rsp-stop:last-child { border-bottom: none; }
.kp-rsp-stop-seq {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 99px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; color: #fff; background: #797bf2;
}
.kp-rsp-stop.kind-start .kp-rsp-stop-seq, .kp-rsp-stop.kind-return .kp-rsp-stop-seq { background: #10b981; }
.kp-rsp-stop.kind-pickup .kp-rsp-stop-seq { background: #3b82f6; }
.kp-rsp-stop.kind-delivery .kp-rsp-stop-seq { background: #f59e0b; }
.kp-rsp-stop-body { flex: 1; min-width: 0; }
.kp-rsp-stop-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kp-rsp-stop-name { font-size: 13px; font-weight: 600; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-rsp-stop-kind { flex: 0 0 auto; font-size: 10px; font-weight: 600; color: var(--sp-text-muted); }
.kp-rsp-stop-addr { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }

/* Bağlı siparişler */
.kp-rsp-orders { display: flex; flex-direction: column; gap: 5px; }
.kp-rsp-order {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px;
    border-radius: 7px; background: var(--sp-bg-card); border: 1px solid var(--sp-border);
}
.kp-rsp-order-no { font-size: 12px; font-weight: 700; color: var(--sp-text); }
.kp-rsp-order-cust { flex: 1; font-size: 11px; color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-rsp-order-pkg { flex: 0 0 auto; font-size: 10px; font-weight: 600; color: var(--sp-text-muted); }

/* ===== Sefer Komuta Paneli — yeniden tasarım (kompakt) ===== */
.kp-rsp .kp-rsp-head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg-card); }
.kp-rsp-head-main { flex: 1; min-width: 0; }
.kp-rsp-head-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-rsp-plate { font-size: 16px; font-weight: 800; color: var(--sp-text); letter-spacing: .3px; }
.kp-rsp-id { font-size: 11px; font-weight: 600; color: var(--sp-text-muted); }
.kp-rsp-status { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.kp-rsp-head-sub { font-size: 11.5px; color: var(--sp-text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Header mini Uyum skor rozeti — kaydedilmiş rapor varsa görünür, tıklanır */
.kp-rsp-compscore {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 99px;
    border: 1px solid transparent;
    font-size: 10.5px; font-weight: 700; cursor: pointer;
    font-variant-numeric: tabular-nums; line-height: 1.5;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kp-rsp-compscore i { font-size: 10px; }
.kp-rsp-compscore b { font-size: 12px; font-weight: 800; }
.kp-rsp-compscore:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.kp-rsp-compscore.ok { background: rgba(16, 185, 129, .14); color: #059669; border-color: rgba(16, 185, 129, .25); }
.kp-rsp-compscore.warn { background: rgba(245, 158, 11, .14); color: #b45309; border-color: rgba(245, 158, 11, .28); }
.kp-rsp-compscore.crit { background: rgba(239, 68, 68, .14); color: #b91c1c; border-color: rgba(239, 68, 68, .25); }

/* Mini düzenle butonu — header plate/şoför yanında ✏️ */
.kp-rsp-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; border-radius: 5px;
    border: 1px solid var(--sp-border); background: var(--sp-bg-input);
    color: var(--sp-text-muted); font-size: 9.5px; cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.kp-rsp-mini:hover { color: var(--sp-primary); border-color: var(--sp-primary); background: rgba(120, 123, 242, .1); }

/* Header 2. satır — şoför inline + araç chip'leri */
.kp-rsp-head-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 6px; font-size: 11.5px; color: var(--sp-text);
}
.kp-rsp-driver-inline {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px 3px 7px; border-radius: 999px;
    background: rgba(120, 123, 242, .08); border: 1px solid rgba(120, 123, 242, .2);
    color: var(--sp-text); font-weight: 600; font-size: 11px;
}
.kp-rsp-driver-inline i.fa-user { font-size: 10px; color: var(--sp-primary); }
.kp-rsp-driver-inline.empty { background: var(--sp-bg-input); border-color: var(--sp-border); color: var(--sp-text-muted); font-weight: 500; }
.kp-rsp-veh-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.kp-rsp-vchip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 4px;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    font-size: 10.5px; font-weight: 600; color: var(--sp-text-muted); line-height: 1.5;
}
.kp-rsp-vchip i { font-size: 9.5px; opacity: .75; }
.kp-rsp-vchip-soft { background: transparent; border-style: dashed; }

/* Header 3. satır — İş emri tip chip'leri (Taşıma / Sefer / Hareket) */
.kp-rsp-head-ops {
    display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px;
}
.kp-rsp-opchip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 99px;
    background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .25);
    font-size: 10.5px; font-weight: 600; color: #b45309; line-height: 1.5;
}
.kp-rsp-opchip i { font-size: 9.5px; opacity: .85; }

/* Eski büyük assign butonları artık header'a taşındı — body'deki konteyner gizli */
.kp-rsp-assign:empty { display: none; }
/* İş emri tipi chip'leri header'a taşındı — Info bölümü boşken gizli */
.kp-rsp-info:empty { display: none; }

/* ========== R1 — Sefer Yük Özet Kartı (sefer paneli) ========== */
.kp-rsp-payload {
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(120, 123, 242, .06) 0%, transparent 100%);
    border-bottom: 1px solid var(--sp-border);
}
.kp-rsp-payload:empty { display: none; }
.kp-rsp-payload-h {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--sp-text-muted);
    margin-bottom: 4px;
}
.kp-rsp-payload-h i { color: var(--sp-primary); }
.kp-rsp-payload-h b { color: var(--sp-text); }
.kp-rsp-payload-stats { font-size: 13px; color: var(--sp-text); margin-bottom: 4px; }
.kp-rsp-payload-stats b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sp-text); }
.kp-rsp-payload-customers {
    font-size: 11px; color: var(--sp-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kp-rsp-payload-customers i { color: var(--sp-text-muted); margin-right: 4px; }

/* Kapasite kullanım barı */
.kp-rsp-payload-cap { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.kp-rsp-payload-cap-l { font-size: 10.5px; font-weight: 600; color: var(--sp-text-muted); flex: 0 0 110px; }
.kp-rsp-payload-cap-track { flex: 1; height: 6px; border-radius: 3px; background: var(--sp-bg-input); overflow: hidden; }
.kp-rsp-payload-cap-fill { height: 100%; transition: width .3s ease; border-radius: 3px; }
.kp-rsp-payload-cap-fill.ok { background: linear-gradient(90deg, #10b981 0%, #059669 100%); }
.kp-rsp-payload-cap-fill.high { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); }
.kp-rsp-payload-cap-fill.full { background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%); }
.kp-rsp-payload-cap-r { font-size: 11.5px; font-weight: 800; color: var(--sp-text); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.kp-rsp-payload-cap-sub { font-size: 10px; color: var(--sp-text-muted); margin-top: 2px; }

/* ========== R1 — Sefere Bağlı Siparişler (sefer paneli) ========== */
.kp-rsp-route-orders {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sp-border);
}
.kp-rsp-route-orders:empty { display: none; }
.kp-rsp-ord-h {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--sp-text-muted);
    margin-bottom: 6px;
}
.kp-rsp-ord-h i { color: var(--sp-primary); }
.kp-rsp-ord-h b { color: var(--sp-text); }
.kp-rsp-ord-list { display: flex; flex-direction: column; gap: 5px; }
.kp-rsp-ord {
    padding: 7px 10px; border-radius: 7px;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
    cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.kp-rsp-ord:hover { border-color: var(--sp-primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); transform: translateY(-1px); }
.kp-rsp-ord-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.kp-rsp-ord-no { font-size: 12px; font-weight: 800; color: var(--sp-text); display: inline-flex; align-items: center; gap: 5px; }
.kp-rsp-ord-no i { color: var(--sp-text-muted); font-size: 10.5px; }
.kp-rsp-ord-cmp {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px; border-radius: 99px;
    font-size: 9.5px; font-weight: 700; white-space: nowrap;
    background: transparent; color: transparent;
}
.kp-rsp-ord-cmp[data-comp="?"]::before { content: '...'; color: var(--sp-text-muted); font-weight: 500; }
.kp-rsp-ord-cmp.ok { background: rgba(16,185,129,.13); color: #059669; }
.kp-rsp-ord-cmp.crit { background: rgba(239,68,68,.13); color: #b91c1c; }
.kp-rsp-ord-cmp i { font-size: 9px; }
.kp-rsp-ord-flow {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    font-size: 10.5px; color: var(--sp-text);
}
.kp-rsp-ord-flow .seq {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff; background: var(--sp-primary);
}
.kp-rsp-ord-flow .seq.pickup { background: #3b82f6; }
.kp-rsp-ord-flow .seq.delivery { background: #f59e0b; }
.kp-rsp-ord-flow i { color: var(--sp-text-muted); font-size: 9px; }
.kp-rsp-ord-meta { font-size: 10.5px; color: var(--sp-text-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ========== K1 — Plan & İlerleme Şeridi (rota uyumu) ========== */
.kp-rsp-plan {
    padding: 10px 14px;
    background: var(--sp-bg-card);
    border-bottom: 1px solid var(--sp-border);
}
.kp-rsp-plan-row1 {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--sp-text);
}
.kp-rsp-plan-row1 > i { color: var(--sp-text-muted); font-size: 12px; }
.kp-rsp-plan-times { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-rsp-plan-times small { color: var(--sp-text-muted); font-weight: 500; }
.kp-rsp-plan-bars { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.kp-rsp-plan-bar { display: flex; align-items: center; gap: 8px; font-size: 10.5px; }
.kp-rsp-plan-bar-l { flex: 0 0 80px; color: var(--sp-text-muted); font-weight: 600; }
.kp-rsp-plan-bar-track {
    flex: 1; height: 5px; border-radius: 3px;
    background: var(--sp-bg-input); overflow: hidden;
}
.kp-rsp-plan-bar-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }
.kp-rsp-plan-bar-fill.time { background: linear-gradient(90deg, #797bf2 0%, #6366f1 100%); }
.kp-rsp-plan-bar-fill.done { background: linear-gradient(90deg, #10b981 0%, #059669 100%); }
.kp-rsp-plan-bar-pct {
    flex: 0 0 auto;
    font-weight: 700; color: var(--sp-text-muted); font-size: 10px;
    min-width: 70px; text-align: right;
}

/* ========== K2 — Sonraki Durak Kartı (randevu vs ETA) ========== */
.kp-rsp-next {
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(120, 123, 242, .06) 0%, transparent 100%);
    border-bottom: 1px solid var(--sp-border);
}
.kp-rsp-next-h { display: flex; align-items: center; gap: 8px; }
.kp-rsp-next-seq {
    flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff;
    background: var(--sp-primary);
}
.kp-rsp-next-seq.kind-pickup { background: #f59e0b; }
.kp-rsp-next-seq.kind-delivery { background: #10b981; }
.kp-rsp-next-seq.kind-start { background: #6366f1; }
.kp-rsp-next-seq.kind-end { background: #6b7280; }
.kp-rsp-next-tit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kp-rsp-next-tit b { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.kp-rsp-next-kind {
    padding: 1px 7px; border-radius: 99px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
}
.kp-rsp-next-kind.kind-pickup { background: rgba(245, 158, 11, .14); color: #b45309; }
.kp-rsp-next-kind.kind-delivery { background: rgba(16, 185, 129, .14); color: #059669; }
.kp-rsp-next-kind.kind-start { background: rgba(99, 102, 241, .14); color: #4338ca; }
.kp-rsp-next-kind.kind-end { background: var(--sp-bg-input); color: var(--sp-text-muted); }
.kp-rsp-next-fit {
    flex: 0 0 auto;
    padding: 3px 9px; border-radius: 99px;
    font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.kp-rsp-next-fit.ok { background: rgba(16, 185, 129, .12); color: #059669; }
.kp-rsp-next-fit.late { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.kp-rsp-next-fit.early { background: rgba(59, 130, 246, .12); color: #1d4ed8; }
.kp-rsp-next-addr {
    margin-top: 4px; font-size: 11px; color: var(--sp-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kp-rsp-next-times {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 6px;
    font-size: 10.5px; color: var(--sp-text-muted); font-weight: 600;
}
.kp-rsp-next-times i { margin-right: 3px; opacity: .75; }

/* ========== K3 — Durak Timeline (uyum rozetleri) ========== */
/* Status-based stil — seq badge rengi */
.kp-rsp-stop.st-done .kp-rsp-stop-seq { background: #10b981; }
.kp-rsp-stop.st-next .kp-rsp-stop-seq {
    background: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
    animation: kp-stop-pulse 1.6s ease-in-out infinite;
}
.kp-rsp-stop.st-pending .kp-rsp-stop-seq { background: var(--sp-border); color: var(--sp-text-muted); }
.kp-rsp-stop.st-pending .kp-rsp-stop-name,
.kp-rsp-stop.st-pending .kp-rsp-stop-addr { opacity: .7; }
.kp-rsp-stop.st-next { background: rgba(59, 130, 246, .04); }

@keyframes kp-stop-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }
    50% { box-shadow: 0 0 0 5px rgba(59, 130, 246, .08); }
}

/* A — Stop kartı Plan vs Gerçek karşılaştırma kutusu (kompakt, gerçek GPS odaklı) */
.kp-rsp-stop-time {
    margin-top: 5px;
    border-radius: 6px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    overflow: hidden;
}
.kp-rsp-stop-tr {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; font-size: 11.5px;
}
.kp-rsp-stop-tr + .kp-rsp-stop-tr { border-top: 1px dashed var(--sp-border); }
.kp-rsp-stop-tr > span:first-child {
    flex: 0 0 76px; font-size: 11px; font-weight: 600;
    color: var(--sp-text-muted); letter-spacing: 0;
}
.kp-rsp-stop-tr > b {
    flex: 1; min-width: 0; font-weight: 700; font-size: 12.5px;
    color: var(--sp-text); letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
}
.kp-rsp-stop-tr > b small {
    font-size: 9.5px; font-weight: 500; color: var(--sp-text-muted); letter-spacing: 0;
    margin-left: 4px;
}
.kp-rsp-stop-tr.plan { background: rgba(120, 123, 242, .06); }
.kp-rsp-stop-tr.plan > b { color: #4338ca; }
.kp-rsp-stop-tr.actual.ok { background: rgba(16, 185, 129, .07); }
.kp-rsp-stop-tr.actual.ok > b { color: #059669; }
.kp-rsp-stop-tr.actual.late { background: rgba(239, 68, 68, .07); }
.kp-rsp-stop-tr.actual.late > b { color: #b91c1c; }
.kp-rsp-stop-tr.actual.early { background: rgba(59, 130, 246, .07); }
.kp-rsp-stop-tr.actual.early > b { color: #1d4ed8; }
.kp-rsp-stop-tr.live.late { background: rgba(239, 68, 68, .05); }
.kp-rsp-stop-tr.live.late > b { color: #b91c1c; }
.kp-rsp-stop-tr.live.early > b { color: #1d4ed8; }
.kp-rsp-stop-tr.live.ok > b { color: #059669; }
.kp-rsp-stop-tr.live > b { color: #1d4ed8; }   /* canlı ETA varsayılan: mavi */
.kp-rsp-stop-trdiff {
    flex: 0 0 auto;
    padding: 2px 8px; border-radius: 99px;
    font-size: 10.5px; font-weight: 700; font-style: normal; white-space: nowrap;
}
.kp-rsp-stop-trdiff.late { background: rgba(239, 68, 68, .14); color: #b91c1c; }
.kp-rsp-stop-trdiff.early { background: rgba(59, 130, 246, .14); color: #1d4ed8; }
.kp-rsp-stop-trdiff.ok { background: rgba(16, 185, 129, .14); color: #059669; }

/* Fit rozeti — durak satırında sağa konumlanır */
.kp-rsp-stop-fit {
    flex: 0 0 auto;
    padding: 2px 8px; border-radius: 99px;
    font-size: 10px; font-weight: 700; white-space: nowrap; line-height: 1.5;
}
.kp-rsp-stop-fit.ok { background: rgba(16, 185, 129, .12); color: #059669; }
.kp-rsp-stop-fit.late { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.kp-rsp-stop-fit.early { background: rgba(59, 130, 246, .12); color: #1d4ed8; }
.kp-rsp-stop-fit.pending { background: transparent; color: var(--sp-text-muted); font-weight: 500; padding-left: 0; }
.kp-rsp-stop-fit.current { background: rgba(59, 130, 246, .12); color: #1d4ed8; }
.kp-rsp-close { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text-muted); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .15s ease, background-color .15s ease; }
.kp-rsp-close:hover { color: var(--sp-danger); background: rgba(239, 68, 68, .1); }
/* KPI — 5 kart */
.kp-rsp .kp-rsp-kpis { grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 10px; }
.kp-rsp .kp-rsp-kpi { padding: 7px 3px; }
.kp-rsp .kp-rsp-kpi b { font-size: 13px; }
.kp-rsp .kp-rsp-kpi span { font-size: 9px; }
.kp-rsp .kp-rsp-kpi.pickup b { color: #3b82f6; }
.kp-rsp .kp-rsp-kpi.delivery b { color: #f59e0b; }
/* Canlı konum + şoför — yatay/kompakt */
.kp-rsp .kp-rsp-live { display: flex; align-items: flex-start; gap: 9px; }
.kp-rsp-live-ico { color: #10b981; font-size: 15px; margin-top: 2px; flex: 0 0 auto; }
.kp-rsp .kp-rsp-driver { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-rsp-driver-ico { color: #797bf2; font-size: 14px; flex: 0 0 auto; }
.kp-rsp .kp-rsp-driver strong { font-size: 13px; color: var(--sp-text); }
.kp-rsp .kp-rsp-driver-acts { margin: 0 0 0 auto; }
/* Durak — meta (km/varış) + yük/teslim başarı */
.kp-rsp-stop-kind.kind-pickup { color: #3b82f6; }
.kp-rsp-stop-kind.kind-delivery { color: #f59e0b; }
.kp-rsp-stop-kind.kind-return, .kp-rsp-stop-kind.kind-start { color: #10b981; }
.kp-rsp-stop-meta { display: flex; flex-wrap: wrap; gap: 4px 11px; margin-top: 4px; font-size: 10.5px; color: var(--sp-text-muted); }
.kp-rsp-stop-meta i { font-size: 9px; margin-right: 2px; opacity: .8; }
.kp-rsp-stop-meta .ok { color: #10b981; }
.kp-rsp-stop-meta.win { margin-top: 2px; }
.kp-rsp-stop-meta.win i { color: #797bf2; opacity: 1; }
.kp-rsp-stop-loads { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.kp-rsp-stop-loadmore-wrap { display: flex; flex-direction: column; gap: 3px; }
.kp-rsp-stop-loadmore-wrap[hidden] { display: none; }   /* display:flex, hidden attribute'ünü ezmesin */
.kp-rsp-stop-loadmore { align-self: flex-start; margin-top: 2px; padding: 2px 8px; border: 1px dashed var(--sp-border); border-radius: 6px; background: transparent; color: #797bf2; font-size: 10.5px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.kp-rsp-stop-loadmore:hover { background: rgba(121,123,242,.1); border-color: #797bf2; }

/* R2 — Güzergah'taki yük satırı accordion (head + exp) */
.kp-rsp-stop-load {
    font-size: 10.5px; color: var(--sp-text);
    display: flex; flex-direction: column; gap: 4px;
    border-radius: 6px; padding: 4px 6px;
    border: 1px solid transparent;
    transition: border-color .15s ease, background-color .15s ease;
}
.kp-rsp-stop-load.expandable { cursor: pointer; }
.kp-rsp-stop-load.expandable:hover { background: var(--sp-bg-card); border-color: var(--sp-border); }
.kp-rsp-stop-load.expanded { background: var(--sp-bg-card); border-color: var(--sp-primary); }
.kp-rsp-stop-load-head {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.kp-rsp-stop-load.pickup .kp-rsp-stop-load-head > i:first-child { color: #3b82f6; }
.kp-rsp-stop-load.delivery .kp-rsp-stop-load-head > i:first-child { color: #f59e0b; }
.kp-rsp-stop-load-ref {
    font-size: 10px; color: var(--sp-text-muted); font-weight: 500;
    padding: 1px 6px; border-radius: 3px; background: var(--sp-bg-input);
    margin-left: 2px;
}
.kp-rsp-stop-load-w {
    font-size: 9.5px; color: var(--sp-text-muted); font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 1px 4px;
}
.kp-rsp-stop-load b { font-weight: 700; padding: 0 6px; border-radius: 4px; font-size: 9.5px; }
.kp-rsp-stop-load b.done { color: #10b981; background: rgba(16, 185, 129, .13); }
.kp-rsp-stop-load b.wait { color: var(--sp-text-muted); background: var(--sp-bg-input); }
/* Compliance rozet — yük satırında */
.kp-rsp-stop-load-cmp {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 4px;
    background: transparent; color: transparent;
}
.kp-rsp-stop-load-cmp[data-comp="?"]::before { content: '...'; color: var(--sp-text-muted); font-size: 8px; font-weight: 700; }
.kp-rsp-stop-load-cmp.ok { background: rgba(16, 185, 129, .15); color: #059669; }
.kp-rsp-stop-load-cmp.crit { background: rgba(239, 68, 68, .15); color: #b91c1c; }
.kp-rsp-stop-load-cmp i { font-size: 9px; }
/* Chevron — açıkken döner */
.kp-rsp-stop-load-chev {
    margin-left: auto; font-size: 9px; color: var(--sp-text-muted);
    transition: transform .2s ease;
}
.kp-rsp-stop-load.expanded .kp-rsp-stop-load-chev { transform: rotate(180deg); color: var(--sp-primary); }

/* Expand içeriği */
.kp-rsp-stop-load-exp { padding: 4px 2px 2px; border-top: 1px dashed var(--sp-border); }
.kp-rsp-stop-load-exp[hidden] { display: none; }
.kp-rsp-stop-load-pkgs { display: flex; flex-direction: column; gap: 3px; margin-bottom: 5px; }
.kp-rsp-stop-pkg-row {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 6px; border-radius: 4px;
    background: var(--sp-bg-input);
    font-size: 10px;
}
.kp-rsp-stop-pkg-row > i { color: var(--sp-primary); font-size: 9px; }
.kp-rsp-stop-pkg-name { font-weight: 600; color: var(--sp-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-rsp-stop-pkg-row > small { font-size: 9.5px; color: var(--sp-text-muted); font-variant-numeric: tabular-nums; }
.kp-rsp-stop-pkg-bc { font-family: monospace; padding: 0 4px; border-radius: 3px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); }
.kp-rsp-stop-load-detail {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 5px;
    background: var(--sp-primary); color: #fff; border: 0;
    font-size: 10px; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease;
}
.kp-rsp-stop-load-detail:hover { background: #6366f1; }
.kp-rsp-stop-load-detail > i { font-size: 9px; }
/* Bağlı sipariş — detaylı dikey kart */
.kp-rsp .kp-rsp-order { flex-direction: column; align-items: stretch; gap: 5px; }
.kp-rsp-order-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kp-rsp .kp-rsp-order-no { font-size: 12.5px; font-weight: 700; }
.kp-rsp .kp-rsp-order-no i { color: var(--sp-primary); font-size: 11px; margin-right: 4px; }
.kp-rsp-order-st { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.kp-rsp-order-route { display: flex; align-items: center; gap: 7px; font-size: 11px; flex-wrap: wrap; }
.kp-rsp-pp { display: inline-flex; align-items: center; gap: 4px; color: var(--sp-text); max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-rsp-pp.pickup i { color: #3b82f6; font-size: 9px; }
.kp-rsp-pp.delivery i { color: #f59e0b; font-size: 9px; }
.kp-rsp-order-arrow { color: var(--sp-text-muted); font-size: 10px; }
.kp-rsp-order-addr { font-size: 10.5px; color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-rsp-order-addr i { color: #f59e0b; font-size: 9px; margin-right: 3px; }
.kp-rsp-order-caps { display: flex; flex-wrap: wrap; gap: 5px 9px; font-size: 10px; color: var(--sp-text-secondary); }
.kp-rsp-order-caps i { color: var(--sp-primary); font-size: 9px; margin-right: 3px; }
.kp-rsp .kp-rsp-order { cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.kp-rsp .kp-rsp-order:hover { border-color: var(--sp-primary); background: rgba(120, 123, 242, .05); }
/* Araç son konum etiketi */
.kp-rsp-live-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; color: var(--sp-text-muted); }
/* Uyarılar */
.kp-rsp-warn { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.kp-rsp-warn-item { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.4; }
.kp-rsp-warn-item i { font-size: 12px; margin-top: 1px; flex: 0 0 auto; }
.kp-rsp-warn-item.warn { background: rgba(245, 158, 11, .12); color: #b45309; }
.kp-rsp-warn-item.warn i { color: #f59e0b; }
.kp-rsp-warn-item.crit { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.kp-rsp-warn-item.crit i { color: #ef4444; }
.kp-rsp-warn-item b { font-weight: 800; }
/* Bilgi (tip/gerçekleşen tarih) */
.kp-rsp-info { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; padding: 9px 11px; border-radius: 8px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); }
.kp-rsp-info:empty { display: none; }
.kp-rsp-info-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.kp-rsp-info-row span { color: var(--sp-text-muted); }
.kp-rsp-info-row b { color: var(--sp-text); font-weight: 600; text-align: right; }
/* Plaka & Şoför atama */
.kp-rsp-assign { display: flex; gap: 8px; margin-bottom: 10px; }
.kp-rsp-assign-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-size: 11.5px; font-weight: 600; border-radius: 8px; cursor: pointer; background: transparent; color: var(--sp-primary); border: 1px solid var(--sp-primary); transition: background-color .15s ease; }
.kp-rsp-assign-btn:hover { background: rgba(120, 123, 242, .08); }

/* Sefer belgeleri — üst özet butonu (yüklü/toplam) */
.kp-rsp-docsum { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; margin-bottom: 10px; border-radius: 9px; cursor: pointer; background: var(--sp-bg-input); border: 1px solid var(--sp-border); color: var(--sp-text); transition: background-color .15s ease, border-color .15s ease; }
.kp-rsp-docsum:hover { background: var(--sp-bg); border-color: var(--sp-primary); }
.kp-rsp-docsum-l { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.kp-rsp-docsum-l i { color: var(--sp-primary); }
.kp-rsp-docsum-r { display: inline-flex; align-items: center; gap: 8px; }
.kp-rsp-docsum-r b { font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 20px; background: var(--sp-bg-card); border: 1px solid var(--sp-border); color: var(--sp-text-muted); }
.kp-rsp-docsum-r i { font-size: 11px; color: var(--sp-text-muted); }
.kp-rsp-docsum.complete .kp-rsp-docsum-r b { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.4); color: #10b981; }
.kp-rsp-docsum.miss .kp-rsp-docsum-r b { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); color: #f59e0b; }

/* Belge formu görünümü — sidebar gövdesinin üzerine biner */
.kp-rsp-docpane { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; background: var(--sp-bg-card); }
.kp-rsp-docpane.show { display: flex; }
.kp-rsp-docpane-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--sp-border); }
.kp-rsp-docback { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; background: transparent; color: var(--sp-primary); border: 1px solid var(--sp-primary); transition: background-color .15s ease; }
.kp-rsp-docback:hover { background: rgba(120, 123, 242, .08); }
.kp-rsp-docpane-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--sp-text); }
.kp-rsp-docpane-title i { color: var(--sp-primary); }
.kp-rsp-docmount { flex: 1; overflow-y: auto; padding: 12px; }

/* Atama seçici — arama kutusu + zengin satır (uygunluk + yakınlık) */
.kp-ordpick-search { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-bottom: 1px solid var(--sp-border); }
.kp-ordpick-search i { color: var(--sp-text-muted); font-size: 12px; }
.kp-ordpick-search input { flex: 1; border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; outline: none; transition: border-color .15s ease; }
.kp-ordpick-search input:focus { border-color: var(--sp-primary); }
.kp-rsassign-item { justify-content: flex-start; }
.kp-rsassign-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kp-rsassign-name { font-size: 13px; font-weight: 700; color: var(--sp-text); display: inline-flex; align-items: center; gap: 7px; }
.kp-rsassign-name i { color: var(--sp-text-muted); font-size: 11px; }
.kp-rsassign-sub { font-size: 11px; color: var(--sp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-rsassign-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.kp-rsassign-dist { font-size: 11px; font-weight: 700; color: var(--sp-text); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kp-rsassign-dist i { color: var(--sp-primary); font-size: 10px; }
.kp-rsassign-dist.none { font-weight: 500; color: var(--sp-text-muted); }
.kp-rsassign-suit { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kp-rsassign-suit i { font-size: 9px; }
.kp-rsassign-suit.lvl-ok { background: rgba(16,185,129,.14); color: #10b981; }
.kp-rsassign-suit.lvl-warning { background: rgba(245,158,11,.14); color: #f59e0b; }
.kp-rsassign-suit.lvl-critical { background: rgba(239,68,68,.14); color: #ef4444; }
.kp-rsassign-suit.lvl-unfit { background: rgba(239,68,68,.18); color: #ef4444; }

/* Çoklu seçim — sefer görünürlük (harita filtresi) başlığı + kart checkbox'ı */
.kp-route-visbar {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; margin: 0 8px 4px;
    border: 1px solid var(--sp-border); border-radius: 6px;
    background: var(--sp-bg-card); font-size: 12px;
}
.kp-route-visall {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; font-weight: 600; color: var(--sp-text);
}
.kp-route-visall input { cursor: pointer; width: 14px; height: 14px; accent-color: #797bf2; }
.kp-route-viscount { flex: 1; color: var(--sp-text-muted); font-weight: 500; }
.kp-route-visclear {
    border: 1px solid var(--sp-border); background: transparent; color: var(--sp-text-muted);
    border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.kp-route-visclear:hover { background: var(--sp-bg); color: var(--sp-text); }
.kp-route-vis { display: inline-flex; align-items: center; margin-right: 7px; cursor: pointer; }
.kp-route-vis input { cursor: pointer; width: 14px; height: 14px; accent-color: #797bf2; }

.kp-route-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    line-height: 1.35;
}
.kp-route-card:hover {
    background: var(--sp-bg-hover);
    border-color: #797bf2;
    transform: translateY(-1px);
}
.kp-route-card.active {
    border-color: #797bf2;
    background: var(--sp-bg-hover);
}
.kp-route-r1 {
    display: flex;
    align-items: center;
    gap: 6px;
}
.kp-route-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.kp-route-title {
    font-weight: 700;
    font-size: 11.5px;
    color: var(--sp-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
.kp-route-st {
    font-size: 9.5px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
    background: var(--sp-bg-input);
    color: var(--sp-text-secondary);
}
.kp-route-r2 {
    font-size: 11px;
    color: var(--sp-text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kp-route-r3 {
    display: flex;
    gap: 10px;
    font-size: 10px;
    color: var(--sp-text-secondary);
}
.kp-route-r4 {
    font-size: 9.5px;
    color: var(--sp-text-muted);
}
.kp-route-acts {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap;
}
.kp-route-act {
    flex: 1 1 auto;
    padding: 4px 8px;
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    background: var(--sp-bg-input);
    color: var(--sp-text-secondary);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kp-route-act:hover {
    border-color: #797bf2;
    color: var(--sp-text-primary);
}

/* Faz 3 — sipariş seçimi + rota oluştur barı */
.kp-ord-pick { display: inline-flex; align-items: center; margin-right: 4px; }
.kp-ord-cb { cursor: pointer; width: 14px; height: 14px; }
/* Son duruma ulaşan sipariş (100-103) rotalanamaz → seçim pasif, kart soluk */
.kp-ord-pick-off { opacity: 0.4; cursor: not-allowed; }
.kp-ord-pick-off .kp-ord-cb { cursor: not-allowed; }
.kp-order-card-terminal { opacity: 0.72; }

/* ============================================================================
   Zengin sipariş kartı (İş Kuyruğu — araç kartı standardına uyumlu).
   ============================================================================ */
.kp-ord-rich { gap: 6px; padding: 9px 10px; }
.kp-ord-rich.sel { border-color: var(--sp-primary); background: rgba(245, 158, 11, 0.06); }
.kp-ord-rich-terminal { opacity: 0.82; }
.kp-ordr-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kp-ordr-no { font-weight: 800; font-size: 12px; color: var(--sp-text); white-space: nowrap; }
.kp-ordr-st { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.kp-ordr-firm { font-size: 11.5px; font-weight: 700; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-ordr-route { font-size: 11px; color: var(--sp-text); font-weight: 600; }
.kp-ordr-arrow { color: var(--sp-text-muted); margin: 0 3px; }
.kp-ordr-dest { font-size: 10.5px; color: var(--sp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-ordr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.kp-ordr-chip { font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--sp-bg-input); color: var(--sp-text-muted); border: 1px solid var(--sp-border); white-space: nowrap; }
.kp-ordr-eta { display: flex; flex-direction: column; gap: 3px; padding: 5px 8px; border-radius: 6px; background: var(--sp-bg-input); }
.kp-ordr-eta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; }
.kp-ordr-eta-l { color: var(--sp-text-muted); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.kp-ordr-eta-v { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.kp-ordr-eta-when { color: var(--sp-text); font-weight: 700; text-align: right; }
.kp-ordr-eta-rel { font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.kp-ordr-eta-rel.past { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.kp-ordr-eta-rel.soon { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.kp-ordr-eta-rel.future { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.kp-ordr-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.kp-ordr-cap { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(121, 123, 242, 0.1); color: #797bf2; white-space: nowrap; }

/* "Rotaya Ekle" modalı — çizilen alandaki siparişler için yeni rota / planlı rotaya ekle */
.kp-arm-overlay { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; background: rgba(15, 12, 8, 0.55); padding: 20px; }
.kp-arm-overlay.show { display: flex; }
.kp-arm-box { width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: var(--sp-text); }
.kp-arm-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--sp-border); }
.kp-arm-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--sp-text); }
.kp-arm-title i { color: var(--sp-primary); }
.kp-arm-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--sp-text-muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: color 0.15s ease, background-color 0.15s ease; }
.kp-arm-close:hover { color: var(--sp-text); background: var(--sp-bg-input); }
.kp-arm-body { padding: 16px 18px; overflow-y: auto; }
.kp-arm-newbtn { display: block; width: 100%; text-align: left; padding: 13px 15px; border: 1px solid #797bf2; border-radius: 10px; background: rgba(121, 123, 242, 0.08); cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.kp-arm-newbtn:hover { background: rgba(121, 123, 242, 0.15); box-shadow: 0 2px 10px rgba(121, 123, 242, 0.2); }
.kp-arm-newbtn-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #797bf2; }
.kp-arm-newbtn-s { font-size: 11.5px; color: var(--sp-text-muted); margin-top: 3px; margin-left: 24px; }
.kp-arm-sec { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--sp-text-muted); margin: 16px 0 8px; }
.kp-arm-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg-input); margin-bottom: 10px; }
.kp-arm-search i { color: var(--sp-text-muted); font-size: 12px; }
.kp-arm-search input { flex: 1; border: none; background: none; outline: none; font-size: 13px; color: var(--sp-text); }
.kp-arm-list { display: flex; flex-direction: column; gap: 8px; }
.kp-arm-empty { padding: 22px 10px; text-align: center; font-size: 12.5px; color: var(--sp-text-muted); }
.kp-arm-route { padding: 11px 13px; border: 1px solid var(--sp-border); border-radius: 10px; background: var(--sp-bg-card); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.kp-arm-route:hover { border-color: var(--sp-primary); box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15); background: var(--sp-bg-input); }
.kp-arm-route-h { display: flex; align-items: center; gap: 8px; }
.kp-arm-route-ic { color: var(--sp-text-muted); font-size: 12px; }
.kp-arm-route-star { color: #f59e0b; font-size: 12px; }
.kp-arm-route-name { font-weight: 700; font-size: 13px; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-arm-route-badges { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.kp-arm-route-st { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(16, 185, 129, 0.14); color: #10b981; white-space: nowrap; }
.kp-arm-route-cnt { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--sp-bg-input); color: var(--sp-text-muted); white-space: nowrap; }
.kp-arm-route-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; font-size: 11px; color: var(--sp-text-muted); }
.kp-arm-route-meta i { margin-right: 3px; }
.kp-arm-route-near { color: #f59e0b; font-weight: 700; }
.kp-arm-foot { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--sp-border); }
.kp-arm-cancel { padding: 8px 18px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-card); color: var(--sp-text); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.kp-arm-cancel:hover { background: var(--sp-bg-input); border-color: var(--sp-text-muted); }
/* Toplu rota butonu (kp-arm modalında 3. seçenek) */
.kp-arm-newbtn.kp-arm-vrpbtn { margin-top: 10px; border-color: #10b981; background: rgba(16, 185, 129, 0.08); }
.kp-arm-newbtn.kp-arm-vrpbtn:hover { background: rgba(16, 185, 129, 0.16); box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2); }
.kp-arm-newbtn.kp-arm-vrpbtn .kp-arm-newbtn-t { color: #10b981; }

/* ===== VRP (Algoritmik toplu rotalama) modalı ===== */
.kp-vrp-box { width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: var(--sp-text); }
/* Geniş (2 sütun: sol tab, sağ harita) */
.kp-vrp-box-wide { max-width: 1500px; height: 88vh; max-height: 88vh; }
.kp-vrp-split { display: flex; flex: 1; min-height: 0; }
.kp-vrp-left { display: flex; flex-direction: column; width: 40%; min-width: 0; border-right: 1px solid var(--sp-border); }
.kp-vrp-right { position: relative; width: 60%; min-width: 0; }
.kp-vrp-subtabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--sp-border); flex-shrink: 0; }
.kp-vrp-body { padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.kp-vrp-body .sp-vpane { display: none; }
.kp-vrp-body .sp-vpane.active { display: block; }
.kp-vrp-sec-t { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--sp-text-muted); margin: 4px 0 10px; }
.kp-vrp-body .kp-vrp-sec-t:not(:first-child) { margin-top: 18px; }
.kp-vrp-body .kp-ie-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Satır aralığı */
.kp-vrp-row { margin-bottom: 14px; }
.kp-vrp-row.kp-vrp-swrap { margin-bottom: 14px; }
.kp-vrp-endwrap { margin-bottom: 14px; }
.kp-vrp-dur { margin-top: 8px; font-size: 12px; color: var(--sp-text); }
.kp-vrp-dur i { color: var(--sp-primary); margin-right: 5px; }
.kp-vrp-dur b { color: var(--sp-primary-dark); }
/* Sağ panel: harita + üstünde overlay istatistik barı (Yeni Rota'daki sp-route-map-stats deseni) */
.kp-vrp-map { position: absolute; inset: 0; }
.kp-vrp-right .kp-vrp-stats { top: 10px; left: 10px; right: 10px; bottom: auto; flex-wrap: wrap; }
.kp-vrp-stats .sp-route-map-stat.pick i { color: #10b981; }
.kp-vrp-stats .sp-route-map-stat.del i { color: #3b82f6; }
/* Yük planlama tipi kartları */
.kp-vrp-cards { display: flex; flex-direction: column; gap: 8px; }
.kp-vrp-card { display: block; padding: 10px 12px; border: 1.5px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg-card); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.kp-vrp-card:hover { border-color: var(--sp-text-muted); }
.kp-vrp-card input { display: none; }
.kp-vrp-card.active { border-color: var(--sp-primary); background: rgba(245, 158, 11, 0.08); }
.kp-vrp-card-t { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.kp-vrp-card.active .kp-vrp-card-t { color: var(--sp-primary-dark); }
.kp-vrp-card-d { font-size: 11px; color: var(--sp-text-muted); margin-top: 3px; line-height: 1.4; }
/* Marker popover (tema uyumlu) */
.kp-vrp-popwrap .leaflet-popup-content-wrapper { background: var(--sp-bg-card); color: var(--sp-text); border: 1px solid var(--sp-border); border-radius: 10px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); }
.kp-vrp-popwrap .leaflet-popup-tip { background: var(--sp-bg-card); border: 1px solid var(--sp-border); }
.kp-vrp-popwrap .leaflet-popup-content { margin: 10px 12px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.kp-vrp-popwrap a.leaflet-popup-close-button { color: var(--sp-text-muted); }
.kp-vrp-pop-role { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 9px; border-radius: 999px; margin-bottom: 6px; }
.kp-vrp-pop-pick { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.kp-vrp-pop-del { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.kp-vrp-pop-name { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.kp-vrp-pop-addr { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }
.kp-vrp-pop-pick-info { font-size: 11px; color: var(--sp-text); margin-top: 6px; }
.kp-vrp-pop-pick-info b { color: var(--sp-text-muted); font-weight: 700; }
.kp-vrp-pop-meta { font-size: 10.5px; color: var(--sp-text-muted); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--sp-border); }
.kp-vrp-pop-caps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kp-vrp-pop-caps span { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
/* Switch satırları */
.kp-vrp-swrap { display: flex; flex-direction: column; gap: 11px; margin-bottom: 14px; }
.kp-vrp-swrow { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.kp-vrp-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.kp-vrp-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.kp-vrp-switch-sl { position: absolute; inset: 0; background: var(--sp-border); border-radius: 999px; transition: background-color 0.18s ease; }
.kp-vrp-switch-sl::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.18s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.kp-vrp-switch input:checked + .kp-vrp-switch-sl { background: var(--sp-primary); }
.kp-vrp-switch input:checked + .kp-vrp-switch-sl::before { transform: translateX(16px); }
.kp-vrp-swlabel { font-size: 12.5px; color: var(--sp-text); }
/* Yük planlama tipi radyoları */
.kp-vrp-radios { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.kp-vrp-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sp-text); cursor: pointer; }
/* Kapasite kısıtı pill'leri */
.kp-vrp-pillrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kp-vrp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1.5px solid var(--sp-border); border-radius: 999px; background: var(--sp-bg-card); color: var(--sp-text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; }
.kp-vrp-pill input { display: none; }
.kp-vrp-pill.active { border-color: var(--sp-primary); color: var(--sp-primary-dark); background: rgba(245, 158, 11, 0.1); }
.kp-vrp-maxpoint { width: 110px; }
.kp-vrp-caphint { font-size: 11.5px; color: var(--sp-text-muted); margin-top: 8px; min-height: 4px; }
/* Araç modu sekmeleri */
.kp-vrp-modetabs { display: flex; gap: 8px; margin-bottom: 14px; }
.kp-vrp-modetab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1.5px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg-card); color: var(--sp-text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; }
.kp-vrp-modetab input { display: none; }
.kp-vrp-modetab.active { border-color: var(--sp-primary); color: var(--sp-primary-dark); background: rgba(245, 158, 11, 0.1); }
.kp-vrp-vsec { }
.kp-vrp-empty { padding: 18px 10px; text-align: center; font-size: 12px; color: var(--sp-text-muted); }
/* Kapasite kısıtı devre dışı (sipariş değeri 0) */
.kp-vrp-pill.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.kp-vrp-pointwrap .kp-ie-field { max-width: 260px; }
/* Filo — üst bar (arama + tip filtresi) */
.kp-vrp-fleettop { display: flex; gap: 8px; margin-bottom: 8px; }
.kp-vrp-fleetsearch { flex: 1; margin-bottom: 0; }
.kp-vrp-typefilter { width: 175px; flex-shrink: 0; }
.kp-vrp-fleetactions { display: flex; gap: 8px; margin-bottom: 8px; }
.kp-vrp-fbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-card); color: var(--sp-text); font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.kp-vrp-fbtn:hover { background: var(--sp-bg-input); border-color: var(--sp-text-muted); }
/* Araç tipi grup butonları */
.kp-vrp-typebtns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kp-vrp-typebtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--sp-border); border-radius: 999px; background: var(--sp-bg-card); color: var(--sp-text); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.kp-vrp-typebtn:hover { border-color: var(--sp-primary); color: var(--sp-primary-dark); background: rgba(245, 158, 11, 0.08); }
.kp-vrp-typebtn i { color: var(--sp-text-muted); font-size: 10px; }
.kp-vrp-fleetselinfo { font-size: 11.5px; color: var(--sp-text-muted); margin-bottom: 8px; }
/* Araç listesi satırları */
.kp-vrp-fleetlist { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.kp-vrp-vrow { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-card); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.kp-vrp-vrow:hover { border-color: var(--sp-text-muted); }
.kp-vrp-vrow.sel { border-color: var(--sp-primary); background: rgba(245, 158, 11, 0.07); }
.kp-vrp-vchk { margin-top: 2px; flex-shrink: 0; }
.kp-vrp-vrow-body { flex: 1; min-width: 0; }
.kp-vrp-vrow-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-vrp-vplate { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.kp-vrp-vtype { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--sp-text-muted); padding: 1px 8px; border-radius: 999px; background: var(--sp-bg-input); }
.kp-vrp-vtype i { font-size: 9px; }
.kp-vrp-vcaps { font-size: 10.5px; color: var(--sp-text-muted); margin-top: 3px; }
/* Seçili kapasite kısıtlarını karşılamayan araç — kırmızı, seçilemez */
.kp-vrp-vrow.invalid { border-color: #ef4444; background: rgba(239, 68, 68, 0.06); cursor: not-allowed; }
.kp-vrp-vrow.invalid:hover { border-color: #ef4444; }
.kp-vrp-vrow.invalid .kp-vrp-vplate { color: #ef4444; }
.kp-vrp-vrow.invalid .kp-vrp-vchk { cursor: not-allowed; }
.kp-vrp-vwarn { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #ef4444; margin-top: 4px; }
/* Havuz — ekleme kutusu + eklenen liste */
.kp-vrp-pooladd { padding: 12px; border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg-input); margin-bottom: 12px; }
.kp-vrp-pooladd-row { display: grid; grid-template-columns: 1fr 90px; gap: 10px; }
.kp-vrp-poolcaps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.kp-vrp-addbtn { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 8px; background: #10b981; color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: filter 0.15s ease; }
.kp-vrp-addbtn:hover { filter: brightness(1.06); }
.kp-vrp-poolmsg { margin-top: 8px; }
.kp-vrp-poolmsg:empty { margin-top: 0; }
.kp-vrp-err-line { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #ef4444; line-height: 1.7; }
.kp-vrp-err-line i { font-size: 10px; }
.kp-ie-input.kp-vrp-input-err { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12); }
.kp-vrp-poollist { display: flex; flex-direction: column; gap: 6px; }
.kp-vrp-poolrow { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-card); }
.kp-vrp-poolrm { flex-shrink: 0; width: 26px; height: 26px; border: none; border-radius: 6px; background: rgba(239, 68, 68, 0.1); color: #ef4444; cursor: pointer; transition: background-color 0.15s ease; }
.kp-vrp-poolrm:hover { background: rgba(239, 68, 68, 0.2); }
/* Footer */
.kp-vrp-foot { display: flex; align-items: center; gap: 10px; }
.kp-vrp-msg { flex: 1; font-size: 12px; }
.kp-vrp-go { display: inline-flex; align-items: center; gap: 7px; }
.kp-vrp-msgerr { color: #ef4444; }
.kp-vrp-msgmuted { color: var(--sp-text-muted); }
.kp-vrp-backbtn { display: inline-flex; align-items: center; gap: 5px; }
/* Etkisiz-alan notu (Süre/Başlangıca Dön/Slot) */
.kp-vrp-note { display: flex; gap: 7px; align-items: flex-start; margin: 6px 0 4px; padding: 8px 10px; font-size: 11.5px; line-height: 1.45; color: var(--sp-text-muted); background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 8px; }
.kp-vrp-note i { color: #3b82f6; margin-top: 1px; flex-shrink: 0; }
/* Sonuç (tour özeti) paneli */
.kp-vrp-result, .kp-vrp-createlist { flex: 1; overflow-y: auto; padding: 6px 16px 10px; }
.kp-vrp-result-head { padding: 4px 0 10px; border-bottom: 1px solid var(--sp-border); margin-bottom: 10px; }
.kp-vrp-result-h1 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--sp-text); }
.kp-vrp-result-h1 i { color: #f59e0b; }
.kp-vrp-result-sub { margin-top: 4px; font-size: 12px; color: var(--sp-text-muted); }
.kp-vrp-unassigned { color: #ef4444; font-weight: 700; }
.kp-vrp-tourlist { display: flex; flex-direction: column; gap: 8px; }
.kp-vrp-tourcard { display: flex; gap: 10px; padding: 10px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 10px; }
.kp-vrp-tourcard-l { flex-shrink: 0; }
.kp-vrp-tourdot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; }
.kp-vrp-tourcard-b { flex: 1; min-width: 0; }
.kp-vrp-tourcard-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-vrp-tourveh { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--sp-text); }
.kp-vrp-tourveh i { color: var(--sp-text-muted); font-size: 0.9em; }
.kp-vrp-tourvtype { font-size: 11px; color: var(--sp-text-muted); }
.kp-vrp-tourfill { margin-left: auto; font-size: 11px; font-weight: 700; color: #10b981; padding: 1px 7px; border-radius: 10px; background: rgba(16, 185, 129, 0.12); }
.kp-vrp-tourfill.over { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
.kp-vrp-tourcard-m { margin-top: 4px; font-size: 11.5px; color: var(--sp-text-muted); }
.kp-vrp-result-warn { display: flex; gap: 7px; align-items: flex-start; margin-top: 10px; padding: 9px 10px; font-size: 11.5px; line-height: 1.45; color: var(--sp-text); background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; }
.kp-vrp-result-warn i { color: #ef4444; margin-top: 1px; flex-shrink: 0; }
.kp-vrp-result-note { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; font-size: 11px; color: var(--sp-text-muted); background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 8px; }
.kp-vrp-result-note i { color: #3b82f6; margin-top: 1px; flex-shrink: 0; }
/* Tour seçim — checkbox + seçili/pasif kart */
.kp-vrp-selall { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; color: var(--sp-text-muted); cursor: pointer; }
.kp-vrp-hullrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; color: var(--sp-text-muted); cursor: pointer; }
.kp-vrp-hullrow input { width: 15px; height: 15px; accent-color: var(--sp-primary); cursor: pointer; flex-shrink: 0; }
.kp-vrp-hullinfo { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 7px 9px; font-size: 11.5px; color: var(--sp-text); background: rgba(121, 123, 242, 0.08); border: 1px solid rgba(121, 123, 242, 0.3); border-radius: 8px; }
.kp-vrp-hullinfo i { color: #797bf2; flex-shrink: 0; }
/* Anomali uyarıları — tıklanabilir "haritada göster" odak toggle'ı */
.kp-vrp-anom { cursor: pointer; align-items: center; margin: 0 0 8px; transition: background-color 0.15s ease, border-color 0.15s ease; }
.kp-vrp-anom-txt { flex: 1; }
.kp-vrp-anom-act { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 10.5px; white-space: nowrap; opacity: 0.85; }
.kp-vrp-result-warn.kp-vrp-anom.active { background: rgba(239, 68, 68, 0.16); border-color: #ef4444; }
.kp-vrp-hullinfo.kp-vrp-anom.active { background: rgba(121, 123, 242, 0.18); border-color: #797bf2; }
.kp-vrp-selall input { width: 15px; height: 15px; accent-color: var(--sp-primary); cursor: pointer; flex-shrink: 0; }
.kp-vrp-selall b { color: var(--sp-text); }
.kp-vrp-tourcard { align-items: center; cursor: pointer; transition: border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; }
.kp-vrp-tourchk { width: 16px; height: 16px; accent-color: var(--sp-primary); cursor: pointer; flex-shrink: 0; }
.kp-vrp-tourdot { flex-shrink: 0; }
.kp-vrp-tourcard-b { display: flex; flex-direction: column; }
.kp-vrp-tourcard-m { display: block; }
.kp-vrp-tourcard.sel { border-color: var(--tc, var(--sp-primary)); box-shadow: inset 3px 0 0 var(--tc, var(--sp-primary)); }
.kp-vrp-tourcard:not(.sel) { opacity: 0.5; }
/* Rotalama sonucu KPI kartları — tek satır, kompakt */
.kp-vrp-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.kp-vrp-kpi-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 7px 4px; text-align: center; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 8px; }
.kp-vrp-kpi-card > i { font-size: 12px; color: var(--sp-text-muted); margin-bottom: 2px; }
.kp-vrp-kpi-accent { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.07); }
.kp-vrp-kpi-accent > i { color: #f59e0b; }
.kp-vrp-kpi-v { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.kp-vrp-kpi-v b { font-size: 15px; font-weight: 800; color: var(--sp-text); line-height: 1.05; }
.kp-vrp-kpi-v b.over { color: #ef4444; }
.kp-vrp-kpi-v span { font-size: 9.5px; color: var(--sp-text-muted); margin-top: 1px; white-space: nowrap; }
.kp-vrp-kpi-pct { font-size: 9px; margin-top: 3px; color: #10b981; white-space: nowrap; }
.kp-vrp-kpi-pct.warn { color: #f59e0b; }
.kp-vrp-kpi-avg { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 12.5px; color: var(--sp-text-muted); }
.kp-vrp-kpi-avg i { color: #f59e0b; }
.kp-vrp-kpi-avg b { color: var(--sp-text); font-weight: 700; }
/* Km & Süre — KPI toplam satırı + rota kartı rozeti */
.kp-vrp-kpi-route { display: flex; align-items: center; gap: 6px; margin: -6px 0 12px; font-size: 12.5px; color: var(--sp-text-muted); }
.kp-vrp-kpi-route i { color: #3b82f6; }
.kp-vrp-kpi-route b { color: var(--sp-text); font-weight: 700; }
.kp-vrp-tourkm { color: #3b82f6; font-weight: 700; white-space: nowrap; }
.kp-vrp-tourkm i { margin-right: 2px; }
/* Faz 3 — Oluşturma listesi (sol panel) */
.kp-vrp-cr-sub { font-size: 12px; color: var(--sp-text-muted); margin: 0 0 10px; }
.kp-vrp-cr-sub b { color: var(--sp-text); }
.kp-vrp-cr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.kp-vrp-cr-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-left: 3px solid var(--tc, var(--sp-border)); border-radius: 8px; }
.kp-vrp-cr-row.running { border-color: #3b82f6; }
.kp-vrp-cr-row.done { opacity: 0.7; }
.kp-vrp-cr-dot { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.kp-vrp-cr-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kp-vrp-cr-veh { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.kp-vrp-cr-veh i { color: var(--sp-text-muted); margin-right: 4px; }
.kp-vrp-cr-m { font-size: 11px; color: var(--sp-text-muted); }
.kp-vrp-cr-err { color: #ef4444; }
.kp-vrp-cr-badge { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.kp-vrp-cr-badge.pending { background: transparent; color: var(--sp-text-muted); border: 1px solid var(--sp-border); }
.kp-vrp-cr-badge.running { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.kp-vrp-cr-badge.done { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.kp-vrp-cr-badge.error { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.kp-vrp-cr-ctrl { display: flex; gap: 8px; }
.kp-vrp-cr-ctrl .sp-btn { flex: 1; }
.kp-ordr-foot { display: flex; gap: 6px; margin-top: 2px; }
.kp-ordr-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; font-size: 11px; font-weight: 700; border-radius: 6px; cursor: pointer; border: 1px solid var(--sp-border); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.kp-ordr-btn svg { width: 13px; height: 13px; }
.kp-ordr-detail-btn { background: var(--sp-bg-input); color: var(--sp-text); }
.kp-ordr-detail-btn:hover { border-color: var(--sp-primary); color: var(--sp-primary); }
.kp-ordr-route-btn { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.kp-ordr-route-btn:hover:not(:disabled) { background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); }
.kp-ordr-route-btn.on { background: #10b981; border-color: #10b981; }
.kp-ordr-route-btn.on:hover { background: #0ea372; border-color: #0ea372; }
.kp-ordr-route-btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--sp-bg-input); color: var(--sp-text-muted); border-color: var(--sp-border); }
/* FA ikon hizalama — yapısal ikonlar muted; durum/paket ikonları currentColor ile kendi rengini alır */
.kp-ord-rich i.fas { font-size: 0.92em; }
.kp-ordr-no i, .kp-ordr-firm i, .kp-ordr-dest i, .kp-ordr-eta-l i { color: var(--sp-text-muted); }
.kp-ordr-route > i.fa-location-dot { color: #3b82f6; }
.kp-ordr-route > i.fa-flag-checkered { color: #f59e0b; }
.kp-rb-bar { padding: 6px 8px; position: sticky; top: 0; z-index: 3; background: var(--sp-bg-body); }
.kp-rb-go {
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: #797bf2;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.kp-rb-go:hover { background: #6366f1; }

/* Faz 3 — durak sürükle-bırak + paket rozeti + TSP butonu */
.kp-ie-stop-drag { cursor: grab; color: var(--sp-text-muted); margin-right: 4px; font-size: 13px; }
.kp-ie-stop.dragging { opacity: 0.45; }
.kp-ie-stop-pkg {
    font-size: 9.5px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(99, 102, 241, .18);
    color: #6366f1;
    font-weight: 600;
}
.kp-ie-tsp { background: var(--sp-bg-input); }
/* İş Emri modalı subtab bölümü — kp-modal padding'iyle (16px) hizalı, tam genişlik border */
#kpOrderModal .sp-modal-subtabs { padding: 0 24px; flex: none; }
.kp-ie-tabbody {
    padding-top: 8px;
}
.kp-ie-map {
    height: 52vh;
    min-height: 300px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--sp-border);
}
.kp-ie-tabhint {
    padding: 28px 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--sp-text-muted);
    line-height: 1.6;
}
.kp-ie-yuk-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}
.kp-ie-yuk-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    background: var(--sp-bg-card);
    font-size: 11.5px;
}
.kp-ie-yuk-id { font-weight: 700; color: var(--sp-text-primary); }
.kp-ie-yuk-ord { color: var(--sp-text-secondary); }
.kp-ie-yuk-pt { margin-left: auto; color: var(--sp-text-muted); }
.kp-ie-route-summary {
    padding: 6px 2px;
    font-size: 12px;
    color: var(--sp-text-secondary);
}
.kp-ie-route-summary b { color: var(--sp-text-primary); }

/* ============================================================================
   Rota görselleştirme (CCP "Hızlı Rota Oluştur" deseninden uyarlandı — portal teması).
   İş Emri "Harita" sekmesi + Sabit Güzergah modalı: harita-üstü istatistik şeridi,
   yatay timeline, zengin nokta listesi. FontAwesome 6 ikonları (portal layout'unda yüklü).
   Kind renkleri: başlangıç/dönüş=#10b981, yükleme=#3b82f6, boşaltma=#f59e0b, uğrama=#797bf2.
   ============================================================================ */
.sp-route-map-wrap { position: relative; }
.sp-route-map-wrap .kp-ie-map { height: 300px; min-height: 0; border-radius: var(--sp-radius-sm); }
.sp-route-map-stats { position: absolute; bottom: 10px; left: 10px; display: flex; gap: 7px; z-index: 401; pointer-events: none; }
.sp-route-map-stat {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--sp-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-size: 11px; font-weight: 600; color: var(--sp-text); white-space: nowrap;
}
.sp-route-map-stat i { color: var(--sp-primary); font-size: 10px; }
body.is-dark .sp-route-map-stat { background: rgba(28, 25, 23, 0.82); }

/* Yatay timeline */
.sp-route-timeline {
    display: flex; align-items: center; gap: 0;
    padding: 15px 12px 9px; margin-top: 5px;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
}
.sp-route-tl-node { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 1 auto; min-width: 0; position: relative; }
.sp-route-tl-drag { cursor: grab; }
.sp-route-tl-dot {
    width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; color: #fff;
    font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--sp-bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform 0.15s ease;
}
.sp-route-tl-node:hover .sp-route-tl-dot { transform: scale(1.15); }
.sp-route-tl-label { font-size: 8.5px; color: var(--sp-text-muted); max-width: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.sp-route-tl-edge { flex: 1 1 0; min-width: 10px; height: 2px; background: var(--sp-border); position: relative; }
.sp-route-tl-edge-info { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 600; color: var(--sp-text-muted); white-space: nowrap; }
.sp-route-dragging { opacity: 0.4; }

/* Timeline hover popover */
.sp-route-tl-popover {
    position: fixed; z-index: 4000; pointer-events: none;
    min-width: 150px; max-width: 230px; padding: 8px 10px;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.sp-route-tl-popover-name { font-size: 11px; font-weight: 700; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-route-tl-popover-addr { font-size: 9.5px; color: var(--sp-text-muted); margin-top: 2px; }
.sp-route-tl-popover-meta { display: flex; gap: 10px; font-size: 9.5px; color: var(--sp-text-secondary); margin-top: 5px; }
.sp-route-tl-popover-meta i { color: var(--sp-primary); margin-right: 3px; }
.sp-route-tl-popover-arr { font-size: 9.5px; font-weight: 600; color: var(--sp-primary); margin-top: 4px; }
.sp-route-tl-popover-arr i { margin-right: 3px; }

/* Zengin nokta listesi */
.sp-route-points-list { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.sp-route-points-list-h { max-height: 240px; overflow-y: auto; }
.sp-route-point-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 7px;
    background: var(--sp-bg-card); border: 1px solid var(--sp-border);
}
.sp-route-point-drag { color: var(--sp-text-muted); font-size: 11px; cursor: grab; opacity: 0.45; flex-shrink: 0; transition: opacity 0.15s ease, color 0.15s ease; }
.sp-route-point-drag-item:hover .sp-route-point-drag { opacity: 1; color: var(--sp-primary); }
.sp-route-point-seq {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; color: #fff;
    font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.sp-route-point-info { flex: 1; min-width: 0; }
.sp-route-point-name { font-size: 11.5px; font-weight: 600; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-route-point-address { font-size: 9.5px; color: var(--sp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sp-route-point-meta { display: flex; gap: 10px; font-size: 10px; color: var(--sp-text-secondary); margin-top: 3px; }
.sp-route-point-meta i { color: var(--sp-primary); font-size: 9px; margin-right: 2px; }
.sp-route-point-arr-wrap { flex-shrink: 0; }
.sp-route-point-arr { font-size: 10px; font-weight: 700; color: var(--sp-primary); white-space: nowrap; }
.sp-route-point-arr i { font-size: 8px; margin-right: 2px; }
.sp-route-empty { font-size: 11px; color: var(--sp-text-muted); padding: 10px; text-align: center; }
.kp-ie-stop-eta {
    font-size: 10.5px;
    color: var(--sp-text-muted);
    margin-top: 2px;
}
.kp-ie-stop-slot {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.kp-ie-slot-lbl {
    font-size: 10.5px;
    color: var(--sp-text-muted);
}
.kp-ie-slot-in {
    padding: 2px 5px;
    border: 1px solid var(--sp-border);
    border-radius: 5px;
    background: var(--sp-bg-input);
    color: var(--sp-text-primary);
    font-size: 11px;
}
.kp-ie-slot-dash {
    color: var(--sp-text-muted);
}

/* D1 — Tarih aralığı barı */
.kp-order-daterange {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--sp-border);
    background: var(--sp-bg-body);
}
.kp-ord-dchip {
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-input);
    color: var(--sp-text-muted);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}
.kp-ord-dchip:hover { color: var(--sp-text-primary); border-color: #797bf2; }
.kp-ord-dchip.on {
    background: #797bf2;
    border-color: #797bf2;
    color: #fff;
}
.kp-ord-dinput {
    padding: 2px 5px;
    font-size: 10px;
    border: 1px solid var(--sp-border);
    border-radius: 4px;
    background: var(--sp-bg-input);
    color: var(--sp-text);
    width: 110px;
    box-sizing: border-box;
    outline: none;
}
.kp-ord-dinput:focus { border-color: #797bf2; }
.kp-ord-dsep { color: var(--sp-text-muted); font-size: 10px; padding: 0 1px; }
.kp-ord-dgo {
    padding: 2px 10px;
    border-radius: 6px;
    border: 0;
    background: #10b981;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.kp-ord-dgo:hover { background: #059669; }

/* ============================================================================
   T1 — Sipariş Takvimi popover (3.png pattern + 📦/🏁 iki rozet)
   ============================================================================ */
.kp-cal-trigger-wrap {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 8px; border-bottom: 1px solid var(--sp-border);
    background: var(--sp-bg-body);
}
.kp-cal-trigger {
    flex: 1; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 6px;
    border: 1px solid var(--sp-border); background: var(--sp-bg-card);
    color: var(--sp-text-primary); font-size: 11px; font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kp-cal-trigger:hover { border-color: #797bf2; background: var(--sp-bg-hover); }
.kp-cal-ico { font-size: 12px; }
.kp-cal-label { flex: 1; text-align: left; }
.kp-cal-field { font-size: 12px; opacity: 0.85; }
.kp-cal-caret { font-size: 10px; color: var(--sp-text-muted); }
.kp-cal-clear {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--sp-border); background: var(--sp-bg-card);
    color: var(--sp-text-muted); font-size: 11px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.kp-cal-clear:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* Popover — %20 kompakt */
.kp-cal-pop {
    position: absolute;
    z-index: 14500;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(121,123,242,.1);
    width: 282px;
    padding: 9px;
    color: var(--sp-text-primary);
}
.kp-cal-head {
    display: flex; align-items: center; gap: 5px;
    padding-bottom: 6px; margin-bottom: 6px;
    border-bottom: 1px solid var(--sp-border);
}
.kp-cal-head-ico { font-size: 11px; }
.kp-cal-head-title {
    flex: 1; font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    color: var(--sp-text-primary);
}
.kp-cal-x {
    width: 18px; height: 18px; border-radius: 4px; border: 0;
    background: transparent; color: var(--sp-text-muted);
    font-size: 12px; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.kp-cal-x:hover { background: var(--sp-bg-hover); color: var(--sp-text-primary); }

.kp-cal-quick {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
    margin-bottom: 6px;
}
.kp-cal-qbtn {
    padding: 3px 2px; border-radius: 5px;
    border: 1px solid var(--sp-border); background: var(--sp-bg-input);
    color: var(--sp-text-primary); font-size: 9.5px; font-weight: 600;
    cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease;
    line-height: 1.4;
}
.kp-cal-qbtn:hover { border-color: #797bf2; background: var(--sp-bg-hover); }

.kp-cal-field-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    padding: 2px; border-radius: 6px;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
    margin-bottom: 8px;
}
.kp-cal-ft {
    padding: 3px 4px; border: 0; background: transparent;
    color: var(--sp-text-muted); font-size: 9.5px; font-weight: 600;
    border-radius: 4px; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.kp-cal-ft:hover { color: var(--sp-text-primary); }
.kp-cal-ft.on { background: #797bf2; color: #fff; }

.kp-cal-monthnav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 3px;
}
.kp-cal-nav {
    width: 22px; height: 22px; border-radius: 5px;
    border: 1px solid var(--sp-border); background: var(--sp-bg-input);
    color: var(--sp-text-primary); font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kp-cal-nav:hover { border-color: #797bf2; background: var(--sp-bg-hover); }
.kp-cal-monthlbl { font-size: 11.5px; font-weight: 700; color: var(--sp-text-primary); }
.kp-cal-sel {
    text-align: center; font-size: 9.5px; color: var(--sp-text-muted);
    padding: 1px 0 6px;
}
.kp-cal-sel b { color: #797bf2; }

.kp-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
    margin-bottom: 8px;
}
.kp-cal-wd {
    text-align: center; font-size: 8.5px; font-weight: 700;
    color: var(--sp-text-muted); padding: 2px 0;
    letter-spacing: 0.3px;
}
.kp-cal-day {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 29px;
    border-radius: 5px;
    background: var(--sp-bg-input);
    color: var(--sp-text-primary);
    font-size: 9.5px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: 2px 1px;
    border: 1px solid transparent;
    cursor: default;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kp-cal-day-out { color: var(--sp-text-muted); opacity: 0.45; background: transparent; }
.kp-cal-day-has {
    background: rgba(121,123,242,.10);
    border-color: rgba(121,123,242,.3);
    cursor: pointer;
}
.kp-cal-day-has:hover {
    background: rgba(121,123,242,.20);
    border-color: #797bf2;
}
.kp-cal-day-today {
    border-color: #f59e0b;
    font-weight: 700;
}
.kp-cal-day-sel {
    background: #797bf2 !important;
    color: #fff !important;
    border-color: #797bf2 !important;
}
.kp-cal-day-sel .kp-cal-pkup,
.kp-cal-day-sel .kp-cal-dlv { background: rgba(255,255,255,.25); color: #fff; }

.kp-cal-daynum { font-weight: 600; line-height: 1; margin-bottom: 0; font-size: 9.5px; }
.kp-cal-pkup,
.kp-cal-dlv {
    font-size: 7.5px;
    font-weight: 700;
    padding: 0 2px;
    border-radius: 4px;
    line-height: 1.3;
    margin-top: 0;
}
.kp-cal-pkup { background: rgba(16,185,129,.2); color: #10b981; }
.kp-cal-dlv  { background: rgba(168,85,247,.2); color: #a855f7; }

.kp-cal-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 6px; border-top: 1px solid var(--sp-border);
    font-size: 8.5px;
}
.kp-cal-legend { display: flex; gap: 6px; }
.kp-cal-lg { display: inline-flex; align-items: center; gap: 2px; color: var(--sp-text-muted); }
.kp-cal-lg-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--sp-bg-input); border: 1px solid var(--sp-border);
}
.kp-cal-lg-dot.has { background: rgba(121,123,242,.4); border-color: #797bf2; }
.kp-cal-lg-dot.sel { background: #797bf2; border-color: #797bf2; }
.kp-cal-total { font-weight: 700; color: var(--sp-text-primary); }


/* ============================================================================
   L1 — Toolbar harita veri katmanı toggle (Araç / Sipariş / Rota)
   ============================================================================ */
.kp-layer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    margin-right: 4px;
}
.kp-lyr-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 0;
    background: transparent;
    color: var(--sp-text-muted);
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}
.kp-lyr-btn svg { width: 13px; height: 13px; }
.kp-lyr-btn:hover { color: var(--sp-text-primary); background: var(--sp-bg-hover); }
.kp-lyr-btn.on {
    background: #797bf2;
    color: #fff;
}
.kp-lyr-btn.on:hover { background: #6366f1; color: #fff; }

/* ============================================================================
   O2.1 — Sipariş Pin'leri (pickup) + Cluster
   ============================================================================ */
.kp-order-pin-wrap { background: transparent !important; border: 0 !important; }
.kp-order-pin {
    width: 28px;
    height: 28px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kp-order-pin span {
    transform: rotate(45deg);
    font-size: 14px;
    line-height: 1;
}
.kp-order-pin-wrap:hover .kp-order-pin {
    transform: rotate(-45deg) scale(1.15);
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.kp-order-pin-wrap.kp-pin-selected .kp-order-pin {
    border-color: #797bf2;
    box-shadow: 0 0 0 3px rgba(121,123,242,.35), 0 4px 12px rgba(0,0,0,.5);
}

/* Cluster bubble — custom divIcon */
.kp-order-cluster {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(245,158,11,.92);
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}
.kp-order-cluster b { font-size: 13px; }
.kp-order-cluster span { font-size: 11px; margin-top: 1px; }
.kp-order-cluster.kp-oc-m { background: rgba(99,102,241,.92); width: 48px; height: 48px; }
.kp-order-cluster.kp-oc-m b { font-size: 14px; }
.kp-order-cluster.kp-oc-l { background: rgba(239,68,68,.92); width: 56px; height: 56px; }
.kp-order-cluster.kp-oc-l b { font-size: 16px; }

/* Yükleme noktası marker'ı — tam daire + içinde kutu ikonu + kenarda bekleyen sipariş rozeti */
.kp-pickup-wrap { background: transparent !important; border: 0 !important; }
.kp-pickup {
    position: relative;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #2563eb;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.kp-pickup-ic { font-size: 9px; line-height: 1; }
.kp-pickup-badge {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 13px; height: 13px;
    padding: 0 2px;
    border-radius: 7px;
    background: #ef4444;
    color: #fff;
    border: 1.5px solid #fff;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 10px;
    text-align: center;
    box-shadow: none;
}
.kp-pickup-wrap:hover .kp-pickup { filter: brightness(1.08); }

/* Teslimat noktası marker'ı — tam daire (yeşil) + içinde bayrak ikonu + kenarda teslim edilecek sipariş rozeti */
.kp-dropoff-wrap { background: transparent !important; border: 0 !important; }
.kp-dropoff {
    position: relative;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #10b981;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.kp-dropoff-ic { font-size: 9px; line-height: 1; }
.kp-dropoff-badge {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 13px; height: 13px;
    padding: 0 2px;
    border-radius: 7px;
    background: #ef4444;
    color: #fff;
    border: 1.5px solid #fff;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 10px;
    text-align: center;
    box-shadow: none;
}
.kp-dropoff-wrap:hover .kp-dropoff { filter: brightness(1.08); }

/* from→to popup (yükleme noktası popup'ı) */
.kp-ftpt-pop { font-size: 12px; min-width: 180px; }
.kp-ftpt-pop-h { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.kp-ftpt-pop-sub { color: var(--sp-text-muted); margin-bottom: 6px; }
.kp-ftpt-pop-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.kp-ftpt-pop-row b { color: #797bf2; }
.kp-ftpt-pop-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kp-ftpt-ord {
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-input);
    color: var(--sp-text);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kp-ftpt-ord:hover { border-color: #797bf2; background: rgba(121,123,242,.12); }
.kp-ftpt-more { font-size: 11px; color: var(--sp-text-muted); align-self: center; }

/* Hinterland satırı — bölge adı + altında istatistikler (alt alta, etiket + sayı) */
.kp-hint-row { align-items: flex-start; }
.kp-hint-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.kp-hint-stats { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.kp-hint-st {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    line-height: 16px;
    color: var(--sp-text-muted);
}
.kp-hint-st > b { font-weight: 700; color: var(--sp-text); }
.kp-hint-st-p > b { color: #10b981; }
.kp-hint-st-d > b { color: #3b82f6; }
.kp-hint-st-v > b { color: #f59e0b; }
/* Bölge adı + rol rozetleri (Toplama / Teslimat) aynı satırda */
.kp-hint-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 600; }
.kp-hint-roles { display: inline-flex; gap: 4px; }
.kp-hint-role {
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    padding: 0 6px;
    border-radius: 7px;
    letter-spacing: .02em;
}
.kp-hint-role-p { color: #10b981; background: rgba(16,185,129,.14); }
.kp-hint-role-d { color: #3b82f6; background: rgba(59,130,246,.14); }

/* MarkerCluster default override — bizim divIcon kullanıyoruz, plugin'in bubble'ını gizle */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background: transparent; }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div { background: transparent; }

/* ============================================================================
   O2.2 — Sipariş Paneli (#kpOrderSide) — ltSide2 ile aynı sınıf + ek stiller
   SOL slide-in override (lt-side2 sağdan açılır, bu soldan)
   ============================================================================ */
.kp-order-side {
    right: auto;
    left: 0;
    border-left: 0;
    border-right: 1px solid var(--sp-border);
    box-shadow: 10px 0 30px rgba(0,0,0,.08);
    transform: translateX(-100%);
}
.kp-order-side.show { transform: translateX(0); }
/* Handle sağ tarafa bakar (h-right) — paneli kapatmak için */
.kp-order-side .lt-panel-handle {
    left: auto;
    right: -22px;
    border-left: 0;
    border-right: 1px solid var(--sp-border);
    border-radius: 0 9px 9px 0;
}
.kp-order-side .lt-panel-handle svg {
    transform: scaleX(-1);   /* ◀ ikonunu ► olarak çevir */
}

.kp-os-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 8px 10px; display: flex; flex-direction: column; gap: 8px;
    background: var(--sp-bg-body);
}
.kp-os-sec {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    padding: 6px 9px 8px;
}
.kp-os-sech {
    font-size: 10.5px; font-weight: 700; color: var(--sp-text-primary);
    letter-spacing: 0.2px;
    padding-bottom: 5px; border-bottom: 1px dashed var(--sp-border);
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.kp-os-geo { font-size: 11px; line-height: 1; }
.kp-os-geo.on { color: #10b981; }
.kp-os-geo.off { color: #ef4444; }
.kp-os-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    padding: 2px 0;
    font-size: 10.5px;
}
.kp-os-row > span { color: var(--sp-text-muted); flex: none; }
.kp-os-row > b {
    color: var(--sp-text-primary); font-weight: 600; text-align: right;
    overflow: hidden; text-overflow: ellipsis;
}
.kp-os-row > b.mono { font-family: 'SF Mono', Consolas, monospace; }
.kp-os-note {
    background: var(--sp-bg-input); border-radius: 4px;
    padding: 5px 7px; font-size: 10.5px; color: var(--sp-text-primary);
    line-height: 1.4;
}
.kp-os-note.muted { color: var(--sp-text-secondary); margin-top: 4px; }
.kp-os-pkghint {
    margin-top: 6px;
    padding: 5px 8px;
    background: rgba(121,123,242,.08);
    border: 1px dashed rgba(121,123,242,.4);
    border-radius: 4px;
    font-size: 10px;
    color: var(--sp-text-secondary);
}
.kp-os-pkghint b { color: #797bf2; }

/* K7.2c — POI Detay Paneli (kpPoiSide) — kpOrderSide ile aynı taban */
.kp-poi-side .lt-side2-head { background: linear-gradient(180deg, rgba(121,123,242,.10), transparent); }
.kp-poi-headico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; vertical-align: middle; margin-right: 6px;
}
.kp-poi-headico .lt-poi-mk { position: static; }
.kp-poi-name {
    display: inline-block;
    font-size: 16px; font-weight: 700; color: var(--sp-text);
    vertical-align: middle;
    padding-right: 30px;
    line-height: 1.2;
}
#kpPoiActions { gap: 6px; }
#kpPoiActions a, #kpPoiActions button { flex: 1; justify-content: center; text-decoration: none; font-size: 11px; padding: 7px 10px; }

/* A4 — Haritada sağ tık ctx menü */
.lt-ctx-menu {
    position: fixed;
    z-index: 15000;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    padding: 4px;
    min-width: 240px;
    display: none;
}
.lt-ctx-menu.show { display: block; }
.lt-ctx-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.lt-ctx-item:hover { background: var(--sp-bg-hover); color: #797bf2; }
.lt-ctx-item svg { width: 16px; height: 16px; flex-shrink: 0; color: #797bf2; }
.kp-os-foot {
    flex: none; display: flex; gap: 6px; padding: 8px 10px;
    border-top: 1px solid var(--sp-border); background: var(--sp-bg-secondary);
}
.kp-os-foot .sp-btn,
.kp-os-foot .sp-btn-ghost { flex: 1; justify-content: center; font-size: 11px; padding: 6px 10px; }
.kp-os-foot .sp-btn:disabled,
.kp-os-foot .sp-btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================================
   O2.3 — Animasyonlu rota (Pickup ↔ Delivery)
   ============================================================================ */
.kp-order-route-anim {
    animation: kpRouteFlow 1.2s linear infinite;
    filter: drop-shadow(0 1px 3px rgba(121,123,242,.4));
}
@keyframes kpRouteFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -22; }
}
.kp-pin-delivery .kp-order-pin {
    animation: kpDeliveryPulse 1.6s ease-in-out infinite;
}
@keyframes kpDeliveryPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(168,85,247,.5), 0 0 0 0 rgba(168,85,247,.5); }
    50%      { box-shadow: 0 2px 8px rgba(168,85,247,.5), 0 0 0 10px rgba(168,85,247,0); }
}
/* Rota nokta marker'ı (CCP / SalesForecasting tarzı) — numaralı/ikonlu dolu daire + beyaz border */
.kp-route-mk-wrap { position: relative; width: 22px; height: 22px; }
.kp-route-mk-pin {
    width: 22px; height: 22px; border-radius: 50%;
    color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.kp-route-mk-pin i { font-size: 9px; }
/* Yükleme/Teslimat rozeti — pin'in sağ-üst köşesinde */
.kp-route-mk-badge {
    position: absolute; top: -5px; right: -5px; z-index: 2;
    width: 14px; height: 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 8.5px; color: #fff; border: 1.5px solid #fff;
    box-shadow: none;
}
.kp-route-mk-badge.pickup { background: #3b82f6; }    /* yükleme — mavi yukarı ok */
.kp-route-mk-badge.delivery { background: #f59e0b; }  /* teslimat — amber aşağı ok */
.kp-route-mk-badge.both { background: #8b5cf6; }      /* hem yükleme hem teslimat */
/* Aktif durak vurgusu — üzerinde işlem yapılan nokta haritada "hissedilsin" (pulse ring) */
.kp-route-mk-pin.kp-route-mk-active {
    z-index: 1000;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #797bf2, 0 2px 8px rgba(0, 0, 0, .5);
    animation: kpStopPulse 1.4s ease-out infinite;
}
@keyframes kpStopPulse {
    0%   { box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(121, 123, 242, .9), 0 0 0 4px rgba(121, 123, 242, .55); }
    70%  { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(121, 123, 242, .9), 0 0 0 16px rgba(121, 123, 242, 0); }
    100% { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(121, 123, 242, .9), 0 0 0 16px rgba(121, 123, 242, 0); }
}
/* Odak şeridi — "haritada yalnız X" durumunu açıkça söyler (üstteki "n/m haritada"
   sayacı odakta yanıltıcı olurdu) ve odaktan çıkış yolunu verir. */
.kp-route-focusbar {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 6px;
    padding: 5px 8px;
    border: 1px solid rgba(121, 123, 242, .35);
    background: rgba(121, 123, 242, .08);
    border-radius: 7px;
    font-size: 11px;
    color: var(--sp-text-secondary);
}
.kp-route-focusbar i { color: #797bf2; font-size: 11px; }
.kp-route-focusbar b { color: var(--sp-text); }
.kp-route-focusbar span { flex: 1; min-width: 0; }
.kp-route-focusclear {
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
    color: var(--sp-text-secondary);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10.5px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kp-route-focusclear:hover {
    background: var(--sp-bg-hover);
    border-color: #797bf2;
    color: var(--sp-text);
}

/* Adım 1B — seçili seferin başlangıç/bitiş pini. FTL'de sefer zaten A→B; iki uç
   haritada bir bakışta okunmalı. 22px ara duraklardan ayrışsın diye 30px. */
.kp-route-mk-pin.kp-route-mk-ab {
    width: 30px; height: 30px;
    font-size: 14px; font-weight: 800;
    border-width: 2.5px;
    box-shadow: 0 2px 9px rgba(0, 0, 0, .45);
}
.kp-route-mk-pin.kp-route-mk-ab i { font-size: 13px; }
/* Kalıcı "Başlangıç · X" / "Bitiş · Y" etiketi — Pozisyon kartıyla aynı dil */
.leaflet-tooltip.kp-route-ab-tip {
    background: var(--sp-bg-card);
    color: var(--sp-text);
    border: 1px solid var(--sp-border);
    border-radius: 7px;
    padding: 2px 8px;
    font-size: 10.5px; font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
    white-space: nowrap;
}
.leaflet-tooltip.kp-route-ab-tip::before { display: none; }

.kp-route-label-wrap { background: transparent !important; border: 0 !important; }
.kp-route-label {
    display: inline-block;            /* 0-genişlikli wrap'ta içeriğe göre boyutlan → translate(-50%) doğru ortalar */
    background: #797bf2; color: #fff;
    padding: 3px 9px; border-radius: 8px;
    font-size: 10px; font-weight: 700; line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    white-space: nowrap; text-align: center;
    transform: translate(-50%, -50%);
}

/* ============================================================================
   O4 — Toolbar Yeni Sipariş / Yeni İş Emri kısayolları
   ============================================================================ */
.kp-create-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px;
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.4);
    border-radius: 8px;
    margin-right: 4px;
}
.kp-create-btn {
    position: relative;
    color: #10b981 !important;
}
.kp-create-btn:hover {
    background: #10b981 !important;
    color: #fff !important;
}
.kp-create-plus {
    position: absolute;
    top: 1px; right: 1px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    width: 13px; height: 13px;
    font-size: 10px;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: background-color 0.15s ease;
}
.kp-create-btn:hover .kp-create-plus {
    background: #fff;
    color: #10b981;
}

/* ============================================================================
   GEOMARKET STUDIO — Lokasyonlar tam-ekran harita merkezli layout
   Top bar + sol liste + tam-ekran harita + sağ slide-in detay panel
   ============================================================================ */

/* Lokasyon tab'ı seçilince parent pane default padding'i sıfırla (tam ekran için) */
.sp-fmpane[data-oppane="lokasyonlar"] {
    padding: 0 !important;
    margin: 0;
    height: calc(100vh - 180px);
    min-height: 560px;
    overflow: hidden;
}

.loc-studio {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    background: #fff;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--sp-border);
}

/* TOP BAR — geri + başlık + arama + filtre chip'leri + aksiyonlar */
.loc-topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #fafbff, #f5f7ff);
    border-bottom: 1px solid var(--sp-border);
    flex-shrink: 0;
    min-height: 54px;
}
.loc-back-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    background: #fff; border: 1px solid var(--sp-border); border-radius: 6px;
    color: #475569; text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.loc-back-btn:hover { background: #f3f4f6; color: #4338ca; border-color: #c7d2fe; }
.loc-back-btn svg { width: 16px; height: 16px; }
.loc-page-title {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; color: #0f172a;
    padding-right: 12px; border-right: 1px solid var(--sp-border);
    margin-right: 4px;
    flex-shrink: 0;
}
.loc-page-title svg { width: 16px; height: 16px; color: #797bf2; }

/* Brand — 2-satır title + sub (HinterlandPro paterni) */
.loc-brand {
    display: inline-flex; align-items: center; gap: 8px;
    padding-right: 12px; border-right: 1px solid var(--sp-border);
    margin-right: 4px; flex-shrink: 0;
}
.loc-brand-icon {
    width: 32px; height: 32px; border-radius: 6px;
    background: linear-gradient(135deg, #797bf2, #4f46e5);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.loc-brand-icon svg { width: 16px; height: 16px; }
.loc-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.loc-brand-title { font-size: 13px; font-weight: 800; color: #0f172a; }
.loc-brand-sub { font-size: 9.5px; color: #64748b; font-weight: 500; margin-top: 1px; letter-spacing: .3px; }

/* KPI Chip Strip — canlı sayım (HinterlandPro paterni) */
.loc-kpi-group {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.loc-kpi-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    background: #fff; border: 1px solid var(--sp-border); border-radius: 14px;
    font-size: 10.5px; color: #64748b; font-weight: 500;
    transition: border-color .15s ease, color .15s ease;
}
.loc-kpi-chip:hover { border-color: #c7d2fe; color: #4338ca; }
.loc-kpi-chip svg { width: 12px; height: 12px; color: #797bf2; }
.loc-kpi-chip strong { color: #0f172a; font-weight: 800; font-size: 11.5px; }
.loc-kpi-chip.loc-kpi-live {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-color: #86efac; color: #14532d;
}
.loc-kpi-chip.loc-kpi-live strong { color: #14532d; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Tile Switcher segmented — sağ üst (HinterlandPro paterni) */
.loc-tile-switcher {
    position: absolute; top: 16px; right: 70px;
    display: inline-flex;
    background: #fff; border: 1px solid var(--sp-border); border-radius: 8px;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
    z-index: 402;
}
.loc-tile-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px; border: 0; background: transparent;
    border-radius: 5px; cursor: pointer;
    font-size: 10.5px; font-weight: 600; color: #64748b;
    transition: background-color .15s ease, color .15s ease;
}
.loc-tile-btn:hover { color: #0f172a; }
.loc-tile-btn.is-active {
    background: #797bf2; color: #fff;
    box-shadow: 0 1px 3px rgba(121, 123, 242, .25);
}
.loc-tile-btn svg { width: 13px; height: 13px; }

/* Mini Dashboard — harita alt orta floating (HinterlandPro paterni) */
.loc-mini-dash {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
    border: 1px solid var(--sp-border); border-radius: 20px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
    z-index: 401;
    max-width: calc(100% - 80px);
    overflow-x: auto;
    white-space: nowrap;
}
.loc-mini-dash-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: #475569;
}
.loc-mini-dash-item svg { width: 13px; height: 13px; color: #797bf2; }
.loc-mini-dash-item strong { color: #0f172a; font-weight: 800; font-size: 12.5px; }
.loc-mini-dash-sep {
    width: 1px; height: 18px; background: var(--sp-border);
}
.loc-mini-dash-reset {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    background: #797bf2; color: #fff;
    border: 0; border-radius: 12px;
    font-size: 10.5px; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease;
}
.loc-mini-dash-reset:hover { background: #4338ca; }
.loc-mini-dash-reset svg { width: 12px; height: 12px; }

/* Edge Tab — sol panel toggle, panel açık/kapalı sürekli görünür */
.loc-edge-tab {
    position: absolute; top: 50%; transform: translateY(-50%);
    left: 0;
    width: 22px; height: 50px;
    background: #fff; border: 1px solid var(--sp-border); border-left: 0;
    border-radius: 0 6px 6px 0;
    color: #475569; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 2px 0 8px rgba(15, 23, 42, .08);
    z-index: 402;
    transition: background-color .15s ease, color .15s ease;
}
.loc-edge-tab:hover { background: #797bf2; color: #fff; }
.loc-edge-tab svg { width: 14px; height: 14px; }

/* Sol panel kapalıyken */
.loc-main.loc-side-collapsed .loc-side { display: none; }
.loc-main.loc-side-collapsed #opLocEdgeLeftIcon { transform: rotate(180deg); }

/* Responsive — küçük ekranda kpi/dash kısalt */
@media (max-width: 1100px) {
    .loc-kpi-group { display: none; }
    .loc-brand-sub { display: none; }
}
@media (max-width: 800px) {
    .loc-tile-switcher .loc-tile-btn span { display: none; }
    .loc-mini-dash { padding: 6px 10px; font-size: 10px; }
    .loc-mini-dash-reset span { display: none; }
}
.loc-search {
    position: relative; flex: 0 0 320px; max-width: 320px;
    display: flex; align-items: center;
}
.loc-search svg { position: absolute; left: 10px; width: 14px; height: 14px; color: #94a3b8; pointer-events: none; }
.loc-search input {
    width: 100%; padding: 7px 12px 7px 32px;
    border: 1px solid var(--sp-border); border-radius: 20px;
    background: #fff; font-size: 12px; color: #0f172a;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.loc-search input:focus { outline: none; border-color: #797bf2; box-shadow: 0 0 0 3px rgba(121, 123, 242, .12); }

.loc-filters { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
.loc-filter-select {
    padding: 6px 10px; border: 1px solid var(--sp-border); border-radius: 16px;
    background: #fff; font-size: 11.5px; color: #0f172a; cursor: pointer;
}
.loc-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 11px; border-radius: 16px;
    background: #fff; border: 1px solid var(--sp-border);
    font-size: 11px; font-weight: 600; color: #475569;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.loc-chip:hover { border-color: #c7d2fe; color: #4338ca; }
.loc-chip.is-active { background: #eef2ff; border-color: #797bf2; color: #4338ca; }

.loc-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* MAIN — sol liste + harita + sağ detail (absolute slide-in) */
.loc-main {
    flex: 1; display: flex; min-height: 0;
    position: relative;
}

/* SOL — Drill-down panel (Level 0/1/2) — Apple/Google Maps tarzı */
.loc-side, .loc-side-drill {
    flex: 0 0 320px; max-width: 320px;
    background: #fff;
    border-right: 1px solid var(--sp-border);
    display: flex; flex-direction: column;
    min-height: 0;
    position: relative;
    overflow: hidden;
}
/* Üst sayım barı — her level'da görünür */
.loc-side-stats-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #fafbff, #f5f7ff);
    border-bottom: 1px solid var(--sp-border);
}
.loc-side-stats-bar .loc-side-stat-row { display: inline-flex; align-items: baseline; gap: 4px; }
.loc-side-stats-bar .loc-side-stat-sep { color: #cbd5e1; padding: 0 4px; }

/* Level container — fade animasyon */
.loc-level {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    animation: loc-level-in .2s ease;
}
.loc-level[hidden] { display: none; }
@keyframes loc-level-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* Level head — başlık + (varsa) geri butonu */
.loc-level-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sp-border);
    flex-shrink: 0;
}
.loc-back {
    width: 30px; height: 30px; padding: 0;
    background: #f3f4f6; border: 1px solid var(--sp-border); border-radius: 6px;
    color: #475569; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.loc-back:hover { background: #797bf2; color: #fff; border-color: #797bf2; }
.loc-back svg { width: 14px; height: 14px; }
.loc-level-title-wrap { flex: 1; min-width: 0; }
.loc-level-title { font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.loc-level-sub { font-size: 10px; color: #64748b; margin-top: 2px; }

/* Adres Tipi liste — kompakt satır satır + istatistik */
.loc-types-list {
    flex: 1; overflow-y: auto;
    padding: 4px;
    display: flex; flex-direction: column; gap: 2px;
}
.loc-type-card {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px;
    background: #fff; border: 1px solid var(--sp-border); border-radius: 5px;
    cursor: pointer; text-align: left;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    border-left-width: 3px;
}
.loc-type-card:hover { border-color: #c7d2fe; background: #fafbff; }
.loc-type-card.is-active {
    border-color: #797bf2; background: #eef2ff;
    box-shadow: 0 1px 3px rgba(121, 123, 242, .12);
}
.loc-type-card.t-depo     { border-left-color: #6366f1; }
.loc-type-card.t-sube     { border-left-color: #0ea5e9; }
.loc-type-card.t-musteri  { border-left-color: #10b981; }
.loc-type-card.t-tedarikci{ border-left-color: #f59e0b; }
.loc-type-card.t-transfer { border-left-color: #ec4899; }
.loc-type-card.t-other    { border-left-color: #64748b; }
.loc-type-card-icon {
    font-size: 16px; line-height: 1; flex-shrink: 0;
    width: 22px; text-align: center;
}
.loc-type-card-body { flex: 1; min-width: 0; }
.loc-type-card-name {
    font-size: 11.5px; font-weight: 700; color: #0f172a; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loc-type-card-stats {
    font-size: 9.5px; color: #64748b; margin-top: 2px; line-height: 1.2;
    display: flex; align-items: center; gap: 6px;
}
.loc-type-card-stats span { display: inline-flex; align-items: center; gap: 2px; }
.loc-type-card-stats-sep { color: #cbd5e1; }
.loc-type-card-count {
    display: inline-flex; align-items: baseline; gap: 2px;
    flex-shrink: 0;
}
.loc-type-card-count-num {
    font-size: 14px; font-weight: 800; color: #4338ca; line-height: 1;
    padding: 2px 6px; background: rgba(121, 123, 242, .1); border-radius: 10px;
    min-width: 24px; text-align: center;
}
.loc-type-card.is-active .loc-type-card-count-num { background: #797bf2; color: #fff; }
.loc-side-head {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sp-border);
    flex-shrink: 0;
    background: linear-gradient(135deg, #fafbff, #f5f7ff);
}
.loc-side-stats { display: flex; align-items: baseline; gap: 12px; }
.loc-side-stat-row { display: flex; align-items: baseline; gap: 5px; }
.loc-side-stat-num { font-size: 22px; font-weight: 800; color: #4338ca; line-height: 1; }
.loc-side-stat-num-sm { font-size: 13px; font-weight: 700; color: #64748b; line-height: 1; }
.loc-side-stat-lbl { font-size: 10px; color: #64748b; font-weight: 500; letter-spacing: .3px; }
.loc-side-stat-total { opacity: .85; }
.loc-side-vp-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; color: #475569; cursor: pointer; user-select: none;
    padding: 2px 0;
}
.loc-side-vp-toggle input { accent-color: #797bf2; cursor: pointer; }
.loc-side-head strong { font-size: 11.5px; font-weight: 700; color: #0f172a; }

/* Facet panel — collapsible kategori grupları */
.loc-facets {
    border-bottom: 1px solid var(--sp-border);
    background: #fafbfc;
    flex-shrink: 0;
    max-height: 50%; overflow-y: auto;
}
.loc-facet-group { border-bottom: 1px solid #f1f5f9; }
.loc-facet-group:last-child { border-bottom: 0; }
.loc-facet-head {
    width: 100%; display: flex; align-items: center; gap: 7px;
    padding: 8px 12px; border: 0; background: transparent;
    cursor: pointer; text-align: left;
    font-size: 11.5px; font-weight: 700; color: #0f172a;
    transition: background-color .15s ease;
}
.loc-facet-head:hover { background: #f3f4f6; }
.loc-facet-chev {
    width: 12px; height: 12px; color: #94a3b8;
    transition: transform .2s ease;
}
.loc-facet-group.is-collapsed .loc-facet-chev { transform: rotate(-90deg); }
.loc-facet-active {
    margin-left: auto;
    background: #797bf2; color: #fff;
    font-size: 9.5px; font-weight: 700;
    padding: 1px 6px; border-radius: 8px;
}
.loc-facet-body { padding: 2px 4px 6px; }
.loc-facet-group.is-collapsed .loc-facet-body { display: none; }
.loc-facet-item {
    display: flex; align-items: center; gap: 7px;
    padding: 4px 8px; border-radius: 4px;
    cursor: pointer; font-size: 11px; color: #0f172a;
    transition: background-color .15s ease;
}
.loc-facet-item:hover { background: #eef2ff; }
.loc-facet-item.is-on { background: #eef2ff; color: #4338ca; font-weight: 600; }
.loc-facet-item input { accent-color: #797bf2; cursor: pointer; width: 11px; height: 11px; flex-shrink: 0; }
.loc-facet-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-facet-item-cnt {
    font-size: 9.5px; color: #64748b; font-weight: 600;
    padding: 1px 6px; background: rgba(15, 23, 42, .06); border-radius: 8px;
    flex-shrink: 0;
}
.loc-facet-item.is-on .loc-facet-item-cnt { background: #797bf2; color: #fff; }
.loc-facet-empty { padding: 6px 10px; font-size: 10px; color: #94a3b8; font-style: italic; }
.loc-facet-reset {
    width: calc(100% - 16px); margin: 8px;
    padding: 6px; background: #fff;
    border: 1px solid #fecaca; border-radius: 4px;
    color: #b91c1c; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 10.5px; font-weight: 600;
    transition: background-color .15s ease;
}
.loc-facet-reset:hover { background: #fef2f2; }
.loc-facet-reset svg { width: 12px; height: 12px; }

/* Sonuçlar bölümü */
.loc-side-results {
    flex: 1; display: flex; flex-direction: column;
    min-height: 0;
}
.loc-side-results-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    flex-shrink: 0;
}
.loc-side-results-head strong { font-size: 10.5px; font-weight: 700; color: #64748b; letter-spacing: .3px; }
.loc-side-results-head span { font-size: 10.5px; color: #4338ca; font-weight: 700; }

/* POI marker — Overpass katmanları (Benzin/AVM/TIR/Otel) */
.loc-poi-mk {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    border: 2px solid rgba(255, 255, 255, .9);
}

/* MarkerCluster — özel renkler (Leaflet.MarkerCluster.Default ezilir) */
.marker-cluster-small { background-color: rgba(121, 123, 242, .35); }
.marker-cluster-small div { background-color: rgba(121, 123, 242, .75); color: #fff; }
.marker-cluster-medium { background-color: rgba(99, 102, 241, .4); }
.marker-cluster-medium div { background-color: rgba(99, 102, 241, .85); color: #fff; }
.marker-cluster-large { background-color: rgba(79, 70, 229, .45); }
.marker-cluster-large div { background-color: rgba(79, 70, 229, .9); color: #fff; }
.marker-cluster div { font-weight: 700; }
.loc-icon-btn {
    width: 24px; height: 24px; padding: 0;
    border: 1px solid var(--sp-border); border-radius: 4px;
    background: #fff; color: #64748b; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
.loc-icon-btn:hover { background: #f3f4f6; color: #0f172a; }
.loc-icon-btn svg { width: 12px; height: 12px; }

.loc-side-cards { flex: 1; overflow-y: auto; padding: 6px; }
.loc-side-empty { padding: 20px; text-align: center; color: #94a3b8; font-style: italic; font-size: 11px; }

.loc-side-card {
    background: #fff;
    border: 1px solid var(--sp-border); border-radius: 6px;
    padding: 8px 10px; margin-bottom: 4px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    border-left: 3px solid transparent;
}
.loc-side-card:hover { border-color: #c7d2fe; background: #fafbff; }
.loc-side-card.is-active {
    border-color: #797bf2; background: #eef2ff;
    border-left-color: #797bf2;
    box-shadow: 0 2px 6px rgba(121, 123, 242, .15);
}
.loc-side-card.t-depo     { border-left-color: #6366f1; }
.loc-side-card.t-sube     { border-left-color: #0ea5e9; }
.loc-side-card.t-musteri  { border-left-color: #10b981; }
.loc-side-card.t-tedarikci{ border-left-color: #f59e0b; }
.loc-side-card.t-transfer { border-left-color: #ec4899; }
.loc-side-card-name { font-size: 12px; font-weight: 700; color: #0f172a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-side-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 10px; color: #64748b; }
.loc-side-card-meta .loc-side-card-type { padding: 1px 6px; border-radius: 8px; background: rgba(99, 102, 241, .1); color: #4338ca; font-weight: 600; }
.loc-side-card-meta .loc-side-card-place { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-side-card-meta .loc-side-card-status.open { color: #047857; }
.loc-side-card-meta .loc-side-card-status.closed { color: #b91c1c; }
.loc-side-card-caps { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.loc-side-card-cap { font-size: 9px; padding: 1px 5px; background: rgba(15, 23, 42, .04); color: #475569; border-radius: 4px; }

/* HARİTA AREA — tam-ekran (sol liste haricinde tüm alan) */
.loc-map-area { flex: 1; position: relative; min-width: 0; background: #f1f5f9; }
.loc-map-full { position: absolute; inset: 0; }
.loc-map-full .leaflet-container { width: 100%; height: 100%; background: #f1f5f9; }

/* Harita üstü sayaç (sağ alt) */
.loc-map-counter {
    position: absolute; bottom: 16px; right: 16px;
    background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px);
    padding: 5px 12px; border-radius: 14px;
    border: 1px solid var(--sp-border);
    font-size: 11px; font-weight: 700; color: #0f172a;
    z-index: 401; box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

/* Sol alt — harita kontrolleri (Google Maps tarzı) */
.loc-mapctrl {
    position: absolute; bottom: 16px; left: 16px;
    display: flex; flex-direction: column; gap: 4px;
    z-index: 401;
}
.loc-mapctrl-btn {
    width: 36px; height: 36px; padding: 0;
    background: #fff; border: 1px solid var(--sp-border); border-radius: 6px;
    color: #475569; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
    transition: background-color .15s ease, color .15s ease;
}
.loc-mapctrl-btn:hover { background: #f3f4f6; color: #0f172a; }
.loc-mapctrl-btn svg { width: 16px; height: 16px; }

/* Sağ üst — katman seçici (POI layer switcher) */
.loc-layers { position: absolute; top: 16px; right: 16px; z-index: 402; }
.loc-layers-toggle {
    width: 40px; height: 40px; padding: 0;
    background: #fff; border: 1px solid var(--sp-border); border-radius: 8px;
    color: #475569; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
    transition: background-color .15s ease, color .15s ease;
}
.loc-layers-toggle:hover { background: #f3f4f6; color: #797bf2; }
.loc-layers-toggle svg { width: 18px; height: 18px; }
.loc-layers-panel {
    position: absolute; top: 46px; right: 0;
    min-width: 240px;
    background: #fff; border: 1px solid var(--sp-border); border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
    display: flex; flex-direction: column; gap: 2px;
}
.loc-layers-panel[hidden] { display: none; }
.loc-layers-title { font-size: 10px; font-weight: 700; color: #64748b; letter-spacing: .4px; padding: 6px 8px 4px; }
.loc-layers-sep { font-size: 9.5px; font-weight: 700; color: #94a3b8; letter-spacing: .4px; padding: 8px 8px 3px; border-top: 1px solid #f1f5f9; margin-top: 4px; }
.loc-layer-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 4px;
    cursor: pointer; font-size: 11.5px; color: #0f172a;
    transition: background-color .15s ease;
}
.loc-layer-item:hover { background: #f3f4f6; }
.loc-layer-item input[type=checkbox] { accent-color: #797bf2; cursor: pointer; }

/* Sağ tık konteks menü */
.loc-ctx-menu {
    position: absolute; z-index: 9999;
    min-width: 220px;
    background: #fff; border: 1px solid var(--sp-border); border-radius: 8px;
    padding: 4px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
}
.loc-ctx-menu[hidden] { display: none; }
.loc-ctx-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 10px; border: 0;
    background: transparent; border-radius: 5px;
    cursor: pointer; text-align: left;
    font-size: 11.5px; font-weight: 600; color: #0f172a;
    transition: background-color .15s ease;
}
.loc-ctx-item:hover { background: #f3f4f6; }
.loc-ctx-item svg { width: 14px; height: 14px; color: #797bf2; flex-shrink: 0; }

/* SAĞ SLIDE-IN DETAY PANELİ — Flightradar tarzı zengin kart */
.loc-detail {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 92vw;
    background: #fff;
    border-left: 1px solid var(--sp-border);
    box-shadow: -8px 0 32px rgba(15, 23, 42, .14);
    z-index: 403;
    display: flex; flex-direction: column;
    animation: loc-slide-in .25s ease;
    transition: width .25s ease;
}
.loc-detail[hidden] { display: none; }
.loc-detail.is-expanded { width: 720px; }
@keyframes loc-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Üst kontrol bar — expand + close */
.loc-detail-topbar {
    position: absolute; top: 10px; right: 10px;
    display: flex; gap: 6px; z-index: 2;
}
.loc-detail-icon-btn {
    width: 30px; height: 30px; padding: 0;
    background: rgba(255, 255, 255, .9); backdrop-filter: blur(4px);
    border: 1px solid rgba(15, 23, 42, .08); border-radius: 6px;
    color: #475569; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .15s ease, color .15s ease;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.loc-detail-icon-btn:hover { background: #fff; color: #0f172a; }
.loc-detail-icon-btn svg { width: 14px; height: 14px; }
.loc-detail-close:hover { background: var(--sp-danger); color: #fff; }
.loc-detail-content { flex: 1; overflow-y: auto; }

/* HERO görsel — canlı Street View iframe */
.loc-dt-hero {
    position: relative;
    height: 260px;
    background: linear-gradient(135deg, #1e293b, #334155);
    overflow: hidden;
}
.loc-detail.is-expanded .loc-dt-hero { height: 380px; }
.loc-dt-hero-streetview-btn {
    width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .92);
}
.loc-dt-hero-streetview-btn svg { width: 14px; height: 14px; }
.loc-dt-hero img,
.loc-dt-hero-frame {
    width: 100%; height: 100%; border: 0; display: block;
}
.loc-dt-hero-frame { object-fit: cover; }
.loc-dt-hero-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .6); font-size: 13px;
    background: linear-gradient(135deg, #1e293b, #334155);
}
.loc-dt-hero-fallback svg { width: 48px; height: 48px; opacity: .5; }
.loc-dt-hero-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85));
    color: #fff;
}
.loc-dt-hero-name { font-size: 18px; font-weight: 700; line-height: 1.2; text-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.loc-dt-hero-meta { font-size: 11.5px; opacity: .9; margin-top: 3px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.loc-dt-hero-chips {
    position: absolute; top: 10px; left: 10px;
    display: flex; gap: 5px; flex-wrap: wrap;
}
.loc-dt-hero-chip {
    padding: 3px 9px; border-radius: 10px;
    font-size: 9.5px; font-weight: 700;
    background: rgba(255, 255, 255, .92); color: #0f172a;
    letter-spacing: .3px;
    backdrop-filter: blur(4px);
}
.loc-dt-hero-chip.status-open { background: rgba(16, 185, 129, .92); color: #fff; }
.loc-dt-hero-chip.status-closed { background: rgba(239, 68, 68, .92); color: #fff; }
.loc-dt-hero-streetview-btn {
    position: absolute; bottom: 10px; right: 10px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, .92); color: #0f172a;
    border: 0; border-radius: 14px;
    font-size: 10px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    backdrop-filter: blur(4px);
    transition: background-color .15s ease;
}
.loc-dt-hero-streetview-btn:hover { background: #fff; }
.loc-dt-hero-streetview-btn svg { width: 11px; height: 11px; }

/* Quick info bar — capability rozet şeridi */
.loc-dt-caps-bar {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbff;
}
.loc-dt-caps-bar:empty { display: none; }

/* Quick action bar — telefon/yol */
.loc-dt-quick {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 6px; padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.loc-dt-quick-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 6px;
    background: #fff; border: 1px solid var(--sp-border); border-radius: 6px;
    cursor: pointer; text-decoration: none;
    color: #475569; font-size: 10px; font-weight: 600;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.loc-dt-quick-btn:hover { border-color: #797bf2; color: #4338ca; background: #fafbff; }
.loc-dt-quick-btn svg { width: 18px; height: 18px; color: #797bf2; }

/* Bölüm grupları — collapsible */
.loc-dt-sections { padding: 4px 0 14px; }
.loc-dt-section {
    border-bottom: 1px solid #f1f5f9;
}
.loc-dt-section-head {
    width: 100%; padding: 11px 16px;
    background: transparent; border: 0; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 700; color: #0f172a;
    letter-spacing: .3px;
    transition: background-color .15s ease;
}
.loc-dt-section-head:hover { background: #f3f4f6; }
.loc-dt-section-head-ico { font-size: 14px; }
.loc-dt-section-head-name { flex: 1; text-align: left; }
.loc-dt-section-chev {
    width: 12px; height: 12px; color: #94a3b8;
    transition: transform .2s ease;
}
.loc-dt-section.is-collapsed .loc-dt-section-chev { transform: rotate(-90deg); }
.loc-dt-section-body { padding: 0 16px 14px; }
.loc-dt-section.is-collapsed .loc-dt-section-body { display: none; }

/* Bilgi satırı */
.loc-dt-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 5px 0; font-size: 11.5px; color: #0f172a;
    border-bottom: 1px dashed #f1f5f9;
}
.loc-dt-row:last-child { border-bottom: 0; }
.loc-dt-row-label { color: #64748b; font-weight: 500; min-width: 90px; flex-shrink: 0; }
.loc-dt-row-value { color: #0f172a; font-weight: 600; flex: 1; word-break: break-word; }
.loc-dt-row-value-mute { color: #94a3b8; font-weight: 400; font-style: italic; }

/* Capability metrik grid */
.loc-dt-metric-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    margin-top: 4px;
}
.loc-dt-metric {
    padding: 8px 10px;
    background: linear-gradient(135deg, #fafbff, #f5f7ff);
    border: 1px solid #e0e7ff; border-radius: 5px;
}
.loc-dt-metric-num { font-size: 16px; font-weight: 700; color: #4338ca; line-height: 1; }
.loc-dt-metric-lbl { font-size: 9.5px; color: #64748b; margin-top: 2px; letter-spacing: .3px; }

/* Hızlı Güncelleme inline paneli */
.loc-dt-quick-edit {
    padding: 12px 14px;
    margin: 10px 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fcd34d; border-radius: 8px;
    animation: loc-level-in .2s ease;
}
.loc-dt-quick-edit-title {
    font-size: 11.5px; font-weight: 800; color: #78350f;
    margin-bottom: 8px; letter-spacing: .3px;
}
.loc-dt-quick-edit-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.loc-dt-quick-edit-grid label {
    display: flex; flex-direction: column; gap: 3px;
}
.loc-dt-quick-edit-grid label span {
    font-size: 9.5px; font-weight: 600; color: #78350f;
}
.loc-dt-quick-edit-grid input {
    padding: 5px 8px; border: 1px solid #fcd34d; border-radius: 4px;
    background: #fff; font-size: 11px; color: #0f172a;
}
.loc-dt-quick-edit-grid input:focus {
    outline: none; border-color: #d97706; box-shadow: 0 0 0 2px rgba(245, 158, 11, .2);
}
.loc-dt-quick-edit-actions {
    display: flex; gap: 6px; justify-content: flex-end;
    margin-top: 10px;
}
.loc-dt-quick-edit-actions .loc-dt-action { padding: 6px 12px; }

/* Footer aksiyon bar — sticky bottom */
.loc-dt-footer {
    position: sticky; bottom: 0;
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 6px; padding: 10px 12px;
    background: #fff; border-top: 1px solid var(--sp-border);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, .06);
}
.loc-dt-action {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 10px; border: 1px solid var(--sp-border); border-radius: 6px;
    background: #fff; color: #475569; cursor: pointer;
    font-size: 11px; font-weight: 600; text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.loc-dt-action:hover { border-color: #797bf2; color: #4338ca; background: #fafbff; }
.loc-dt-action.primary { background: #797bf2; color: #fff; border-color: #797bf2; }
.loc-dt-action.primary:hover { background: #4338ca; color: #fff; }
.loc-dt-action.danger { color: #b91c1c; border-color: #fecaca; }
.loc-dt-action.danger:hover { background: var(--sp-danger); color: #fff; border-color: var(--sp-danger); }
.loc-dt-action svg { width: 13px; height: 13px; }

/* Responsive */
@media (max-width: 900px) {
    .loc-side { flex: 0 0 220px; max-width: 220px; }
    .loc-detail { width: 320px; }
}
@media (max-width: 640px) {
    .loc-side { display: none; }
    .loc-detail { width: 100%; }
    .loc-topbar { flex-wrap: wrap; }
    .loc-search { flex: 1 1 100%; max-width: 100%; }
}

/* Marker — tip rengiyle özel SVG ikon (Leaflet divIcon ile JS'de set) */
.loc-marker {
    width: 28px; height: 28px; border-radius: 50% 50% 50% 0;
    background: #797bf2; border: 2px solid #fff; transform: rotate(-45deg);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.loc-marker-inner { transform: rotate(45deg); color: #fff; font-size: 11px; font-weight: 700; }
/* Tip renk paleti */
.loc-marker.t-depo     { background: #6366f1; }
.loc-marker.t-sube     { background: #0ea5e9; }
.loc-marker.t-musteri  { background: #10b981; }
.loc-marker.t-tedarikci{ background: #f59e0b; }
.loc-marker.t-transfer { background: #ec4899; }
.loc-marker.t-other    { background: #64748b; }
.loc-marker.is-closed  { opacity: 0.5; }
.loc-marker.is-temp-closed { background: #94a3b8 !important; }
.loc-marker.is-quick-commerce::after {
    content: '⚡'; position: absolute; top: -8px; right: -8px;
    background: #fbbf24; color: #fff; border-radius: 50%;
    width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 10px; transform: rotate(45deg);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.loc-marker.is-selected { transform: rotate(-45deg) scale(1.25); box-shadow: 0 4px 14px rgba(121,123,242,.5); }

/* ----- Lokasyon modal: sol-tab + sağ içerik ----- */
.op-loc-modal { width: min(1200px, 96vw); }
.op-loc-body {
    display: grid; grid-template-columns: 200px 1fr; gap: 0;
    padding: 0 !important;
    min-height: 480px; max-height: calc(100vh - 200px);
}
.op-loc-tabs {
    background: linear-gradient(180deg, #f9fafb, #f3f4f6);
    border-right: 1px solid var(--sp-border);
    padding: 8px 6px;
    display: flex; flex-direction: column; gap: 2px;
    overflow-y: auto;
}
.op-loc-tab {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border: 0; border-radius: 5px;
    background: transparent; color: #475569;
    text-align: left; cursor: pointer; font-size: 11.5px; font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
    border-left: 3px solid transparent;
}
.op-loc-tab:hover { background: rgba(121, 123, 242, 0.06); color: #0f172a; }
.op-loc-tab.active {
    background: #fff; color: #4338ca;
    border-left-color: #797bf2;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.op-loc-tab-ico { font-size: 13px; line-height: 1; flex-shrink: 0; }
.op-loc-content {
    padding: 14px 18px;
    overflow-y: auto;
    display: flex; flex-direction: column;
}
.op-loc-pane { display: none; }
.op-loc-pane.active { display: block; animation: loc-fade .15s ease; }
@keyframes loc-fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* Header chip'ler — tip + statü */
.op-loc-type-chip, .op-loc-status-chip {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 10px; font-size: 9.5px; font-weight: 700;
    letter-spacing: .3px;
}
.op-loc-type-chip { background: rgba(99,102,241,.12); color: #4338ca; }
.op-loc-status-chip { background: rgba(16,185,129,.12); color: #047857; }
.op-loc-status-chip.closed { background: rgba(239,68,68,.12); color: #b91c1c; }

/* Form içi gömülü harita (Konum tab) */
.op-loc-formmap {
    height: 320px; margin-top: 0; margin-bottom: 8px;
    background: #f1f5f9; border-radius: 0 0 6px 6px; border: 1px solid var(--sp-border); border-top: 0;
    overflow: hidden;
}

/* Coverage çizim araç çubuğu (CanliTakip SpAddressModal paterni) */
.loc-coverage-tools {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fcd34d; border-bottom: 0; border-radius: 6px 6px 0 0;
    margin-top: 8px;
}
.loc-coverage-modes { display: inline-flex; gap: 4px; }
.loc-cov-mode {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 12px;
    background: rgba(255, 255, 255, .6); border: 1px solid rgba(245, 158, 11, .3);
    font-size: 11px; font-weight: 600; color: #78350f; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.loc-cov-mode:hover { background: rgba(255, 255, 255, .9); }
.loc-cov-mode input { accent-color: #d97706; cursor: pointer; }
.loc-cov-mode:has(input:checked) { background: #d97706; color: #fff; border-color: #b45309; }
.loc-coverage-actions { display: inline-flex; gap: 6px; align-items: center; }
.loc-cov-radius { display: inline-flex; gap: 5px; align-items: center; font-size: 11px; color: #78350f; }
.loc-cov-radius input {
    width: 80px; padding: 4px 7px;
    border: 1px solid #fcd34d; border-radius: 4px;
    font-size: 11px;
}
.loc-coverage-actions .sp-btn-ghost { padding: 4px 10px; font-size: 11px; }
.loc-coverage-actions .sp-btn-ghost svg { width: 12px; height: 12px; }

/* ============================================================================
   Capability Badge Şeridi — header'da lokasyon kimliği (anında özellik özeti)
   ============================================================================ */
.op-loc-caps {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 6px;
}
.op-loc-cap {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 10px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: .3px;
    background: rgba(99, 102, 241, .1); color: #4338ca;
    border: 1px solid rgba(99, 102, 241, .25);
}
.op-loc-cap.cap-qc      { background: rgba(245, 158, 11, .14); color: #b45309; border-color: rgba(245, 158, 11, .35); }
.op-loc-cap.cap-cold    { background: rgba(14, 165, 233, .12); color: #0369a1; border-color: rgba(14, 165, 233, .3); }
.op-loc-cap.cap-dock    { background: rgba(99, 102, 241, .12); color: #4338ca; border-color: rgba(99, 102, 241, .3); }
.op-loc-cap.cap-fork    { background: rgba(99, 102, 241, .12); color: #4338ca; border-color: rgba(99, 102, 241, .3); }
.op-loc-cap.cap-apt     { background: rgba(236, 72, 153, .12); color: #be185d; border-color: rgba(236, 72, 153, .3); }
.op-loc-cap.cap-night   { background: rgba(124, 58, 237, .12); color: #6d28d9; border-color: rgba(124, 58, 237, .3); }
.op-loc-cap.cap-weekend { background: rgba(16, 185, 129, .12); color: #047857; border-color: rgba(16, 185, 129, .3); }
.op-loc-cap.cap-sfs     { background: rgba(236, 72, 153, .12); color: #be185d; border-color: rgba(236, 72, 153, .3); }
.op-loc-cap.cap-cc      { background: rgba(20, 184, 166, .12); color: #0f766e; border-color: rgba(20, 184, 166, .3); }
.op-loc-cap.cap-tempcl  { background: rgba(148, 163, 184, .2); color: #475569; border-color: rgba(148, 163, 184, .4); }

/* ============================================================================
   Quick Commerce — kart panel (toggle yerine görsel kart grid)
   ============================================================================ */
.op-qc-intro {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: 14px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid rgba(245, 158, 11, .4); border-radius: 8px;
    color: #78350f;
}
.op-qc-intro svg { width: 20px; height: 20px; color: #d97706; flex-shrink: 0; margin-top: 2px; }
.op-qc-intro strong { display: block; font-size: 12px; }
.op-qc-intro small { display: block; font-size: 10.5px; opacity: .85; margin-top: 2px; }

.op-qc-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px; margin-bottom: 16px;
}
.op-qc-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #fff; border: 1.5px solid var(--sp-border); border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    position: relative;
}
.op-qc-card:hover { border-color: rgba(121, 123, 242, .35); background: #fafbff; }
.op-qc-card input[type=checkbox] { display: none; }
.op-qc-card.is-on {
    border-color: #797bf2; background: linear-gradient(135deg, #fff, #f5f7ff);
    box-shadow: 0 2px 8px rgba(121, 123, 242, .12);
}
.op-qc-card-ico {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
}
.op-qc-card-body { flex: 1; min-width: 0; }
.op-qc-card-name { font-size: 12px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.op-qc-card-desc { font-size: 10px; color: #64748b; margin-top: 3px; line-height: 1.3; }
.op-qc-card-check {
    width: 18px; height: 18px; border-radius: 4px;
    border: 1.5px solid var(--sp-border); background: #fff;
    flex-shrink: 0; position: relative;
    transition: background-color .15s ease, border-color .15s ease;
}
.op-qc-card.is-on .op-qc-card-check { background: #10b981; border-color: #10b981; }
.op-qc-card.is-on .op-qc-card-check::after {
    content: '✓'; color: #fff; font-size: 12px; font-weight: 700;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* QC Metrik grubu */
.op-qc-metrics-title {
    font-size: 11px; font-weight: 700; color: #64748b;
    letter-spacing: .4px;
    margin-bottom: 8px; padding-bottom: 5px;
    border-bottom: 1px dashed var(--sp-border);
}
.op-qc-metrics {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.op-qc-metric { display: flex; flex-direction: column; gap: 3px; }
.op-qc-metric label { font-size: 10.5px; font-weight: 600; color: #475569; }
.op-qc-metric input {
    padding: 6px 9px; font-size: 12px;
    border: 1px solid var(--sp-border); border-radius: 4px;
    background: #fff; color: #0f172a;
}
.op-qc-metric input:focus { outline: none; border-color: #797bf2; box-shadow: 0 0 0 2px rgba(121, 123, 242, .15); }
.op-qc-metric small { font-size: 9.5px; color: #94a3b8; font-style: italic; }
.op-qc-metric-wide { grid-column: span 2; }

/* Responsive */
@media (max-width: 1100px) {
    .loc-split { grid-template-columns: 1fr; height: auto; }
    .loc-pane-grid #opLocationsGrid { min-height: 400px; }
    .loc-pane-map { min-height: 360px; }
}
@media (max-width: 700px) {
    .op-loc-body { grid-template-columns: 56px 1fr; }
    .op-loc-tab span:not(.op-loc-tab-ico) { display: none; }
    .op-loc-tab { justify-content: center; padding: 9px 6px; }
}

/* ============================================================
   Araç Kullanım render — Fleet kartı "Kiralamalar" tabı + Müşteri
   Detay modalı için ortak stiller. musteri-detay.css'te de aynısı
   var (Müşteri Detay sayfasına özel yüklenir); buradaki kopya
   Dashboard/CanliTakip/Kokpit gibi Fleet kartı açılan tüm sayfalar
   için geçerlidir.
   ============================================================ */
.md-veh-usage-loading {
    padding: 24px;
    text-align: center;
    color: var(--sp-text-muted);
    font-size: 13px;
}
.md-veh-usage-section { margin: 0 0 12px; }
.md-veh-usage-section:last-child { margin-bottom: 0; }
.md-veh-usage-sectitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sp-text);
    margin: 0 0 6px;
}
.md-veh-usage-sectitle b {
    background: var(--sp-bg-input);
    color: var(--sp-text);
    border-radius: 9999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--sp-border);
}
.md-veh-usage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    margin: 0 0 6px;
    transition: background-color .15s ease, border-color .15s ease;
    cursor: pointer;
}
.md-veh-usage-row:hover {
    background: var(--sp-bg-input);
    border-color: rgba(121,123,242,.40);
}
.md-veh-usage-row:last-child { margin-bottom: 0; }
.md-veh-usage-row--active { border-left: 3px solid #10b981; }
.md-veh-usage-row--history {
    background: var(--sp-bg);
    opacity: .85;
    cursor: default;
}
.md-veh-usage-row--history:hover {
    background: var(--sp-bg);
    border-color: var(--sp-border);
}
.md-veh-usage-cust {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.md-veh-usage-cust-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-veh-usage-cust-meta {
    font-size: 11.5px;
    color: var(--sp-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.md-veh-usage-typepill {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}
.md-veh-usage-typepill.t1 { background: rgba(245,158,11,.18); color: #92400e; border-color: rgba(245,158,11,.45); }
.md-veh-usage-typepill.t2 { background: rgba(59,130,246,.18); color: #1e40af; border-color: rgba(59,130,246,.45); }
.md-veh-usage-typepill.t3 { background: rgba(168,85,247,.18); color: #6b21a8; border-color: rgba(168,85,247,.45); }
.md-veh-usage-typepill.t4 { background: rgba(20,184,166,.18); color: #115e59; border-color: rgba(20,184,166,.45); }
.md-veh-usage-arrow {
    color: var(--sp-text-muted);
    font-size: 16px;
    flex-shrink: 0;
}
.md-veh-usage-row--history .md-veh-usage-arrow { display: none; }
.md-veh-usage-empty {
    padding: 18px 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--sp-text-muted);
    background: var(--sp-bg);
    border: 1px dashed var(--sp-border);
    border-radius: 6px;
}

/* ============================================================================
   spPrompt — standart input modal (portal.js > spPrompt)
   ============================================================================ */
.sp-prompt-input {
    display: block;
    width: 100%;
    padding: 10px 14px;
    margin: 6px 0 10px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--sp-text);
    background: var(--sp-bg-input);
    border: 1.5px solid transparent;
    border-radius: var(--sp-radius-sm);
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}
.sp-prompt-input:focus {
    border-color: var(--sp-primary);
    background: var(--sp-bg-card);
}
.sp-prompt-input.has-error {
    border-color: var(--sp-danger);
    background: #fef2f2;
}
.sp-prompt-input::placeholder {
    color: var(--sp-text-muted);
}

.sp-prompt-error {
    display: none;
    margin: 0 0 12px;
    padding: 6px 10px;
    font-size: 12.5px;
    color: #b91c1c;
    background: #fef2f2;
    border-left: 3px solid var(--sp-danger);
    border-radius: 4px;
    text-align: left;
}

/* =========================================================================
 * §7.6 — Modal Header Mode Badge (sp_ui_standards.md §7.6 spec)
 * Form modal başlığı yanına Yeni/Düzenleme görsel ayrımı için badge.
 * ========================================================================= */

.sp-modal-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

.sp-modal-mode-badge.is-new {
    background-color: rgba(16, 185, 129, 0.12);
    color: #10b981;   /* protected success green */
}

.sp-modal-mode-badge.is-edit {
    background-color: rgba(245, 158, 11, 0.12);
    color: var(--sp-primary-dark);   /* portal amber — Geowix Logitera mor (#797bf2) portalda YASAK */
}

/* =========================================================================
 * §7.7 — Modal Footer Message Area (sp_ui_standards.md §7.7 spec)
 * Validation hata mesajı, success bildirimi, loading text için sol-flex alan.
 * Tüm form modallerinde footer'da bulunur — global standart.
 * ========================================================================= */

.sp-modal-foot-msg {
    flex: 1 1 auto;
    font-size: 12.5px;
    color: var(--sp-text);
    line-height: 1.4;
    align-self: center;
}

.sp-modal-foot-msg span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sp-modal-mode-badge svg,
.sp-modal-mode-badge i {
    width: 11px;
    height: 11px;
    font-size: 10px;
}

/* =========================================================================
 * §9 — Filtre Barı Standardı (sp_ui_standards.md §9.3 spec)
 * Liste ekranlarında üst kısımdaki filtre barı için global standart.
 * Geowix `.new-controls` muadili. Input/select TagHelper'lardan (.sp-group)
 * gelir; bu blok sadece wrapper + advanced toggle + filter-actions için.
 * ========================================================================= */

.sp-filter-bar {
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 12px 14px;
    margin-bottom: 14px;
}

/* Aksiyon buton grubu — label boş, buton'lar input hizasında yatay sıralı */
.sp-filter-actions-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* Detaylı filtreler — collapsible (toggle .is-open ile) */
.sp-filter-advanced {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--sp-border);
}
.sp-filter-advanced.is-open { display: block; }

/* =========================================================================
 * Lastikler Sub-Tab — _SpModalVehicle.cshtml `<div data-vpane="lastikler">`
 * Faz 1A iskelet stilleri. Faz 1C JS render ile detaylı pozisyon kartları,
 * dorsel/dingilli görseller eklenecek. Şu an minimum chip + listeleme.
 * ========================================================================= */

/* Chip header — Plaka · KM · Takılı X/Y */
.sp-tire-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.sp-tire-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background-color: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: 99px;
    font-size: 12px;
    color: var(--sp-text);
    font-weight: 600;
}
.sp-tire-chip i {
    color: var(--sp-primary-dark);
    font-size: 11px;
}

/* Şema wrapper — sol legend + sağ render alanı */
.sp-tire-diagram-wrapper {
    background-color: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 14px;
    margin-bottom: 16px;
}
.sp-tire-diagram-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
    font-weight: 500;
}
.sp-tire-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sp-tire-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sp-tire-legend-dot.is-mounted {
    background-color: #10b981;   /* protected success green — takılı */
}
.sp-tire-legend-dot.is-empty {
    background-color: var(--sp-bg-input);
    border: 1.5px dashed var(--sp-border);
}

/* Şema render alanı — Faz 1C'de SVG/HTML pozisyon render edilecek */
.sp-tire-diagram {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-tire-diagram-loading {
    color: var(--sp-text-muted);
    font-size: 12.5px;
    text-align: center;
    padding: 30px 20px;
    line-height: 1.6;
}
.sp-tire-diagram-loading i {
    color: var(--sp-primary);
    margin-right: 6px;
}

/* Takılı lastik kartları listesi — Faz 1C kart render */
.sp-tire-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-tire-list-loading {
    padding: 20px;
    text-align: center;
    color: var(--sp-text-muted);
    font-size: 12.5px;
}
.sp-tire-list-loading i {
    margin-right: 6px;
    color: var(--sp-primary);
}

/* =========================================================================
 * Lastikler — Pozisyon Chip Grid (Faz 1C MVP — şema yerine chip listesi)
 * Boş + dolu pozisyonlar grid'de. Boşa tıkla → mini modal, dolu tıkla → info alert.
 * ========================================================================= */
.sp-tire-positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    width: 100%;
}

.sp-tire-pos-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 12px;
    border: 1.5px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}
.sp-tire-pos-chip:hover {
    transform: translateY(-1px);
    border-color: var(--sp-primary);
}

.sp-tire-pos-chip.is-mounted {
    border-color: rgba(16, 185, 129, 0.45);
    background-color: rgba(16, 185, 129, 0.06);
}
.sp-tire-pos-chip.is-empty {
    border-style: dashed;
}

.sp-tire-pos-icon {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    color: #10b981;                          /* takılı yeşil — protected accent */
}
.sp-tire-pos-chip.is-empty .sp-tire-pos-icon {
    color: var(--sp-text-muted);
    font-size: 20px;
}

.sp-tire-pos-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-tire-pos-status {
    font-size: 10px;
    letter-spacing: 0.3px;
    color: var(--sp-text-muted);
    font-weight: 600;
}
.sp-tire-pos-chip.is-mounted .sp-tire-pos-status {
    color: #10b981;
}

/* =========================================================================
 * Lastikler — Takılı Lastik Kartları
 * Pozisyon (sol, vurgu) + body (kod/marka/seri/km/durum) + Sök butonu (sağ)
 * ========================================================================= */
.sp-tire-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--sp-border);
    border-left: 3px solid #10b981;          /* takılı yeşil sol-bar — protected accent */
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
}

/* Lastik (jant) ikonu — her takılı lastik kartının başında (2026-06-11) */
.sp-tire-card-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(16, 185, 129, 0.10);   /* takılı yeşil tint — protected accent */
    color: #059669;                                /* protected accent */
}
.sp-tire-card-icon svg { width: 19px; height: 19px; }

.sp-tire-card-pos {
    flex-shrink: 0;
    min-width: 90px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-primary-dark);
    letter-spacing: 0.3px;
}

.sp-tire-card-body {
    flex: 1;
    min-width: 0;
}

.sp-tire-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
    margin-bottom: 3px;
    word-break: break-word;
}

.sp-tire-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
}
.sp-tire-card-meta b {
    color: var(--sp-text);
    font-weight: 600;
}

.sp-tire-card-remove-btn {
    flex-shrink: 0;
}

/* ⭐ 2026-06-11: Takılı lastik kartı — Ömür % progress bar (Logitera "Araç Stok" grid Ömür % muadili).
   Lastik ömrü tanımlıysa (tire_lifespan > 0) gösterilir; renk severity korumalı accent paleti. */
.sp-tire-card-life {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.sp-tire-card-life-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background-color: var(--sp-bg-input);
    overflow: hidden;
}
.sp-tire-card-life-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.sp-tire-card-life-fill.is-ok   { background-color: #10b981; }   /* protected accent */
.sp-tire-card-life-fill.is-warn { background-color: #f59e0b; }   /* protected accent */
.sp-tire-card-life-fill.is-crit { background-color: #ef4444; }   /* protected accent */
.sp-tire-card-life-pct {
    flex-shrink: 0;
    min-width: 40px;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    color: var(--sp-text-muted);
}
.sp-tire-card-life-pct.is-ok   { color: #059669; }   /* protected accent */
.sp-tire-card-life-pct.is-warn { color: var(--sp-primary-dark); }
.sp-tire-card-life-pct.is-crit { color: #dc2626; }   /* protected accent */

/* =========================================================================
 * Lastik Hareketleri — Hareket Listesi (Logitera "Hareketler" grid muadili)
 * Backend: /SupplierPortal/VehicleTireHistory (VehicleTireStock_GetHistoryData passthrough)
 * SP timeline kart listesi — Giriş (takıldı, yeşil) / Çıkış (söküldü, amber)
 * ========================================================================= */
.sp-tire-mov-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-tire-mov-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
}
.sp-tire-mov-row.is-in  { border-left-color: #10b981; }    /* protected accent */
.sp-tire-mov-row.is-out { border-left-color: #f59e0b; }    /* protected accent */
.sp-tire-mov-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.sp-tire-mov-icon svg { width: 16px; height: 16px; }
.sp-tire-mov-row.is-in  .sp-tire-mov-icon { background-color: rgba(16,185,129,0.12); color: #059669; }
.sp-tire-mov-row.is-out .sp-tire-mov-icon { background-color: rgba(245,158,11,0.14); color: var(--sp-primary-dark); }
.sp-tire-mov-main { flex: 1; min-width: 0; }
.sp-tire-mov-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.sp-tire-mov-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.sp-tire-mov-badge.is-in  { background-color: rgba(16,185,129,0.14); color: #059669; }
.sp-tire-mov-badge.is-out { background-color: rgba(245,158,11,0.16); color: var(--sp-primary-dark); }
.sp-tire-mov-date {
    font-size: 11px;
    color: var(--sp-text-muted);
}
.sp-tire-mov-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
    margin-bottom: 3px;
    word-break: break-word;
}
.sp-tire-mov-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
}
.sp-tire-mov-meta b {
    color: var(--sp-text);
    font-weight: 600;
}

/* =========================================================================
 * Maliyetler — Lastik Montaj İş Emri Maliyetleri (Logitera "Maliyetler" tab muadili)
 * Backend: /SupplierPortal/VehicleTireJobList + /SupplierPortal/VehicleTireCosts
 * Özet şerit (3 stat) + 2 sütun (Maliyetlendirilmiş yeşil / Maliyetlendirilmemiş amber)
 * ========================================================================= */
.sp-tire-cost-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.sp-tire-cost-stat {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
}
.sp-tire-cost-stat.is-total {
    border-left-color: var(--sp-primary);
    background-color: rgba(245, 158, 11, 0.06);   /* amber tint — sonuç/özet metriği vurgusu */
}
.sp-tire-cost-stat.is-ok    { border-left-color: #10b981; }   /* protected accent */
.sp-tire-cost-stat.is-warn  { border-left-color: var(--sp-text-muted); }   /* maliyetlendirilmemiş = nötr/bekliyor (gri) — hata değil, primary'den ayrışsın */
.sp-tire-cost-stat-label {
    font-size: 11px;
    color: var(--sp-text-muted);
    font-weight: 600;
}
.sp-tire-cost-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-tire-cost-stat.is-total .sp-tire-cost-stat-value { color: var(--sp-primary-dark); }

.sp-tire-cost-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.sp-tire-cost-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-tire-cost-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sp-border);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-tire-cost-col-head svg { width: 15px; height: 15px; flex-shrink: 0; }
.sp-tire-cost-col-head.is-ok svg   { color: #059669; }   /* protected accent */
.sp-tire-cost-col-head.is-warn svg { color: var(--sp-text-muted); }   /* maliyetlendirilmemiş = nötr (gri) */
.sp-tire-cost-col-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background-color: var(--sp-bg-input);
    color: var(--sp-text-muted);
    font-size: 11px;
    font-weight: 700;
}
.sp-tire-cost-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
    padding: 10px 12px;
}
.sp-tire-cost-card.is-costed   { border-left-color: #10b981; }   /* protected accent */
.sp-tire-cost-card.is-uncosted { border-left-color: var(--sp-text-muted); }   /* maliyetlendirilmemiş = nötr/bekliyor (gri) — hata değil */

/* Üst meta satırı — # iş emri (sol) + tarih (sağ), küçük/sönük (tutarla yarışmasın) */
.sp-tire-cost-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.sp-tire-cost-card-ref {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sp-text-muted);
}
.sp-tire-cost-card-ref i { font-size: 10px; opacity: 0.7; }
.sp-tire-cost-card-date { font-size: 11px; color: var(--sp-text-muted); }

/* Tutar "hero" satırı — etiket (sol) + büyük tutar (sağ), ayraçlı. Tutar baş aktör. */
.sp-tire-cost-card-amount-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 7px;
    margin-bottom: 7px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-tire-cost-card-amount-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
}
.sp-tire-cost-card-amount {
    font-size: 17px;
    font-weight: 800;
    color: var(--sp-text);
    white-space: nowrap;
}
.sp-tire-cost-card.is-costed .sp-tire-cost-card-amount   { color: #059669; }              /* protected accent */
.sp-tire-cost-card.is-uncosted .sp-tire-cost-card-amount { color: var(--sp-text-muted); }   /* nötr gri */

/* Meta — inline-wrap (sütun yığın değil): kart yüksekliği dengeli + kompakt */
.sp-tire-cost-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
}
.sp-tire-cost-card-meta b {
    color: var(--sp-text);
    font-weight: 600;
}

/* Kaplama maliyet kartı meta — her satırda 2 veri: biri solda, biri sağda (karışık durmasın).
   Retread'e özel (paylaşılan .sp-tire-cost-card-meta'ya dokunulmaz — araç kartı flex-wrap kalır). */
.sp-rtc-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 16px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
}
.sp-rtc-meta > span:nth-child(even) { text-align: right; }
.sp-rtc-meta b { color: var(--sp-text); font-weight: 600; }

/* Maliyet kartı aksiyon butonları — Maliyetlendirilmiş: Düzenle/Sil · Maliyetsiz: Maliyet Oluştur */
.sp-tire-cost-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--sp-border);
}
.sp-tire-cost-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--sp-radius-sm);
    border: 1px solid var(--sp-border);
    background-color: var(--sp-bg-card);
    color: var(--sp-text);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sp-tire-cost-btn i { font-size: 11px; }
.sp-tire-cost-btn.is-edit:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary-dark);
    background-color: rgba(245, 158, 11, 0.08);
}
.sp-tire-cost-btn.is-del:hover {
    border-color: #ef4444;                       /* protected accent */
    color: #dc2626;                              /* protected accent */
    background-color: rgba(239, 68, 68, 0.08);
}
.sp-tire-cost-btn.is-create {
    border-color: #10b981;                       /* protected accent */
    color: #059669;                              /* protected accent */
    background-color: rgba(16, 185, 129, 0.08);
}
.sp-tire-cost-btn.is-create:hover {
    background-color: rgba(16, 185, 129, 0.16);
}

/* Kaplama Firması Detayı > Maliyet kartı aksiyonları — sp-tire-cost-btn tabanını kullanır ama
   is-* yerine sp-rtc-* modifier ile (SpTireCost handler'ı .is-edit/.is-del/.is-create'e bağlı;
   sp-rtc-* tetiklemez → SpRetreadStock/SpRetreadCost akışı kullanılır). Renkler is-* ile birebir. */
.sp-tire-cost-btn.sp-rtc-edit:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary-dark);
    background-color: rgba(245, 158, 11, 0.08);
}
.sp-tire-cost-btn.sp-rtc-del:hover {
    border-color: #ef4444;                       /* protected accent */
    color: #dc2626;                              /* protected accent */
    background-color: rgba(239, 68, 68, 0.08);
}
.sp-tire-cost-btn.sp-rtc-create {
    border-color: #10b981;                       /* protected accent */
    color: #059669;                              /* protected accent */
    background-color: rgba(16, 185, 129, 0.08);
}
.sp-tire-cost-btn.sp-rtc-create:hover {
    background-color: rgba(16, 185, 129, 0.16);
}

/* =========================================================================
 * Compact Checkbox Row — mini modal sade checkbox satırı
 * sp-toggle-row YERINE — daha az dikey alan, başlık+açıklama yok, tek satır
 * _SpModalTireMount.cshtml (Maliyet kayıt onayı) — yeni modallarda da kullanılabilir
 * ========================================================================= */
.sp-checkbox-row {
    margin-top: 6px;
}
.sp-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sp-text);
    user-select: none;
}
.sp-checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sp-primary);
    cursor: pointer;
    margin: 0;
}
.sp-checkbox-inline span {
    line-height: 1.4;
}

/* =========================================================================
 * Filo → Araçlar ve Çekiciler → "Lastik" L2 pane — Şematik Kart Grid
 * Backend: /SupplierPortal/FleetTireOverview
 * JS: fleet-tires.js (lazy load, kart render, pozisyon tıklama → openTireMount)
 * ========================================================================= */

/* KPI grid — diğer L2 pane'lerle ortak `sp-kpi-grid` zaten tanımlı */
.sp-fleet-tire-kpi {
    margin-bottom: 12px;
}

/* Legend — şema renk açıklaması */
.sp-fleet-tire-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 8px 4px 14px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
    font-weight: 500;
}
.sp-fleet-tire-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sp-fleet-tire-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sp-fleet-tire-dot.is-mounted {
    background-color: #10b981;
}
.sp-fleet-tire-dot.is-empty {
    background-color: var(--sp-bg-input);
    border: 1.5px dashed var(--sp-border);
}
/* ⭐ 2026-06-11: Ömür renk skalası göstergesi (yeşil→sarı→kırmızı) */
.sp-fleet-tire-dot.is-life {
    background-image: linear-gradient(90deg, #10b981, #eab308, #f97316, #ef4444);
    border: none;
}
/* Gri = lastik ömrü girilmemiş → renklendirme yapılmaz (yanıltıcı yeşil değil). */
.sp-fleet-tire-dot.is-unknown {
    background-color: var(--sp-text-muted);
    border: none;
}

/* ⭐ 2026-06-11: Şema kullanım bilgisi — başlıktaki info-circle ikonu + hover tooltip.
   FsmWo-section-info-btn pattern'i (modal_FsmWorkOrder) örnek alındı; renk SP amber.
   İkon net görünür (fa-info-circle), tooltip header (ampul+başlık) + body (legend). Responsive. */
.sp-info-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    padding: 2px;
    flex-shrink: 0;
}
.sp-info-btn > i {
    font-size: 15px;
    color: var(--sp-text-muted);
    padding: 4px;
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.sp-info-btn:hover > i {
    color: var(--sp-primary);
    background-color: rgba(245, 158, 11, 0.12);
}
.sp-info-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 290px;
    max-width: calc(100vw - 32px);   /* responsive — dar ekranda taşmasın */
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 9999;
    pointer-events: none;
}
.sp-info-btn:hover .sp-info-tooltip,
.sp-info-btn:focus-within .sp-info-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.sp-info-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 12px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--sp-border);
}
.sp-info-tooltip::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 13px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--sp-bg-card);
}
.sp-info-tooltip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background-color: rgba(245, 158, 11, 0.10);
    border-bottom: 1px solid rgba(245, 158, 11, 0.18);
}
.sp-info-tooltip-header i {
    color: var(--sp-primary);
    font-size: 14px;
}
.sp-info-tooltip-header span {
    font-size: 13px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-info-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
}
.sp-info-lead {
    font-size: 12px;
    color: var(--sp-text);
    line-height: 1.45;
    margin-bottom: 1px;
}
.sp-info-cap {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--sp-text-muted);
}
.sp-info-divider {
    height: 1px;
    background-color: var(--sp-border);
    margin: 3px 0 1px;
}

/* ── Inline field bilgi ikonu (sp-field info="...") — küçük ⓘ + düz metin tooltip ───────── */
.sp-info-btn-inline { vertical-align: middle; margin-left: 2px; }
.sp-info-btn-inline > i { font-size: 12px; padding: 2px; }
.sp-info-tooltip-inline {
    width: 240px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--sp-text);
    white-space: normal;
}

/* ── Standart aksiyon-buton popover'ı (spPop — data-sp-pop-title / data-sp-pop-text) ──────
   Grid satır butonları, footer butonları vb. üzerine gelince çıkan başlıklı + kompakt açıklamalı
   info penceresi. JS (portal.js spPop) body'e fixed konumlu tek paylaşılan eleman kurar → grid
   hücresi overflow:hidden kırpmaz. Görsel dil .sp-info-tooltip ile tutarlı (amber başlık). */
.sp-pop {
    position: fixed;
    z-index: 100000;
    width: 252px;
    max-width: calc(100vw - 24px);
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    pointer-events: none;
}
.sp-pop.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.sp-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background-color: rgba(245, 158, 11, 0.10);
    border-bottom: 1px solid rgba(245, 158, 11, 0.18);
}
.sp-pop-head i { color: var(--sp-primary); font-size: 13px; }
.sp-pop-head span { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.sp-pop-body {
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--sp-text-muted);
}

/* ── Şifre göster/gizle (sp-field toggle="true" type="password") ──────────────────────── */
.sp-input-eye-wrap { position: relative; display: block; width: 100%; }
.sp-input-eye-wrap > input { width: 100%; padding-right: 38px; }
.sp-input-eye {
    position: absolute; top: 0; right: 0; height: 100%; width: 36px;
    display: flex; align-items: center; justify-content: center;
    background-color: transparent; border: 0; cursor: pointer;
    color: var(--sp-text-muted);
    transition: color 0.2s ease;
}
.sp-input-eye:hover { color: var(--sp-primary); }

/* ── Modal ikon butonu (test gönder — Logitera new-header-icon-btn muadili) ────────────── */
.sp-modal-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input); color: var(--sp-primary-dark);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sp-modal-icon-btn:hover { background-color: var(--sp-bg-card); border-color: var(--sp-primary); color: var(--sp-primary); }
.sp-modal-icon-btn > i { font-size: 14px; }

/* ── Modal içi "Test" başlık çubuğu: sol etiket + sağ test butonu, altında ince çizgi ───── */
.sp-test-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 8px 0 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-test-bar-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
    color: var(--sp-text-muted);
}
.sp-info-row {
    display: flex;
    align-items: flex-start;     /* çok satır sarınca ikon üstte kalsın */
    gap: 8px;
    font-size: 12px;
    color: var(--sp-text-secondary, var(--sp-text-muted));
    line-height: 1.45;
}
/* ⭐ FIX — info popover satırlarında nokta/ikon + metin YAN YANA olsun.
   Global .sp-info-row (bu dosyada satır ~1139) başka bir bileşen için `flex-direction: column`
   tanımlı; bu blok flex-direction'ı yeniden tanımlamadığı için tooltip satırları sütun oluyordu
   → renkli badge'in ALTINA kayan metin + gereksiz uzayan popover (Araç Gider anomali info butonu).
   Yalnız tooltip body'sine scope'lu yön düzeltmesi — 1139'un diğer tüketicileri ETKİLENMEZ. */
.sp-info-tooltip-body .sp-info-row { flex-direction: row; }
.sp-info-row > span:first-child { margin-top: 2px; flex-shrink: 0; }
.sp-info-row b { color: var(--sp-text); font-weight: 600; }
.sp-info-row small { color: var(--sp-text-muted); font-size: 11px; }

/* ⭐ 2026-06-11: SpTip — standart hover popover (sp-tip.js). body'ye eklenir, fixed konum.
   Şema tekerlekleri: boş = "Lastik takmak için tıklayın", takılı = "Sökmek için tıklayın". */
.sp-tip {
    position: fixed;
    z-index: 10000;
    min-width: 150px;
    max-width: 260px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
    pointer-events: none;
}
.sp-tip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.sp-tip-title {
    padding: 9px 12px 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-tip-sub {
    padding: 2px 12px 9px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
    line-height: 1.45;
}
/* Çok satırlı tooltip — her bilgi kendi satırında, "Etiket: Değer" hiyerarşisi.
   Etiket flex-shrink:0 (asla bölünmez); değer gerekirse kendi sütununda sarar → "Seri No"nun
   değeri etiketten KOPMAZ / alt satıra rastgele kaymaz. (sp-tip max-width 260px ile uyumlu.) */
.sp-tip-rows {
    padding: 3px 12px 9px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sp-tip-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.4;
}
.sp-tip-row-l {
    flex-shrink: 0;
    color: var(--sp-text-muted);
}
.sp-tip-row-v {
    min-width: 0;
    color: var(--sp-text);
    font-weight: 600;
    word-break: break-word;
}
.sp-tip-row-single {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--sp-text-muted);
}
.sp-tip-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 11.5px;
    font-weight: 700;
    border-top: 1px solid var(--sp-border);
}
.sp-tip-action svg { width: 13px; height: 13px; flex-shrink: 0; }
.sp-tip-action.sp-tip-mount {
    color: var(--sp-primary-dark);
    background-color: rgba(245, 158, 11, 0.10);
}
.sp-tip-action.sp-tip-remove {
    color: #dc2626;
    background-color: rgba(239, 68, 68, 0.10);
}
/* "K" kaplama rozeti göstergesi (legend için mini chip) */
.sp-fleet-tire-badge-k {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #8b5cf6;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}

/* ⭐ 2026-06-11: Şema ince ipucu şeridi — ilk bakışta tak/sök rehberi (hover'a bağımlı kalmasın).
   Tek satır, ortalı, hafif; sadece Şema modunda görünür. */
.sp-fleet-tire-hintbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;   /* sola hizalı (önce ortalıydı) */
    gap: 4px 14px;
    margin: 0 0 12px;
    padding: 7px 12px;
    background-color: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-size: 12px;
    color: var(--sp-text-muted);
}
.sp-fthb-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.sp-fthb-item b { color: var(--sp-text); font-weight: 700; }
.sp-fthb-sep { color: var(--sp-border); }
.sp-fthb-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.4px dashed var(--sp-primary);
    border-radius: 50%;
    color: var(--sp-primary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}
/* "Takılı" göstergesi — NÖTR dolu nokta (yeşil DEĞİL; takılı lastik ömre göre renklenir ya da
   ömür girilmemişse gri olur — tek renge bağlamak yanıltıcı olurdu). Renk anlamı ayrı maddede. */
.sp-fthb-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--sp-text-muted);
    flex-shrink: 0;
}
/* "Renk = kalan ömür" göstergesi — ömür skalası gradyanı (is-life ile aynı) */
.sp-fthb-life {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-image: linear-gradient(90deg, #10b981, #eab308, #f97316, #ef4444);
    flex-shrink: 0;
}
/* Detay (tree) ipucu — chevron ikonu */
.sp-fthb-ico {
    font-size: 11px;
    color: var(--sp-primary-dark);
    flex-shrink: 0;
}

/* Kart grid — auto-fill responsive */
.sp-fleet-tire-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    width: 100%;
}

.sp-fleet-tire-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--sp-text-muted);
    font-size: 13px;
}
.sp-fleet-tire-loading i {
    margin-right: 6px;
    color: var(--sp-primary);
}

/* ======== Araç Kartı ======== */
.sp-fleet-tire-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background-color: var(--sp-bg-card);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.sp-fleet-tire-card:hover {
    transform: translateY(-1px);
    border-color: var(--sp-primary);
    box-shadow: var(--sp-shadow-sm);
}

/* ⭐ Dorse Lastik kartı (trailer-tires.js, 2026-06-24) — görsel olarak .sp-fleet-tire-card ile aynı.
   Distinct class: fleet-tires.js'in document-level '.sp-fleet-tire-card' click handler'ı (araç modalı açar)
   dorse kartında TETİKLENMESİN diye. İç görsel sınıflar (head/plate/status/meta/cta/foot/sp-ftsvg-*) PAYLAŞILIR.
   Detay butonu da aynı sebeple distinct (.sp-trtire-detail-btn). */
.sp-trtire-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background-color: var(--sp-bg-card);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.sp-trtire-card:hover {
    transform: translateY(-1px);
    border-color: var(--sp-primary);
    box-shadow: var(--sp-shadow-sm);
}
.sp-trtire-detail-btn {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 11.5px;
}
.sp-trtire-detail-btn svg {
    width: 12px;
    height: 12px;
}

.sp-fleet-tire-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sp-fleet-tire-plate {
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text);
}

/* Durum chip */
.sp-fleet-tire-status {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.sp-fleet-tire-status.is-full {
    background-color: rgba(16, 185, 129, 0.12);
    color: #10b981;
}
.sp-fleet-tire-status.is-partial {
    background-color: rgba(245, 158, 11, 0.14);
    color: var(--sp-primary-dark);
}
.sp-fleet-tire-status.is-zero {
    background-color: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}
.sp-fleet-tire-status.is-empty {
    background-color: rgba(120, 113, 108, 0.12);
    color: var(--sp-text-muted);
}

/* Meta — araç tipi + KM */
.sp-fleet-tire-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
}
.sp-fleet-tire-meta b {
    color: var(--sp-text);
    font-weight: 600;
}

/* Mini şema — pozisyon noktaları grid */
.sp-fleet-tire-mini-diagram {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
    gap: 4px;
    padding: 8px;
    background-color: var(--sp-bg);
    border-radius: var(--sp-radius-sm);
    min-height: 50px;
    align-content: center;
}

.sp-fleet-tire-pos {
    display: inline-flex;                     /* button default block — flex zorla */
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 24px;
    padding: 0;                               /* button default padding KALDIR (+ ortalama bug fix) */
    border: 1.5px solid var(--sp-border);
    border-radius: 50%;
    background-color: var(--sp-bg-card);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;                           /* + işareti tam ortada — typography baseline shift fix */
    cursor: default;
    font-family: inherit;
    color: var(--sp-text-muted);
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.sp-fleet-tire-pos.is-mounted {
    background-color: #10b981;
    border-color: #10b981;
    color: #fff;
}
.sp-fleet-tire-pos.is-empty {
    border-style: dashed;
    cursor: pointer;
    color: var(--sp-primary);
}
.sp-fleet-tire-pos.is-empty:hover {
    transform: scale(1.12);
    border-color: var(--sp-primary);
    background-color: rgba(245, 158, 11, 0.10);
}

/* ════════ Kart aks şeması (dingilli mini araç görünümü) — 2026-06-11 ════════
   Popup .sp-tire-svg'nin kompakt filo-kart versiyonu. Ayrı class prefix (sp-ftsvg-*)
   → popup .sp-tire-svg-pos DocOn handler'ıyla çakışmaz. Sabit yükseklikli kutu +
   viewBox meet → 2 dingilli de 5 dingilli de aynı kutuya sığar: araç çizimi dingil/
   lastik sayısına göre uzayıp kısalır ama kart boyutu HER ZAMAN aynı kalır. */
.sp-ftsvg-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 198px;                 /* sabit → tüm kartlarda şema alanı eşit (2026-06-11: +%50 — tıklama hedefi büyüdü) */
    padding: 6px;
    background-color: var(--sp-bg);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
}
.sp-ftsvg {
    display: block;
    height: 100%;
    width: auto;
    max-width: 195px;              /* az dingilli araç aşırı büyümesin (+%50) */
}

/* Dingil iskeleti — gövde merkez çizgisi + yatay aks + merkez nokta + aks etiketi */
.sp-ftsvg-spine,
.sp-ftsvg-axle {
    stroke: var(--sp-text-muted);
    stroke-width: 2;
    opacity: 0.6;
}
.sp-ftsvg-dot {
    fill: var(--sp-text-muted);
    opacity: 0.8;
}
.sp-ftsvg-label {
    fill: var(--sp-text-muted);
    font-size: 7px;
    font-weight: 700;
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
}

/* Pozisyon group (<g> içinde rect + opsiyonel + / K text) */
.sp-ftsvg-pos {
    transition: transform 0.14s ease;
}
.sp-ftsvg-pos rect {
    transition: stroke 0.14s ease, fill 0.14s ease, stroke-width 0.14s ease;
}

/* Boş pozisyon — kesik çizgi, tıklanabilir + simgesi */
.sp-ftsvg-pos.is-empty {
    cursor: pointer;
}
.sp-ftsvg-pos.is-empty rect {
    fill: var(--sp-bg-card);
    stroke: var(--sp-text-muted);
    stroke-width: 1.3;
    stroke-dasharray: 3 2;
}
.sp-ftsvg-pos.is-empty .sp-ftsvg-plus {
    fill: var(--sp-primary);
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
}
.sp-ftsvg-pos.is-empty:hover rect {
    fill: rgba(245, 158, 11, 0.14);
    stroke: var(--sp-primary);
    stroke-width: 1.8;
    stroke-dasharray: none;
}
.sp-ftsvg-pos.is-empty:hover {
    transform: translateY(-0.5px);
}

/* Takılı pozisyon — solid kontur, lifespan severity stroke (inline fill JS'ten) */
.sp-ftsvg-pos.is-mounted rect {
    stroke: var(--sp-text);
    stroke-width: 1.2;
    opacity: 0.92;
}
/* ⭐ 2026-06-11: 4 renk ömür stroke'u — sarı/turuncu/kırmızı (fill inline; stroke biraz koyu ton) */
.sp-ftsvg-pos.is-mounted[data-life="warn"] rect { stroke: #ca8a04; }
.sp-ftsvg-pos.is-mounted[data-life="low"]  rect { stroke: #ea580c; }
.sp-ftsvg-pos.is-mounted[data-life="crit"] rect { stroke: #b91c1c; stroke-width: 1.8; }

/* ⭐ 2026-06-11 (rev): Takılı lastiğe hover → lastik KENDİ rengini korur (fill EZİLMEZ → yeşil yeşil
   kalır). Önceki "hover'da kırmızı fill" KALDIRILDI — ömür severity renkleriyle (sarı/turuncu/kırmızı)
   çakışıp karışıklık yaratıyordu. Artık hover yalnız nötr koyu kenar + hafif yukarı + ortada beliren
   "söküp depoya iade" rozeti (beyaz dönüş oku). Tıklama → vehicle-tires.js openTireRemove (söküm modalı).
   data-action="remove" yalnız geçerli stok id'li takılı pozisyona eklenir → söküm yapılamayan lastikte rozet çıkmaz. */
.sp-ftsvg-pos.is-mounted[data-action="remove"] {
    cursor: pointer;
}
.sp-ftsvg-pos.is-mounted[data-action="remove"]:hover rect {
    stroke: var(--sp-text);
    stroke-width: 1.8;
    opacity: 1;
}
.sp-ftsvg-pos.is-mounted[data-action="remove"]:hover {
    transform: translateY(-0.5px);
}
.sp-ftsvg-pos.is-mounted[data-action="remove"]:hover .sp-tire-rmbadge {
    opacity: 1;
}

/* Kaplama lastik "K" mini etiketi (tekerlek sol üst köşe) */
.sp-ftsvg-k {
    fill: #fff;
    font-size: 7px;
    font-weight: 800;
    dominant-baseline: hanging;
    pointer-events: none;
    user-select: none;
}

/* Foot — toplam say + detay butonu */
.sp-fleet-tire-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
}
.sp-fleet-tire-count {
    font-size: 12px;
    color: var(--sp-text);
}
.sp-fleet-tire-count b {
    font-weight: 700;
    color: var(--sp-primary-dark);
}
.sp-fleet-tire-detail-btn {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 11.5px;
}
.sp-fleet-tire-detail-btn svg {
    width: 12px;
    height: 12px;
}

/* Pagination — kart grid altında basit sayfa kontrolleri (4 satır per page) */
.sp-fleet-tire-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px 4px;
    margin-top: 8px;
    border-top: 1px solid var(--sp-border);
}
.sp-fleet-tire-pagination-info {
    font-size: 12px;
    color: var(--sp-text-muted);
}
.sp-fleet-tire-pagination-info b {
    color: var(--sp-text);
    font-weight: 700;
}
.sp-fleet-tire-pagination button {
    padding: 6px 12px;
    font-size: 12px;
}
.sp-fleet-tire-pagination button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================================
   BAKIM/ONARIM (Maintenance) — Araç modali "Bakım" sub-tab + 2 modal (2026-06-08)
   Modül prefix: bm- (Bakım/Maintenance)
   Birincil yer: _SpModalVehicle.cshtml > data-vpane="bakim"
   Modaller: _SpModalMaintenance.cshtml (md=880), _SpModalMaintenanceLine.cshtml (sm=620)
   JS: vehicle-maintenance.js
   ============================================================================ */

/* ⭐ Bakım Hatırlatma Banner — vehicle modal > Bakım sub-tab özel.
   Severity hiyerarşisi: is-overdue (kırmızı), is-today (amber), is-soon (mavi), is-near (mor).
   4 tarih (Lastik/Yağ/Fren/Periyodik) — yalnız 30 gün içindekiler gözükür. */
.bm-alert-box {
    margin-bottom: 14px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    overflow: hidden;
    background-color: var(--sp-bg-card);
}
.bm-alert-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid var(--sp-border);
}
.bm-alert-head i { font-size: 14px; }
.bm-alert-head.is-overdue-head { background-color: rgba(239, 68, 68, 0.10); color: #dc2626; }
.bm-alert-head.is-today-head   { background-color: rgba(245, 158, 11, 0.12); color: #d97706; }
.bm-alert-head.is-info-head    { background-color: rgba(59, 130, 246, 0.10); color: #2563eb; }

.bm-alert-list {
    display: flex;
    flex-direction: column;
}
.bm-alert-item {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--sp-border-light, var(--sp-border));
    transition: background-color 0.15s ease;
}
.bm-alert-item:last-child { border-bottom: none; }
.bm-alert-item:hover { background-color: var(--sp-bg-input); }

.bm-alert-icon { font-size: 13px; text-align: center; }
.bm-alert-label { color: var(--sp-text); font-weight: 600; }
.bm-alert-date {
    color: var(--sp-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    padding-right: 8px;
}
.bm-alert-status {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
}

/* Severity renkler — item bazlı (sol bordür + status badge) */
.bm-alert-item.is-overdue { border-left: 3px solid #ef4444; }
.bm-alert-item.is-overdue .bm-alert-icon   { color: #dc2626; }
.bm-alert-item.is-overdue .bm-alert-status { background-color: rgba(239, 68, 68, 0.13); color: #dc2626; }

.bm-alert-item.is-today { border-left: 3px solid #f59e0b; }
.bm-alert-item.is-today .bm-alert-icon   { color: #d97706; }
.bm-alert-item.is-today .bm-alert-status { background-color: rgba(245, 158, 11, 0.15); color: #d97706; }

.bm-alert-item.is-soon { border-left: 3px solid #3b82f6; }
.bm-alert-item.is-soon .bm-alert-icon   { color: #2563eb; }
.bm-alert-item.is-soon .bm-alert-status { background-color: rgba(59, 130, 246, 0.13); color: #2563eb; }

.bm-alert-item.is-near { border-left: 3px solid #8b5cf6; }
.bm-alert-item.is-near .bm-alert-icon   { color: #7c3aed; }
.bm-alert-item.is-near .bm-alert-status { background-color: rgba(139, 92, 246, 0.13); color: #7c3aed; }

.bm-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.bm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sp-text);
}
.bm-chip i { font-size: 12px; color: var(--sp-text-muted); }
.bm-chip b, .bm-chip span { font-weight: 600; }

/* Kompakt KPI grid — sp-kpi-card değil, kendi mini kart sistemi (4 kart) */
.bm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 22px;  /* KPI bilgi blokundan aksiyon (toolbar) blokuna nefes geçişi */
}
.bm-kpi-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bm-kpi-card:hover {
    border-color: var(--sp-primary-light);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
.bm-kpi-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--sp-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.bm-kpi-icon svg { width: 16px; height: 16px; }
.bm-kpi-icon-emerald { background: linear-gradient(135deg, #10b981, #059669); }
.bm-kpi-icon-amber   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bm-kpi-icon-cyan    { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.bm-kpi-icon-rose    { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.bm-kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.bm-kpi-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    letter-spacing: 0.3px;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bm-kpi-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--sp-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bm-kpi-sub {
    font-size: 10.5px;
    color: var(--sp-text-muted);
    line-height: 1.3;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;  /* Toolbar → grid arası hafif ferah */
}

/* Status filter chip'leri — purchases.cshtml pur-type-chip pattern'iyle uyumlu */
.bm-status-chips {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}
.bm-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bm-status-chip:hover {
    color: var(--sp-text);
    border-color: var(--sp-primary-light);
}
.bm-status-chip.active {
    background-color: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
}
.bm-status-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--sp-bg-input);
    color: var(--sp-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.bm-status-chip.active .bm-status-chip-count {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.bm-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.bm-toolbar-actions .sp-icon-btn {
    width: 36px; height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bm-toolbar-actions .sp-icon-btn svg {
    width: 16px; height: 16px;
}

.bm-list-card { padding: 0; }
.bm-list-grid { min-height: 200px; }

.bm-empty-state {
    text-align: center;
    padding: 60px 20px;
}
.bm-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px; height: 80px;
    background-color: var(--sp-bg-input);
    border-radius: 50%;
    margin-bottom: 16px;
    color: var(--sp-text-muted);
}
.bm-empty-icon svg { width: 36px; height: 36px; }
.bm-empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--sp-text);
    margin: 0 0 6px;
}
.bm-empty-desc {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin: 0 auto 18px;
    max-width: 420px;
    line-height: 1.5;
}

.bm-mono {
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 12px;
    color: var(--sp-text);
}
.bm-mono-right {
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 12.5px;
    font-weight: 600;
}
.bm-muted { color: var(--sp-text-muted); font-size: 12px; }

.bm-chip-mini {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.bm-chip-mini.bm-op {
    background-color: rgba(121, 123, 242, 0.12);
    color: #5b5ef0;
}
.bm-chip-mini.bm-type-internal {
    background-color: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.bm-chip-mini.bm-type-external {
    background-color: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.bm-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}
.bm-status-pill.bm-status-ongoing {
    background-color: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}
.bm-status-pill.bm-status-waiting {
    background-color: rgba(245, 158, 11, 0.12);
    color: #d97706;
}
.bm-status-pill.bm-status-completed {
    background-color: rgba(16, 185, 129, 0.12);
    color: #059669;
}

/* ⭐ Bakım modalı — Maliyetler tab durum satırı (2026-06-12) */
.bm-ct-status {
    margin: 10px 0 4px 0;
}

/* ⭐ Bakım modalı — Garanti Takibi tab listesi (2026-06-12) */
.bm-warranty-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bm-warranty-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input);
}
.bm-warranty-row.is-ok { border-left-color: #10b981; }
.bm-warranty-row.is-expired { border-left-color: #ef4444; }
.bm-warranty-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bm-warranty-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}
.bm-warranty-field {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.bm-warranty-flabel {
    font-size: 12px;
    font-weight: 500;
    color: var(--sp-text-muted);
    white-space: nowrap;
}
.bm-warranty-flabel::after { content: ':'; }
.bm-warranty-fval {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text);
}

/* Maliyet popup — Parça / Hizmet Özeti chip'leri (Logitera maliyet popup'ı paritesi) */
.sp-mc-parts { margin-top: 12px; }
.sp-mc-parts-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}
.sp-mc-parts-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-mc-parts-chip {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sp-text);
    background-color: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    padding: 3px 10px;
}

/* Bakım Garanti Takibi — Bildirim ayarı kaydet butonu hizası */
.bm-notify-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
.bm-warranty-main { min-width: 0; }
.bm-warranty-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text);
}
.bm-warranty-meta {
    font-size: 11.5px;
    color: var(--sp-text-muted);
    margin-top: 2px;
}
.bm-warranty-status {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.bm-warranty-status.is-ok { background-color: rgba(16, 185, 129, 0.12); color: #059669; }
.bm-warranty-status.is-expired { background-color: rgba(239, 68, 68, 0.12); color: #dc2626; }

.bm-row-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

#SpModalMaintenance .sp-modal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 4px;
}
.bm-meta-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background-color: var(--sp-bg-input);
    color: var(--sp-text);
}
.bm-meta-chip.bm-mono {
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 11px;
}

.bm-locked-hint {
    background-color: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    color: #991b1b;
}
.bm-locked-hint svg {
    color: #dc2626;
}

/* Bakım Tipi standart sp-select kullanır — segment control pattern SP'de YOK.
   Kompaktlık uğruna pattern uydurulmaz; sp_ui_standards.md §4 TagHelper standardı korunur. */

.bm-cost-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px 10px;
    padding: 10px 12px;
    background-color: var(--sp-bg-input);
    border-radius: var(--sp-radius-sm);
    margin-bottom: 10px;
}
.bm-cost-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bm-cost-label {
    font-size: 11px;
    color: var(--sp-text-muted);
    font-weight: 500;
}
.bm-cost-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text);
    font-family: "JetBrains Mono", "Consolas", monospace;
}
.bm-cost-grand .bm-cost-value {
    color: var(--sp-primary-dark);
    font-size: 16px;
}

/* ⭐ Bakım modalı — Maliyetler tab "Maliyet Kartı" (Logitera cost info card muadili, 2026-06-12) */
.bm-cost-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
    margin-bottom: 10px;
    overflow: hidden;
}
.bm-cost-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--sp-border);
}
.bm-cost-card-row:last-child { border-bottom: none; }
.bm-cost-card-label {
    font-size: 12px;
    color: var(--sp-text-muted);
    font-weight: 500;
}
.bm-cost-card-value {
    font-size: 12.5px;
    color: var(--sp-text);
    font-weight: 600;
    text-align: right;
}
.bm-cost-card-value.bm-mono {
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 11.5px;
}
/* Toplam Tutar satırı — kart içinde vurgulu (Ara Toplam/KDV'den ayrışsın) */
.bm-cost-card-row-total { background-color: var(--sp-bg-input); }
.bm-cost-card-row-total .bm-cost-card-label { color: var(--sp-text); font-weight: 700; }
.bm-cost-card-row-total .bm-cost-card-value { font-size: 14px; font-weight: 700; }
/* Boş durum satırı margin yaratmasın (renderCostTab dolmadan önce) */
.bm-ct-status:empty { margin: 0; }

/* ⭐ Bakım modalı — pasif/salt-okunur input görünümü (Referans No disabled, Tamamlanma readonly) */
#SpModalMaintenance .sp-group input[disabled],
#SpModalMaintenance .sp-group input[readonly] {
    background-color: var(--sp-bg-input);
    color: var(--sp-text-muted);
    cursor: not-allowed;
}

.bm-lines-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.bm-line-add-btn {
    padding: 8px 14px;
    font-size: 12.5px;
}

.bm-lines-empty {
    text-align: center;
    padding: 36px 16px;
    background-color: var(--sp-bg-input);
    border-radius: var(--sp-radius-sm);
    color: var(--sp-text-muted);
}
.bm-lines-empty i {
    display: block;
    font-size: 32px;
    margin-bottom: 8px;
    color: var(--sp-text-muted);
    opacity: 0.5;
}
.bm-lines-empty strong {
    display: block;
    font-size: 14px;
    color: var(--sp-text);
    margin-bottom: 4px;
}
.bm-lines-empty span {
    font-size: 12px;
}

/* bm-modal-short — sp-modal-form modifier. Global max-height: 92vh (§7.2.5) standardı korunur,
   bu sadece bm modallarına scope'lu — bakım modali içeriği fazla olduğu için 78vh ile daha kompakt. */
.sp-modal-form.bm-modal-short {
    max-height: 78vh;
}

/* Parça tablosu içinde scroll — modal yüksekliği parça sayısına bağlı uzamasın.
   Tablo başlığı sticky kalır → kullanıcı her zaman kolon başlıklarını görür (best practice). */
.bm-lines-table-wrap {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
}
.bm-lines-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.bm-lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.bm-lines-table thead th {
    background-color: var(--sp-bg-input);
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--sp-border);
    text-align: left;
}
.bm-lines-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-text);
}
.bm-lines-table tbody tr:last-child td {
    border-bottom: none;
}
.bm-lines-table tbody tr:hover {
    background-color: var(--sp-bg-input);
}
.bm-col-num {
    text-align: right;
    font-family: "JetBrains Mono", "Consolas", monospace;
}
.bm-col-action {
    text-align: center;
}
.bm-cell-product {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bm-cell-total {
    font-weight: 700;
    color: var(--sp-primary-dark);
}
.bm-cell-warranty {
    font-size: 11.5px;
    color: var(--sp-text-muted);
}

/* ================================================================
   SP FLEET BAKIM L2 — Filo Bakım Genel Bakış (Lastik L2 paralel)
   Pattern: KPI grid (üst) + filtre barı + araç kart grid + pagination
   Kart içeriği: plaka + tip badge + son bakım/KM/maliyet + bu yıl maliyet + status chip'ler
   Tıklama: .sp-fleet-bm-card → araç popup + Bakım sub-tab aktif (drill-down)
   ================================================================ */

.sp-fleet-bm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0 4px 12px;
    border-bottom: 1px solid var(--sp-border);
    margin-bottom: 12px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
}
.sp-fleet-bm-legend-item { display: inline-flex; align-items: center; gap: 5px; }
/* ⭐ Legend başlık prefix (2026-06-10) — kart/grid view'da legend'ın hangi semantiğe ait
   olduğunu netleştirir. "Bakım durumu:" / "Tarih hücreleri:" gibi tek satırlık ayırıcı. */
.sp-fleet-bm-legend-title {
    font-weight: 600;
    color: var(--sp-text);
    margin-right: 4px;
    white-space: nowrap;
}
.sp-fleet-bm-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background-color: var(--sp-bg-input);
}
.sp-fleet-bm-dot.is-ongoing { background-color: #3b82f6; }
.sp-fleet-bm-dot.is-waiting { background-color: #f59e0b; }
.sp-fleet-bm-dot.is-completed { background-color: #10b981; }
.sp-fleet-bm-dot.is-none { background-color: #cbd5e1; }

.sp-fleet-bm-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    width: 100%;
}

.sp-fleet-bm-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--sp-text-muted);
    font-size: 13px;
}
.sp-fleet-bm-loading i { margin-right: 6px; color: var(--sp-primary); }

/* === KART === */
.sp-fleet-bm-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.sp-fleet-bm-card:hover {
    border-color: var(--sp-primary);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12);
    transform: translateY(-1px);
}
.sp-fleet-bm-card.is-no-records { opacity: 0.78; }
.sp-fleet-bm-card.is-no-records:hover { opacity: 1; }

/* === KART HEAD === */
.sp-fleet-bm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sp-fleet-bm-plate { font-size: 14.5px; font-weight: 700; color: var(--sp-text); line-height: 1.2; }
.sp-fleet-bm-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.sp-fleet-bm-status.is-ongoing { background-color: rgba(59, 130, 246, 0.12); color: #2563eb; }
.sp-fleet-bm-status.is-waiting { background-color: rgba(245, 158, 11, 0.14); color: #d97706; }
.sp-fleet-bm-status.is-completed { background-color: rgba(16, 185, 129, 0.12); color: #059669; }
.sp-fleet-bm-status.is-none { background-color: #f1f5f9; color: #64748b; }

/* === KART META === */
.sp-fleet-bm-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
}
.sp-fleet-bm-meta b { color: var(--sp-text); }

/* === ⭐ BAKIM BÖLGESİ — Periyodik ana + 3 sub (Lastik/Yağ/Fren)
   3-seviye severity: is-overdue (kırmızı) / is-today (amber) / is-future (yeşil) / is-none (gri)
   Hakan onayı 2026-06-09: hiyerarşik tasarım — ana bakım büyük, yan bakımlar küçük */
.sp-fleet-bm-zone {
    margin: 10px 0;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
    background-color: var(--sp-bg-card);
}
/* Periyodik (ana) — büyük üst satır, sol bordür severity rengi */
.sp-fleet-bm-zone-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-left: 4px solid transparent;
    background-color: var(--sp-bg-input);
}
.sp-fleet-bm-zone-head-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--sp-text);
}
.sp-fleet-bm-zone-head-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.sp-fleet-bm-zone-head-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--sp-text);
    font-variant-numeric: tabular-nums;
}
.sp-fleet-bm-zone-head-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
    white-space: nowrap;
}
/* Severity — head */
.sp-fleet-bm-zone-head.is-overdue { border-left-color: #ef4444; }
.sp-fleet-bm-zone-head.is-overdue .sp-fleet-bm-zone-head-status { background-color: rgba(239, 68, 68, 0.13); color: #dc2626; }
.sp-fleet-bm-zone-head.is-today   { border-left-color: #f59e0b; }
.sp-fleet-bm-zone-head.is-today   .sp-fleet-bm-zone-head-status { background-color: rgba(245, 158, 11, 0.15); color: #d97706; }
.sp-fleet-bm-zone-head.is-future  { border-left-color: #10b981; }
.sp-fleet-bm-zone-head.is-future  .sp-fleet-bm-zone-head-status { background-color: rgba(16, 185, 129, 0.13); color: #059669; }
.sp-fleet-bm-zone-head.is-none    { border-left-color: var(--sp-border); }
.sp-fleet-bm-zone-head.is-none    .sp-fleet-bm-zone-head-status { background-color: var(--sp-bg-input); color: var(--sp-text-muted); }

/* 3 sub bakım — alt 3-col grid, kompakt */
.sp-fleet-bm-zone-sub {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background-color: var(--sp-border);
    border-top: 1px solid var(--sp-border);
}
/* ⭐ 2026-06-10: Dorse 2 sub varyantı — Lastik + Fren (Yağ YOK, motor yok). */
.sp-fleet-tr-zone-sub-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-color: var(--sp-border);
    border-top: 1px solid var(--sp-border);
}
.sp-fleet-tr-zone-sub-2 .sp-fleet-bm-sub-item {
    background-color: var(--sp-bg-card);
}

/* ⭐ 2026-06-10: Dorse modal "Kiralamalar" sub-tab — kiralama atamaları kompakt tablosu */
.sp-tr-usage-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
}
.sp-tr-usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.sp-tr-usage-table thead th {
    text-align: left;
    padding: 8px 12px;
    background-color: var(--sp-bg-hover);
    color: var(--sp-text-muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-tr-usage-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-text);
    vertical-align: middle;
}
.sp-tr-usage-table tbody tr:last-child td { border-bottom: none; }
.sp-fleet-bm-sub-item {
    padding: 7px 9px;
    background-color: var(--sp-bg-card);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    border-top: 2px solid transparent;
}
.sp-fleet-bm-sub-head {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sp-text-muted);
}
.sp-fleet-bm-sub-icon { display: inline-flex; }
.sp-fleet-bm-sub-icon svg { width: 11px; height: 11px; }
.sp-fleet-bm-sub-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.sp-fleet-bm-sub-date {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sp-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-fleet-bm-sub-status {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Severity — sub */
.sp-fleet-bm-sub-item.is-overdue { border-top-color: #ef4444; }
.sp-fleet-bm-sub-item.is-overdue .sp-fleet-bm-sub-icon { color: #dc2626; }
.sp-fleet-bm-sub-item.is-overdue .sp-fleet-bm-sub-status { color: #dc2626; }
.sp-fleet-bm-sub-item.is-today   { border-top-color: #f59e0b; }
.sp-fleet-bm-sub-item.is-today   .sp-fleet-bm-sub-icon { color: #d97706; }
.sp-fleet-bm-sub-item.is-today   .sp-fleet-bm-sub-status { color: #d97706; }
.sp-fleet-bm-sub-item.is-future  { border-top-color: #10b981; }
.sp-fleet-bm-sub-item.is-future  .sp-fleet-bm-sub-icon { color: #059669; }
.sp-fleet-bm-sub-item.is-future  .sp-fleet-bm-sub-status { color: #059669; }
.sp-fleet-bm-sub-item.is-none    { border-top-color: var(--sp-border); }
.sp-fleet-bm-sub-item.is-none    .sp-fleet-bm-sub-date,
.sp-fleet-bm-sub-item.is-none    .sp-fleet-bm-sub-status { color: var(--sp-text-muted); font-style: italic; }

/* === KART İSTATİSTİK IZGARASI === */
.sp-fleet-bm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    background-color: var(--sp-bg-input);
    border-radius: var(--sp-radius-sm);
}
/* Periyodik artık üst bölgede → stat grid 3 stat'a düştü (mrCount > 0 durumu) */
.sp-fleet-bm-grid.sp-fleet-bm-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.sp-fleet-bm-grid.sp-fleet-bm-grid-1 { grid-template-columns: 1fr; }

/* ⭐ Liste (DxGrid) Görünümü — Bakım Tarih Hücreleri için 3-seviye severity renklendirme.
   Best practice (Linear/Jira pattern). Kart bakım bölgesi ile birebir aynı renk skalası.
   NOT: `!important` kullanımı sp_ui_standards §05'te DevExtreme override için onaylı (zebra alt
   satır rule'u `.dx-row-alt > td` bizim tinted bg'yi default override ediyordu). */
.sp-fleet-bm-grid-view td.bm-grid-cell-overdue {
    background-color: rgba(239, 68, 68, 0.10) !important;
    color: #dc2626 !important;
    font-weight: 600;
}
.sp-fleet-bm-grid-view td.bm-grid-cell-today {
    background-color: rgba(245, 158, 11, 0.13) !important;
    color: #d97706 !important;
    font-weight: 600;
}
.sp-fleet-bm-grid-view td.bm-grid-cell-future {
    background-color: rgba(16, 185, 129, 0.10) !important;
    color: #059669 !important;
    font-weight: 600;
}
.sp-fleet-bm-grid-view td.bm-grid-cell-none {
    color: var(--sp-text-muted) !important;
    font-style: italic;
}
/* Bakım tarih hücresinde gün durumu mini-text (alt satır) */
.bm-grid-date-status {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 1px;
}

/* ⭐ Durum sütunu — kart status chip'in grid karşılığı (4 değer: ongoing/waiting/completed/none) */
.bm-grid-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.bm-grid-status-pill.bm-status-ongoing   { background-color: rgba(59, 130, 246, 0.13); color: #2563eb; }
.bm-grid-status-pill.bm-status-waiting   { background-color: rgba(245, 158, 11, 0.15); color: #d97706; }
.bm-grid-status-pill.bm-status-completed { background-color: rgba(16, 185, 129, 0.13); color: #059669; }
.bm-grid-status-pill.bm-status-none      { background-color: var(--sp-bg-input); color: var(--sp-text-muted); }
/* Muayene grid'inde "Süresi Geçmiş" için kırmızı status pill */
.bm-grid-status-pill.bm-status-overdue-pill { background-color: rgba(239, 68, 68, 0.13); color: #dc2626; }

/* ⭐ "Son Muayene" birleşik hücresi — tarih + sonuç tek hücrede, KOMPLE hücre verdict rengine boyanır
   (bm-grid-cell-* tarih severity deseninin verdict karşılığı). !important: DevExtreme zebra `.dx-row-alt > td`
   override'ını yenmek için (§05 onaylı DevExtreme istisnası). */
.sp-fleet-bm-grid-view td.ins-cell-pass    { background-color: rgba(16, 185, 129, 0.10) !important; color: #059669 !important; }
.sp-fleet-bm-grid-view td.ins-cell-fail    { background-color: rgba(239, 68, 68, 0.10) !important; color: #dc2626 !important; }
.sp-fleet-bm-grid-view td.ins-cell-pending { background-color: rgba(245, 158, 11, 0.13) !important; color: #d97706 !important; }
.sp-fleet-bm-grid-view td.ins-cell-none    { color: var(--sp-text-muted) !important; font-style: italic; }

/* ⭐ Sayı-link — grid hücresinde tıklanabilir sayı (altı çizgili, amber/primary). Örn. Kusur sayısı → detay popup. */
.sp-link-count {
    color: var(--sp-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s ease;
}
.sp-link-count:hover { color: #d97706; }   /* koyu amber (protected accent) */

/* ⭐ Muayene Kusur Detayları modal (salt-okunur). Özet şeridi = STANDART .sp-tc-summary bileşeni
   (bakım/lastik maliyet modallarıyla ortak; flex space-between → tek satır). Burada yalnız
   muayene-sonucu için verdict renk modifier'ları eklenir (reusable, additive). */
.sp-tc-summary-value.is-pass    { color: #059669; }
.sp-tc-summary-value.is-fail    { color: #dc2626; }
.sp-tc-summary-value.is-pending { color: #d97706; }

/* Modern kusur listesi (özet altında) */
.sp-insdef-list { display: flex; flex-direction: column; gap: 8px; }
.sp-insdef-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-primary);
    border-radius: var(--sp-radius-md);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.sp-insdef-item:hover { box-shadow: var(--sp-shadow-sm); }
.sp-insdef-idx {
    flex: 0 0 24px; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 99px;
    background-color: rgba(245, 158, 11, 0.13);
    color: #d97706;
    font-size: 12px; font-weight: 700;
}
.sp-insdef-body { flex: 1 1 auto; min-width: 0; }
.sp-insdef-desc { font-size: 13.5px; font-weight: 600; color: var(--sp-text); line-height: 1.35; }
.sp-insdef-code { font-size: 11.5px; color: var(--sp-text-muted); margin-top: 3px; }
.sp-insdef-sev {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11.5px; font-weight: 700;
    white-space: nowrap;
}
.sp-insdef-sev.is-danger { background-color: rgba(239, 68, 68, 0.13); color: #dc2626; }
.sp-insdef-sev.is-warn   { background-color: rgba(245, 158, 11, 0.15); color: #d97706; }
.sp-insdef-sev.is-muted  { background-color: var(--sp-bg-input); color: var(--sp-text-muted); }

/* ⭐ Muayene sub-grid — 6 sub muayene (Egzoz / Takograf / MTV / ADR / K1-K2 / Yangın)
   Bakım'ın 3-col sub'undan farklı: 6 alan için 2 satır × 3 col düzeni
   Bakım .sp-fleet-bm-zone-sub class'ı 3 col; muayene için özel 6-col-2row variant */
.sp-fleet-ins-zone-sub-6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background-color: var(--sp-border);
    border-top: 1px solid var(--sp-border);
}
.sp-fleet-ins-zone-sub-6 .sp-fleet-bm-sub-item {
    padding: 7px 9px;
    background-color: var(--sp-bg-card);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    border-top: 2px solid transparent;
}

/* ============================================================================
   ⭐ FLEET DOCUMENTS — Accordion pattern (Linear/Notion style)
   Konum: Filo → Araçlar ve Çekiciler → "Evrak" L2 pane.
   Her araç = bir genişleyen kart. Body: Yüklü vs Eksik 2-col grid.
   ============================================================================ */
.sp-fleet-doc-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-fleet-doc-card {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background-color: var(--sp-bg-card);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sp-fleet-doc-card:hover { border-color: var(--sp-primary); }
.sp-fleet-doc-card.is-expanded { box-shadow: 0 2px 6px rgba(0,0,0,0.06); }

/* Card head — tıklanabilir buton (tüm satır) */
.sp-fleet-doc-card-head {
    display: grid;
    grid-template-columns: minmax(130px, auto) minmax(150px, 1fr) minmax(180px, auto) auto auto 24px;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background-color 0.15s ease;
}
.sp-fleet-doc-card-head:hover { background-color: var(--sp-bg-input); }

.sp-fleet-doc-plate {
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text);
    white-space: nowrap;
}
.sp-fleet-doc-meta {
    font-size: 12px;
    color: var(--sp-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Progress bar — yüklü tip oranı (visual) */
.sp-fleet-doc-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sp-fleet-doc-progress-bar {
    flex: 1;
    height: 6px;
    background-color: var(--sp-bg-input);
    border-radius: 99px;
    overflow: hidden;
    min-width: 110px;
}
.sp-fleet-doc-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.25s ease;
}
.sp-fleet-doc-progress-fill.is-complete { background-color: #10b981; }
.sp-fleet-doc-progress-fill.is-partial  { background-color: #f59e0b; }
.sp-fleet-doc-progress-fill.is-empty    { background-color: #ef4444; }
.sp-fleet-doc-progress-fill.is-none     { background-color: var(--sp-border); }
.sp-fleet-doc-progress-text {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Status pill */
.sp-fleet-doc-status-pill {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
}
.sp-fleet-doc-status-pill.is-complete { background-color: rgba(16, 185, 129, 0.13); color: #059669; }
.sp-fleet-doc-status-pill.is-partial  { background-color: rgba(245, 158, 11, 0.15); color: #d97706; }
.sp-fleet-doc-status-pill.is-empty    { background-color: rgba(239, 68, 68, 0.13); color: #dc2626; }
.sp-fleet-doc-status-pill.is-none     { background-color: var(--sp-bg-input); color: var(--sp-text-muted); }

.sp-fleet-doc-files-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    white-space: nowrap;
}
.sp-fleet-doc-files-count i { font-size: 11px; }

.sp-fleet-doc-chevron {
    width: 18px;
    height: 18px;
    color: var(--sp-text-muted);
    transition: transform 0.2s ease;
}
.sp-fleet-doc-card.is-expanded .sp-fleet-doc-chevron { transform: rotate(180deg); }

/* Card body — Yüklü vs Eksik 2-col */
.sp-fleet-doc-card-body {
    border-top: 1px solid var(--sp-border);
    background-color: var(--sp-bg-input);
    padding: 14px 16px;
}
.sp-fleet-doc-body-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 900px) {
    .sp-fleet-doc-body-cols { grid-template-columns: 1fr; }
}
.sp-fleet-doc-col {
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
}
.sp-fleet-doc-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-text);
    border-bottom: 1px solid var(--sp-border);
    background-color: var(--sp-bg-input);
}
.sp-fleet-doc-col-dot {
    width: 10px; height: 10px; border-radius: 99px;
}
.sp-fleet-doc-col-dot.is-uploaded { background-color: #10b981; }
.sp-fleet-doc-col-dot.is-missing  { background-color: var(--sp-border); }
.sp-fleet-doc-col-list {
    max-height: 280px;
    overflow-y: auto;
}
.sp-fleet-doc-item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--sp-border-light, var(--sp-border));
}
.sp-fleet-doc-item:last-child { border-bottom: none; }
.sp-fleet-doc-item-check {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.sp-fleet-doc-item.is-uploaded { color: var(--sp-text); }
.sp-fleet-doc-item.is-uploaded .sp-fleet-doc-item-check { color: #059669; }
.sp-fleet-doc-item.is-missing { color: var(--sp-text-muted); }
.sp-fleet-doc-item.is-missing .sp-fleet-doc-item-check { color: var(--sp-text-muted); }
.sp-fleet-doc-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-fleet-doc-item-count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
    background-color: rgba(16, 185, 129, 0.13);
    color: #059669;
}
.sp-fleet-doc-empty-col {
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--sp-text-muted);
    font-style: italic;
}

.sp-fleet-doc-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}
.sp-fleet-doc-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sp-fleet-bm-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-fleet-bm-stat-label {
    font-size: 10.5px;
    color: var(--sp-text-muted);
    letter-spacing: 0.3px;
    line-height: 1.3;
}
.sp-fleet-bm-stat-value {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-fleet-bm-stat-value.is-cost { color: #d97706; }
.sp-fleet-bm-stat-value.is-empty { color: var(--sp-text-muted); font-weight: 500; }

/* ⭐ Tarih + KM ayrı satırlarda — dar grid hücresinde "08.06.2026 · 302.500 km" sığmıyordu.
   Tarih ana değer (üstte), KM küçük alt-metin (altta) — Lastik kart paralel paterni. */
.sp-fleet-bm-stat-sub {
    font-size: 10.5px;
    color: var(--sp-text-muted);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
/* ⭐ Periyodik bakım statüsü — alt-metin renkleri:
   - is-overdue: gecikmiş gün sayısı (kırmızı)
   - is-today:   bugün (amber primary) */
.sp-fleet-bm-stat-sub.is-overdue { color: #dc2626; font-weight: 600; }
.sp-fleet-bm-stat-sub.is-today   { color: #d97706; font-weight: 600; }

/* === ⭐ Pill Chip Filtre Bar — "Periyodik Bakım Tarihi"ne göre (Tümü/Geçmiş/Bugün/Bu Hafta/Bu Ay)
   Pattern: Satın Alma'daki pur-type-chips ile birebir aynı — content-card DIŞINDA, ayrı satır olarak konumlandırılır.
   Tek renk + aktif olunca turuncu (amber primary). === */
.sp-fleet-bm-due-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 8px 0 12px 0;
    padding: 6px 12px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
}
/* ⭐ Card içi kompakt varyant (2026-06-12) — content-card body içinde "kutu içinde kutu" görünmesin:
   border/background kaldırılır, üst margin yok, alt margin ile grid'den ayrılır (gridin üstünde sırıtmaz). */
.sp-fleet-bm-due-chips.is-incard {
    margin: 0 0 10px 0;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
}
/* ⭐ Chip bar başlık label — kullanıcıya filtrenin neye göre çalıştığını anında gösterir.
   Pattern: pur-type-chips-label (Satın Alma) ile birebir aynı stil. */
.sp-fleet-bm-due-chips-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sp-text-muted);
    margin-right: 4px;
    white-space: nowrap;
}
.sp-fleet-bm-due-chips-label svg {
    width: 14px;
    height: 14px;
    color: var(--sp-primary);
    flex-shrink: 0;
}
.sp-fleet-bm-due-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--sp-border);
    border-radius: 99px;
    background-color: var(--sp-bg-input);
    color: var(--sp-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    line-height: 1.4;
}
.sp-fleet-bm-due-chip:hover {
    border-color: var(--sp-primary);
    transform: translateY(-1px);
}
.sp-fleet-bm-due-chip svg { width: 13px; height: 13px; }

/* Active state — tek renk: amber primary (Satın Alma pur-type-chip ile uyumlu) */
.sp-fleet-bm-due-chip.active {
    background-color: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
}

/* Sayım badge — sadece inactive (koyu-saydam) ve active (beyaz-saydam) */
.sp-fleet-bm-due-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 99px;
    background-color: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    margin-left: 2px;
}
.sp-fleet-bm-due-chip.active .sp-fleet-bm-due-chip-count {
    background-color: rgba(255, 255, 255, 0.25);
}

/* === KART FOOT === */
.sp-fleet-bm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sp-fleet-bm-badges { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.sp-fleet-bm-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 99px;
    background-color: var(--sp-bg-input);
    color: var(--sp-text-muted);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
}
.sp-fleet-bm-badge.is-ongoing { background-color: rgba(59, 130, 246, 0.12); color: #2563eb; }
.sp-fleet-bm-badge.is-waiting { background-color: rgba(245, 158, 11, 0.14); color: #d97706; }
.sp-fleet-bm-badge.is-completed { background-color: rgba(16, 185, 129, 0.12); color: #059669; }
.sp-fleet-bm-detail-btn {
    padding: 5px 11px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
}
.sp-fleet-bm-detail-btn svg { width: 12px !important; height: 12px !important; }

/* === Pagination — Lastik paterni === */
.sp-fleet-bm-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 8px 4px 0;
    border-top: 1px solid var(--sp-border);
}
.sp-fleet-bm-pagination-info {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: var(--sp-text-muted);
}
.sp-fleet-bm-pagination-info b { color: var(--sp-text); }
.sp-fleet-bm-pagination button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 13px !important;
    font-size: 12px !important;
}
.sp-fleet-bm-pagination button[disabled] { opacity: 0.4; cursor: not-allowed; }
.sp-fleet-bm-pagination button svg { width: 12px; height: 12px; }

/* ════════════════════════════════════════════════════════════════════════
   FLEET BAKIM/MUAYENE — Severity Dot modifier'ları (LEGEND için)
   Muayene L2 legend'ında (Dashboard.cshtml) inline `background:#ef4444` vb.
   yerine bu modifier'lar kullanılır. sp_ui_standards §3 + §15 + Logitera
   global hook uyumu (background shorthand yasak; sadece background-color).
   3-seviye severity (kart cell template'lerinde de aynı isim — tutarlılık).
   ════════════════════════════════════════════════════════════════════════ */
.sp-fleet-bm-dot.is-overdue { background-color: #ef4444; }
.sp-fleet-bm-dot.is-today   { background-color: #f59e0b; }
.sp-fleet-bm-dot.is-future  { background-color: #10b981; }

/* Loading/empty state'inin hata varyantı — sp-fleet-bm-loading'in is-error modifier'ı.
   Önceden JS inline style="color:#ef4444" kullanıyordu; semantik sınıfa taşındı. */
.sp-fleet-bm-loading.is-error { color: #dc2626; }
.sp-fleet-bm-loading.is-error i { color: #dc2626; }

/* Content card header'da sağda asılı hint metni — Evrak L2'de "Kart başlığına tıklayarak..."
   gibi yardımcı metin için. Önceden inline style="margin-left:auto;font-size:..." vardı. */
.sp-content-card-hint.is-right {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--sp-text-muted);
    font-weight: 400;
}

/* Bakım modal'ında Tamamlanma tarihi field'ında "readonly UX" görsel ipucu
   (kullanıcı bunu "Tamamla" butonuyla doldurur — manuel girişi engelle).
   sp-field TagHelper readonly="true" zaten görsel olarak kilitler; alt hint metni
   tarayıcıya yardımcı. Inline style yerine semantik sınıf. */
.bm-finished-readonly-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--sp-text-muted);
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════════
   LASTİK KART — "+ X boş pozisyon" CTA metni (öneri 2)
   Mini şemanın hemen üstünde, status chip'in altında. Kullanıcı kart bakışında
   "buradan ne yapayım"ı anlar. Status'a göre renk/ton değişir.
   ════════════════════════════════════════════════════════════════════════ */
.sp-fleet-tire-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin: -2px 0 4px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 6px;
    background-color: var(--sp-bg-hover);
    color: var(--sp-text-muted);
}
.sp-fleet-tire-cta svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.sp-fleet-tire-cta.is-action {
    background-color: rgba(245, 158, 11, 0.10);
    color: var(--sp-primary-dark);
}
.sp-fleet-tire-cta.is-urgent {
    background-color: rgba(239, 68, 68, 0.10);
    color: #dc2626;
}
.sp-fleet-tire-cta.is-success {
    background-color: rgba(16, 185, 129, 0.10);
    color: #059669;
}

/* ════════════════════════════════════════════════════════════════════════
   LASTİK POZİSYON — Kaplama (K) mini badge (öneri 4)
   Pozisyon dot'unun sağ üst köşesinde 8x8 mor rozet. Filo bakışında kaplama
   lastik dağılımını tek bakışta görmek için. Yalnız is-mounted pozisyonlarda.
   ════════════════════════════════════════════════════════════════════════ */
.sp-fleet-tire-pos { position: relative; }   /* badge için anchor (mevcut .sp-fleet-tire-pos eklemese de güvenli additif) */
.sp-fleet-tire-pos-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 0 0 1.5px var(--sp-bg-card);
    pointer-events: none;   /* dot click'i yutmasın */
}
.sp-fleet-tire-pos-badge.is-retread { background-color: #8b5cf6; }

/* ════════════════════════════════════════════════════════════════════════
   BAKIM MODAL — Geçmiş Bağlam stripe (öneri 3)
   Modal head'in hemen altında, body'den önce. Tedarikçi modalı açtığında bu
   aracın son bakım bağlamını tek bakışta görür. "Bu araç için ilk kayıt" /
   "Son bakım 40 gün önce" gibi tek satır chip.
   ════════════════════════════════════════════════════════════════════════ */
.bm-history-context {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    margin: 0 0 10px;
    padding: 8px 12px;
    background-color: rgba(121, 123, 242, 0.06);
    border: 1px solid rgba(121, 123, 242, 0.16);
    border-radius: 6px;
    font-size: 12px;
    color: var(--sp-text);
}
.bm-history-context.is-first {
    background-color: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.20);
    color: #059669;
}
.bm-history-context-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: #797bf2;
}
.bm-history-context.is-first .bm-history-context-icon { color: #059669; }
.bm-history-context-icon svg { width: 14px; height: 14px; }
.bm-history-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--sp-text);
    white-space: nowrap;
}
.bm-history-context-chip b { font-weight: 600; }
.bm-history-context-chip.is-muted { color: var(--sp-text-muted); }

/* ════════════════════════════════════════════════════════════════════════
   VEHICLE MODAL LASTİKLER SUB-TAB — Araç Şeması SVG (Logitera DrawVehicleTireLocations
   mantığına benzer, ama TIKLANABILIR + HOVER ipuçlu + boş pozisyonda + simgesi).
   - axleData backend'den gelir → SVG dingil + tekerlek grupları render edilir
   - Boş pozisyon: kesik çizgi (dashed) gri kontur + + simgesi
   - Takılı pozisyon: solid çizgi, lifespan'a göre renkli (yeşil → amber → kırmızı)
   - Hover (boş): kesik çizgi düz olur, amber vurgu, + simgesi büyür
   - Hover (mounted): mor (#797bf2) vurgu, transform translateY(-1px)
   ════════════════════════════════════════════════════════════════════════ */
.sp-tire-svg-wrap {
    display: flex;
    flex-direction: column;   /* ⭐ 2026-06-10: hint metni şemanın üstünde ortalı */
    justify-content: flex-start;
    align-items: center;       /* ⭐ Şema tam ortada (yatay) */
    gap: 10px;
    padding: 16px 12px 20px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    overflow: auto;
    min-height: 220px;
}
.sp-tire-svg {
    display: block;
    max-width: 360px;
    width: 100%;
    height: auto;
}

/* Aks (yatay çizgi + merkez nokta) — sade siyah */
.sp-tire-svg-axle-line {
    stroke: var(--sp-text-muted);
    stroke-width: 3;
    opacity: 0.72;
}
.sp-tire-svg-axle-center {
    stroke: var(--sp-text-muted);
    stroke-width: 3;
    opacity: 0.72;
}
.sp-tire-svg-axle-dot {
    fill: var(--sp-text-muted);
    opacity: 0.85;
}
.sp-tire-svg-axle-label {
    fill: var(--sp-text-muted);
    font-size: 9px;
    font-weight: 600;
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
}

/* Pozisyon group — tekerlek + opsiyonel + simgesi.
   <g class="sp-tire-svg-pos {is-empty | is-mounted}"> içinde rect + (boşsa) text. */
.sp-tire-svg-pos {
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.sp-tire-svg-pos rect {
    transition: stroke 0.15s ease, stroke-width 0.15s ease, fill 0.15s ease, stroke-dasharray 0.15s ease, filter 0.15s ease;
}

/* Boş pozisyon — kesik çizgi (dashed) gri kontur.
   ⭐ 2026-06-10 fix: fill #ffffff (içerik açık → siyahlık algısı yok), dasharray 5 3 (daha belirgin),
   stroke koyu gri (kontrast), opacity tam (1) → dashed çizgi net görünür. */
.sp-tire-svg-pos.is-empty rect {
    fill: #ffffff;
    stroke: var(--sp-text-muted);
    stroke-width: 1.6;
    stroke-dasharray: 5 3;
    opacity: 1;
}
.sp-tire-svg-pos.is-empty .sp-tire-svg-plus {
    fill: var(--sp-text-muted);
    font-size: 16px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
    transition: font-size 0.15s ease, fill 0.15s ease;
}

/* Hover (boş) — kesik çizgi DÜZ olur, amber vurgu, + büyür */
.sp-tire-svg-pos.is-empty:hover rect {
    fill: rgba(245, 158, 11, 0.14);
    stroke: var(--sp-primary);
    stroke-width: 2;
    stroke-dasharray: none;   /* kesik çizgi → düz */
    opacity: 1;
    filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.28));
}
.sp-tire-svg-pos.is-empty:hover .sp-tire-svg-plus {
    fill: var(--sp-primary-dark);
    font-size: 20px;
}
.sp-tire-svg-pos.is-empty:hover {
    transform: translateY(-1px);
}

/* Takılı pozisyon — solid kontur. Lifespan rengi rect.fill'e inline atanır (JS).
   Ek modifier'lar lifespan severity için (data-life="ok|warn|crit|dead"). */
.sp-tire-svg-pos.is-mounted rect {
    stroke: var(--sp-text);
    stroke-width: 1.5;
    stroke-dasharray: none;
    opacity: 0.92;
}
/* ⭐ 2026-06-11: 4 renk ömür stroke'u (liste şemasıyla aynı) */
.sp-tire-svg-pos.is-mounted[data-life="warn"] rect { stroke: #ca8a04; }
.sp-tire-svg-pos.is-mounted[data-life="low"]  rect { stroke: #ea580c; }
.sp-tire-svg-pos.is-mounted[data-life="crit"] rect { stroke: #b91c1c; stroke-width: 2; }

/* ⭐ Takılı lastiğe hover → lastik KENDİ rengini korur (fill EZİLMEZ → yeşil yeşil kalır).
   Kırmızı fill KALDIRILDI (ömür severity renkleriyle çakışıyordu) — L2 kart şemasıyla AYNI yapı.
   Hover yalnız nötr koyu kenar + hafif yukarı + ortada "sök/iade" rozeti (beyaz ok). */
.sp-tire-svg-pos.is-mounted:hover rect {
    stroke: var(--sp-text);
    stroke-width: 2.5;
    opacity: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.30));
}
.sp-tire-svg-pos.is-mounted:hover {
    transform: translateY(-1px);
}

/* Popup şeması — hover'da sök/iade rozetini göster (ortak .sp-tire-rmbadge, L2 ile aynı). */
.sp-tire-svg-pos.is-mounted:hover .sp-tire-rmbadge {
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   Sök/iade rozeti — POPUP (.sp-tire-svg) + L2 (.sp-ftsvg) şemalarında ORTAK.
   Hover'da takılı lastik üstünde beliren küçük KOYU rozet + beyaz DÖNÜŞ oku
   (Feather rotate-ccw = "söküp depoya iade"). Lastiğin fill'ini EZMEZ → lastik
   kendi rengini (yeşil/amber/kırmızı) korur, rozet ortada belirir.
   ════════════════════════════════════════════════════════════════════════ */
.sp-tire-rmbadge {
    opacity: 0;
    pointer-events: none;                /* tıklama parent <g>'ye gitsin */
    transition: opacity 0.14s ease;
    /* Arka plan BOYANMAZ — ikonun her ömür renginde okunması için hafif koyu kenar (drop-shadow). */
    filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, 0.70));
}
.sp-tire-rmbadge-ring {
    fill: none;                          /* çerçeve — içi boş, beyaz kontur (biraz kalın → belirgin) */
    stroke: #ffffff;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;   /* ölçekten bağımsız net çerçeve */
}
.sp-tire-rmbadge-arrow {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.6;                    /* biraz kalın → ok daha belirgin */
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;   /* ölçekten bağımsız net ok */
}

/* Takılı lastik kartı — pozisyondan scroll edip vurgulu highlight pattern */
.sp-tire-card.is-highlighted {
    box-shadow: 0 0 0 2px var(--sp-primary), 0 4px 14px rgba(245, 158, 11, 0.24);
    border-color: var(--sp-primary) !important;
    animation: spTireCardPulse 1.6s ease-out 1;
}
@keyframes spTireCardPulse {
    0%   { background-color: rgba(245, 158, 11, 0.14); }
    100% { background-color: var(--sp-bg-card); }
}

/* Şema legend (mevcut .sp-tire-diagram-legend genişletmesi — additif) */
.sp-tire-svg-legend-hint {
    /* ⭐ 2026-06-10: SVG ŞEMASININ ÜSTÜNDE ortalı (flex column wrap içinde önce render edilir). */
    width: 100%;
    margin: 0 0 4px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
    font-style: italic;
    text-align: center;
    line-height: 1.4;
}

/* ⭐ 2026-06-10: Vehicle modal Lastikler sub-tab head — legend solda (toggle 2026-06-11'de kaldırıldı) */
.sp-tire-diagram-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* ════════════════════════════════════════════════════════════════════════
   PORTAL STANDART — Pane-içi nested tab deseni (sp-tiretab*) · 2026-06-11.
   Bir .sp-vpane / kart içinde ikinci seviye sekme gerektiğinde kullanılır.
   8 ana modal tab'ının .sp-modal-subtab sınıflarıyla ÇAKIŞMAMASI için ayrı prefix.
   İlk kullanım: Vehicle modal → Lastikler → Takılı Lastikler / Lastik Hareketleri / Maliyetler.
   Tema: amber primary (var(--sp-primary)) — portal renk paletiyle uyumlu.
   ════════════════════════════════════════════════════════════════════════ */
.sp-tiretabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--sp-border);
    margin-bottom: 12px;
}
.sp-tiretab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;        /* parent border-bottom çizgisini ez — çift çizgi olmasın */
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.sp-tiretab svg { width: 14px; height: 14px; }
.sp-tiretab:hover { color: var(--sp-text); }
/* Kilitli sekme (yeni-ekleme modunda ikincil sekmeler) — soluk + tıklanamaz. */
.sp-tiretab:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.sp-tiretab.active {
    color: var(--sp-primary-dark);
    border-bottom-color: var(--sp-primary);
}
.sp-tiretab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--sp-bg-input);
    color: var(--sp-text-muted);
    font-size: 11px;
    font-weight: 700;
}
.sp-tiretab.active .sp-tiretab-count {
    background-color: var(--sp-primary);
    color: #fff;
}
.sp-tiretab-pane { display: none; }
.sp-tiretab-pane.active { display: block; animation: spFadeIn 0.2s ease; }
/* Pane içi form satırları arası dikey ritim — modal-form-body'nin 13px gap'i nested
   pane'e inmiyor; .sp-row'lar bitişikti (RetreadJob "Genel" formu cramped görünüyordu).
   SendToRetread'de rows body'nin direct child'ı olduğu için zaten boşluklu. */
.sp-tiretab-pane > .sp-row + .sp-row { margin-top: 13px; }

/* Bildirimler sekmesi — bölümler (KPI kartları / açıklama kutusu / e-posta input / buton) arası
   standart dikey boşluk. Eskiden .sp-docs-hint ↔ input ↔ buton dip dibe duruyordu (yalnız
   .sp-row + .sp-row kuralı vardı). Yalnız bildirim pane'ine scope'lu — diğer pane'ler etkilenmez. */
.sp-tiretab-pane[data-rspane="bildirim"] > * + * { margin-top: 14px; }

/* Kaplama İş Emri modalı (#SpModalRetreadJob) — pane içi standart dikey ritim (13px).
   Global `.sp-row + .sp-row` kuralı sp-mt-info / sp-docs-divider / nested form gibi sp-row
   OLMAYAN kardeşleri kaçırıyordu → "Cariye İşle (Fatura Oluştur)" başlığı, inputları ve butonu
   birbirine yapışık duruyordu. Bildirim pane'iyle aynı kanıtlı `> * + *` deseni; modal ID'sine
   scope'lu (SP konvansiyonu: #SpModalMaintenance/#SpModalSendToRetread gibi). Yazma butonları
   footer'a taşındığı için pane içi cramped aksiyon kalmadı. */
#SpModalRetreadJob .sp-tiretab-pane > * + * { margin-top: 13px; }
#SpModalRetreadJob #rjBillForm > * + * { margin-top: 13px; }   /* nested "Cariye İşle" formu: divider ↔ inputlar */

/* ════════════════════════════════════════════════════════════════════════
   FİLO LASTİK L2 — Treeview (Liste) görünümü (2026-06-10).
   Araç satırı + tıklayınca açılan takılı lastik detay tablosu.
   Felsefe: kart view "filo bakışı", treeview "detay içinde detay".
   ════════════════════════════════════════════════════════════════════════ */
.sp-fleet-tire-tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-fleet-tire-tree-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--sp-text-muted);
    font-size: 13px;
}

/* Araç satırı (collapsed/expanded) */
.sp-fleet-tire-tree-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.sp-fleet-tire-tree-row:hover {
    border-color: var(--sp-primary);
    background-color: var(--sp-bg-hover);
}
.sp-fleet-tire-tree-row.is-expanded {
    border-radius: var(--sp-radius) var(--sp-radius) 0 0;
    border-bottom-color: var(--sp-border);
    background-color: rgba(245, 158, 11, 0.06);
}

/* Chevron — expand/collapse oklu işaret */
.sp-fleet-tire-tree-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--sp-text-muted);
    transition: transform 0.18s ease, color 0.15s ease;
}
.sp-fleet-tire-tree-row.is-expanded .sp-fleet-tire-tree-chevron {
    transform: rotate(90deg);
    color: var(--sp-primary-dark);
}

/* Araç satırı içerikleri: plaka · tip/model · KM · takılı/toplam · status pill */
.sp-fleet-tire-tree-plate {
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text);
    min-width: 110px;
    flex-shrink: 0;
}
.sp-fleet-tire-tree-meta {
    flex: 1;
    font-size: 12px;
    color: var(--sp-text-muted);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.sp-fleet-tire-tree-meta b { color: var(--sp-text); font-weight: 600; }
.sp-fleet-tire-tree-status {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background-color: var(--sp-bg-hover);
    color: var(--sp-text-muted);
}
.sp-fleet-tire-tree-status.is-full    { background-color: rgba(16, 185, 129, 0.13); color: #059669; }
.sp-fleet-tire-tree-status.is-partial { background-color: rgba(245, 158, 11, 0.13); color: var(--sp-primary-dark); }
.sp-fleet-tire-tree-status.is-zero    { background-color: rgba(239, 68, 68, 0.13); color: #dc2626; }
.sp-fleet-tire-tree-status.is-empty   { background-color: var(--sp-bg-hover); color: var(--sp-text-muted); }

/* Detay paneli — araç satırı altında, expanded olunca açılır */
.sp-fleet-tire-tree-detail {
    display: none;
    padding: 0;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-top: none;
    border-radius: 0 0 var(--sp-radius) var(--sp-radius);
    overflow: hidden;
}
.sp-fleet-tire-tree-row.is-expanded + .sp-fleet-tire-tree-detail {
    display: block;
}

/* Detay tablosu (kompakt) */
.sp-fleet-tire-tree-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.sp-fleet-tire-tree-table thead th {
    text-align: left;
    padding: 8px 12px;
    background-color: var(--sp-bg-hover);
    color: var(--sp-text-muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-fleet-tire-tree-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-text);
    vertical-align: middle;
}
.sp-fleet-tire-tree-table tbody tr:last-child td { border-bottom: none; }
.sp-fleet-tire-tree-table tbody tr.is-empty-row td {
    color: var(--sp-text-muted);
    background-color: rgba(245, 158, 11, 0.03);
}
.sp-fleet-tire-tree-table tbody tr.is-empty-row td.col-pos {
    font-style: italic;
}

/* Sütun stilleri */
.sp-fleet-tire-tree-table .col-pos    { width: 130px; font-weight: 600; }
.sp-fleet-tire-tree-table .col-tire   { min-width: 180px; }
.sp-fleet-tire-tree-table .col-serial { width: 140px; font-family: monospace; font-size: 11.5px; color: var(--sp-text-muted); }
.sp-fleet-tire-tree-table .col-status { width: 110px; }
.sp-fleet-tire-tree-table .col-km     { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.sp-fleet-tire-tree-table .col-life   { width: 130px; }
.sp-fleet-tire-tree-table .col-action { width: 90px; text-align: right; }

/* Lastik durumu chip (Yeni/Kullanılmış/Kaplama/Hasarlı) */
.sp-fleet-tire-status-chip {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 10px;
    background-color: var(--sp-bg-hover);
    color: var(--sp-text-muted);
    white-space: nowrap;
}
.sp-fleet-tire-status-chip.is-new      { background-color: rgba(59, 130, 246, 0.13); color: #2563eb; }
.sp-fleet-tire-status-chip.is-used     { background-color: rgba(245, 158, 11, 0.13); color: var(--sp-primary-dark); }
.sp-fleet-tire-status-chip.is-retread  { background-color: rgba(139, 92, 246, 0.13); color: #7c3aed; }
.sp-fleet-tire-status-chip.is-damaged  { background-color: rgba(239, 68, 68, 0.13); color: #dc2626; }

/* Ömür progress bar (sade) */
.sp-fleet-tire-life {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sp-fleet-tire-life-bar {
    flex: 1;
    height: 6px;
    background-color: var(--sp-bg-hover);
    border-radius: 3px;
    overflow: hidden;
}
.sp-fleet-tire-life-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
/* ⭐ 2026-06-11: 4 renk ömür skalası — yeşil(>50) · sarı(25-50) · turuncu(10-25) · kırmızı(≤10) */
.sp-fleet-tire-life-fill.is-ok    { background-color: #10b981; }
.sp-fleet-tire-life-fill.is-warn  { background-color: #eab308; }
.sp-fleet-tire-life-fill.is-low   { background-color: #f97316; }
.sp-fleet-tire-life-fill.is-crit  { background-color: #ef4444; }
.sp-fleet-tire-life-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text);
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sp-fleet-tire-life-pct.is-muted { color: var(--sp-text-muted); }

/* Detay tablosu içindeki + Tak / Sök mini butonları */
.sp-fleet-tire-tree-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    background-color: rgba(245, 158, 11, 0.10);
    color: var(--sp-primary-dark);
    border-color: rgba(245, 158, 11, 0.30);
}
.sp-fleet-tire-tree-btn:hover {
    background-color: rgba(245, 158, 11, 0.18);
    border-color: var(--sp-primary);
}
.sp-fleet-tire-tree-btn.is-detay {
    background-color: rgba(121, 123, 242, 0.08);
    color: #5b5dd6;
    border-color: rgba(121, 123, 242, 0.30);
}
.sp-fleet-tire-tree-btn.is-detay:hover {
    background-color: rgba(121, 123, 242, 0.15);
    border-color: #797bf2;
}

/* ════════════════════════════════════════════════════════════════════════
   GENEL BAKIŞ — 2026-06-10 yeniden tasarım (görsel kompozisyon + cleanup)
   - Health skor severity class'ları (is-good / is-warn / is-bad / is-na)
   - Health trend badge (geçen aya göre değişim)
   - 3 kart visual grid: Filo Mülkiyet (stacked bar) + Belge Durumu (stacked bar) + Bu Hafta Pulse
   - Aksiyon kategori chip (Tümü / Araç&Dorse / Sürücü)
   ════════════════════════════════════════════════════════════════════════ */

/* SAĞLIK SKORU — severity class modifier'lar (.css('color') yerine) */
.fo-health-num.is-good,
.fo-sub-num.is-good { color: #10b981; }
.fo-health-num.is-warn,
.fo-sub-num.is-warn { color: #f59e0b; }
.fo-health-num.is-bad,
.fo-sub-num.is-bad { color: #ef4444; }
.fo-health-num.is-na,
.fo-sub-num.is-na { color: var(--sp-text-muted); }

/* SAĞLIK SKOR TREND badge — geçen aya göre değişim */
.fo-health-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    background-color: var(--sp-bg-hover);
    color: var(--sp-text-muted);
    white-space: nowrap;
    vertical-align: middle;
}
.fo-health-trend.is-up {
    background-color: rgba(16, 185, 129, 0.13);
    color: #059669;
}
.fo-health-trend.is-down {
    background-color: rgba(239, 68, 68, 0.13);
    color: #dc2626;
}
.fo-health-trend.is-flat {
    background-color: var(--sp-bg-hover);
    color: var(--sp-text-muted);
}
.fo-health-trend:empty { display: none; }

/* GÖRSEL KOMPOZİSYON RESPONSIVE GRID — Filo Mülkiyet + Belge + Pulse + Bakım + Muayene (5 kart) */
.fo-viz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.fo-viz-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.fo-viz-card:hover {
    border-color: var(--sp-primary);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.10);
    transform: translateY(-1px);
}

.fo-viz-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fo-viz-head svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--sp-primary-dark);
}
.fo-viz-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--sp-text);
}
.fo-viz-total {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text);
    font-variant-numeric: tabular-nums;
}

/* Stacked bar — segmentli yatay bar (donut alternatifi, kompakt) */
.fo-viz-stack {
    display: flex;
    width: 100%;
    height: 16px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--sp-bg-hover);
    border: 1px solid var(--sp-border);
}
.fo-stack-seg {
    height: 100%;
    transition: width 0.4s ease;
    min-width: 0;
}
.fo-stack-seg.is-own       { background-color: #10b981; }   /* Özmal — yeşil */
.fo-stack-seg.is-rent      { background-color: #3b82f6; }   /* Kiralık — mavi */
.fo-stack-seg.is-spot      { background-color: #8b5cf6; }   /* Spot — mor */
.fo-stack-seg.is-subcar    { background-color: #f59e0b; }   /* Alt-Taşıyıcı — amber */
.fo-stack-seg.is-other     { background-color: var(--sp-text-muted); }
.fo-stack-seg.is-valid     { background-color: #10b981; }   /* Belge geçerli */
.fo-stack-seg.is-soon      { background-color: #f59e0b; }   /* Belge yaklaşıyor */
.fo-stack-seg.is-expired   { background-color: #ef4444; }   /* Süresi geçmiş */
.fo-stack-seg.is-missing   { background-color: #cbd5e1; }   /* Eksik */
/* ⭐ Bakım Durumu — fleet-maintenance.js status renkleriyle tutarlı (is-ongoing/waiting/completed/none) */
.fo-stack-seg.is-ongoing   { background-color: #3b82f6; }   /* Bakımda — devam eden */
.fo-stack-seg.is-overdue   { background-color: #ef4444; }   /* Tarihi geçmiş — alarm */
.fo-stack-seg.is-completed { background-color: #10b981; }   /* Tamamlanan / Güncel */
.fo-stack-seg.is-none      { background-color: #cbd5e1; }   /* Hiç kayıt yok / Tanımsız */
.fo-stack-seg.is-warning   { background-color: #f59e0b; }   /* Yaklaşan — amber */

.fo-viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
}
.fo-leg-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.fo-leg-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fo-leg-dot.is-own     { background-color: #10b981; }
.fo-leg-dot.is-rent    { background-color: #3b82f6; }
.fo-leg-dot.is-spot    { background-color: #8b5cf6; }
.fo-leg-dot.is-subcar  { background-color: #f59e0b; }
.fo-leg-dot.is-other   { background-color: var(--sp-text-muted); }
.fo-leg-dot.is-valid   { background-color: #10b981; }
.fo-leg-dot.is-soon    { background-color: #f59e0b; }
.fo-leg-dot.is-expired { background-color: #ef4444; }
.fo-leg-dot.is-missing { background-color: #cbd5e1; }
.fo-leg-dot.is-ongoing   { background-color: #3b82f6; }
.fo-leg-dot.is-overdue   { background-color: #ef4444; }
.fo-leg-dot.is-completed { background-color: #10b981; }
.fo-leg-dot.is-none      { background-color: #cbd5e1; }
.fo-leg-dot.is-warning   { background-color: #f59e0b; }
.fo-leg-item b { font-weight: 600; color: var(--sp-text); }
.fo-leg-item em { font-weight: 700; color: var(--sp-text); font-style: normal; margin-left: 2px; font-variant-numeric: tabular-nums; }

/* ⭐ Sağlık alt-skor / Belge Durumu alt-bilgi — araç-bazlı eşleme */
.fo-sub-asset-hint {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--sp-text-muted);
    font-style: italic;
}
.fo-viz-asset-hint {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--sp-text-muted);
    font-style: italic;
}

/* Bu Hafta Pulse — 3 satır mini KPI */
.fo-pulse-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.fo-pulse-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 10px;
    background-color: var(--sp-bg-hover);
    border-radius: 6px;
}
.fo-pulse-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--sp-text);
    min-width: 40px;
    font-variant-numeric: tabular-nums;
}
.fo-pulse-cap {
    font-size: 12px;
    color: var(--sp-text-muted);
}

/* AKSİYON KATEGORİ CHIP — Tümü / Araç & Dorse / Sürücü */
.fo-action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 8px;
}
.fo-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 14px;
    border: 1px solid var(--sp-border);
    background-color: var(--sp-bg-card);
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fo-action-chip:hover {
    border-color: var(--sp-primary);
    color: var(--sp-text);
}
.fo-action-chip.active {
    background-color: rgba(245, 158, 11, 0.13);
    border-color: var(--sp-primary);
    color: var(--sp-primary-dark);
}
.fo-action-chip-ico {
    font-size: 13px;
    line-height: 1;
}

/* AKSİYON LİSTESİ SATIR — asset tipi ikon prefix */
.fo-item-asset-ico {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════════
 * Araca Lastik Tak — bağımsız batch modal (_SpModalMountTire.cshtml) — 2026-06-11
 * sp-mt-* prefix. var(--sp-*) + korumalı aksanlar.
 * ════════════════════════════════════════════════════════════════════════ */

/* Araç bilgi kartları */
.sp-mt-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 2px 0 6px;
}
.sp-mt-info-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background-color: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
}
.sp-mt-info-card.is-accent {
    background-color: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.35);
}
.sp-mt-info-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--sp-text-muted);
}
.sp-mt-info-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sp-text);
}

/* Ekleme satırı (Lastik + Pozisyon + KM + Maliyet + Ekle) */
.sp-mt-addbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px;
    background-color: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    margin-bottom: 12px;
}
.sp-mt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-mt-field > label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sp-text);
}
.sp-req { color: #dc2626; }
.sp-mt-field-tire { flex: 1 1 300px; }
.sp-mt-field-pos { flex: 0 1 180px; }
.sp-mt-field-km { flex: 0 1 120px; }
.sp-mt-field-price { flex: 0 1 120px; }
.sp-mt-field-add { flex: 0 0 auto; }

.sp-mt-input, .sp-mt-select {
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
    color: var(--sp-text);
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sp-mt-input:focus, .sp-mt-select:focus {
    outline: none;
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}
.sp-mt-add-btn { height: 38px; white-space: nowrap; }

/* Rich tire select */
.sp-mt-richselect { position: relative; }
.sp-mt-richselect-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 4px 10px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
    color: var(--sp-text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sp-mt-richselect-trigger.is-open,
.sp-mt-richselect-trigger:hover {
    border-color: var(--sp-primary);
}
.sp-mt-richselect-trigger.is-open {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}
/* Validasyon hata durumu (zorunlu lastik seçilmeden kaydet) — kırmızı kenar. */
.sp-mt-richselect.has-error .sp-mt-richselect-trigger {
    border-color: var(--sp-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.sp-mt-richselect-placeholder {
    flex: 1;
    color: var(--sp-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sp-mt-richselect-value {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sp-mt-richselect-value-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sp-mt-richselect-value-text b {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-mt-richselect-value-text small {
    font-size: 11px;
    color: var(--sp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-mt-richselect-arrow {
    color: var(--sp-text-muted);
    font-size: 11px;
    flex-shrink: 0;
}
.sp-mt-richselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-shadow-md, var(--sp-shadow-sm));
    overflow: hidden;
}
.sp-mt-richselect-search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-text-muted);
}
.sp-mt-richselect-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: var(--sp-text);
}
.sp-mt-richselect-items { max-height: 280px; overflow-y: auto; }
.sp-mt-richselect-loading,
.sp-mt-richselect-empty {
    padding: 18px 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--sp-text-muted);
}
.sp-mt-tire-item {
    padding: 9px 12px;
    border-bottom: 1px solid var(--sp-border);
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.sp-mt-tire-item:last-child { border-bottom: none; }
.sp-mt-tire-item:hover { background-color: rgba(245, 158, 11, 0.08); }
.sp-mt-tire-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.sp-mt-tire-brand { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.sp-mt-tire-code { font-size: 11.5px; color: var(--sp-text-muted); }
.sp-mt-tire-name { font-size: 12px; color: var(--sp-text); margin-bottom: 3px; }
.sp-mt-tire-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 11px;
    color: var(--sp-text-muted);
}
.sp-mt-tire-foot i { margin-right: 3px; }

/* Durum rozetleri */
.sp-mt-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.sp-mt-status.is-new { background-color: rgba(16, 185, 129, 0.14); color: #059669; }
.sp-mt-status.is-used { background-color: rgba(245, 158, 11, 0.16); color: var(--sp-primary-dark); }
.sp-mt-status.is-retread { background-color: rgba(139, 92, 246, 0.14); color: #6d28d9; }
.sp-mt-status.is-damaged { background-color: rgba(239, 68, 68, 0.14); color: #dc2626; }

/* Batch liste başlığı + boş hâl */
.sp-mt-list-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-mt-list-head svg { width: 16px; height: 16px; color: var(--sp-primary); }
.sp-mt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 16px;
    text-align: center;
    background-color: var(--sp-bg);
    border: 1px dashed var(--sp-border);
    border-radius: var(--sp-radius-sm);
    color: var(--sp-text-muted);
}
.sp-mt-empty svg { width: 30px; height: 30px; opacity: 0.5; }
.sp-mt-empty p { margin: 0; font-size: 12.5px; max-width: 460px; line-height: 1.5; }

/* Batch — kibar kart liste (her eklenen lastik bir satır kart) */
.sp-mt-cards { display: flex; flex-direction: column; gap: 8px; }
.sp-mt-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-primary);
    border-radius: var(--sp-radius-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.sp-mt-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.sp-mt-card-main { flex: 1 1 auto; min-width: 0; }
.sp-mt-card-title {
    font-size: 13px; color: var(--sp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-mt-card-title b { font-weight: 700; }
.sp-mt-card-sub {
    font-size: 11.5px; color: var(--sp-text-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-mt-card-pos {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background-color: rgba(245, 158, 11, 0.10);
    color: var(--sp-primary);
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    white-space: nowrap;
}
.sp-mt-card-pos i { font-size: 10px; }
.sp-mt-card-metrics { flex: 0 0 auto; display: flex; gap: 16px; }
.sp-mt-card-metric { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.sp-mt-card-metric small {
    font-size: 10px; color: var(--sp-text-muted);
    letter-spacing: 0.3px;
}
.sp-mt-card-metric b { font-size: 13px; font-weight: 700; color: var(--sp-text); white-space: nowrap; }
/* Listeden çıkar (sil) butonu — .sp-rowbtn YALNIZCA .sp-dxgrid'e scope'lu, kart içinde boyutsuz/çıplak
   kalıyordu (Giderler'deki .ge-l-del ile aynı kök neden). Kart için bağımsız stil. */
.sp-mt-card .sp-rowbtn.del {
    flex: 0 0 auto;
    align-self: center;          /* metriklerle (Montaj KM / Maliyet) dikey hizalı */
    margin-left: 6px;            /* Maliyet'ten biraz daha uzaklaşsın (12px gap + 6px) */
    width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card); color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sp-mt-card .sp-rowbtn.del svg { width: 15px; height: 15px; }
.sp-mt-card .sp-rowbtn.del:hover { background-color: var(--sp-danger); border-color: var(--sp-danger); color: #fff; }

/* Otomatik maliyet bölümü — checkbox + (seçiliyken) gider grubu/kalemi/masraf/açıklama */
.sp-mt-cost {
    margin-top: 14px;
    padding: 12px 14px;
    background-color: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: var(--sp-radius-sm);
}
.sp-mt-cost-toggle {
    font-size: 13px;
    color: var(--sp-text);
}
.sp-mt-cost-toggle b { font-weight: 700; }
.sp-mt-cost-fields {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(245, 158, 11, 0.30);
    /* Modal body standardı (gap:13px) ile aynı dikey ritim — nested .sp-row'lar arası boşluk
       (Maliyet Açıklaması üstteki satıra yapışmasın). */
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.sp-mt-cost-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--sp-text-muted);
}
.sp-mt-cost-note i { color: var(--sp-primary); }
.sp-mt-cost-note b { color: var(--sp-text); font-weight: 600; }

/* ════════ Lastik Maliyet Düzenle/Oluştur modal (_SpModalTireCost) — 2026-06-11 ════════ */
/* İş Emri No — başlık yanında ince pill (kullanıcı için ikincil bilgi). */
.sp-tc-jobno {
    margin-left: 8px;
    padding: 2px 9px;
    background-color: var(--sp-bg-input);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    vertical-align: middle;
    white-space: nowrap;
}
/* Fatura benzeri alt özet — Araç (sol) + Toplam Tutar (sağda belirgin). */
.sp-tc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 2px;
    padding: 12px 16px;
    background-color: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-top: 2px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--sp-radius-sm);
}
.sp-tc-summary-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-tc-summary-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--sp-text-muted);
}
.sp-tc-summary-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-tc-summary-total { align-items: flex-end; text-align: right; }
.sp-tc-summary-total .sp-tc-summary-value { font-size: 19px; color: var(--sp-primary); }
.sp-tc-daterange {
    margin: 2px 0 12px;
    padding: 12px;
    background-color: rgba(245, 158, 11, 0.06);
    border: 1px dashed rgba(245, 158, 11, 0.35);
    border-radius: var(--sp-radius-sm);
}
.sp-tc-ym { display: flex; gap: 8px; }
.sp-tc-ym .sp-mt-select { flex: 1; }
.sp-tc-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--sp-text-muted);
}
.sp-tc-note i { color: var(--sp-primary); }
.sp-tc-note b { color: var(--sp-text); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
   KAPLAMADAN STOĞA AL — çoklu seçim lastik listesi (sp-rrt-*) · 2026-06-12.
   _SpModalReturnRetread: firmadaki kaplamada bekleyen lastikler checkbox listesi.
   sp-mt-status chip'i reuse edilir; geri kalan self-contained, scoped.
   ════════════════════════════════════════════════════════════════════════ */
.sp-rrt-company {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    margin-bottom: 10px;
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input);
    color: var(--sp-text);
    font-size: 12.5px;
    font-weight: 600;
}
.sp-rrt-company i { color: var(--sp-primary); }
.sp-rrt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.sp-rrt-selectall {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text);
    cursor: pointer;
}
.sp-rrt-count { font-size: 12px; color: var(--sp-text-muted); font-weight: 600; }
.sp-rrt-count b { color: var(--sp-primary-dark); }
.sp-rrt-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding: 2px;
}
.sp-rrt-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1.5px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sp-rrt-item:hover { border-color: var(--sp-primary); }
.sp-rrt-item.is-selected {
    border-color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.07);
}
.sp-rrt-check { width: 16px; height: 16px; accent-color: var(--sp-primary); cursor: pointer; flex: 0 0 auto; }
.sp-rrt-main { flex: 1 1 auto; min-width: 0; }
.sp-rrt-title { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.sp-rrt-title small { font-weight: 600; color: var(--sp-text-muted); }
.sp-rrt-sub { font-size: 11.5px; color: var(--sp-text-muted); margin-top: 2px; }
.sp-rrt-metrics { display: flex; gap: 14px; flex: 0 0 auto; }
.sp-rrt-metric { display: flex; flex-direction: column; align-items: flex-end; }
.sp-rrt-metric small { font-size: 10px; color: var(--sp-text-muted); }
.sp-rrt-metric b { font-size: 12.5px; color: var(--sp-text); font-weight: 700; }
.sp-rrt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 16px;
    color: var(--sp-text-muted);
    text-align: center;
}
.sp-rrt-empty svg { width: 38px; height: 38px; opacity: 0.5; }
.sp-rrt-empty p { font-size: 12.5px; margin: 0; }

/* KAPLAMA MALİYET — taksit satır görünümü (Aylık/Yıllık periyot, tek iş emri) · 2026-06-12. */
.sp-rc-inst {
    margin-top: 8px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
}
.sp-rc-inst-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 11px;
    font-size: 12px;
    color: var(--sp-text);
    border-top: 1px solid var(--sp-border);
}
.sp-rc-inst-row:first-child { border-top: none; }
.sp-rc-inst-row b { font-weight: 700; }
.sp-rc-inst-head {
    background-color: var(--sp-bg-input);
    color: var(--sp-text-muted);
    font-size: 10.5px;
    letter-spacing: 0.3px;
    font-weight: 700;
}
.sp-rc-inst-total {
    background-color: rgba(245, 158, 11, 0.08);
    font-weight: 700;
}
/* Taksit dağılımı collapse başlığı — default açık; kullanıcı kapatıp açabilir · 2026-06-12. */
.sp-rc-inst-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    cursor: pointer;
    user-select: none;
    background-color: var(--sp-bg-input);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-rc-inst-chevron {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}
.sp-rc-inst.is-collapsed .sp-rc-inst-chevron { transform: rotate(-90deg); }
.sp-rc-inst-toggle-meta { margin-left: auto; font-weight: 600; color: var(--sp-text-muted); }
.sp-rc-inst-body .sp-rc-inst-row:first-child { border-top: 1px solid var(--sp-border); }
.sp-rc-inst.is-collapsed .sp-rc-inst-body { display: none; }

/* KAPLAMA MALİYET — kapsanan lastikler kompakt kart listesi (tek iş emri) · 2026-06-12. */
.sp-rc-tires {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--sp-border);
}
.sp-rc-tires-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-rc-tires-head svg { width: 15px; height: 15px; color: var(--sp-primary); flex: 0 0 auto; }
.sp-rc-tires-count {
    margin-left: auto;
    min-width: 20px;
    height: 18px;
    padding: 0 7px;
    border-radius: 9px;
    background-color: rgba(245, 158, 11, 0.14);
    color: var(--sp-primary);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}
/* Kapsanan lastikler — kompakt kolon başlıklı liste (kart değil) · 2026-06-12. */
.sp-rc-tires-list {
    display: block;
    max-height: 210px;
    overflow-y: auto;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
}
.sp-rc-trow {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 7px 11px;
    border-top: 1px solid var(--sp-border);
    font-size: 12px;
    color: var(--sp-text);
}
.sp-rc-trow:first-child { border-top: none; }
.sp-rc-trow-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--sp-bg-input);
    font-size: 10.5px;
    letter-spacing: 0.3px;
    font-weight: 700;
    color: var(--sp-text-muted);
}
.sp-rc-tc-name { display: flex; flex-direction: column; min-width: 0; }
.sp-rc-tc-name b {
    font-weight: 700;
    color: var(--sp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-rc-tc-name small { color: var(--sp-text-muted); font-size: 10.5px; }
.sp-rc-tc-serial {
    color: var(--sp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-rc-tc-status { min-width: 0; }
.sp-rc-tc-price { text-align: right; white-space: nowrap; }
.sp-rc-trow:not(.sp-rc-trow-head) .sp-rc-tc-price { font-weight: 700; color: var(--sp-text); }
.sp-rc-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 8px;
    background-color: rgba(245, 158, 11, 0.14);
    color: var(--sp-primary);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-rc-tires-empty {
    grid-column: 1 / -1;
    padding: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--sp-text-muted);
}

/* KAPLAMA İŞ EMRİ MODALI — pane içi bölüm başlığı (sol başlık + sağ aksiyon, altta ayraç) · 2026-06-12. */
.sp-rj-sechead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;        /* üstteki Açıklama alanından ayrış (bölüm kırılımı boşluğu) */
    padding-bottom: 9px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-rj-sechead-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-rj-sechead-title svg { width: 15px; height: 15px; color: var(--sp-primary); flex: 0 0 auto; }

/* KAPLAMA İŞ EMRİ — Maliyet sekmesi (hiyerarşik: hero tutar + durum rozeti → gövde → aksiyon).
   KPI kart yığını YERİNE tek odaklı düzen. */
.sp-rjc { display: flex; flex-direction: column; gap: 14px; }
.sp-rjc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background-color: var(--sp-bg-input);
}
.sp-rjc-summary-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-rjc-summary-cap {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--sp-text-muted);
}
.sp-rjc-summary-amount { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--sp-text); }
.sp-rjc-summary-sub { font-size: 11px; color: var(--sp-text-muted); }
/* Durum rozeti — maliyetli (emerald) / maliyetsiz (amber). */
.sp-rjc-statebadge {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.sp-rjc-statebadge.is-on { background-color: rgba(16, 185, 129, 0.12); color: #059669; border: 1px solid rgba(16, 185, 129, 0.3); }
.sp-rjc-statebadge.is-off { background-color: rgba(245, 158, 11, 0.12); color: var(--sp-primary); border: 1px solid rgba(245, 158, 11, 0.3); }
/* Maliyetlendirilmiş satır (emerald vurgu). */
.sp-rjc-costed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--sp-radius-sm);
    background-color: rgba(16, 185, 129, 0.07);
    border: 1px solid rgba(16, 185, 129, 0.22);
}
.sp-rjc-costed-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #059669; }
.sp-rjc-costed-value { font-size: 16px; font-weight: 800; color: var(--sp-text); white-space: nowrap; }
.sp-rjc-note { margin: 8px 2px 0; font-size: 11.5px; color: var(--sp-text-muted); }
/* Maliyetsiz bilgi ipucu (dashed). */
.sp-rjc-hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 16px;
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input);
    border: 1px dashed var(--sp-border);
    font-size: 12px;
    color: var(--sp-text-muted);
    line-height: 1.5;
}
.sp-rjc-hint svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--sp-primary); }
.sp-rjc-action { display: flex; justify-content: flex-end; }
/* Maliyet detay kartı — Logitera JobCard_Invoice JCard-cost-detail-card muadili: label↔value satırları
   (Gider Grubu / Gider Kalemi / Masraf Merkezi). */
.sp-rjc-detail {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
}
.sp-rjc-drow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
}
.sp-rjc-drow + .sp-rjc-drow { border-top: 1px solid var(--sp-border); }
.sp-rjc-drow > span { color: var(--sp-text-muted); }
.sp-rjc-drow > b { color: var(--sp-text); font-weight: 600; text-align: right; }

/* ── Muayene İşlemleri — "Kalan" sütunu renk skalası (vehicle-inspection.js) ── */
.ins-rem { font-weight: 700; font-size: 12px; }
.ins-rem-good { color: #10b981; }   /* protected emerald — sağlıklı */
.ins-rem-warn { color: #f59e0b; }   /* protected amber — yaklaşan */
.ins-rem-bad  { color: #ef4444; }   /* protected red — geçmiş */
.ins-rem-mut  { color: var(--sp-text-muted); font-weight: 600; }

/* ── Muayene modalı — kusur repeater satırı (_SpModalInspection) ── */
.sp-ins-defect-row {
    display: grid;
    grid-template-columns: 1fr 130px 110px 30px;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.sp-ins-defect-row input,
.sp-ins-defect-row select {
    font-family: inherit;
    font-size: 13px;
    color: var(--sp-text);
    border: 1.5px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 7px 9px;
    background-color: var(--sp-bg-input);
}
.sp-ins-defect-row input:focus,
.sp-ins-defect-row select:focus {
    outline: none;
    border-color: var(--sp-primary);
}
.sp-ins-defect-row .ins-defect-rm { justify-self: center; }
@media (max-width: 560px) {
    .sp-ins-defect-row { grid-template-columns: 1fr 110px 30px; }
    .sp-ins-defect-row .ins-defect-code { display: none; }
}

/* Muayene modalı — Maliyet kartı (salt-okunur otomatik fleet_cost özeti; Bakım/Lastik "Maliyetler" muadili) */
.sp-ins-cost-card {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background-color: var(--sp-bg-card);
    padding: 16px 18px;
}
.sp-ins-cost-amount {
    font-size: 26px;
    font-weight: 800;
    color: #059669;
    margin-bottom: 14px;
}
.sp-ins-cost-rows { display: flex; flex-direction: column; gap: 8px; }
.sp-ins-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-ins-cost-row:last-child { border-bottom: none; padding-bottom: 0; }
.sp-ins-cost-row span { color: var(--sp-text-muted); }
.sp-ins-cost-row strong { color: var(--sp-text); font-weight: 600; }

/* Muayene modalı — Hatırlatma Bildirimi detayı (#notifyDetail bir display:block <div>;
   .sp-vpane gap'i sadece pane'in DOĞRUDAN çocuklarına işler, bu kutunun İÇİNE değil).
   Sonuç: E-posta/SMS toggle-row'ları ile mail/telefon input satırları dip dibe duruyordu.
   Kanıtlı SP deseni: `> * + *` dikey ritim (retread bildirim pane precedent), 12px (.bm-notify-actions). */
#SpModalInspection-notifyDetail > * + * { margin-top: 12px; }

/* ⭐ Toplu Maliyet Barı — Bakım "Bakım İşlemleri" grid çoklu seçim aktif olunca görünür
   (fleet-maintenance.js _updateOpsBulk). Seçim sayısı + "Seçili Kayıtlara Maliyet Oluştur" butonu. */
.sp-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
}
.sp-bulk-bar .sp-bulk-bar-info { color: var(--sp-text); font-size: 13px; }
.sp-bulk-bar .sp-bulk-bar-info b { color: var(--sp-primary-dark); }
.sp-bulk-bar > .sp-btn { margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════
   GARANTİ & ÖZET PANELİ (Bakım L2 → view="garanti") — 4 dashboard bölümü.
   Geowix stock Bakım dashboard paritesi (2026-06-17).
   Severity: is-overdue (#dc2626) / is-today (amber #d97706) / is-future (#059669).
   ══════════════════════════════════════════════════════════════════ */
.sp-bmd-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sp-bmd-card {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    background-color: var(--sp-bg-card);
    overflow: hidden;
}
.sp-bmd-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sp-border);
    background-color: var(--sp-bg-input);
}
.sp-bmd-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-bmd-card-title svg { width: 16px; height: 16px; color: var(--sp-primary); }
.sp-bmd-card-head .sp-view-toggle { margin-left: auto; }

/* Garanti filtre satırı (plaka arama + durum + Sorgula) */
.sp-bmd-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-bmd-filters .sp-control-search { max-width: 220px; }
/* Durum dropdown'u (Tüm Durumlar) — .sp-ctrl-select YALNIZCA .sp-controls'a scope'lu olduğu için
   .sp-bmd-filters içinde çıplak/native kalıyordu. Standart portal dropdown görünümü (sp-controls ile birebir). */
.sp-bmd-filters .sp-ctrl-select {
    min-width: 150px;
    padding: 7px 10px;
    border: 1px solid var(--sp-border);
    background-color: var(--sp-bg-card);
    border-radius: var(--sp-radius-sm);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--sp-text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s ease;
}
.sp-bmd-filters .sp-ctrl-select:focus { border-color: var(--sp-primary); }

/* Liste gövdeleri (Garanti + Belge tabloları) */
.sp-bmd-list { padding: 4px 0; max-height: 360px; overflow-y: auto; }

/* Panel ortak tablo */
.sp-bmd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.sp-bmd-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 9px 14px;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: var(--sp-text-muted);
    background-color: var(--sp-bg-input);
    border-bottom: 1px solid var(--sp-border);
    white-space: nowrap;
}
.sp-bmd-table thead th.num { text-align: right; }
.sp-bmd-table tbody td {
    padding: 9px 14px;
    color: var(--sp-text);
    border-bottom: 1px solid var(--sp-border);
    vertical-align: middle;
}
.sp-bmd-table tbody td.num { text-align: right; }
.sp-bmd-table tbody tr:last-child td { border-bottom: none; }
.sp-bmd-table tbody tr:hover td { background-color: var(--sp-bg-input); }
.sp-bmd-table b { color: var(--sp-text); }

/* Durum chip — severity renkli (garanti + belge sayısı) */
.sp-bmd-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.sp-bmd-chip.is-overdue { background-color: rgba(239, 68, 68, 0.13); color: #dc2626; }
.sp-bmd-chip.is-today   { background-color: rgba(245, 158, 11, 0.15); color: #d97706; }
.sp-bmd-chip.is-future  { background-color: rgba(16, 185, 129, 0.13); color: #059669; }
.sp-bmd-chip.is-none    { background-color: var(--sp-bg-input); color: var(--sp-text-muted); }

/* ── BÖLÜM 2: En Çok Kullanılan Parça ── */
.sp-bmd-parts { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.sp-bmd-part {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input);
}
.sp-bmd-part-rank {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: var(--sp-primary);
}
.sp-bmd-part-main { flex: 1 1 auto; min-width: 0; }
.sp-bmd-part-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
.sp-bmd-part-bar {
    height: 6px;
    border-radius: 99px;
    background-color: var(--sp-border);
    overflow: hidden;
}
.sp-bmd-part-bar > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background-color: #f59e0b;
}
.sp-bmd-part-stats {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}
.sp-bmd-part-use  { font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.sp-bmd-part-cost { font-size: 12px; font-weight: 700; color: #059669; }
.sp-bmd-part-veh  { font-size: 11px; color: var(--sp-text-muted); }

/* ── BÖLÜM 3: Bakım Yeri Kıyaslaması ── */
.sp-bmd-place { padding: 14px; }
.sp-bmd-place-rows { display: flex; flex-direction: column; gap: 12px; }
.sp-bmd-place-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 12px;
}
.sp-bmd-place-label { font-size: 12.5px; font-weight: 600; color: var(--sp-text); }
.sp-bmd-place-track {
    height: 18px;
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input);
    overflow: hidden;
}
.sp-bmd-place-track > span {
    display: block;
    height: 100%;
    border-radius: var(--sp-radius-sm);
    transition: width 0.3s ease;
}
.sp-bmd-place-track > span.is-internal { background-color: #3b82f6; }
.sp-bmd-place-track > span.is-external { background-color: #f59e0b; }
.sp-bmd-place-val { font-size: 12.5px; font-weight: 700; color: var(--sp-text); white-space: nowrap; }
.sp-bmd-place-val small { font-weight: 600; color: var(--sp-text-muted); }
.sp-bmd-place-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sp-border);
    font-size: 12px;
    color: var(--sp-text-muted);
}
.sp-bmd-place-summary b { color: var(--sp-text); }

/* ── BÖLÜM 4: Belge Tamamlanma özet kartları ── */
.sp-bmd-doc-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 14px 4px;
}
.sp-bmd-sum {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input);
}
.sp-bmd-sum-val { font-size: 20px; font-weight: 800; color: var(--sp-text); line-height: 1.1; }
.sp-bmd-sum-label { font-size: 11.5px; color: var(--sp-text-muted); }
.sp-bmd-sum.is-withdocs .sp-bmd-sum-val { color: #059669; }
.sp-bmd-sum.is-without .sp-bmd-sum-val { color: #d97706; }

/* ════════ ANALİZ PANELİ (KPI + DevExtreme grafik dashboard) — Bakım L2 "Analiz" görünümü ════════ */
/* Panel kök (.sp-bmd-panel ile aynı dikey akış); 6'lı KPI ızgarası geniş ekranda 3 sütun. */
.sp-anz-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 0;   /* panel zaten gap:16px veriyor — çift boşluk olmasın */
}
@media (max-width: 1100px) { .sp-anz-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sp-anz-kpi-grid { grid-template-columns: 1fr; } }

/* Durum dağılımı KPI değeri uzun olabilir (0 / 0 / 0) — taşmasın */
.sp-anz-dist { font-variant-numeric: tabular-nums; }

/* Grafik ızgarası — 2 sütun; dar ekranda tek sütuna iner */
.sp-anz-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 980px) { .sp-anz-chart-grid { grid-template-columns: 1fr; } }

/* Grafik kabı — .sp-bmd-card içinde sabit yükseklik (dxChart responsive ölçer) */
.sp-anz-chart {
    height: 300px;
    padding: 10px 8px 4px;
}
.sp-anz-chart .sp-empty-mini { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ===== Yakıt iş emri — depo stok rozeti (Logitera fuel-stock-badge karşılığı) ===== */
.sp-fuel-stock-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    background-color: var(--sp-bg-input);
    color: var(--sp-text-muted);
    border: 1px solid var(--sp-border);
}
.sp-fuel-stock-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
.sp-fuel-stock-badge.is-ok {
    background-color: rgba(16, 185, 129, 0.10);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.30);
}
.sp-fuel-stock-badge.is-empty {
    background-color: rgba(245, 158, 11, 0.10);
    color: var(--sp-primary);
    border-color: rgba(245, 158, 11, 0.30);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sp-fuel-stock-badge.is-empty:hover {
    background-color: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.50);
}
.sp-fuel-stock-remaining { margin-left: 6px; font-weight: 600; opacity: 0.85; }

/* ============================================================================
   BİLDİRİM LOGLARI (Bildirimler › Bildirim Logları) — nl-* (additive, 2026-06-19)
   Durum çipleri bm-status-chip görsel paralelidir; grid kanal rozeti + detay modalı.
   ============================================================================ */

/* ── Durum filtresi sayım rozeti (grid header'daki sp-view-toggle içinde) ──
   Toggle'ın kendisi standart .sp-view-toggle; yalnız buton içi sayı rozetini ekliyoruz. */
.nl-status-toggle .nl-st-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 16px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--sp-bg-card);
    color: var(--sp-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}
.nl-status-toggle .sp-view-toggle-btn.active .nl-st-count {
    background-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* FontAwesome ikonlu KPI rozetleri — mevcut .sp-kpi-icon svg (beyaz) ile aynı görünüm.
   Additive: yalnız <i> çocukları etkiler, SVG kullanan mevcut KPI'lere dokunmaz. */
.sp-kpi-icon i { color: #fff; font-size: 18px; line-height: 1; }

/* ── Grid kanal rozeti ── */
.nl-ch-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12.5px; }
.nl-ch-badge i { font-size: 12px; }

/* ── Detay modalı ── */
.nl-detail-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.nl-detail-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}
.nl-detail-channel.is-mail { background-color: rgba(16, 185, 129, 0.14); color: #059669; }
.nl-detail-channel.is-sms { background-color: rgba(59, 130, 246, 0.14); color: #2563eb; }

.nl-detail-rows { display: flex; flex-direction: column; gap: 1px; }
.nl-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--sp-border);
    font-size: 13px;
}
.nl-detail-row-col { flex-direction: column; gap: 6px; }
.nl-detail-label {
    flex: 0 0 110px;
    color: var(--sp-text-muted);
    font-weight: 600;
}
.nl-detail-value { flex: 1 1 auto; color: var(--sp-text); word-break: break-word; }
.nl-detail-mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; }

.nl-detail-message {
    margin-top: 8px;
    padding: 12px 14px;
    background-color: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-size: 13px;
    line-height: 1.55;
    color: var(--sp-text);
    white-space: pre-wrap;
    word-break: break-word;
}
.nl-detail-mailbody {
    margin-top: 8px;
    padding: 14px 16px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    /* Kap yok — e-posta gövdesi TAM çıkar; uzunsa modal gövdesi (sp-modal-form-body) kendi içinde kayar (§7.2.5). */
    font-size: 13px;
    line-height: 1.55;
    color: var(--sp-text);
}
.nl-detail-mailbody img { max-width: 100%; height: auto; }
.nl-detail-empty { color: var(--sp-text-muted); font-style: italic; }

.nl-detail-attach { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nl-detail-attach-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background-color: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-size: 12.5px;
    color: var(--sp-text);
}
.nl-detail-attach-item i { color: var(--sp-text-muted); }

.nl-detail-tech { margin-top: 16px; }
.nl-detail-tech-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    transition: color 0.15s ease;
}
.nl-detail-tech-toggle:hover { color: var(--sp-text); }
.nl-detail-tech-toggle.open { color: var(--sp-primary); }
.nl-detail-tech-body { margin-top: 6px; }
.nl-detail-pre {
    margin: 0;
    padding: 12px 14px;
    background-color: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--sp-text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow: auto;
}

/* ============================================================
   Giderler — Gider Ekle/Düzenle modal (_SpModalExpense) inline kalem satırları.
   Additive; sp_ui_standards §3 token + §15 light-only. Dinamik detay satırları
   TagHelper olamaz → SP input görünümü ge- class'larıyla eşlenir (id selector YOK).
   ============================================================ */
.ge-line { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ge-line-cell { min-width: 0; }
/* 12-grid oranları (act hariç): Gider Türü 2 · Gider Kalemi 3 · Miktar 1 · Tutar 2 · Resmi Tutar 2 · Açıklama 2 = 12.
   flex-basis 0 → grow oranı saf 2:3:1:2:2:2 dağılır. Sürücü modunda ctype+qty gizli → kalanlar 3:2:2:2. */
.ge-cell-ctype { flex: 2 1 0; }
.ge-cell-sitem { flex: 3 1 0; }
.ge-cell-qty { flex: 1 1 0; }
.ge-cell-price { flex: 2 1 0; }
.ge-cell-official { flex: 2 1 0; }
.ge-cell-desc { flex: 2 1 0; }
.ge-cell-act { flex: 0 0 34px; text-align: center; }
.ge-line-head { margin-bottom: 4px; }
.ge-line-head .ge-line-cell {
    font-size: 11px; font-weight: 600; color: var(--sp-text-muted);
    letter-spacing: .3px;
}
.ge-line select,
.ge-line input {
    width: 100%; height: 34px; padding: 4px 8px;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input); color: var(--sp-text);
    font-size: 13px; box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.ge-line select:focus,
.ge-line input:focus { outline: none; border-color: var(--sp-primary); }
.ge-line.has-error select,
.ge-line.has-error input { border-color: var(--sp-danger); }
/* Silme butonu — .sp-rowbtn .sp-dxgrid'e scope'lu (modalda etki etmez) → bağımsız stil */
.ge-l-del {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card); color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ge-l-del svg { width: 14px; height: 14px; }
.ge-l-del:hover { background-color: var(--sp-danger); border-color: var(--sp-danger); color: #fff; }
/* Sürücü modu: Gider Türü + Miktar gizli (kalemden türetilir; miktar=1) */
.ge-mode-driver .ge-cell-ctype,
.ge-mode-driver .ge-cell-qty { display: none; }
/* Düzenleme modu: satır sil sütunu gizli (Logitera ile birebir — edit'te kalem ekle/sil yok, yalnız değer düzenlenir) */
.ge-is-edit .ge-cell-act { display: none; }
.ge-total-bar {
    display: flex; justify-content: flex-end; align-items: center; gap: 14px;
    margin-top: 12px; padding: 10px 14px;
    background-color: var(--sp-bg-input); border-radius: var(--sp-radius-sm);
}
.ge-total-label { font-size: 13px; font-weight: 600; color: var(--sp-text-muted); }
.ge-total-value { font-size: 18px; font-weight: 700; color: var(--sp-text); }

/* ====================================================================
   Filo Sabit Gideri modalı — kalem satırları (sf-line) + çoklu-araç seçici (sf-veh)
   Logitera VFE_modal detay satırı muadili; SP standardı (ge-line deseni + var(--sp-*)).
   ==================================================================== */
.sf-line { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.sf-line-cell { min-width: 0; }
.sf-cell-date { flex: 1.4 1 0; }
.sf-cell-veh { flex: 2.2 1 0; }
.sf-cell-item { flex: 2.4 1 0; }
.sf-cell-amount { flex: 1.4 1 0; }
.sf-cell-desc { flex: 2 1 0; }
.sf-cell-act { flex: 0 0 34px; text-align: center; padding-top: 2px; }
.sf-line-head { margin-bottom: 4px; align-items: center; }
.sf-line-head .sf-line-cell {
    font-size: 11px; font-weight: 600; color: var(--sp-text-muted);
    letter-spacing: .3px;
}
.sf-line > .sf-line-cell > select,
.sf-line > .sf-line-cell > input {
    width: 100%; height: 34px; padding: 4px 8px;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input); color: var(--sp-text);
    font-size: 13px; box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.sf-line select:focus,
.sf-line input:focus { outline: none; border-color: var(--sp-primary); }
.sf-line.has-error select,
.sf-line.has-error input,
.sf-line.has-error .sf-veh-trigger { border-color: var(--sp-danger); }
.sf-l-del {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-card); color: var(--sp-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sf-l-del svg { width: 14px; height: 14px; }
.sf-l-del:hover { background-color: var(--sp-danger); border-color: var(--sp-danger); color: #fff; }

/* Çoklu-araç seçici (checkbox dropdown) */
.sf-veh { position: relative; }
.sf-veh-trigger {
    display: flex; align-items: center; gap: 6px; height: 34px; padding: 4px 8px;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input); color: var(--sp-text);
    font-size: 13px; cursor: pointer; box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.sf-veh-trigger:focus { outline: none; border-color: var(--sp-primary); }
.sf-veh-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-veh-text.is-placeholder { color: var(--sp-text-muted); }
.sf-veh-trigger > i { font-size: 11px; color: var(--sp-text-muted); flex: 0 0 auto; }
.sf-veh-menu {
    display: none; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
    background-color: var(--sp-bg-card); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm); box-shadow: var(--sp-shadow-md);
    padding: 6px;
}
.sf-veh.open .sf-veh-menu { display: block; }
.sf-veh-search { margin-bottom: 6px; }
.sf-veh-search input {
    width: 100%; height: 30px; padding: 4px 8px;
    border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input); color: var(--sp-text); font-size: 12px; box-sizing: border-box;
}
.sf-veh-opts { max-height: 190px; overflow-y: auto; }
.sf-veh-opt {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px;
    border-radius: var(--sp-radius-sm); cursor: pointer; font-size: 13px; color: var(--sp-text);
    transition: background-color 0.12s ease;
}
.sf-veh-opt:hover { background-color: var(--sp-bg-hover); }
.sf-veh-box {
    flex: 0 0 16px; width: 16px; height: 16px; border: 1px solid var(--sp-border);
    border-radius: 3px; display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--sp-bg-input);
}
.sf-veh-opt.selected .sf-veh-box { background-color: var(--sp-primary); border-color: var(--sp-primary); }
.sf-veh-opt.selected .sf-veh-box::after {
    content: ''; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg); margin-top: -2px;
}

/* Araç Bazlı Gider Özeti — "Gider Dağılımı" grid kolonu (Logitera kart görünümündeki kalem kırılımı) */
.fx-itemdist { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0; }
.fx-itemchip {
    display: inline-flex; align-items: center; max-width: 100%;
    padding: 2px 8px; border-radius: var(--sp-radius-sm);
    background-color: var(--sp-bg-input); border: 1px solid var(--sp-border);
    color: var(--sp-text); font-size: 11px; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-itemchip.fx-more { color: var(--sp-text-muted); font-weight: 600; }

/* ===== Araçlar — liste üstü arama+filtre butonu ===== */
.kp-vlist-searchin { position: relative; flex: 1; min-width: 0; }
.kp-vfilter-btn { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; font-size: 11px; font-weight: 700; color: var(--sp-text-secondary); background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.kp-vfilter-btn:hover { border-color: #797bf2; color: #797bf2; }
.kp-vfilter-btn.on { background: rgba(121,123,242,.12); border-color: rgba(121,123,242,.45); color: #797bf2; }
.kp-vfilter-badge { background: #797bf2; color: #fff; font-size: 9px; font-weight: 800; min-width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 8px; padding: 0 4px; }
/* ===== Araç Filtreleri menüsü (5 sütun grid) ===== */
.kp-vf-menu { max-height: 470px; overflow: hidden; min-width: 1040px; max-width: 96vw; display: flex; flex-direction: column; }
.kp-vf-grid { display: flex; align-items: stretch; gap: 0; flex: 1; min-height: 0; }
.kp-vf-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 0 8px; border-left: 1px solid var(--sp-border); }
.kp-vf-col:first-child { border-left: none; }
.kp-vf-sec { position: sticky; top: 0; background: var(--sp-bg-card); z-index: 1; display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .3px; color: var(--sp-text-secondary); padding: 7px 2px 4px; }
.kp-vf-sec i { color: #797bf2; }
.kp-vf-div { height: 1px; background: var(--sp-border); margin: 7px 0 0; }
.kp-vf-search { position: relative; margin-bottom: 4px; }
.kp-vf-search i { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--sp-text-muted); pointer-events: none; }
.kp-vf-search input { width: 100%; box-sizing: border-box; padding: 4px 8px 4px 22px; font-size: 11px; color: var(--sp-text); background: var(--sp-bg-input); border: 1px solid var(--sp-border); border-radius: 6px; outline: none; }
.kp-vf-search input:focus { border-color: #797bf2; }
.kp-vf-items { display: flex; flex-direction: column; gap: 1px; padding-bottom: 4px; }
.kp-vf-item { display: flex; align-items: center; gap: 7px; padding: 4px; border-radius: 6px; cursor: pointer; font-size: 11px; color: var(--sp-text); }
.kp-vf-item:hover { background: rgba(121,123,242,.08); }
.kp-vf-item input { flex: none; accent-color: #797bf2; cursor: pointer; }
.kp-vf-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-vf-n { flex: none; font-size: 9.5px; font-weight: 700; color: var(--sp-text-muted); background: var(--sp-bg-body); border-radius: 7px; padding: 1px 6px; }
.kp-vf-empty { font-size: 10.5px; color: var(--sp-text-muted); padding: 4px; }
.kp-vf-foot { flex: none; display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--sp-border); background: var(--sp-bg-card); }
.kp-vf-clear, .kp-vf-close { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 11px; font-weight: 700; border-radius: 7px; cursor: pointer; border: 1px solid var(--sp-border); background: var(--sp-bg-input); color: var(--sp-text-secondary); transition: border-color .15s ease, color .15s ease; }
.kp-vf-clear:hover { border-color: #ef4444; color: #ef4444; }
.kp-vf-close { background: #797bf2; border-color: #797bf2; color: #fff; }
.kp-vf-all { border-bottom: 1px solid var(--sp-border); margin-bottom: 2px; padding-bottom: 5px; }
.kp-vf-all .kp-vf-lbl b { color: var(--sp-text-primary); }
.kp-vf-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 6px; }
.kp-flt-head { position: sticky; left: 0; flex: none; padding: 10px 14px 9px; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg-card); }
.kp-flt-head-t { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--sp-text-primary); }
.kp-flt-head-t i { color: #797bf2; }
.kp-flt-head-d { margin-top: 3px; font-size: 11px; color: var(--sp-text-muted); font-weight: 500; }
/* ===== Siparişler özet/rapor paneli ===== */
.kp-ocat-sub { display: block; font-weight: 600; color: var(--sp-text-muted); font-size: 9.5px; margin-top: 1px; }
.kp-ord-locrow { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0; }
.kp-ord-locchip { flex: 1 1 0; min-width: 0; justify-content: center; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--sp-text-secondary); background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: 8px; padding: 5px 10px; }
.kp-ord-locchip i { color: #797bf2; }
.kp-ord-locchip b { color: #3b82f6; }
.kp-otl-row { display: flex; align-items: center; gap: 6px; padding: 1px 2px; }
.kp-otl-row.now { background: rgba(121,123,242,.08); border-radius: 6px; }
.kp-otl-d { flex: none; width: 38px; font-size: 10px; color: var(--sp-text-muted); font-weight: 600; }
.kp-otl-bars { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kp-otl-bar { height: 6px; border-radius: 4px; background: var(--sp-border); overflow: hidden; }
.kp-otl-f { display: block; height: 100%; border-radius: 4px; }
.kp-otl-f.pu { background: #3b82f6; }
.kp-otl-f.dl { background: #10b981; }
.kp-otl-v { flex: none; min-width: 44px; text-align: right; font-size: 10px; font-weight: 700; color: var(--sp-text-primary); }
.kp-river-funnel .kp-river-lbl { font-size: 12px; font-weight: 800; fill: var(--sp-text-primary); }
.kp-river-funnel .kp-river-cnt { font-size: 10px; font-weight: 700; fill: var(--sp-text-secondary); }
.kp-river-load { fill: var(--sp-text-muted); font-size: 10px; font-weight: 600; }
.kp-ocats { padding: 0; }
.kp-ord-loctop { display: block; text-align: center; line-height: 1.25; }
.kp-ord-loctop i { margin-right: 4px; color: #797bf2; }
.kp-ord-locsub { font-size: 9.5px; font-weight: 600; color: var(--sp-text-muted); text-align: center; }
/* ===== Toplama/Teslimat Top-10 İl/İlçe bar grafiği ===== */
.kp-geobtog { display: flex; gap: 4px; margin-bottom: 8px; }
.kp-geobtog-btn { flex: 1 1 0; padding: 5px 8px; font-size: 11px; font-weight: 700; border: 1px solid var(--sp-border); border-radius: 7px; background: var(--sp-bg-card); color: var(--sp-text-secondary); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.kp-geobtog-btn.on { background: rgba(121,123,242,.12); border-color: rgba(121,123,242,.45); color: #797bf2; }
.kp-geobars { display: flex; flex-direction: column; gap: 8px; }
.kp-geobar-row { display: flex; flex-direction: column; gap: 3px; }
.kp-geobar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kp-geobar-nm { font-size: 11.5px; font-weight: 700; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-geobar-n { flex: none; font-size: 11.5px; font-weight: 800; color: #797bf2; }
.kp-geobar-track { height: 8px; border-radius: 5px; background: var(--sp-border); overflow: hidden; }
.kp-geobar-fill { display: block; height: 100%; border-radius: 5px; background: #797bf2; }
.kp-geobar-sub { font-size: 9.5px; font-weight: 600; color: var(--sp-text-muted); }
/* ===== Top-10 dikey sütun (bar) grafiği ===== */
.kp-geochart { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; }
.kp-geocol { flex: 0 0 60px; display: flex; flex-direction: column; }
.kp-geocol-barwrap { height: 122px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; }
.kp-geocol-v { font-size: 10px; font-weight: 800; color: #797bf2; }
.kp-geocol-bar { width: 26px; background: #797bf2; border-radius: 5px 5px 0 0; min-height: 3px; }
.kp-geocol-foot { margin-top: 5px; text-align: center; }
.kp-geocol-lbl { display: block; font-size: 9px; font-weight: 700; color: var(--sp-text); line-height: 1.15; }
.kp-geocol-load { display: block; font-size: 8px; font-weight: 600; color: var(--sp-text-muted); margin-top: 2px; line-height: 1.2; }
.kp-ord-note { display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px; border-radius: 8px; background: rgba(59,130,246,.10); border: 1px solid rgba(59,130,246,.25); color: var(--sp-text-secondary); font-size: 10.5px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.kp-ord-note i { color: #3b82f6; margin-top: 1px; }
.kp-ord-note b { color: var(--sp-text-primary); }
.kp-ord-loadline { font-size: 10.5px; font-weight: 600; color: var(--sp-text-muted); margin-top: 3px; }
.kp-ord-loadline b { color: #3b82f6; }
.kp-ord-sumhead { font-size: 12px; font-weight: 600; color: var(--sp-text-secondary); line-height: 1.55; }
.kp-ord-sumhead i { color: #797bf2; margin-right: 4px; }
.kp-ord-sumhead b { font-weight: 800; color: var(--sp-text-primary); }
.kp-sh-n { font-weight: 800; }
.kp-ord-sumhead .kp-sh-n { color: var(--sp-text-primary); }
.kp-ord-loadline .kp-sh-n { color: #3b82f6; }
.kp-deltog { display: flex; gap: 4px; margin-bottom: 8px; }
.kp-deltog-btn { flex: 1 1 0; padding: 6px 8px; font-size: 11px; font-weight: 700; border: 1px solid var(--sp-border); border-radius: 7px; background: var(--sp-bg-card); color: var(--sp-text-secondary); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.kp-deltog-btn.on { background: rgba(121,123,242,.12); border-color: rgba(121,123,242,.45); color: #797bf2; }
.kp-ordr-rinfo { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--sp-border); }
.kp-ordr-rchip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--sp-text-secondary); background: rgba(121,123,242,.10); border: 1px solid rgba(121,123,242,.25); border-radius: 7px; padding: 2px 7px; }
.kp-ordr-rchip i { color: #797bf2; font-size: 9px; }
.kp-ordr-anoms { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.kp-ordr-achip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; border-radius: 7px; padding: 2px 7px; }
.kp-ordr-achip i { font-size: 9px; }
.kp-ordr-achip.err { color: #ef4444; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.28); }
.kp-ordr-achip.warn { color: #f59e0b; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.30); }
.kp-geocol[data-geokey] { cursor: pointer; }
.kp-geocol[data-geokey]:hover .kp-geocol-bar { filter: brightness(1.12); }
.kp-geocol[data-geokey]:hover .kp-geocol-lbl { color: #797bf2; }
.kp-geolink { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.kp-geolink:hover { color: #797bf2; }
.kp-geolink:hover .kp-sh-n { color: #797bf2; }

/* ── "Sipariş Kartı" butonu (CardHost köprüsü — sol liste kartı + sağ detay paneli) ──
   ROM Cockpit'ten port (2026-08-12): operasyon-kokpit.js iki ekranda birebir, buton her ikisinde render olur. */
.kp-ordr-actions { display: flex; margin-top: 2px; }
.kp-ord-hact { margin-top: 8px; }
.kp-ord-cardbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 5px 10px; border-radius: 7px; background: var(--sp-bg-input); color: var(--sp-primary); border: 1px solid var(--sp-border); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.kp-ord-cardbtn:hover { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.kp-ordr-actions .kp-ord-cardbtn { width: 100%; }

/* ── Araç marker'ı: durum renkli DAİRE + içinde beyaz yön oku (2026-08-13, rota/sipariş marker diliyle uyum) ── */
.kp-mk-circle {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #9ca3af;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    box-sizing: border-box;
}

/* Araç marker renk lejantı — Araçlar tab'ında filtre satırının altında */
.kp-mk-legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    padding: 3px 10px 5px;
    font-size: 10px; color: var(--sp-text-muted);
}
.kp-mkl-title { font-weight: 700; letter-spacing: .3px; font-size: 9px; }
.kp-mkl-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kp-mkl-item i {
    width: 9px; height: 9px; border-radius: 50%;
    display: inline-block; border: 1px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* ── Hinterland "Haritada göster" anahtarı (2026-08-13) — çizim seçimden ayrıştı, default kapalı ── */
.kp-hint-drawsw {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 12px 6px;
    font-size: 11.5px; font-weight: 600; color: var(--sp-text);
    cursor: pointer; user-select: none;
    border-bottom: 1px solid var(--sp-border);
}
.kp-hint-drawsw input { display: none; }
.kp-hint-drawsw-track {
    position: relative; flex: 0 0 auto;
    width: 30px; height: 16px; border-radius: 999px;
    background: var(--sp-border);
    transition: background-color 0.18s ease;
}
.kp-hint-drawsw-track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform 0.18s ease;
}
.kp-hint-drawsw input:checked + .kp-hint-drawsw-track { background: var(--sp-primary); }
.kp-hint-drawsw input:checked + .kp-hint-drawsw-track::after { transform: translateX(14px); }

/* ════════════════════════════════════════════════════════════════════════
   KABUK REVİZYONU — üst bar (login teması) + kompakt sol menü
   Kapsam: yalnızca kabuk. sp-* sınıf adları, ikonlar, menü sırası,
   içerik bileşenleri DEĞİŞMEDİ. Bu blok dosyanın sonunda durur ve
   yukarıdaki karşılıklarını bilerek ezer — geri almak icin bu bloğu sil.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* Ölçüler — sıkıştırıldı */
    --sp-topbar-h: 46px;
    --sp-sidebar-w: 208px;
    --sp-sidebar-collapsed: 48px;

    /* Login kapağının sıcak mürekkep paleti (supplier-portal-login.css --spa-*) */
    --sp-top-ink: #150F07;
    --sp-top-ink-2: #33240F;
    --sp-top-on: #FFF8EE;
    --sp-top-on-dim: #B9A48A;
    --sp-top-line: rgba(245, 158, 11, 0.16);
}

/* ---------- ÜST BAR: login kapağının teması ---------- */
.sp-topbar {
    height: var(--sp-topbar-h);
    padding: 0 12px;
    /* Login sahnesindeki radial mürekkep, yatay bara uyarlandı */
    background: linear-gradient(92deg, var(--sp-top-ink) 0%, var(--sp-top-ink-2) 58%, var(--sp-top-ink) 100%);
    border-bottom: 1px solid var(--sp-top-line);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.sp-topbar-left { gap: 10px; }

.sp-hamburger {
    width: 30px; height: 30px;
    color: var(--sp-top-on-dim);
}
.sp-hamburger:hover {
    background: rgba(245, 158, 11, 0.14);
    color: var(--sp-primary);
}
.sp-hamburger svg { width: 17px; height: 17px; }

.sp-topbar-brand { gap: 8px; }

.sp-topbar-mark {
    width: 22px; height: 22px; border-radius: 6px;
    box-shadow: 0 2px 10px -2px rgba(245, 158, 11, 0.65);
}

/* Marka adı — login'deki kehribar degrade */
.sp-topbar-name {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(96deg, #FCD34D 0%, #F59E0B 42%, #EA7A0B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Sağdaki ikonlar koyu zemine uyarlandı */
.sp-icon-btn {
    width: 29px; height: 29px;
    color: var(--sp-top-on-dim);
}
.sp-icon-btn:hover {
    background: rgba(245, 158, 11, 0.14);
    color: #FCD34D;
}
.sp-icon-btn svg { width: 16px; height: 16px; }

.sp-topbar-right { gap: 3px; }
.sp-topbar-right .sp-user-chip { margin-left: 6px; }
.sp-user-chip { color: var(--sp-top-on); }
.sp-user-chip:hover { background: rgba(245, 158, 11, 0.12); }
.sp-user-chip .sp-user-name,
.sp-user-chip .sp-user-role { color: var(--sp-top-on); }
.sp-user-chip svg { color: var(--sp-top-on-dim); }

/* ---------- SOL MENÜ: kompakt ----------
   Ölçüler Master'ın sol menüsüyle (master-layout.css .nav-item / .nav-section-title)
   HİZALANDI — iki ürün arasında yoğunluk farkı olmasın. Satır başına ~6px kazanç,
   18 satırda ~120px. Renk dili portalın kendisi (amber) kalır; değişen yalnız ölçü. */
.sp-nav { padding: 4px 0; }

.sp-nav-group { margin-bottom: 1px; }

/* Başlıkta OPAKLIK YOK: Master'da aynı hata yapılmıştı — küçük punto + soluk renk
   + opacity üst üste binince kontrast ~2.5:1'e düşüyor ve başlık okunmuyordu.
   Onun yerine punto 10.5, harf aralığı açık, renk doğrudan token'dan. */
.sp-nav-title {
    padding: 6px 16px 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--sp-text-secondary);
    opacity: 1;
}
.sp-sidebar.collapsed .sp-nav-title { height: 10px; padding: 4px 0; }

.sp-nav-item {
    margin: 0 8px;
    padding: 3px 11px;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.5;
    border-radius: var(--sp-radius-sm);
}
.sp-nav-item svg { width: 13px; height: 13px; flex: none; }

.sp-nav-item.active::before { left: 2px; }

/* Kapalı hâl 48px — yalnız ikon, ortalı */
.sp-sidebar.collapsed .sp-nav-item {
    justify-content: center;
    padding: 5px 0;
    margin: 0 5px;
}

/* ---------- İÇERİK ---------- */
.sp-main { padding: 14px; }

/* Bölüm başlığı — GİZLENMEZ.
   Portal tek sayfa/16 bölüm; her bölümün kendi başlığı var ve bölüm geçişi
   istemci tarafında. Gizlense her bölüm başlıksız kalır, üst bar da dolduramaz.
   Onun yerine sıkıştırıldı. */
.sp-page-head { margin-bottom: 12px; }
.sp-page-head h1 { font-size: 16px; font-weight: 700; letter-spacing: -0.25px; }
.sp-page-head p { font-size: 11.5px; margin-top: 1px; }


/* ===== DRC-tarzı Gantt ekleri — Beyan / Rota-GPS / sefer plan bandı / numaralı varış / olay marker ===== */
.lt-gantt-band.g-planwin { background: rgba(121, 123, 242, .20); border: 1px dashed #797bf2; box-shadow: none; }
.lt-gantt-band.g-act { background: rgba(29, 78, 216, .30); border: 1px solid #1d4ed8; }
.lt-gantt-band.g-act.g-open { border-right: 2px dotted #1d4ed8; opacity: .7; }
.lt-gantt-band.g-routegps { background: rgba(16, 185, 129, .30); border: 1px solid #10b981; }
.lt-gantt-band.g-grad { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10); }
/* Numaralı gerçek varış marker'ı (Noktalar şeridi) — dakiklik renkli */
.lt-gantt-lane.g-lane-arr .lt-gantt-track { background: transparent; }
.lt-gantt-arrpt { position: absolute; top: 50%; transform: translate(-50%, -50%); min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; color: #fff; font-size: 9.5px; font-weight: 800; line-height: 17px; text-align: center; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); cursor: help; z-index: 2; }
.lt-gantt-arrpt.ok { background: #10b981; }
.lt-gantt-arrpt.warn { background: #f59e0b; }
.lt-gantt-arrpt.crit { background: #ef4444; }
/* Olay marker'ı (Olaylar şeridi) — anomali türüne göre renk */
.lt-gantt-anom { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); cursor: help; z-index: 2; }
.lt-gantt-anom.speed, .lt-gantt-anom.brake { background: #ef4444; }
.lt-gantt-anom.idle { background: #3b82f6; }
.lt-gantt-anom.jump { background: #8b5cf6; }
.lt-gantt-anom.gap { background: #6b7280; }
/* Lejant ekleri */
.lt-gantt-legend i.g-act { background: #1d4ed8; }
.lt-gantt-legend i.g-routegps { background: rgba(16, 185, 129, .5); border: 1px solid #10b981; }
.lt-gantt-legend i.g-anom { background: #ef4444; border-radius: 50%; width: 9px; height: 9px; }

/* Dashboard alt satırı — Mevzuat Geçiş Takvimi · Veri Sağlığı · KTY Uyumu tek satırda (2026-08-26) */
.sps-lower-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
    align-items: stretch;   /* üç kart aynı yükseklikte */
    margin: 0 0 18px;
}
.sps-lower-row .sps-timeline { margin: 0; height: 100%; box-sizing: border-box; }
.sps-lower-row .sps-proof-grid { margin: 0; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
.sps-lower-row .sps-proof-card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.sps-lower-row .sps-proof-actions { margin-top: auto; }
@media (max-width: 1200px) { .sps-lower-row { grid-template-columns: 1fr; } }

/* Kokpit sefer paneli — müşteri takip linki butonu (kapat butonuyla aynı kabuk, hover mor) */
.kp-rsp-tracklink { margin-right: 6px; font-size: 13px; }
.kp-rsp-tracklink:hover { color: var(--sp-primary-dark); background: rgba(245, 158, 11, 0.12); }

/* ============================================================================
   SÜRÜCÜ BİLDİRİMİ — Sürücü kartı header ikonları + SMS/E-posta formu + geçmiş
   (2026-08-28) · JS: user-notification.js · Partial: _SpModalUserNotification*.cshtml
   Namespace: un- (form) · unl- (loglar). Mevcut kurallar EZİLMEZ — yalnız ek.
   ============================================================================ */

/* Modal header aksiyon ikonu — .sp-modal-close ile aynı kabuk, hover amber vurgulu.
   (.sp-icon-btn KULLANILMAZ: o topbar'a göre --sp-top-on-dim renkli, açık zeminde okunmaz.) */
.sp-modal-headbtn {
    width: 34px; height: 34px;
    border: none;
    background-color: var(--sp-bg-input);
    color: var(--sp-text-muted);
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sp-modal-headbtn:hover { background-color: rgba(245, 158, 11, 0.16); color: var(--sp-primary-dark); }
.sp-modal-headbtn svg { width: 16px; height: 16px; }
.sp-modal-headbtn[hidden] { display: none; }

/* Sürücü kartının ÜSTÜNE açılırlar → stacked modal katmanı (spConfirm ile aynı: 10001) */
#SpModalUserNotification,
#SpModalUserNotificationLogs { z-index: 10001; }

/* --- Form: olay açıklaması --- */
.un-event-desc {
    margin: 2px 0 6px;
    font-size: 11.5px; line-height: 1.4;
    color: var(--sp-text-muted);
}

/* --- Form: alıcı çipleri --- */
.un-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.un-chips-empty {
    font-size: 11.5px; color: var(--sp-text-muted);
    padding: 7px 10px;
    background-color: var(--sp-bg-input);
    border: 1px dashed var(--sp-border);
    border-radius: var(--sp-radius-sm);
}
.un-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px;
    background-color: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    font-size: 11.5px;
}
.un-chip-address { font-weight: 600; color: var(--sp-text); }
.un-chip-name { color: var(--sp-text-muted); }
.un-chip-remove {
    width: 18px; height: 18px;
    border: none; background-color: transparent;
    color: var(--sp-text-muted);
    border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.un-chip-remove:hover { background-color: rgba(239, 68, 68, 0.14); color: #dc2626; }
.un-chip-remove svg { width: 11px; height: 11px; }

/* "Alıcı Ekle" input'unun yanındaki buton — label yüksekliği kadar aşağı hizalanır */
.un-add-action { display: flex; flex-direction: column; justify-content: flex-end; }
.un-add-action > label { visibility: hidden; }
.un-add-action .sp-btn-ghost { align-self: flex-start; }

/* --- Form: SMS sayacı --- */
.un-counter {
    margin: -2px 0 8px;
    font-size: 11px; font-weight: 600;
    color: var(--sp-text-muted);
    text-align: right;
}

/* --- Form: parametre çipleri --- */
.un-params-box {
    margin-top: 4px; padding: 9px 11px;
    background-color: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
}
.un-params-title { font-size: 11.5px; font-weight: 700; color: var(--sp-text); margin-bottom: 3px; }
.un-params-hint { font-size: 10.5px; line-height: 1.45; color: var(--sp-text-muted); margin-bottom: 7px; }
.un-params-hint strong { color: var(--sp-text); font-weight: 700; }
.un-params { display: flex; flex-wrap: wrap; gap: 5px; }
.un-param {
    display: inline-flex; flex-direction: column; gap: 1px;
    padding: 4px 9px; text-align: left;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.un-param:hover { border-color: var(--sp-primary); background-color: rgba(245, 158, 11, 0.08); }
.un-param-code { font-size: 11px; font-weight: 700; color: var(--sp-primary-dark); }
.un-param-desc { font-size: 10px; color: var(--sp-text-muted); }

/* --- Form: önizleme --- */
.un-preview {
    margin-top: 10px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
}
.un-preview-head {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 11px;
    background-color: var(--sp-bg-input);
    border-bottom: 1px solid var(--sp-border);
    font-size: 11.5px; font-weight: 700; color: var(--sp-text);
}
.un-preview-head svg { width: 14px; height: 14px; color: var(--sp-primary-dark); }
.un-preview-head small { margin-left: auto; font-size: 10px; font-weight: 500; color: var(--sp-text-muted); }
.un-preview-title { padding: 8px 11px 0; font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.un-preview-body {
    padding: 9px 11px 11px;
    font-size: 12px; line-height: 1.5; color: var(--sp-text);
    white-space: pre-wrap; word-break: break-word;
    max-height: 260px; overflow-y: auto;
}

/* --- Bildirim geçmişi --- */
.unl-grid { margin-bottom: 10px; }
.unl-detail {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
}
.unl-detail[hidden] { display: none; }
.unl-detail-head {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 11px;
    background-color: var(--sp-bg-input);
    border-bottom: 1px solid var(--sp-border);
    font-size: 11.5px; font-weight: 700; color: var(--sp-text);
}
.unl-detail-head .sp-btn-ghost { margin-left: auto; }
.unl-detail-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 11px 0;
    font-size: 11.5px; color: var(--sp-text-muted);
}
.unl-detail-subject { padding: 8px 11px 0; font-size: 12.5px; font-weight: 700; color: var(--sp-text); }
.unl-detail-body {
    padding: 9px 11px;
    font-size: 12px; line-height: 1.5; color: var(--sp-text);
    white-space: pre-wrap; word-break: break-word;
    max-height: 240px; overflow-y: auto;
}
.unl-detail-response {
    padding: 7px 11px 10px;
    font-size: 11px; color: var(--sp-text-muted);
    word-break: break-word;
}

/* .sp-row display:grid, UA'nın [hidden] kuralını ezer → hidden satır yine görünür kalır
   (op-print-dropdown ile aynı tuzak). Kapalı hâli bu modal kapsamında garantiye alınır. */
#SpModalUserNotification .sp-row[hidden] { display: none; }

/* ======================================================================
   MÜŞTERİLERİM — portföy özeti + müşteri kartı (2026-08-28)
   Ekran teknik bir veri listesiydi ("97/136 araç", cari id, denetim isimleri).
   Portala giren kişi buraya "bu müşteride ne var" sorusuyla geliyor; cevabı
   kesirle değil cümleyle veriyoruz.
   ====================================================================== */

.cm-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.cm-sum-cell {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 12px 14px;
}

.cm-sum-cell.is-fleet { border-left-color: var(--sp-text-muted); }
.cm-sum-cell.is-out   { border-left-color: #10b981; }
.cm-sum-cell.is-idle  { border-left-color: #f59e0b; }
.cm-sum-cell.is-opp   { border-left-color: #3b82f6; }

.cm-sum-num {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sp-text);
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

.cm-sum-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-secondary);
    margin-top: 2px;
}

.cm-sum-sub {
    font-size: 11px;
    color: var(--sp-text-muted);
    margin-top: 4px;
    line-height: 1.35;
}

/* ── Kartın ana cümlesi — ilk okunacak satır ─────────────────────────── */
/* grid-area ŞART: kart sabit grid-template-areas kullanıyor, alanı olmayan
   çocuk 44px'lik avatar sütununa düşüp metni dikey sarıyor. */
.cm-hero-lead {
    grid-area: lead;
    align-self: center;
    font-size: 14px;
    color: var(--sp-text-secondary);
    margin: 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-hero-lead b {
    font-size: 20px;
    font-weight: 700;
    color: var(--sp-text);
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
    margin-right: 3px;
}

.cm-hero-lead.is-live b { color: #047857; }
.cm-hero-lead.is-idle,
.cm-hero-lead.is-empty { color: var(--sp-text-muted); font-size: 13px; }

/* ── Kart pill'leri — sakin, bilgi taşır ────────────────────────────── */
.cm-pill.pill-mix,
.cm-pill.pill-age {
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    color: var(--sp-text-secondary);
    font-weight: 600;
}

.cm-pill.pill-age { color: var(--sp-text-muted); }

/* Kart pill satırı — tek satırda kalsın, taşarsa alta insin ama hücreyi bozmasın */
.cm-card.cm-card-hero .cm-hero-kpis {
    grid-area: metrics;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.cm-card.cm-card-hero .cm-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ======================================================================
   FİRMAM > Firma Bilgileri — görünüm + düzenleme (2026-08-31)
   Kaynak satır: project_customer (organization_customer = 1).
   Alan seti Master'ın firma formuyla hizalı; Logitera'nın yönettiği
   alanlar (firma kodu, ülke) ayrı ve salt-okunur gösterilir.
   ====================================================================== */

.cmp-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 16px;
}

.cmp-form .sp-group { margin: 0; }
.cmp-form-wide { grid-column: 1 / -1; }

.cmp-form textarea {
    resize: vertical;
    min-height: 56px;
}

.cmp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sp-border);
}

/* Logitera'nın yönettiği alanlar — bilgi olarak durur, düzenlenmez */
.cmp-locked {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--sp-border);
    font-size: 12px;
    color: var(--sp-text-muted);
}

.cmp-locked b {
    color: var(--sp-text-secondary);
    font-weight: 600;
    margin-left: 5px;
}

.cmp-locked em {
    margin-left: auto;
    font-style: normal;
    font-size: 11px;
    color: var(--sp-text-muted);
}

/* ======================================================================
   SpSelect — aranabilir açılır liste (sp-select.js)
   Kontrol normal bir <select> yüksekliğindedir; ARAMA KUTUSU PANELİN
   İÇİNDE durur, form düzenini büyütmez.
   ====================================================================== */

select.spsel-native { display: none; }

.spsel { position: relative; width: 100%; }

/* Zemin ve kenarlık, formdaki yerel <select>'lerle BİREBİR (.sp-group select).
   Aranabilir alan komşusundan farklı görünmemeli. */
.spsel-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 9px;
    background: var(--sp-bg-input);
    border: 1.5px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--sp-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.spsel-btn:hover { border-color: var(--sp-text-muted); }
.spsel.is-open .spsel-btn { border-color: var(--sp-primary); }

.spsel-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spsel-label.is-placeholder { color: var(--sp-text-muted); font-weight: 400; }

.spsel-caret {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--sp-text-muted);
    transition: transform 0.15s ease;
}

.spsel.is-open .spsel-caret { transform: rotate(180deg); }

.spsel-panel {
    display: none;
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-shadow-lg);
    overflow: hidden;
}

.spsel.is-open .spsel-panel { display: block; }

.spsel-search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--sp-border);
    background: var(--sp-bg-input);
}

.spsel-search svg { width: 14px; height: 14px; flex: none; color: var(--sp-text-muted); }

.spsel-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--sp-text);
}

.spsel-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}

.spsel-opt {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--sp-text);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.12s ease;
}

.spsel-opt:hover { background: var(--sp-bg-hover); }

.spsel-opt.is-selected {
    background: rgba(245, 158, 11, 0.12);
    color: var(--sp-primary-dark);
    font-weight: 600;
}

.spsel-empty {
    padding: 14px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--sp-text-muted);
}

/* K5 - karsi taraftan atanmis satir: kilit rozeti (Duzenle yerine) */
.op-row-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    cursor: default;
}

/* ============================================================
   GÖNDERİM İLERLEME MODALI  (.spi-pm-*)

   "Şifremi Unuttum" ekranında bağlantı gönderilirken açılır.
   Markup'ı /js/logitera-send-progress.js çizer — mantık ORTAK,
   burada yalnızca bu portalın deri renkleri var.

   Üç durum, gövdedeki sınıfla seçilir: is-sending · is-sent · is-error
   ============================================================ */

.spi-pm {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(28,25,23,0.68);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.spi-pm.is-open { opacity: 1; visibility: visible; }

.spi-pm-card {
    width: 100%;
    max-width: 366px;
    padding: 30px 28px 24px;
    border-radius: 16px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    box-shadow: 0 30px 70px -20px rgba(8, 10, 24, 0.55);
    text-align: center;
    transform: translateY(10px) scale(0.97);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.spi-pm.is-open .spi-pm-card { transform: none; }

.spi-pm-orbit { position: relative; width: 72px; height: 72px; margin: 0 auto 18px; }

.spi-pm-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(245,158,11,0.16);
    border-top-color: var(--sp-primary);
    border-right-color: var(--sp-primary-light);
    animation: spi-pm-spin 0.95s linear infinite;
}

.spi-pm-disc {
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
}

.spi-pm-disc img { width: 26px; height: 26px; object-fit: contain; }

.spi-pm-mark {
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.spi-pm-mark svg { width: 24px; height: 24px; stroke-width: 2.6; }

.spi-pm-h {
    margin: 0 0 6px;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sp-text);
}

.spi-pm-s { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--sp-text-muted); }

.spi-pm-mail {
    display: inline-block;
    margin-top: 9px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text);
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spi-pm-steps {
    list-style: none;
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--sp-border);
    text-align: left;
}

.spi-pm-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 12.5px;
    color: var(--sp-text-muted);
    transition: color 0.2s ease;
}

.spi-pm-steps li::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--sp-border);
    background: transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.spi-pm-steps li.is-active { color: var(--sp-text); font-weight: 600; }

.spi-pm-steps li.is-active::before {
    border-color: var(--sp-primary);
    animation: spi-pm-pulse 1.15s ease-in-out infinite;
}

.spi-pm-steps li.is-done { color: var(--sp-text); }

.spi-pm-steps li.is-done::before {
    border-color: var(--sp-primary);
    background: var(--sp-primary);
    animation: none;
}

.spi-pm-foot { margin-top: 20px; display: none; flex-direction: column; gap: 9px; }

.spi-pm-ghost {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    background: transparent;
    border: 1px solid var(--sp-border);
    transition: color 0.16s ease, border-color 0.16s ease;
}

.spi-pm-ghost:hover { color: var(--sp-text); border-color: var(--sp-text-muted); }

.spi-pm.is-sending .spi-pm-foot { display: none; }

.spi-pm.is-sent .spi-pm-ring { animation: none; border-color: rgba(34, 197, 94, 0.30); }
.spi-pm.is-sent .spi-pm-disc { display: none; }
.spi-pm.is-sent .spi-pm-ok { display: flex; background: #16A34A; }
.spi-pm.is-sent .spi-pm-foot { display: flex; }

.spi-pm.is-error .spi-pm-ring { animation: none; border-color: rgba(220, 38, 38, 0.30); }
.spi-pm.is-error .spi-pm-disc { display: none; }
.spi-pm.is-error .spi-pm-fail { display: flex; background: #DC2626; }
.spi-pm.is-error .spi-pm-steps { display: none; }
.spi-pm.is-error .spi-pm-foot { display: flex; }

.spi-pm-foot .sp-btn { height: 42px; }

@keyframes spi-pm-spin { to { transform: rotate(360deg); } }

@keyframes spi-pm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.34); }
    50%      { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .spi-pm,
    .spi-pm-card,
    .spi-pm-steps li,
    .spi-pm-steps li::before,
    .spi-pm-ghost { transition: none; }

    .spi-pm-ring,
    .spi-pm-steps li.is-active::before { animation: none; }

    .spi-pm-ring { border-top-color: var(--sp-primary); }
}

@media (max-width: 420px) {
    .spi-pm-card { padding: 26px 20px 20px; }
}

/* Sefer paneli — üçlü zaman şeridi (Planlanan / Şoförden Gelen / Araç Takip) — 2026-09-01 */
.kp-rsp-tl3 { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(120, 120, 140, .25); }
.kp-rsp-tl3-h { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 600; margin-bottom: 6px; }
.kp-rsp-tl3-h small { font-weight: 400; opacity: .7; }
.kp-rsp-tl3-row { display: grid; grid-template-columns: 14px 86px 1fr; align-items: center; column-gap: 8px; margin: 4px 0; font-size: 11px; }
.kp-rsp-tl3-row > i { font-size: 11px; opacity: .75; }
.kp-rsp-tl3-l { white-space: nowrap; opacity: .9; }
.kp-rsp-tl3-track { position: relative; height: 10px; border-radius: 5px; background-color: rgba(120, 120, 140, .18); overflow: hidden; }
.kp-rsp-tl3-fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.kp-rsp-tl3-fill.plan { background-color: #797bf2; }
.kp-rsp-tl3-fill.decl { background-color: #3b82f6; }
.kp-rsp-tl3-fill.gps { background-color: #10b981; }
.kp-rsp-tl3-fill.open { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
.kp-rsp-tl3-v { grid-column: 3; font-size: 10.5px; opacity: .7; margin-top: 1px; }
.kp-rsp-tl3-diff { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; margin-top: 4px; opacity: .85; }
.kp-rsp-tl3-diff .warn { color: #f59e0b; }
/* Güzergah — GPS doğrulama satırı */
.kp-rsp-stop-gps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11px; margin-top: 4px; padding: 3px 6px; border-radius: 6px; background-color: rgba(16, 185, 129, .08); }
.kp-rsp-stop-gps.miss { background-color: rgba(239, 68, 68, .08); }
.kp-rsp-stop-gps > i:first-child { color: #10b981; }
.kp-rsp-stop-gps.miss > i:first-child { color: #ef4444; }
.kp-rsp-stop-gps small { opacity: .75; }
.kp-rsp-stop-gps .kp-rsp-stop-trdiff.early { color: #10b981; }
.kp-rsp-stop-gps .kp-rsp-stop-trdiff.late { color: #ef4444; }

/* ---- Hikaye zaman şeridi: okunur nokta işaretleri + sıra çizgisi (2026-09-02) ----
   Numaralı rozetler 19 px'ti ve içindeki sayı line-height ile ortalanıyordu; yazı
   tipi metrikleri yüzünden sayı yukarı kaçıyordu. Rozet 22 px'e çıktı ve ortalama
   flex'e devredildi — sayı her temada tam ortada durur. Şerit yükseklikleri rozetle
   birlikte büyüdü, aksi halde rozet kırpılırdı.
   Portal Kokpit'te (--sp-* değişkenleri başka değerlerde) plan rozeti "beyaz üstüne
   beyaz" kalıyordu: dolgu artık token'a değil SABİT okunur palete bağlı, yalnız halka
   (border) kart zeminini takip eder. Renk veren her token'a gerçek fallback verildi. */
.lt-gantt-lane.g-lane-arr { height: 30px; }
.lt-gantt-lane.g-lane-arr .lt-gantt-track { height: 28px; }
.lt-gantt-lane.g-lane-plan { height: 27px; }
.lt-gantt-lane.g-lane-plan .lt-gantt-track { height: 21px; }

.lt-gantt-arrpt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -.2px;
    border-color: var(--sp-bg-card, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .32);
}

/* Planlanan Adresler rozetleri — dolgu token'a BİLEREK bağlanmadı: portalda
   var(--sp-bg-card) beyaza düşünce rozet görünmez oluyordu. */
.lt-gantt-arrpt.plan {
    background-color: #eef2ff;
    color: #4338ca;
    border-color: var(--sp-bg-card, #ffffff);
    box-shadow: 0 0 0 1px #c7d2fe, 0 1px 3px rgba(0, 0, 0, .32);
}
.lt-gantt-arrpt.plan.visited { background-color: #c7d2fe; color: #3730a3; }

/* Ardışık noktaları birleştiren ince sıra çizgisi — rozetlerin ALTINDA kalır.
   Rengi token'dan gelmiyor: token yoksa da (portal) görünür kalmalı. */
.lt-gantt-seqline {
    position: absolute;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    border-radius: 2px;
    background-color: rgba(100, 116, 139, .45);
    z-index: 1;
    pointer-events: none;
}
.lt-gantt-lane.g-lane-planpt .lt-gantt-seqline { background-color: rgba(121, 123, 242, .45); }

/* Planlı İş şeridinin başlangıç/bitiş elmasları da okunur büyüklükte. */
.lt-gantt-pt > i { width: 14px; height: 14px; margin-left: -7px; border-width: 2px; border-color: var(--sp-bg-card, #ffffff); }
.lt-gantt-pt > span { font-size: 11px; margin-left: 5px; color: var(--sp-text, #334155); }
.lt-gantt-pt.g-pt-pending > span { color: var(--sp-text-muted, #64748b); }

/* Lejant / etiket / eksen — büyüyen şeritle orantılı okunurluk + token fallback'leri. */
.lt-gantt-lbl { font-size: 10.5px; color: var(--sp-text-muted, #64748b); }
.lt-gantt-legend { font-size: 10.5px; color: var(--sp-text-muted, #64748b); }
.lt-gantt-axis > span { font-size: 10px; color: var(--sp-text-muted, #64748b); }
.lt-gantt-band > span { font-size: 9.5px; }

body.is-dark .lt-gantt-seqline { background-color: rgba(255, 255, 255, .28); }
body.is-dark .lt-gantt-lane.g-lane-planpt .lt-gantt-seqline { background-color: rgba(121, 123, 242, .60); }
body.is-dark .lt-gantt-arrpt { box-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
body.is-dark .lt-gantt-arrpt.plan {
    background-color: #3730a3;
    color: #e0e7ff;
    box-shadow: 0 0 0 1px #4338ca, 0 1px 3px rgba(0, 0, 0, .55);
}
body.is-dark .lt-gantt-arrpt.plan.visited { background-color: #4f46e5; color: #ffffff; }

/* Üçlü şerit — ortak eksen uçları + pasif kısım taraması */
.kp-rsp-tl3-axis { display: flex; justify-content: space-between; margin: 0 0 4px 116px; font-size: 10px; opacity: .75; }
.kp-rsp-tl3-track { border: 1px solid rgba(120, 120, 140, .28); }
.kp-rsp-tl3-gap { position: absolute; top: 0; bottom: 0; background-image: repeating-linear-gradient(90deg, rgba(120, 120, 140, .22) 0 3px, transparent 3px 7px); }

/* ============================================================================
   Kokpit İş Emri — Güzergah / Yükler / Yükleme Planı kuralları (2026-09-02)
   Bu sınıflar Geowix kopyasında (css/RouteOperationMapCockpit/supplier-portal.css)
   vardı ama portal kopyasına hiç taşınmamıştı; operasyon-kokpit.js ikisinde de aynı
   markup'ı ürettiği için portalda Güzergah tablosu ve Yükler sekmesi biçimsiz kalıyordu.
   Marka tonu portal standardına (amber) çevrildi; geri kalanı birebir aynı.
   ============================================================================ */

/* Durak başlığı — sol rozet grubu (rol + bağlı paket), butonlar sağa itilir */
.kp-ie-stop-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-right: auto; min-width: 0; }
/* Rol rozetleri — Yükleme (mavi) / Teslimat (amber) */
.kp-ie-role-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.kp-ie-role-pickup { background-color: rgba(59, 130, 246, .16); color: #3b82f6; }
.kp-ie-role-delivery { background-color: rgba(245, 158, 11, .16); color: #f59e0b; }

/* 1. satır: Açıklama·Tarih·Plaka·Sürücü·Taşıma·Sefer (Hareket gizli) */
.kp-ie-grid-6 { grid-template-columns: repeat(6, 1fr); }

/* Güzergah sekmesi — harita/nokta bölüşümü Geowix ile aynı orana çekildi:
   portalda harita 56%'da sıkışıyor, nokta paneli gereğinden geniş kalıyordu. */
.kp-ie-guzergah-map { flex: 1 1 75%; }
.kp-ie-guzergah-points { flex: 1 1 25%; }

/* Yükleme Planı — 3B kasa simülasyonu iframe */
.kp-ie-yukleme {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kp-ie-load-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--sp-text, #1c1917);
    background-color: var(--sp-bg-soft, #f8f8f7);
    border: 1px solid var(--sp-border, #e7e5e4);
    border-radius: 8px;
}
.kp-ie-load-frame-wrap {
    width: 100%;
    height: 66vh;
    min-height: 420px;
    border: 1px solid var(--sp-border, #e7e5e4);
    border-radius: 8px;
    overflow: hidden;
}
.kp-ie-load-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Başlangıç · bitiş inputları yan yana, eşit genişlik */
.kp-ie-slot-row { display: flex; gap: 6px; }
.kp-ie-slot-row .kp-ie-slot-in { flex: 1 1 0; min-width: 0; }

/* ===== Güzergah tab — route-list-view mantığı: istatistik kartları + nokta tablosu ===== */
.kp-ie-guz { padding: 6px 2px 12px; }
.kp-ie-guz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kp-ie-guz-stat {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--sp-border, #e7e5e4); border-radius: var(--sp-radius-sm, 6px);
    background-color: var(--sp-bg-card, #ffffff);
}
.kp-ie-guz-stat-ic {
    width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background-color: rgba(245, 158, 11, .14); color: var(--sp-primary, #f59e0b); font-size: 14px;
}
.kp-ie-guz-stat-c { display: flex; flex-direction: column; min-width: 0; }
.kp-ie-guz-stat-v { font-size: 16px; font-weight: 800; color: var(--sp-text, #1c1917); line-height: 1.1; }
.kp-ie-guz-stat-l { font-size: 10.5px; color: var(--sp-text-muted, #78716c); margin-top: 2px; }
.kp-ie-guz-legend { font-size: 10.5px; color: var(--sp-text-muted, #78716c); margin-bottom: 7px; }
.kp-ie-guz-legend i { color: var(--sp-primary, #f59e0b); margin-right: 4px; }
.kp-ie-guz-legend b { color: var(--sp-text-secondary, #57534e); font-weight: 700; }
.kp-ie-guz-tablewrap { overflow-x: auto; border: 1px solid var(--sp-border, #e7e5e4); border-radius: var(--sp-radius-sm, 6px); }
.kp-ie-guz-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.kp-ie-guz-table th, .kp-ie-guz-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--sp-border, #e7e5e4); white-space: nowrap; }
.kp-ie-guz-table th { font-size: 10.5px; font-weight: 700; color: var(--sp-text-muted, #78716c); background-color: var(--sp-bg-input, #f5f5f4); position: sticky; top: 0; }
.kp-ie-guz-table tbody tr:last-child td { border-bottom: 0; }
.kp-ie-guz-table tbody tr:hover td { background-color: rgba(120, 120, 120, .06); }
.kp-ie-guz-table td { color: var(--sp-text, #1c1917); }
.kp-ie-guz-seq { font-weight: 700; color: var(--sp-primary, #f59e0b); text-align: center; }
.kp-ie-guz-num { text-align: center; }
.kp-ie-guz-addr { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

/* Yükler tab — Sipariş Bazlı / Paket Bazlı görünüm geçişi */
.kp-ie-yuk-toggle { display: flex; gap: 6px; margin-bottom: 12px; }
.kp-ie-yuk-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    border: 1px solid var(--sp-border, #e7e5e4); border-radius: var(--sp-radius-sm, 6px);
    background-color: var(--sp-bg-card, #ffffff); color: var(--sp-text-secondary, #57534e);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kp-ie-yuk-tab i { font-size: 11px; }
.kp-ie-yuk-tab:hover { color: var(--sp-text, #1c1917); }
.kp-ie-yuk-tab.active { background-color: rgba(245, 158, 11, .14); border-color: var(--sp-primary, #f59e0b); color: var(--sp-primary, #f59e0b); }

/* Paket Durumu rozetleri — RouteOperationDashboard "dx-status-badge" tasarımı (renkler DB'den, inline style) */
.kp-ie-pkgstat {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin: 2px 3px 2px 0;
}
.kp-ie-guz-table td.kp-ie-pkgstat-cell { white-space: normal; min-width: 130px; }