/* Esports ikonu kaldırıldı */

:root{--bg:#ffffff;--fg:#1e293b;--muted:#64748b;--thead:#f8fafc;--border:#e2e8f0;--primary:#3b82f6;--primary-hover:#2563eb;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--pill:#eff6ff;--warn:#fef3c7;--warn-border:#fde68a;--surface:#ffffff;--surface-hover:#f8fafc;--text-primary:#1e293b;--text-secondary:#64748b;--text-muted:#94a3b8;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px}
*{box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text-primary);margin:0;text-transform:uppercase}
.wrap{max-width:1600px;margin:var(--space-8) auto;padding:0 var(--space-4);position:relative}
h1{font-size:22px;margin:0 0 var(--space-2);text-align:center !important;color:var(--text-primary)}.meta{color:var(--text-secondary);font-size:13px;margin-bottom:var(--space-3);text-align:center}
.legend{display:flex;gap:var(--space-3);align-items:center;margin:var(--space-2) 0 var(--space-4);color:var(--text-secondary);font-size:13px;flex-wrap:wrap}
.pill{padding:var(--space-1) var(--space-3);border-radius:999px;background:var(--pill);color:#374151}
.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:var(--space-4);gap:var(--space-2)}
.toolbar.left{justify-content:flex-start;flex-wrap:nowrap;overflow:visible}
.toolbar.left>*{white-space:nowrap;flex:0 0 auto}
.tabs{display:flex;align-items:center;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--border);gap:6px}
/* Simplified tabs */
.tabbtn{padding:8px 12px;background:transparent;border:none;color:var(--text-secondary);border-bottom:2px solid transparent;border-radius:0;font-weight:600;cursor:pointer}
.tabbtn:hover{color:var(--text-primary);background:transparent}
.tabbtn.active{color:var(--text-primary);border-bottom-color:var(--primary)}
.hidden{display:none}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;background:var(--surface);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
/* Esports icon kaldırıldı */
table th,table td{padding:var(--space-3) var(--space-3);text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
/* ✨ Satışlar tablosu kolon optimizasyonu - ekrana tam sığsın */
#tbSales th:nth-child(1),#tbSales td:nth-child(1){width:40px;padding:var(--space-2)}
#tbSales th:nth-child(2),#tbSales td:nth-child(2){width:90px;font-size:11px}
#tbSales th:nth-child(3),#tbSales td:nth-child(3){max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tbSales th:nth-child(4),#tbSales td:nth-child(4){width:60px;font-size:11px;text-align:center}
#tbSales th:nth-child(5),#tbSales td:nth-child(5){max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tbSales th:nth-child(6),#tbSales td:nth-child(6){max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tbSales th:nth-child(7),#tbSales td:nth-child(7){max-width:110px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tbSales th:nth-child(8),#tbSales td:nth-child(8){max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tbSales th:nth-child(9),#tbSales td:nth-child(9){max-width:90px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tbSales th:nth-child(10),#tbSales td:nth-child(10){width:100px;text-align:right}
#tbSales th:nth-child(11),#tbSales td:nth-child(11){width:100px;text-align:right}
#tbSales th:nth-child(12),#tbSales td:nth-child(12){width:90px;font-size:11px}
#tbSales th:nth-child(13),#tbSales td:nth-child(13){width:80px;text-align:center}
table th{font-weight:700;background:var(--thead);color:var(--text-primary);font-size:13px;text-transform:uppercase;letter-spacing:0.5px;position:sticky;top:0;z-index:10}
table tbody tr{transition:all 0.2s ease}
table tbody tr:hover{background:var(--surface-hover);transform:scale(1.01)}
table tbody tr:nth-child(even){background:rgba(248,250,252,0.5)}
table tbody tr:nth-child(even):hover{background:var(--surface-hover)}
/* ✨ Expected Sales Status Row Styles */
.status-converted-row{background:linear-gradient(90deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.02) 100%) !important;border-left:3px solid #10b981}
.status-converted-row:hover{background:linear-gradient(90deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.04) 100%) !important}
.status-converted-row:nth-child(even){background:linear-gradient(90deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.03) 100%) !important}
.status-converted-row:nth-child(even):hover{background:linear-gradient(90deg, rgba(16,185,129,0.14) 0%, rgba(16,185,129,0.05) 100%) !important}
table tfoot td{font-weight:700;background:var(--thead);border-top:none;color:var(--text-primary)}
/* Keep totals row visible and above any horizontal scrollbar */
table tfoot{position:sticky;bottom:0;z-index:5}
/* Add breathing room below totals row to avoid scrollbar overlap */
.tabs-container{padding-bottom:6px}
.amount{text-align:right;white-space:nowrap;font-weight:600;color:var(--text-primary)}
.tgt{width:120px;text-align:right;font-weight:600}
.text-center{text-align:center}
.log-agency{font-weight:600;color:var(--text-primary)}
.agency{font-weight:700;color:var(--text-primary)}
.owner{color:var(--text-secondary);font-weight:500}
.table-container{background:var(--surface);border-radius:12px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,0.05);border:1px solid var(--border)}
.table-container table{box-shadow:none;border-radius:0}
.table-header{background:var(--thead);padding:20px;border-bottom:1px solid var(--border)}
.table-header h3{margin:0;color:var(--text-primary);font-size:18px;font-weight:700}
.table-footer{background:var(--thead);padding:16px 20px;border-top:1px solid var(--border);color:var(--text-secondary);font-size:14px}
.table-responsive{overflow-x:auto;border-radius:12px}
.table-responsive table{min-width:800px}
@media (max-width: 768px) {
  table th, table td{padding:12px 16px;font-size:11px}
  .table-header{padding:16px}
  .table-footer{padding:12px 16px}
}
/* Modern Glass Buttons */
.button{
    padding:calc(var(--space-3)*0.8) calc(var(--space-5)*0.8);
    border-radius:calc(12px * 0.8);
    font-size:calc(13px * 0.8);
    text-decoration:none;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,0.2);
    color:var(--text-primary);
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    position:relative;
    overflow:hidden;
    /* Sabit pozisyon için */
    transform:translateZ(0);
    will-change:auto;
}
.button::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    transition:left 0.5s;
}
.button:hover::before{
    left:100%;
}
.button.primary{
    background:linear-gradient(135deg,rgba(59,130,246,0.8),rgba(37,99,235,0.9));
    color:#fff;
    border-color:rgba(59,130,246,0.3);
    box-shadow:0 4px 15px rgba(59,130,246,0.3);
}
.button.danger{
    background:rgba(239,68,68,0.1);
    color:var(--danger);
    border-color:rgba(239,68,68,0.3);
    box-shadow:0 4px 6px rgba(239,68,68,0.1);
}
.button:hover{
    background:rgba(255,255,255,0.2);
    border-color:rgba(59,130,246,0.4);
    transform:translateZ(0) scale(1.02);
    box-shadow:0 6px 20px rgba(0,0,0,0.12);
}
.button.primary:hover{
    background:linear-gradient(135deg,rgba(59,130,246,0.9),rgba(37,99,235,1));
    transform:translateZ(0) scale(1.02);
    box-shadow:0 6px 20px rgba(59,130,246,0.3);
}
.button.danger:hover{
    background:rgba(239,68,68,0.2);
    color:#fff;
    transform:translateZ(0) scale(1.02);
    box-shadow:0 6px 20px rgba(239,68,68,0.2);
}
.button:active{
    transform:translateZ(0) scale(0.98);
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.button.active{
    background:linear-gradient(135deg,rgba(59,130,246,0.9),rgba(37,99,235,1)) !important;
    color:#fff !important;
    border-color:rgba(59,130,246,0.5) !important;
    box-shadow:0 4px 15px rgba(59,130,246,0.4) !important;
    font-weight:700 !important;
}

.unworked-status{color:var(--danger);font-weight:600}
.row{display:flex;align-items:center;gap:8px}
input,select{border:1px solid var(--border);border-radius:8px;padding:var(--space-2) var(--space-3);font-size:14px;font-family:inherit;width:100%;text-transform:uppercase;background:var(--surface);color:var(--text-primary);transition:border-color 0.2s ease}

/* Masraf modalındaki select elementlerini optimize et */
#expenseCategory,
#expensePaymentMethod {
    min-width: 140px;
    max-width: 160px;
    width: auto;
    font-size: 13px;
}

