/* File: app/static/css/components.css
   Components + pages (STATS/YOUTH) — NIH-like light theme
   Works with the LIGHT app.css tokens (white panels + blue accents)
*/

/* NOTE (2026-01-18): Theme upgraded to Bright/HD tokens in app.css.
   Existing component styles are kept, but key elements are overridden at the bottom
   for crisper borders, brighter accents, and consistent focus/typography.
*/

/* =========================
   1) STATS: Layout grids
========================= */
.stats-top-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap:12px;
}

.stats-mid-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: 3fr 3fr;
  gap:12px;
}

.stats-bottom{ margin-top:12px; }

/* =========================
   2) STATS: Top panels (KPI cards)
========================= */
.stats-panel{ padding:12px; }

.stats-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}

.stats-panel-title{
  font-weight:900;
  font-size:13px;
  color: var(--muted);
}

.stats-panel-kpi{
  text-align:right;
  line-height:1.1;
}

.stats-panel-kpi .kpi-big{
  font-size:14px;
  font-weight:900;
  color: var(--text);
}

.stats-panel-kpi .kpi-sub{
  margin-top:2px;
  font-size:10px;
  color: var(--muted);
}

.stats-panel-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Dept row (top panels ichidagi list) */
.dept-row{
  display:grid;
  grid-template-columns: 42px 1fr 92px;
  gap:10px;
  align-items:center;
  padding:8px 10px;
 

  background: var(--primarySoft);
  border:1px solid rgba(11,79,138,.22);
  color: var(--text);
  transition: .18s ease;
}
.dept-row:hover{
  transform: translateY(-1px);
  background: #dbeafc;
  border-color: rgba(11,79,138,.32);
}

.dept-row-logo{
  
  border-radius:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:11px;

  background: #fff;
  border: 1px solid var(--border);
  color: var(--primary2);
}

.dept-row-name{
  font-size:10px;
  font-weight:900;
  color: var(--text);
  letter-spacing: .2px;
  text-transform: uppercase;
}

.dept-row-metrics{ text-align:right; }
.dept-row-amount{ font-size:12.5px; font-weight:900; color: var(--text); }
.dept-row-percent{
  font-size:10px;
  margin-top:1px;
  color: var(--muted);
}

/* =========================
   3) STATS: Chart card (full height + scroll)
========================= */
.stats-chart{
  display:flex;
  flex-direction:column;
  min-height:1;
  padding:12px;
}



.stats-chart .chart-wrap{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.stats-chart .chart-scroll{
  flex:1;
  min-height:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:6px;
}

/* ApexCharts container fills available height */
.stats-chart #statsChart{
  flex:1;
  min-height:0;
}

/* X-axis labels */

/* =========================
   4) STATS: Rating list (6-card style)
========================= */
.rating-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.rating-item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:stretch;
}

.rating-left{
  display:grid;
  grid-template-columns: 44px 1fr 60px;
  gap:10px;
  align-items:center;

  border:1px solid var(--border);
  
  padding:10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}

.rating-logo{
  width:44px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:11px;

  background:#fff;
  border:1px solid var(--border);
  color: var(--primary2);
}

.rating-name{ font-weight:900; font-size:10px; color: var(--text); }
.rating-sub{ font-size:9px; color:var(--muted); margin-top:2px; }
.rating-rank{ text-align:right; font-weight:900; color: var(--text); }

.rating-kpis{
  display:grid;
  grid-template-columns: repeat(3, 110px);
  gap:10px;
}

.mini-box{
  
  padding:8px 10px;
  border:1px solid var(--border);
  background: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}

.mini-box-title{ font-weight:800; font-size:12px; color: var(--muted); }
.mini-box-val{ font-weight:900; font-size:16px; margin-top:4px; color: var(--text); }
.mini-box-sub{ font-size:12px; color: var(--muted); margin-top:2px; }

