/* Guzal Hayot — Kassa. Excel varaqlari (setka). iOS 27 dizayni (Variant 6).
   Ranglar faqat docs/dizayn/DIZAYN.md dagi tokenlardan. Setka — "chegara yo'q" qoidasining
   yagona istisnosi: ingichka --separator chiziqlari. Setka ichida backdrop-filter yo'q. */

/* Sahifa kengligi: setka to'liq kenglikda */
.sahifa--varaq { max-width: none; }

/* ---------- Kitoblar ro'yxati ---------- */
.vq-amal { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.vq-natija .vq-varaq-nomlar { margin: 0 0 12px; font-size: 12.5px; }
.vq-natija h2 { margin-top: 14px; }
.vq-formula-el { font-family: var(--font-mono); font-size: 12px; max-width: 260px !important; }
.vq-imp-holat { margin-top: 4px; }

/* ---------- Kitob ko'rinishi ---------- */
.vq-korinish { display: flex; flex-direction: column; height: calc(100vh - var(--panel-h) - 36px); height: calc(100dvh - var(--panel-h) - 36px); min-height: 420px; }
/* Karkas: .kontent tepadan 8px, pastdan 56px padding beradi — kitob ko'rinishida pastki bo'shliqni kamaytiramiz, sahifa scroll bo'lmasin */
.kontent:has(.vq-korinish) { padding-bottom: 20px; }   /* app.css .kontent ga bog'liq */
.vq-bosh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.vq-bosh h1 { font-size: 18px; margin: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vq-orqaga { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.vq-orqaga:hover { background: var(--accent); color: var(--on-accent); }
.vq-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vq-setka-quti { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; background: var(--surface1-solid); box-shadow: var(--card-shadow); position: relative; }
.vq-setka-quti.vq-band::after { content: ''; position: absolute; inset: 0; background: var(--surface1-solid); opacity: .55; cursor: progress; z-index: 20; }

/* Formula qatori */
.vq-fq { display: flex; align-items: center; gap: 8px; padding: 8px 10px; box-shadow: inset 0 -.5px var(--separator); }
.vq-fq input.vq-nom, .vq-fq input.vq-bar { height: 36px; max-width: none; margin: 0; border: 0; border-radius: var(--r-input); background: var(--surface2); color: var(--text1); padding: 0 12px; box-shadow: none; outline: none; }
.vq-fq input.vq-nom { width: 96px; flex: none; font-family: var(--font); font-weight: 600; text-align: center; }
.vq-fq input.vq-bar { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 13px; }
.vq-fq input.vq-bar::placeholder { color: var(--text3); }
.vq-fx { flex: none; color: var(--accent); font-family: var(--font); font-style: italic; font-weight: 700; }
.vq-fq input.vq-nom:focus, .vq-fq input.vq-bar:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }

/* Setka */
.vq-skroll { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; background: var(--surface1-solid); outline: none; overscroll-behavior: contain; }
.vq-skroll:focus-visible { outline: none; }
.vq { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 12px/19px Arial, "Helvetica Neue", Helvetica, sans-serif; font-variant-numeric: tabular-nums; color: var(--text1); }
.vq th, .vq td { padding: 0 2px; margin: 0; box-sizing: border-box; border-right: 1px solid var(--separator); border-bottom: 1px solid var(--separator); overflow: hidden; white-space: nowrap; }
.vq td { background: var(--surface1-solid); position: relative; text-overflow: ellipsis; vertical-align: bottom; cursor: cell; color: var(--vq-rang, var(--text1)); }
.vq .vq-bosh-td { padding: 0; border: 0; background: transparent; }
.vq .vq-bosh-qator td { background: transparent; border: 0; }
/* Sarlavhalar: sticky bo'lgani uchun fon to'liq shaffof emas — solid ustiga --surface2 */
.vq th { background-color: var(--surface1-solid); background-image: linear-gradient(var(--surface2), var(--surface2)); color: var(--text2); font-weight: 600; font-size: 12px; text-align: center; user-select: none; cursor: default; }
.vq thead th { position: sticky; top: 0; z-index: 6; height: 22px; }
.vq thead th.vq-kunj { left: 0; z-index: 9; }
.vq tbody th.vq-rn { position: sticky; left: 0; z-index: 5; padding: 0 2px; font-weight: 500; }
.vq th.vq-ch.vq-fz-u { z-index: 8; }
.vq th.vq-bosh-faol { background-image: linear-gradient(var(--accent-tint), var(--accent-tint)); color: var(--accent); }
.vq th.vq-bosh-faol.vq-rn { box-shadow: inset -2px 0 0 var(--accent); }
.vq th.vq-bosh-faol.vq-ch { box-shadow: inset 0 -2px 0 var(--accent); }

/* Matn rangi: Excel'dagi shrift rangi inline --vq-rang orqali keladi.
   Fon berilgan katakda (.vq-fonli) Excel rangi qoladi (rang yo'q bo'lsa Excel standarti — qora);
   fon berilmagan katakda tun rejimida faqat juda to'q rang (.vq-toq-rang, varaq.js toqRangmi) --text1 ga almashadi;
   ma'noli ranglar (qizil, ko'k...) saqlanadi. Kun rejimi o'zgarmaydi. */
.vq td.vq-fonli { color: var(--vq-rang, var(--vq-excel-matn)); }
html[data-theme="dark"] .vq td.vq-toq-rang:not(.vq-fonli) { color: var(--text1); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vq td.vq-toq-rang:not(.vq-fonli) { color: var(--text1); }
}

/* Muzlatilgan (freeze) kataklar */
.vq td.vq-fz-u, .vq td.vq-fz-q { position: sticky; z-index: 3; }
.vq td.vq-fz-u.vq-fz-q { z-index: 4; }
.vq tbody th.vq-rn.vq-fz-q { z-index: 7; }
.vq td.vq-fz-oxir-u, .vq th.vq-ch.vq-fz-oxir-u { border-right: 2px solid var(--text3); }
.vq td.vq-fz-oxir-q, .vq th.vq-rn.vq-fz-oxir-q { border-bottom: 2px solid var(--text3); }

/* Tanlov */
.vq td.vq-tanlangan { background-image: linear-gradient(var(--accent-tint), var(--accent-tint)), linear-gradient(var(--accent-tint), var(--accent-tint)); }
.vq td.vq-faol { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }
.vq td.vq-fz-u.vq-faol, .vq td.vq-fz-q.vq-faol { z-index: 4; }
.vq td.vq-ref { outline: 2px dashed var(--warning); outline-offset: -2px; background-image: linear-gradient(var(--warning-bg), var(--warning-bg)); }

/* Holatlar: xato, ogohlantirish, kutish */
.vq td.vq-xato { color: var(--expense) !important; font-weight: 600; }
.vq td.vq-ogoh::after { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 9px solid var(--warning); border-left: 9px solid transparent; pointer-events: none; }
.vq td.vq-kutish { opacity: .6; }

/* Tahrir */
.vq td.vq-tahrirda { overflow: visible; z-index: 10; text-overflow: clip; }
.vq td.vq-tahrirda.vq-fz-u, .vq td.vq-tahrirda.vq-fz-q { z-index: 11; }
.vq-skroll input.vq-kirit { max-width: none; position: absolute; left: 0; top: 0; height: 100%; min-width: 100%; margin: 0; padding: 0 4px; border: 0; border-radius: 0; background: var(--surface1-solid); color: var(--text1); font: inherit; text-align: left; outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: var(--card-shadow); z-index: 12; }
.vq-skroll input.vq-kirit:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Holat paneli */
.vq-stat { display: flex; align-items: center; gap: 14px; padding: 4px 12px; box-shadow: inset 0 .5px var(--separator); font-size: 12px; min-height: 30px; color: var(--text2); }
.vq-st-matn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vq-yuk { display: inline-flex; align-items: center; gap: 6px; }
.vq-yuk .aylana { width: 12px; height: 12px; border-width: 2px; }
.vq-ogoh-tugma { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; background: var(--warning-bg); border: 0; color: var(--warning); border-radius: var(--r-pill); height: 22px; padding: 0 12px; cursor: pointer; white-space: nowrap; }
.vq-ogoh-tugma:hover { box-shadow: inset 0 0 0 999px var(--surface2); }
.vq-ogoh-tugma:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }
.vq-ogoh-royxat { margin: 0; padding-left: 0; list-style: none; }
.vq-ogoh-royxat li { padding: 6px 0; box-shadow: inset 0 -.5px var(--separator); }
.vq-ogoh-man { font: inherit; font-weight: 700; border: 0; background: var(--accent-tint); border-radius: var(--r-pill); padding: 1px 10px; cursor: pointer; color: var(--accent); }
.vq-ogoh-man:hover { background: var(--accent); color: var(--on-accent); }

/* Pastdagi varaq tablari — segment ko'rinishida */
.vq-tablar { flex: none; align-self: flex-start; max-width: 100%; display: flex; gap: 2px; overflow-x: auto; margin-top: 10px; padding: 3px; background: var(--surface2); border-radius: var(--r-pill); }
.vq-tab { font: inherit; font-size: 13px; height: 30px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text2); cursor: pointer; white-space: nowrap; transition: background 200ms var(--spring), color 200ms var(--spring); }
.vq-tab:hover { color: var(--text1); }
.vq-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }
.vq-tab.faol { background: var(--surface1-solid); color: var(--text1); font-weight: 700; box-shadow: var(--card-shadow); }