/* Masraf sekmesindeki filter select'lerin genişliğini sınırla */
#expenseStatusFilter,
#expensePaymentFilter {
    max-width: 150px;
    width: auto;
    font-size: 13px;
}

/* Masraf sekmesine üstten padding ekle */
#expensesTab {
    padding-top: var(--space-4);
}

/* Masraf modalında değişen alanları vurgula */
.field-changed {
    border-color: var(--warning) !important;
    background-color: rgba(245, 158, 11, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}
input:focus,select:focus{border-color:var(--primary);outline:none;box-shadow:none}
.kv{display:flex;gap:var(--space-4);align-items:flex-end;margin-bottom:var(--space-4)}
.kv>div{flex:1;min-width:0}.kv label{font-size:14px;color:var(--text-secondary);display:block;margin-bottom:var(--space-1);font-weight:500}

/* Masraf modalında select içeren div'lerin flex davranışını optimize et */
#expenseModal .kv:nth-child(3) > div:nth-child(2),
#expenseModal .kv:nth-child(4) > div:nth-child(2) {
    flex: 0 1 auto;
    min-width: 150px;
}

/* Masraf modalında kv gap'ini küçült */
#expenseModal .kv {
    gap: var(--space-2);
}
.searchbar{margin-bottom:var(--space-4);position:relative}
.searchbar input{width:100%;padding-left:40px;background:var(--surface-hover) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%2364748b"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>') no-repeat 12px center;background-size:16px}
/* Modern Card Modal */
.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:1000;
    animation:modalFadeIn 0.3s ease-out;
}
.modal-content{
    background:#ffffff;
    padding:var(--space-8);
    border-radius:20px;
    box-shadow:0 32px 64px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.08);
    max-width:600px;
    width:90%;
    border:1px solid rgba(0,0,0,0.05);
    position:relative;
    animation:modalSlideIn 0.4s cubic-bezier(0.4,0,0.2,1);
    transform:translateY(-10px);
}

