/* ==========================================================================
   sharopov.ai — Admin panel dizayn tizimi
   Uslub: "Soft Graphite + Cyan"
   ========================================================================== */

/* Rang/masofa/radius tokenlari — static/css/tokens.css da (yagona manba). */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg-app);color:var(--text-primary);font:14px/1.5 var(--font-sans);
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--accent-primary);text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none!important}
::selection{background:var(--accent-soft-strong)}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- Yordamchi ---------- */
.ad-gap{flex:1}
.ad-mut{color:var(--text-secondary)}
.ad-mono{font-family:var(--font-mono)}
.ad-right{text-align:right}
.ad-empty{padding:32px 16px;text-align:center;color:var(--text-secondary);font-size:13px}

/* ---------- Ilova karkasi ---------- */
.ad-app{display:grid;grid-template-columns:240px 1fr;height:100svh}

.ad-side{
  display:flex;flex-direction:column;background:var(--surface-1);
  border-right:1px solid var(--border-subtle);min-height:0;overflow:auto;
}
.ad-logo{
  display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;
  font-weight:700;letter-spacing:.02em;border-bottom:1px solid var(--border-subtle);
}
.ad-logo b{color:var(--accent-primary)}
.ad-nav{display:flex;flex-direction:column;gap:2px;padding:10px}
.ad-nav button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
  border-radius:10px;color:var(--text-secondary);text-align:left;font-weight:500;
  transition:background .15s,color .15s;
}
.ad-nav button svg,.ad-nav button i{width:18px;height:18px;flex:none;opacity:.85}
.ad-nav button:hover{background:var(--surface-2);color:var(--text-primary)}
.ad-nav button.on{background:var(--accent-soft);color:var(--accent-primary)}
.ad-side-foot{
  margin-top:auto;padding:12px 16px;border-top:1px solid var(--border-subtle);
  font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:8px;
}
.ad-side-foot b{color:var(--text-primary);font-weight:600}

.ad-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.ad-top{
  display:flex;align-items:center;gap:12px;height:52px;padding:0 20px;
  border-bottom:1px solid var(--border-subtle);background:var(--surface-1);flex:none;
}
.ad-title{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.ad-body{flex:1;min-height:0;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:16px}

/* ---------- KPI ---------- */
.ad-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ad-kpi{
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
}
.ad-kpi-l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}
.ad-kpi-v{font-family:var(--font-mono);font-size:26px;font-weight:600;line-height:1.2}
.ad-kpi-s{font-size:12px;color:var(--text-secondary)}
.ad-kpi.accent{border-color:var(--accent-primary);box-shadow:inset 0 0 0 1px var(--accent-soft-strong)}
.ad-kpi.accent .ad-kpi-v{color:var(--accent-primary)}

