/* ============================================================================
   app.css — SAT Arena umumiy dizayn tizimi.
   FRED_front (pages/dashboard.html, menu.html) uslubidan ko'chirilgan:
   xuddi shu ranglar, xuddi shu sidebar/topbar/bottom-nav naqshi, xuddi shu
   shrift (Outfit) va komponent uslublari — faqat barcha sahifalar orasida
   TAKRORLANMASLIGI uchun bitta umumiy faylga chiqarildi (asl loyihada har bir
   .html o'zining <style> blokida takrorlagan edi).
   ============================================================================ */

:root {
  --white-color:#ffffff; --primary-color:#535da1; --secondary-color:#14B789;
  --section-bg-color:#f9f9f9; --dark-color:#000000; --p-color:#717275;
  --border-color:#e9eaeb; --featured-border-color:#727aab;
  --nav-width:240px; --topbar-height:64px; --danger-color:#e74c3c;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Outfit',sans-serif;}
body{background:var(--section-bg-color);color:var(--dark-color);transition:background .3s,color .3s;}
a{color:inherit;}

/* LOADER */
.page-loader{position:fixed;inset:0;background:var(--primary-color);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;opacity:1;transition:opacity .4s;}
.page-loader.hide{opacity:0;pointer-events:none;}
.loader-logo{color:#fff;font-size:36px;font-weight:800;letter-spacing:3px;margin-bottom:28px;}
.loader-logo span{color:var(--secondary-color);}
.loader-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* SIDEBAR (desktop: doim ko'rinadi; admin-mode: mobilda ham hamburger orqali chiqadi) */
.sidebar{display:none;}
.sidebar-logo{color:#fff;font-size:26px;font-weight:800;letter-spacing:2px;padding:0 28px 32px;border-bottom:1px solid rgba(255,255,255,.15);cursor:pointer;user-select:none;}
.sidebar-logo span{color:var(--secondary-color);}
.sidebar-nav{flex:1;padding:24px 0;display:flex;flex-direction:column;gap:4px;overflow-y:auto;}
.nav-item-side{display:flex;align-items:center;gap:14px;padding:13px 28px;color:rgba(255,255,255,.65);font-size:14px;font-weight:500;cursor:pointer;border-left:3px solid transparent;transition:all .2s;text-decoration:none;}
.nav-item-side i{font-size:17px;width:20px;text-align:center;}
.nav-item-side:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-item-side.active{background:rgba(255,255,255,.12);color:#fff;border-left:3px solid var(--secondary-color);}
@media(min-width:768px){
  .sidebar{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:var(--nav-width);height:100vh;background:var(--primary-color);padding:28px 0;z-index:100;box-shadow:4px 0 20px rgba(83,93,161,.15);}
  .main-content{margin-left:var(--nav-width);}
  .bottom-nav{display:none !important;}
}

/* TOPBAR (mobile) */
.topbar{background:#fff;padding:0 20px;height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:50;gap:12px;}
.topbar-logo{color:var(--primary-color);font-weight:800;font-size:22px;letter-spacing:2px;cursor:pointer;user-select:none;white-space:nowrap;}
.topbar-logo span{color:var(--secondary-color);}
@media(min-width:768px){.topbar-logo{display:none;}}
.topbar-title{font-size:16px;font-weight:700;color:var(--dark-color);display:none;}
@media(min-width:768px){.topbar-title{display:block;}}
.topbar-actions{display:flex;align-items:center;gap:6px;}
.action-btn{width:38px;height:38px;border-radius:50%;background:var(--section-bg-color);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--p-color);transition:all .2s;font-size:15px;}
.action-btn:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);}
.action-btn.logout-btn:hover{background:var(--danger-color);border-color:var(--danger-color);}

/* PAGE / LAYOUT */
.page{padding:28px 20px 100px;max-width:960px;}
@media(min-width:768px){.page{padding:32px 36px 40px;}}
.greeting{margin-bottom:28px;}
.greeting h2{font-size:26px;font-weight:700;}
.greeting p{font-size:14px;color:var(--p-color);margin-top:4px;}
.page-header{margin-bottom:24px;}
.page-header h2{font-size:24px;font-weight:800;color:var(--dark-color);}
.page-header p{font-size:13px;color:var(--p-color);margin-top:4px;}

/* STATS */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
.stat-card{background:#fff;border-radius:16px;padding:20px;border:1px solid var(--border-color);transition:transform .2s,box-shadow .2s;}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(83,93,161,.1);}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:14px;}
.stat-icon.blue  {background:rgba(83,93,161,.1); color:var(--primary-color);}
.stat-icon.green {background:rgba(20,183,137,.1);color:var(--secondary-color);}
.stat-icon.purple{background:rgba(114,122,171,.1);color:var(--featured-border-color);}
.stat-icon.dark  {background:rgba(0,0,0,.06);    color:var(--dark-color);}
.stat-value{font-size:28px;font-weight:800;line-height:1;}
.stat-label{font-size:12px;color:var(--p-color);margin-top:4px;}

/* SHIMMER (loading skeleton) */
.shimmer{display:inline-block;border-radius:6px;background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:shimmer-move 1.2s infinite;}
@keyframes shimmer-move{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* CARD */
.card{background:#fff;border-radius:20px;padding:24px;border:1px solid var(--border-color);margin-bottom:16px;}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap;}
.card-title{font-size:16px;font-weight:700;}
.badge{background:rgba(20,183,137,.1);color:var(--secondary-color);font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap;}
.badge.gray{background:rgba(0,0,0,.06);color:var(--p-color);}
.badge.red{background:rgba(231,76,60,.1);color:var(--danger-color);}

/* LISTS / ROWS */
.result-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-color);gap:12px;}
.result-row:last-child{border-bottom:none;}
.result-row-left{display:flex;align-items:center;gap:12px;min-width:0;}
.rr-icon{width:38px;height:38px;border-radius:10px;background:rgba(83,93,161,.08);color:var(--primary-color);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.rr-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.rr-date{font-size:11px;color:var(--p-color);margin-top:2px;}
.rr-score{text-align:right;flex-shrink:0;}
.rr-pct{font-size:16px;font-weight:800;}
.rr-detail{font-size:11px;color:var(--p-color);margin-top:2px;}
.pct-high{color:var(--secondary-color);}
.pct-mid{color:var(--featured-border-color);}
.pct-low{color:var(--danger-color);}

/* EMPTY STATE */
.empty-state{text-align:center;padding:32px 20px;color:var(--p-color);}
.empty-state i{font-size:36px;opacity:.2;display:block;margin-bottom:10px;}
.empty-state p{font-size:13px;}
.empty-state a,.empty-state button{display:inline-block;margin-top:12px;padding:9px 20px;background:var(--primary-color);color:#fff;border-radius:10px;text-decoration:none;font-size:13px;font-weight:700;border:none;cursor:pointer;font-family:inherit;}

/* QUICK LINKS */
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.quick-card{background:#fff;border-radius:16px;padding:18px;border:1px solid var(--border-color);display:flex;align-items:center;gap:14px;cursor:pointer;text-decoration:none;transition:all .2s;color:var(--dark-color);}
.quick-card:hover{border-color:var(--primary-color);box-shadow:0 4px 16px rgba(83,93,161,.12);transform:translateY(-1px);}
.quick-card-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.quick-card-icon.blue  {background:rgba(83,93,161,.1); color:var(--primary-color);}
.quick-card-icon.green {background:rgba(20,183,137,.1);color:var(--secondary-color);}
.quick-card-icon.purple{background:rgba(114,122,171,.1);color:var(--featured-border-color);}
.quick-card-icon.dark  {background:rgba(0,0,0,.06);    color:var(--dark-color);}
.quick-card-label{font-size:13px;font-weight:700;}
.quick-card-sub{font-size:11px;color:var(--p-color);margin-top:2px;}

/* BUTTONS / FORMS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;border:none;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;text-decoration:none;}
.btn-primary{background:var(--primary-color);color:#fff;}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);}
.btn-secondary{background:var(--secondary-color);color:#fff;}
.btn-outline{background:#fff;border:1px solid var(--border-color)!important;color:var(--dark-color);}
.btn-outline:hover{border-color:var(--primary-color)!important;}
.btn-danger{background:var(--danger-color);color:#fff;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;}
.btn-block{width:100%;}

.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--dark-color);}
.form-input{width:100%;padding:12px 16px;border:1px solid var(--border-color);border-radius:12px;font-size:14px;font-family:inherit;background:#fff;color:var(--dark-color);outline:none;transition:border-color .2s;}
.form-input:focus{border-color:var(--primary-color);}
.form-hint{font-size:12px;color:var(--p-color);margin-top:6px;}
.form-error{font-size:12px;color:var(--danger-color);margin-top:6px;display:none;}
.form-error.show{display:block;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;pointer-events:none;transition:opacity .25s;padding:20px;}
.modal-overlay.show{opacity:1;pointer-events:all;}
.modal{background:#fff;border-radius:20px;padding:32px 28px;width:90%;max-width:360px;text-align:center;transform:scale(.9);transition:transform .25s;box-shadow:0 20px 60px rgba(0,0,0,.2);}
.modal-overlay.show .modal{transform:scale(1);}
.modal-icon{width:60px;height:60px;background:rgba(231,76,60,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:24px;color:var(--danger-color);}
.modal-icon.success{background:rgba(20,183,137,.1);color:var(--secondary-color);}
.modal h3{font-size:18px;font-weight:700;margin-bottom:8px;}
.modal p{font-size:13px;color:var(--p-color);margin-bottom:24px;}
.modal-btns{display:flex;gap:10px;}
.modal-btns button{flex:1;padding:11px;border-radius:12px;border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;}
.btn-cancel{background:var(--section-bg-color);border:1px solid var(--border-color)!important;color:var(--p-color);}
.btn-cancel:hover{background:var(--border-color);}
.btn-logout{background:var(--danger-color);color:#fff;}
.btn-logout:hover{background:#c0392b;}

/* BOTTOM NAV (mobile) */
.bottom-nav{position:fixed;bottom:0;left:0;width:100%;background:#fff;display:flex;justify-content:space-around;padding:10px 0 14px;border-top:1px solid var(--border-color);z-index:100;}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--p-color);cursor:pointer;padding:6px 14px;border-radius:12px;transition:all .2s;text-decoration:none;}
.nav-item i{font-size:20px;}
.nav-item.active{color:var(--primary-color);background:rgba(83,93,161,.08);}

/* PROGRESS */
.progress-bar{height:6px;background:var(--border-color);border-radius:10px;margin-top:16px;overflow:hidden;}
.progress-fill{height:100%;width:0%;border-radius:10px;transition:width .6s ease;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));}

/* TOAST */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--dark-color);color:#fff;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;z-index:2000;opacity:0;pointer-events:none;transition:all .3s;max-width:90%;text-align:center;}
@media(min-width:768px){.toast{bottom:30px;}}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.error{background:var(--danger-color);}
.toast.success{background:var(--secondary-color);}

/* ADMIN/DEVELOPER PANEL — mobilda hamburger + slide-in sidebar, desktopda doimiy sidebar */
body.admin-mode .sidebar{
  /* MUHIM: asl .sidebar{display:none} qoidasi faqat desktop media query ichida
     to'liq stil (fixed pozitsiya, kenglik, fon rangi) berardi — mobilda bu
     xususiyatlar umuman qo'llanilmas edi. Shu sababli bu yerda barchasi
     admin-mode uchun aniq qayta e'lon qilindi (mobil va desktop uchun bir xil). */
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0;
  width:var(--nav-width);
  height:100vh;
  background:var(--primary-color);
  padding:28px 0;
  box-shadow:4px 0 20px rgba(83,93,161,.15);
  transform:translateX(-100%);
  transition:transform .25s ease;
  z-index:200;
}
body.admin-mode .sidebar.open{transform:translateX(0);}
body.admin-mode .main-content{margin-left:0;}
body.admin-mode .topbar{justify-content:space-between;}
body.admin-mode .topbar-title{display:block;font-size:15px;}
body.admin-mode .hamburger-btn{display:flex;}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150;opacity:0;pointer-events:none;transition:opacity .25s;}
.sidebar-overlay.show{opacity:1;pointer-events:all;}
.admin-bottom-nav{display:flex;}
@media(min-width:768px){
  body.admin-mode .sidebar{transform:translateX(0);}
  body.admin-mode .main-content{margin-left:var(--nav-width);}
  body.admin-mode .hamburger-btn{display:none;}
  body.admin-mode .topbar-title{display:block;}
  .sidebar-overlay{display:none;}
  .admin-bottom-nav{display:none;}
}

/* ADMIN TABLE */
.admin-table{width:100%;border-collapse:collapse;font-size:13px;}
.admin-table th{text-align:left;padding:10px 12px;color:var(--p-color);font-weight:700;border-bottom:2px solid var(--border-color);white-space:nowrap;}
.admin-table td{padding:10px 12px;border-bottom:1px solid var(--border-color);vertical-align:top;}
.admin-table tr:hover td{background:var(--section-bg-color);}
.table-wrap{overflow-x:auto;}
.icon-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-color);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--p-color);margin-right:4px;}
.icon-btn:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);}
.icon-btn.danger:hover{background:var(--danger-color);border-color:var(--danger-color);}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.toolbar .form-input{max-width:260px;}
.file-drop{border:2px dashed var(--border-color);border-radius:14px;padding:24px;text-align:center;cursor:pointer;color:var(--p-color);font-size:13px;}
.file-drop:hover{border-color:var(--primary-color);}