/* Masraf modalını daha kompakt yap */
#expenseModal .modal-content {
    max-width: 480px;
    padding: var(--space-6);
}
.modal-content h2{
    margin-top:0;
    font-size:22px;
    font-weight:700;
    color:var(--text-primary);
    text-align:center;
    margin-bottom:var(--space-6);
    padding-top:var(--space-2);
}
/* Unified section label styling inside modals */
/* Label Hierarchy System */
label:not(.section-label) {
    display: block;
    margin-bottom: var(--space-1);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.section-label{
    display:block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}
.modal-content p{
    margin:0 0 var(--space-4);
    color:var(--text-secondary);
    font-size:14px;
    text-align:center;
}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-6)}
.note{margin-top:var(--space-5);padding:var(--space-4);background:var(--warn);border:1px solid var(--warn-border);border-radius:8px;font-size:14px;color:#92400e}
.note ul{margin:0;padding-left:var(--space-5)}
.rank{width:48px}
.agency{font-weight:600}
.summary{font-size:16px;font-weight:600;margin-top:var(--space-4);color:#065f46}
.empty-row td{text-align:center!important;color:var(--muted);font-style:italic}
.log-agency{white-space:nowrap}
#edit-row-actions{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-6);flex-wrap:wrap;gap:var(--space-2)}
#edit-row-actions .button{flex-grow:1;min-width:100px;margin:0}
#edit-row-actions .button.danger{margin-right:auto}
#edit-row-actions .button.primary{margin-left:auto}

/* Tab-style variant (reversible) */
body.tab-buttons .toolbar.left .button{
    border-radius:999px;
    background:transparent;
    border:1px solid var(--border);
    box-shadow:none;
}
body.tab-buttons .toolbar.left .button:hover{background:#f1f5f9}
body.tab-buttons .toolbar.left .button.primary{
    background:#1d4ed8;
    color:#fff;
    border-color:#1d4ed8;
}
@media(max-width:640px){.toolbar.left{overflow:auto}}

/* --- Charts & Statistics --- */
.chart-container{background:var(--surface);border-radius:12px;padding:var(--space-5);box-shadow:0 1px 3px rgba(0,0,0,0.1);border:1px solid var(--border);margin-bottom:var(--space-4)}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.chart-title{font-size:16px;font-weight:700;color:var(--text-primary)}
.chart-subtitle{font-size:12px;color:var(--text-secondary)}
.chart-content{position:relative;height:200px;display:flex;align-items:end;gap:var(--space-1);padding:var(--space-3) 0;width:100%}
.chart-bar{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);border-radius:4px 4px 0 0;min-height:20px;flex:1;transition:all 0.3s ease;cursor:pointer;position:relative}
.chart-bar:hover{transform:scaleY(1.05);box-shadow:0 4px 8px rgba(59,130,246,0.3)}
.chart-bar-label{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--text-secondary);white-space:nowrap}
.chart-value{position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;color:var(--text-primary);background:var(--surface);padding:2px 6px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.chart-legend{display:flex;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}
.chart-legend-item{display:flex;align-items:center;gap:var(--space-1);font-size:12px;color:var(--text-secondary)}
.chart-legend-color{width:12px;height:12px;border-radius:2px}
.chart-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-3);margin-top:var(--space-4)}
.chart-stat{text-align:center;padding:var(--space-2);background:var(--surface-hover);border-radius:8px}
.chart-stat-value{font-size:18px;font-weight:700;color:var(--text-primary)}
.chart-stat-label{font-size:11px;color:var(--text-secondary);margin-top:var(--space-1)}

/* --- Animations & Transitions --- */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
@keyframes bounce{0%,20%,53%,80%,100%{transform:translateY(0)}40%,43%{transform:translateY(-10px)}70%{transform:translateY(-5px)}90%{transform:translateY(-2px)}}

.animate-fade-in{animation:fadeIn 0.3s ease-out}
.animate-slide-in{animation:slideIn 0.3s ease-out}
.animate-scale-in{animation:scaleIn 0.2s ease-out}
.animate-pulse{animation:pulse 2s infinite}
.animate-bounce{animation:bounce 1s infinite}

