/* Veltix — neomorfik (soft UI) qatlam.
 * style.css'dan KEYIN ulanadi: o'zgaruvchilarni almashtiradi va asosiy komponentlarni
 * "ko'tarilgan" (tashqi soya) yoki "botgan" (ichki soya) ko'rinishga o'tkazadi. */
:root {
  --bg: #e9ecf7;
  --card-bg: #e9ecf7;
  --text: #1e2340;
  --text-muted: #6b7390;
  --border: rgba(255, 255, 255, .6);
  --line: rgba(163, 171, 203, .28);
  --primary: #5b52f0;
  --primary-dark: #4a41d6;
  --primary-soft: rgba(91, 82, 240, .12);
  --neu-light: #ffffff;
  --neu-dark: rgba(163, 171, 203, .6);
  --neu-inset-bg: rgba(163, 171, 203, .16);
  --shadow-sm: -3px -3px 7px var(--neu-light), 3px 3px 8px var(--neu-dark);
  --shadow-md: -5px -5px 12px var(--neu-light), 6px 6px 14px var(--neu-dark);
  --shadow-lg: -8px -8px 20px var(--neu-light), 10px 10px 26px var(--neu-dark);
  --neu-inset: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
  --radius: 20px;
  --radius-sm: 14px;
  --input-bg: var(--neu-inset-bg);
  --input-focus-bg: var(--neu-inset-bg);
  --sidebar-bg: var(--bg);
  --sidebar-text: var(--text-muted);
  --sidebar-hover: transparent;
}
body.dark-mode, :root[data-theme="dark"] {
  --bg: #21242c;
  --card-bg: #21242c;
  --text: #e7e9ee;
  --text-muted: #9aa3b2;
  --border: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .07);
  --primary: #8a83ff;
  --primary-dark: #7a72f2;
  --neu-light: #2d313c;
  --neu-dark: rgba(8, 9, 12, .72);
  --neu-inset-bg: rgba(0, 0, 0, .22);
  /* :root'dagi hosila o'zgaruvchilar shu yerda qayta hisoblanishi shart */
  --shadow-sm: -3px -3px 7px var(--neu-light), 3px 3px 8px var(--neu-dark);
  --shadow-md: -5px -5px 12px var(--neu-light), 6px 6px 14px var(--neu-dark);
  --shadow-lg: -8px -8px 20px var(--neu-light), 10px 10px 26px var(--neu-dark);
  --neu-inset: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
  --input-bg: var(--neu-inset-bg);
  --input-focus-bg: var(--neu-inset-bg);
  --sidebar-bg: var(--bg);
  --sidebar-text: var(--text-muted);
}
body { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--neu-dark); }

/* ---------- Ko'tarilgan yuzalar ---------- */
.dash-card, .chart-card, .sklad-panel, .home-panel, .home-card, .promo-card, .sales-summary, .day-group,
.shift-bar, .filter-bar, .form-section, .pos-cart, .kassa-cart-col, .kassa-total-row, .cart-table, .ombor-table,
.roles-matrix, .page-help, .onboarding-card, .search-results, .dropdown-menu, .modal, .auth-card, .po-card,
.report-range-picker, .co-total, .pos-product-card, .payment-method-label, .onboarding-step, .pr-card, .product-row {
  background: var(--card-bg) !important;
  border: none !important;
  box-shadow: var(--shadow-md) !important;
}
.modal, .auth-card { box-shadow: var(--shadow-lg) !important; }
.onboarding-card { background: linear-gradient(135deg, var(--primary-soft), transparent 70%), var(--card-bg) !important; }
.page-help { border-left: 4px solid var(--primary) !important; }
.pos-product-card { box-shadow: var(--shadow-sm) !important; }
.pos-product-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-2px); }
.pos-product-card:active { box-shadow: var(--neu-inset) !important; transform: none; }
.pos-product-card.out-of-stock { opacity: .55; box-shadow: var(--neu-inset) !important; }
.onboarding-step.current { box-shadow: var(--neu-inset) !important; }
.chart-small { box-shadow: none !important; }
.view-kassa .cart-table { box-shadow: none !important; }
.dash-card:hover { box-shadow: var(--shadow-lg) !important; }
.ombor-table th, .ombor-table td, .cart-table th, .cart-table td { border-color: var(--line) !important; }
.ombor-table thead, .ombor-table th { background: transparent !important; }
.ombor-table tbody tr:hover { background: var(--primary-soft) !important; }
.table-wrap { padding: 8px 8px 14px; margin: -8px; }