/* tones */
.tone-amber{ background:#fff7ed; border-color:#fed7aa; }
.tone-blue{  background:#eff6ff; border-color:#bfdbfe; }
.tone-green{ background:#ecfdf5; border-color:#bbf7d0; }

/* =========================
   5) STATS: Help types (left list + table)
========================= */
.help-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:12px;
}

.help-left{ display:flex; flex-direction:column; gap:10px; }

.help-dept-row{
  display:grid;
  grid-template-columns: 46px 1fr 90px;
  gap:10px;
  align-items:center;
  padding:10px;

  border:1px solid var(--border);

  background: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  transition: .18s ease;
}
.help-dept-row:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: var(--panel2);
}

.help-logo{
  width:46px;
  height:38px;
  border-radius:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:10px;

  background:#fff;
  border:1px solid var(--border);
  color: var(--primary2);
}

.help-dept-name{
  font-weight:900;
  font-size:13px;
  text-transform: uppercase;
  letter-spacing: .2px;
  color: var(--text);
}
.help-dept-total{ text-align:right; font-weight:900; color: var(--text); }

/* Table container (light) */
.table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  
  background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}

.help-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:820px;
}

.help-table thead th{
  position:sticky;
  top:0;

  background: #f1f5f9;
  color: var(--text);
  font-size:12px;
  font-weight:900;
  padding:10px;
  text-align:left;
  border-bottom:1px solid var(--border);
}

.help-table tbody td{
  padding:10px;
  border-bottom:1px solid var(--border);
  font-size:13px;
  color: var(--text);
}

.help-table tbody tr:nth-child(even) td{
  background: #fafcff;
}

/* =========================
   6) Youth table header helpers
========================= */
.youth-big-table thead th{
  vertical-align: top;
  line-height: 1.25;
}
.youth-big-table thead th small{
  display:block;
  font-weight:800;
  color: var(--muted);
  margin-top:6px;
}

/* =========================
   7) UI components (fy-*)
   (light)
========================= */
.fy-btn{
  border:0;
  border-radius:12px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
}

.fy-btn-sm{ padding:6px 10px; font-size:12px; }

.fy-btn-primary{
  background: var(--primary);
  color:#fff;
}
.fy-btn-primary:hover{ background: var(--primary2); }

.fy-btn-ghost{
  background: #fff;
  border:1px solid var(--border);
  color: var(--text);
}
.fy-btn-ghost:hover{
  background: var(--panel2);
  border-color: var(--border2);
}

.fy-mini{ display:flex; flex-direction:column; gap:6px; }

.fy-badge{
  display:inline-block;
  padding:4px 8px;
  
  font-size:12px;
  font-weight:900;
  background: #f1f5f9;
  border:1px solid var(--border);
  color: var(--text);
}

.fy-badge-green{
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #065f46;
}

/* Modal (custom) — light */
.fy-modal{ position:fixed; inset:0; z-index:9999; }
.fy-modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.45); }

.fy-modal-card{
  position:relative;
  width:min(720px, calc(100% - 24px));
  margin:80px auto;

  background: #fff;
  border:1px solid var(--border);
  
  padding:14px;
  box-shadow: 0 18px 50px rgba(15,23,42,.18);
}

.fy-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
}
.fy-modal-title{ font-weight:900; font-size:16px; color: var(--text); }

.fy-form{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.fy-label{ font-weight:900; font-size:13px; color: var(--text); }

.fy-input{
  width:100%;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background: #fff;
  color: var(--text);
  outline:none;
}
.fy-input:focus{
  border-color: rgba(11,79,138,.55);
  box-shadow: 0 0 0 3px rgba(11,79,138,.14);
}

.fy-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fy-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }

/* =========================
   8) Responsive
========================= */
@media (max-width: 1200px){
  .stats-top-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .stats-mid-grid{ grid-template-columns: 1fr; }
  .help-grid{ grid-template-columns: 1fr; }
  .rating-kpis{ grid-template-columns: repeat(3, 110px); }
}

@media (max-width: 560px){
  .stats-top-grid{ grid-template-columns: 1fr; }
  .dept-row{ grid-template-columns: 42px 1fr; }
  .dept-row-metrics{ grid-column: 1 / -1; text-align:left; }
  .rating-item{ grid-template-columns: 1fr; }
  .rating-kpis{ grid-template-columns: repeat(2, 1fr); }
  .fy-row{ grid-template-columns: 1fr; }
}

/* =========================================================
   DEPARTMENTS PAGE (NIH-like light theme)
   Moved from departments/index.htm inline <style>
   ========================================================= */