/* Enhanced transitions for all interactive elements */
*{transition:all 0.2s ease}
.button{transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.tabbtn{transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
table tbody tr{transition:all 0.2s ease}
.modal{transition:opacity 0.3s ease}
.modal-content{transition:transform 0.3s ease,opacity 0.3s ease}
input,select{transition:all 0.2s ease}
.searchbar input{transition:all 0.2s ease}

/* Loading states */
.loading{opacity:0.6;pointer-events:none}
.loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Hover animations */
.button:hover{transform:translateY(-1px)}
.tabbtn:hover{transform:translateY(-1px)}
table tbody tr:hover{transform:scale(1.01)}
.modal-content:hover{transform:scale(1.02)}

/* Focus animations */
input:focus,select:focus{transform:none}
.button:focus{transform:scale(1.05)}

/* --- UI polish additions --- */
/* Sticky table headers for long lists */
table thead th{position:sticky;top:0;z-index:1}
/* Zebra rows for readability */
table tbody tr:nth-child(even){background:#fbfdff}
/* Highlight totals row */
tfoot td{font-weight:600;background:#f8fafc}
/* Responsive tables: allow horizontal scroll when cramped */
.tabs-container{overflow:auto}
table{min-width:1000px}
/* Better heading rhythm */
h1{font-size:24px;margin:0 0 12px}
/* Focus rings for accessibility */
.button,input,select{outline:none}
.button:focus,input:focus,select:focus{box-shadow:none}
/* Mobile layout tweaks */
@media(max-width:768px){.kv{flex-direction:column}}
@media(max-width:640px){.top-actions,.modal-actions{flex-wrap:wrap}.button{width:100%;min-height:36px}}

/* Masraf modalı mobil optimizasyonu */
@media(max-width:640px){
    #expenseModal .modal-content {
        max-width: 95%;
        padding: var(--space-4);
    }
    
    #expenseModal .kv {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    #expenseCategory,
    #expensePaymentMethod {
        width: 100%;
        max-width: none;
    }
}
/* Status box top-right */
.status-box{position:absolute;top:16px;right:16px;text-align:right;color:#374151;font-size:13px;background:rgba(255,255,255,0.85);backdrop-filter:saturate(180%) blur(6px);border:1px solid var(--border);border-radius:8px;padding:8px 10px;line-height:1.4;max-width:60%}
.status-box b{color:#0f172a}
/* Hide status box (requested) */
#statusBox{display:none!important}
/* Month selector large enough for "TÜM AY" text */
/* #monthFilter removed */

/* Logo styles */
.logo-container{text-align:center;margin-bottom:var(--space-4)}
.logo{height:40px;width:auto;max-width:200px}

/* Modern Glass Header */
.header-glass{
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.2);
    padding:var(--space-6) var(--space-8);
    position:sticky;
    top:0;
    z-index:100;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
}
.header-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1600px;
    margin:0 auto;
    gap:var(--space-4);
}
.logo-section{
    display:flex;
    align-items:center;
    gap:var(--space-4);
}
.logo-section .logo{
    height:48px;
    width:auto;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.brand-info h1{
    font-size:24px;
    font-weight:700;
    color:var(--text-primary);
    margin:0;
    text-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.brand-info .meta{
    font-size:14px;
    color:var(--text-secondary);
    margin:4px 0 0 0;
    font-weight:400;
}
.header-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:var(--space-1);
}
.current-year{
    background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    color:white;
    padding:var(--space-1) var(--space-3);
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    box-shadow:0 2px 4px rgba(59,130,246,0.3);
}
.header-meta .last-update{
    font-size:12px;
    color:var(--text-secondary);
    font-weight:500;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

.header-actions .button{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    font-size:12px;
    padding:var(--space-2) var(--space-3);
}

.header-actions .button svg{
    width:16px;
    height:16px;
}

/* Activity Icon Button */
/* ==================== NOTIFICATION SYSTEM ==================== */
.notification-btn{
    position:relative;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:12px;
    padding:var(--space-3);
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.notification-btn:hover{
    background:rgba(255,255,255,0.2);
    border-color:var(--primary);
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(59,130,246,0.25);
}

.notification-btn svg{
    color:var(--text-primary);
    transition:all 0.3s ease;
}

.notification-btn:hover svg{
    color:var(--primary);
    animation:bellRing 0.5s ease;
}

@keyframes bellRing{
    0%,100%{transform:rotate(0deg);}
    10%,30%,50%,70%,90%{transform:rotate(-15deg);}
    20%,40%,60%,80%{transform:rotate(15deg);}
}

.notification-badge{
    position:absolute;
    top:-6px;
    right:-6px;
    background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
    color:white;
    border-radius:50%;
    min-width:20px;
    height:20px;
    padding:0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:700;
    border:2px solid white;
    box-shadow:0 2px 8px rgba(239,68,68,0.4);
    opacity:0;
    transform:scale(0);
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.notification-badge.show{
    opacity:1;
    transform:scale(1);
    animation:badgePulse 2s ease infinite;
}

@keyframes badgePulse{
    0%,100%{box-shadow:0 2px 8px rgba(239,68,68,0.4);}
    50%{box-shadow:0 2px 16px rgba(239,68,68,0.8),0 0 0 4px rgba(239,68,68,0.1);}
}

/* Notification Dropdown */
.notification-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    width:420px;
    max-height:600px;
    background:white;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 10px 40px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.05);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index:10000;
    overflow:hidden;
}

.notification-dropdown.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.notification-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:var(--space-4) var(--space-5);
    border-bottom:1px solid var(--border);
    background:var(--thead);
}

.notification-header h3{
    margin:0;
    font-size:16px;
    font-weight:700;
    color:var(--text-primary);
}

.mark-all-read{
    background:none;
    border:none;
    color:var(--primary);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    padding:var(--space-2) var(--space-3);
    border-radius:6px;
    transition:all 0.2s ease;
}

.mark-all-read:hover{
    background:rgba(59,130,246,0.1);
}

.notification-list{
    max-height:400px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--border) transparent;
}

.notification-list::-webkit-scrollbar{
    width:6px;
}

.notification-list::-webkit-scrollbar-track{
    background:transparent;
}

.notification-list::-webkit-scrollbar-thumb{
    background:var(--border);
    border-radius:3px;
}

.notification-list::-webkit-scrollbar-thumb:hover{
    background:var(--text-secondary);
}

.notification-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:var(--space-10) var(--space-5);
    color:var(--text-secondary);
    text-align:center;
}

.notification-empty svg{
    margin-bottom:var(--space-3);
}

.notification-empty p{
    margin:0;
    font-size:13px;
}

.notification-item{
    padding:var(--space-4) var(--space-5);
    border-bottom:1px solid var(--border);
    cursor:pointer;
    transition:all 0.2s ease;
    position:relative;
}

.notification-item:last-child{
    border-bottom:none;
}

.notification-item:hover{
    background:var(--surface-hover);
}

.notification-item.unread{
    background:rgba(59,130,246,0.03);
}

.notification-item.unread::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:var(--primary);
}

.notification-content{
    display:flex;
    gap:var(--space-3);
    align-items:flex-start;
}