/* Kontekst menyu */
.vq-menyu { position: fixed; z-index: 95; min-width: 230px; background: var(--surface1-solid); border-radius: 14px; box-shadow: var(--glass-edge); padding: 6px; display: flex; flex-direction: column; color: var(--text1); }
.vq-menyu-el { font: inherit; text-align: left; border: 0; background: none; padding: 7px 12px; border-radius: 8px; cursor: pointer; color: var(--text1); }
.vq-menyu-el:hover, .vq-menyu-el:focus { background: var(--accent); color: var(--on-accent); outline: none; }
.vq-menyu-el.xavfli { color: var(--expense); }
.vq-menyu-el.xavfli:hover, .vq-menyu-el.xavfli:focus { background: var(--expense); color: var(--on-accent); }
.vq-menyu-chiziq { height: 1px; background: var(--separator); margin: 4px 6px; }

@media (max-width: 899px) {
  /* Telefon: tepada sticky pill-qator (.menyu-joy, balandligi --menyu-qator = safe-top + 60px, app.css), pastda tab bar yo'q.
     .kontent padding: tepa 10px, past 12px + safe-bottom; panel-ong (3 ikonka) absolute, sarlavha qatori ustida. */
  .kontent:has(.vq-korinish) { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }   /* app.css .kontent ga bog'liq */
  .vq-korinish { height: calc(100vh - var(--menyu-qator) - 26px); height: calc(100dvh - var(--menyu-qator) - env(safe-area-inset-bottom, 0px) - 26px); }
  .vq-bosh { padding-right: 144px; }
  .vq-fq input.vq-nom { width: 70px; }
}
@media (prefers-reduced-motion: reduce) { .vq-tab { transition: none; } }
@media print { .vq-fq, .vq-tablar, .vq-stat { display: none; } .vq-korinish { height: auto; } .vq-skroll { overflow: visible; } }

/* Ogohlantirish filtri */
.vq-ogoh-filtr { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; }
.vq-ogoh-tur { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }