:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --line: #d9e0e7;
  --text: #17212b;
  --muted: #677381;
  --accent: #176b5b;
  --accent-dark: #0f5447;
  --danger: #b42318;
  --warning: #9a5b13;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: stretch;
  min-height: 72px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(90deg, #062c35, #073b44);
  color: #d9e6ea;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.12);
}

.top-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 190px;
  padding: 0 22px;
  color: #ffffff;
}

.top-brand .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #0ea58c;
  color: #ffffff;
  font-weight: 700;
}

.top-brand strong {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
}

.top-nav {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: visible;
}


.top-nav-group {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.top-nav-group > button {
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: #d6e2e8;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 22px;
  margin: 8px 2px;
  white-space: nowrap;
  cursor: pointer;
}

/* Bo'limlar soni yettitaga yetgach menyu qidiruv qatorining ustiga chiqib
   ketdi. Avval bo'shliq, keyin harf kichrayadi. Eng torida esa menyu ikkinchi
   qatorga o'tadi -- surilib ketsa ochiladigan ro'yxatlar kesilib qolardi. */
@media (max-width: 1620px) {
  .top-nav-group > button {
    padding: 14px 10px;
    font-size: 14px;
  }
}

@media (max-width: 1400px) {
  .top-nav {
    flex-wrap: wrap;
  }

  .top-nav-group > button {
    padding: 10px 10px;
    font-size: 13px;
    margin: 4px 1px;
  }
}

.top-nav-group > button:hover,
.top-nav-group.active > button {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: 600;
}

.top-nav-menu {
  position: absolute;
  top: 72px;
  left: 0;
  z-index: 30;
  display: none;
  min-width: 230px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 0;
  background: #0b2834;
  box-shadow: 0 16px 30px rgba(16, 24, 40, 0.25);
  padding: 12px;
}

.top-nav-menu-wide {
  min-width: 420px;
  columns: 2;
}

.top-nav-group:hover .top-nav-menu {
  display: grid;
  gap: 4px;
}

body.top-nav-closed .top-nav-menu {
  display: none !important;
}

.top-nav-menu a {
  display: block;
  break-inside: avoid;
  border-radius: 6px;
  color: #b9c8cd;
  padding: 10px 12px;
}

.top-nav-menu a:hover,
.top-nav-menu a.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 0 14px;
}

.top-icon-btn {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
}

.top-lang-btn {
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.top-lang-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.top-notif {
  position: relative;
}

.top-notif .top-icon-btn {
  position: relative;
}

.top-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.top-notif-badge[hidden] {
  display: none;
}

.top-notif-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: min(320px, 90vw);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 20;
}

.top-notif-menu[hidden] {
  display: none;
}

.top-notif-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.top-notif-menu-header strong {
  color: var(--text);
  font-size: 13px;
}

.top-notif-menu-header button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.top-notif-list {
  max-height: 360px;
  overflow-y: auto;
}

.top-notif-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 10px 12px;
  cursor: pointer;
}

.top-notif-item:last-child {
  border-bottom: 0;
}

.top-notif-item:hover {
  background: var(--surface-soft);
}

.top-notif-item strong {
  font-size: 13px;
  color: var(--text);
}

.top-notif-item span {
  font-size: 12px;
  color: var(--muted);
}

.top-notif-item small {
  font-size: 11px;
  color: var(--muted);
}

.top-notif-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.top-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.15;
  padding-left: 10px;
  cursor: pointer;
}

.top-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.top-user-menu[hidden] {
  display: none;
}

.top-user-menu a,
.top-user-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.top-user-menu a[hidden],
.top-user-menu button[hidden] {
  display: none;
}

.top-user-menu a:hover,
.top-user-menu button:hover {
  background: var(--surface-soft);
}

.top-user-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: #0ea58c;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
}

.top-user-copy {
  display: grid;
}

.top-user-copy strong {
  font-size: 13px;
  font-weight: 650;
  color: #ffffff;
}

.top-user-copy small {
  color: #92a6ad;
  font-size: 12px;
}

.top-user-chevron {
  flex: 0 0 auto;
  color: #92a6ad;
}

@media (max-width: 1180px) {
  .top-brand {
    min-width: auto;
  }

  .top-nav-group > button {
    padding-inline: 10px;
  }

  .top-user {
    display: none;
  }
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  width: 260px;
  border-right: 1px solid var(--line);
  background: #13201d;
  color: #f7faf9;
  padding: 18px 14px;
  transition: width 160ms ease;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 2px 6px;
}

.brand-mark {
  flex: 0 0 auto;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  font-weight: 700;
}

.brand-copy {
  min-width: 0;
}

.brand strong,
.brand small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand small {
  display: block;
  margin-top: 2px;
  color: #a8bbb6;
}

.sidebar-toggle {
  display: inline-grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.sidebar-toggle span {
  display: block;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: #d7e2df;
}

.sidebar-toggle-floating {
  display: none;
}

.side-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 4px 0 16px;
}

.nav-section {
  display: grid;
  gap: 3px;
}

.nav-section h2 {
  margin: 0 0 4px;
  padding: 0 12px;
  color: #7fa096;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  min-height: 36px;
  border-radius: 8px;
  padding: 8px 12px;
  color: #d7e2df;
  line-height: 1.15;
}

.sidebar nav a.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.sidebar nav a:hover,
.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.sidebar-collapsed .sidebar {
  width: 76px;
  padding-inline: 10px;
}

body.sidebar-collapsed .sidebar-top {
  justify-content: center;
}

body.sidebar-collapsed .brand {
  padding-inline: 0;
}

body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav-section h2,
body.sidebar-collapsed .sidebar nav a span {
  display: none;
}

body.sidebar-collapsed .sidebar-toggle {
  position: fixed;
  left: 21px;
  bottom: 18px;
}

body.sidebar-collapsed .side-nav {
  align-items: center;
  padding-top: 12px;
}

body.sidebar-collapsed .nav-section {
  gap: 7px;
}

body.sidebar-collapsed .sidebar nav a {
  width: 42px;
  height: 42px;
  justify-content: center;
  padding: 0;
}

body.sidebar-collapsed .sidebar nav a::before {
  content: attr(data-short);
  font-size: 12px;
  font-weight: 750;
}

.app-shell {
  margin-left: 0;
  min-height: 100vh;
  padding: 100px clamp(16px, 3vw, 40px) 28px;
  transition: margin-left 160ms ease;
}

body.sidebar-collapsed .app-shell {
  margin-left: 0;
}

.page {
  width: 100%;
  margin: 0;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.page-title h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

.page-title p {
  margin: 6px 0 0;
  color: var(--muted);
}

.toolbar,
.card,
.summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  gap: 10px;
  padding: 14px;
  margin-bottom: 16px;
}

.card {
  margin-bottom: 16px;
  overflow: hidden;
}

.card-body {
  min-width: 0;
}

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

.card-header h2,
.card-header h3 {
  margin: 0;
  font-size: 16px;
}

.card-body {
  padding: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.summary-card {
  padding: 16px;
}

.summary-card > span {
  color: var(--muted);
  display: block;
  margin-bottom: 10px;
}

.summary-card strong {
  display: block;
  min-width: 0;
  font-size: 22px;
  overflow-wrap: anywhere;
}

.summary-card.danger strong {
  color: var(--danger);
}

.workflow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.workflow-actions {
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.action-menu {
  position: relative;
}

.action-menu summary {
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 650;
}

.action-menu summary::-webkit-details-marker {
  display: none;
}

.action-menu[open] div {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 4;
  display: grid;
  min-width: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.action-menu button {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
}

.action-menu button:hover {
  background: var(--surface-soft);
}

.workflow-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.workflow-status-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
}

.workflow-status-card span {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
}

.workflow-status-card strong {
  display: block;
}

.workflow-warning {
  display: grid;
  gap: 8px;
  border: 1px solid #f2c48d;
  border-radius: 8px;
  background: #fff8ed;
  color: #7a4308;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.workflow-warning ul {
  margin: 0;
  padding-left: 18px;
}

.next-action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #bedbd4;
  border-radius: 8px;
  background: #effaf7;
  color: #133d35;
  padding: 16px;
  margin-bottom: 16px;
}

.next-action-panel.done {
  background: #f5f7fa;
  color: var(--text);
}

.task-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.next-action-panel span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-weight: 650;
}

.next-action-panel strong {
  font-size: 20px;
}

.attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.attention-card {
  display: grid;
  gap: 8px;
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 16px;
  text-align: left;
  cursor: pointer;
}

.attention-card:hover {
  border-color: var(--accent);
  background: #ffffff;
}

.attention-card span {
  color: var(--muted);
  font-weight: 650;
}

.attention-card strong {
  font-size: 22px;
}

.action-form-box {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 12px;
}

.action-form-box summary {
  cursor: pointer;
  font-weight: 750;
}

.action-form-box form {
  margin-top: 14px;
}

.workflow-stepper {
  display: grid;
  /* 120px ustunda «Rejalashtirilgan» kabi bitta uzun so'z sig'masdi va
     yonidagi qadamning doirasi ustiga chiqib ketardi: grid elementi
     min-content dan tor bo'la olmaydi, matn esa bo'sh joyi bo'lmagani uchun
     ko'chmaydi. Doira yorliqning tepasiga ko'chirildi -- shunda yorliqqa
     butun ustun tegadi. */
  grid-template-columns: repeat(8, minmax(96px, 1fr));
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 16px;
  overflow-x: auto;
}


/* ---- Topbardagi tez qidiruv ---- */
/* Qidiruv katagi topbarda `flex: 1` bilan turardi. Menyu 725px joy egallagani
   uchun 1440px li ekranda katakka atigi 95px, ichidagi maydonga esa 20px joy
   qolardi -- ya'ni lupa bilan `⌘K` yonma-yon turgan, hech narsa yozib
   bo'lmaydigan bo'sh quti. 1280px da kenglik butunlay nolga tushardi.

   Endi topbarda faqat tugma turadi -- uning kengligi menyuga bog'liq emas --
   qidiruv esa sahifa ustidagi oynada ochiladi. Oyna kengligi topbardagi joyga
   qaram emas, shuning uchun hech qanday ekranda siqilib qolmaydi. */
.top-search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 38px;
  margin: 0 14px 0 auto;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.top-search-trigger:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.top-search-trigger-label {
  white-space: nowrap;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 96px 20px 20px;
  background: rgba(16, 24, 40, 0.44);
}

.search-panel {
  width: min(620px, 100%);
  height: fit-content;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
  padding: 10px;
}

.search-panel .searchbox {
  height: 46px;
  border-color: var(--line);
  background: var(--bg);
  color: var(--muted);
}

.search-panel .searchbox input {
  color: var(--text);
  font-size: 14px;
}

.search-panel .searchbox input::placeholder {
  color: var(--muted);
}

.search-panel .searchbox kbd {
  border-color: var(--line);
  color: var(--muted);
}

/* Oyna ichida ro'yxat maydon ostida oddiy oqimda turadi. */
.search-panel .search-results {
  position: static;
  margin-top: 8px;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0 11px;
  color: rgba(255, 255, 255, 0.7);
  cursor: text;
}

.searchbox:focus-within {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
}

.searchbox-icon {
  display: grid;
  place-items: center;
  flex: none;
}

.searchbox input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font-size: 13px;
}

.searchbox input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.searchbox kbd {
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-family: inherit;
}

.search-results {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.22);
  padding: 8px;
  color: var(--text);
}

.search-group + .search-group {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 6px;
}

.search-group > .eyebrow {
  padding: 6px 10px 4px;
}

.search-item {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.search-item:hover,
.search-item.is-active {
  background: var(--surface-soft);
}

.search-item b { font-size: 13.5px; font-weight: 700; }
.search-item small { color: var(--muted); font-size: 12px; }

.search-empty {
  color: var(--muted);
  padding: 14px 10px;
  font-size: 13px;
}

.tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
}

.tab.active .tab-count {
  background: #dff0eb;
  color: var(--accent);
}

@media (max-width: 1180px) {
  .top-search-trigger kbd { display: none; }
}

@media (max-width: 1080px) {
  .top-search-trigger-label { display: none; }
  .top-search-trigger { padding: 0 9px; }
}

/* ---- Shartnoma kartochkasi: keyingi qadam, ko'rsatkichlar, jarayon ----
   Tuzilish clean-ux-dashboard maketidan olindi, ranglar va o'lchamlar esa
   bizning tokenlarimizga moslandi. */

.title-line {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}

.eyebrow {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-head h2 {
  margin: 3px 0 0;
  font-size: 15px;
}

/* Keyingi qadam -- sahifadagi eng ko'zga tashlanadigan blok. */
.next-action {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 12px;
  background: linear-gradient(100deg, var(--accent), var(--accent-dark));
  color: #ffffff;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(14, 118, 98, 0.16);
}

.next-action.done {
  background: linear-gradient(100deg, #35566a, #24404f);
  box-shadow: 0 8px 24px rgba(24, 46, 60, 0.16);
}

.next-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 43px;
  height: 43px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 19px;
  font-weight: 800;
}

.next-body {
  flex: 1;
  min-width: 0;
}

.next-action .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.next-action h2 {
  margin: 3px 0;
  font-size: 17px;
}

.next-action p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
}

.next-action .btn.white {
  flex: none;
  border: 0;
  background: #ffffff;
  color: var(--accent-dark);
  font-weight: 700;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.metric-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 15px 16px;
}

.metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.metric-value {
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -0.4px;
  overflow-wrap: break-word;
}

.metric-note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.metric-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--muted);
}

.metric-dot.green { background: var(--accent); }
.metric-dot.amber { background: #d9a441; }

.mini-progress {
  display: block;
  overflow: hidden;
  height: 4px;
  border-radius: 10px;
  background: var(--surface-soft);
}

.mini-progress > span {
  display: block;
  height: 100%;
  background: var(--muted);
}

.mini-progress.green > span { background: var(--accent); }
.mini-progress.amber > span { background: #d9a441; }

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr);
  gap: 18px;
  margin-bottom: 18px;
  align-items: stretch;
}

.overview-grid > * {
  min-width: 0;
}

/* Ikkala panel bir xil balandlikda va ichida joy ko'p. */
.process-panel,
.finance-panel {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  border-radius: 14px;
  padding: 22px 24px;
  overflow: visible;
}

/* Doiralar ketma-ket: har biri o'zidan oldingilari bajarilgandagina yashil
   bo'ladi. Doira ostidagi kichik matn esa o'sha yo'nalishning haqiqiy
   holatini aytadi va mustaqil hisoblanadi. */
/* Doira yorliqning TEPASIDA turadi. Yonma-yon qo'yilganda bog'lovchi chiziq
   yorliq matnini kesib o'tardi -- chiziq doira markazida, matn esa aynan shu
   balandlikda boshlanadi. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
  margin-top: 22px;
  margin-bottom: 4px;
}

.steps::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 17px;
  height: 2px;
  background: var(--line);
}

.step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
  padding: 0 6px;
}

.step > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--surface-soft);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.step.done > span {
  background: #e4f2ee;
  box-shadow: 0 0 0 1px #b7d9d0;
  color: var(--accent);
}

.step.current > span {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: #ffffff;
}

.step > div {
  min-width: 0;
}

.step b,
.step small {
  display: block;
  overflow-wrap: break-word;
}

.step b {
  font-size: 13.5px;
  font-weight: 700;
}

.step small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.step.current small {
  color: var(--warning);
}

.attention-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  border: 1px solid #f0dcb8;
  border-radius: 10px;
  background: #fdf6e8;
  color: var(--warning);
  padding: 13px 15px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

/* Ogohlantirish pastda turadi, shuning uchun tepasida bo'sh joy qoladi. */
.process-panel .steps {
  margin-bottom: 22px;
}