.notification-priority{
    flex-shrink:0;
    width:8px;
    height:8px;
    border-radius:50%;
    margin-top:6px;
}

.notification-priority.high{
    background:#ef4444;
    box-shadow:0 0 8px rgba(239,68,68,0.5);
}

.notification-priority.medium{
    background:#f59e0b;
}

.notification-priority.low{
    background:#10b981;
}

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

.notification-action{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 6px;
    border-radius:4px;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:4px;
}

.notification-action.added{
    background:#dcfce7;
    color:#166534;
}

.notification-action.edited{
    background:#dbeafe;
    color:#1e40af;
}

.notification-action.deleted{
    background:#fee2e2;
    color:#dc2626;
}

.notification-text{
    font-size:13px;
    font-weight:600;
    color:var(--text-primary);
    margin-bottom:4px;
    line-height:1.4;
}

.notification-details{
    font-size:12px;
    color:var(--text-secondary);
    margin-bottom:4px;
}

.notification-time{
    font-size:11px;
    color:var(--text-muted);
}

.notification-footer{
    padding:var(--space-3) var(--space-5);
    border-top:1px solid var(--border);
    background:var(--thead);
}

.view-all-btn{
    width:100%;
    padding:var(--space-3);
    background:var(--primary);
    color:white;
    border:none;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s ease;
}

.view-all-btn:hover{
    background:var(--primary-hover);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(59,130,246,0.3);
}

/* Backward compatibility */
.activity-icon-btn{display:none;}
.activity-badge{display:none;}

/* Activity Modal Styles */
.activity-modal-content{
    max-width:90vw;
    width:1200px;
    max-height:80vh;
    padding:0;
    overflow:hidden;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:var(--space-6) var(--space-6) var(--space-4);
    border-bottom:1px solid var(--border);
}

.modal-header h2{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:var(--text-primary);
}

.modal-close-btn{
    background:none;
    border:none;
    cursor:pointer;
    padding:var(--space-2);
    border-radius:8px;
    color:var(--text-secondary);
    transition:all 0.2s ease;
}

.modal-close-btn:hover{
    background:var(--surface-hover);
    color:var(--text-primary);
}

.activity-table-container{
    max-height:60vh;
    overflow-y:auto;
    padding:0 var(--space-6) var(--space-6);
}

/* Current User Info in Header */
.current-user-info{
    margin-right:var(--space-3);
}

.user-name-display{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-2) var(--space-3);
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:8px;
    color:var(--text-primary);
    font-size:12px;
    font-weight:500;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:all 0.3s ease;
}

.user-name-display:hover{
    background:rgba(255,255,255,0.15);
    border-color:rgba(255,255,255,0.3);
}

.user-name-display svg{
    color:var(--text-secondary);
    transition:color 0.3s ease;
}

.user-name-display:hover svg{
    color:var(--primary);
}

.activity-user{
    font-weight:500;
    color:var(--text-primary);
    font-size:11px;
    white-space:nowrap;
}


/* Brief Management Styles */
.briefs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-top: var(--space-3);
}

