/* ============================================================
   DASHBOARD (Home.razor) — Sharp corners, responsive
   ============================================================ */

.dash-shell {
    padding: 16px;
    max-width: 1800px;
    margin: 0 auto;
}

/* === Ana ekran dashboard secici (Home.razor host) === */
.dash-picker-bar {
    max-width: 1800px;
    margin: 0 auto;
    padding: 16px 16px 0;
}

.dash-empty-state {
    max-width: 1800px;
    margin: 60px auto;
    padding: 16px;
    text-align: center;
    color: var(--yl-text-light);
    font-size: 0.9rem;
}

/* === Ana / yan panel iki sutunlu yerleshim === */
.dash-layout {
    display: grid;
    /* 600 -> 660 px (13.09.2026): sutunlar kendi icinde kaydigindan iki kaydirma
       cubugu genisligi gitti, kartlar daraldi; kayip geri alindi. */
    grid-template-columns: 1fr 660px;
    gap: 16px;
    align-items: start;
}

.dash-main { min-width: 0; }

.dash-side { min-width: 0; }

/* ── "Yalnizca Gorusmeler" modu ────────────────────────────────────────
   Kullanici istegi: ekrani dar olan (veya telefondan bakan) kullanici KPI /
   grafik bloklarini gizleyip yalnizca gorusme panosuna bakabilsin. Pano tam
   genislige yayilir ve daha uzun bir dikey alan kullanir. */
.dash-layout.is-yalniz-touch { grid-template-columns: 1fr; }
.dash-layout.is-yalniz-touch .dash-timeline { max-height: calc(100vh - 108px); }

