/* ============================================================
   Yaqiin ERP — «Бошқарув панели» дизайни (Йўналиш Б), v5.21
   Django admin устига қўйиладиган ягона услублар файли.
   ============================================================ */

:root, html[data-theme="light"], html[data-theme="dark"] {
  /* ── брендинг ── */
  --yq-ind:      #382F7E;
  --yq-ind-d:    #2A2360;
  --yq-ind-5:    #F7F6FB;
  --yq-ind-10:   #EFEDF7;
  --yq-gold:     #DAB86E;
  --yq-gold-d:   #B58F3C;
  --yq-gold-10:  #FBF4E4;

  --yq-ink:      #14131A;
  --yq-mut:      #6B6875;
  --yq-fai:      #9A97A3;
  --yq-line:     #E7E5E0;
  --yq-line2:    #F1EFEA;
  --yq-surf:     #FCFCFB;
  --yq-card:     #FFFFFF;

  /* ── диаграмма ранглари (дальтонизмга текширилган) ── */
  --yq-s1: #2a78d6;  --yq-s2: #eb6834;  --yq-s3: #1baf7a;
  --yq-s4: #eda100;  --yq-s5: #e87ba4;

  --yq-good: #0ca30c; --yq-warn: #fab219; --yq-ser: #ec835a; --yq-crit: #d03b3b;

  --yq-rail: 88px;
  --yq-sub:  212px;

  /* ── Django admin ўзгарувчиларини алмаштирамиз ── */
  --primary: #382F7E;
  --secondary: #382F7E;
  --accent: #DAB86E;
  --primary-fg: #ffffff;

  --body-fg: #14131A;
  --body-bg: #FCFCFB;
  --body-quiet-color: #6B6875;
  --body-loud-color: #14131A;

  --header-color: #14131A;
  --header-branding-color: #DAB86E;
  --header-bg: #ffffff;
  --header-link-color: #14131A;

  --breadcrumbs-fg: #6B6875;
  --breadcrumbs-link-fg: #382F7E;
  --breadcrumbs-bg: #ffffff;

  --link-fg: #382F7E;
  --link-hover-color: #2A2360;
  --link-selected-fg: #2A2360;

  --hairline-color: #F1EFEA;
  --border-color: #E7E5E0;

  --error-fg: #d03b3b;
  --message-success-bg: #E3F6EE;
  --message-warning-bg: #FDF3DC;
  --message-error-bg: #FBE9E9;

  --darkened-bg: #F7F6FB;
  --selected-bg: #EFEDF7;
  --selected-row: #FBF4E4;

  --button-fg: #ffffff;
  --button-bg: #382F7E;
  --button-hover-bg: #2A2360;
  --default-button-bg: #382F7E;
  --default-button-hover-bg: #2A2360;
  --close-button-bg: #6B6875;
  --close-button-hover-bg: #4a4854;
  --delete-button-bg: #d03b3b;
  --delete-button-hover-bg: #b02f2f;
  --object-tools-bg: #6B6875;
  --object-tools-hover-bg: #382F7E;

  --font-family-primary: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                         'Helvetica Neue', Arial, sans-serif;
  --font-family-monospace: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                           Consolas, 'Liberation Mono', monospace;
}