/* ---------- Yuqori panel va yon menyu ---------- */
.topbar { background: var(--bg); border: none; box-shadow: 0 8px 18px -12px var(--neu-dark); }
.topbar-hamburger:hover { background: transparent; box-shadow: var(--shadow-sm); }
.sidebar { box-shadow: 8px 0 22px -14px var(--neu-dark); }
.sidebar-brand { border-bottom: 1px solid var(--line); }
.sidebar-brand-name, .sidebar-platform-brand span { color: var(--text); }
.sidebar-section { color: var(--text-muted); opacity: .7; }
.sidebar-footer { border-top: 1px solid var(--line); }
.sidebar-link { border-radius: 14px; color: var(--text-muted); }
.sidebar-link:hover { color: var(--primary); box-shadow: var(--shadow-sm); }
.sidebar-link.active { background: var(--bg); color: var(--primary); box-shadow: var(--neu-inset); font-weight: 700; }
.sidebar-link .nav-icon { opacity: .75; }
.sidebar-link.active .nav-icon { opacity: 1; }
.sidebar-logout:hover { background: transparent; color: var(--danger); box-shadow: var(--shadow-sm); }
.sidebar-overlay { background: rgba(30, 35, 64, .35); backdrop-filter: blur(2px); }

/* ---------- Tugmalar ---------- */
.btn { border-radius: 14px; transition: box-shadow .15s, transform .06s, color .15s; }
.btn:active { transform: none; box-shadow: var(--neu-inset) !important; }
.btn-primary { background: linear-gradient(145deg, #7068ff, #4f46e5); color: #fff; box-shadow: 4px 6px 14px rgba(91, 82, 240, .38), -3px -3px 8px var(--neu-light); }
.btn-primary:hover { background: linear-gradient(145deg, #7068ff, #4f46e5); box-shadow: 5px 8px 18px rgba(91, 82, 240, .46), -3px -3px 8px var(--neu-light); }
.btn-primary:active { box-shadow: inset 3px 3px 8px rgba(30, 20, 120, .55) !important; }
.btn-ghost { background: var(--bg); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: var(--bg); color: var(--primary); box-shadow: var(--shadow-md); }
.btn-danger { background: linear-gradient(145deg, #ef5f5f, #d93636); box-shadow: 4px 6px 14px rgba(220, 38, 38, .32), -3px -3px 8px var(--neu-light); }
.btn-cash { background: linear-gradient(145deg, #12b886, #059669); box-shadow: 4px 6px 14px rgba(5, 150, 105, .35), -3px -3px 8px var(--neu-light); }
.btn-debt { background: linear-gradient(145deg, #f59e0b, #d97706); box-shadow: 4px 6px 14px rgba(217, 119, 6, .35), -3px -3px 8px var(--neu-light); }
.btn-scan { background: linear-gradient(145deg, #7068ff, #4f46e5); box-shadow: 4px 6px 14px rgba(91, 82, 240, .38), -3px -3px 8px var(--neu-light); }
.btn:disabled { box-shadow: none !important; }
.link-btn { color: var(--primary); }

/* ---------- Maydonlar (ichiga botgan) ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea,
.search-input, .auth-form input, #view-settings input, #view-settings select,
.pos-search input, .pt-search input, .products-toolbar > select, .sales-filter-selects select, .sales-custom-dates input,
.report-range-picker input[type=date] {
  background: var(--neu-inset-bg) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light) !important;
  color: var(--text);
}
input:focus, select:focus, textarea:focus, .search-input:focus, .auth-form input:focus, .pos-search input:focus, .pt-search input:focus {
  outline: none !important;
  box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light), 0 0 0 2px rgba(91, 82, 240, .45) !important;
}
::placeholder { color: var(--text-muted); opacity: .75; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }

/* ---------- Chiplar va tanlovlar ---------- */
.chip, .kassa-category-chip, .period-btn, .pos-categories .kassa-category-chip, .pos-scan-btn, .sale-more,
.pr-actions .btn, #products-more-btn, .variant-pick-btn, .checkout-modal .checkout-quick-amounts .btn, .topbar-help-btn {
  background: var(--bg) !important;
  border: none !important;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm) !important;
}
.chip:hover, .kassa-category-chip:hover { color: var(--primary); }
.chip.active, .kassa-category-chip.active, .period-btn.active, .pos-categories .kassa-category-chip.active {
  background: var(--bg) !important;
  color: var(--primary) !important;
  box-shadow: var(--neu-inset) !important;
  font-weight: 700;
}
.co-method span { background: var(--bg); border: none !important; box-shadow: var(--shadow-sm); border-radius: 16px; }
.co-method input:checked + span { box-shadow: var(--neu-inset); color: var(--primary); }
.co-method input:focus-visible + span { box-shadow: var(--neu-inset), 0 0 0 2px rgba(91, 82, 240, .45); }

/* ---------- Auth ekrani ---------- */
.auth-screen { background: var(--bg); }
.auth-card { border-radius: 30px; }
.auth-card h1 { font-size: 26px; font-weight: 800; }
.lang-switch button:hover { background: transparent; color: var(--primary); box-shadow: var(--shadow-sm); }

/* ---------- Modal ---------- */
.modal-backdrop { background: rgba(30, 35, 64, .38); backdrop-filter: blur(3px); }
.modal { border-radius: 28px; }
.dropdown-menu { border-radius: 18px; }
.dropdown-menu button:hover, .dropdown-menu a:hover { background: var(--primary-soft); }

/* ---------- Belgilar ---------- */
.toast { background: #2b3050; box-shadow: var(--shadow-lg); border-radius: 16px; }
.subscription-banner.warning, .subscription-banner.expired { border: none; box-shadow: 0 6px 14px -10px var(--neu-dark); }

/* ---------- Telefon: pastki menyu va to'lov paneli ---------- */
@media (max-width: 860px) {
  .bottom-nav { background: var(--bg) !important; border: none !important; box-shadow: 0 -10px 22px -14px var(--neu-dark) !important; }
  .mobile-pay-bar { background: var(--bg); border: none; box-shadow: var(--shadow-lg); border-radius: 20px; }
  .ombor-table tr { background: var(--bg) !important; border: none !important; box-shadow: var(--shadow-sm) !important; border-radius: 16px; }
  .pos-cart-foot { box-shadow: 0 -10px 20px -14px var(--neu-dark); }
}

/* ---------- Ikonkalar (Phosphor, emoji o'rnida) ---------- */
i.ph, i.ph-fill { display: inline-block; vertical-align: -0.14em; font-size: 1.12em; margin: 0 .22em 0 0; font-style: normal; line-height: 1; }
i.ph-green { color: #16a34a; }
i.ph-muted { color: var(--text-muted); }
i.ph:last-child, i.ph-fill:last-child { margin-right: 0; }
button > i.ph:only-child, button > i.ph-fill:only-child { margin: 0; }

.auth-logo { display: block; margin: -6px auto 14px; border-radius: 28px; box-shadow: var(--shadow-md); }
.auth-card h1 { margin-bottom: 6px; }

/* ---------- Rejim tugmasi ---------- */
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg); color: var(--primary); box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; cursor: pointer; flex-shrink: 0; transition: box-shadow .15s; }
.theme-toggle:hover { box-shadow: var(--shadow-md); }
.theme-toggle:active { box-shadow: var(--neu-inset); }
.theme-toggle i { margin: 0 !important; }
.auth-screen { position: relative; }
.auth-theme { position: absolute; top: 18px; right: 18px; }
.topbar .theme-toggle { margin-left: auto; width: 36px; height: 36px; font-size: 17px; }
.topbar-title { margin-right: 0 !important; }

/* ---------- Valyuta kurslari ---------- */
.rate-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.rate-chip { background: var(--bg); box-shadow: var(--shadow-sm); border-radius: 16px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 130px; }
.rate-chip .rate-code { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.rate-chip b { font-size: 15px; }
#view-settings input[type=checkbox], .checkbox-label input[type=checkbox] { width: auto !important; margin: 0 8px 0 0 !important; padding: 0; box-shadow: none !important; background: none !important; }

/* ===== Kassa dasturi: PIN ekrani ===== */
.pin-card{max-width:360px;text-align:center}
.pin-hint{color:var(--text-muted);margin:-4px 0 10px;font-size:14px}
.pin-dots{display:flex;justify-content:center;gap:12px;margin:8px 0 6px;min-height:18px}
.pin-dots i{width:16px;height:16px;border-radius:50%;background:var(--bg-inset,rgba(120,120,160,.25));box-shadow:inset 2px 2px 4px rgba(0,0,0,.18),inset -2px -2px 4px rgba(255,255,255,.35)}
.pin-dots i.on{background:var(--primary);box-shadow:none}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.pin-pad button{height:68px;font-size:26px;font-weight:700;border:0;border-radius:18px;cursor:pointer;color:var(--text);background:var(--surface,var(--bg));box-shadow:5px 5px 11px var(--shadow-dark,rgba(0,0,0,.18)),-5px -5px 11px var(--shadow-light,rgba(255,255,255,.7))}
.pin-pad button:active{box-shadow:inset 3px 3px 7px var(--shadow-dark,rgba(0,0,0,.2)),inset -3px -3px 7px var(--shadow-light,rgba(255,255,255,.6))}
.pin-pad .pin-ok{background:var(--primary);color:#fff;font-size:20px}
@keyframes pin-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-card.shake{animation:pin-shake .35s}

/* ===== AI yordamchi ===== */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:900;width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;color:#fff;font-size:26px;background:var(--primary);box-shadow:0 8px 20px rgba(91,80,238,.45)}
.ai-fab:hover{filter:brightness(1.08)}
.ai-panel{position:fixed;right:22px;bottom:90px;z-index:901;width:min(420px,calc(100vw - 24px));height:min(620px,calc(100vh - 120px));display:flex;flex-direction:column;border-radius:22px;background:var(--bg);box-shadow:9px 9px 22px var(--shadow-dark,rgba(0,0,0,.25)),-6px -6px 16px var(--shadow-light,rgba(255,255,255,.6));overflow:hidden}
.ai-panel.hidden,.ai-fab.hidden{display:none}
.ai-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(120,120,160,.18)}
.ai-head button{border:0;background:none;color:var(--text-muted);font-size:20px;cursor:pointer;padding:2px 6px}
.ai-messages{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ai-msg{max-width:88%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.45;word-wrap:break-word}
.ai-msg p{margin:0 0 6px}.ai-msg p:last-child{margin:0}.ai-msg ul{margin:4px 0 4px 18px;padding:0}
.ai-user{align-self:flex-end;background:var(--primary);color:#fff}
.ai-assistant{align-self:flex-start;background:rgba(120,120,160,.14)}
.ai-assistant table{border-collapse:collapse;font-size:13px;margin:4px 0;width:100%}
.ai-assistant th,.ai-assistant td{padding:4px 6px;border-bottom:1px solid rgba(120,120,160,.2);text-align:left}
.ai-wait{opacity:.6;font-style:italic}.ai-error{background:rgba(217,45,58,.12);color:#d92d3a}
.ai-hello{color:var(--text-muted);font-size:14px}.ai-hello p{margin:6px 0 0}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px}
.ai-chips button{border:0;padding:8px 12px;border-radius:14px;font-size:13px;cursor:pointer;color:var(--primary);background:rgba(91,80,238,.1)}
.ai-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(120,120,160,.18)}
.ai-form input{flex:1;padding:11px 13px;border:0;border-radius:14px;font-size:15px}
.ai-form button{width:44px;border:0;border-radius:14px;background:var(--primary);color:#fff;font-size:20px;cursor:pointer}
.ai-form button:disabled{opacity:.5}
.ai-left{padding:0 14px 8px;font-size:11px;color:var(--text-muted);text-align:center;min-height:14px}
@media(max-width:700px){.ai-fab{bottom:78px;right:14px}.ai-panel{right:8px;bottom:142px;height:min(560px,calc(100vh - 170px))}}

.ai-action{max-width:96%;border:1px solid rgba(91,80,238,.35)}
.ai-action-title{font-weight:700;margin-bottom:6px}
.ai-action table td{font-size:13px;vertical-align:top}.ai-action .ai-quote{font-style:italic;color:var(--text-muted)}
.ai-warn{margin:6px 0 0 18px;padding:0;font-size:12px;color:#b45309}
.ai-action-btns{display:flex;gap:8px;margin-top:10px}
.ai-action-btns button{flex:1;padding:9px;border:0;border-radius:12px;font-weight:700;cursor:pointer}
.ai-ok{background:var(--primary);color:#fff}.ai-no{background:rgba(120,120,160,.2);color:var(--text)}
.ai-action-btns button:disabled{opacity:.5}.ai-action-result{margin-top:8px;font-size:13px}
.ai-form .ai-tool{width:40px;background:rgba(120,120,160,.18);color:var(--text)}
.ai-form .ai-tool.listening{background:#d92d3a;color:#fff;animation:pin-shake .6s infinite}
.ai-form .ai-tool.hidden{display:none}

/* ===== Smena hisoboti ===== */
.shift-report{max-height:60vh;overflow:auto;font-size:14px;line-height:1.5}
.sr-head{font-weight:700;margin-bottom:8px}.sr-head small{font-weight:400;color:var(--text-muted)}
.sr-row{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.sr-sub{margin-top:10px;padding-top:6px;border-top:1px dashed rgba(120,120,160,.4);font-weight:700;color:var(--text-muted)}
.sr-strong{font-weight:800;border-top:1px solid rgba(120,120,160,.25);margin-top:4px;padding-top:4px}
.sr-bad{color:#d92d3a}