.finance-content {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  padding: 20px 0 4px;
}

.donut {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 var(--donut, 0%), var(--surface-soft) var(--donut, 0%) 100%);
}

.donut::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--surface);
}

.donut > div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.donut strong,
.donut span {
  display: block;
}

.donut strong { font-size: 22px; font-weight: 750; }
.donut span { margin-top: 2px; color: var(--muted); font-size: 12px; }

.finance-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.finance-legend > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.legend-dot { margin-top: 6px; }

.legend-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--muted);
}

.legend-dot.green { background: var(--accent); }
.legend-dot.amber { background: #d9a441; }

.finance-legend p {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}

.finance-legend small { color: var(--muted); font-size: 12.5px; }
.finance-legend b { margin-top: 4px; font-size: 15px; font-weight: 700; overflow-wrap: break-word; }

@media (max-width: 1080px) {
  .overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .steps::before { display: none; }
  .step { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; }
  .next-action { flex-wrap: wrap; align-items: flex-start; }
  .next-action .btn.white { width: 100%; margin-top: 4px; }
  .finance-content { justify-content: center; flex-wrap: wrap; }
}

/* «Umumiy» bo'limi: asosiy maydonlar, yonida tomonlar va holat, pastda
   to'lov muddatlari. Ilgari bularning hammasi bitta uzun ustunda ketma-ket
   turardi va sahifa oxiri ko'rinmasdi. */
.overview-content {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Grid elementining sukut bo'yicha eng kichik kengligi -- ichidagi eng keng
   narsa. To'lov jadvali shu tariqa butun ustunni kengaytirib, sahifani
   gorizontal suradi. */
.overview-content > * {
  min-width: 0;
}

.overview-content .table-scroll,
.overview-content table {
  max-width: 100%;
}

/* Maketdagi nafas: kartochka ichida joy ko'p, chegaralar yumshoq.
   Umumiy .card dan kengroq -- bu sahifada ma'lumot kam va u yaxshi ko'rinishi
   kerak. */
.overview-content > .card,
.overview-content .side-stack > .card,
.overview-content .side-stack > div > .card {
  margin-bottom: 0;
  border-radius: 14px;
  padding: 22px 24px;
  overflow: visible;
}

.overview-content .panel-head + .info-grid {
  margin-top: 6px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
  margin-top: 12px;
}

.info-grid > div {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  min-width: 0;
}

.info-grid .wide {
  grid-column: 1 / -1;
}

.info-grid small,
.info-grid b {
  display: block;
}

.info-grid small {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.info-grid b {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: break-word;
}

/* Bo'sh qiymat «—» emas, o'qiladigan jumla: chiziqcha ma'lumot yo'qligini
   emas, xato borligini his qildiradi. */
.info-grid b:empty::after,
.contact-lines b:empty::after {
  content: attr(data-empty);
  color: var(--muted);
  font-weight: 500;
}

.side-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.company-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0 12px;
  min-width: 0;
}

.company-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e3f0ec;
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
}

.company-row b,
.company-row small,
.owner-row b,
.owner-row small {
  display: block;
  overflow-wrap: break-word;
}

.company-row b { font-size: 15px; font-weight: 700; line-height: 1.35; }
.company-row small,
.owner-row small { margin-top: 5px; color: var(--muted); font-size: 12.5px; }

.contact-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.contact-lines > div {
  border-radius: 9px;
  background: var(--surface-soft);
  padding: 12px 13px;
  min-width: 0;
}

.contact-lines small,
.contact-lines b {
  display: block;
  overflow-wrap: break-word;
}

.contact-lines small { color: var(--muted); font-size: 12px; }
.contact-lines b { margin-top: 6px; font-size: 13.5px; font-weight: 700; }

.outline-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.outline-wide:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.owner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.avatar.dark {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--accent-dark);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.owner-row b { font-size: 15px; font-weight: 700; }

.company-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  font-size: 16px;
}

/* Holat tugmalari yonma-yon sig'masdi va o'ralib ketardi -- ustunga qo'yildi. */
.status-card .actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.status-card .actions .btn {
  width: 100%;
}

/* `.form-hint` allaqachon ishlatilardi, lekin o'z uslubi yo'q edi -- oddiy
   xatboshi bo'lib, matn bilan bir xil ko'rinardi. */
.form-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.status-card .form-hint {
  margin-top: 10px;
}

.payment-table-card,
.requisites-card,
.status-holder {
  grid-column: 1 / -1;
}

.status-holder > .card {
  margin-bottom: 0;
  border-radius: 14px;
  padding: 22px 24px;
  overflow: visible;
}

/* Holat tugmalari endi qatorda -- kartochka keng, o'ralishning hojati yo'q. */
.status-card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.status-card .actions .btn {
  width: auto;
}

.requisites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 36px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.text-button:hover { text-decoration: underline; }

/* Panel sarlavhasi: yorliq ustida kichik, nomi ostida kattaroq. */
.overview-content .panel-head h2,
.process-panel .panel-head h2,
.finance-panel .panel-head h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.overview-content .eyebrow,
.process-panel .eyebrow,
.finance-panel .eyebrow {
  margin-bottom: 6px;
}

/* Jadval sarlavhasi maketdagidek: kichik, katta harfli, yumshoq fon. */
.payment-table-card table th {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 12px 14px;
}

.payment-table-card table td {
  padding: 16px 14px;
  font-size: 13.5px;
}

.status-card .actions {
  margin-top: 12px;
  flex-wrap: wrap;
}

@media (max-width: 1080px) {
  .overview-content { grid-template-columns: 1fr; }
  .payment-table-card, .requisites-card { grid-column: auto; }
}

@media (max-width: 760px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-grid .wide { grid-column: auto; }
  .contact-lines { grid-template-columns: 1fr; }
}

/* Shartnomaning to'rtta mustaqil kuzatuvi: har biri o'z ichida tartibli,
   shuning uchun «bajarilgan» hech qachon «bajarilmagan» dan keyin turmaydi. */
.track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.track-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px 16px;
}

.track-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.track-state {
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: break-word;
}

.track-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-soft);
}

.track-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--muted);
}

.track-success .track-bar > span {
  background: var(--accent);
}

.track-warning .track-bar > span {
  background: #d9a441;
}

.track-danger .track-bar > span {
  background: var(--danger);
}

.track-figure {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.workflow-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  text-align: center;
  font-weight: 650;
}

.workflow-step > span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
  line-height: 1.25;
}

.workflow-dot {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
}

.workflow-step.completed {
  color: var(--accent);
}

.workflow-step.completed .workflow-dot,
.workflow-step.current .workflow-dot {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.workflow-step.current {
  color: var(--text);
}

.workflow-tabs {
  margin-top: 6px;
}

.helper-text {
  margin: 0 0 14px;
  color: var(--muted);
}

.workflow-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.workflow-timeline {
  display: grid;
  gap: 0;
}

/* workflowTimeline() oddiy <div><span>yorliq</span><strong>qiymat</strong></div>
   chiqaradi -- .timeline-row emas. Uslub berilmagani uchun yorliq bilan qiymat
   yopishib, «Yaratildi24.08.2026» bo'lib o'qilardi. */
.workflow-timeline > div {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr;
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.workflow-timeline > div:last-child {
  border-bottom: 0;
}

.workflow-timeline > div > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.timeline-row {
  display: grid;
  grid-template-columns: 18px minmax(160px, 1fr) 2fr;
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.timeline-row span {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.timeline-row em {
  color: var(--muted);
  font-style: normal;
}

.batch-wizard-page {
  max-width: none;
}

.batch-wizard-page,
.batch-wizard-page form,
.batch-wizard-page .card,
.batch-wizard-page .card-body,
.batch-wizard-page .table-scroll {
  width: 100%;
}

.contract-wizard-page {
  container-type: inline-size;
}

.batch-wizard-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.batch-wizard-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 12px;
  color: var(--muted);
}

.batch-wizard-step span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  font-weight: 750;
}

.batch-wizard-step strong {
  color: inherit;
}

.batch-wizard-step.completed,
.batch-wizard-step.current {
  border-color: #bedbd4;
  color: var(--accent);
}

.batch-wizard-step.completed span,
.batch-wizard-step.current span {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.batch-wizard-step.current {
  box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.12);
}

.erp-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.erp-step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  min-width: 0;
  flex: 1 1 auto;
}

/* Qadamlar orasidagi chiziq: o'tilgan qismi yashil, qolgani kulrang. Chiziq
   qadamning o'zidan keyin turadi, shuning uchun oxirgisida ko'rsatilmaydi. */
.erp-step::after {
  content: "";
  flex: 1 1 24px;
  min-width: 24px;
  height: 1px;
  background: var(--line);
}

.erp-step:last-child {
  flex: 0 1 auto;
}

.erp-step:last-child::after {
  display: none;
}

.erp-step.completed::after {
  background: var(--accent);
}

.erp-step-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  font-weight: 750;
  font-size: 14px;
}

.erp-step-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.erp-step-text strong {
  font-size: 14px;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erp-step-text small {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.erp-step.completed .erp-step-mark,
.erp-step.current .erp-step-mark {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.erp-step.completed .erp-step-text strong,
.erp-step.current .erp-step-text strong {
  color: var(--text, #101828);
}

.erp-step.current .erp-step-text small {
  color: var(--accent);
}

/* Ettita qadamli shartnoma wizardida ostki yozuvga joy qolmaydi. */
.erp-stepper.compact .erp-step-text small {
  display: none;
}

.erp-stepper.compact .erp-step-mark {
  width: 28px;
  height: 28px;
}

/* ---- Bosqichli forma qobig'i --------------------------------------------- */

.wiz-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 10px;
}

.wiz-crumb {
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}

.wiz-crumb:hover {
  color: var(--accent);
  text-decoration: underline;
}

.wiz-crumb.current {
  color: var(--text, #101828);
}

.wiz-crumb-sep {
  color: var(--line);
}

.wiz-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.wiz-head h1 {
  margin: 0 0 4px;
}

.wiz-head p {
  margin: 0;
  color: var(--muted);
}

.wiz-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.wiz-shell {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.wiz-steps-bar {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.wiz-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 0;
  align-items: start;
}

.wiz-main {
  padding: 22px 24px;
  min-width: 0;
}

.wiz-pane[hidden] {
  display: none;
}

.wiz-pane > section:first-child,
.wiz-pane > .card:first-child {
  margin-top: 0;
}

.wiz-panel {
  border-left: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 22px 20px;
  align-self: stretch;
}

.wiz-panel h2 {
  margin: 0 0 14px;
  font-size: 17px;
}

.wiz-panel-label {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.wiz-panel-progress {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 16px;
}

.wiz-panel-progress strong {
  font-size: 26px;
  color: var(--accent);
  line-height: 1;
}

.wiz-panel-progress span {
  color: var(--muted);
}

.wiz-panel-done {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}

.wiz-panel-done:empty {
  display: none;
}

.wiz-panel-done li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* Nom va «to'ldirilgan» bitta oqimda qolsin: alohida flex bo'lagi bo'lsa,
   satr ko'chganda ular ikki chekkaga ajralib ketardi. */
.wiz-panel-done-text {
  display: block;
}

.wiz-panel-done svg {
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

.wiz-panel-draft {
  display: grid;
  gap: 2px;
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--accent);
}

.wiz-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.wiz-foot-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.wiz-cancel {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.wiz-cancel:hover {
  color: var(--danger);
}

.wiz-draft-btn {
  border-color: var(--accent);
  color: var(--accent);
}

/* To'g'ri to'ldirilgan maydonning yashil belgisi. Maydon `<label>` ichida
   bo'lgani uchun belgi labelga qo'yiladi va input o'ng tomonda joy qoldiradi. */
.wiz-pane label.field-ok,
.wiz-pane .form-field.field-ok {
  position: relative;
}

.wiz-pane label.field-ok > input,
.wiz-pane label.field-ok > select,
.wiz-pane label.field-ok > textarea,
.wiz-pane .form-field.field-ok > input,
.wiz-pane .form-field.field-ok > select,
.wiz-pane .form-field.field-ok > textarea {
  padding-right: 34px;
}

.wiz-pane label.field-ok::after,
.wiz-pane .form-field.field-ok::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 13px;
  width: 15px;
  height: 15px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176b5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L19 7'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Select ning o'z o'qi o'ng chekkada turadi, shuning uchun belgi undan
   chapga suriladi -- aks holda ikkalasi ustma-ust tushadi. Sinfni JS qo'yadi:
   `:has()` eski brauzerda butun qoidani tashlab yuborardi. */
.wiz-pane .field-ok.field-ok-select > select {
  padding-right: 52px;
}

.wiz-pane .field-ok.field-ok-select::after {
  right: 32px;
}

@media (max-width: 1100px) {
  .wiz-body {
    grid-template-columns: 1fr;
  }

  .wiz-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 780px) {
  .erp-stepper {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .erp-step::after {
    display: none;
  }

  .erp-step-text small {
    display: none;
  }
}

.erp-warning-panel {
  border: 1px solid #f0c98d;
  border-radius: 10px;
  background: #fff7ed;
  color: #7c3f0a;
  padding: 12px 14px;
}

.erp-warning-panel ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.batch-wizard-page .card-body {
  display: grid;
  gap: 16px;
}

.batch-wizard-page table input {
  min-width: 0;
}

.contract-wizard-page th:nth-child(1),
.contract-wizard-page td:nth-child(1) {
  min-width: 150px;
}

.contract-wizard-page th:nth-child(2),
.contract-wizard-page td:nth-child(2),
.contract-wizard-page th:nth-child(3),
.contract-wizard-page td:nth-child(3),
.contract-wizard-page th:nth-child(4),
.contract-wizard-page td:nth-child(4),
.contract-wizard-page th:nth-child(5),
.contract-wizard-page td:nth-child(5),
.contract-wizard-page th:nth-child(6),
.contract-wizard-page td:nth-child(6) {
  min-width: 116px;
}

.confirm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.confirm-grid .card {
  margin-bottom: 0;
}

.empty.compact {
  padding: 14px;
  text-align: left;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(10, 22, 20, 0.46);
  padding: 24px;
}

.modal-panel {
  width: min(1040px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.28);
}

.modal-header,
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
}

.modal-close {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.modal-body {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.modal-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 14px;
}

.modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.form-field {
  position: relative;
}

.field-label-text {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--muted);
}

.required-mark {
  color: var(--danger);
  font-weight: 800;
}

.field-helper,
.field-error {
  font-size: 11px;
  line-height: 1.35;
}

.field-helper {
  color: var(--muted);
}

.field-error {
  color: var(--danger);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--danger);
}

input[readonly],
textarea[readonly] {
  background: #f4f7f9;
  color: #41505f;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: #eef2f5;
  color: #7b8794;
  cursor: not-allowed;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #cbd5df;
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  padding: 9px 10px;
  outline: none;
}

textarea {
  min-height: 82px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.14);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--text);
}

.check-row input {
  width: 16px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.field-group .field-label-text {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.field-group .check-row {
  min-height: 30px;
}

.assignee-picker {
  gap: 8px;
}

.assignee-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.assignee-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.assignee-count.has-selection {
  color: var(--accent);
  font-weight: 650;
}

.assignee-search {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
}

.assignee-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.assignee-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  padding: 4px 8px;
}

.assignee-group + .assignee-group {
  margin-top: 6px;
}

.assignee-group[hidden] {
  display: none;
}

.assignee-group-title {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 0 4px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.assignee-row {
  min-height: 30px;
  gap: 8px;
  padding: 2px 2px 2px 6px;
  border-radius: 5px;
  cursor: pointer;
}

.assignee-row[hidden] {
  display: none;
}

.assignee-row:hover {
  background: var(--surface-soft);
}

.assignee-name {
  flex: 0 0 auto;
}

.assignee-position {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
}

.field-group-scroll {
  max-height: 260px;
  overflow-y: auto;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.auth-card {
  width: 360px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  padding: 32px 28px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 16px;
}

.auth-brand .brand-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
}

.auth-card h1 {
  margin: 0 0 18px;
  font-size: 19px;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.btn.sm {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12.5px;
}

.btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.btn.primary:hover {
  background: var(--accent-dark);
}

.btn.danger {
  border-color: #f0b8b2;
  color: var(--danger);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

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

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 960px;
}

.contract-wizard-page .table-scroll table {
  min-width: 1180px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

td input,
td select {
  width: 100%;
  min-width: 0;
}

.number-cell {
  text-align: right;
  white-space: nowrap;
}

.action-cell {
  min-width: 112px;
  white-space: nowrap;
}

th {
  background: var(--surface-soft);
  color: #465563;
  font-size: 12px;
  font-weight: 700;
}

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

.table-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.link-btn {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
}

.muted {
  color: var(--muted);
}

/* Jadval katagida datchik raqami haydovchi raqamining tagida turadi.
   Farq katta bo'lsa qizil -- ko'z birinchi shunga tushsin. */
.text-danger {
  color: var(--danger);
}

/* Berib bo'lmaydigan mashina qatori: ko'rinadi, lekin tanlanmaydi --
   sababi yonida yozilgan. */
tr.row-muted {
  opacity: 0.55;
}

td > small.muted,
td > small.text-danger,
td > small.muted > a {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 2px;
}

.pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--surface-soft);
  color: #465563;
  font-size: 12px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: #eef4ff;
  color: #264b87;
  font-size: 12px;
  font-weight: 700;
}

.status-badge.success,
.status-badge.matched {
  background: #e8f7ef;
  color: #176b45;
}

.status-badge.warning,
.status-badge.waiting_acceptance,
.status-badge.difference {
  background: #fff4df;
  color: #8a4f00;
}

/* "danger" was used by callers but never defined, so an overdue payment came
   out in the neutral default colour -- the one state that must not look
   neutral. */
.status-badge.danger,
.status-badge.overdue {
  border-color: #e6b4ad;
  background: #fdece9;
  color: #a5342a;
}

.status-badge.muted,
.status-badge.waiting,
.status-badge.partial {
  background: #eef2f7;
  color: #556274;
}

.ops-page {
  max-width: none;
  margin: -14px -12px 0;
}

.ops-titlebar {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 46px;
  border-bottom: 1px solid var(--line);
}

.ops-title-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ops-title-left h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 750;
}

.ops-menu-btn,
.ops-icon-btn,
.ops-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
  color: #4d5968;
  padding: 6px 10px;
  cursor: pointer;
}

.ops-menu-btn {
  min-width: 28px;
  border-color: transparent;
  background: transparent;
  font-weight: 800;
}

.ops-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-height: 46px;
}

.ops-tabs button {
  border: 0;
  border-left: 1px solid transparent;
  background: transparent;
  color: #8a94a6;
  padding: 0 18px;
  cursor: pointer;
}

.ops-tabs button.active {
  color: var(--text);
  font-weight: 700;
}

.ops-quick-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.ops-icon-btn {
  min-width: 42px;
  background: #e9eef6;
  color: #6d788b;
  font-size: 12px;
}

.ops-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
}

.ops-command-left,
.ops-search,
.ops-footer,
.ops-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Without wrapping, a narrow screen squeezed every field in the filter bar
   until the two selects were 22px wide and the buttons pushed off screen.
   Wrapping is the only behaviour that keeps each control readable. */
.ops-commandbar,
.ops-command-left,
.ops-search {
  flex-wrap: wrap;
}

.ops-search {
  row-gap: 10px;
}

.ops-command-left .btn.primary {
  min-height: 34px;
  border-color: #1db9b1;
  background: #22c7bf;
  text-transform: uppercase;
}

.ops-counter {
  color: var(--muted);
  font-size: 13px;
}

.ops-search {
  margin-left: auto;
}

/* A checkbox and its text are one control. Without this they inherit the
   generic `label { display: grid }` and split apart -- the box drifts to the
   end of the filter bar while its label sits over the table. It was patched
   per-page twice before; defining it once fixes every filter bar, including
   the ones that had no patch. */
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  white-space: nowrap;
  font-weight: 600;
}

.inline-check input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
}

.ops-search input {
  width: min(360px, 28vw);
}

.ops-search input,
.ops-search select {
  min-height: 34px;
  min-width: 150px;
  border-radius: 4px;
  background: #ffffff;
}

/* 6.9 -- a labelled filter field. A placeholder vanishes as soon as something
   is typed, leaving a value with nothing saying which field it belongs to. */
.ops-field {
  display: grid;
  gap: 3px;
  width: auto;
}

.ops-field-label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ops-field input,
.ops-field select {
  width: 100%;
}

.ops-field:has(input[name="name"]) {
  min-width: min(280px, 100%);
}

/* Sortable column heading: label plus a direction arrow. */
.ops-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ops-sort:hover {
  color: var(--brand, #176b5b);
}

.ops-sort-arrow {
  color: #9aa6b2;
  font-size: 11px;
  line-height: 1;
}

.ops-sort.active,
.ops-sort.active .ops-sort-arrow {
  color: var(--brand, #176b5b);
}

/* 6.4 -- bulk action bar, shown only while something is selected. */
.ops-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 1px solid #bfe3dc;
  border-radius: 6px;
  background: #eefaf7;
}

.ops-bulkbar[hidden] {
  display: none;
}

.ops-bulkbar-count {
  font-size: 13.5px;
}

.ops-bulkbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-bulkbar .btn.danger {
  border-color: #e6b4ad;
  background: #fdece9;
  color: #a5342a;
}

.ops-bulkbar .btn.ghost {
  border-color: transparent;
  background: none;
  color: var(--muted);
}

.ops-table td.ops-pick,
.ops-table th:has(#clients-pick-all) {
  width: 34px;
  padding-right: 0;
  text-align: center;
}

.ops-table tr.picked > td {
  background: #f2fbf8;
}

.ops-table td.ops-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}



/* The actions column is already pinned to the right edge by the shared
   `.ops-table td:last-child` rule, so it only needs the selected-row colour
   here -- the shared rule repaints its own background and would otherwise
   leave the pinned cell white in a highlighted row. */
.ops-table tbody tr.picked > td:last-child,
.ops-table tbody tr.picked:nth-child(even) > td:last-child {
  background: #f2fbf8;
}

/* Column widths are stated rather than derived, because the free-text columns
   grew with their content until the table outran the card and the pinned
   actions column came to rest on top of the last heading. `max-width` is only
   advisory under the default auto layout, so the widths have to be fixed for
   the browser to honour them. Headings wrap here for the same reason. */
.clients-ops-page .ops-table {
  table-layout: fixed;
  width: 100%;
  /* The shared rule pins every list table to 1420px, which is what pushed this
     one past the card at any normal window size. With the widths stated above
     the table no longer needs that floor. 980px was too low: the address column
     takes whatever the stated columns leave over, and at that width there were
     barely forty pixels left -- the address broke one letter to a line and its
     heading spilled over the neighbouring one. 1240px keeps roughly 260px for
     the address, which is where it stops wrapping absurdly. */
  min-width: 1240px;
}

.clients-ops-page .ops-table th {
  white-space: normal;
  vertical-align: bottom;
  /* Sarlavha katagidan chiqib, yonidagisining ustiga tushmasin. */
  overflow-wrap: break-word;
  overflow: hidden;
}

.clients-ops-page .ops-sort {
  white-space: normal;
  text-align: left;
}

.clients-ops-page .ops-table th:nth-child(1) { width: 36px; }
.clients-ops-page .ops-table th:nth-child(2) { width: 21%; }
.clients-ops-page .ops-table th:nth-child(3) { width: 112px; }
.clients-ops-page .ops-table th:nth-child(4) { width: 112px; }
.clients-ops-page .ops-table th:nth-child(5) { width: 132px; }
.clients-ops-page .ops-table th:nth-child(7) { width: 124px; }
.clients-ops-page .ops-table th:nth-child(8) { width: 118px; }
.clients-ops-page .ops-table th:nth-child(9) { width: 96px; }

.clients-ops-page .ops-table td {
  /* `anywhere` uzun manzilni har bir harfini alohida qatorga tashlab yuborardi;
     `break-word` esa avval so'z chegarasidan bo'ladi va faqat sig'masa uzadi. */
  overflow-wrap: break-word;
}

/* Moliya ro'yxatlari 12 ustunli, umumiy .ops-table esa 1420px minimal
   kenglikni talab qiladi -- jadval kartochkadan chiqib, «Jami» va «Status»
   ustunlari ko'rinmay qolardi. Mijozlar jadvalidagi kabi kengliklar aytib
   qo'yiladi, shunda jadval oyna kengligiga sig'adi. */
.invoice-ops-page .ops-table,
.receivables-ops-page .ops-table,
.payables-ops-page .ops-table {
  table-layout: fixed;
  width: 100%;
  min-width: 1180px;
}

.invoice-ops-page .ops-table th,
.receivables-ops-page .ops-table th,
.payables-ops-page .ops-table th {
  white-space: normal;
  vertical-align: bottom;
  overflow-wrap: break-word;
  overflow: hidden;
}

.invoice-ops-page .ops-table td,
.receivables-ops-page .ops-table td,
.payables-ops-page .ops-table td {
  overflow-wrap: break-word;
}

/* Summalar odatda bir qatorda turadi, lekin ustunga sig'masa yonidagi
   katakning ustiga chiqib ketgandan ko'ra «so'm» ni pastga tushirgani yaxshi.
   Raqamning o'zi uzilmaydi: guruhlar orasida uzilmas probel turibdi. */
/* Ikkita amal tor ustunga bir qatorda sig'masdi va oxirgisi kesilib qolardi. */
.invoice-ops-page .ops-row-actions,
.receivables-ops-page .ops-row-actions,
.payables-ops-page .ops-row-actions {
  flex-wrap: wrap;
  gap: 4px 10px;
}

.invoice-ops-page .ops-table td.ops-money,
.receivables-ops-page .ops-table td.ops-money,
.payables-ops-page .ops-table td.ops-money {
  white-space: normal;
}

.invoice-ops-page .ops-table :is(th, td):nth-child(1) { width: 11%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(2) { width: 12%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(3) { width: 7%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(4) { width: 7%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(5) { width: 7%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(6) { width: 6%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(7) { width: 8%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(8) { width: 9%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(9) { width: 9%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(10) { width: 9%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(11) { width: 8%; }
.invoice-ops-page .ops-table :is(th, td):nth-child(12) { width: 7%; }

.receivables-ops-page .ops-table :is(th, td):nth-child(1) { width: 15%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(2) { width: 10%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(3) { width: 7%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(4) { width: 8%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(5) { width: 9%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(6) { width: 8%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(7) { width: 9%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(8) { width: 7%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(9) { width: 7%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(10) { width: 8%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(11) { width: 6%; }
.receivables-ops-page .ops-table :is(th, td):nth-child(12) { width: 6%; }

.payables-ops-page .ops-table :is(th, td):nth-child(1) { width: 16%; }
.payables-ops-page .ops-table :is(th, td):nth-child(2) { width: 11%; }
.payables-ops-page .ops-table :is(th, td):nth-child(3) { width: 8%; }
.payables-ops-page .ops-table :is(th, td):nth-child(4) { width: 9%; }
.payables-ops-page .ops-table :is(th, td):nth-child(5) { width: 10%; }
.payables-ops-page .ops-table :is(th, td):nth-child(6) { width: 9%; }
.payables-ops-page .ops-table :is(th, td):nth-child(7) { width: 10%; }
.payables-ops-page .ops-table :is(th, td):nth-child(8) { width: 8%; }
.payables-ops-page .ops-table :is(th, td):nth-child(9) { width: 7%; }
.payables-ops-page .ops-table :is(th, td):nth-child(10) { width: 6%; }
.payables-ops-page .ops-table :is(th, td):nth-child(11) { width: 6%; }

/* Counts read down the column, so both the number and the heading above it
   line up on the right. */
.clients-ops-page .ops-table th:nth-child(7) .ops-sort,
.clients-ops-page .ops-table th:nth-child(8) .ops-sort {
  justify-content: flex-end;
  text-align: right;
  width: 100%;
}

/* Labels made the filter fields two lines tall; without this the submit button
   floats against their tops instead of sitting on the same baseline. */
.clients-ops-page .ops-commandbar {
  align-items: flex-end;
}

.clients-ops-page .ops-search {
  align-items: flex-end;
}

.clients-ops-page .ops-command-left {
  align-items: center;
  padding-bottom: 2px;
}

.ops-tool-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.ops-table-card {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
}

.ops-table {
  min-width: 1420px;
  font-size: 13px;
}

.ops-table th,
.ops-table td {
  padding: 10px 12px;
  color: #667085;
}

.ops-table th {
  height: 48px;
  background: #ffffff;
  color: #525d6c;
  font-size: 13px;
  white-space: nowrap;
}

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

.ops-table tbody tr:hover td {
  background: #eef6f4;
}

.ops-table th:last-child,
.ops-table td:last-child {
  position: sticky;
  right: 0;
  background: #ffffff;
  box-shadow: -8px 0 8px -8px rgba(16, 24, 40, 0.12);
}

.ops-table tbody tr:nth-child(even) td:last-child {
  background: #f6f6f7;
}

.ops-table tbody tr:hover td:last-child {
  background: #eef6f4;
}

.ops-check {
  width: 44px;
  text-align: center;
}

.ops-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.ops-code {
  width: 72px;
  color: #7a8493;
}

.ops-primary-link {
  border: 0;
  background: transparent;
  color: #485469;
  cursor: pointer;
  padding: 0;
  font-weight: 750;
  text-align: left;
}

.ops-primary-link:hover,
.ops-row-actions .link-btn:hover {
  color: var(--accent);
  text-decoration: underline;
}

.ops-money {
  white-space: nowrap;
  color: #445066;
  font-weight: 650;
}

.ops-warning {
  color: #8a4b0f;
}

.ops-row-actions {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.ops-footer {
  justify-content: space-between;
  padding: 12px 2px 0;
  color: var(--muted);
  font-size: 13px;
}

.ops-page-btn {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ops-page-btn.active {
  background: #00a99d;
  border-color: #00a99d;
  color: #ffffff;
}

.ops-page-btn.ellipsis {
  border: 0;
  background: transparent;
  cursor: default;
  color: #94a3b8;
}

.ops-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.orders-ops-page .ops-table {
  min-width: 1520px;
}

.orders-ops-page #order-search-form input:first-child {
  width: min(320px, 22vw);
}

.orders-ops-page #order-search-form input {
  width: min(210px, 15vw);
}

.orders-ops-page #order-search-form select {
  width: min(180px, 13vw);
}

/* Transport holatlari: bo'sh -- yashil, ta'mir va texnik xizmat -- sariq,
   parkda emas -- kulrang. */
.status-badge.free,
.status-badge.active,
.status-badge.signed {
  background: #e8f6f1;
  color: #176b5b;
}

.status-badge.completed,
.status-badge.inactive,
.status-badge.idle,
.status-badge.closed {
  background: #eef2f6;
  color: #465563;
}

.status-badge.repair,
.status-badge.service,
.status-badge.in_repair,
.status-badge.waiting_parts,
/* Shartnoma mijozdan qaytdi va ko'rib chiqilyapti -- kutish rangi. */
.status-badge.under_discussion,
.status-badge.diagnosis {
  background: #fdf3e3;
  color: #8a5b12;
}

.status-badge.expired {
  border-color: #e8c9a6;
  background: #fdf3e6;
  color: #8a5a1c;
}

.status-badge.cancelled {
  background: #fff1f0;
  color: var(--danger);
}

.status-badge.done {
  background: #e8f7ef;
  color: #176b45;
}

.status-badge.in_progress {
  background: #fff4df;
  color: #8a4f00;
}

.status-badge.priority-low {
  background: #eef2f7;
  color: #556274;
}

.status-badge.priority-medium {
  background: #fff4df;
  color: #8a4f00;
}

.status-badge.priority-high {
  background: #fff1f0;
  color: var(--danger);
}

.status-badge.priority-urgent {
  background: var(--danger);
  color: #fff;
}

.status-badge.new {
  background: #eef2f7;
  color: #556274;
}

.status-badge.accepted {
  background: #e8f6f1;
  color: #176b5b;
}

.status-badge.verified {
  background: #e8f7ef;
  color: #176b45;
}

.status-badge.rejected {
  background: #fff1f0;
  color: var(--danger);
}

.tasks-ops-page .ops-commandbar {
  flex-wrap: wrap;
  min-height: auto;
  gap: 10px 18px;
}

.tasks-ops-page .ops-search {
  flex-wrap: wrap;
  row-gap: 8px;
}

.tasks-ops-page .ops-search input {
  width: min(220px, 18vw);
}

.tasks-ops-page .ops-search select {
  width: min(170px, 15vw);
}

.tasks-summary-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 20px;
}

.tasks-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 220px;
  height: 86px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.tasks-summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tasks-summary-copy span {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-summary-copy strong {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
}

.tasks-ops-page .ops-table tr.task-priority-high {
  border-left: 3px solid var(--danger);
}

.tasks-ops-page .ops-table tr.task-priority-medium {
  border-left: 3px solid #d99a1f;
}

.tasks-ops-page .ops-table tr.task-priority-low {
  border-left: 3px solid transparent;
}

.tasks-view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-left: 4px;
}

.tasks-view-toggle button {
  border: 0;
  background: #ffffff;
  color: #556274;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.tasks-view-toggle button + button {
  border-left: 1px solid var(--line);
}

.tasks-view-toggle button.active {
  background: var(--accent);
  color: #ffffff;
}

.task-board {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
}

.task-board-column {
  flex: 1 1 260px;
  min-width: 260px;
  max-width: 320px;
  background: #f4f6f9;
  border-radius: 12px;
  padding: 10px;
}

.task-board-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
  font-weight: 700;
  color: #33404f;
}

.task-board-count {
  display: inline-flex;
  min-width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e2e8f0;
  color: #556274;
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
}

.task-board-column-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 80px;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.task-board-column-body.drag-over {
  background: rgba(23, 107, 91, 0.08);
  outline: 2px dashed var(--accent);
}

.task-board-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 14px 6px;
  text-align: center;
}

.task-board-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
  cursor: grab;
}

.task-board-card.dragging {
  opacity: 0.4;
}

.task-board-card.task-priority-high {
  border-left: 3px solid var(--danger);
}

.task-board-card.task-priority-medium {
  border-left: 3px solid #d99a1f;
}

.task-board-card.task-priority-urgent {
  border-left: 3px solid var(--danger);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.12);
}

.task-board-card-title {
  font-weight: 650;
  color: #0f172a;
  margin-bottom: 4px;
}

.task-board-card-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.task-board-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
}

.task-board-card-deadline {
  color: var(--muted);
}

.task-board-card-actions {
  display: flex;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid #eef2f7;
}

.item-row {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.7fr 0.8fr 1fr 0.7fr auto;
  gap: 10px;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.item-row:first-child {
  padding-top: 0;
}

.item-row:last-child {
  border-bottom: 0;
}

.totals-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.total-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.total-box span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.total-box strong {
  font-size: 16px;
}

/* Qiymat o'zgarganda balandligi o'zgarmasin: uchala satr har doim joyida
   turadi, aks holda qator surilib, keyingi klik boshqa qatorga tushadi. */
.balance-box {
  display: grid;
  gap: 2px;
  align-content: start;
}

.balance-box .balance-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.balance-box .balance-line > span {
  display: inline;
  margin-bottom: 0;
  white-space: nowrap;
}

.balance-box .balance-line strong {
  font-size: 13px;
  white-space: nowrap;
}

/* Ustun kengligi katak ichidagi matnga bog'liq bo'lmasin -- mahsulot tanlangan
   yoki summa hisoblangan zahoti butun jadval qayta chizilib ketardi va
   foydalanuvchining keyingi kliki boshqa katakka tushardi. Kengliklar
   foizda, jadval esa minimal kenglikka ega: ichidagi qiymat o'sganda ham
   ustunlar joyidan qimirlamaydi. */
.fixed-item-table {
  /* Grid/flex ichida min-width: 0 bo'lmasa, jadvalning minimal kengligi
     tashqariga chiqib, butun sahifani gorizontal suradi. */
  min-width: 0;
  max-width: 100%;
}

.fixed-item-table table {
  table-layout: fixed;
}

.fixed-item-table th,
.fixed-item-table td {
  overflow: hidden;
}

.fixed-item-table select,
.fixed-item-table input {
  max-width: 100%;
  box-sizing: border-box;
}

.fixed-item-table.cols-contract table { min-width: 1280px; }
.fixed-item-table.cols-contract :is(th, td):nth-child(1) { width: 17%; }
.fixed-item-table.cols-contract :is(th, td):nth-child(2) { width: 8%; }
.fixed-item-table.cols-contract :is(th, td):nth-child(3) { width: 6%; }
.fixed-item-table.cols-contract :is(th, td):nth-child(4) { width: 8%; }
.fixed-item-table.cols-contract :is(th, td):nth-child(5) { width: 9%; }
.fixed-item-table.cols-contract :is(th, td):nth-child(6) { width: 5%; }
.fixed-item-table.cols-contract :is(th, td):nth-child(7) { width: 12%; }
.fixed-item-table.cols-contract :is(th, td):nth-child(8) { width: 12%; }
.fixed-item-table.cols-contract :is(th, td):nth-child(9) { width: 12%; }
.fixed-item-table.cols-contract :is(th, td):nth-child(10) { width: 11%; }

.fixed-item-table.cols-order table { min-width: 1200px; }
.fixed-item-table.cols-order :is(th, td):nth-child(1) { width: 18%; }
.fixed-item-table.cols-order :is(th, td):nth-child(2) { width: 12%; }
.fixed-item-table.cols-order :is(th, td):nth-child(3) { width: 13%; }
.fixed-item-table.cols-order :is(th, td):nth-child(4) { width: 11%; }
.fixed-item-table.cols-order :is(th, td):nth-child(5) { width: 11%; }
.fixed-item-table.cols-order :is(th, td):nth-child(6) { width: 11%; }
.fixed-item-table.cols-order :is(th, td):nth-child(7) { width: 6%; }
.fixed-item-table.cols-order :is(th, td):nth-child(8) { width: 18%; }

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  overflow-x: auto;
}

.tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 12px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.tab.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.detail-item {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.detail-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

/* ---- Shared "detail page" design system ---- */

.detail-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.detail-breadcrumb-sep {
  color: #c7d0d8;
}

.detail-breadcrumb-current {
  color: var(--text);
  font-weight: 600;
}

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-title-row h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 750;
}

.detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.detail-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.detail-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  background: #eef2f7;
  color: #556274;
}

.detail-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.detail-status-pill.success {
  background: #e8f7ef;
  color: #176b45;
}

.detail-status-pill.warning {
  background: #fff4df;
  color: #8a4f00;
}

.detail-status-pill.danger {
  background: #fff1f0;
  color: var(--danger);
}

.detail-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-subtitle-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  color: var(--text);
}

.detail-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-summary-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.detail-summary-card {
  flex: 1 1 220px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.detail-summary-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.detail-summary-card strong {
  display: block;
  font-size: 26px;
  font-weight: 750;
  color: #0f172a;
}

.detail-summary-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.detail-card {
  background: #ffffff;
  border: 1px solid #e9edf2;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.detail-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #eef1f5;
  cursor: pointer;
  user-select: none;
}

.detail-card-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  flex: 1 1 auto;
}

.detail-card-count {
  background: #eef2f7;
  color: #556274;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
}

.detail-card-header-actions {
  display: flex;
  gap: 8px;
}

.detail-chevron {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  padding: 2px;
  transition: transform 0.15s ease;
}

.detail-card.collapsed .detail-chevron {
  transform: rotate(-90deg);
}

.detail-card.collapsed .detail-card-body {
  display: none;
}

.detail-card-body {
  padding: 18px;
}

.detail-card-body h3 {
  margin: 0 0 12px;
  padding-top: 18px;
  border-top: 1px solid #eef1f5;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.detail-card-body h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.detail-icon-badge {
  display: inline-grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #ddf8f3;
  color: #00a99d;
}

.detail-icon-badge.sm {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}

.detail-icon-badge.blue {
  background: #e5f0ff;
  color: #2563eb;
}

.detail-icon-badge.purple {
  background: #f1e8fd;
  color: #7c3aed;
}

.detail-icon-badge.amber {
  background: #fff4df;
  color: #8a4f00;
}

.detail-icon-badge.green {
  background: #e8f7ef;
  color: #176b45;
}

.detail-icon-badge.red {
  background: #fff1f0;
  color: var(--danger);
}

.detail-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f4f8;
}

.detail-field span {
  color: var(--muted);
  font-size: 12px;
}

.detail-field strong {
  font-size: 14px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.detail-two-col.with-arrow {
  grid-template-columns: 1fr auto 1fr;
}

.detail-address-arrow {
  display: flex;
  align-items: center;
  color: var(--muted);
}

.detail-tone-panel {
  border-radius: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #eef1f5;
}

.detail-tone-panel.success {
  background: #f0faf6;
  border-color: #d7f0e4;
}

.detail-tone-panel.danger {
  background: #fef4f4;
  border-color: #f6dcdc;
}

.detail-tone-panel.warning {
  background: #fffaf0;
  border-color: #f6e7c8;
}

.detail-tone-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.detail-tone-panel.success .detail-tone-panel-header {
  color: #176b45;
}

.detail-tone-panel.danger .detail-tone-panel-header {
  color: var(--danger);
}

.detail-tone-panel.warning .detail-tone-panel-header {
  color: #8a5a00;
}

.detail-mini-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.detail-mini-field:not(:last-child) {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.detail-mini-field span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.detail-mini-field strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
}

.detail-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff8e1;
  color: #8a5b00;
  border: 1px solid #f4e3ab;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  margin-top: 14px;
}

.detail-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 32px 16px;
  border: 1.5px dashed #dde3ea;
  border-radius: 12px;
  background: #fafbfc;
}

.detail-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eef2f7;
  color: var(--muted);
  margin-bottom: 4px;
}

.detail-empty-state strong {
  font-size: 14px;
}

.detail-empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  max-width: 360px;
}

.detail-timeline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

.detail-timeline-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c7cdd5;
}

.detail-timeline-item.done {
  color: #22c7bf;
}

.detail-timeline-item div {
  display: flex;
  flex-direction: column;
}

.detail-timeline-item span {
  color: var(--muted);
  font-size: 11px;
}

.detail-timeline-item strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.detail-progress {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef1f5;
}

.detail-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}

.detail-progress-top strong {
  color: var(--accent);
}

.detail-progress-track {
  height: 8px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.detail-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c7bf, #176b5b);
}

.detail-progress-caption {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 860px) {
  .detail-field-grid,
  .detail-timeline-grid,
  .detail-two-col {
    grid-template-columns: 1fr;
  }

  .detail-two-col.with-arrow {
    grid-template-columns: 1fr;
  }

  .detail-address-arrow {
    transform: rotate(90deg);
    justify-content: center;
    padding: 4px 0;
  }
}

.empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.toast {
  position: fixed;
  right: 24px;
  top: 88px;
  z-index: 50;
  max-width: 360px;
  border: 1px solid #bedbd4;
  border-radius: 8px;
  background: #effaf7;
  color: #164e43;
  box-shadow: var(--shadow);
  padding: 12px 14px;
}

.error {
  border-color: #f0b8b2;
  background: #fff5f4;
  color: var(--danger);
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.inline-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 360px;
  margin: 4px 0;
}

.inline-edit input {
  width: 100px;
}

.negative {
  color: var(--danger);
}

body.public-layout {
  background: #f3f6f9;
}

body.public-layout .app-topbar,
body.public-layout .sidebar,
body.public-layout .sidebar-toggle-floating {
  display: none !important;
}

body.public-layout .app-shell,
body.public-layout.sidebar-collapsed .app-shell {
  margin-left: 0;
  padding: 0;
}

.public-request-page {
  min-height: 100vh;
  background: #f3f6f9;
  color: #17212b;
}

.public-request-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #d8e1ea;
  background: #ffffff;
  padding: 18px clamp(18px, 4vw, 48px);
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0e3554;
}

.public-request-header h1 {
  margin: 0;
  color: #102a43;
  font-size: 24px;
}

.public-request-header p {
  margin: 4px 0 0;
  color: #526171;
}

.public-request-container {
  width: min(1100px, calc(100% - 32px));
  margin: 28px auto;
}

.public-stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.public-stepper button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #cfd9e3;
  border-radius: 8px;
  background: #ffffff;
  color: #526171;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.public-stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.public-stepper span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #bfd0df;
  background: #f6f9fc;
  color: #31566f;
  font-weight: 700;
}

.public-stepper strong {
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-stepper .active {
  border-color: #2d6f9f;
  box-shadow: 0 0 0 2px rgba(45, 111, 159, 0.12);
}

.public-stepper .active span,
.public-stepper .done span {
  border-color: #2d6f9f;
  background: #2d6f9f;
  color: #ffffff;
}

.public-card {
  border: 1px solid #d8e1ea;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  padding: clamp(18px, 3vw, 28px);
}

.public-card-header {
  margin-bottom: 18px;
}

.public-card-header h2,
.public-success-card h2 {
  margin: 0;
  color: #102a43;
  font-size: 26px;
}

.public-card-header p,
.public-success-card p,
.public-request-footer {
  color: #5e6b78;
}

.public-choice-grid,
.public-form-grid,
.public-confirm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.public-choice {
  border: 1px solid #cfd9e3;
  border-radius: 10px;
  background: #ffffff;
  padding: 18px;
  text-align: left;
  cursor: pointer;
}

.public-choice strong {
  display: block;
  color: #102a43;
  font-size: 17px;
  margin-bottom: 8px;
}

.public-choice span {
  color: #5e6b78;
}

.public-choice.selected {
  border-color: #2d6f9f;
  background: #f1f7fc;
  box-shadow: 0 0 0 2px rgba(45, 111, 159, 0.12);
}

.public-form-grid label,
.public-lookup-row label {
  display: grid;
  gap: 7px;
  color: #415365;
  font-weight: 650;
}

.public-form-grid input,
.public-form-grid select,
.public-form-grid textarea,
.public-lookup-row input,
.public-schedule-table input,
.public-schedule-table select {
  width: 100%;
  border: 1px solid #cbd7e3;
  border-radius: 8px;
  background: #ffffff;
  color: #17212b;
  padding: 11px 12px;
}

.public-form-grid textarea {
  min-height: 94px;
  resize: vertical;
}

.public-form-grid input:focus,
.public-form-grid select:focus,
.public-form-grid textarea:focus,
.public-lookup-row input:focus,
.public-schedule-table input:focus,
.public-schedule-table select:focus,
.public-stepper button:focus,
.public-choice:focus,
.public-actions button:focus {
  outline: 3px solid rgba(45, 111, 159, 0.22);
  outline-offset: 2px;
}

.public-lookup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}

.public-error,
.public-warning {
  border: 1px solid #f0b8b2;
  border-radius: 8px;
  background: #fff5f4;
  color: #b42318;
  padding: 10px 12px;
  margin: 12px 0 0;
}

.public-warning {
  border-color: #f2d49b;
  background: #fff8e8;
  color: #7a4a10;
}

.public-summary-card,
.public-summary-section {
  border: 1px solid #d8e1ea;
  border-radius: 9px;
  background: #f8fafc;
  padding: 14px;
  margin-top: 14px;
}

.public-summary-card dl,
.public-summary-section dl {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.public-summary-card dl div,
.public-summary-section dl div {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  border-top: 1px solid #d8e1ea;
  padding-top: 8px;
}

.public-summary-section h3 {
  margin: 0;
  color: #102a43;
}

.public-summary-section dt {
  color: #647385;
}

.public-summary-section dd,
.public-summary-card dd {
  margin: 0;
  color: #17212b;
  font-weight: 650;
}

.public-table-wrap {
  overflow-x: auto;
  border: 1px solid #d8e1ea;
  border-radius: 9px;
  margin-bottom: 12px;
}

.public-schedule-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.public-schedule-table th,
.public-schedule-table td {
  border-bottom: 1px solid #d8e1ea;
  padding: 10px;
  text-align: left;
}

.public-schedule-table th {
  background: #f6f9fc;
  color: #415365;
}

.public-total-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.public-total-grid div {
  border: 1px solid #d8e1ea;
  border-radius: 9px;
  background: #f8fafc;
  padding: 14px;
}

.public-total-grid span {
  display: block;
  color: #647385;
  margin-bottom: 6px;
}

.public-total-grid strong {
  color: #102a43;
  font-size: 18px;
}

.public-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  color: #17212b;
  font-weight: 650;
}

.public-confirm-check input {
  margin-top: 3px;
}

.public-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #d8e1ea;
  margin-top: 24px;
  padding-top: 18px;
}

.public-actions.only {
  justify-content: center;
}

.public-request-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0 4px;
}

.public-success-card {
  text-align: center;
}

.public-success-mark {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: #e8f6ef;
  color: #176b5b;
  font-size: 28px;
  font-weight: 800;
  margin: 0 auto 14px;
}

@media (max-width: 980px) {
  .app-topbar {
    display: none;
  }

  .sidebar {
    display: flex;
    width: 260px;
    box-shadow: 16px 0 30px rgba(16, 24, 40, 0.18);
  }

  .app-shell {
    margin-left: 0;
    padding: 68px 18px 18px;
  }

  body.sidebar-collapsed .sidebar {
    width: 260px;
    transform: translateX(-100%);
  }

  body.sidebar-collapsed .app-shell {
    margin-left: 0;
  }

  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .nav-section h2,
  body.sidebar-collapsed .sidebar nav a span {
    display: block;
  }

  body.sidebar-collapsed .side-nav {
    align-items: stretch;
  }

  body.sidebar-collapsed .sidebar nav a {
    width: auto;
    height: auto;
    justify-content: flex-start;
    padding: 8px 12px;
  }

  body.sidebar-collapsed .sidebar nav a::before {
    content: none;
  }

  body.sidebar-collapsed .sidebar-toggle,
  .sidebar-toggle {
    position: fixed;
    top: 18px;
    left: 18px;
    bottom: auto;
    background: #13201d;
    box-shadow: var(--shadow);
  }

  .sidebar .sidebar-toggle {
    display: none;
  }

  .sidebar-toggle-floating {
    display: inline-grid;
    z-index: 6;
  }

  .toolbar,
  .grid,
  .grid.three,
  .item-row,
  .totals-bar,
  .summary-grid,
  .workflow-status-grid,
  .batch-wizard-stepper,
  .confirm-grid,
  .detail-list {
    grid-template-columns: 1fr;
  }

  .page-header,
  .workflow-header,
  .next-action-panel,
  .timeline-row {
    display: block;
  }

  .page-header .actions,
  .workflow-actions {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .action-menu[open] div {
    left: 0;
    right: auto;
  }

  table {
    min-width: 900px;
  }

  .card {
    overflow-x: auto;
  }

  .public-request-header,
  .public-choice-grid,
  .public-form-grid,
  .public-confirm-grid,
  .public-total-grid {
    grid-template-columns: 1fr;
  }

  .public-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-lookup-row {
    grid-template-columns: 1fr;
  }

  .public-actions,
  .public-request-footer {
    display: grid;
  }

  .public-actions .btn {
    width: 100%;
  }
}

/* ---- Attendance (Davomat) ---- */

.attendance-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}

.attendance-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.attendance-toolbar select,
.attendance-toolbar input {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}

.attendance-toolbar-spacer {
  flex: 1 1 auto;
}

.attendance-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.attendance-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  white-space: nowrap;
}

.attendance-table th,
.attendance-table td {
  border: 1px solid var(--line);
  padding: 5px 7px;
  text-align: center;
}

.attendance-table th.attendance-col-name,
.attendance-table td.attendance-col-name {
  text-align: left;
  white-space: normal;
  min-width: 160px;
}

.attendance-table th.attendance-col-position,
.attendance-table td.attendance-col-position {
  text-align: left;
  white-space: normal;
  min-width: 130px;
}

.attendance-table thead th {
  background: var(--surface-soft);
  font-weight: 700;
  color: #465563;
}

.attendance-dept-row td {
  background: #eaf1ff;
  color: #1f3a63;
  font-weight: 700;
  text-align: left;
}

.attendance-day-cell {
  cursor: pointer;
  min-width: 42px;
}

.attendance-day-cell:hover {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.attendance-day-cell.on_time {
  background: #e8f7ef;
  color: #176b45;
}

.attendance-day-cell.minor {
  background: #fff8e1;
  color: #8a6d00;
}

.attendance-day-cell.moderate {
  background: #ffe9d1;
  color: #9a4b00;
}

.attendance-day-cell.major,
.attendance-day-cell.absent {
  background: #fdeceb;
  color: #b42318;
}

.attendance-day-cell.no_data {
  background: var(--surface-soft);
  color: var(--muted);
}

/* Excused / leave statuses. Deliberately outside the yellow-orange-red
   lateness ramp above so an excused day never reads as a problem. */
.attendance-day-cell.late_excused {
  background: #eaf3ff;
  color: #1f5fae;
}

.attendance-day-cell.study_leave {
  background: #f0ecfb;
  color: #5b3ec8;
}

.attendance-day-cell.labor_leave {
  background: #e6f7f5;
  color: #14706a;
}

.attendance-day-cell.unpaid_leave {
  background: #eef2f7;
  color: #44566b;
}

.attendance-day-cell.sick_leave {
  background: #fdeef6;
  color: #a03071;
}

.attendance-day-cell.business_trip {
  background: #e8eaf6;
  color: #37419e;
}

/* Letter codes (Ўқув, Меҳнат, Бс...) are wider than an HH:MM stamp — shrink
   them so a leave day can't stretch the whole day column. */
.attendance-day-cell.attendance-day-code {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -0.2px;
}

.attendance-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  border-radius: 6px;
  padding: 2px 6px;
  font-weight: 700;
}

.attendance-grade.grade-A {
  background: #e8f7ef;
  color: #176b45;
}

.attendance-grade.grade-B {
  background: #eaf3ff;
  color: #1f5fae;
}

.attendance-grade.grade-C {
  background: #fff8e1;
  color: #8a6d00;
}

.attendance-grade.grade-D {
  background: #ffe9d1;
  color: #9a4b00;
}

.attendance-grade.grade-E {
  background: #fdeceb;
  color: #b42318;
}

.attendance-panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.attendance-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.attendance-panel h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--accent-dark);
}

.attendance-panel ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
}

.attendance-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.attendance-panel table th,
.attendance-panel table td {
  border: 1px solid var(--line);
  padding: 4px 6px;
  text-align: left;
}

.attendance-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 6px;
}

@media (max-width: 1100px) {
  .attendance-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .attendance-panels {
    grid-template-columns: 1fr;
  }
}


/* ---- Ijro: fayl yuklash va biriktirmalar ---- */

.file-drop {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.file-drop.dragover {
  border-color: var(--accent);
  background: rgba(23, 107, 91, 0.06);
}

.file-drop.has-files {
  border-style: solid;
}

.file-drop-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-align: center;
}

.file-drop-label input[type="file"] {
  width: 100%;
  max-width: 340px;
  margin-top: 8px;
  font-size: 12px;
}

/* The upload form is one full-width column: a half-width drop zone next to a
   stretched submit button reads as a broken layout. */
#task-files-form {
  grid-template-columns: 1fr;
}

#task-form .attachment-grid {
  margin-bottom: 14px;
}

.file-drop-hint {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.file-drop-note {
  font-size: 11px;
  color: var(--muted);
}

.file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.file-chips:empty {
  margin-top: 0;
}

.file-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 12px;
  color: var(--text);
}

.file-chip em {
  font-style: normal;
  color: var(--muted);
  font-size: 11px;
}

.attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.attachment-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  max-width: 360px;
}

.attachment-card {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.attachment-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 104px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #f4f6f8;
  cursor: pointer;
  color: var(--muted);
}

.attachment-grid.compact .attachment-thumb {
  height: 72px;
}

.attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-thumb.is-file:hover {
  color: var(--accent);
}

.attachment-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  min-width: 0;
}

.attachment-card figcaption a {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-card figcaption a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.attachment-card figcaption span {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.62);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.attachment-card:hover .attachment-remove,
.attachment-remove:focus-visible {
  opacity: 1;
}

.attachment-remove:hover {
  background: var(--danger);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(9, 14, 22, 0.86);
}

.lightbox figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  max-height: 100%;
}

.lightbox img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
  background: #ffffff;
}

.lightbox figcaption {
  color: #e5e9ef;
  font-size: 13px;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* ---- Ijro: boshqaruv paneli, filtrlar va holat yo'lagi ---- */

/* Plain figure cards: a label and a number, no decoration. A real grid (the
   old flex row left a ragged last line) so every card shares the row evenly. */
.kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
  margin: 4px 0 20px;
}

.kpi-card {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.kpi-card[data-nav] {
  cursor: pointer;
}

.kpi-card[data-nav]:hover {
  border-color: var(--accent);
}

.kpi-card span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

.kpi-card strong {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
}

/* Only the figures that mean "act on this" carry colour. */
.kpi-card.warn strong {
  color: var(--danger);
}

.kpi-card.good strong {
  color: var(--accent);
}

.task-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.task-chip {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.task-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.task-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.ops-date-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.ops-date-filter input {
  /* Date inputs stretch to fill a flex row otherwise, pushing the rest of the
     filters off the edge. */
  width: 150px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12.5px;
}

.task-sort-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.task-sort-btn:hover {
  color: var(--accent);
}

.task-sort-btn.active {
  color: var(--accent);
}

.task-sort-arrow {
  margin-left: 3px;
}

.task-panel-grid,
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.task-panel-grid.two,
.panel-grid.two {
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.task-panel-grid > .card,
.panel-grid > .card {
  margin: 0;
}

/* ---- gorizontal ustunli diagramma ---- */

.task-bars,
.stat-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.task-bar-row,
.stat-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 36px;
  align-items: center;
  gap: 10px;
}

.task-bar-label,
.stat-bar-label {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-bar-track,
.stat-bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  overflow: hidden;
}

.task-bar-fill,
.stat-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  min-width: 2px;
  transition: width 0.3s ease;
}

.task-bar-fill.status-new,
.stat-bar-fill.status-new { background: #64748b; }
.task-bar-fill.status-accepted,
.stat-bar-fill.status-accepted { background: #0ea5e9; }
.task-bar-fill.status-in_progress,
.stat-bar-fill.status-in_progress { background: #d97706; }
.task-bar-fill.status-done,
.stat-bar-fill.status-done { background: #16a34a; }
.task-bar-fill.status-verified,
.stat-bar-fill.status-verified { background: var(--accent); }
.task-bar-fill.status-rejected,
.stat-bar-fill.status-rejected { background: var(--danger); }
.task-bar-fill.priority-low,
.stat-bar-fill.priority-low { background: #94a3b8; }
.task-bar-fill.priority-medium,
.stat-bar-fill.priority-medium { background: #0ea5e9; }
.task-bar-fill.priority-high,
.stat-bar-fill.priority-high { background: #d97706; }
.task-bar-fill.priority-urgent,
.stat-bar-fill.priority-urgent { background: var(--danger); }

.task-bar-value,
.stat-bar-value {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

/* ---- oylik dinamika ---- */

.task-trend,
.stat-trend {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
  position: relative;
  padding-bottom: 34px;
}

.task-trend-col,
.stat-trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}

.task-trend-bars,
.stat-trend-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 100%;
  flex: 1;
}

.task-trend-bar,
.stat-trend-bar {
  width: 40%;
  max-width: 18px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

.task-trend-bar.completed,
.stat-trend-bar.completed {
  background: #16a34a;
}

.task-trend-label,
.stat-trend-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.task-trend-legend,
.stat-trend-legend {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--muted);
}

.task-trend-legend span,
.stat-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.task-trend-legend i,
.stat-trend-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
}

.task-trend-legend i.completed,
.stat-trend-legend i.completed {
  background: #16a34a;
}

/* ---- panel ro'yxatlari ---- */

.task-mini-list,
.mini-list {
  display: flex;
  flex-direction: column;
}

.task-mini-row,
.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
}

.task-mini-row:last-child,
.mini-row:last-child {
  border-bottom: 0;
}

.task-mini-row:hover,
.mini-row:hover {
  background: var(--surface-soft);
}

.task-mini-main,
.mini-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.task-mini-main strong,
.mini-main strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-mini-main span,
.mini-main span {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-mini-meta,
.mini-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.task-mini-days,
.mini-days {
  font-size: 11.5px;
  color: var(--muted);
}

.task-mini-days.late,
.mini-days.late {
  color: var(--danger);
  font-weight: 650;
}

/* ---- holat yo'lagi (pipeline) ---- */

.task-pipeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow-x: auto;
}

.task-pipeline-step {
  position: relative;
  flex: 1;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}

/* The connector sits behind the dots and stops at the last step. */
.task-pipeline-step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}

.task-pipeline-step:first-child::before {
  display: none;
}

.task-pipeline-step.done::before,
.task-pipeline-step.current::before {
  background: var(--accent);
}

.task-pipeline.rejected .task-pipeline-step.current::before,
.task-pipeline.rejected .task-pipeline-step.step-rejected::before {
  background: var(--danger);
}

.task-pipeline-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
}

.task-pipeline-step.done .task-pipeline-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.task-pipeline-step.current .task-pipeline-dot {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.18);
}

.task-pipeline.rejected .task-pipeline-step.current .task-pipeline-dot {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18);
}

.task-pipeline-label {
  font-size: 12px;
  color: var(--muted);
}

.task-pipeline-step.done .task-pipeline-label,
.task-pipeline-step.current .task-pipeline-label {
  color: var(--text);
  font-weight: 650;
}

@media (max-width: 720px) {
  .task-bar-row,
  .stat-bar-row {
    grid-template-columns: 92px 1fr 30px;
  }

  .task-pipeline-step {
    min-width: 78px;
  }
}

/* ---- Ijro: holat paneli va amal oynasi ---- */

.task-action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border: 1px solid #bedbd4;
  border-radius: 10px;
  background: #effaf7;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.task-action-panel.waiting {
  border-color: var(--line);
  background: var(--surface-soft);
}

.task-action-panel.closed {
  border-color: var(--line);
  background: var(--surface-soft);
}

.task-action-copy {
  min-width: 240px;
  flex: 1;
}

.task-action-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.task-action-copy strong {
  display: block;
  font-size: 19px;
  color: #133d35;
}

.task-action-panel.waiting .task-action-copy strong,
.task-action-panel.closed .task-action-copy strong {
  color: var(--text);
}

.task-action-copy p {
  margin: 6px 0 0;
  max-width: 62ch;
  color: #2f5c53;
  font-size: 13px;
  line-height: 1.45;
}

.task-action-panel.waiting .task-action-copy p,
.task-action-panel.closed .task-action-copy p {
  color: var(--muted);
}

.task-action-copy .task-action-note {
  font-style: italic;
}

/* ---- amal oynasi ---- */

.app-dialog-panel {
  width: min(520px, 100%);
}

.app-dialog-intro {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
}

.app-dialog-field {
  display: grid;
  gap: 6px;
}

.app-dialog-field input[type="text"],
.app-dialog-field textarea {
  width: 100%;
  min-height: 92px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 400;
  resize: vertical;
}

.app-dialog-field input[type="text"]:focus,
.app-dialog-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Oyna ichidagi xato satri: tugmaning yonida turadi va tuzatilgunga qadar
   yo'qolmaydi -- toast ekranning narigi burchagida 3.6 soniyada o'chardi. */
.modal-error {
  margin: 0 20px 12px;
  border: 1px solid #f0c3c3;
  border-radius: 6px;
  background: #fdf2f2;
  color: var(--danger);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}

/* `hidden` atributi UA uslubidan keladi va sahifadagi har qanday `display`
   qoidasi uni bosib ketadi -- yashirilgan blok ko'rinib turaverardi. */
[hidden] {
  display: none !important;
}

.price-vat-toggle {
  margin-bottom: 4px;
}

.price-hint {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.acceptance-choices {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.acceptance-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 10px 12px;
  cursor: pointer;
}

.acceptance-choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(15, 107, 82, 0.12);
}

.acceptance-choice input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
}

.acceptance-choice small {
  display: block;
  color: var(--muted);
  font-weight: 500;
}

.field-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(200, 60, 60, 0.14);
}

.app-dialog-error {
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
}

.app-dialog-subject {
  margin: 0;
  padding: 9px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  word-break: break-word;
}

/* ---- Yetkazib berish: bo'lim ko'rinishi ---- */

/* Batch and trip statuses grouped by what they mean for a dispatcher:
   grey = not started, blue = being prepared, amber = moving, green = finished,
   red = needs attention. */
.stat-bar-fill.batch-planned,
.stat-bar-fill.batch-cancelled,
.stat-bar-fill.trip-not_assigned,
.stat-bar-fill.trip-cancelled { background: #94a3b8; }

.stat-bar-fill.batch-supplier_preparing,
.stat-bar-fill.batch-ready_for_loading,
.stat-bar-fill.batch-waiting_payment,
.stat-bar-fill.trip-carrier_search,
.stat-bar-fill.trip-carrier_assigned,
.stat-bar-fill.trip-vehicle_assigned { background: #0ea5e9; }

.stat-bar-fill.batch-loading,
.stat-bar-fill.batch-loaded,
.stat-bar-fill.batch-in_transit,
.stat-bar-fill.batch-arrived,
.stat-bar-fill.batch-unloading,
.stat-bar-fill.trip-loading,
.stat-bar-fill.trip-loaded,
.stat-bar-fill.trip-in_transit,
.stat-bar-fill.trip-arrived,
.stat-bar-fill.trip-unloading { background: #d97706; }

.stat-bar-fill.batch-accepted,
.stat-bar-fill.batch-completed,
.stat-bar-fill.trip-delivered,
.stat-bar-fill.trip-accepted,
.stat-bar-fill.trip-completed { background: #16a34a; }

.stat-bar-fill.batch-issue,
.stat-bar-fill.batch-quantity_difference,
.stat-bar-fill.batch-documents_pending,
.stat-bar-fill.trip-issue { background: var(--danger); }

.stat-trend-bar.delivered { background: #16a34a; }
.stat-trend-legend i.delivered { background: #16a34a; }

/* Fleet cards */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.fleet-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid #94a3b8;
  border-radius: 8px;
  background: var(--surface);
}

.fleet-card.active { border-left-color: #16a34a; }
.fleet-card.maintenance { border-left-color: var(--warning); }

.fleet-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.fleet-card-plate {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.fleet-card span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The section landing page keeps its cards a little wider than Ijro's. */
.module-overview .kpi-cards {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.module-overview .page-header {
  margin-bottom: 4px;
}

.section-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12.5px;
}

.section-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---- Bo'lim ko'rinishi: filtrlar va guruh sarlavhalari ---- */

.overview-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.overview-filters .task-quick-filters {
  margin-bottom: 0;
}

.overview-filter-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  /* Don't let the flex parent squeeze the controls onto a second line while
     there is still free space beside the period chips. */
  flex: 0 0 auto;
}

.overview-filter-form select {
  height: 32px;
  max-width: 168px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12.5px;
}

.overview-group-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 2px;
  font-size: 15px;
  font-weight: 700;
}

.overview-group-note {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

.module-overview .section-note {
  margin: 0 0 10px;
}

.module-overview .kpi-cards {
  margin-top: 0;
}

/* ---- Bo'lim ko'rinishi (Yetkazib berish) ---- */

.overview-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 16px;
}

.overview-head h1 {
  margin: 0;
  font-size: 24px;
}

.overview-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.overview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.overview-toolbar-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.overview-toolbar-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.overview-toolbar-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

.overview-toolbar-filters select,
.overview-toolbar-filters input[type="date"] {
  height: 34px;
  max-width: 168px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12.5px;
}

.overview-date-sep {
  color: var(--muted);
}

.overview-toolbar-filters .ops-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  border-radius: 8px;
}

/* ---- headline cards ---- */

.headline-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.headline-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.headline-card[data-nav] {
  cursor: pointer;
}

.headline-card[data-nav]:hover {
  border-color: var(--accent);
}

.headline-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--accent);
}

.headline-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.headline-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

.headline-copy strong {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
}

.headline-note {
  color: var(--muted);
  font-size: 11.5px;
}

/* ---- operatsion nazorat ---- */

.ops-monitor {
  margin-bottom: 16px;
}

.ops-monitor-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ops-monitor-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.ops-monitor-item:last-child {
  border-right: 0;
}

.ops-monitor-item:hover {
  background: var(--surface-soft);
}

.ops-monitor-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
}

/* Colour only kicks in when the counter is non-zero -- a red icon above a
   zero would read as a problem that isn't there. */
.ops-monitor-item.warn .ops-monitor-icon {
  border-color: #f3c9c4;
  color: var(--danger);
}

.ops-monitor-item.warn strong {
  color: var(--danger);
}

.ops-monitor-copy {
  display: grid;
  gap: 1px;
}

.ops-monitor-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.ops-monitor-copy strong {
  font-size: 21px;
  font-weight: 700;
}

/* ---- charts ---- */

.chart-block {
  position: relative;
}

.chart-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--accent-dark);
}

.chart-legend i.delivered {
  background: #22b573;
}

.chart-axis-title {
  color: var(--muted);
  font-size: 11.5px;
  margin-bottom: 2px;
}

.chart-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-tick {
  fill: var(--muted);
  font-size: 10px;
}

.chart-bar.created {
  fill: var(--accent-dark);
}

.chart-bar.delivered {
  fill: #22b573;
}

/* ---- status ring ---- */

.ring-block {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.ring-chart {
  position: relative;
  width: 148px;
  flex: 0 0 auto;
}

.ring-chart svg {
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}

.ring-track {
  stroke: #eef2f5;
}

.ring-arc.delivered {
  stroke: #22b573;
}

.ring-arc.unfinished {
  stroke: #cbd5e1;
}

.ring-arc.problem {
  stroke: var(--danger);
}

.ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1px;
  pointer-events: none;
}

.ring-center span {
  color: var(--muted);
  font-size: 12px;
}

.ring-center strong {
  font-size: 24px;
  font-weight: 700;
}

.ring-legend {
  display: grid;
  gap: 12px;
  flex: 1 1 200px;
  min-width: 180px;
}

.ring-legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto 48px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.ring-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
}

.ring-dot.delivered {
  background: #22b573;
}

.ring-dot.problem {
  background: var(--danger);
}

.ring-percent {
  color: var(--muted);
  font-size: 12.5px;
  text-align: right;
}

/* ---- card footer link + quick actions ---- */

.card-footer-link {
  border-top: 1px solid var(--line);
  padding: 10px 16px;
}

.card-footer-link .link-btn {
  font-weight: 650;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  background: none;
  color: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.quick-action:last-child {
  border-right: 0;
}

.quick-action:hover {
  background: var(--surface-soft);
  color: var(--accent);
}

.quick-action-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--accent);
}

@media (max-width: 900px) {
  .ops-monitor-item,
  .quick-action {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ---- ro'yxat ustidagi qidiruv maydoni ---- */

/* Qidiruvli tanlov: bitta maydon, bosilganda ichida qidiruvi bor ro'yxat
   ochiladi. Asl <select> shu yerda qoladi va qiymatni saqlaydi -- u ko'zdan
   yashiriladi, lekin display:none qilinmaydi: majburiy maydonni brauzer
   fokuslay olishi kerak. */
.combo {
  position: relative;
  min-width: 0;
}

/* Kartochka burchaklarini yumaloqlash uchun `overflow: hidden` qo'yilgan --
   u ochilgan ro'yxatni ham kesib tashlardi. Ichida combo bo'lgan kartochka
   kesmaydi; burchaklar baribir joyida qoladi, chunki ichidagi hech narsa
   ulardan chiqmaydi. */
.card:has(.combo),
.modal-panel:has(.combo),
.ops-table-card:has(.combo) {
  overflow: visible;
}

.combo-native {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.combo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  padding: 8px 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.combo-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.combo-trigger.is-empty .combo-value {
  color: var(--muted);
}

.combo-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-caret {
  flex: 0 0 auto;
  color: var(--muted);
}

.combo-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 16px 34px rgba(16, 24, 40, 0.16);
  padding: 8px;
}

.combo-search {
  width: 100%;
  min-height: 34px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
}

.combo-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.combo-list {
  max-height: 260px;
  overflow-y: auto;
}

.combo-group {
  padding: 8px 10px 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.combo-option {
  display: block;
  width: 100%;
  border: 0;
  /* Qatorlar orasida ingichka chiziq: uzun ro'yxatda qaysi nom qayerda
     tugashini ajratib turadi. Oxirgisida chiziq qolmaydi. */
  border-bottom: 1px solid var(--line);
  border-radius: 5px;
  background: none;
  color: inherit;
  padding: 9px 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.combo-option:last-child {
  border-bottom: 0;
}

/* Guruh sarlavhasidan oldingi qator chizig'i ortiqcha: sarlavhaning o'zi
   ajratib turadi. */
.combo-group + .combo-option {
  border-top: 0;
}

.combo-option:hover,
.combo-option.is-active {
  background: var(--surface-soft);
}

.combo-option.is-chosen {
  color: var(--accent);
  font-weight: 700;
}

.combo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

.select-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.select-search input[type="search"] {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 400;
}

.select-search input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.select-search-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- buyurtma: "mahsulot qachon kerak?" ---- */

.order-date-field {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.order-date-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.order-date-head .helper-text {
  margin: 0;
}

.order-date-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.date-note {
  font-size: 12.5px;
  color: var(--muted);
}

.date-note.ok {
  color: var(--accent);
  font-weight: 600;
}

.date-note.warn {
  color: var(--danger);
  font-weight: 600;
}

/* ---- дд.мм.гггг sana maydoni ---- */

.ru-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ru-date-text {
  width: 118px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  font-size: 13.5px;
  letter-spacing: 0.2px;
}

.ru-date-text:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.ru-date-text.invalid {
  border-color: var(--danger);
  color: var(--danger);
}

/* Kalendar tugmasi va o'zimiz chizadigan oyna */
.ru-date {
  position: relative;
}

.ru-date-button {
  width: 34px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: #677381;
  cursor: pointer;
}

.ru-date-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ru-date-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 258px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(16, 32, 48, 0.16);
}

.ru-date-pop[hidden] { display: none; }

.ru-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ru-date-head strong {
  font-size: 14px;
}

.ru-date-nav {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
}

.ru-date-nav:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ru-date-week,
.ru-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.ru-date-week span {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  padding-bottom: 4px;
}

.ru-day {
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}

.ru-day:hover:not(:disabled) { background: #eef2f5; }
.ru-day.outside { color: #b6c0cb; }
.ru-day:disabled { color: #d5dce3; cursor: default; }

.ru-day.today {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.ru-day.selected {
  background: var(--accent);
  color: #fff;
}

.ru-date-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* ---- Amallar tarixi ---- */

.audit-target {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.audit-target strong {
  font-size: 13px;
}

.audit-target span {
  color: var(--muted);
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}

/* A failed attempt is evidence too, but it must not read like a completed
   action -- hence the muted row. */
.ops-table tr.audit-failed td {
  background: #fdf6f5;
}


.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- Shartnomalar ro'yxati (alohida dizayn) ----
   Scoped to this page on purpose: opsListPage is shared by a dozen other
   lists, so restyling it would silently redesign all of them. */

.contracts-list-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.clist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 18px;
}

.clist-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.clist-title h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.clist-count {
  padding: 5px 12px;
  border-radius: 999px;
  background: #eef2f5;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.clist-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clist-head-actions .btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
}

.clist-create {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---- tabs ---- */

.clist-tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.clist-tabs button {
  position: relative;
  padding: 0 0 12px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.clist-tabs button:hover {
  color: var(--text);
}

.clist-tabs button.active {
  color: var(--text);
  font-weight: 700;
}

.clist-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

/* ---- filter card ---- */

.clist-filters {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 18px 20px 12px;
  margin-bottom: 18px;
}

.clist-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.clist-field {
  display: grid;
  gap: 6px;
  flex: 1 1 150px;
  min-width: 140px;
}

.clist-field-search {
  position: relative;
  flex: 2 1 320px;
}

.clist-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.clist-field input,
.clist-field select {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  width: 100%;
}

.clist-field-search input {
  padding-left: 40px;
}

.clist-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
}

.clist-field input:focus,
.clist-field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.clist-apply {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.clist-apply:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.clist-filter-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}

.clist-filter-foot .link-btn {
  font-size: 13.5px;
  font-weight: 600;
}

/* ---- table ---- */

.clist-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: auto;
}

.clist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.clist-table th {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.clist-table td {
  padding: 15px 18px;
  border-bottom: 1px solid #eef2f5;
  vertical-align: middle;
  color: var(--text);
}

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

.clist-table tbody tr:hover td {
  background: #f6fbf9;
}

.clist-number {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.clist-number:hover {
  text-decoration: underline;
}

.clist-customer {
  min-width: 260px;
}

.clist-amount {
  font-weight: 700;
  white-space: nowrap;
}

/* ---- row actions ---- */

.clist-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.clist-icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.clist-icon-btn:hover {
  background: #eef2f5;
  color: var(--accent);
}

.clist-menu {
  position: relative;
}

.clist-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  display: grid;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
}

/* display:grid above beats the [hidden] attribute's own display:none, so every
   row menu rendered open until this was added. */
.clist-menu-list[hidden] {
  display: none;
}

.clist-menu-list button,
.clist-menu-list a {
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.clist-menu-list button:hover,
.clist-menu-list a:hover {
  background: var(--surface-soft);
  color: var(--accent);
}

/* ---- footer ---- */

.clist-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 2px 0;
}

.clist-range {
  color: var(--muted);
  font-size: 13.5px;
}

/* A payment past its due date. The row is tinted rather than only the chip:
   the number that matters is the amount, and it sits three columns away. */
.row-overdue > td {
  background: #fdf1ef;
}

.row-overdue > td:first-child {
  box-shadow: inset 3px 0 0 #d9534f;
}

/* ---- Xaridlar sahifasi: statistik kartalar, filtr paneli, chiplar ---- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0 18px;
}

.stat-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 16px;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface-soft) center / 22px 22px no-repeat;
}

/* Belgilar SVG bo'lib inline turadi: tashqi fayl ham, shrift ham kerak
   emas, rangi esa kartaning ma'nosiga qarab o'zgaradi. */
.stat-icon-cart {
  background-color: #e8f5f0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6b52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
}

.stat-icon-pulse {
  background-color: #e8f0fb;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fd0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>");
}

.stat-icon-bag {
  background-color: #e8f5f0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6b52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
}

.stat-icon-clock {
  background-color: #fdf3e3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c98a1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>");
}

.stat-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stat-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.stat-value {
  font-size: 22px;
  font-weight: 750;
  overflow-wrap: break-word;
}

.stat-hint {
  color: var(--muted);
  font-size: 11.5px;
}


/* Qidiruv chapda va keng: umumiy qoida uni o'ngga surib qo'yadi. */



.filter-anchor {
  position: relative;
}

.filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--accent);
  color: #ffffff;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
}

.filter-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: min(460px, 92vw);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
  padding: 16px;
}

.filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.filter-field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.filter-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.filter-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.filter-dash {
  color: var(--muted);
}

.filter-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.filter-panel-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.chip-select {
  position: relative;
  min-width: 0;
}

.chip-select > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 6px 10px;
  min-height: 34px;
  cursor: pointer;
  list-style: none;
}

.chip-select > summary::-webkit-details-marker {
  display: none;
}

.chip-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.chip-placeholder {
  color: var(--muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  background: var(--surface-soft);
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
}

.chip button,
.active-chip button {
  border: 0;
  background: none;
  color: var(--muted);
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.chip-caret {
  color: var(--muted);
}

.chip-menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.14);
  padding: 6px;
}

.chip-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
}

.chip-option:hover {
  background: var(--surface-soft);
}

.chip-option input {
  width: auto;
  min-height: 0;
  margin: 0;
}

.active-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.active-chip .chip-text > span {
  display: inline;
}

.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  padding: 5px 9px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Ustunlar kengligi ichidagi matnga qarab o'smasin. */




@media (max-width: 720px) {
  .filter-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* Hisoblangan TO qiymatlari kiritish maydonlaridan ajralib tursin -- ular
   tahrirlanmaydi, shunchaki natija. */
.service-position {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* Xulosadagi e'tibor talab qiladigan qator: slivga shubha yoki muddati
   o'tgan hujjat. Ranglar jadval ichida ham ko'rinib tursin. */
.ops-row-flagged td {
  background: #fdf3e3;
}

/* Faol emas nuqta ro'yxatda ko'rinadi, lekin ko'zga tashlanmaydi. */
.ops-row-muted td {
  opacity: 0.55;
}

/* ---- talabnomalar paneli ---- */

.chart-bar.rejected {
  fill: #d9534f;
}

.chart-legend i.rejected {
  background: #d9534f;
}

/* Ulushli qator: raqam bilan birga uning umumiy ulushi ham ko'rinadi --
   «Andijon 5 ta» bilan «Andijon 45%» boshqa-boshqa xulosaga olib keladi. */
.share-list {
  display: grid;
  gap: 12px;
}

.share-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 5px;
}

.share-head strong {
  white-space: nowrap;
}

.share-track {
  height: 7px;
  border-radius: 4px;
  background: var(--surface-soft, #eef2f6);
  overflow: hidden;
}

.share-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent-dark, #176b5b);
}

/* Diagramma butun kenglikka cho'zilsa, uning balandligi ham shuncha
   o'sadi -- 1400px li ekranda u yarim sahifani egallaydi. */
.chart-holder {
  max-width: 720px;
}

.dashboard-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.dashboard-columns > * {
  min-width: 0;
}

/* Filtr chizig'idagi umumiy `input` qoidasi дд.мм.гггг maydonining ikkala
   qismini ham kengaytirib yuborardi: matn katakchasi ham, kalendar tugmasi
   ham 150px dan keng bo'lib, yonma-yon ikkita bo'sh quti bo'lib ko'rinardi. */
.ops-search .ru-date-text {
  width: 118px;
  min-width: 0;
}

/* `.ops-search input { background: #ffffff }` -- qisqartma qoida bo'lgani
   uchun u kalendar tugmasining fon rasmini ham o'chirib yuborardi: tugma
   bo'sh oq kvadrat bo'lib qolar va yonidagi maydonga qo'yilgan katakcha
   kabi ko'rinardi. Rasm shu yerda qaytariladi. */
.ops-search .ru-date-picker {
  width: 34px;
  min-width: 0;
  background: var(--surface) center / 17px 17px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677381' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}

/* ---- ABZ boshqaruvi: KPI kartochkalari va holat taqsimoti ---- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.kpi-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

.kpi-icon.info { background: #e8eefb; color: #2c5cc5; }
.kpi-icon.success { background: #e8f6f1; color: #176b5b; }
.kpi-icon.warning { background: #fdf3e3; color: #8a5b12; }

.kpi-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.kpi-label {
  color: var(--muted);
  font-size: 12.5px;
}

.kpi-value {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.kpi-delta {
  display: inline-flex;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.kpi-delta.up { color: #176b5b; }
.kpi-delta.down { color: var(--danger); }

/* Holat taqsimoti */
.status-share {
  display: grid;
  gap: 8px;
}

.status-share-row {
  display: grid;
  grid-template-columns: 32px 1fr auto 56px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.status-share-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.status-share-icon.active { background: #e8f6f1; color: #176b5b; }
.status-share-icon.attention { background: #fdf3e3; color: #8a5b12; }
.status-share-icon.inactive { background: #fbeceb; color: #b42318; }
.status-share-icon.planned { background: #e8eefb; color: #2c5cc5; }

.status-share-percent {
  text-align: right;
  font-size: 13px;
}

.status-share-percent.active { color: #176b5b; }
.status-share-percent.attention { color: #8a5b12; }
.status-share-percent.inactive { color: var(--danger); }
.status-share-percent.planned { color: #2c5cc5; }

.status-share-total {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px 2px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.status-share-total strong { color: var(--text); }

/* Qatordagi amallar menyusi */
.row-menu { position: relative; }

.row-menu-trigger {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  width: 30px;
  height: 28px;
  cursor: pointer;
  color: var(--muted);
}

.row-menu-trigger:hover { border-color: var(--line-strong, #c2ccd4); color: var(--text); }

.row-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  display: grid;
  min-width: 168px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.16);
  padding: 5px;
}

.row-menu-panel button {
  border: 0;
  background: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

.row-menu-panel button:hover { background: var(--surface-soft); }
.row-menu-panel button.danger { color: var(--danger); }

.muted-line {
  color: var(--muted);
  font-size: 12.5px;
}

/* ---- ABZ boshqaruvi: sarlavha, xarita, filtr chizig'i ---- */

.page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 2px 0 18px;
}

.page-head-row .page-title h1 {
  margin: 0 0 4px;
}

.page-head-row .page-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.page-head-row .actions {
  display: flex;
  gap: 10px;
  flex: none;
}

/* Xarita va holat taqsimoti yonma-yon: mockupdagi kabi 2/3 va 1/3. */
.map-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 1100px) {
  .map-row { grid-template-columns: 1fr; }
}

.map-card {
  padding: 10px;
  overflow: hidden;
}

.points-map {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 10px;
  background: var(--surface-soft);
}

.map-card.tall .points-map {
  height: 560px;
}

.map-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.75);
}

/* Leaflet belgisining o'z foni bo'lmasin -- ichida faqat SVG turadi. */
.map-pin { background: none; border: 0; }

.map-popup {
  display: grid;
  gap: 3px;
  min-width: 190px;
  font-size: 12.5px;
}

.map-popup strong { font-size: 13.5px; }
.map-popup-status { font-weight: 600; }

/* Filtr chizig'i xaritadan keyin, o'z qatorida turadi. */
.points-filter {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 16px;
}

.points-filter .view-toggle { margin-left: auto; }

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}

.view-toggle-btn {
  border: 0;
  background: var(--surface);
  padding: 8px 16px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

.view-toggle-btn.active {
  background: var(--accent);
  color: #ffffff;
}

.points-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.page-size select {
  min-width: 0;
  width: auto;
  padding: 6px 8px;
}

.person-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.person-icon { color: var(--muted); flex: none; }

.ops-primary-link.accent { color: var(--accent); }

/* Filtr chizig'i bitta qatorda tursin. Umumiy `.ops-search` qoidasi
   maydonlarni kengaytiradi va «Mijoz» ro'yxati butun bo'sh joyni egallab,
   qolganini pastki qatorga surib yuborardi. */
.points-filter .ops-field {
  flex: 0 1 auto;
  min-width: 0;
}

.points-filter input,
.points-filter select {
  width: 100%;
  min-width: 0;
  max-width: 220px;
}

.points-filter .ops-field:first-child input {
  max-width: 260px;
}

/* ---- Unified list controls v2: compact management header + smart filters --- */

.ops-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 92px;
  margin-top: 10px;
  padding: 18px 22px;
  border: 1px solid #dce4e9;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.045);
}

.ops-list-heading {
  min-width: 0;
}

.ops-command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.ops-list-heading .ops-title-left {
  gap: 10px;
  flex-wrap: wrap;
}

.ops-list-heading h1 {
  margin: 0;
  color: #172633;
  font-size: 25px;
  font-weight: 760;
  letter-spacing: -0.025em;
}

.ops-list-heading p {
  margin: 5px 0 0;
  color: #718094;
  font-size: 13.5px;
}

.ops-title-count {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  max-width: min(520px, 50vw);
  overflow: hidden;
  border-radius: 999px;
  background: #f1f4f6;
  color: #4b5b6b;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px !important;
  border-radius: 8px !important;
  padding: 9px 17px !important;
  background: linear-gradient(180deg, #0aa99c, #008f85) !important;
  border-color: #008f85 !important;
  color: #ffffff !important;
  font-size: 13.5px;
  box-shadow: 0 3px 8px rgba(0, 143, 133, 0.2) !important;
}

.ops-create-btn > span {
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

.ops-list-head + .ops-tabs {
  min-height: 44px;
  margin: 8px 0 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.ops-list-head + .ops-tabs button {
  position: relative;
  flex: 0 0 auto;
}

.ops-list-head + .ops-tabs button.active::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  content: "";
}

.ops-search {
  display: block;
  width: 100%;
  margin: 10px 0 12px;
  padding: 14px 16px;
  border: 1px solid #dce4e9;
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(16, 24, 40, 0.04);
}

.ops-search-main {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.ops-searchbox {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 44px;
  border: 1px solid #cfd9df;
  border-radius: 8px;
  background: #ffffff;
  color: #657487;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ops-searchbox:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.13);
}

.ops-searchbox-icon {
  display: inline-grid;
  flex: 0 0 42px;
  place-items: center;
  color: #52677a;
}

.ops-searchbox .ops-field {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.ops-searchbox .ops-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ops-searchbox .ops-field input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 8px 5px;
  color: #263746;
}

.ops-searchbox .ops-field input:focus {
  border: 0;
  box-shadow: none;
}

.ops-searchbox kbd {
  flex: 0 0 auto;
  margin-right: 9px;
  border: 0;
  border-radius: 5px;
  background: #f2f5f7;
  color: #607083;
  padding: 3px 7px;
  font: 600 12px/1.2 inherit;
}

.ops-filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid #cfd9df;
  border-radius: 8px;
  background: #ffffff;
  color: #2c3c4b;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.ops-filter-toggle:hover,
.ops-filter-toggle[aria-expanded="true"] {
  border-color: #84bdb4;
  background: #f1f9f7;
  color: var(--accent-dark);
}

.ops-filter-count {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 999px;
  background: #0aa99c;
  color: #ffffff;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 750;
}

.ops-search-result {
  justify-self: end;
  color: #68788b;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ops-advanced-filters {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf1f3;
}

.ops-advanced-filters[hidden] {
  display: none;
}

.ops-advanced-filters .ops-filter-fields {
  display: flex;
  align-items: end;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.ops-advanced-filters .ops-field {
  max-width: 280px;
}

.ops-active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  flex-wrap: wrap;
}

.ops-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  border: 1px solid #cde7e2;
  border-radius: 999px;
  background: #eaf6f3;
  color: #176b5b;
  padding: 4px 9px;
  font-size: 12px;
  cursor: pointer;
}

.ops-active-filter strong {
  font-weight: 700;
}

.ops-active-filter:hover {
  border-color: #9dcec4;
  background: #dff1ed;
}

.ops-clear-all {
  min-height: 29px;
  border: 0;
  background: transparent;
  color: #68788b;
  padding: 4px 7px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.ops-clear-all:hover {
  color: var(--danger);
}

.ops-advanced-filters .ops-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.ops-filter-clear,
.ops-advanced-filters .ops-tool-btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 8px;
  padding: 8px 13px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.ops-filter-clear {
  border: 1px solid transparent;
  background: transparent;
  color: #68788b;
}

.ops-advanced-filters .ops-tool-btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

@media (max-width: 900px) {
  .ops-list-head {
    align-items: flex-start;
  }

  .ops-search-main {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ops-search-result {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .ops-advanced-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .ops-advanced-filters .ops-field {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .ops-list-head {
    flex-direction: column;
    padding: 15px;
  }

  .ops-list-head .ops-command-actions,
  .ops-create-btn {
    width: 100%;
  }

  .ops-search {
    padding: 11px;
  }

  .ops-search-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .ops-filter-toggle,
  .ops-search-result {
    width: 100%;
  }

  .ops-filter-toggle {
    justify-content: flex-start;
  }
}

/* ---- Xaritadan nuqta tanlash --------------------------------------------- */

.map-picker {
  display: grid;
  gap: 12px;
}

.map-picker-canvas {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.map-picker-map {
  height: 380px;
  width: 100%;
  background: var(--surface-soft);
}

/* Qidiruv va tugma xarita ustida turadi. Leaflet o'z boshqaruvlarini 400 --
   1000 oralig'ida chizadi, shuning uchun ular undan yuqorida. */
.map-picker-search {
  position: absolute;
  z-index: 1100;
  top: 14px;
  left: 14px;
  right: 14px;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
  color: var(--muted);
}

.map-picker-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  color: var(--text, #101828);
  padding: 0;
  height: auto;
}

.map-picker-locate {
  position: absolute;
  z-index: 1100;
  right: 14px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
}

.map-picker-results {
  position: absolute;
  z-index: 1200;
  top: 60px;
  left: 14px;
  max-width: 380px;
  width: calc(100% - 28px);
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.16);
  max-height: 240px;
  overflow-y: auto;
}

.map-picker-results button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text, #101828);
}

.map-picker-results button:hover {
  background: var(--surface-soft);
}

.map-picker-coords {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.map-picker-coord {
  display: grid;
  gap: 2px;
  position: relative;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.map-picker-coord span {
  font-size: 12px;
  color: var(--muted);
}

.map-picker-coord strong {
  font-size: 15px;
}

.map-picker-coord.filled::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -7px;
  width: 15px;
  height: 15px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176b5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L19 7'/%3E%3C/svg%3E");
}

.map-picker-manual {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.map-picker-manual summary {
  padding: 12px 14px;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
}

.map-picker-manual[open] summary {
  border-bottom: 1px solid var(--line);
}

.map-picker-manual > .grid {
  padding: 14px;
}

@media (max-width: 780px) {
  .map-picker-map {
    height: 300px;
  }

  .map-picker-coords {
    grid-template-columns: 1fr;
  }

  .map-picker-locate {
    bottom: 14px;
  }
}

/* ---- Xarita: g'ildirak, kengaytirish, to'liq ekran ------------------------ */

/* Kengaytirish tugmasi xarita ustida turadi, shuning uchun kartochka
   o'lchov nuqtasi bo'lishi kerak. */
.map-card,
.points-map,
.map-picker-map {
  position: relative;
}

.map-expand-btn {
  position: absolute;
  z-index: 1100;
  right: 16px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
  color: var(--text, #101828);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.map-expand-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Ctrl siz aylantirilganda qisqa vaqt chiqadigan eslatma. */
.map-wheel-hint {
  position: absolute;
  inset: 0;
  z-index: 1050;
  display: grid;
  place-items: center;
  background: rgba(16, 24, 40, 0.45);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
  pointer-events: none;
  text-align: center;
  padding: 16px;
}

.map-wheel-hint.visible {
  opacity: 1;
  visibility: visible;
}

.map-wheel-hint span {
  font-size: 15px;
  font-weight: 600;
}

.map-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 24, 40, 0.55);
}

.map-modal {
  display: flex;
  flex-direction: column;
  width: min(1400px, 100%);
  height: min(900px, 100%);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.3);
}

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

.map-modal-head h2 {
  margin: 0;
  font-size: 17px;
}

.map-modal-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.map-modal-body {
  flex: 1;
  min-height: 0;
}

/* Oyna ochiq turganda orqadagi sahifa surilmasin. */
body.map-modal-open {
  overflow: hidden;
}

@media (max-width: 780px) {
  .map-modal-backdrop {
    padding: 0;
  }

  .map-modal {
    height: 100%;
    border-radius: 0;
  }

  .map-expand-btn span {
    display: none;
  }
}

/* ---- Talabnoma status paneli --------------------------------------------- */

.request-status-card {
  display: grid;
  gap: 18px;
  padding: 20px 22px;
}

/* Bosqichlar ketma-ketligi: qayerdan kelgani va nima kutilayotgani. */
.request-flow {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.request-flow-rejected {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid #f0c0bc;
  border-left-width: 3px;
  border-radius: 8px;
  background: #fdf1f0;
}

.request-flow-rejected strong {
  color: var(--danger);
}

.request-flow-rejected span {
  color: var(--muted);
  font-size: 13px;
}

.request-status-body {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.request-status-now {
  display: grid;
  gap: 6px;
}

.request-status-now .eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.request-status-badge {
  font-size: 16px;
}

.request-status-help {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.request-status-moves {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
  min-height: 40px;
}

.request-status-moves .toolbar {
  gap: 10px;
}

/* Nima yetishmayotgani tugmani bosishdan OLDIN aytiladi. */
.request-status-block {
  flex: 1 1 100%;
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid #f0c9a0;
  border-left-width: 3px;
  border-radius: 8px;
  background: #fdf6ec;
}

.request-status-block strong {
  font-size: 13px;
  color: #9a5b16;
}

.request-status-block span {
  font-size: 13px;
  color: var(--muted);
}

.request-status-moves button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 980px) {
  .request-status-card {
    grid-template-columns: 1fr;
  }

  .request-status-moves {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 16px;
  }
}

/* Eslatma tugmalardan keyin, o'z qatorida. */
.request-status-moves .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.request-status-moves > .form-hint {
  flex: 1 1 100%;
  margin: 0;
}

/* ---- Ma'lumotnomalar ----------------------------------------------------- */

.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.reference-card {
  display: grid;
  gap: 6px;
  align-content: start;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reference-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.08);
}

.reference-card-title {
  font-weight: 650;
  color: var(--text, #101828);
}

.reference-card-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.reference-card-count strong {
  font-size: 24px;
  color: var(--accent);
  line-height: 1;
}

.reference-card-count span {
  color: var(--muted);
  font-size: 13px;
}

.reference-card-extra {
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.reference-card-hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.reference-card-updated {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 4px;
}

.reference-group + .reference-group {
  margin-top: 16px;
}

/* ---- Viloyat va tumanlar -------------------------------------------------- */

.region-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.region-list {
  display: grid;
  gap: 2px;
  max-height: 560px;
  overflow-y: auto;
}

.region-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text, #101828);
}

.region-row:hover {
  background: var(--surface-soft);
}

.region-row.active {
  background: #eaf3f0;
  color: var(--accent);
  font-weight: 600;
}

.region-count {
  flex: none;
  min-width: 30px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
}

.region-row.active .region-count {
  background: var(--accent);
  color: #fff;
}

.district-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 16px;
  margin-bottom: 14px;
}

.district-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 980px) {
  .region-layout {
    grid-template-columns: 1fr;
  }

  .region-list {
    max-height: 320px;
  }
}

/* ---- Kaskadli nuqta tanlash ---------------------------------------------- */

.point-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 16px;
  grid-column: 1 / -1;
}

/* Nuqta o'zi butun kenglikni oladi: uning matni eng uzun -- nom va manzil. */
.point-picker > .form-field {
  grid-column: 1 / -1;
}

@media (max-width: 780px) {
  .point-picker {
    grid-template-columns: 1fr;
  }
}


/* ---- Talabnoma hujjatlari (status bloki ichida) -------------------------- */

.request-docs {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

/* Hujjat aynan hozir kerak bo'lsa, blok ko'zga tashlanadi. */
.request-docs.is-required {
  border-color: #f0c9a0;
  background: #fdf6ec;
}

.request-docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.request-docs-head h3 {
  margin: 0;
  font-size: 15px;
}

.request-docs-flag {
  padding: 3px 10px;
  border-radius: 999px;
  background: #9a5b16;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.request-docs-count {
  color: var(--muted);
  font-size: 13px;
}

.request-doc-row {
  display: grid;
  /* Turi, nomi, yuklangan vaqti, amallar. Amallar bitta katakda --
     ochish, yuklab olish va o'chirish yonma-yon turadi. */
  grid-template-columns: 160px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.request-doc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.request-doc-type {
  color: var(--muted);
  font-size: 13px;
}

.request-doc-meta {
  color: var(--muted);
  font-size: 12px;
}

.request-doc-form {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding-top: 6px;
}

@media (max-width: 980px) {
  .request-status-body,
  .request-doc-row,
  .request-doc-form {
    grid-template-columns: 1fr;
  }

  .request-doc-row {
    gap: 4px;
  }
}

/* ---- Shartnoma kutayotgan talabnomalar ----------------------------------- */

.waiting-requests {
  padding: 16px 20px;
  margin-bottom: 16px;
  border-color: #bedbd4;
  background: #f3f9f7;
}

.waiting-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.waiting-head h2 {
  margin: 0;
  font-size: 16px;
}

.waiting-count {
  color: var(--muted);
  font-size: 13px;
}

.waiting-row {
  display: grid;
  /* Raqam, tashkilot, mahsulot, miqdor, bosqich, amal. Bosqich ustuni
     qo'shilganda tugma pastga tushib ketgan edi. */
  grid-template-columns: 130px minmax(0, 2fr) minmax(0, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #dbeae5;
  font-size: 14px;
}

.waiting-number {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: var(--accent);
  text-align: left;
  cursor: pointer;
}

.waiting-number:hover {
  text-decoration: underline;
}

.waiting-product,
.waiting-qty {
  color: var(--muted);
}

@media (max-width: 980px) {
  .waiting-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Buyurtma sehrgarida zaxira taklifi. Tanlangach yashil holatga o'tadi --
   foydalanuvchi bosgani natija berganini ko'rishi kerak. */
.stock-suggest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #d8c79a;
  border-radius: 8px;
  background: #fdf8ec;
  color: #4a3a12;
  padding: 16px;
  margin-bottom: 16px;
}

.stock-suggest.is-on {
  border-color: #bedbd4;
  background: #effaf7;
  color: #133d35;
}

.stock-suggest p {
  margin: 4px 0 0;
}

.stock-suggest .helper-text {
  margin-top: 2px;
}

.stock-suggest-ok {
  font-weight: 650;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .stock-suggest {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Kartochka bo'limi ichidagi kichik sarlavha: bir bo'limda ikkita blok
   bo'lganda (ma'lumot + jadval) ularni ajratib turadi. */
.section-subtitle {
  margin: 20px 0 10px;
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
}

/* ================= Ta'minot umumiy ko'rinishi ================= */

/* Ticket holatlari rangi: to'lanmagani ogohlantiruvchi, to'langani yashil,
   yopilgani va bekor qilingani kul rang -- e'tibor talab qilmaydi. */
.ring-arc.ticket-opened,
.ring-dot.ticket-opened { stroke: #2f80ed; background: #2f80ed; }
.ring-arc.ticket-partially_paid,
.ring-dot.ticket-partially_paid { stroke: #f2a33c; background: #f2a33c; }
.ring-arc.ticket-overdue,
.ring-dot.ticket-overdue { stroke: var(--danger); background: var(--danger); }
.ring-arc.ticket-paid,
.ring-dot.ticket-paid { stroke: #22b573; background: #22b573; }
.ring-arc.ticket-closed,
.ring-dot.ticket-closed { stroke: #94a3b8; background: #94a3b8; }
.ring-arc.ticket-cancelled,
.ring-dot.ticket-cancelled { stroke: #cbd5e1; background: #cbd5e1; }
.ring-arc.ticket-draft,
.ring-dot.ticket-draft { stroke: #dbe3ea; background: #dbe3ea; }

/* To'lov muddati ustunlari */
.due-chart {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  min-height: 230px;
  padding-top: 8px;
}

.due-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  height: 100%;
}

.due-value {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
}

.due-bar {
  width: 100%;
  max-width: 64px;
  min-height: 2px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #4c9fe0, #2f80ed);
}

.due-col.is-overdue .due-bar {
  background: linear-gradient(180deg, #ef8080, var(--danger));
}

.due-label {
  font-size: 12px;
  color: var(--text);
  text-align: center;
  line-height: 1.25;
}

.due-count {
  font-size: 11px;
  color: var(--muted);
}

/* Zaxira harakati: bitta chiziqda erkin / band / ketgan */
.flow-bar {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: #eef2f5;
}

.flow-part { display: block; height: 100%; }
.flow-free { background: #22b573; }
.flow-reserved { background: #f2a33c; }
.flow-shipped { background: #94a3b8; }

.flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}

.flow-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
}

.flow-legend-item b { color: var(--text); }

.flow-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.flow-dot.flow-free { background: #22b573; }
.flow-dot.flow-reserved { background: #f2a33c; }
.flow-dot.flow-shipped { background: #94a3b8; }

/* Jadval katakchasidagi kichik ustun */
.mini-bar {
  height: 5px;
  border-radius: 3px;
  background: #eef2f5;
  margin-bottom: 5px;
  max-width: 150px;
}

.mini-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #2f80ed;
}

@media (max-width: 860px) {
  .due-chart {
    gap: 8px;
    min-height: 190px;
  }
  .due-value { font-size: 10px; }
  .due-label { font-size: 11px; }
}

/* Saralanadigan ustun sarlavhasi */
.ops-sort {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ops-sort:hover { color: var(--primary); }
.ops-sort.active { color: var(--primary); }

.ops-sort-arrow {
  font-size: 11px;
  line-height: 1;
}

/* Oyna ichidagi bo'lim sarlavhasi: bir formada ikki xil savol bo'lganda
   (tasdiqlash va o'lchovlar) ularni ajratib turadi. */
.modal-subtitle {
  margin: 18px 0 4px;
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}

.modal-subtitle + .helper-text {
  margin: 0 0 10px;
}

/* Deploydan keyin ochiq qolgan sahifa eski kod bilan ishlaydi va buni
   hech narsa bildirmaydi. Bu yozuv ekranning pastida, hamma narsaning
   ustida turadi -- e'tibordan chetda qolmasligi kerak. */
.app-update-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(720px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 12px;
  background: #1f2937;
  color: #f9fafb;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
}

.app-update-bar span {
  font-size: 14px;
  line-height: 1.4;
}

.app-update-bar .btn {
  flex: 0 0 auto;
}

/* Reys bosqichlari: zanjir bir qarashda o'qilishi kerak -- qayerda
   bo'lgan, hozir qayerda, oldinda nima bor. */
.trip-stage-chain {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 16px 0;
}

.trip-stage-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #94a3b8;
}

.trip-stage-row strong {
  font-weight: 600;
}

.trip-stage-row em {
  font-style: normal;
  font-size: 13px;
  color: #64748b;
}

.trip-stage-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  font-size: 12px;
  line-height: 1;
}

.trip-stage-row.is-done {
  color: #0f172a;
}

.trip-stage-row.is-done .trip-stage-mark {
  border-color: #0f766e;
  background: #0f766e;
  color: #fff;
}

.trip-stage-row.is-current {
  background: #ecfdf5;
  color: #0f172a;
}

.trip-stage-row.is-current .trip-stage-mark {
  border-color: #0f766e;
  color: #0f766e;
}

/* Ro'yxat va uning yonidagi «yangisini qo'shish» tugmasi. Tugma
   maydonning pastki chetiga tekislanadi -- yorliq balandligi qo'shilgani
   uchun oddiy flex uni yuqoriga surib yuborardi. */
.field-with-action {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.field-with-action > label {
  flex: 1 1 auto;
  min-width: 0;
}

.field-with-action > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Shartnoma kutayotgan talabnomalar: qaysi bosqichda ekani satrda
   ko'rinib turishi kerak -- «xat keldi» va «namuna yuborildi» uchun
   qilinadigan ish boshqa-boshqa. */
.waiting-stage {
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: #48566b;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Tashkilotning hisob raqamlari: har biri o'z satri, ostida «asosiy»
   tanlovi va o'chirish. Satrlar bir-biridan ajralib turishi kerak --
   uchtasi yonma-yon turganda qaysi MFO qaysi raqamga tegishli ekani
   ko'rinmay qolardi. */
.bank-row {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 12px;
  background: #fbfcfd;
}

.bank-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}

.bank-row-foot .check-row {
  margin: 0;
}

/* ---- Obyektivka ---- */

/* Rasm chapda, asosiy ma'lumot o'ngda -- qog'oz blankadagidek. */
.obyektivka-top {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.obyektivka-top-fields {
  flex: 1 1 320px;
  min-width: 260px;
}

.obyektivka-photo-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* 3x4 -- hujjat rasmining nisbati. */
.obyektivka-photo {
  width: 140px;
  height: 187px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-muted, #f4f5f7);
}

.obyektivka-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  padding: 8px;
}

.obyektivka-photo-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.obyektivka-photo-pick {
  cursor: pointer;
}

.obyektivka-career-table input {
  width: 100%;
}

.obyektivka-form-actions {
  justify-content: flex-end;
  margin-top: 16px;
}

/* Obyektivka qog'ozga chiqariladigan hujjat: chop etishda menyu, tugma va
   qidiruv paneli emas, faqat varaqning o'zi kerak. */
@media print {
  .app-topbar,
  .sidebar,
  .sidebar-toggle,
  .obyektivka-page .actions,
  .obyektivka-page .page-header .actions {
    display: none !important;
  }

  .app-shell {
    margin: 0 !important;
    padding: 0 !important;
  }

  .obyektivka-page .card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }
}