html { color-scheme: light; }
body {
  background: var(--yq-surf);
  color: var(--yq-ink);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Django нинг ўз тема-тугмаси ва «сайтни кўриш» ҳаволаси керак эмас */
.theme-toggle { display: none !important; }

/* ══════════════════════════════════════ 1. Чап рейка ══════════════════════════════════════ */
#nav-sidebar, .toggle-nav-sidebar { display: none !important; }

.yq-rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--yq-rail);
  background: linear-gradient(180deg, #382F7E 0%, #2A2360 100%);
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 8px 12px; gap: 4px; z-index: 60; overflow-y: auto;
  scrollbar-width: none;
}
.yq-rail::-webkit-scrollbar { display: none; }
.yq-rail__logo { width: 40px; height: 40px; border-radius: 99px; margin-bottom: 14px; flex: none; }
.yq-rail a {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 100%; padding: 9px 2px; border-radius: 11px; flex: none;
  color: rgba(255,255,255,.62); text-decoration: none; text-align: center;
}
.yq-rail a svg { width: 19px; height: 19px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.yq-rail a span { font-size: 9.5px; font-weight: 600; line-height: 1.15; }
.yq-rail a:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.yq-rail a.is-active { background: rgba(255,255,255,.13); color: #fff; }
.yq-rail__gap { flex: 1 1 auto; min-height: 8px; }

/* ══════════════════════════════════════ 2. Модул менюси ══════════════════════════════════ */
.yq-sub {
  position: fixed; left: var(--yq-rail); top: 0; bottom: 0; width: var(--yq-sub);
  background: #fff; border-right: 1px solid var(--yq-line);
  padding: 18px 12px; z-index: 55; overflow-y: auto;
}
.yq-sub__title {
  padding: 0 12px; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--yq-mut);
  text-transform: uppercase; letter-spacing: .06em;
}
.yq-sub a {
  display: flex; align-items: center; min-height: 34px; padding: 6px 12px;
  border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--yq-mut);
  text-decoration: none; line-height: 1.25;
}
.yq-sub a:hover { background: var(--yq-line2); color: var(--yq-ink); }
.yq-sub a.is-active { background: var(--yq-ind-5); color: var(--yq-ind); font-weight: 650; }
.yq-sub hr { border: 0; border-top: 1px solid var(--yq-line); margin: 14px 8px; }
.yq-sub__note { padding: 0 12px; }
.yq-sub__note .yq-dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px;
  margin-right: 7px; vertical-align: 1px; }
.yq-sub__note div { font-size: 12.5px; color: var(--yq-mut); margin-bottom: 4px; }
.yq-sub__note small { font-size: 11.5px; color: var(--yq-fai); }

/* ══════════════════════════════════════ 3. Юқори панель ══════════════════════════════════ */
#container {
  box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;
  padding-left: calc(var(--yq-rail) + var(--yq-sub));
}
/* #container — колонкали flex; шунинг учун баландлиги қатъий блоклар сиқилмасин */
#header, div.breadcrumbs, #footer { flex: none; }
#content-main { float: none; width: 100%; }
#content { box-sizing: border-box; }

#header, .yq-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 60px; min-height: 60px; padding: 0 24px;
  background: #fff; border-bottom: 1px solid var(--yq-line);
  color: var(--yq-ink);
}
#branding, .yq-top__left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.yq-top__h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yq-top__sub { font-size: 12px; color: var(--yq-fai); white-space: nowrap; }
.yq-top__right { display: flex; align-items: center; gap: 14px; }
.yq-top a { color: var(--yq-mut); text-decoration: none; font-size: 13px; font-weight: 550; }
.yq-top a:hover { color: var(--yq-ind); }
.yq-user {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 99px;
  background: var(--yq-ind); color: #fff; font-size: 13px; font-weight: 700;
}
#logout-form { display: inline; margin: 0; }
#logout-form button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--yq-mut); font-size: 13px; font-weight: 550; font-family: inherit;
}
#logout-form button:hover { color: var(--yq-crit); }
#header .yq-top__right a, #header .yq-top__right a:link, #header .yq-top__right a:visited {
  color: var(--yq-mut); font-size: 13px; font-weight: 550; text-decoration: none;
}
#header .yq-top__right a:hover { color: var(--yq-ind); }
#header .yq-top__h1, #header h1 { color: var(--yq-ink); font-size: 19px; font-weight: 700; margin: 0; }

/* Админ ўнг устуни («сўнгги амаллар») ўрнига иш столидаги жадваллар ишлатилади */
#content.colMS { margin-right: 0; }
.dashboard #content { width: auto; }   /* админ бош саҳифаси 600px га сиқилмасин */
#content-related { display: none !important; }
#content > h1:first-child { display: none; }
#user-tools { display: flex; align-items: center; gap: 12px; font-size: 13px; text-transform: none;
  letter-spacing: 0; }

/* нон ушоқлари */
div.breadcrumbs {
  background: #fff; border-bottom: 1px solid var(--yq-line);
  padding: 9px 24px; font-size: 12.5px; color: var(--yq-fai);
}
div.breadcrumbs a { color: var(--yq-mut); }
div.breadcrumbs a:hover { color: var(--yq-ind); }

/* ══════════════════════════════════════ 4. Контент ═══════════════════════════════════════ */
.main { background: var(--yq-surf); }
#content { padding: 20px 24px 32px; }
#content-main { max-width: 100%; }
#content > h1, #content h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 14px; color: var(--yq-ink); }

.module { background: var(--yq-card); border: 1px solid var(--yq-line);
  border-radius: 14px; overflow: hidden; }