/* ---------- Kartochka ---------- */
.ad-card{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:14px;padding:16px;min-width:0}
.ad-card-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ad-card-h b{font-size:14px;font-weight:600}
.ad-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- Jadval ---------- */
.ad-table-wrap{overflow:auto;border:1px solid var(--border-subtle);border-radius:10px}
.ad-table{width:100%;border-collapse:collapse;font-size:13px}
.ad-table th{
  padding:9px 12px;text-align:left;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);
  background:var(--surface-2);border-bottom:1px solid var(--border-strong);white-space:nowrap;
}
.ad-table td{padding:9px 12px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.ad-table tbody tr:last-child td{border-bottom:0}
.ad-table tbody tr:hover{background:var(--surface-hover)}
.ad-table .num{font-family:var(--font-mono);text-align:right;white-space:nowrap}

/* ---------- Belgilar ---------- */
.ad-badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:600;line-height:1.6;white-space:nowrap;
  background:var(--accent-soft-strong);color:var(--accent-primary);border:1px solid var(--accent-soft-strong);
}
.ad-badge.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.ad-badge.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.ad-badge.err{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.ad-badge.ai{background:var(--accent-soft-strong);color:var(--ai);border-color:var(--ai)}
.ad-badge.mut{background:var(--surface-2);color:var(--text-secondary);border-color:var(--border-strong)}

/* ---------- Tugmalar ---------- */
.ad-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 12px;border-radius:9px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text-primary);font-size:13px;font-weight:500;
  line-height:1.2;white-space:nowrap;transition:background .15s,border-color .15s,opacity .15s;
}
.ad-btn:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.ad-btn:active{transform:translateY(1px)}
.ad-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ad-btn.primary{background:var(--accent-primary);border-color:var(--accent-primary);color:#062822;font-weight:600}
.ad-btn.primary:hover{background:#63e0d0;border-color:#63e0d0}
.ad-btn.danger{color:var(--danger);border-color:var(--danger)}
.ad-btn.danger:hover{background:var(--danger-soft)}
.ad-btn.sm{padding:4px 9px;font-size:12px;border-radius:7px}
.ad-icon{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:9px;border:1px solid var(--border-subtle);background:transparent;color:var(--text-secondary);
  transition:background .15s,color .15s;
}
.ad-icon:hover{background:var(--surface-2);color:var(--text-primary)}
.ad-icon svg{width:16px;height:16px}

/* ---------- Formalar ---------- */
.ad-form{display:flex;flex-direction:column;gap:8px}
.ad-form label{font-size:12px;color:var(--text-secondary);display:flex;flex-direction:column;gap:4px}
.ad-input,.ad-select,.ad-textarea{
  width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--border-strong);
  background:var(--bg-app);color:var(--text-primary);font-size:13px;outline:0;
  transition:border-color .15s,box-shadow .15s;
}
.ad-input::placeholder,.ad-textarea::placeholder{color:var(--text-muted)}
.ad-input:focus,.ad-select:focus,.ad-textarea:focus{
  border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-soft-strong);
}
.ad-input:disabled,.ad-select:disabled,.ad-textarea:disabled{opacity:.5;cursor:not-allowed}
.ad-select{
  appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B8C2CC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.ad-select option{background:var(--surface-1)}
.ad-textarea{min-height:90px;resize:vertical;font-family:inherit}
.ad-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ad-row > .ad-input,.ad-row > .ad-select{width:auto;flex:1;min-width:120px}

.ad-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:13px;color:var(--text-primary)}
.ad-switch input{position:absolute;opacity:0;width:0;height:0}
.ad-switch span{
  position:relative;width:36px;height:20px;flex:none;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border-strong);transition:background .2s,border-color .2s;
}
.ad-switch span::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--text-secondary);transition:transform .2s,background .2s;
}
.ad-switch input:checked + span{background:var(--accent-soft-strong);border-color:var(--accent-primary)}
.ad-switch input:checked + span::after{transform:translateX(16px);background:var(--accent-primary)}
.ad-switch input:focus-visible + span{box-shadow:0 0 0 3px var(--accent-soft-strong)}
.ad-switch input:disabled + span{opacity:.5}

/* ---------- Filtr paneli ---------- */
.ad-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ad-filters .ad-input,.ad-filters .ad-select{width:auto;min-width:140px}

/* ---------- Modal ---------- */
.ad-modal{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;
  background:var(--overlay);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:ad-fade .15s ease-out;
}
.ad-modal[hidden]{display:none}
.ad-modal-card{
  width:100%;max-width:560px;max-height:calc(100svh - 32px);overflow:auto;
  background:var(--surface-1);border:1px solid var(--border-strong);border-radius:16px;
  padding:20px;box-shadow:var(--shadow-float);animation:ad-rise .18s ease-out;
}
.ad-modal-h{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.ad-modal-h b{font-size:15px;font-weight:600;flex:1}
@keyframes ad-fade{from{opacity:0}to{opacity:1}}
@keyframes ad-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Toast ---------- */
.ad-toast{
  position:fixed;right:20px;bottom:20px;z-index:200;max-width:360px;
  padding:10px 14px;border-radius:12px;font-size:13px;
  background:var(--surface-1);border:1px solid var(--accent-primary);color:var(--text-primary);box-shadow:var(--shadow-float);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.ad-toast.show{opacity:1;transform:none;pointer-events:auto}
.ad-toast.err{border-color:var(--danger);color:var(--danger)}
.ad-toast.ok{border-color:var(--ok)}

/* ---------- Charts ---------- */
.ad-chart{height:220px;position:relative}
.ad-chart canvas{width:100%;height:100%;display:block}
.ad-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--text-secondary)}
.ad-legend span{display:inline-flex;align-items:center;gap:6px}
.ad-legend i{width:8px;height:8px;border-radius:50%;background:var(--accent-primary);flex:none;display:inline-block}