.dash-mod-btn {
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 7px 12px;
    font-size: 0.8rem;
    color: var(--yl-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.dash-mod-btn:hover { background: var(--yl-bg); }
.dash-mod-btn.is-on {
    background: var(--yl-primary);
    border-color: var(--yl-primary);
    color: #fff;
}
/* Isaretleyici kutucugu — acikken icinde tik gorunur */
.dash-mod-kutu {
    width: 13px;
    height: 13px;
    border: 1px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    line-height: 1;
    flex-shrink: 0;
}

.app-root.dark .dash-mod-btn { background: #161b22; border-color: #30363d; color: #e6edf3; }
.app-root.dark .dash-mod-btn:hover { background: #21262d; }

/* === SIDE TIMELINE === */
.dash-timeline {
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 14px 12px 12px;
    position: relative;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

/* === İKİLİ SÜTUN ÇİZELGE (sol: bugün & yaklaşan, sağ: gecikmiş) === */
.dash-tl-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}
.dash-tl-col {
    min-width: 0;
    /* Kullanici istegi 13.09.2026: "yaklasan 6-7 tane gosteriyor, eskilere de
       ulasabilsinler" — kart sayisi sinirlanmaz, sutun kendi icinde kayar. */
    max-height: 78vh;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
}
.dash-tl-colhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 9px;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: 3;
}
.dash-tl-colhead-active {
    color: #065f46;
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.dash-tl-colhead-overdue {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}
.dash-tl-colhead-done {
    color: #3730a3;
    background: #eef2ff;
    border-color: #c7d2fe;
}
.dash-tl-colcount {
    min-width: 18px;
    padding: 0 5px;
    font-size: 0.66rem;
    font-weight: 800;
    text-align: center;
    color: #fff;
    background: #64748b;
    border-radius: 0;
}
.dash-tl-colhead-active  .dash-tl-colcount { background: #10b981; }
.dash-tl-colhead-overdue .dash-tl-colcount { background: #ef4444; }
.dash-tl-colhead-done    .dash-tl-colcount { background: #6366f1; }
.dash-tl-colempty {
    padding: 10px 8px;
    font-size: 0.7rem;
    color: var(--yl-text-light);
    text-align: center;
    border: 1px dashed var(--yl-border);
    border-radius: 0;
}
.dash-tl-recent {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--yl-border);
}

/* İkili sütunda merkezi dikey çizgi yerine sütun başına gerekmiyor;
   sütunlar daraldığında (telefon) alt alta yığılır. */
/* ‼️ ESIK 720 DEGIL 1100.
   Iki sutun yan yana durunca her kart pencerenin yarisi kadar kaliyor; ~800px
   genisligindeki bir masaustu penceresinde kart ~340px'e dusuyor ve icindeki
   teklif no + spec + stok kodu satirlari sigmiyordu (kullanici bildirdi:
   "az disa tasan kisim var... kartlari genissetsek"). 1100px altinda kartlar
   ALT ALTA ve TAM GENISLIK olur. */
@media (max-width: 1100px) {
    .dash-tl-cols { grid-template-columns: 1fr; }
}

.dash-tl-today {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 11px 12px 11px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.dash-tl-today-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
    animation: dashTlPulse 1.8s ease-in-out infinite;
}

@keyframes dashTlPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15); }
}

.dash-tl-item {
    position: relative;
    padding: 9px 10px 9px 30px;
    margin-bottom: 7px;
    font-size: 0.72rem;
    z-index: 1;
    /* ‼️ "backwards" — "both" DEGIL. Fark gorsel DEGIL, davranissal:
       "both" bitiste son kareyi (transform: translateX(0)) UZERINDE BIRAKIR;
       transform ise hem KATMAN BAGLAMI hem de position:fixed icin KAPSAYICI
       BLOK yaratir. Bu yuzden etiketleme listesinin perdesi (fixed, inset:0)
       tum ekrani degil SADECE BU SATIRI kapliyordu -> disariya tiklayinca liste
       kapanmiyordu; liste de satirin disina cikamiyordu.
       "backwards" gecikme sirasinda ilk kareyi uygular (giris animasyonu AYNEN
       korunur) ama bitiste hicbir sey birakmaz — son kare zaten elemanin dogal
       hali (opacity 1, transform yok). */
    animation: dashTlSlideIn 450ms ease-out backwards;
}

/* ‼️ ETIKETLEME ACILIR LISTESI ALTTAKI SATIRLARIN ALTINDA KALIYORDU.
   .dash-tl-item bir KATMAN BAGLAMI yaratir (position:relative + z-index:1) —
   eskiden animasyonun kalici transform'u yuzunden IKINCI bir yoldan daha
   yaratiyordu, o yukarida "backwards" ile giderildi.
   Baglam icindeki hicbir cocuk, ne kadar yuksek z-index alirsa alsin, satirin
   DISINA cikamaz; DOM'da SONRA gelen kardes satirlar onun uzerine basar ve
   arayuz "birbirine geciyor" gorunur.
   (Kullanici bildirdi; tarayicida elementFromPoint ile dogrulandi: listenin
   uzerindeki eleman komsu zaman cizelgesi satiriydi.)
   Cozum: icinde odak varken — yani liste aciktayken — satirin KENDISI yukselir. */
.dash-tl-item:focus-within { z-index: 950; }  /* .etn-liste ile AYNI olcek — bkz. touchcrm.css */

@keyframes dashTlSlideIn {
    0%   { opacity: 0; transform: translateX(8px); }
    100% { opacity: 1; transform: translateX(0); }
}

.dash-tl-item:nth-child(2)  { animation-delay: 60ms; }
.dash-tl-item:nth-child(3)  { animation-delay: 120ms; }
.dash-tl-item:nth-child(4)  { animation-delay: 180ms; }
.dash-tl-item:nth-child(5)  { animation-delay: 240ms; }
.dash-tl-item:nth-child(6)  { animation-delay: 300ms; }
.dash-tl-item:nth-child(7)  { animation-delay: 360ms; }
.dash-tl-item:nth-child(n+8) { animation-delay: 420ms; }

.dash-tl-item-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin-bottom: 2px;
}

.dash-tl-item-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.7rem;
    color: var(--yl-text-light);
}

.dash-tl-no {
    color: #185FA5;
    font-weight: 700;
    font-size: 0.7rem;
}

.dash-tl-musteri {
    color: var(--yl-text);
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-tl-note {
    font-size: 0.68rem;
    font-style: italic;
    color: var(--yl-text-light);
    margin-top: 3px;
    padding-left: 6px;
    border-left: 2px solid #e5e7eb;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.dash-tl-overdue .dash-tl-note {
    color: #450A0A;
    border-left-color: rgba(69, 10, 10, 0.35);
}

/* Gecikmis (kirmizi kart) */
.dash-tl-overdue {
    background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
    color: #fff;
    padding-left: 34px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

/* ‼️ KOYU BORDO — beyaz/acik sari DEGIL.
   Gecikmis kartin zemini ACIK kirmizi (#fca5a5 → #f87171). Uzerine beyaz
   (kontrast ~2.4) ya da acik sari (#fef3c7, ~2.4) metin konunca okunmuyordu;
   kullanici bildirdi: "sari olanlar belli olmuyor". Koyu bordo (#450A0A) ile
   kontrast 5,8'e cikar — WCAG AA esigi 4,5 (olculdu). */
.dash-tl-overdue .dash-tl-item-body,
.dash-tl-overdue .dash-tl-no,
.dash-tl-overdue .dash-tl-musteri { color: #450A0A; }

.dash-tl-overdue .dash-tl-no { color: #450A0A; font-weight: 800; }

.dash-tl-overdue .dash-tl-icon {
    position: absolute;
    left: 10px;
    top: 9px;
    width: 16px;
    height: 16px;
    background: #fff;
    color: #dc2626;
    font-weight: 900;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
}

/* Bugunun gorusmeleri */
.dash-tl-planned {
    padding-left: 34px;
    color: var(--yl-text);
}

.dash-tl-planned .dash-tl-icon {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 16px;
    height: 16px;
    background: #10b981;
    color: #fff;
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
}

.dash-tl-planned .dash-tl-title { color: #059669; }

/* Haftanin gorusmeleri */
.dash-tl-upcoming {
    padding-left: 34px;
}

.dash-tl-upcoming .dash-tl-icon {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 16px;
    height: 16px;
    background: #3b82f6;
    color: #fff;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
}

.dash-tl-upcoming .dash-tl-title { color: #1d4ed8; }

/* Yapilmis (gri checkmark) */
.dash-tl-done {
    color: var(--yl-text-light);
    padding-left: 34px;
}

.dash-tl-done .dash-tl-item-head {
    font-weight: 600;
    color: var(--yl-text);
    gap: 8px;
}

.dash-tl-check {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 2px solid #9ca3af;
    color: #6b7280;
    font-size: 0.65rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
}

.dash-tl-date {
    font-size: 0.72rem;
    color: var(--yl-text);
}

.dash-tl-badge {
    margin-left: auto;
    background: #eef2ff;
    color: #4338ca;
    padding: 1px 6px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dash-tl-empty {
    text-align: center;
    padding: 20px 10px;
    color: var(--yl-text-light);
    font-size: 0.78rem;
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.dash-header h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--yl-primary);
}

.dash-header p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--yl-text-light);
}

.dash-refresh-btn {
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 7px 14px;
    font-size: 0.8rem;
    color: var(--yl-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.dash-refresh-btn:hover {
    background: var(--yl-primary);
    color: #fff;
}

/* === HEADER ACTIONS & FILTER BAR === */
.dash-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* === FILTRE BAR === */
.dash-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.dash-filter-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 180px;
    max-width: 260px;
}

.dash-filter-input-icon {
    position: absolute;
    left: 9px;
    width: 14px;
    height: 14px;
    color: var(--yl-text-light);
    pointer-events: none;
    flex-shrink: 0;
}

.dash-filter-input {
    width: 100%;
    padding: 7px 28px 7px 30px;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    font-size: 0.8rem;
    color: var(--yl-primary);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.dash-filter-input:focus { border-color: var(--yl-accent); }
.dash-filter-input::placeholder { color: var(--yl-text-light); }

.dash-filter-input-clear {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--yl-text-light);
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
    display: flex;
    align-items: center;
}
.dash-filter-input-clear:hover { color: #dc2626; }

.dash-filter-select {
    padding: 7px 10px;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    font-size: 0.8rem;
    color: var(--yl-primary);
    background: #fff;
    outline: none;
    cursor: pointer;
    flex: 0 0 auto;
    max-width: 180px;
    transition: border-color 0.15s;
}
.dash-filter-select:focus { border-color: var(--yl-accent); }

/* Multi-select satıcı dropdown */
.dash-ms-wrap {
    position: relative;
    flex: 0 0 auto;
}
.dash-ms-btn {
    display: flex;
    align-items: center;
    min-width: 130px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--yl-border);
    background: #fff;
    color: var(--yl-primary);
    font-size: 0.8rem;
    padding: 7px 10px;
    cursor: pointer;
    outline: none;
}
.dash-ms-btn span:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-ms-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid var(--yl-border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    z-index: 9999;
}
.dash-ms-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--yl-text);
    transition: background 0.1s;
    white-space: nowrap;
}
.dash-ms-item:hover { background: #f0f4ff; }
.dash-ms-item.is-checked { background: #eef2ff; color: var(--yl-accent); font-weight: 600; }
.dash-ms-check {
    display: inline-block;
    width: 14px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--yl-accent);
    font-weight: 700;
}

.dash-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--yl-accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    animation: dashFadeIn 0.2s ease;
}

.dash-filter-badge-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
    margin-left: 2px;
}
.dash-filter-badge-close:hover { color: #fff; }

/* Remind button - artik kullanilmiyor ama toast icin badge/bell kalsin */
.dash-remind-btn {
    position: relative;
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 7px 14px 7px 12px;
    font-size: 0.8rem;
    color: #dc2626;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
}

.dash-remind-btn:hover {
    background: #dc2626;
    color: #fff;
}

.dash-remind-btn:hover .dash-remind-badge {
    background: #fff;
    color: #dc2626;
}

.dash-remind-bell {
    width: 14px;
    height: 14px;
    display: inline-block;
    animation: dashBellRing 2.5s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes dashBellRing {
    0%, 88%, 100% { transform: rotate(0); }
    90%           { transform: rotate(14deg); }
    92%           { transform: rotate(-12deg); }
    94%           { transform: rotate(10deg); }
    96%           { transform: rotate(-8deg); }
    98%           { transform: rotate(0); }
}

.dash-remind-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    line-height: 1;
}

.dash-remind-badge.is-pulse {
    animation: dashBadgePulse 1.8s ease-in-out infinite;
}

@keyframes dashBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* === TOAST (sag alt kose) === */
.dash-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: #fff;
    border: 1px solid var(--yl-border);
    border-left: 4px solid #dc2626;
    padding: 14px 16px 14px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 340px;
    z-index: 9999;
    animation: dashToastIn 450ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

@keyframes dashToastIn {
    0%   { opacity: 0; transform: translateX(30px) translateY(10px); }
    100% { opacity: 1; transform: translateX(0) translateY(0); }
}

.dash-toast-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: #fee2e2;
    color: #dc2626;
    font-size: 1.1rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-toast-body { flex: 1; min-width: 0; }

.dash-toast-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--yl-primary);
    margin-bottom: 2px;
}

.dash-toast-text {
    font-size: 0.72rem;
    color: var(--yl-text-light);
    line-height: 1.35;
}

.dash-toast-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.dash-toast-btn {
    background: #dc2626;
    color: #fff;
    border: none;
    padding: 5px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    border-radius: 0;
}

.dash-toast-btn:hover { background: #991b1b; }

.dash-toast-btn.is-ghost {
    background: transparent;
    color: var(--yl-text-light);
    border: 1px solid var(--yl-border);
}

.dash-toast-btn.is-ghost:hover { background: #f3f4f6; color: var(--yl-text); }

.dash-toast-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: var(--yl-text-light);
    font-size: 0.9rem;
    cursor: pointer;
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
}

.dash-toast-close:hover { color: var(--yl-primary); }

/* === HIZLI AKSIYON BUTONLARI (timeline icinde) === */
.dash-tl-actions {
    display: flex;
    gap: 4px;
    margin-top: 7px;
    flex-wrap: wrap;
}

.dash-tl-btn {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--yl-border);
    color: var(--yl-primary);
    padding: 3px 8px;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.15s ease;
}

.dash-tl-btn:hover {
    background: var(--yl-primary);
    color: #fff;
    border-color: var(--yl-primary);
}

.dash-tl-btn.is-primary {
    background: #185FA5;
    color: #fff;
    border-color: #185FA5;
}

.dash-tl-btn.is-primary:hover { background: #0f4275; }

.dash-tl-btn.is-success {
    background: #059669;
    color: #fff;
    border-color: #059669;
}

.dash-tl-btn.is-success:hover { background: #047857; }

/* Kirmizi kartlarda buton kontrasti */
.dash-tl-overdue .dash-tl-btn {
    background: rgba(255, 255, 255, 0.95);
    border-color: transparent;
    color: #b91c1c;
}

.dash-tl-overdue .dash-tl-btn:hover {
    background: #fff;
    color: #7f1d1d;
}

.dash-tl-overdue .dash-tl-btn.is-primary {
    background: #7f1d1d;
    color: #fff;
}

.dash-tl-overdue .dash-tl-btn.is-primary:hover { background: #450a0a; }

/* Status butonlari (ONAY / RED / KAPAT) */
.dash-tl-btn.is-danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.dash-tl-btn.is-danger:hover { background: #991b1b; border-color: #991b1b; }

.dash-tl-btn.is-muted {
    background: #6b7280;
    color: #fff;
    border-color: #6b7280;
}
.dash-tl-btn.is-muted:hover { background: #374151; border-color: #374151; }

.dash-tl-overdue .dash-tl-btn.is-danger { background: #fff; color: #7f1d1d; }
.dash-tl-overdue .dash-tl-btn.is-danger:hover { background: #fecaca; }
.dash-tl-overdue .dash-tl-btn.is-muted { background: rgba(255,255,255,0.85); color: #4b1d1d; }
.dash-tl-overdue .dash-tl-btn.is-muted:hover { background: #fff; }

/* Ikinci satir status/puan actions */
.dash-tl-actions-status,
.dash-tl-actions-puan {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--yl-border);
}

.dash-tl-overdue .dash-tl-actions-status,
.dash-tl-overdue .dash-tl-actions-puan {
    border-top-color: rgba(255, 255, 255, 0.35);
}

.dash-tl-actions-puan { align-items: center; }

.dash-tl-puan-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--yl-text-light);
    margin-right: 2px;
}

.dash-tl-overdue .dash-tl-puan-label { color: rgba(255, 255, 255, 0.85); }

.dash-tl-puan {
    border: 1px solid var(--yl-border);
    background: #fff;
    padding: 2px 7px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.15s ease;
    color: var(--yl-primary);
}

.dash-tl-puan.is-puan-hot  { color: #dc2626; border-color: #dc2626; }
.dash-tl-puan.is-puan-warm { color: #d97706; border-color: #d97706; }
.dash-tl-puan.is-puan-cold { color: #2563eb; border-color: #2563eb; }

.dash-tl-puan.is-puan-hot:hover  { background: #dc2626; color: #fff; }
.dash-tl-puan.is-puan-warm:hover { background: #d97706; color: #fff; }
.dash-tl-puan.is-puan-cold:hover { background: #2563eb; color: #fff; }

/* === PUAN AKTİF (seçili) durumu === */
.dash-tl-puan { position: relative; }

.dash-tl-puan.is-puan-hot.puan-active  { background: #dc2626; color: #fff; border-color: #dc2626; }
.dash-tl-puan.is-puan-warm.puan-active { background: #d97706; color: #fff; border-color: #d97706; }
.dash-tl-puan.is-puan-cold.puan-active { background: #2563eb; color: #fff; border-color: #2563eb; }

/* HOT aktifken sağ üst köşe altın yıldız — CSS ::after ile (Razor @if gerektirmez) */
.dash-tl-puan.is-puan-hot.puan-active::after {
    content: "\2605";
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.65rem;
    line-height: 1;
    color: #fbbf24;
    text-shadow: 0 0 3px rgba(0,0,0,0.45);
    pointer-events: none;
}

.dash-tl-overdue .dash-tl-puan {
    background: rgba(255,255,255,0.92);
    border-color: transparent;
}

/* === HIZLI TEMAS FORMU === */
.dash-tl-quickform {
    margin-top: 8px;
    padding: 10px;
    background: #f9fafb;
    border: 1px solid var(--yl-border);
    display: flex;
    flex-direction: column;
    gap: 7px;
    animation: dashQuickFormIn 250ms ease-out;
}

@keyframes dashQuickFormIn {
    0%   { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

.dash-tl-overdue .dash-tl-quickform {
    background: rgba(255, 255, 255, 0.96);
}

.dash-tl-quickform-row {
    display: flex;
    gap: 6px;
}

.dash-tl-quickform select,
.dash-tl-quickform input,
.dash-tl-quickform textarea {
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 4px 7px;
    font-size: 0.7rem;
    background: #fff;
    color: var(--yl-text);
    width: 100%;
    font-family: inherit;
}

.dash-tl-quickform select { flex: 1; }
.dash-tl-quickform input[type="date"] { flex: 1; }
.dash-tl-quickform textarea { resize: vertical; min-height: 44px; }
/* Onay kutusu: yukaridaki genel "width:100%" kurali kutuyu tum satira yayip teklif
   satirinin USTUNE itiyordu (bagla / gorusme / red hedef satirlari, 02.10.2026). */
.dash-tl-quickform input[type="checkbox"] { width: auto; flex: 0 0 auto; padding: 0; margin: 0; }

.dash-tl-quickform-buttons {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

.dash-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--yl-text-light);
    font-size: 0.9rem;
}

/* === SKELETON SHIMMER === */
.dash-skeleton-card { opacity: 0.65; }

.dash-skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: dashShimmer 1.4s ease-in-out infinite;
    border-radius: 0;
}

.dash-skeleton-text {
    height: 12px;
    margin-bottom: 8px;
}

.dash-skeleton-value {
    height: 32px;
    width: 50%;
    margin-bottom: 8px;
}

.dash-skeleton-circle {
    width: 130px;
    height: 130px;
    margin: 16px auto;
}

@keyframes dashShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.app-root.dark .dash-skeleton {
    background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);
    background-size: 200% 100%;
    animation: dashShimmer 1.4s ease-in-out infinite;
}

/* === KPI ROW === */
.dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.dash-kpi-card {
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 88px;
    transition: all 0.15s ease;
}

.dash-kpi-card:hover {
    border-color: var(--yl-accent);
    box-shadow: 0 2px 8px rgba(59, 125, 221, 0.08);
}

.dash-kpi-label {
    font-size: 0.68rem;
    color: var(--yl-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.dash-kpi-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--yl-primary);
    line-height: 1.1;
}

.dash-kpi-sub {
    font-size: 0.68rem;
    color: var(--yl-text-light);
    margin-top: auto;
}

.dash-kpi-value.kv-red    { color: #DC2626; }
.dash-kpi-value.kv-green  { color: #059669; }
.dash-kpi-value.kv-blue   { color: var(--yl-accent); }
.dash-kpi-value.kv-orange { color: #D97706; }

/* === PIE ROW === */
.dash-pie-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.dash-pie-card {
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.dash-pie-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--yl-text-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
}

.dash-pie-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dash-pie-svg-wrap {
    width: 100%;
    max-width: 220px;
    position: relative;
    filter: drop-shadow(0 6px 14px rgba(26, 58, 107, 0.12));
}

.dash-pie-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Pie grubu: acilir-kapanir donus animasyonu */
.dash-pie-group {
    transform-origin: 100px 100px;
    animation: dashPieSpin 900ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

@keyframes dashPieSpin {
    0%   { transform: scale(0.3) rotate(-90deg); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Her dilim sirasiyla fade-in + scale */
.dash-pie-slice {
    transform-origin: 100px 100px;
    animation: dashSliceIn 550ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
    animation-delay: var(--slice-delay, 0ms);
    transition: transform 0.25s ease, filter 0.25s ease;
    cursor: pointer;
}

@keyframes dashSliceIn {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Hover: dilim parlasin ve hafif buyusun */
.dash-pie-group:hover .dash-pie-slice {
    filter: brightness(0.88) saturate(0.9);
}

.dash-pie-slice:hover {
    filter: brightness(1.1) saturate(1.2) drop-shadow(0 0 6px rgba(0, 0, 0, 0.15)) !important;
    transform: scale(1.05);
}

/* Orta delik icin hafif fade-in */
.dash-pie-hole {
    transform-origin: 100px 100px;
    animation: dashHoleIn 900ms ease-out both;
    animation-delay: 250ms;
}

@keyframes dashHoleIn {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.dash-pie-center-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: dashCenterIn 700ms ease-out both;
    animation-delay: 500ms;
}

@keyframes dashCenterIn {
    0%   { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

.dash-pie-center-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--yl-primary);
    line-height: 1;
}

.dash-pie-center-label {
    font-size: 0.6rem;
    color: var(--yl-text-light);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 3px;
}

.dash-pie-legend {
    margin-top: 14px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dash-pie-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    color: var(--yl-text);
    animation: dashLegendIn 500ms ease-out both;
    animation-delay: 600ms;
}

@keyframes dashLegendIn {
    0%   { opacity: 0; transform: translateX(-8px); }
    100% { opacity: 1; transform: translateX(0); }
}

.dash-pie-legend-item:nth-child(2) { animation-delay: 680ms; }
.dash-pie-legend-item:nth-child(3) { animation-delay: 760ms; }
.dash-pie-legend-item:nth-child(4) { animation-delay: 840ms; }
.dash-pie-legend-item:nth-child(5) { animation-delay: 920ms; }
.dash-pie-legend-item:nth-child(6) { animation-delay: 1000ms; }
.dash-pie-legend-item:nth-child(7) { animation-delay: 1080ms; }
.dash-pie-legend-item:nth-child(8) { animation-delay: 1160ms; }

.dash-pie-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 0;
    flex-shrink: 0;
}

.dash-pie-legend-label {
    flex: 1;
    color: var(--yl-text);
}

.dash-pie-legend-count {
    font-weight: 700;
    color: var(--yl-primary);
    min-width: 26px;
    text-align: right;
}

.dash-pie-legend-pct {
    color: var(--yl-text-light);
    min-width: 36px;
    text-align: right;
}

.dash-pie-empty {
    text-align: center;
    padding: 40px 10px;
    color: var(--yl-text-light);
    font-size: 0.78rem;
}

/* === PIE HOVER & CLICK FİLTRE === */

/* Aktif (seçili) dilim: beyaz dış çerçeve + brightness */
.dash-pie-slice.pie-slice-active {
    filter: brightness(1.08) saturate(1.25) drop-shadow(0 0 5px rgba(0,0,0,0.35)) !important;
    stroke-width: 4 !important;
    stroke: #fff !important;
}

/* Pie title'daki aktif filtre rozeti */
.pie-filter-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    border-radius: 0;
    vertical-align: middle;
    letter-spacing: 0.03em;
    opacity: 0.92;
    transition: opacity 0.15s;
}
.pie-filter-badge:hover { opacity: 1; }

/* Legend item hover + aktif */
.dash-pie-legend-item:hover {
    background: rgba(0,0,0,0.04);
}
.dash-pie-legend-item.pie-legend-active {
    background: rgba(0,0,0,0.06);
    font-weight: 700;
}
.dash-pie-legend-item.pie-legend-active .dash-pie-legend-label { font-weight: 700; }
.dash-pie-legend-item.pie-legend-active .dash-pie-legend-count { font-weight: 900; }

/* Center text animasyonu hover'da */
.dash-pie-center-value { transition: color 0.2s; }
.dash-pie-center-label { transition: color 0.2s; }

/* === PANEL ROW === */
.dash-panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}

.dash-panel {
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.dash-panel > .dash-panel-title { flex: 0 0 auto; }
.dash-panel > .dash-panel-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }

.dash-panel-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--yl-text-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
}

/* Kisi performansi satiri */
.dash-perf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: #f8f9fa;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    margin-bottom: 7px;
}

.dash-perf-row:last-child { margin-bottom: 0; }

.dash-perf-initials {
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: #E6F1FB;
    color: #185FA5;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-perf-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--yl-text);
}

.dash-perf-meta {
    font-size: 0.68rem;
    color: var(--yl-text-light);
}

.dash-perf-bar {
    margin-top: 5px;
    height: 4px;
    background: #e9ecef;
    overflow: hidden;
}

.dash-perf-bar-fill {
    height: 100%;
    background: var(--yl-accent);
}

.dash-perf-body {
    flex: 1;
    min-width: 0;
}

/* Stale teklif satiri */
.dash-stale-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--yl-border);
    font-size: 0.75rem;
}

.dash-stale-row:last-child { border-bottom: none; }

.dash-stale-days {
    font-size: 0.72rem;
    font-weight: 700;
    color: #A32D2D;
    min-width: 60px;
}

.dash-stale-no {
    font-weight: 700;
    color: #185FA5;
}

.dash-stale-customer {
    color: var(--yl-text-light);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-stale-satici {
    font-size: 0.68rem;
    color: var(--yl-text-light);
}

.dash-panel-empty {
    text-align: center;
    padding: 30px 10px;
    color: var(--yl-text-light);
    font-size: 0.78rem;
}

/* === RESPONSIVE === */

/* Buyuk tablet — yan panel altta */
/* Geniş panel (600px) ana içeriği daraltmasın: 1500px altında çizelge ana
   içeriğin ALTINA tam genişlikte iner — ikili sütun yine yan yana durur. */
@media (max-width: 1500px) {
    .dash-layout { grid-template-columns: 1fr; }
    .dash-timeline { max-height: none; }
}

/* Tablet */
@media (max-width: 1200px) {
    .dash-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .dash-pie-row { grid-template-columns: 1fr 1fr; }
    .dash-pie-row > :nth-child(3) { grid-column: 1 / -1; }
    .dash-pie-row > :nth-child(3) .dash-pie-svg-wrap { max-width: 180px; }
}

/* Mid */
@media (max-width: 840px) {
    .dash-panel-row { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 640px) {
    .dash-shell { padding: 10px; }
    .dash-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .dash-pie-row { grid-template-columns: 1fr; gap: 10px; }
    .dash-pie-row > :nth-child(3) { grid-column: auto; }
    .dash-kpi-value { font-size: 1.35rem; }
    .dash-kpi-card { min-height: 78px; padding: 11px 12px; }
    .dash-pie-card { padding: 12px; }
    .dash-header h2 { font-size: 1.1rem; }
}

/* === DARK MODE === */
.app-root.dark .dash-kpi-card,
.app-root.dark .dash-pie-card,
.app-root.dark .dash-panel {
    background: #1e2530;
    border-color: #30363d;
}

.app-root.dark .dash-kpi-value { color: #7dd3fc; }
.app-root.dark .dash-kpi-value.kv-red { color: #fca5a5; }
.app-root.dark .dash-kpi-value.kv-green { color: #86efac; }
.app-root.dark .dash-kpi-value.kv-blue { color: #7dd3fc; }
.app-root.dark .dash-kpi-value.kv-orange { color: #fcd34d; }

.app-root.dark .dash-kpi-label,
.app-root.dark .dash-kpi-sub,
.app-root.dark .dash-pie-title,
.app-root.dark .dash-panel-title,
.app-root.dark .dash-perf-meta,
.app-root.dark .dash-stale-customer,
.app-root.dark .dash-stale-satici,
.app-root.dark .dash-pie-legend-label,
.app-root.dark .dash-pie-center-label {
    color: #8b949e;
}

.app-root.dark .dash-perf-name,
.app-root.dark .dash-pie-legend-label,
.app-root.dark .dash-perf-row { color: #c9d1d9; }

.app-root.dark .dash-perf-row {
    background: #161b22;
    border-color: #30363d;
}

.app-root.dark .dash-perf-initials {
    background: #1e3a8a;
    color: #bfdbfe;
}

.app-root.dark .dash-perf-bar { background: #30363d; }

.app-root.dark .dash-stale-row { border-bottom-color: #30363d; }

.app-root.dark .dash-pie-center-value,
.app-root.dark .dash-pie-legend-count {
    color: #7dd3fc;
}

.app-root.dark .dash-refresh-btn {
    background: #161b22;
    border-color: #30363d;
    color: #7dd3fc;
}

.app-root.dark .dash-refresh-btn:hover {
    background: #1e3a8a;
    color: #fff;
}

/* Timeline dark mode */
.app-root.dark .dash-timeline {
    background: #1e2530;
    border-color: #30363d;
}

.app-root.dark .dash-timeline::before { background: #30363d; }

.app-root.dark .dash-tl-musteri { color: #c9d1d9; }
.app-root.dark .dash-tl-item-body { color: #8b949e; }
.app-root.dark .dash-tl-no { color: #7dd3fc; }
.app-root.dark .dash-tl-done .dash-tl-item-head { color: #c9d1d9; }
.app-root.dark .dash-tl-done .dash-tl-date { color: #c9d1d9; }
.app-root.dark .dash-tl-check { background: #0d1117; border-color: #30363d; color: #8b949e; }
.app-root.dark .dash-tl-badge { background: #1e3a8a; color: #bfdbfe; }
.app-root.dark .dash-tl-planned .dash-tl-title { color: #86efac; }
.app-root.dark .dash-tl-upcoming .dash-tl-title { color: #93c5fd; }
.app-root.dark .dash-tl-note { color: #8b949e; border-left-color: #30363d; }

/* Dark: header buton + toast + quick form */
.app-root.dark .dash-filter-input,
.app-root.dark .dash-filter-select,
.app-root.dark .dash-ms-btn {
    background: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
}
.app-root.dark .dash-filter-input:focus,
.app-root.dark .dash-filter-select:focus { border-color: #3b82f6; }
.app-root.dark .dash-ms-dropdown {
    background: #1c2128;
    border-color: #30363d;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.app-root.dark .dash-ms-item { color: #c9d1d9; }
.app-root.dark .dash-ms-item:hover { background: #21262d; }
.app-root.dark .dash-ms-item.is-checked { background: #1a2740; color: #7dd3fc; }
.app-root.dark .dash-filter-input::placeholder { color: #4b5563; }
.app-root.dark .dash-filter-input-icon { color: #4b5563; }
.app-root.dark .dash-filter-input-clear { color: #4b5563; }
.app-root.dark .dash-filter-input-clear:hover { color: #fca5a5; }

.app-root.dark .dash-remind-btn {
    background: #161b22;
    border-color: #30363d;
    color: #fca5a5;
}
.app-root.dark .dash-remind-btn:hover { background: #7f1d1d; color: #fff; }

.app-root.dark .dash-toast {
    background: #1e2530;
    border-color: #30363d;
    border-left-color: #dc2626;
}
.app-root.dark .dash-toast-title { color: #7dd3fc; }
.app-root.dark .dash-toast-text  { color: #8b949e; }
.app-root.dark .dash-toast-icon  { background: #450a0a; color: #fca5a5; }
.app-root.dark .dash-toast-btn.is-ghost { background: transparent; border-color: #30363d; color: #8b949e; }
.app-root.dark .dash-toast-btn.is-ghost:hover { background: #161b22; color: #c9d1d9; }

.app-root.dark .dash-tl-btn {
    background: #161b22;
    border-color: #30363d;
    color: #7dd3fc;
}
.app-root.dark .dash-tl-btn:hover { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }

.app-root.dark .dash-tl-btn.is-danger { background: #7f1d1d; color: #fecaca; border-color: #7f1d1d; }
.app-root.dark .dash-tl-btn.is-danger:hover { background: #991b1b; color: #fff; }
.app-root.dark .dash-tl-btn.is-muted { background: #374151; color: #d1d5db; border-color: #374151; }
.app-root.dark .dash-tl-btn.is-muted:hover { background: #4b5563; color: #fff; }

.app-root.dark .dash-tl-actions-status,
.app-root.dark .dash-tl-actions-puan { border-top-color: #30363d; }

.app-root.dark .dash-tl-puan-label { color: #8b949e; }

.app-root.dark .dash-tl-puan { background: #161b22; border-color: #30363d; }
.app-root.dark .dash-tl-puan.is-puan-hot  { color: #fca5a5; border-color: #7f1d1d; }
.app-root.dark .dash-tl-puan.is-puan-warm { color: #fcd34d; border-color: #78350f; }
.app-root.dark .dash-tl-puan.is-puan-cold { color: #93c5fd; border-color: #1e3a8a; }

/* Dark mode aktif (seçili) puan */
.app-root.dark .dash-tl-puan.is-puan-hot.puan-active  { background: #7f1d1d; color: #fecaca; border-color: #7f1d1d; }
.app-root.dark .dash-tl-puan.is-puan-warm.puan-active { background: #78350f; color: #fde68a; border-color: #78350f; }
.app-root.dark .dash-tl-puan.is-puan-cold.puan-active { background: #1e3a8a; color: #bfdbfe; border-color: #1e3a8a; }

.app-root.dark .dash-tl-quickform {
    background: #161b22;
    border-color: #30363d;
}
.app-root.dark .dash-tl-quickform select,
.app-root.dark .dash-tl-quickform input,
.app-root.dark .dash-tl-quickform textarea {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

/* ==========================================================
   CONFIRM MODAL
   ========================================================== */
.dash-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: dashConfirmFadeIn 0.18s ease-out;
}

@keyframes dashConfirmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dash-confirm-modal {
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    width: 100%;
    max-width: 440px;
    margin: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border-top: 4px solid var(--yl-primary);
    animation: dashConfirmSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

@keyframes dashConfirmSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dash-confirm-modal.is-success { border-top-color: #059669; }
.dash-confirm-modal.is-danger  { border-top-color: #dc2626; }
.dash-confirm-modal.is-warning { border-top-color: #d97706; }
.dash-confirm-modal.is-primary { border-top-color: var(--yl-primary); }

.dash-confirm-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 12px 24px;
}

.dash-confirm-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: rgba(26, 58, 107, 0.1);
    color: var(--yl-primary);
}
.dash-confirm-icon svg { width: 26px; height: 26px; }

.dash-confirm-modal.is-success .dash-confirm-icon { background: rgba(5, 150, 105, 0.12); color: #059669; }
.dash-confirm-modal.is-danger  .dash-confirm-icon { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.dash-confirm-modal.is-warning .dash-confirm-icon { background: rgba(217, 119, 6, 0.12); color: #d97706; }

.dash-confirm-title {
    font-size: 0.92rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--yl-primary);
    line-height: 1.2;
}
.dash-confirm-modal.is-success .dash-confirm-title { color: #047857; }
.dash-confirm-modal.is-danger  .dash-confirm-title { color: #991b1b; }
.dash-confirm-modal.is-warning .dash-confirm-title { color: #92400e; }

.dash-confirm-body {
    padding: 6px 24px 22px 82px;
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.55;
}

.dash-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid var(--yl-border);
}

.dash-confirm-btn {
    border: 1px solid transparent;
    padding: 9px 18px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.15s ease;
    min-width: 96px;
}

.dash-confirm-btn.is-cancel {
    background: #fff;
    border-color: var(--yl-border);
    color: #4b5563;
}
.dash-confirm-btn.is-cancel:hover { background: #f1f5f9; color: #1f2937; }

.dash-confirm-btn.is-ok {
    background: var(--yl-primary);
    color: #fff;
    border-color: var(--yl-primary);
    box-shadow: 0 4px 10px rgba(26, 58, 107, 0.25);
}
.dash-confirm-btn.is-ok:hover { background: #0f2a52; border-color: #0f2a52; }

.dash-confirm-modal.is-success .dash-confirm-btn.is-ok {
    background: #059669; border-color: #059669;
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.3);
}
.dash-confirm-modal.is-success .dash-confirm-btn.is-ok:hover { background: #047857; border-color: #047857; }

.dash-confirm-modal.is-danger .dash-confirm-btn.is-ok {
    background: #dc2626; border-color: #dc2626;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3);
}
.dash-confirm-modal.is-danger .dash-confirm-btn.is-ok:hover { background: #991b1b; border-color: #991b1b; }

.dash-confirm-modal.is-warning .dash-confirm-btn.is-ok {
    background: #d97706; border-color: #d97706;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
}
.dash-confirm-modal.is-warning .dash-confirm-btn.is-ok:hover { background: #b45309; border-color: #b45309; }

/* Dark mode */
.app-root.dark .dash-confirm-overlay { background: rgba(0, 0, 0, 0.7); }
.app-root.dark .dash-confirm-modal { background: #1e2530; border-color: #30363d; }
.app-root.dark .dash-confirm-title { color: #93c5fd; }
.app-root.dark .dash-confirm-body { color: #c9d1d9; }
.app-root.dark .dash-confirm-footer { background: #161b22; border-top-color: #30363d; }
.app-root.dark .dash-confirm-btn.is-cancel { background: #161b22; border-color: #30363d; color: #8b949e; }
.app-root.dark .dash-confirm-btn.is-cancel:hover { background: #0d1117; color: #c9d1d9; }
.app-root.dark .dash-confirm-icon { background: rgba(125, 211, 252, 0.1); color: #7dd3fc; }

/* Mobil */
@media (max-width: 640px) {
    .dash-confirm-modal { max-width: none; margin: 16px; }
    .dash-confirm-header { padding: 18px 18px 10px 18px; }
    .dash-confirm-body { padding: 6px 18px 18px 72px; font-size: 0.82rem; }
    .dash-confirm-footer { padding: 12px 14px; }
    .dash-confirm-btn { min-width: 80px; padding: 8px 14px; }
}

/* ============================================================
   ETİKET FİLTRESİ + TİMELINE CHIPS
   ============================================================ */

/* Etiket filtre butonu — aktifken mavi dolu */
.dash-ms-btn.dash-ms-btn-active {
    background: var(--yl-accent, #3b7ddd);
    color: #fff;
    border-color: var(--yl-accent, #3b7ddd);
}

/* Etiket renk noktası dropdown içinde */
.dash-ms-et-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 2px;
}

/* Timeline item içinde etiket satırı */
.dash-tl-etiket-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 3px 6px 2px 6px;
}

/* Tek bir etiket chip */
.dash-tl-et-chip {
    font-size: 0.61rem;
    font-weight: 700;
    padding: 1px 6px;
    border: 1px solid;
    border-radius: 0;
    white-space: nowrap;
    letter-spacing: 0.03em;
    line-height: 1.6;
}

/* ── Touch karti: ilk bakista daha cok bilgi (kullanici istegi) ────────
   Teklif no yaninda urun spec kodu, stok kodu ve takibin GUNCEL SAHIBI. */
.dash-tl-spec,
.dash-tl-stok {
    font-size: 0.7rem;
    padding: 1px 6px;
    border: 1px solid var(--yl-border);
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}
.dash-tl-stok { background: #eef4ff; color: #1e40af; border-color: #c7d7f5; }

.dash-tl-sahip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--yl-text-light);
    margin-left: auto;      /* satirin SAGINA yaslanir */
    white-space: nowrap;
}

/* PDF gibi yalnizca ikon tasiyan kart dugmeleri */
.dash-tl-btn-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 4px 8px;
}

.app-root.dark .dash-tl-spec { background: #1e293b; color: #94a3b8; border-color: #334155; }
.app-root.dark .dash-tl-stok { background: #1e3a5f; color: #93c5fd; border-color: #2c5282; }

/* ── Touch gruplama: bagli teklifler TEK kartta ───────────────────────
   Ayni musteriye verilen birden fazla teklifin takibi tek kartta yurur;
   gruptaki diger teklifler kartin icinde listelenir ve tek tek cozulebilir. */
.dash-tl-grup {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 7px;
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
    white-space: nowrap;
}

.dash-tl-grup-liste {
    flex: 1 1 100%;
    margin-top: 4px;
    border-left: 2px solid #ddd6fe;
    padding-left: 8px;
}

/* ‼️ SARMA SART: satirda teklif no + spec kodu + stok kodu yan yana durur ve
   ucu de nowrap'tir. Sarma yokken (bildirilen vaka) toplam genislik karti asiyor,
   "cöz" dugmesi margin-left:auto ile saga itildigi icin kartin DISINDA kaliyor ve
   kirpiliyordu — ozellikle dar/telefon ekraninda. Satir artik alt satira iner. */
.dash-tl-grup-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 0.78rem;
    min-width: 0;
}

/* ‼️ "min-width: 0" DEGIL "max-width: 100%": min-width:0 verilirse etiketler
   kuculebilir hale gelir, sarma HIC devreye girmez ve spec/stok kodu kirpilir
   (bilgi kaybi). Boyle yazilinca once ALT SATIRA iner; yalnizca tek etiket bile
   karta sigmiyorsa kisaltilir. */
.dash-tl-grup-satir > .dash-tl-spec,
.dash-tl-grup-satir > .dash-tl-stok {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-tl-grup-coz {
    margin-left: auto;
    flex: 0 0 auto;          /* dugme ASLA kucultulmez/kirpilmaz */
    border: 1px solid var(--yl-border);
    background: #fff;
    color: var(--yl-text-light);
    font-size: 0.7rem;
    padding: 1px 8px;
    cursor: pointer;
}
.dash-tl-grup-coz:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* Gorusme formunda "hangi tekliflere islensin" secimi */
.dash-tl-grup-hedef {
    border: 1px solid #ddd6fe;
    background: #faf9ff;
    padding: 6px 8px;
    margin-bottom: 6px;
}
.dash-tl-grup-hedef-bas {
    font-size: 0.74rem;
    font-weight: 600;
    color: #5b21b6;
    margin-bottom: 4px;
}
.dash-tl-grup-hedef-satir {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    padding: 2px 0;
    cursor: pointer;
}
.dash-tl-grup-hedef-musteri { color: var(--yl-text-light); font-size: 0.74rem; }

.app-root.dark .dash-tl-grup       { background: #2e1065; color: #c4b5fd; border-color: #4c1d95; }
.app-root.dark .dash-tl-grup-liste { border-left-color: #4c1d95; }
.app-root.dark .dash-tl-grup-hedef { background: #1a1530; border-color: #4c1d95; }
.app-root.dark .dash-tl-grup-coz   { background: #161b22; border-color: #30363d; }

/* ── Gorusme iptal + red: SEBEP ───────────────────────────────────────
   Kart icindeki serbest-metin sebep formu KALDIRILDI: sebep artik sabit
   taksonomiden secilir (ortak <RedSebepModal>, quotes.css .red-sebep-*). */

/* ═══════════════════════════════════════════════════════════════════
   KARTTA ONCEKI GORUSMELER
   Kullanici istegi: "bir touch'in onceki konusmalarini hizlica ana
   ekrandaki touch kartindan okuyabilirsek guzel olur."
   ═══════════════════════════════════════════════════════════════════ */

.dash-tl-gecmis-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 3px 0 0 0;
    padding: 1px 5px 1px 3px;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--yl-text-light, #64748b);
    font-size: 0.66rem;
    font-weight: 600;
    cursor: pointer;
}
.dash-tl-gecmis-btn:hover {
    border-color: var(--yl-border, #cbd5e1);
    color: var(--yl-text, #334155);
}
.dash-tl-gecmis-ok { transition: transform 0.15s; flex-shrink: 0; }
.dash-tl-gecmis-btn.is-acik .dash-tl-gecmis-ok { transform: rotate(180deg); }
.dash-tl-gecmis-adet {
    padding: 0 4px;
    background: var(--yl-border, #e2e8f0);
    color: var(--yl-text, #334155);
    font-size: 0.6rem;
    font-weight: 700;
}

.dash-tl-gecmis {
    margin: 4px 0 2px 0;
    padding: 5px 7px;
    border-left: 2px solid var(--yl-border, #cbd5e1);
    background: rgba(148, 163, 184, 0.07);
}
.dash-tl-gecmis-bos {
    font-size: 0.66rem;
    color: var(--yl-text-light, #94a3b8);
    font-style: italic;
}
.dash-tl-gecmis-satir {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 2px 0;
    font-size: 0.67rem;
    line-height: 1.4;
}
.dash-tl-gecmis-satir + .dash-tl-gecmis-satir {
    border-top: 1px dashed rgba(148, 163, 184, 0.3);
}
.dash-tl-gecmis-tarih {
    font-weight: 700;
    color: var(--yl-primary, #185fa5);
    white-space: nowrap;
}
.dash-tl-gecmis-kisi {
    color: var(--yl-text-light, #94a3b8);
    white-space: nowrap;
}
.dash-tl-gecmis-not {
    flex: 1 1 100%;
    color: var(--yl-text, #334155);
    font-style: italic;
    white-space: pre-wrap;
}

/* ── Toplu iptal: hangi teklifler kapatilsin ── */
.dash-red-hedefler {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}
.dash-red-hedef-not {
    font-size: 0.7rem;
    color: var(--yl-text-light, #64748b);
    margin-bottom: 10px;
}

.app-root.dark .dash-tl-gecmis { background: rgba(255,255,255,0.04); border-left-color: #30363d; }
.app-root.dark .dash-tl-gecmis-not { color: #c9d1d9; }
.app-root.dark .dash-tl-gecmis-adet { background: #30363d; color: #c9d1d9; }

/* ═══════════════════════════════════════════════════════════════════
   GECIKMIS KARTIN ICINDEKI BEYAZ PANELLER
   Gecikmis kartin metinleri koyu bordoya cevrildi (bkz. yukarisi). Kartin
   ICINDE acilan paneller ise BEYAZ zeminlidir (bagla penceresi, hizli form,
   onceki gorusmeler); orada standart mavi/koyu renkler kullanilir.
   ═══════════════════════════════════════════════════════════════════ */
.dash-tl-overdue .dash-tl-quickform .dash-tl-no,
.dash-tl-overdue .dash-tl-gecmis .dash-tl-no,
.dash-tl-overdue .dash-tl-grup-hedef .dash-tl-no { color: #185FA5; }

.dash-tl-overdue .dash-tl-quickform .dash-tl-musteri,
.dash-tl-overdue .dash-tl-quickform .dash-tl-grup-hedef-musteri,
.dash-tl-overdue .dash-tl-gecmis .dash-tl-gecmis-not { color: var(--yl-text, #334155); }

/* Onceki gorusmeler paneli: gecikmis kartta zemin seffaf oldugu icin koyu
   kirmizi uzerinde koyu metin kaliyordu — panele kendi beyaz zemini verilir. */
.dash-tl-overdue .dash-tl-gecmis {
    background: #fff;
    border-left-color: #cbd5e1;
}
.dash-tl-overdue .dash-tl-gecmis-tarih { color: #185FA5; }
.dash-tl-overdue .dash-tl-gecmis-kisi  { color: #64748b; }
.dash-tl-overdue .dash-tl-gecmis-bos   { color: #64748b; }
.dash-tl-overdue .dash-tl-gecmis-btn   { color: #fee2e2; }
.dash-tl-overdue .dash-tl-gecmis-btn:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.dash-tl-overdue .dash-tl-gecmis-adet  { background: rgba(255,255,255,0.9); color: #7f1d1d; }

/* ── TASMA: bagla / hedef satirlari ──
   Teklif no + spec + stok kodu + musteri tek satira sigmadiginda disari
   tasiyordu. Artik alt satira sarar; uzun musteri adi da kirpilir. */
.dash-tl-grup-hedef-satir {
    flex-wrap: wrap;
    min-width: 0;
}
.dash-tl-grup-hedef-satir > .dash-tl-spec,
.dash-tl-grup-hedef-satir > .dash-tl-stok {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-tl-grup-hedef-musteri {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Kart icindeki bagli teklif satirlari da tasmasin */
.dash-tl-grup-satir { flex-wrap: wrap; min-width: 0; }

/* TAKIPTEN CIKAR — kartin "sessize alma" butonu. Yikici degil ama
   dikkat cekmemeli: solgun durur, ustune gelince netlesir.
   Keskin koseler (border-radius: 0) proje kurali. */
.dash-tl-btn.dash-tl-btn-mute {
    color: var(--yl-text-light, #64748B);
    border-style: dashed;
}
.dash-tl-btn.dash-tl-btn-mute:hover {
    background: #b45309;
    border-color: #b45309;
    border-style: solid;
    color: #fff;
}
.dash-tl-overdue .dash-tl-btn.dash-tl-btn-mute { color: #9a3412; border-color: rgba(154,52,18,0.35); }
.app-root.dark .dash-tl-btn.dash-tl-btn-mute { color: #8b949e; }

/* Takipten cikarilanlar (13.09.2026) */
.dash-tl-cikanlar-bar { display: flex; justify-content: flex-end; margin: 6px 0 8px; }
.dash-tl-cikanlar-bar .dash-tl-btn { display: inline-flex; align-items: center; gap: 6px; }
.dash-tl-cikanlar { margin-bottom: 12px; max-height: 62vh; overflow-y: auto; }
/* Filtre yuzunden gizlenen kayit uyarisi (18.09.2026) */
.dash-tl-cikan-gizli { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.74rem; color: #6b7280; margin: 2px 0 6px; }
.dash-tl-cikan-gizli .dash-tl-btn { padding: 2px 8px; font-size: 0.7rem; }
/* 16.09.2026: kartlar normal touch karti duzeninde; panodaki iki sutunla ayni izgara */
.dash-tl-cikan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .dash-tl-cikan-grid { grid-template-columns: 1fr; } }
.dash-tl-cikan { border-left: 3px solid #9ca3af; }
.dash-tl-cikan-neden { font-size: 0.68rem; color: #6b7280; margin: 2px 0 4px; }
/* Elle gun erteleme (+1G yaninda "+N") */
.dash-tl-ertele { display: inline-flex; align-items: center; gap: 4px; }
.dash-tl-ertele input { width: 52px; padding: 2px 4px; font-size: 0.72rem; border: 1px solid var(--yl-border); border-radius: 0; }