.module h2, .module caption, .inline-group h2 {
  background: var(--yq-ind); color: #fff; font-size: 12.5px; font-weight: 650;
  letter-spacing: .03em; padding: 10px 16px;
}
#changelist .module, .module + .module { margin-top: 14px; }

/* жадваллар */
#result_list, .module table { border-collapse: collapse; }
#result_list thead th {
  background: #fff; border-bottom: 1px solid var(--yq-line);
  font-size: 11px; font-weight: 600; color: var(--yq-mut);
  text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px;
}
#result_list tbody td, #result_list tbody th {
  border-bottom: 1px solid var(--yq-line2); padding: 10px 12px; font-size: 13px;
}
#result_list tbody tr:hover > * { background: var(--yq-ind-5); }
#changelist-filter { background: #fff; border-left: 1px solid var(--yq-line); }
#changelist-filter h2 { background: #fff; color: var(--yq-mut); border-bottom: 1px solid var(--yq-line); }

/* тугмалар */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 10px; font-weight: 600; font-size: 13.5px; padding: 9px 16px;
  border: 0; letter-spacing: -0.01em;
}
.submit-row { background: #fff; border: 1px solid var(--yq-line); border-radius: 14px; padding: 14px 16px; }
.object-tools a, .object-tools a:link, .object-tools a:visited {
  border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0;
  text-transform: none; padding: 7px 14px; }
#changelist-filter h2, #changelist-filter h3 { text-transform: none; letter-spacing: 0; }

/* форма майдонлари */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number],
input[type=tel], textarea, select, .vTextField {
  border: 1px solid var(--yq-line); border-radius: 9px; padding: 7px 10px;
  font-size: 13.5px; background: #fff;
  /* Windows Chrome'да кирилл ҳарфларнинг пастки думи кесилиб қоларди
     («Яндекс такси» → «Яндекс так»). line-height ва баландлик очиқ ёзилди. */
  line-height: 1.45; min-height: 36px; height: auto;
}
select {
  /* select'да text-overflow ишламайди — узун ном кесилса «…» кўринсин */
  text-overflow: ellipsis; padding-right: 26px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--yq-ind-10); border-color: var(--yq-ind); }
fieldset.module { border: 1px solid var(--yq-line); }

/* Ичма-ич жадваллар (буюртма сатрлари, лид позициялари) кенг бўлса —
   ўнг томони кесилмасин, ичида сурилсин */
.inline-group, .inline-related, .inline-group .tabular { overflow-x: auto; }
.inline-group .tabular table { min-width: 100%; }
/* Ичма-ич жадвалдаги танлаш майдонлари экранга сиғсин */
.inline-group select, .inline-group input[type=text] { max-width: 148px; }
.inline-group .related-widget-wrapper { display: inline-flex; align-items: center; }
/* Ичма-ич жадвалда «таҳрирлаш/кўриш» иконкалари ўрин эгаллайди — «қўшиш» етарли */
.inline-group .change-related, .inline-group .view-related,
.inline-group .delete-related { display: none !important; }
.inline-group td, .inline-group th { padding: 6px 8px; }
#changelist-form, .results { overflow-x: auto; }

.messagelist li { border-radius: 10px; border: 1px solid var(--yq-line); font-size: 13px; }

/* ══════════════════════════════════════ 5. Дашборд элементлари ═══════════════════════════ */
.yq { --gap: 16px; }
.yq * { box-sizing: border-box; }
.yq-page { padding: 20px 24px 28px; }
.yq-row { display: flex; gap: var(--gap); align-items: stretch; flex-wrap: wrap; }
.yq-row > .yq-grow { flex: 1 1 320px; min-width: 0; }
.yq-card { background: var(--yq-card); border: 1px solid var(--yq-line);
  border-radius: 14px; padding: 18px 20px; }
.yq-h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.015em; margin: 0; }
.yq-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.yq-lbl { font-size: 11.5px; font-weight: 600; color: var(--yq-mut);
  text-transform: uppercase; letter-spacing: .06em; }
.yq-fai { font-size: 11.5px; color: var(--yq-fai); }
.yq-mut { font-size: 12.5px; color: var(--yq-mut); }
.yq-num { font-family: var(--font-family-monospace); font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em; }

.yq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 16px; }
.yq-kpi { position: relative; overflow: hidden; min-width: 0;
  background: var(--yq-card); border: 1px solid var(--yq-line);
  border-radius: 14px; padding: 14px 16px; }
