/* Statistika İdarəetmə Sistemi - CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Inter',Arial,sans-serif;background:#f1f5f9;color:#1e293b}
#app{display:flex;height:100vh;overflow:hidden}
/* Sidebar */
#sidebar{width:260px;min-width:260px;background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);display:flex;flex-direction:column;transition:all .3s ease;z-index:50;overflow:hidden}
#sidebar.collapsed{width:72px;min-width:72px}
.sidebar-brand{padding:20px 16px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-icon{width:40px;height:40px;min-width:40px;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:10px;display:flex;align-items:center;justify-content:center}
.brand-text{overflow:hidden}
.brand-text h2{color:#fff;font-size:13px;font-weight:700;white-space:nowrap;margin:0;line-height:1.3}
.brand-text p{color:#94a3b8;font-size:10px;white-space:nowrap;margin:0}
.nav-section-label{padding:16px 16px 6px;font-size:10px;font-weight:600;color:#475569;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;transition:opacity .2s}
#sidebar.collapsed .nav-section-label{opacity:0}
.nav-item{margin:2px 8px;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:10px;padding:10px 12px;color:#94a3b8;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;border:1px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.06);color:#e2e8f0}
.nav-item.active{background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(99,102,241,.1));color:#a5b4fc;border-color:rgba(99,102,241,.2)}
.nav-item svg{min-width:20px;width:20px;height:20px}
.nav-label{overflow:hidden;transition:opacity .2s}
#sidebar.collapsed .nav-label{opacity:0}
.sidebar-footer{border-top:1px solid rgba(255,255,255,.08);padding:12px 8px;flex-shrink:0}
.user-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.04);overflow:hidden;cursor:pointer;transition:background .2s}
.user-card:hover{background:rgba(255,255,255,.09)}
.user-avatar{width:32px;height:32px;min-width:32px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}
.user-info{overflow:hidden}
.user-info p{margin:0;color:#e2e8f0;font-size:12px;font-weight:600;white-space:nowrap}
.user-info span{color:#64748b;font-size:10px}
/* Main */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
/* Header */
#header{height:60px;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;padding:0 20px;gap:14px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.05);z-index:40}
#toggle-btn{cursor:pointer;padding:8px;border-radius:8px;color:#64748b;transition:all .2s;border:none;background:transparent;display:flex;align-items:center}
#toggle-btn:hover{background:#f1f5f9;color:#1e293b}
.header-title{font-size:15px;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.clock-display{font-size:12px;color:#64748b;font-weight:500;background:#f8fafc;border:1px solid #e2e8f0;padding:5px 11px;border-radius:20px;white-space:nowrap}
.notif-btn{width:36px;height:36px;border-radius:50%;background:#f1f5f9;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#64748b;transition:all .2s}
.notif-btn:hover{background:#e2e8f0}
.logout-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#fee2e2;color:#dc2626;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.logout-btn:hover{background:#fecaca}
/* Content */
#content{flex:1;overflow-y:auto;padding:20px}
#footer{background:#fff;border-top:1px solid #e2e8f0;padding:9px 20px;font-size:11px;color:#94a3b8;display:flex;justify-content:space-between;flex-shrink:0}
.page{display:none}
.page.active{display:block}
.section-title{font-size:20px;font-weight:700;color:#1e293b;margin:0 0 4px}
.section-subtitle{font-size:13px;color:#64748b;margin:0 0 20px}
/* Stat cards */
.stat-card{background:#fff;border-radius:14px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid #e2e8f0;transition:all .3s ease;cursor:pointer}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.card-label{font-size:12px;color:#64748b;font-weight:500;margin:8px 0 4px}
.card-sub{font-size:10px;color:#94a3b8;font-weight:500;margin-bottom:4px}
.card-value{font-size:34px;font-weight:800;color:#1e293b;line-height:1.1}
.card-hint{font-size:10px;color:#94a3b8;margin-top:8px;display:flex;align-items:center;gap:4px}
/* Data table */
.data-table-wrap{background:#fff;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid #e2e8f0;overflow:hidden}
.table-toolbar{padding:14px 18px;border-bottom:1px solid #f1f5f9;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.search-wrap{position:relative;flex:1;min-width:160px}
.search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}
.search-input{width:100%;padding:8px 12px 8px 34px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;outline:none;transition:all .2s;color:#1e293b;background:#fff;font-family:inherit}
.search-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.filter-select{padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;color:#1e293b;outline:none;cursor:pointer;background:#fff;font-family:inherit;transition:all .2s}
.filter-select:focus{border-color:#6366f1}
/* Buttons */
.toolbar-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;font-family:inherit}
.btn-primary{background:#6366f1;color:#fff}.btn-primary:hover{background:#4f46e5}
.btn-success{background:#10b981;color:#fff}.btn-success:hover{background:#059669}
.btn-info{background:#3b82f6;color:#fff}.btn-info:hover{background:#2563eb}
.btn-outline{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}.btn-outline:hover{background:#f8fafc}
.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626}
.btn-warning{background:#f59e0b;color:#fff}.btn-warning:hover{background:#d97706}
.w-full{width:100%;justify-content:center}
/* Table */
table{width:100%;border-collapse:collapse}
thead tr{background:#f8fafc}
th{padding:9px 14px;text-align:left;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #e2e8f0;white-space:nowrap}
td{padding:11px 14px;font-size:13px;color:#374151;border-bottom:1px solid #f1f5f9}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f8fafc}
/* Badges */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.badge-blue{background:#dbeafe;color:#1d4ed8}.badge-green{background:#d1fae5;color:#065f46}
.badge-teal{background:#ccfbf1;color:#0f766e}.badge-red{background:#fee2e2;color:#991b1b}
.badge-purple{background:#ede9fe;color:#5b21b6}.badge-yellow{background:#fef3c7;color:#92400e}
.badge-gray{background:#f1f5f9;color:#475569}
/* Action buttons */
.action-btns{display:flex;gap:5px}
.action-btn{width:28px;height:28px;border-radius:6px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.action-view{background:#dbeafe;color:#2563eb}.action-view:hover{background:#bfdbfe}
.action-edit{background:#d1fae5;color:#059669}.action-edit:hover{background:#a7f3d0}
.action-delete{background:#fee2e2;color:#dc2626}.action-delete:hover{background:#fecaca}
/* Pagination */
.pagination{display:flex;align-items:center;gap:5px;padding:12px 16px;border-top:1px solid #f1f5f9;flex-wrap:wrap}
.page-btn{width:32px;height:32px;border-radius:6px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:#64748b;transition:all .2s;font-family:inherit}
.page-btn:hover:not([disabled]){border-color:#6366f1;color:#6366f1}
.page-btn.active{background:#6366f1;color:#fff;border-color:#6366f1}
.page-btn[disabled]{opacity:.4;cursor:not-allowed}
.page-info{font-size:12px;color:#94a3b8;margin-left:auto}
/* Modals */
.modal-overlay{display:none;position:fixed;inset:0;z-index:999;background:rgba(15,23,42,.55);align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:16px;width:92%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.modal-box.wide{max-width:780px}.modal-box.small{max-width:420px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #f1f5f9;position:sticky;top:0;background:#fff;z-index:1}
.modal-header h3{font-size:15px;font-weight:700;color:#1e293b;margin:0}
.modal-close{width:30px;height:30px;border-radius:7px;border:none;background:#f1f5f9;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:18px;line-height:1;transition:all .2s;font-family:inherit}
.modal-close:hover{background:#e2e8f0;color:#1e293b}
.modal-body{padding:22px}
.modal-footer{padding:14px 22px;border-top:1px solid #f1f5f9;display:flex;gap:8px;justify-content:flex-end}
/* Forms */
.form-group{margin-bottom:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:5px}
.form-input{width:100%;padding:9px 13px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;color:#1e293b;outline:none;transition:all .2s;font-family:inherit;background:#fff}
.form-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.form-select{width:100%;padding:9px 13px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;color:#1e293b;outline:none;cursor:pointer;background:#fff;font-family:inherit}
.form-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
/* Login */
#loginPage{position:fixed;inset:0;z-index:200;background:linear-gradient(135deg,#f0f4ff,#e8ecff,#f0f4ff);display:flex;align-items:center;justify-content:center}
.login-card{background:#fff;border-radius:20px;padding:40px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.1)}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo-icon{width:64px;height:64px;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:16px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 8px 24px rgba(99,102,241,.3)}
.login-logo h1{font-size:20px;font-weight:800;color:#1e293b;margin:0 0 4px}
.login-logo p{font-size:13px;color:#64748b;margin:0}
.login-error{padding:10px 14px;background:#fee2e2;border:1px solid #fecaca;color:#dc2626;border-radius:8px;font-size:13px;margin-bottom:14px}
.hidden{display:none!important}
.alert-warning{padding:10px 14px;background:#fef3c7;border:1px solid #fde68a;color:#92400e;border-radius:8px;font-size:13px;margin-bottom:14px}
/* Toast */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.12);border-left:4px solid;min-width:220px;max-width:320px;pointer-events:auto;cursor:pointer}
.toast.success{border-color:#10b981}.toast.error{border-color:#ef4444}.toast.info{border-color:#3b82f6}.toast.warning{border-color:#f59e0b}
.toast-icon{font-size:15px;font-weight:700;min-width:15px}.toast-text{font-size:13px;font-weight:500;color:#1e293b;flex:1}
.toast-close{color:#94a3b8;font-size:16px;background:none;border:none;cursor:pointer;padding:0;line-height:1;font-family:inherit}
/* Charts */
.chart-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid #e2e8f0}
.chart-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:14px}
/* Rayon progress */
.rayon-list{max-height:360px;overflow-y:auto;padding-right:4px}
.rayon-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f1f5f9}
.rayon-row:last-child{border:none}
.rayon-name{font-size:12px;font-weight:600;color:#374151;min-width:95px}
.rayon-bar-wrap{flex:1}
.rayon-bar{height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden}
.rayon-bar-fill{height:100%;border-radius:3px;transition:width 1s ease}
.rayon-val{font-size:13px;font-weight:800;min-width:32px;text-align:right}
/* Update grid */
.update-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Source cards */
.source-card{background:#f8fafc;border-radius:10px;padding:12px;border:1px solid #f1f5f9}
.source-card .s-label{font-size:11px;color:#64748b;font-weight:500;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.source-card .s-val{font-size:22px;font-weight:800;color:#1e293b;line-height:1.2}
.source-card .s-pct{font-size:11px;color:#10b981;font-weight:600}
/* Qebul tabs */
.qebul-tab-btn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s;font-family:inherit}
.qebul-tab-btn.active{background:#6366f1;color:#fff}.qebul-tab-btn:not(.active){background:#f1f5f9;color:#64748b}
.qebul-tab-btn:not(.active):hover{background:#e2e8f0}
.qebul-tab{display:none}.qebul-tab.active{display:block}
/* Calendar */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-head{text-align:center;font-size:11px;font-weight:700;color:#94a3b8;padding:7px 0}
.cal-day{text-align:center;padding:7px 2px;border-radius:7px;font-size:12px;cursor:pointer;transition:all .2s;color:#64748b;min-height:34px;display:flex;align-items:center;justify-content:center}
.cal-day:hover{background:#f1f5f9}.cal-day.has-event{background:#ede9fe;color:#5b21b6;font-weight:700}
.cal-day.today{background:#6366f1;color:#fff;font-weight:700}.cal-day.empty{color:#e2e8f0;cursor:default}
.cal-day.empty:hover{background:transparent}
/* Profile */
.profile-avatar-lg{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff;margin:0 auto 14px;box-shadow:0 8px 20px rgba(99,102,241,.3)}
/* Backup */
.backup-action-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:22px;transition:all .2s}
.backup-action-card:hover{border-color:#6366f1;box-shadow:0 4px 16px rgba(99,102,241,.1)}
.backup-action-card h4{font-size:15px;font-weight:700;color:#1e293b;margin:0 0 8px}
.backup-action-card p{font-size:13px;color:#64748b;margin:0 0 14px;line-height:1.6}
/* Mobile */
@media(max-width:768px){
  #sidebar{position:fixed;left:-260px;height:100vh;transition:left .3s ease}
  #sidebar.mobile-open{left:0;box-shadow:4px 0 20px rgba(0,0,0,.2)}
  #sidebar.collapsed{left:-72px}
  #content{padding:14px}
  .update-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .stat-card .card-value{font-size:28px}
}
/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}
/* Print */
@media print{#sidebar,#header,.table-toolbar,.pagination,.action-btns,.modal-overlay,#footer{display:none!important}#main{overflow:visible}.page{display:block!important}table{font-size:10px}}
/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideInRight{from{transform:translateX(16px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.modal-overlay.open .modal-box{animation:slideUp .25s ease}
.toast{animation:slideInRight .25s ease}