.briefs-table th,
.briefs-table td {
    padding: var(--space-2);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.briefs-table th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.brief-priority {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-low { background-color: #e5f3ff; color: #0066cc; }
.priority-medium { background-color: #fff3cd; color: #856404; }
.priority-high { background-color: #ffe6cc; color: #cc6600; }
.priority-urgent { background-color: #ffe6e6; color: #cc0000; }

.brief-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: inline-block;
}

/* Eski durum stilleri - migration sonrası kullanılmayacak */
.status-in_review { 
    background:#dbeafe;
    color:#1e40af;
}
.status-in_preparation { 
    background:#fff3cd;
    color:#856404;
}
.status-proposal_submitted { 
    background:#d4edda;
    color:#155724;
}

.brief-type {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.brief-due-date {
    font-size: 12px;
}

.brief-due-date.overdue {
    color: var(--danger);
    font-weight: 600;
}

.brief-due-date.due-soon {
    color: var(--warning);
    font-weight: 600;
}

.overdue-row {
    background-color: rgba(220, 53, 69, 0.08) !important;
    border-left: 3px solid #dc3545 !important;
}

.overdue-row:hover {
    background-color: rgba(220, 53, 69, 0.12) !important;
}

/* Expense Management Styles */
.expenses-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:12px;
    background:var(--surface);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

.expense-description{
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    color:var(--text-secondary);
}

.expense-status{
    padding:var(--space-1) var(--space-2);
    border-radius:6px;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    white-space:nowrap;
}

.status-pending{
    background:#fef3c7;
    color:#92400e;
}

.status-in_progress{
    background:#dbeafe;
    color:#1e40af;
}

.status-completed{
    background:#dcfce7;
    color:#166534;
}

.status-approved{
    background:#dcfce7;
    color:#166534;
}

.status-rejected{
    background:#fee2e2;
    color:#dc2626;
}

.status-paid{
    background:#dbeafe;
    color:#1e40af;
}

.approve-btn{
    color:var(--success) !important;
}

.approve-btn:hover{
    background:var(--success) !important;
    color:white !important;
}

.reject-btn{
    color:var(--danger) !important;
}

.reject-btn:hover{
    background:var(--danger) !important;
    color:white !important;
}

.filter-select{
    padding:var(--space-2) var(--space-3);
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    color:var(--text-primary);
    font-size:12px;
    min-width:120px;
    cursor:pointer;
}

#expenseDescription{
    width:100%;
    padding:var(--space-2) var(--space-3);
    border:1px solid var(--border);
    border-radius:8px;
    font-size:14px;
    font-family:inherit;
    background:var(--surface);
    color:var(--text-primary);
    resize:vertical;
    min-height:60px;
}

#expenseDescription:focus{
    border-color:var(--primary);
    outline:none;
}

/* Kullanıcı bilgi stilleri kaldırıldı */

/* Responsive Glass Header */
@media(max-width:768px){
    .header-glass{
        padding:var(--space-4) var(--space-4);
    }
    .header-content{
        flex-direction:column;
        gap:var(--space-3);
        text-align:center;
    }
    .logo-section{
        flex-direction:column;
        gap:var(--space-2);
    }
    .brand-info h1{
        font-size:20px;
    }
    .header-meta{
        align-items:center;
    }
}

/* Modal Animations */
@keyframes modalFadeIn{
    from{opacity:0;backdrop-filter:blur(0px)}
    to{opacity:1;backdrop-filter:blur(4px)}
}
@keyframes modalSlideIn{
    from{opacity:0;transform:translateY(-20px) scale(0.95)}
    to{opacity:1;transform:translateY(-10px) scale(1)}
}

/* Kullanıcı seçim grid stilleri kaldırıldı */

/* Activity Log Styles */
.activity-header{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:var(--space-4);
    margin-bottom:var(--space-4);
}

.activity-filters{
    display:flex;
    gap:var(--space-4);
    align-items:center;
    flex-wrap:wrap;
}

.filter-group{
    display:flex;
    gap:var(--space-2);
    align-items:center;
}

.filter-btn{
    padding:var(--space-2) var(--space-3);
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    color:var(--text-secondary);
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    text-transform:uppercase;
}

.filter-btn:hover{
    border-color:var(--primary);
    color:var(--text-primary);
}

.filter-btn.active{
    background:var(--primary);
    color:white;
    border-color:var(--primary);
}

.filter-select{
    padding:var(--space-2) var(--space-3);
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    color:var(--text-primary);
    font-size:12px;
    min-width:140px;
    cursor:pointer;
}

.activity-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:12px;
    background:var(--surface);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

.activity-table th{
    background:var(--thead);
    color:var(--text-primary);
    font-weight:700;
    padding:var(--space-4) var(--space-3);
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border-bottom:1px solid var(--border);
}

.activity-table td{
    padding:var(--space-3);
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}

.activity-table tbody tr:hover{
    background:var(--surface-hover);
}

.activity-action{
    display:inline-flex;
    align-items:center;
    gap:var(--space-1);
    padding:var(--space-1) var(--space-2);
    border-radius:6px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.activity-action.added{
    background:#dcfce7;
    color:#166534;
}

.activity-action.edited{
    background:#dbeafe;
    color:#1e40af;
}

.activity-action.deleted{
    background:#fee2e2;
    color:#dc2626;
}

.activity-timestamp{
    font-family:monospace;
    font-size:11px;
    color:var(--text-secondary);
    white-space:nowrap;
}

.activity-type{
    font-weight:600;
    color:var(--text-primary);
    text-transform:uppercase;
    font-size:11px;
}

.activity-agency{
    font-weight:500;
    color:var(--text-primary);
}

.activity-details{
    color:var(--text-secondary);
    font-size:11px;
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.activity-amount{
    font-weight:600;
    color:var(--text-primary);
    text-align:right;
    white-space:nowrap;
}

@media(max-width:768px){
    .activity-filters{
        flex-direction:column;
        align-items:stretch;
    }
    
    .filter-group{
        justify-content:center;
        flex-wrap:wrap;
    }
    
    .activity-table{
        font-size:10px;
    }
    
    .activity-table th,
    .activity-table td{
        padding:var(--space-2);
    }
}

/* ==================== AUTHENTICATION STYLES ==================== */

/* User Info Display */
.current-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-right: var(--space-3);
}

.user-name-display {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-name-display svg {
    opacity: 0.8;
}

.user-name-display span {
    text-transform: none;
}

/* Logout Button */
.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ef4444;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2);
}

.logout-btn:active {
    transform: translateY(0);
}

/* Toast Animation */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .current-user-info {
        gap: var(--space-2);
        margin-right: var(--space-2);
    }
    
    .user-name-display {
        padding: var(--space-1) var(--space-2);
        font-size: 12px;
    }
    
    .user-name-display span {
        display: none;
    }
    
    .logout-btn {
        width: 32px;
        height: 32px;
    }
}

/* ==================== PROPOSAL MODALS ==================== */
.proposal-card {
    transition: all 0.2s ease;
}

.proposal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#proposalModal,
#proposalsListModal {
    z-index: 1100 !important;
}

#proposalModal select,
#proposalsListModal select {
    text-transform: none;
}

#proposalModal .modal-content,
#proposalsListModal .modal-content {
    animation: slideDown 0.3s ease;
}

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

/* Email Settings Modal - Genel modal CSS'ini kullan */

/* Proposal button styles */
.button.proposal-btn {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    font-weight: 600;
    border: none;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 40px;
    transition: all 0.2s ease;
}

.button.proposal-btn:hover {
    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%);
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.button.proposal-btn svg {
    flex-shrink: 0;
}

/* Proposal count badge */
.proposal-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #0066cc;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.proposal-count:hover {
    background: #0052a3;
    transform: scale(1.05);
}

/* Version badge */
.version-badge {
    background: #666;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
}

.version-badge.latest {
    background: #0066cc;
}

/* Latest proposal highlight */
.proposal-card.latest {
    background: #f0f9ff !important;
    border-color: #0066cc !important;
}

/* Checkbox container styling */
.checkbox-container {
    background: #f0f9ff;
    border-radius: 8px;
    border-left: 4px solid #0066cc;
    padding: var(--space-3);
    margin-top: var(--space-3);
}

.checkbox-container label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-weight: 500;
}

.checkbox-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-container p {
    margin: var(--space-2) 0 0 26px;
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}

/* Beklenen satıştan dönüştürülen satışlar için özel stil */
tr.from-expected-sale {
    transition: all 0.2s ease;
}

tr.from-expected-sale:hover {
    background: linear-gradient(90deg, #d1fae5 0%, #a7f3d0 100%) !important;
    border-left: 3px solid #059669 !important;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

/* ============================================
   SATIŞ EKİBİ KARTLARI - YENİ
   ============================================ */

/* Sellers Cards Grid */
.sellers-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
    padding: var(--space-2);
}

.seller-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: var(--space-4);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.seller-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--success) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.seller-card:hover::before {
    transform: scaleX(1);
}

.seller-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.seller-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.seller-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--success) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.seller-info h3 {
    margin: 0 0 var(--space-1) 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.seller-info .role {
    font-size: 13px;
    color: var(--text-secondary);
}

.seller-card-body {
    margin-bottom: var(--space-3);
}

.seller-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.seller-metric-label {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.seller-metric-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.seller-metric-value.success {
    color: var(--success);
}

.seller-metric-value.primary {
    color: var(--primary);
}

.seller-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.target-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.target-badge.high {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

.target-badge.medium {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.target-badge.low {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
}

.view-details-btn {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: all 0.2s ease;
}

/* ✨ KPI Cards Stilleri */
.sellers-kpi-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.sellers-kpi-section .kpi-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sellers-kpi-section .kpi-card:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* Badge stilleri */
.badge-success {
    padding: 4px 8px;
    border-radius: 12px;
    background: #d1fae5;
    color: #065f46;
    font-size: 11px;
    font-weight: 600;
}

.badge-muted {
    padding: 4px 8px;
    border-radius: 12px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
}

/* Responsive tasarım */
@media (max-width: 768px) {
    .sellers-kpi-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .sellers-kpi-section .kpi-card {
        padding: 16px;
    }
    
    .sellers-kpi-section .kpi-card div:first-child {
        font-size: 24px;
    }
    
    .sellers-kpi-section .kpi-card div:nth-child(2) {
        font-size: 20px;
    }
    
    .seller-card {
        padding: var(--space-3);
    }
    
    .seller-metric-value {
        font-size: 14px;
    }
    
    /* Tablo görünümünde mobilde kart görünümüne geç */
    @media (max-width: 640px) {
        #sellersTableView {
            display: none !important;
        }
        
        #sellersCardsView {
            display: block !important;
        }
    }
}

.view-details-btn:hover {
    gap: var(--space-2);
}

/* Seller Detail Summary Cards */
.seller-detail-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

.summary-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.summary-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.summary-content {
    flex: 1;
}

.summary-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.summary-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}

/* Seller Agencies List */
.seller-agencies-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-3);
}

.agency-item {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.agency-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.agency-item-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 600;
}

.agency-item-status.active {
    background: #d1fae5;
    color: #065f46;
}

.agency-item-status.passive {
    background: #fee2e2;
    color: #991b1b;
}

/* Responsive Design for Seller Cards */
@media (max-width: 768px) {
    .sellers-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .seller-detail-summary {
        grid-template-columns: 1fr;
    }
}

/* ==================== EXTENDED ROW ANIMATIONS ==================== */

/* Detail row initial state (closed) */
/* ==================== SALE DETAIL ROW - SMOOTH ACCORDION ==================== */
.sale-detail-row {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Detail row open state */
.sale-detail-row.detail-open {
    opacity: 1;
    transform: scaleY(1);
}

/* Detail row closing state - INSTANT */
.sale-detail-row.detail-closing {
    transform: scaleY(0) !important;
    opacity: 0 !important;
    transition: none !important; /* ✨ Animasyon yok - instant */
}

/* Inner content fade-in for smooth appearance (açılırken) */
.sale-detail-row td > div {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.sale-detail-row.detail-open td > div {
    opacity: 1;
    transform: translateY(0);
}

/* Kapanırken içerik instant kaybolsun */
.sale-detail-row.detail-closing td > div {
    opacity: 0 !important;
    transition: none !important; /* ✨ Instant */
}

/* Smooth transition for background */
#tbSales tr {
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover effect on clickable rows - Enhanced */
#tbSales tr:not(.sale-detail-row):hover {
    cursor: pointer;
    background-color: rgba(102, 126, 234, 0.05);
    transform: scale(1.002);
    transition: all 0.2s ease;
}

/* Active state for better feedback */
#tbSales tr:not(.sale-detail-row):active {
    transform: scale(0.998);
    background-color: rgba(102, 126, 234, 0.08);
}

/* Loading spinner animation for detail rows */
@keyframes detailRowSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sale-detail-row .loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: detailRowSpin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

/* ==================== MEETING NOTES CELL ==================== */
.meeting-notes-cell {
    cursor: pointer;
    transition: all 0.2s ease;
}