.yq-kpi__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--yq-ind); }
.yq-kpi__val { font-family: var(--font-family-monospace); font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em; font-size: 21px; font-weight: 700; margin: 7px 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yq-kpi__sub { display: flex; align-items: center; gap: 8px; }
.yq-up { color: var(--yq-good); font-weight: 650; font-size: 12px; }
.yq-down { color: var(--yq-crit); font-weight: 650; font-size: 12px; }

.yq-pill { display: inline-flex; white-space: nowrap; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; }
.yq-pill--ok { background: #E3F6EE; color: var(--yq-good); }
.yq-pill--warn { background: #FDF3DC; color: #96690b; }
.yq-pill--crit { background: #FBE9E9; color: var(--yq-crit); }
.yq-pill--info { background: #E7F0FB; color: var(--yq-s1); }
.yq-pill--mut { background: var(--yq-line2); color: var(--yq-mut); }

.yq-bar { height: 7px; background: var(--yq-line2); border-radius: 99px; overflow: hidden; }
.yq-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--yq-ind); }

.yq-t { width: 100%; border-collapse: collapse; }
.yq-t th { font-size: 11px; font-weight: 600; color: var(--yq-mut); text-transform: uppercase;
  letter-spacing: .05em; text-align: left; padding: 0 12px 8px; border-bottom: 1px solid var(--yq-line); }
.yq-t td { font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--yq-line2);
  vertical-align: middle; }
.yq-t td.nw, .yq-t td.r { white-space: nowrap; }
.yq-t tr:last-child td { border-bottom: 0; }
.yq-t .r { text-align: right; font-family: var(--font-family-monospace);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.yq-t .b { font-weight: 650; }

.yq-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.yq-legend span { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--yq-mut); font-weight: 550; }
.yq-legend i { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }

.yq-alert { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; margin-top: 12px; }
.yq-alert--crit { background: #FBE9E9; color: var(--yq-crit); }
.yq-alert--warn { background: #FDF3DC; color: #96690b; }

.yq-list > div { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--yq-line2); }
.yq-list > div:last-child { border-bottom: 0; }
.yq-list .yq-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; margin-top: 5px; }

.yq-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 13px; margin-bottom: 20px; }
.yq-quick a { display: flex; flex-direction: column; justify-content: space-between;
  min-height: 112px; padding: 15px 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--yq-line); text-decoration: none; color: var(--yq-ink); }