.dep-page{
  padding-top: 14px;
  padding-bottom: 18px;
}

/* Topbar (page actions) */
.dep-topbar{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-bottom:14px;
}

.dep-btn{
  border: 1px solid rgba(255,255,255,.25);
  background: var(--primary);
  color:#fff;
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 800;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 180px;
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
.dep-btn:hover{ background: var(--primary2); }

/* Card wrapper */
.dep-card{
  border: 1px solid var(--border);
 
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

/* Table */
.dep-grid{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  margin:0;
}

.dep-grid th{
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  color:#fff;
  padding: 14px 12px;
  border: 1px solid rgba(255,255,255,.20);
  font-size: 15px;
  font-weight: 900;
  text-align:center;
}

.dep-grid td{
  border: 1px solid var(--border);
  height: 58px;
  background:#fff;
  vertical-align: middle;
  padding: 8px 10px;
  color: var(--text);
}

/* First column: logo + name */
.dep-name-cell{ padding:0; }

.dep-name-card{
  height: 58px;
  display:flex;
  align-items:center;
  gap:10px;
  background: var(--primarySoft);
  color: var(--text);
  padding: 8px 10px;
  border-right: 1px solid var(--border);
}

/* Logo */
.dep-logo{
  width:46px;
  height:46px;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--primary2);
  font-size: 12px;
  overflow:hidden;
  flex: 0 0 auto;
}
.dep-logo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Name */
.dep-title{
  font-weight: 900;
  text-decoration: underline;
  font-size: 14px;
  line-height: 1.15;
  word-break: break-word;
  color: var(--text);
}

.tc{ text-align:center; }

/* Actions */
.dep-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.act{
  border: 1px solid rgba(11,79,138,.30);
  color: var(--primary2);
  background:#fff;
  padding: 6px 10px;
  
  font-size: 12px;
  cursor:pointer;
  text-decoration:none;
  line-height: 1;
  white-space: nowrap;
  font-weight: 800;
}
.act:hover{ background: var(--panel2); }

.act-danger{
  border-color: rgba(220,38,38,.35);
  color: var(--danger);
}
.act-danger:hover{ background:#fff1f2; }

/* Empty state */
.dep-empty{
  padding: 18px;
  text-align:center;
  color: var(--muted);
}

/* Table scroll (small screens) */
.dep-table-wrap{
  width:100%;
  overflow-x:auto;
}
.dep-table-wrap::-webkit-scrollbar{ height: 10px; }
.dep-table-wrap::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  
}

/* Modal (custom) */
.modal-mask{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 9999;
}

.modal-card{
  width: 560px;
  max-width: calc(100% - 24px);
  background:#fff;

  padding: 16px;
  box-shadow: 0 18px 40px rgba(15,23,42,.22);
  border: 1px solid var(--border);
}

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

.modal-title{
  font-weight: 900;
  font-size: 16px;
  color: var(--text);
}

.modal-close{
  border:none;
  background: transparent;
  font-size: 22px;
  cursor:pointer;
  line-height:1;
  color: var(--muted);
}
.modal-close:hover{ color: var(--text); }

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-grid label{
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
  display:block;
}

.form-grid input{
  width:100%;
  padding: 10px 10px;
  border: 1px solid var(--border);
  
  outline:none;
  background:#fff;
  color: var(--text);
}
.form-grid input:focus{
  border-color: rgba(11,79,138,.55);
  box-shadow: 0 0 0 3px rgba(11,79,138,.14);
}

.modal-actions{
  display:none;
  justify-content:flex-end;
  gap:10px;
  margin-top: 12px;
}

.btn-ghost{
  border: 1px solid var(--border2);
  background:#fff;
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 800;
  color: var(--text);
}
.btn-ghost:hover{ background: var(--panel2); }

/* Responsive for departments modal form */
@media (max-width: 560px){
  .form-grid{ grid-template-columns: 1fr; }
  .dep-btn{ min-width: 150px; }
}


/* =========================================================
   USERS PAGE (NIH-like light theme)
   Moved from users/index.html inline <style>
   ========================================================= */

.users-page{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 0 30px;
}

.users-hero{
  background: #fff;
  border: 1px solid var(--border);
 
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  margin-bottom: 12px;
}

.users-hero h2{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.users-hero .crumb{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.users-card{
  background: #fff;
  border: 1px solid var(--border);
  
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  overflow: hidden;
}

.users-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.users-card-title{ font-weight: 900; color: var(--text); }

.users-card-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Primary pill button (re-usable) */
.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border: 1px solid rgba(11,79,138,.25);
  background: var(--primary);
  color:#fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  text-decoration:none;
}
.btn-pill:hover{ background: var(--primary2); }

/* Table */
.users-card .table-wrap{
  padding: 8px 12px 12px;
}

table.users-table{
  width:100%;
  border-collapse: collapse;
}

.users-table th{
  font-size: 11px;
  color: var(--muted);
  font-weight: 900;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  text-align:left;
}

.users-table td{
  padding: 10px 8px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
  font-size: 13px;
  color: var(--text);
}

.users-table tr:last-child td{ border-bottom: 0; }

.u-cell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 220px;
}

.u-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.10);
  background: #eef3fb;
  flex: 0 0 34px;
}

.u-initial{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--primary2);
  background: var(--primarySoft);
  border: 2px solid #fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.10);
  flex: 0 0 34px;
}

.u-meta{ line-height: 1.2; }
.u-name{ font-weight: 900; }
.u-login{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Pills (status) */
.pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
 
  font-size: 11px;
  font-weight: 900;
  border: 1px solid var(--border);
  background: #f8fbff;
  color: var(--text);
}
.pill.green{ background:#ecfdf5; border-color:#bbf7d0; color:#15803d; }
.pill.gray { background:#f3f6fb; border-color: var(--border); color: var(--muted); }
.pill.red  { background:#fff1f2; border-color:#fecdd3; color:#be123c; }
.pill.blue { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }

/* Row actions */
.actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.btn-mini{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--border);
  background:#fff;
  cursor:pointer;
  color: var(--text);
}
.btn-mini:hover{ background: var(--panel2); }

.btn-mini.primary{
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.btn-mini.danger{
  border-color: #fecaca;
  color: var(--danger);
}

/* Modal (custom) */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  padding: 18px;
}

.modal{
  width: min(720px, 96vw);
  background:#fff;
 
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  overflow:hidden;
  border: 1px solid var(--border);
}

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

.modal-title{ font-weight: 950; color: var(--text); }

.modal-body{ padding: 14px 16px; }

.modal-foot{
  padding: 12px 16px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  border-top: 1px solid var(--border);
  background: var(--panel2);
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-grid .full{ grid-column: 1 / -1; }

.fi{
  width:100%;
  padding: 10px 12px;
  
  border: 1px solid var(--border);
  outline:none;
  font-size: 13px;
  background:#fff;
  color: var(--text);
}
.fi:focus{
  border-color: rgba(11,79,138,.45);
  box-shadow: 0 0 0 3px rgba(11,79,138,.14);
}

.help{
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* Mobile */
@media (max-width: 560px){
  .form-grid{ grid-template-columns: 1fr; }
  .users-page{ padding-left: 6px; padding-right: 6px; }
}

.admin-return-btn{
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,.30);
  background: rgba(239,68,68,.12);
  color: #991b1b;
  font-weight: 900;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left: 8px;
}
.admin-return-btn:hover{ background: rgba(239,68,68,.18); }

/* Admin approve cell */
.admin-approve-cell{
  text-align:center;
  vertical-align: middle;
}

/* Tugmalarni ustma-ust joylash */
.admin-approve-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* Tasdiqlash (yashil) */
.admin-approve-btn{
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.15);
  color:#065f46;
  font-weight:900;
  cursor:pointer;
}
.admin-approve-btn:hover{
  background:rgba(34,197,94,.25);
}

/* QAYTARISH — boshqa rang (warning/danger) */
.admin-return-btn{
  height:32px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(245,158,11,.45);
  background:rgba(245,158,11,.15);
  color:#92400e;
  font-weight:900;
  cursor:pointer;
  font-size:12px;
}
.admin-return-btn:hover{
  background:rgba(245,158,11,.25);
}


/* =========================
   USERS MODAL (ONLY)
========================= */
.u-modal-backdrop{
  position: fixed;
  inset: 0;
  display: none;            /* MUHIM: default yopiq */
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 10, 25, .55);
  z-index: 9999;
}

.u-modal{
  display: block;
  width: min(760px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

/* Modal card ichida footer ko‘rinib turishi uchun */
.modal-card{
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}

.modal-card form{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* form-grid scroll bo‘lishi mumkin, footer esa pastda qoladi */
.modal-card .form-grid{
  overflow: auto;
  min-height: 0;
  padding-bottom: 6px;
}

.modal-card .modal-actions{
  margin-top: 12px;
  flex: 0 0 auto;
}


/* =========================
   BRIGHT / HD overrides
========================= */

/* Universal crisp border + shadow for main containers */
.glass,
.glass-soft,
.panel,
.card,
.stats-panel,
.stats-chart,
.users-card,
.users-hero,
.help-grid > *,
.rating-left,
.mini-box{
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Inputs focus ring */
.tabs-search input:focus,
.fi:focus,
.yf-ctrl:focus,
.fy-input:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: var(--ring) !important;
}

/* Primary buttons */
.btn-pill,
.fy-btn-primary,
.dep-btn,
.action-btn.primary{
  background: var(--primary) !important;
}
.btn-pill:hover,
.fy-btn-primary:hover,
.dep-btn:hover,
.action-btn.primary:hover{
  background: var(--primary2) !important;
}

/* Table headers: cleaner */
.help-table thead th,
.users-table thead th,
.youth-table thead th{
  border-bottom: 1px solid var(--border) !important;
}

/* Pills: consistent */
.pill,
.status-pill,
.chip{
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .12px;
}

/* =========================
   FIX: Top tabs/navigation style
========================= */
.tabs, .top-tabs, .nav-tabs{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  margin: 10px 0 16px;
}

.tabs a, .top-tabs a, .nav-tabs a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  color: #0b1220;
}

.tabs a:hover, .top-tabs a:hover, .nav-tabs a:hover{
  background: rgba(37,99,235,.08);
}

.tabs a.active, .top-tabs a.active, .nav-tabs a.active{
  background: rgba(37,99,235,.14);
  color: #1D4ED8;
}

/* search input yonida yaxshi turishi uchun */
.tabs-search, .top-search{
  margin-left:auto;
  min-width: 260px;
}

/* =========================
   Responsive grids
========================= */

/* KPI / monitoring cardlari qatori: auto-fit */
.kpi-grid, .stats-grid, .monitoring-grid, .cards-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
}

@media (max-width: 1100px){
  .kpi-grid, .stats-grid, .monitoring-grid, .cards-grid{
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 640px){
  .kpi-grid, .stats-grid, .monitoring-grid, .cards-grid{
    grid-template-columns: 1fr;
  }
  .tabs, .top-tabs, .nav-tabs{
    flex-wrap: wrap;
  }
  .tabs-search, .top-search{
    margin-left: 0;
    width: 100%;
    min-width: 0;
  }
}


/* ======================================
   GVARDIYA COMPONENT OVERRIDES
   Qo'yish joyi: components.css OXIRI
====================================== */

/* Departments table header */
.dep-grid th{
  background: linear-gradient(180deg, #7b1e22, #64171b) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Departments name cell fonini yumshoq bordo */
.dep-name-card{
  background: rgba(123,30,34,.10) !important;
}

/* Action buttonlar border rangi */
.act{
  border-color: rgba(123,30,34,.30) !important;
  color: #7b1e22 !important;
}
.act:hover{
  background: rgba(123,30,34,.08) !important;
}



/* ======================================
   STATS DASHBOARD: card title alignment
   Qo'yish joyi: components.css ENG OXIRI
====================================== */

/* Chart card header (title) ixcham + tekis */
.stats-chart .card-title,
.stats-rating .card-title,
.stats-bottom .card-title,
.stats-panel .stats-panel-title{
  margin: 0 0 8px 0 !important;
  padding: 10px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* Chart card ichki paddingni tekislash */
.stats-chart{
  padding: 10px 12px !important;
}

/* Reyting kartasidagi yuqori qatordagi bloklar tekis turishi */
.rating-left{
  align-items: center !important;
}
.rating-name{
  line-height: 1.2 !important;
}