.meeting-notes-cell:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: scale(1.1);
}

.meeting-notes-cell:active {
    transform: scale(0.95);
}

/* Meeting notes tooltip */
.meeting-notes-tooltip {
    position: fixed;
    background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
    color: #1a202c;
    padding: 16px;
    border-radius: 12px;
    font-size: 13px;
    max-width: 400px;
    min-width: 250px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 10000;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
    border: 2px solid #3b82f6;
}

/* Notes Icon Tooltip */
.notes-icon {
    display: inline-block;
    transition: transform 0.2s ease;
    cursor: help;
    position: relative;
}

.notes-icon:hover {
    transform: scale(1.2);
}

/* Custom Tooltip */
.notes-icon::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    white-space: pre-wrap;
    max-width: 300px;
    min-width: 150px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    line-height: 1.5;
    text-transform: none;
}

/* Tooltip arrow */
.notes-icon::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    border: 6px solid transparent;
    border-top-color: #1e293b;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1001;
}

/* Show tooltip on hover */
.notes-icon:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-12px);
}

.notes-icon:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* ==================== OPERATIONS STATUS STYLING ==================== */

/* ✅ Bitti Durumu - Tamamlanmış Kampanyalar */
tr.status-completed {
    background: linear-gradient(90deg, rgba(72, 187, 120, 0.06) 0%, rgba(72, 187, 120, 0.01) 100%) !important;
    border-left: 3px solid #48bb78;
    opacity: 0.75;
}

tr.status-completed td {
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.2);
    color: #718096 !important;
}

tr.status-completed td strong {
    font-weight: 500 !important;
}

tr.status-completed:hover {
    opacity: 1;
    background: linear-gradient(90deg, rgba(72, 187, 120, 0.1) 0%, rgba(72, 187, 120, 0.02) 100%) !important;
}

/* 🔴 Performans Düşük - Gerçekleşen < Planlanan */
tr.underperforming {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.05) 100%) !important;
    border-left: 4px solid #dc2626;
    font-weight: 500;
}

tr.underperforming:hover {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.2) 0%, rgba(220, 38, 38, 0.08) 100%) !important;
    transform: scale(1.002);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
    cursor: help;
}

/* 🟠 Bitti + Performans Düşük */
tr.status-completed-underperforming {
    background: linear-gradient(90deg, rgba(234, 88, 12, 0.12) 0%, rgba(234, 88, 12, 0.03) 100%) !important;
    border-left: 4px solid #ea580c;
    opacity: 0.8;
}

tr.status-completed-underperforming td {
    text-decoration: line-through;
    text-decoration-color: rgba(234, 88, 12, 0.3);
    color: #92400e !important;
}

tr.status-completed-underperforming:hover {
    opacity: 1;
    background: linear-gradient(90deg, rgba(234, 88, 12, 0.18) 0%, rgba(234, 88, 12, 0.05) 100%) !important;
}

/* Performans Kartları Responsive */
@media (max-width: 1024px) {
    .seller-performance-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .seller-performance-cards {
        grid-template-columns: 1fr !important;
    }
    
    .performance-card {
        padding: var(--space-3) !important;
    }
    
    .performance-card-value {
        font-size: 24px !important;
    }
}

/* ✨ Ajans Dağıtımı Drag & Drop Stilleri */
.agency-card {
    user-select: none;
    transition: all 0.2s ease;
}

.agency-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: #3b82f6 !important;
}

.agency-card:active {
    transform: scale(0.98);
}

.agency-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

.agency-drop-zone {
    transition: all 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
    scroll-padding-bottom: 16px;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.agency-drop-zone::-webkit-scrollbar {
    width: 10px;
}

.agency-drop-zone::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
    margin: 4px 0;
}

.agency-drop-zone::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    min-height: 30px;
}

.agency-drop-zone::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Son öğenin scroll edilebilir alan içinde kalmasını sağla */
.agency-drop-zone > *:last-child {
    margin-bottom: 0;
}

.agency-drop-zone.drag-over {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
    border-style: solid !important;
    border-width: 2px !important;
}

.seller-column {
    transition: all 0.2s ease;
}

.seller-column.drag-over {
    box-shadow: 0 0 0 2px #3b82f6;
    border-radius: 12px;
}

/* ✨ Marka Kartları Stilleri */
.brand-card {
    user-select: none;
    transition: all 0.2s ease;
}

.brand-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(3, 105, 161, 0.2);
    border-color: #0284c7 !important;
}

.brand-card:active {
    transform: scale(0.98);
}

.brand-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

.brand-drop-zone {
    transition: all 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
    scroll-padding-bottom: 16px;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.brand-drop-zone::-webkit-scrollbar {
    width: 10px;
}

.brand-drop-zone::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
    margin: 4px 0;
}

.brand-drop-zone::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    min-height: 30px;
}

.brand-drop-zone::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Son öğenin scroll edilebilir alan içinde kalmasını sağla */
.brand-drop-zone > *:last-child {
    margin-bottom: 0;
}

.brand-drop-zone.drag-over {
    border-color: #0284c7 !important;
    background: #f0f9ff !important;
    border-style: solid !important;
    border-width: 2px !important;
}

/* ✨ Yatay Scroll Container Stilleri */
.distribution-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.distribution-scroll-container::-webkit-scrollbar {
    height: 12px;
}

.distribution-scroll-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
}

.distribution-scroll-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

.distribution-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}