.yq-quick a:hover { border-color: var(--yq-ind); box-shadow: 0 2px 10px rgba(56,47,126,.10); }
.yq-quick .ic { display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 10px; }
.yq-quick .ic svg { width: 19px; height: 19px; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.yq-quick .tt { font-size: 14.5px; font-weight: 650; }
.yq-quick .dd { font-size: 11.5px; color: var(--yq-fai); margin-top: 3px; line-height: 1.35; }

.yq-sec { font-size: 15px; font-weight: 700; color: var(--yq-ink);
  margin: 4px 0 10px; letter-spacing: -0.015em; }

svg.yq-chart { display: block; max-width: 100%; }

/* ══════════════════════════════════════ 6. Кичик экранлар ════════════════════════════════ */
@media (max-width: 1100px) {
  :root { --yq-sub: 178px; }
}
@media (max-width: 900px) {
  #container { padding-left: 0; }
  .yq-rail {
    position: static; width: 100%; height: auto; flex-direction: row;
    padding: 8px 10px; gap: 2px; overflow-x: auto;
  }
  .yq-rail__logo { width: 30px; height: 30px; margin: 0 10px 0 0; }
  .yq-rail a { width: auto; min-width: 62px; padding: 6px 8px; }
  .yq-rail__gap { display: none; }
  .yq-sub {
    position: static; width: 100%; height: auto; border-right: 0;
    border-bottom: 1px solid var(--yq-line); padding: 10px;
    display: flex; gap: 4px; overflow-x: auto; align-items: center;
  }
  .yq-sub__title, .yq-sub hr, .yq-sub__note { display: none; }
  .yq-sub a { white-space: nowrap; }
  #header, .yq-top { height: auto; padding: 12px 16px; flex-wrap: wrap; }
  #content, .yq-page { padding: 14px 16px 24px; overflow-x: hidden; }
  .yq-card, .module, #changelist { overflow-x: auto; }
  .yq-row > * { flex-basis: 100% !important; }
}

/* ============ буюртма формаси (v5.29) ============ */
/* reports/base.html да «.rpt form{display:flex}» бор — форма қатор бўлиб
   ёйилиб кетмаслиги учун тег+класс билан бекор қиламиз */
form.of, .rpt form.of { display: block; }
.rpt form.of .of-go { background: #197a4d; color: #fff; border: 0;
  border-radius: 10px; padding: 11px 22px; font-size: 14px; font-weight: 700; }
.rpt form.of .of-add { background: #fff; color: #312e81; font-weight: 600;
  border: 1px dashed var(--yq-line); border-radius: 10px; padding: 7px 14px; font-size: 13px; }
.rpt form.of .of-chip { background: #fff; color: #2d3748; font-weight: 500;
  border: 1px solid var(--yq-line); border-radius: 999px; padding: 6px 12px; font-size: 12px; }
.rpt form.of .of-x { background: none; color: #c53030; border: 0; padding: 0;
  font-size: 20px; line-height: 1; }
.of-sec { border: 1px solid var(--yq-line); border-radius: 12px; padding: 12px 14px;
  margin: 0 0 12px; background: #fff; }
.of-h { font-weight: 700; font-size: 13.5px; color: #2d3748; margin: 0 0 8px; }
.of-sub { font-weight: 400; color: #8a97a5; font-size: 12px; }
.of-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.of-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #5b6b7c;
  flex: 1 1 180px; min-width: 0; }
.of-f.of-w2 { flex: 2 1 260px; }
.of-f.of-sm { flex: 0 0 128px; }
.of-f input, .of-f select { width: 100%; box-sizing: border-box; }
.of-radio label { font-size: 13px; display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; }
.of-badge { display: inline-block; background: #eef2ff; color: #312e81; border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 600; }
.of-hint { font-size: 11.5px; color: #8a97a5; margin-top: 6px; }
.of-err { font-size: 12px; color: #c53030; margin-top: 6px; display: none; }

.of-item { display: grid; gap: 8px; align-items: center; margin-bottom: 8px;
  grid-template-columns: minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.2fr) 68px 92px 100px 28px; }
.of-item select, .of-item input { width: 100%; box-sizing: border-box; margin: 0; }
.of-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #8a97a5; margin-bottom: 4px; }
.of-head span:nth-child(5), .of-head span:nth-child(6) { text-align: right; }
.of-narx, .of-sm2 { font-size: 13px; text-align: right; color: #2d3748; white-space: nowrap; }
.of-sm2 { font-weight: 700; }
.of-x { border: none; background: none; color: #c53030; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0; }
.of-add { border: 1px dashed var(--yq-line); background: #fff; border-radius: 10px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; color: #312e81; font-weight: 600; }

.of-sum { border-collapse: collapse; font-size: 13.5px; margin-top: 10px; min-width: 250px; }
.of-sum td { padding: 4px 0; }
.of-sum td:last-child { text-align: right; padding-left: 26px; white-space: nowrap; }
.of-sum .of-disc-row { display: none; }
.of-sum .of-pay td { border-top: 1px solid var(--yq-line); padding-top: 7px; font-size: 15px; }
.of-quick { display: flex; gap: 6px; align-items: flex-end; padding-bottom: 1px; }
.of-chip { border: 1px solid var(--yq-line); background: #fff; border-radius: 999px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; }
.of-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.of-note { flex: 1 1 220px; }
.of-go { background: #197a4d; color: #fff; border: none; border-radius: 10px;
  padding: 11px 22px; font-size: 14px; font-weight: 700; cursor: pointer; }
.of-go:disabled { background: #9ab7a8; cursor: default; }

@media (max-width: 900px) {
  .of-item { grid-template-columns: 1fr 1fr; }
  .of-item .of-narx, .of-item .of-sm2 { text-align: left; }
}

/* мижозлар базасидан танлаш (v5.30) */
.of-find { border: 1px solid var(--yq-line); background: #fff; border-radius: 10px;
  padding: 8px 14px; font-size: 13px; cursor: pointer; color: #312e81; font-weight: 600; }
.rpt form.of .of-find { background: #fff; color: #312e81; border: 1px solid var(--yq-line);
  border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; }
.of-search { margin-top: 10px; border: 1px solid var(--yq-line); border-radius: 12px;
  padding: 10px 12px; background: #fbfcfe; }
.of-search input { width: 100%; box-sizing: border-box; }
.of-res { margin-top: 8px; max-height: 260px; overflow-y: auto; }
.of-res button { display: block; width: 100%; text-align: left; border: 0;
  border-bottom: 1px solid var(--yq-line2); background: none; padding: 9px 6px;
  font-size: 13px; cursor: pointer; }
.rpt form.of .of-res button { background: none; color: inherit; border-radius: 0;
  border: 0; border-bottom: 1px solid var(--yq-line2); padding: 9px 6px; font-weight: 400; }
.of-res button:hover { background: #eef2ff; }
.of-res b { color: #2d3748; }
.of-res .sub { color: #8a97a5; font-size: 11.5px; display: block; margin-top: 2px; }
.of-res .empty { color: #8a97a5; font-size: 12.5px; padding: 8px 6px; }

/* Акция бонуси — совға, балл, сотувчига мотивация (v5.37) */
.of-bonus { margin-top: 8px; background: #e9f7f1; border: 1px solid #b7e3d0;
  color: #14795a; border-radius: 10px; padding: 9px 13px; font-size: 13px;
  font-weight: 600; }

/* Технологик карта формаси — хомашё нархи ва жами таннарх (v5.39) */
.yq-bom-narx { font-size: 12px; color: #5a6472; margin-top: 4px; line-height: 1.45; }
#yq-bom-jami { margin: 10px 14px 4px; }
.yq-bom-jami__ich { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  background: #f3f6fb; border: 1px solid #dbe2ee; border-radius: 11px;
  padding: 11px 15px; font-size: 13px; }
.yq-bom-jami__katta { margin-left: auto; font-size: 14px; color: #2a2f45; }
.yq-bom-ogoh { background: #fffaf0; border: 1px solid #f6c177; border-radius: 10px;
  padding: 10px 14px; margin-top: 8px; font-size: 12.5px; line-height: 1.55; }

/* Ички менюдаги гуруҳ сарлавҳаси (v5.40) */
.yq-sub__group { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
  padding: 14px 18px 5px; pointer-events: none; }
.yq-sub__group:first-child { padding-top: 6px; }

/* ══════════ YQ-B:login · менюсиз саҳифалар (логин, чиқиш) ══════════════
   `#container` да чап бўшлиқ рейка ва ички меню учун қатъий ҳисобланган
   (88px + 212px). Логин саҳифасида рейка чизилмайди, шунинг учун ўша
   бўшлиқ ҳам керак эмас — акс ҳолда форма ўнгга сурилиб, тор устунга
   сиқилиб қоларди. */
body.yq-menyusiz #container { padding-left: 0; }
body.yq-menyusiz .yq-rail,
body.yq-menyusiz .yq-sub { display: none; }

/* ── v5.60 · буюртма формасидаги лид танлагичи ─────────────────────────── */
.of-req { font-size: 11px; font-weight: 600; color: #c53030; background: #fff5f5;
          border: 1px solid #feb2b2; border-radius: 6px; padding: 1px 6px;
          margin-left: 6px; vertical-align: middle; }
.of-sec.of-lead { border-color: #c7d2fe; background: #f8faff; }
.rpt form.of .of-sec.of-lead { background: #f8faff; }
.of-lead-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                border: 1px solid #9ae6b4; background: #e6f6ec; color: #22543d;
                border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.of-lead-chip .of-chip { margin-left: auto; }

/* ── v5.61 · «Сўнгги суҳбатлар» чиплари ────────────────────────────────────
   Сотувчи телефондаги Instagram иловасида гаплашади, кейин ERP да сотувни
   киритади. Лидни қидириш қийин (исм лотинча, тахаллус) — шунинг учун
   охирги суҳбатлар шу ерда битта босишлик чип бўлиб туради. */
.of-recent { margin-bottom: 10px; }
.of-recent__h { font-size: 12px; font-weight: 600; color: #4a5568; margin-bottom: 6px; }
.of-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.of-chips button { display: inline-flex; flex-direction: column; align-items: flex-start;
                   gap: 1px; text-align: left; cursor: pointer;
                   border: 1px solid #c7d2fe; background: #fff; color: #2a4365;
                   border-radius: 999px; padding: 6px 13px; font-size: 13px;
                   line-height: 1.25; font-family: inherit; }
.of-chips button:hover { background: #ebf1ff; border-color: #7f9cf5; }
.of-chips button .sub { font-size: 11px; color: #718096; font-weight: 400; }