/* ---------- Routing matritsasi ---------- */
.ad-route{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(150px,1.4fr) minmax(150px,1.4fr) minmax(130px,1fr);gap:8px 14px;align-items:center}
.ad-route-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-weight:600;padding-bottom:4px;border-bottom:1px solid var(--border-subtle)}
.ad-route-eff{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-card+.ad-card{margin-top:14px}
.ad-route label{font-size:13px;color:var(--text-secondary)}
.ad-route .ad-select{width:100%}

/* ---------- Ticket ---------- */
.ad-ticket{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:10px}
.ad-ticket-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ad-ticket-h b{font-weight:600}
.ad-ticket-h small{color:var(--text-secondary);font-size:12px}
.ad-reply{
  padding:8px 12px;border-left:3px solid var(--border-strong);background:var(--bg-app);
  border-radius:0 9px 9px 0;font-size:13px;
}
.ad-reply small{display:block;color:var(--text-secondary);font-size:11px;margin-bottom:2px}
.ad-reply.admin{border-left-color:var(--accent-primary);background:var(--accent-soft)}

/* ---------- Login / 403 ---------- */
.ad-gate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:var(--bg-app)}
.ad-gate .ad-card{width:100%;max-width:380px;padding:24px;box-shadow:var(--shadow-float)}
.ad-gate h2{font-size:18px;font-weight:600;margin-bottom:6px}
.ad-gate p{color:var(--text-secondary);font-size:13px;margin-bottom:14px}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .ad-grid-2{grid-template-columns:1fr}
}
@media (max-width:800px){
  .ad-app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .ad-side{border-right:0;border-bottom:1px solid var(--border-subtle);overflow:visible}
  .ad-logo{height:44px;padding:0 12px}
  .ad-nav{flex-direction:row;overflow-x:auto;padding:6px 8px;gap:4px;scrollbar-width:none}
  .ad-nav::-webkit-scrollbar{display:none}
  .ad-nav button{width:auto;padding:7px 10px;font-size:13px;white-space:nowrap;flex:none}
  .ad-side-foot{display:none}
  .ad-top{padding:0 12px}
  .ad-body{padding:12px;gap:12px}
  .ad-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .ad-route{grid-template-columns:1fr}
  .ad-route-h{display:none}
  .ad-toast{left:12px;right:12px;bottom:12px;max-width:none}
}

/* ---------- Moliya: refund modali, audit JSON, ogohlantirish bloklari ---------- */
.ad-pre{white-space:pre-wrap;word-break:break-all;font-family:var(--font-mono);font-size:11px;max-height:320px;overflow:auto;
  background:var(--surface-2);border:1px solid var(--border-subtle);padding:8px 10px;border-radius:8px;margin:4px 0 0}
.ad-warnbox{border:1px solid var(--danger);background:var(--danger-soft);color:var(--text-primary);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5}
.ad-warnbox b{color:var(--danger)}
.ad-errbox{border:1px solid var(--danger);background:var(--danger-soft);color:var(--danger);border-radius:8px;padding:8px 10px;font-size:12.5px;margin-top:8px}
.ad-otp{font-family:var(--font-mono);font-size:22px;letter-spacing:.35em;text-align:center;width:180px}
.ad-step{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);margin-bottom:10px}
.ad-step i{font-style:normal;width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.ad-step i.on{background:var(--accent-primary);border-color:var(--accent-primary);color:#062822;font-weight:600}
.ad-step i.done{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.ad-countdown{font-family:var(--font-mono);font-size:13px}
.ad-countdown.low{color:var(--danger)}

/* ---------- 2FA (TOTP) sozlash va ruxsatlar ---------- */
.ad-center{text-align:center}
.ad-totp-intro{color:var(--text-secondary);font-size:13px;line-height:1.55;margin-bottom:14px}
.ad-totp-steps{margin:0 0 14px 18px;color:var(--text-secondary);font-size:13px;line-height:1.6}
.ad-totp-steps b{color:var(--text-primary);font-weight:600}
.ad-totp-wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.ad-totp-qr{
  flex:none;width:200px;min-height:200px;padding:10px;border-radius:12px;background:#fff;
  display:grid;place-items:center;
}
.ad-totp-qr img,.ad-totp-qr canvas{display:block;max-width:100%}
.ad-totp-noqr{color:#181B20;font-size:12px;line-height:1.5;text-align:center;word-break:break-all}
.ad-totp-noqr code{font-family:var(--font-mono);font-size:11px}
.ad-totp-info{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px}
.ad-secret{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ad-secret code{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;word-break:break-all;
  background:var(--bg-app);border:1px solid var(--border-strong);border-radius:8px;padding:6px 10px;
}
.ad-code{font-family:var(--font-mono);font-size:18px;letter-spacing:.35em;text-align:center;max-width:220px}
.ad-totp-err{color:var(--danger);font-size:12px;min-height:1.2em}
.ad-perm{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-primary);cursor:pointer;user-select:none;white-space:nowrap}
.ad-perm input{accent-color:var(--accent-primary);cursor:pointer;margin:0}
.ad-perm input:disabled{opacity:.5;cursor:wait}
.ad-perms{white-space:nowrap}

/* ── 🪙 Hamyon bloki (foydalanuvchi modali) ── */
.ad-wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.ad-wcell{
  background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:10px;padding:8px 10px;
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.ad-wcell small{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
.ad-wcell b{font-family:var(--font-mono);font-size:16px;font-weight:600}
.ad-wcell.accent{border-color:var(--accent-primary)}
.ad-wcell.accent b{color:var(--accent-primary)}
.ad-tx-pos{color:var(--ok)}
.ad-tx-neg{color:var(--danger)}
.ad-wform{margin-top:4px}