/* ============================================================
   ENGLISH HOUSE HR PLATFORM — Design System
   Qiymatlar docs/design/tokens.json dan olingan (tasdiqlangan dizayn tizimi).
   Tokenlar tokens.json dagi nomlar bilan e'lon qilinadi; pastdagi "eski nomlar"
   bloki mavjud CSS va app.js'dagi inline stillar ishlashda davom etishi uchun.
   ============================================================ */

:root {
  /* ---- Ranglar: kunduzgi mavzu ---- */
  --surface-page: #f5f6f8;
  --surface-card: #ffffff;
  --surface-sunken: #ebedf1;
  --surface-hover: #f0f2f6;
  --border-subtle: #e2e5ea;
  --border-strong: #c7ccd6;
  --text-strong: #14161b;
  --text-muted: #565d6b;
  --text-faint: #6e7686;
  --text-on-brand: #ffffff;
  --brand: #4b45c6;
  --brand-hover: #3c37a8;
  --brand-tint: #eceafb;
  --danger: #c62f2f;
  --danger-tint: #fbe9e7;
  --warning: #a35a06;
  --warning-tint: #fbeeda;
  --success: #0e6b43;
  --success-tint: #e4f3ea;
  --info: #0f5fa3;
  --info-tint: #e6eff8;
  --focus-ring: #6f68ff;
  --overlay: #14161bcc;

  /* ---- Soyalar (tokens.json da har mavzu uchun alohida) ---- */
  --shadow-card: 0 1px 2px rgba(20, 22, 27, 0.06);
  --shadow-raised: 0 6px 16px rgba(20, 22, 27, 0.1);
  --shadow-modal: 0 18px 48px rgba(20, 22, 27, 0.18);

  /* ---- Mavzuga bog'liq emas ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Matn shkalasi: o'lcham / qator balandligi */
  --fs-page-title: 24px;    --lh-page-title: 30px;
  --fs-section-title: 18px; --lh-section-title: 24px;
  --fs-card-title: 15px;    --lh-card-title: 20px;
  --fs-body: 15px;          --lh-body: 22px;
  --fs-body-sm: 13px;       --lh-body-sm: 20px;
  --fs-label: 13px;         --lh-label: 18px;
  --fs-caption: 12px;       --lh-caption: 16px;
  --fs-amount: 15px;        --lh-amount: 22px;
  --fs-amount-lg: 20px;     --lh-amount-lg: 26px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Eski nomlar → tokenlar (mavjud klasslar va app.js inline stillari uchun) ---- */
  --bg: var(--surface-page);
  --surface: var(--surface-card);
  --surface-2: var(--surface-sunken);
  --tint: var(--brand-tint);
  --tint-strong: color-mix(in srgb, var(--brand) 22%, transparent);
  --divider: var(--border-subtle);
  --input-bg: var(--surface-card);
  --text: var(--text-strong);
  --hint: var(--text-muted);
  --primary: var(--brand);
  --primary-dark: var(--brand-hover);
  --primary-grad: var(--brand); /* dizaynda gradient yo'q — bir tusli brand */
  --button: var(--brand);
  --on-primary: var(--text-on-brand);
  --green: var(--success);
  --green-tint: var(--success-tint);
  --red: var(--danger);
  --red-tint: var(--danger-tint);
  --orange: var(--warning);
  --orange-tint: var(--warning-tint);
  --violet: var(--info);
  --violet-tint: var(--info-tint);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-lg);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-raised);
  --shadow-lg: var(--shadow-modal);
}

/* Tungi mavzu. Faqat data-theme="dark" ga bog'langan: tanlov app.js da localStorage'dan
   tiklanadi, tanlanmagan bo'lsa tizim sozlamasiga qarab o'rnatiladi. */
:root[data-theme="dark"] {
  --surface-page: #0f1115;
  --surface-card: #171a21;
  --surface-sunken: #1d212a;
  --surface-hover: #222733;
  --border-subtle: #262b35;
  --border-strong: #3a4150;
  --text-strong: #f3f5f8;
  --text-muted: #a9b1c1;
  --text-faint: #8b93a5;
  --text-on-brand: #12101f;
  --brand: #9b95ff;
  --brand-hover: #b3aeff;
  --brand-tint: #23204a;
  --danger: #f98a80;
  --danger-tint: #3b1a17;
  --warning: #f0b03f;
  --warning-tint: #3a2a0f;
  --success: #4fd196;
  --success-tint: #0f2c20;
  --info: #74b9f2;
  --info-tint: #10263b;
  --focus-ring: #b3aeff;
  --overlay: #05070acc;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 18px 48px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}
/* data-theme o'rnatilmagan sahifalar (landing, login) — tizim sozlamasiga qaraydi */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-page: #0f1115;
    --surface-card: #171a21;
    --surface-sunken: #1d212a;
    --surface-hover: #222733;
    --border-subtle: #262b35;
    --border-strong: #3a4150;
    --text-strong: #f3f5f8;
    --text-muted: #a9b1c1;
    --text-faint: #8b93a5;
    --text-on-brand: #12101f;
    --brand: #9b95ff;
    --brand-hover: #b3aeff;
    --brand-tint: #23204a;
    --danger: #f98a80;
    --danger-tint: #3b1a17;
    --warning: #f0b03f;
    --warning-tint: #3a2a0f;
    --success: #4fd196;
    --success-tint: #0f2c20;
    --info: #74b9f2;
    --info-tint: #10263b;
    --focus-ring: #b3aeff;
    --overlay: #05070acc;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 18px 48px rgba(0, 0, 0, 0.7);

    color-scheme: dark;
  }
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  padding-bottom: 24px;
  -webkit-font-smoothing: antialiased;
}

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

/* Raqamlar (summa, foiz, sana, №, telefon) — IBM Plex Mono */
.total-box .amount, .dash-num, .stat-mini-num, .kpi-chip, .rank-percent, .payroll-card-kpi,
.pcb-item b, .ps-amount, .role-category-value-num, .rating-score, .compare-value,
.criterion-rank-num, .rank-num-circle, .rating-rank, .rule-step-num, .kpi-goal-count,
.task-my-stats-rate,
.task-daily-number,
.roster-phone, .roster-num, .cm-history-date, .sm-pending-fields .pf-value,
.sm-kpi-breakdown-item b, .notif-badge, .notif-item-time, .task-comment-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Klaviatura fokusi — hech qachon o'chirilmaydi */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

#app { padding: 16px; max-width: 720px; margin: 0 auto; }
#app.shell-mode { padding: 0; max-width: none; margin: 0; }

a { color: var(--brand); }

.center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--text-muted);
}

.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--divider);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

h1 { font-size: var(--fs-page-title); line-height: var(--lh-page-title); font-weight: 600; margin: 4px 0 12px; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-card-title); line-height: var(--lh-card-title); margin: 20px 0 10px; color: var(--text-strong); font-weight: 600; }

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider);
  transition: box-shadow 0.2s var(--ease);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-body);
}
.row:last-child { border-bottom: none; }
.row .label { color: var(--text-muted); }
.row .value { font-weight: 600; }

.total-box {
  background: var(--brand);
  color: var(--text-on-brand);
  border-radius: var(--r-xl);
  padding: 24px 22px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.total-box .amount { font-size: 30px; font-weight: 600; margin-top: 4px; letter-spacing: -0.02em; }
.total-box .caption { font-size: var(--fs-body-sm); opacity: 0.9; }
.total-box-delta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700;
  background: var(--surface-card);
}
/* Xarajat o'sishi — salbiy (danger), kamayishi — ijobiy (success) */
.total-box-delta.up { color: var(--danger); }
.total-box-delta.down { color: var(--success); }

.gate-warning {
  background: var(--orange-tint);
  border-left: 4px solid var(--orange);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-body-sm);
  margin-bottom: 8px;
  color: var(--warning);
}

/* Scorecard holati banneri — ogohlantirish (amal tugmasi bilan) yoki yashil "hammasi to'ldirilgan" */
.sc-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.sc-banner-body { flex: 1 1 260px; min-width: 0; }
.sc-banner-title { font-weight: 700; margin-bottom: 2px; }
.sc-banner-names { font-size: var(--fs-caption); opacity: 0.9; }
.sc-banner-toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.sc-banner-msg { flex-basis: 100%; font-size: var(--fs-caption); }
.sc-banner-msg:empty { display: none; }
.sc-banner-ok {
  background: var(--green-tint);
  border-left: 4px solid var(--green);
  color: var(--green);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  margin-bottom: 8px;
}
.kpi-missing-note { font-size: var(--fs-caption); color: var(--hint); margin: 0 0 8px; }
.inline-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 8px; }
.inline-action-row p { margin: 0; }
.metric-note-warn { font-size: var(--fs-caption); color: var(--red); margin: -4px 0 12px; }

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 16px;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.tab:hover { color: var(--text); }
.tab:active { transform: scale(0.96); }
.tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

button.primary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--text-on-brand);
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.2s var(--ease), opacity 0.2s var(--ease);
}
button.primary:hover { background: var(--brand-hover); }
button.primary:active { transform: scale(0.98); }

button.secondary {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.12s var(--ease);
}
button.secondary:hover { background: var(--surface-2); }
button.secondary:active { transform: scale(0.98); }

button.primary.danger { background: var(--danger); color: var(--surface-card); }

input, select {
  width: 100%;
  padding: 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-body);
  margin-bottom: 10px;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input:focus, select:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--brand);
}
label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
table th, table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--divider); }
table th { color: var(--text-muted); font-weight: 600; background: var(--surface-sunken); }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: var(--fs-caption);
  font-weight: 700;
}
.badge.ok { background: var(--green-tint); color: var(--green); }
.badge.warn { background: var(--red-tint); color: var(--red); }
.badge.neutral { background: var(--surface-2); color: var(--text-muted); }

.error-box {
  background: var(--red-tint);
  color: var(--red);
  padding: 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-body);
}

.month-picker { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.month-picker select { margin-bottom: 0; }

.icon-btn {
  border: none;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.icon-btn:hover { background: var(--tint); }

/* ---------- Kichik tugmalar ---------- */
.mini-btn {
  border: 1px solid var(--divider);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  padding: 5px 9px;
  font-size: var(--fs-caption);
  margin-right: 4px;
  margin-top: 2px;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.mini-btn:hover { background: var(--surface-2); }
.mini-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- Orqaga qaytish ---------- */
.back-btn {
  border: none;
  background: none;
  color: var(--primary);
  font-size: var(--fs-body);
  font-weight: 600;
  padding: 6px 0;
  margin-bottom: 8px;
  cursor: pointer;
  display: block;
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.modal-box {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 22px;
  max-width: 380px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-box h3 { margin: 0 0 10px; font-size: var(--fs-section-title); line-height: var(--lh-section-title); font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
.modal-message { font-size: var(--fs-body); color: var(--text); line-height: 1.6; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions button { flex: 1; margin-top: 0; width: auto; }

/* ---------- Dashboard kartalar ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.dash-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 16px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.dash-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dash-card-icon { font-size: 19px; margin-bottom: 4px; }
.dash-num { font-size: var(--fs-amount-lg); line-height: var(--lh-amount-lg); font-weight: 600; }
.dash-label { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }

/* "Rich" variant — chap tomonga tekislangan, rangli ikonka-chip bilan (Dashboard bo'limida) */
.dash-card.dash-card-rich, .stat-mini.stat-mini-rich { text-align: left; }
.dash-card-head, .stat-mini-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px;
}
.dash-card-title, .stat-mini-title { font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.dash-card-icon-chip, .stat-mini-icon-chip {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.dash-card-delta, .stat-mini-delta {
  font-size: var(--fs-caption); font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.dash-card-delta.up, .stat-mini-delta.up { background: var(--green-tint); color: var(--green); }
.dash-card-delta.down, .stat-mini-delta.down { background: var(--red-tint); color: var(--red); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat-mini {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 12px 8px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.stat-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-mini-icon { font-size: 15px; }
.stat-mini-num { font-size: var(--fs-amount-lg); line-height: var(--lh-amount-lg); font-weight: 600; margin-top: 2px; }
.stat-mini-label { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; line-height: 1.3; }

.growth-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 700; margin-top: 6px;
}
.growth-chip.up { background: var(--success-tint); color: var(--success); }
.growth-chip.down { background: var(--danger-tint); color: var(--danger); }

/* ---------- Tushum vs Xarajat ---------- */
.compare-panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider);
}
.compare-row { margin-bottom: 14px; }
.compare-row:last-child { margin-bottom: 0; }
.compare-row-head { display: flex; justify-content: space-between; font-size: var(--fs-caption); margin-bottom: 6px; }
.compare-row-head .compare-label { color: var(--text-muted); font-weight: 600; }
.compare-row-head .compare-value { font-weight: 700; }
.compare-bar-track { width: 100%; height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.compare-bar-fill { height: 100%; border-radius: 6px; transition: width 0.4s var(--ease); }
.compare-bar-fill.revenue { background: var(--success); }
.compare-bar-fill.expense { background: var(--danger); }

/* ---------- Top/Bottom reyting ---------- */
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-md); }
.rank-item.rank-top { background: var(--success-tint); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); }
.rank-item.rank-bottom { background: var(--warning-tint); border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent); }
.rank-medal { font-size: 18px; }
.rank-name { flex: 1; font-size: var(--fs-body); font-weight: 600; }
.rank-percent { font-size: var(--fs-body); font-weight: 700; }
.rank-percent.good { color: var(--green); }
.rank-percent.bad { color: var(--orange); }

/* ---------- Hero + menyu ---------- */
.teacher-hero { text-align: center; padding: 20px 0 6px; }
.teacher-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto 12px;
  box-shadow: var(--shadow-card);
}
.teacher-sub { color: var(--text-muted); font-size: var(--fs-body-sm); font-weight: 500; }

.menu-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.menu-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider);
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.menu-card:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.menu-card:active { transform: scale(0.98); }
.menu-icon {
  font-size: 24px; width: 46px; height: 46px; min-width: 46px;
  border-radius: var(--r-md);
  background: var(--tint);
  display: flex; align-items: center; justify-content: center;
}
.menu-text { flex: 1; }
.menu-label { font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: 600; }
.menu-desc { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }
.menu-arrow { font-size: 22px; color: var(--text-muted); }

/* ---------- Edu Manager: o'qituvchilar ---------- */
.teacher-rank-item {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border-radius: var(--r-md); background: var(--surface);
  margin-bottom: 8px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider);
}
.rank-num-circle {
  width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
  background: var(--tint); color: var(--primary); font-weight: 700; font-size: var(--fs-body-sm);
  display: flex; align-items: center; justify-content: center;
}
.teacher-rank-name { flex: 1; font-weight: 600; font-size: var(--fs-body); }
.grade-chip { background: var(--tint); color: var(--primary); border-radius: 8px; padding: 3px 9px; font-size: var(--fs-caption); font-weight: 700; }
.stavka-chip { background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 3px 9px; font-size: var(--fs-caption); font-weight: 600; margin-left: 6px; white-space: nowrap; }

/* ---------- KPI reytingi ---------- */
.kpi-rank-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface); margin-bottom: 8px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); }
.kpi-chip { padding: 5px 12px; border-radius: 20px; font-weight: 700; font-size: var(--fs-body-sm); white-space: nowrap; }
.kpi-chip.green { background: var(--green-tint); color: var(--green); }
.kpi-chip.yellow { background: var(--orange-tint); color: var(--orange); }
.kpi-chip.red { background: var(--red-tint); color: var(--red); }

.legend-row { display: flex; gap: 14px; font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 10px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-dot.green { background: var(--green); }
.legend-dot.yellow { background: var(--orange); }
.legend-dot.red { background: var(--red); }

/* ---------- Scorecard forma ---------- */
.sc-form .sc-field { margin-bottom: 4px; }
.sc-form .sc-field label { margin-bottom: 4px; }

textarea {
  width: 100%; padding: 11px; border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  font-size: var(--fs-body); margin-bottom: 10px; background: var(--input-bg); color: var(--text);
  font-family: inherit; resize: vertical;
}
textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--brand); }

/* ---------- O'sish banneri ---------- */
.growth-banner { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); margin-bottom: 14px; font-weight: 700; font-size: 15px; }
.growth-banner.growth-up { background: var(--green-tint); color: var(--green); }
.growth-banner.growth-down { background: var(--red-tint); color: var(--red); }
.growth-icon { font-size: 20px; }

/* ---------- Kompaniya: Tasdiqlash kutilmoqda paneli ---------- */
.cm-approvals-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  padding: 20px 20px 6px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.cm-approvals-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cm-approvals-icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
}
.cm-approvals-title { font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: 600; }
.cm-approvals-sub { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 1px; }

.cm-approval-group { margin-bottom: 16px; }
.cm-approval-group:last-child { margin-bottom: 6px; }
.cm-approval-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}
.cm-approval-count {
  display: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--orange-tint);
  color: var(--orange);
  font-size: var(--fs-caption);
  font-weight: 800;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 20px;
}
.cm-approval-count-visible { display: inline-flex; }
.cm-approval-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  background: var(--green-tint);
  color: var(--green);
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
  font-weight: 600;
}

/* ---------- Kunlik tarix ---------- */
.cm-history-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px;
  border-radius: var(--r-md); background: var(--surface); margin-bottom: 8px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider); cursor: pointer; flex-wrap: wrap;
}
.cm-history-date { font-weight: 700; font-size: var(--fs-body-sm); min-width: 90px; }
.cm-history-mid { font-size: var(--fs-caption); color: var(--text-muted); flex: 1; }
.cm-history-label { color: var(--text); font-weight: 600; }

/* ---------- Ish haqi: xodim kartasi ---------- */
.payroll-card { background: var(--surface); border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); }
.payroll-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.payroll-card-name { font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: 600; }
.payroll-card-meta { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }
.payroll-card-kpi { font-size: 15px; font-weight: 700; color: var(--primary); background: var(--tint); padding: 4px 10px; border-radius: var(--r-sm); white-space: nowrap; }
.payroll-card-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.pcb-item { background: var(--surface-2); border-radius: var(--r-sm); padding: 8px; text-align: center; }
.pcb-item span { display: block; font-size: var(--fs-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pcb-item b { display: block; font-size: var(--fs-body-sm); margin-top: 2px; }
.pcb-item.pcb-total { background: var(--tint); }
.pcb-item.pcb-total span { color: var(--primary); font-weight: 700; }
.pcb-item.pcb-total b { font-size: var(--fs-body); color: var(--primary); }

.payroll-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; }
.payroll-status-chip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-caption); }
.ps-label { color: var(--text-muted); min-width: 58px; }
.ps-amount { font-weight: 700; }
.ps-badge { padding: 2px 8px; border-radius: 10px; font-size: var(--fs-caption); font-weight: 700; white-space: nowrap; }
.ps-badge.ps-done { background: var(--green-tint); color: var(--green); }
.ps-badge.ps-pending { background: var(--surface-2); color: var(--text-muted); }

/* ---------- Scorecard tarixi ---------- */
.sc-history-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--divider); flex-wrap: wrap; }
.sc-history-item:last-child { border-bottom: none; }
.sc-history-month { font-weight: 700; font-size: var(--fs-body); }
.sc-history-mini { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }
.sc-history-actions { display: flex; gap: 6px; white-space: nowrap; }

/* ---------- Mezon progress-bar ---------- */
.criterion-row { padding: 12px 0; border-bottom: 1px solid var(--divider); }
.criterion-row:last-child { border-bottom: none; }
.criterion-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; position: relative; }
.criterion-label { font-size: var(--fs-body); font-weight: 600; }
.criterion-bar-track { width: 100%; height: 8px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.criterion-bar-fill { height: 100%; border-radius: 6px; transition: width 0.3s var(--ease); }
.criterion-sub { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 4px; }
.criterion-row-clickable { cursor: pointer; transition: background 0.15s var(--ease); margin: 0 -18px; padding: 12px 18px; }
.criterion-row-clickable:hover { background: var(--surface-hover); }
.criterion-arrow { font-size: 18px; color: var(--text-muted); margin-left: 4px; }

.criterion-rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--divider); }
.criterion-rank-row:last-child { border-bottom: none; }
.criterion-rank-num { width: 26px; flex-shrink: 0; text-align: center; font-size: var(--fs-body); font-weight: 700; color: var(--text-muted); }
.criterion-rank-name { flex: 1; font-size: var(--fs-body); font-weight: 500; }
.criterion-rank-percent { flex-shrink: 0; }

/* ---------- Sotuv menejeri ---------- */
.sm-reminder-card { background: var(--tint); border: 1px solid var(--tint-strong); border-radius: var(--r-lg); padding: 16px; margin-bottom: 14px; }
.sm-reminder-title { font-weight: 700; font-size: var(--fs-body); margin-bottom: 10px; color: var(--text); }
.sm-reminder-item { font-size: var(--fs-body-sm); color: var(--text); padding: 4px 0; }
.sm-reminder-item b { color: var(--primary); }

.sm-status-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); font-size: var(--fs-body); font-weight: 600; margin-bottom: 14px; }
.sm-status-pending { background: var(--orange-tint); color: var(--orange); }
.sm-status-approved { background: var(--green-tint); color: var(--green); }
.sm-status-rejected { background: var(--red-tint); color: var(--red); }
.sm-status-spinner {
  width: 16px; height: 16px; border: 2.5px solid color-mix(in srgb, var(--warning) 30%, transparent); border-top-color: var(--warning);
  border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0;
}

.sm-pending-item { background: var(--surface); border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); border-left: 4px solid var(--orange); }
.sm-pending-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sm-pending-name { font-weight: 700; font-size: var(--fs-body); }
.sm-pending-date { font-size: var(--fs-caption); color: var(--text-muted); }
.sm-pending-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: var(--fs-caption); margin-bottom: 12px; }
.sm-pending-fields .pf-item { display: flex; justify-content: space-between; }
.sm-pending-fields .pf-label { color: var(--text-muted); }
.sm-pending-fields .pf-value { font-weight: 700; }
.sm-pending-actions { display: flex; gap: 8px; }
.sm-pending-actions button { flex: 1; margin-top: 0; }

.sm-kpi-breakdown { background: var(--surface-2); border: 1px solid var(--divider); border-radius: var(--r-sm); padding: 10px 12px; margin: 6px 0 10px; }
.sm-kpi-breakdown-title { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.sm-kpi-breakdown-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: var(--fs-caption); }
.sm-kpi-breakdown-item.sm-kpi-active { color: var(--text); }
.sm-kpi-breakdown-item.sm-kpi-active b { color: var(--green); }
.sm-kpi-breakdown-item.sm-kpi-inactive { color: var(--text-muted); }
.sm-kpi-breakdown-item.sm-kpi-inactive b { color: var(--text-muted); }
.sm-kpi-note { font-size: var(--fs-caption); color: var(--text-muted); }
.sm-kpi-breakdown-total { display: flex; justify-content: space-between; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--divider); font-size: var(--fs-body-sm); font-weight: 700; }

/* ---------- Sinov rejimi banneri ---------- */
.test-mode-banner {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--brand); color: var(--text-on-brand); padding: 10px 16px; font-size: var(--fs-caption); flex-wrap: wrap;
}
.test-mode-banner b { font-weight: 700; }
.test-mode-banner button {
  background: color-mix(in srgb, var(--text-on-brand) 15%, transparent); border: 1px solid color-mix(in srgb, var(--text-on-brand) 40%, transparent); color: var(--text-on-brand);
  border-radius: var(--r-sm); padding: 6px 12px; font-size: var(--fs-caption); font-weight: 600; cursor: pointer; white-space: nowrap;
}

/* ---------- Topshiriqlar ---------- */
.task-item { background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); border-left: 4px solid var(--divider); }
.task-item.task-urgent { border-left-color: var(--red); }
.task-item-head { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.task-status-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 700; }
.task-status-new { background: var(--tint); color: var(--primary); }
.task-status-seen { background: var(--orange-tint); color: var(--orange); }
.task-status-done { background: var(--green-tint); color: var(--green); }
.task-urgent-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 700; background: var(--red-tint); color: var(--red); }
.task-text { font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: 8px; }
.task-meta { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 8px; flex-wrap: wrap; gap: 4px; }
.task-done-btn { width: 100%; }

.task-category-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 600; background: var(--violet-tint); color: var(--violet); }
.task-deadline-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 600; background: var(--surface-2); color: var(--text-muted); }
.task-deadline-chip.task-deadline-overdue { background: var(--red-tint); color: var(--red); }
.task-created-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 600; background: var(--surface-2); color: var(--text-muted); }
.task-time-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 700; background: var(--green-tint); color: var(--green); }
.task-time-chip.task-time-soon { background: var(--orange-tint); color: var(--orange); }
.task-time-chip.task-time-overdue { background: var(--red-tint); color: var(--red); }
.task-unread-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 800; background: var(--danger); color: var(--surface-card); }

/* ---------- Xodimlar reytingi ---------- */
.rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--divider);
}
.rating-row:last-child { border-bottom: none; }
.rating-rank {
  width: 32px;
  flex-shrink: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-muted);
}
.rating-main { flex: 1; min-width: 0; }
.rating-name { font-size: var(--fs-body); font-weight: 700; }
.rating-sub { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 1px; }
.rating-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.rating-metrics span {
  background: var(--surface-2);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.rating-score {
  flex-shrink: 0;
  text-align: right;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
}
.rating-score-label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
}
.task-actions-row { display: flex; gap: 8px; margin-top: 4px; }
.task-actions-row .mini-btn { flex: 1; }

.task-comments-wrap { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); }
.task-comments-list { margin-bottom: 8px; }
.task-comment-item { background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 6px; }
.task-comment-author { font-size: var(--fs-caption); font-weight: 700; color: var(--primary); }
.task-comment-text { font-size: var(--fs-body-sm); margin-top: 2px; }
.task-comment-time { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 3px; }
.task-comment-add { display: flex; gap: 6px; }
.task-comment-add input { flex: 1; margin: 0; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--divider); font-size: var(--fs-body-sm); }
.task-comment-add button { margin: 0; white-space: nowrap; }

.task-daily-number { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 700; background: var(--surface-2); padding: 3px 8px; border-radius: 20px; }
.task-student-info { background: var(--violet-tint); border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--fs-caption); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-student-status { background: var(--info); color: var(--surface-card); font-size: var(--fs-caption); font-weight: 700; padding: 2px 8px; border-radius: 20px; }

/* ---------- Hisobotlar: Topshiriqlar tarixi ---------- */
.task-report-role-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.task-report-role-name { font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: 600; }
.task-report-role-total { font-size: var(--fs-caption); color: var(--text-muted); }
.task-report-mini-stats { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 10px; }
.task-report-employees { border-top: 1px solid var(--divider); padding-top: 8px; }
.task-report-emp-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: var(--fs-caption); }
.task-report-emp-name { font-weight: 600; }
.task-report-emp-stats { color: var(--text-muted); text-align: right; }

/* ---------- Avans/Rashchyot modal ---------- */
.amount-choice-row { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.amount-choice-option { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body-sm); padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; }
.amount-choice-option input { width: auto; margin: 0; }
#amountChoiceManualInput { margin-bottom: 8px; }

/* ---------- Moliya: rol boyicha ---------- */
.role-category-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.role-category-card { background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); }
.role-category-label { font-size: var(--fs-caption); color: var(--text); font-weight: 700; margin-bottom: 10px; }
.role-category-values { display: flex; align-items: center; }
.role-category-value-col { flex: 1; text-align: center; }
.role-category-value-num { font-size: var(--fs-amount-lg); line-height: var(--lh-amount-lg); font-weight: 600; }
.role-category-value-label { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }
.role-category-divider { width: 1px; align-self: stretch; background: var(--divider); margin: 0 12px; }

/* ---------- Toast ---------- */
.app-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--text-strong); color: var(--surface-card); padding: 12px 20px; border-radius: var(--r-md);
  font-size: var(--fs-body-sm); max-width: 90%; text-align: center; z-index: 9999; opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); box-shadow: var(--shadow-lg);
}
.app-toast.app-toast-visible { opacity: 1; transform: translate(-50%, 0); }
.app-toast-error { background: var(--danger); }
.app-toast-warning { background: var(--warning); color: #1f1400; }

/* ---------- Gate belgilash ---------- */
.criterion-gate-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 600; background: var(--surface-2); color: var(--text-muted); }
.criterion-gate-chip.criterion-gate-warn { background: var(--red-tint); color: var(--red); }
.criterion-rank-below-gate { background: var(--red-tint); margin: 0 -18px; padding: 11px 18px; border-radius: var(--r-sm); }
.criterion-gate-flag { display: inline-block; font-size: var(--fs-caption); color: var(--red); font-weight: 700; margin-left: 6px; }
.criterion-rank-raw { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 1px; }

/* ---------- Asosiy qoidalar ---------- */
.rule-hero { border-radius: var(--r-xl); padding: 22px; text-align: center; margin-bottom: 16px; color: var(--text-on-brand); }
.rule-hero-teacher { background: var(--brand); }
.rule-hero-edu { background: var(--info); }

.rule-step-card { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); }
.rule-step-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-body-sm); }
.rule-step-text { font-size: var(--fs-body-sm); line-height: 1.5; }
.rule-step-warning { border-left: 4px solid var(--orange); }
.rule-step-warning .rule-step-num { background: var(--orange-tint); color: var(--orange); }
.rule-step-danger { border-left: 4px solid var(--red); }
.rule-step-danger .rule-step-num { background: var(--red-tint); color: var(--red); }

.rule-criterion-card { background: var(--surface); border-radius: var(--r-lg); margin-bottom: 10px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); overflow: hidden; }
.rule-criterion-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.rule-criterion-head:hover { background: var(--surface-hover); }
.rule-criterion-icon { font-size: 20px; flex-shrink: 0; }
.rule-criterion-titles { flex: 1; }
.rule-criterion-label { font-size: var(--fs-body); font-weight: 700; }
.rule-criterion-sub { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 1px; }
.rule-criterion-chevron { color: var(--text-muted); font-size: 16px; }
.rule-criterion-body { padding: 0 16px 14px; }
.rule-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.rule-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--divider); }
.rule-table td { padding: 6px 8px; border-bottom: 1px solid var(--divider); }
.rule-table tr:last-child td { border-bottom: none; }

/* ---------- Sotuv menejeri KPI paneli ---------- */
.kpi-goal-row { padding: 12px 0; border-bottom: 1px solid var(--divider); }
.kpi-goal-row:last-child { border-bottom: none; }
.kpi-goal-head { display: flex; justify-content: space-between; font-size: var(--fs-body-sm); font-weight: 600; margin-bottom: 6px; }
.kpi-goal-count { color: var(--text-muted); font-weight: 700; }
.kpi-goal-track { width: 100%; height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.kpi-goal-fill { height: 100%; border-radius: 6px; background: var(--brand); transition: width 0.4s var(--ease); }
.kpi-goal-fill.kpi-goal-done { background: var(--success); }
.kpi-goal-sub { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 5px; }

.kpi-tip-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); margin-bottom: 8px; font-size: var(--fs-body-sm); line-height: 1.4; }
.kpi-tip-row:last-child { margin-bottom: 0; }
.kpi-tip-icon { font-size: 16px; flex-shrink: 0; }
.kpi-tip-row.tip-success { background: var(--green-tint); }
.kpi-tip-row.tip-info { background: var(--tint); }
.kpi-tip-row.tip-warning { background: var(--orange-tint); }

/* ---------- Topshiriqlar: statistika ---------- */
.task-my-stats-card { background: var(--brand); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 12px; color: var(--text-on-brand); }
.task-my-stats-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-body-sm); font-weight: 700; margin-bottom: 8px; }
.task-my-stats-rate { background: var(--surface-card); color: var(--brand); border-radius: 20px; padding: 2px 10px; font-size: var(--fs-body-sm); font-weight: 800; }
.task-my-stats-row { display: flex; gap: 14px; font-size: var(--fs-body-sm); font-weight: 600; opacity: 0.95; }
.task-my-penalty-alert { margin-top: 10px; background: color-mix(in srgb, var(--text-on-brand) 15%, transparent); border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--fs-caption); }
.task-my-penalty-ok { margin-top: 10px; background: color-mix(in srgb, var(--text-on-brand) 15%, transparent); border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--fs-caption); font-weight: 600; }

/* ---------- Topshiriqlar v2 ---------- */
.task-card-v2 { background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); border-left: 4px solid var(--divider); }
.task-card-v2.task-urgent { border-left-color: var(--red); }
.task-card-v2.task-overdue-border { border-left-color: var(--danger); background: var(--danger-tint); }
.task-card-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.task-card-parties { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); color: var(--text-muted); margin-bottom: 8px; flex-wrap: wrap; }
.task-party-from { font-weight: 700; color: var(--text); }
.task-party-arrow { opacity: 0.5; }
.task-party-to { font-weight: 600; }
.task-card-bottom-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.task-speed-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 700; background: var(--orange-tint); color: var(--orange); }
.task-penalty-row { background: var(--red-tint); color: var(--red); border-radius: var(--r-sm); padding: 7px 10px; font-size: var(--fs-caption); margin: 6px 0; }

/* ---------- Topshiriqlar: filtr ---------- */
#taskFilterWrap .card { margin-bottom: 12px; }

/* ---------- Sozlamalar ---------- */
.task-category-manage-list { margin-bottom: 12px; }
.task-category-manage-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: var(--fs-body-sm); }
.task-category-manage-row:last-child { border-bottom: none; }

/* ============================================================
   LANDING PAGE — kirishdan oldingi tanishtiruv sahifasi
   ============================================================ */

.lp-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; max-width: 1080px; margin: 0 auto;
}
.lp-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.lp-logo-mark { display: block; width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.lp-nav-cta {
  padding: 9px 18px; border-radius: var(--r-md); background: var(--brand); color: var(--text-on-brand);
  font-weight: 600; font-size: 14px; text-decoration: none;
  transition: opacity 0.2s var(--ease);
}
.lp-nav-cta:hover { opacity: 0.9; }

.lp-hero { max-width: 780px; margin: 0 auto; padding: 60px 24px 40px; text-align: center; }
.lp-eyebrow {
  display: inline-block; padding: 6px 14px; border-radius: 20px; background: var(--tint); color: var(--primary);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 20px;
}
.lp-hero h1 {
  font-size: 40px; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 18px; font-weight: 800;
}
.lp-hero h1 span {
  color: var(--brand);
}
.lp-hero p { font-size: 17px; color: var(--text-muted); line-height: 1.6; margin: 0 0 32px; }
.lp-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-btn-primary {
  padding: 14px 26px; border-radius: var(--r-md); background: var(--brand); color: var(--text-on-brand);
  font-weight: 700; font-size: 15px; text-decoration: none;
  transition: transform 0.15s var(--ease), opacity 0.2s var(--ease);
}
.lp-btn-primary:hover { transform: translateY(-1px); opacity: 0.95; }
.lp-btn-secondary {
  padding: 14px 26px; border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid var(--divider);
  transition: background 0.15s var(--ease);
}
.lp-btn-secondary:hover { background: var(--surface-2); }

.lp-section { max-width: 1080px; margin: 0 auto; padding: 40px 24px; }
.lp-section-head { text-align: center; max-width: 560px; margin: 0 auto 36px; }
.lp-section-head h2 {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
  text-transform: none; margin: 0 0 10px;
}
.lp-section-head p { font-size: 15px; color: var(--text-muted); margin: 0; }

.lp-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 720px) { .lp-features { grid-template-columns: 1fr; } }
.lp-feature-card {
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-xl);
  padding: 26px 22px; box-shadow: var(--shadow-sm); transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease);
}
.lp-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lp-feature-icon {
  width: 46px; height: 46px; border-radius: var(--r-md); background: var(--tint);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px;
}
.lp-feature-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.lp-feature-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0; }

.lp-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 820px) { .lp-roles { grid-template-columns: repeat(2, 1fr); } }
.lp-role-chip {
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-lg);
  padding: 18px 14px; text-align: center; box-shadow: var(--shadow-sm);
}
.lp-role-chip .lp-role-icon { font-size: 24px; margin-bottom: 8px; }
.lp-role-chip .lp-role-name { font-size: 13px; font-weight: 700; }

.lp-cta-band {
  max-width: 1080px; margin: 20px auto 0; padding: 48px 24px; text-align: center;
  background: var(--brand); border-radius: var(--r-xl); color: var(--text-on-brand);
}
.lp-cta-band h2 { font-size: 24px; font-weight: 800; margin: 0 0 10px; text-transform: none; color: var(--text-on-brand); }
.lp-cta-band p { font-size: 15px; opacity: 0.9; margin: 0 0 24px; }
.lp-cta-band .lp-btn-primary { background: var(--surface-card); color: var(--brand); box-shadow: none; }
.lp-cta-band .lp-btn-primary:hover { opacity: 0.92; }

.lp-footer { text-align: center; padding: 30px 24px 40px; color: var(--text-muted); font-size: 12.5px; }

/* ---------- Login sahifasi ---------- */
.login-card {
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-xl);
  padding: 36px 30px; box-shadow: var(--shadow-md); text-align: center; max-width: 360px; width: 100%;
}
.login-logo { display: block; width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 22px; box-shadow: var(--shadow-md); }
.login-card h1 { font-size: 20px; margin-bottom: 6px; }
.login-card p { color: var(--text-muted); font-size: 13.5px; margin-bottom: 22px; }

/* ============================================================
   APP SHELL — chap tomonda doimiy menyu (sidebar) + asosiy kontent
   ============================================================ */

body.shell-active { padding-bottom: 0; }

.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: 236px; /* dizayndagi kenglik (docs/design) */
  flex-shrink: 0;
  background: var(--surface-card);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
  transition: transform 0.25s var(--ease);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-strong);
  font-family: inherit;
  text-align: left;
  width: 100%;
  cursor: default;
}
.sidebar-brand-link { cursor: pointer; border-radius: 9px; }
.sidebar-brand-link:hover { opacity: 0.8; }
.sidebar-brand-mark { display: block; width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; }

.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}
.sidebar-user-avatar {
  width: 30px; height: 30px; border-radius: var(--radius-pill); flex-shrink: 0;
  background: var(--brand); color: var(--text-on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: 600;
}
.sidebar-user > div { min-width: 0; }
.sidebar-user-name, .sidebar-user-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-name { font-size: var(--fs-body-sm); line-height: 18px; font-weight: 600; }
.sidebar-user-role { font-size: var(--fs-caption); line-height: 16px; color: var(--text-faint); }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  padding: 2px; /* fokus halqasi kesilib qolmasligi uchun */
  margin: -2px;
}
/* Guruh sarlavhasi — bosilmaydi */
.sidebar-group {
  margin-top: 10px;
  padding: 0 12px 4px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-faint);
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sidebar-item .ui-icon { flex: none; }
.sidebar-item:hover { background: var(--surface-hover); color: var(--text-strong); }
.sidebar-item.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.sidebar-item:focus-visible, .sidebar-action:focus-visible, .sidebar-brand-link:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.sidebar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sidebar-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
}
.sidebar-count--danger { color: var(--danger); }
.sidebar-count--warning { color: var(--warning); }

/* O'chiq bo'lim (feature flag): kulrang, bosilmaydi */
.sidebar-item--disabled { color: var(--text-faint); cursor: default; }
.sidebar-item--disabled:hover { background: transparent; color: var(--text-faint); }
.sidebar-off { margin-left: auto; font-size: 11px; color: var(--text-faint); font-weight: 400; }

/* Joriy KPI (CEO/direktordan tashqari) */
.sidebar-kpi {
  padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.sidebar-kpi-head { font-size: 11px; line-height: 16px; font-weight: 600; color: var(--text-faint); }
.sidebar-kpi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
.sidebar-kpi-pct { font-family: var(--font-mono); font-size: var(--fs-card-title); font-weight: 600; color: var(--brand); }
.sidebar-kpi-sum { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }
.sidebar-kpi-empty { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }

.sidebar-footer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-action {
  display: flex; align-items: center; gap: 10px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sidebar-action-icon { display: inline-flex; flex: none; }
.sidebar-action:hover { background: var(--surface-hover); color: var(--text-strong); }

/* ---------- Yuqori panel (kontent ustida) — qo'ng'iroqcha shu yerda ---------- */
.app-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.app-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  position: sticky;
  top: 0;
  z-index: 30;
}
.app-topbar-brand {
  font-weight: 800;
  font-size: 14.5px;
  display: none;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  padding: 0;
  cursor: default;
}
.app-topbar-brand-mark { display: block; width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
.app-topbar-brand-link { cursor: pointer; }
.app-topbar-brand-link:hover { color: var(--primary); }
.app-topbar-spacer { flex: 1; }
.app-topbar #sidebarOpenBtn { display: none; }

.notif-bell {
  position: relative;
  border: none;
  background: var(--surface-2);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s var(--ease);
}
.notif-bell:hover { background: var(--tint); }
.notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--danger);
  color: var(--surface-card);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  display: none;
  box-shadow: 0 0 0 2px var(--surface);
}
.notif-bell.has-unread {
  background: var(--red-tint);
  animation: bell-shake 1.6s var(--ease) infinite;
}
.notif-bell.has-unread .notif-badge { display: block; }

@keyframes bell-shake {
  0%, 55%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(14deg); }
  65% { transform: rotate(-12deg); }
  70% { transform: rotate(9deg); }
  75% { transform: rotate(-7deg); }
  80% { transform: rotate(4deg); }
  85% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .notif-bell.has-unread { animation: none; }
}

/* ---------- Bildirishnomalar ro'yxati (qo'ng'iroqcha ostidagi panel) ---------- */
.notif-wrap { position: relative; }
.notif-panel[hidden] { display: none; }
.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 28px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  overflow: hidden;
}
.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-body-sm);
  font-weight: 800;
}
.notif-mark-all {
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: var(--fs-caption);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: right;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { overflow-y: auto; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--divider);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-hover); }
.notif-item-unread { background: var(--tint); }
.notif-item-unread:hover { background: var(--tint-strong); }
.notif-item-icon { font-size: 16px; flex-shrink: 0; line-height: 1.4; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
  display: block;
  font-size: var(--fs-body-sm);
  color: var(--text);
  line-height: 1.45;
}
.notif-item-preview {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-item-time { display: block; font-size: var(--fs-caption); color: var(--text-muted); margin-top: 4px; }
.notif-empty { padding: 26px 14px; text-align: center; font-size: var(--fs-body-sm); color: var(--text-muted); }

/* Bildirishnomadan ochilgan kartochka — qisqa vaqt ajratib ko'rsatiladi */
.task-card-focused {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  transition: outline-color 0.4s var(--ease);
}

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--overlay);
  z-index: 35;
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 28px 32px 48px;
}
.app-main-inner { max-width: 900px; margin: 0 auto; }
.app-main-inner--wide { max-width: 1240px; }
.section-tabs { margin-bottom: var(--space-5); }

@media (max-width: 900px) {
  .app-main { padding: 20px 16px 40px; }
}

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .app-topbar { padding: 10px 14px; }
  .app-topbar-brand { display: inline-flex; align-items: center; gap: 8px; }
  .app-topbar #sidebarOpenBtn { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .app-shell.sidebar-open .sidebar-overlay { display: block; }
}

/* ---------- Mening o'quvchilarim ---------- */
.students-head-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.students-count-chip {
  background: var(--tint);
  color: var(--primary);
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
}
.student-list { margin-top: 14px; }
.student-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider);
  cursor: pointer;
  transition: transform 0.1s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
.student-row:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.student-row:active { transform: scale(0.98); }
.student-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.student-row-main { flex: 1; min-width: 0; }
.student-row-name {
  font-size: var(--fs-body);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-row-meta {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-top: 2px;
}
.students-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
}
.students-empty-icon { font-size: 34px; margin-bottom: 10px; }
.students-empty-text { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.students-empty-sub { font-size: var(--fs-caption); margin-top: 4px; }

.student-detail-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  margin: 0 auto 10px;
  box-shadow: var(--shadow-md);
}
.students-anketa-stub {
  text-align: center;
  padding: 22px 16px;
  color: var(--text-muted);
}
.students-anketa-icon { font-size: 26px; margin-bottom: 6px; }
.students-anketa-text { font-size: var(--fs-body-sm); }

.sf-group-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 16px 0 8px;
}
.sf-group-label:first-child { margin-top: 4px; }

/* ---------- Guruhlarim: dars kunlari tanlash ---------- */
.weekday-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.weekday-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--input-bg);
  border: 1px solid var(--divider);
  cursor: pointer;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-muted);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.weekday-chip.checked {
  background: var(--tint);
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- Guruhga o'quvchi biriktirish: belgilanadigan ro'yxat ---------- */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  background: var(--input-bg);
  margin-bottom: 6px;
  cursor: pointer;
  font-size: var(--fs-body-sm);
}
.check-row:last-child { margin-bottom: 0; }

/* ---------- Guruh ichi: ma'lumot kartasi ---------- */
.group-info-card .row:last-of-type { border-bottom: none; }
.group-info-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

/* ---------- Guruh ichi: o'quvchilar ro'yxati (roster) ---------- */
.roster-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: 10px;
}
.roster-legend span { display: flex; align-items: center; gap: 5px; }
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.status-faol { background: var(--green); }
.status-dot.status-qarzdor { background: var(--red); }
.status-dot.status-sinov { background: var(--info); }
.status-dot.status-muzlatilgan { background: var(--orange); }
.roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-body-sm);
}
.roster-row:last-child { border-bottom: none; }
.roster-num { color: var(--text-muted); font-size: var(--fs-caption); width: 18px; flex-shrink: 0; }
.roster-name { flex: 1; font-weight: 600; }
.roster-phone { color: var(--text-muted); font-size: var(--fs-caption); white-space: nowrap; }

/* ---------- Guruh ichi: Davomat/Baholash/Mashqlar pivot jadvali ---------- */
.pivot-table-wrap { overflow-x: auto; padding: 10px; }
.pivot-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pivot-table th, .pivot-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--divider);
  white-space: nowrap;
}
.pivot-table th { color: var(--text-muted); font-weight: 600; font-size: 11px; }
.pivot-name-cell {
  text-align: left !important;
  font-weight: 600;
  position: sticky;
  left: 0;
  background: var(--surface);
  min-width: 130px;
}
.pivot-cell {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--divider);
  background: var(--input-bg);
  cursor: pointer;
  font-size: 15px;
}
.pivot-input {
  width: 52px;
  padding: 6px 4px;
  margin: 0;
  text-align: center;
  font-size: 12.5px;
}
.pivot-unit-row th { padding-top: 2px; padding-bottom: 8px; }
.pivot-unit-input {
  width: 70px;
  padding: 4px;
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}

/* ---------- Guruh ichi: Reyting oy grafigi ---------- */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding: 10px 6px 0;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--divider);
}
.bar-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
}
.bar-chart-bar {
  width: 100%;
  max-width: 18px;
  background: var(--brand);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height 0.3s var(--ease);
}
.bar-chart-label { font-size: 9.5px; color: var(--text-muted); padding-bottom: 6px; }

/* ---------- Guruh ichi: Davomat belgilari (keldi/kech qoldi/kelmadi) ---------- */
.pivot-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.pivot-flag-present { background: var(--brand); color: var(--text-on-brand); }
.pivot-flag-late { background: var(--orange-tint); color: var(--orange); }
.pivot-flag-absent { background: var(--red-tint); color: var(--red); }

/* ---------- Guruh ichi: Davomat belgilash oynasi ---------- */
.attendance-choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.att-choice-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--divider);
  background: var(--input-bg);
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.att-choice-btn.active {
  background: var(--tint);
  border-color: var(--primary);
  color: var(--primary);
}

/* ============================================================
   TOPSHIRIQLAR EKRANI — faqat joylashuv; ko'rinish komponentlardan (components.css)
   ============================================================ */
.tasks-screen { display: flex; flex-direction: column; gap: var(--space-4); }
.tasks-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.tasks-title { margin: 0; font-size: var(--fs-page-title); line-height: var(--lh-page-title); font-weight: 600; letter-spacing: -0.01em; }
.tasks-sub { margin: 4px 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-muted); }
.tasks-sub .is-danger { color: var(--danger); font-weight: 600; }
.tasks-head-actions { display: flex; align-items: center; gap: var(--space-3); }
.tasks-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.tasks-bar-right { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tasks-search { width: 280px; }
.tasks-search .ui-field__control { height: 36px; }
.tasks-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tasks-result {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--space-4);
  padding: 10px var(--space-4); background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  font-size: var(--fs-body-sm); color: var(--text-muted);
}
.tasks-result b { color: var(--text-strong); font-weight: 600; }
.tasks-result .is-danger { color: var(--danger); }
.tasks-list { display: flex; flex-direction: column; gap: var(--space-3); }
.tasks-filter-panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3);
  padding: var(--space-4); background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.tasks-filter-panel[hidden] { display: none; }

/* Telefon (390px): 2 ta tab, chiplar yonma-yon scroll, doska o'rniga ro'yxat, bosiladigan joy >= 44px */
@media (max-width: 640px) {
  .tasks-title { font-size: 20px; line-height: 26px; }
  .tasks-bar, .tasks-bar-right { width: 100%; }
  .tasks-search { width: 100%; }
  .tasks-viewswitch { display: none; }
  .tasks-screen .ui-tabs-pill { width: 100%; }
  .tasks-screen .ui-tabs-pill__tab { flex: 1 1 0; justify-content: center; }
  .tasks-screen .ui-tabs-pill__tab[data-tab="all"], .tasks-screen .ui-tabs-pill__tab[data-tab="history"] { display: none; }
  .tasks-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .tasks-chips::-webkit-scrollbar { display: none; }
  .tasks-chips .ui-chip, .tasks-chips .ui-chip-clear { flex: none; }
  .tasks-screen .ui-btn, .tasks-screen .ui-chip, .tasks-screen .ui-chip-clear,
  .tasks-screen .ui-tabs-pill__tab, .tasks-screen .ui-pager__btn, .tasks-screen .ui-pager__page,
  .tasks-search .ui-field__control { min-height: 44px; }
  .tasks-screen .ui-btn--sm { height: auto; }
  .tasks-screen .ui-btn--icon-only { min-width: 44px; }
}

/* ============================================================
   XODIMLAR EKRANI — docs/design/xodimlar-royxat.html, xodimlar-scorecard.html, forma-scorecard.html
   ============================================================ */
.staff-screen { display: flex; flex-direction: column; gap: var(--space-4); }
.staff-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.staff-head-actions { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.staff-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.staff-toolbar-spacer { flex: 1 1 auto; }
.staff-filter { min-width: 150px; }
.staff-filter .ui-field__control { height: 36px; }
.staff-avg { font-size: var(--fs-body-sm); color: var(--text-muted); }
.staff-avg b { color: var(--text-strong); font-weight: 600; }
.staff-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.staff-name-btn {
  display: block; padding: 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-strong); border-radius: var(--radius-sm);
}
.staff-name-btn:hover { color: var(--brand); text-decoration: underline; }
.staff-name-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.staff-subtitle { margin: var(--space-2) 0 0; }
.staff-role-title { margin: var(--space-2) 0 0; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.staff-role-title span { font-weight: 400; color: var(--text-muted); margin-left: var(--space-2); }
.staff-note { font-size: var(--fs-caption); line-height: 18px; color: var(--text-muted); padding: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.staff-more { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.staff-more > summary { padding: var(--space-3) var(--space-4); cursor: pointer; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.staff-more[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.staff-more > div { padding: var(--space-4); }
.staff-bonus { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); align-items: end; }
.staff-bonus__actions { display: flex; align-items: center; gap: var(--space-3); }
.sc-kpi-low { color: var(--danger); }
.sc-kpi-ok { color: var(--success); }
.sc-banner-ok { display: flex; align-items: center; gap: var(--space-2); }

/* Oxirgi 3 oy — mini ustunlar */
.sc-spark-cell { display: inline-flex; align-items: center; white-space: nowrap; }
.sc-spark { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; vertical-align: middle; }
.sc-spark__bar { width: 8px; border-radius: 2px; background: var(--border-strong); }
.sc-spark__bar--success { background: var(--success); }
.sc-spark__bar--danger { background: var(--danger); }
.sc-spark__bar--empty { background: var(--border-subtle); }
.sc-spark__label { margin-left: 6px; font-size: var(--fs-caption); color: var(--text-muted); vertical-align: middle; }

/* Scorecard formasi — modal, pastki yig'ma qotib turadi */
.sc-modal-overlay { align-items: flex-start; overflow-y: auto; }
.sc-modal {
  width: 100%; max-width: 820px; margin: auto; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
}
.sc-taskform { max-width: 560px; }
.sc-modal__head { display: flex; align-items: center; gap: var(--space-3); padding: 18px var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.sc-taskform .sc-modal__head { padding: 0 0 var(--space-3); margin-bottom: var(--space-3); }
.sc-modal__avatar {
  width: 36px; height: 36px; border-radius: var(--radius-pill); flex: none;
  background: var(--brand-tint); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-body-sm); font-weight: 600;
}
.sc-modal__titles { flex: 1; min-width: 0; }
.sc-modal__title { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; color: var(--text-strong); flex: 1; }
.sc-modal__sub { margin: 2px 0 0; font-size: var(--fs-caption); color: var(--text-faint); }
.sc-modal__info { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--info-tint); color: var(--text-strong); font-size: var(--fs-caption); line-height: 17px; }
.sc-modal__info .ui-icon { color: var(--info); }
.sc-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 18px var(--space-5); display: flex; flex-direction: column; gap: 14px; }
.sc-modal__foot { flex: none; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-card); }
.sc-modal__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.sc-modal__actions-left { margin-right: auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.sc-modal__msg { font-size: var(--fs-caption); color: var(--text-muted); }

.sc-crit-list { display: flex; flex-direction: column; gap: 10px; }
.sc-crit {
  display: flex; align-items: center; gap: 14px; padding: var(--space-3) 14px;
  border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-card);
}
.sc-crit__name { width: 210px; flex: none; }
.sc-crit__label { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.sc-crit__meta { font-size: var(--fs-caption); color: var(--text-faint); }
.sc-crit__warn { display: none; }
.sc-crit__bar { flex: 1 1 auto; height: 8px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.sc-crit__bar span { display: block; width: 0; height: 100%; background: var(--success); transition: width 0.2s var(--ease); }
.sc-crit__input { width: 120px; flex: none; height: 36px; }
.sc-crit__input .ui-field__input { text-align: right; }
.sc-crit__ball { width: 74px; flex: none; text-align: right; font-size: var(--fs-body-sm); font-weight: 600; color: var(--success); }
/* Chegaradan past — sariq fonda */
.sc-crit.is-below { background: var(--warning-tint); border-color: var(--warning); }
.sc-crit.is-below .sc-crit__meta, .sc-crit.is-below .sc-crit__ball { color: var(--warning); }
.sc-crit.is-below .sc-crit__warn { display: inline; }
.sc-crit.is-below .sc-crit__bar { background: var(--surface-card); }
.sc-crit.is-below .sc-crit__bar span { background: var(--warning); }
.sc-crit.is-below .sc-crit__input { border-color: var(--warning); }
/* To'ldirilmagan — uzuq chegara, 0 ball */
.sc-crit.is-empty { border-style: dashed; border-color: var(--border-strong); }
.sc-crit.is-empty .sc-crit__ball { color: var(--text-faint); }
.sc-crit.is-invalid .sc-crit__input { border-color: var(--danger); }
.sc-empty-note { display: flex; align-items: center; gap: var(--space-2); padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; font-size: var(--fs-caption); color: var(--text-muted); }
.sc-empty-note[hidden] { display: none; }

.sc-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-page); border-radius: 12px; }
.sc-summary__label { font-size: var(--fs-caption); color: var(--text-muted); }
.sc-summary__big { font-size: var(--fs-page-title); line-height: var(--lh-page-title); font-weight: 600; color: var(--text-strong); }
.sc-summary__mid { font-size: var(--fs-section-title); line-height: var(--lh-section-title); font-weight: 600; color: var(--text-strong); }
.sc-summary__sep { width: 1px; height: 36px; background: var(--border-subtle); }
.sc-summary__hint { flex: 1 1 200px; font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); }

@media (max-width: 640px) {
  .staff-head-actions, .staff-head-actions .tasks-search { width: 100%; }
  .staff-filter { flex: 1 1 140px; }
  .staff-toolbar .ui-chip, .staff-screen .ui-btn, .staff-filter .ui-field__control { min-height: 44px; }
  .sc-modal-overlay { padding: 0; }
  .sc-modal { max-height: 100vh; border-radius: 0; }
  .sc-crit { flex-wrap: wrap; }
  .sc-crit__name { width: 100%; }
  .sc-crit__input { width: 120px; height: 44px; }
  .sc-summary__sep { display: none; }
}

/* ============================================================
   ISH HAQI EKRANI — docs/design/ish-haqi-joriy.html, ish-haqi-tarix.html
   ============================================================ */
.pay-hero {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--brand); color: var(--text-on-brand);
}
.pay-hero__label { font-size: var(--fs-body-sm); opacity: 0.85; }
.pay-hero__amount { font-size: 30px; line-height: 38px; font-weight: 600; margin-top: 2px; }
.pay-hero__amount span { font-family: var(--font-sans); font-size: var(--fs-section-title); font-weight: 500; opacity: 0.8; }
.pay-hero__sub { font-size: var(--fs-caption); opacity: 0.85; margin-top: 2px; }
.pay-warn { color: var(--warning); }
.pay-link {
  padding: 0; border: 0; background: none; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer;
  border-radius: var(--radius-sm);
}
.pay-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pay-bulk {
  position: sticky; top: 64px; z-index: 5;
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 10px var(--space-4); border-radius: var(--radius-md);
  background: var(--brand-tint); color: var(--text-strong); font-size: var(--fs-body-sm);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.pay-bulk[hidden] { display: none; }
.pay-bulk > span { margin-right: auto; }
.pay-confirm-list { list-style: none; margin: 10px 0; padding: 0; max-height: 220px; overflow-y: auto; border-top: 1px solid var(--border-subtle); }
.pay-confirm-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); }
.pay-confirm-total { font-size: var(--fs-body-sm); }
.pay-confirm-skip { font-size: var(--fs-caption); color: var(--text-muted); margin: 8px 0 0; }

.pay-history { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
.pay-history > * { min-width: 0; }
.pay-side { display: flex; flex-direction: column; gap: var(--space-4); }
.pay-panel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); }
.pay-panel[hidden] { display: none; }
.pay-panel__title { margin: 0 0 14px; font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: 600; color: var(--text-strong); text-transform: none; letter-spacing: 0; }
.pay-panel__note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); }
.pay-kv { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; font-size: var(--fs-body-sm); color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); }
.pay-kv:last-child { border-bottom: 0; }
.pay-kv b { color: var(--text-strong); font-weight: 600; }
.pay-who { min-width: 280px; }

/* KPI dinamikasi — ustunlar; ma'lumot yo'q oy — bo'sh (uzuq) ustun */
.pay-chart { display: flex; align-items: flex-end; gap: 10px; height: 140px; }
.pay-chart__col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pay-chart__val { font-size: 11px; color: var(--text-muted); min-height: 14px; }
.pay-chart__track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.pay-chart__bar { width: 100%; background: var(--border-strong); border-radius: 6px 6px 0 0; }
.pay-chart__bar.is-current { background: var(--success); }
.pay-chart__bar.is-empty { background: transparent; border: 1px dashed var(--border-strong); border-bottom: 0; }
.pay-chart__label { font-size: 11px; color: var(--text-faint); }

@media (max-width: 900px) {
  .pay-history { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pay-who { min-width: 0; flex: 1 1 100%; }
  .pay-hero__amount { font-size: 24px; line-height: 30px; }
  .pay-bulk { top: 56px; }
  .pay-link { min-height: 44px; }
}
.pay-nowrap { white-space: nowrap; }
/* Jadval ostidagi izoh qatorida holat rangi (components.css dagi .ui-table__sub rangidan ustun) */
.ui-table__sub.sc-kpi-ok { color: var(--success); }
.ui-table__sub.sc-kpi-low { color: var(--danger); }
.ui-table__sub.pay-warn { color: var(--warning); }

/* ============================================================
   BOSH SAHIFA (CEO paneli) — docs/design/panel-ceo.html, panel-bosh-holatlar.html
   ============================================================ */
.db-body { display: flex; flex-direction: column; gap: var(--space-4); }
.dash-tone-success { color: var(--success); }
.dash-tone-danger { color: var(--danger); }
.dash-tone-warning { color: var(--warning); }

.dash-top { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: var(--space-4); }
.dash-hero { background: var(--brand); color: var(--text-on-brand); border-radius: var(--radius-lg); padding: 18px 20px; }
.dash-hero__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.dash-hero__label { font-size: var(--fs-body-sm); line-height: 18px; opacity: 0.85; }
.dash-hero__amount { font-size: 34px; line-height: 42px; font-weight: 600; margin-top: 4px; }
.dash-hero__amount span { font-family: var(--font-sans); font-size: var(--fs-section-title); font-weight: 500; opacity: 0.8; }
/* O'zgarish chipi — oq (karta) fonda, rangi ma'noga qarab */
.dash-delta {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill);
  background: var(--surface-card); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap;
}
.dash-delta--success { color: var(--success); }
.dash-delta--danger { color: var(--danger); }
.dash-delta--neutral { color: var(--text-muted); }
.dash-delta-note { max-width: 260px; font-size: var(--fs-caption); line-height: 17px; opacity: 0.85; }
.dash-split { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-pill); overflow: hidden; margin: 18px 0 10px; background: color-mix(in srgb, var(--text-on-brand) 25%, transparent); }
.dash-split span { height: 100%; background: var(--surface-card); }
.dash-split__legend { display: flex; flex-wrap: wrap; gap: 6px var(--space-5); font-size: var(--fs-caption); line-height: 16px; }
.dash-split__legend b { font-weight: 600; }
.dash-side { display: flex; flex-direction: column; gap: var(--space-4); }
.dash-mini {
  flex: 1; display: flex; align-items: center; gap: 14px; padding: 14px var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.dash-mini__icon { width: 38px; height: 38px; flex: none; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.dash-mini__icon--info { background: var(--info-tint); color: var(--info); }
.dash-mini__icon--warning { background: var(--warning-tint); color: var(--warning); }
.dash-mini__num { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--text-strong); }
.dash-mini__label { font-size: var(--fs-body-sm); color: var(--text-muted); }

.db-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); }
.db-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: 14px; }
.db-card__titles { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.db-card__title { margin: 0; font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: 600; color: var(--text-strong); text-transform: none; letter-spacing: 0; }
.db-card__meta { font-size: var(--fs-caption); color: var(--text-faint); font-weight: 400; }
.db-card__foot { margin: 12px 0 0; font-size: var(--fs-caption); color: var(--text-faint); }
.db-card .ui-empty { border-radius: 12px; }

/* O'sish chipi — to'liq rangda */
.dash-growth { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--fs-body-sm); font-weight: 600; }
.dash-growth--up { background: var(--success-tint); color: var(--success); }
.dash-growth--down { background: var(--danger-tint); color: var(--danger); }

.dash-groups { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-4); }
.dash-group__title { font-size: var(--fs-caption); line-height: 16px; font-weight: 600; color: var(--text-muted); margin-bottom: var(--space-2); }
.dash-group__title span { font-weight: 400; color: var(--text-faint); }
.dash-group--risk .dash-group__title { color: var(--danger); }
.dash-group__grid { display: grid; gap: var(--space-2); }
.dash-group--grow .dash-group__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-group--quality .dash-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-group--risk .dash-group__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-metric { padding: 10px var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); min-width: 0; }
.dash-group--risk .dash-metric { background: color-mix(in srgb, var(--danger-tint) 45%, var(--surface-card)); }
.dash-metric--alert { border-color: var(--danger); background: var(--danger-tint) !important; }
.dash-metric__num { display: flex; align-items: center; gap: 4px; font-size: var(--fs-amount-lg); line-height: var(--lh-amount-lg); font-weight: 600; color: var(--text-strong); }
.dash-metric__label { font-size: var(--fs-caption); line-height: 16px; color: var(--text-muted); }
.dash-metric__note { font-size: 11px; line-height: 15px; margin-top: 2px; }

.dash-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.dash-ranks { display: flex; flex-direction: column; gap: 10px; }
.dash-rank { display: flex; align-items: center; gap: var(--space-3); }
.dash-rank__pos { width: 22px; height: 22px; flex: none; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: 600; }
.dash-rank__pos--success { background: var(--success-tint); color: var(--success); }
.dash-rank__pos--danger { background: var(--danger-tint); color: var(--danger); }
.dash-rank__name { width: 160px; flex: none; font-size: var(--fs-body-sm); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-rank__bar { flex: 1; height: 8px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.dash-rank__bar span { display: block; height: 100%; }
.dash-rank__fill--success { background: var(--success); }
.dash-rank__fill--danger { background: var(--danger); }
.dash-rank__pct { width: 52px; flex: none; text-align: right; font-size: var(--fs-body-sm); font-weight: 600; }
.dash-empty { padding: var(--space-4); border: 1px dashed var(--border-strong); border-radius: 12px; }
.dash-empty__title { font-size: var(--fs-body-sm); line-height: 19px; font-weight: 600; color: var(--text-strong); }
.dash-empty p { margin: 6px 0 0; font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); }
.dash-empty--row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dash-empty--row > div { flex: 1 1 260px; }

.dash-profit { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--text-muted); }
.dash-profit b { font-size: var(--fs-section-title); font-weight: 600; }
.dash-bars { display: flex; flex-direction: column; gap: var(--space-3); }
.dash-bars__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 5px; font-size: var(--fs-body-sm); color: var(--text-strong); }
.dash-bars__track { height: 10px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.dash-bars__track span { display: block; height: 100%; }
.dash-bars__fill--brand { background: var(--brand); }
.dash-bars__fill--warning { background: var(--warning); }
.dash-bars__fill--danger { background: var(--danger); }

@media (max-width: 1100px) {
  .dash-groups { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dash-top, .dash-two { grid-template-columns: 1fr; }
  .dash-side { flex-direction: row; }
  .dash-group--grow .dash-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-group--risk .dash-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-hero__amount { font-size: 26px; line-height: 32px; }
  .dash-rank__name { width: 110px; }
}
@media (max-width: 480px) {
  .dash-side { flex-direction: column; }
}
.sc-banner-title .ui-icon { vertical-align: -3px; margin-right: 4px; }

/* ============================================================
   MOLIYA — docs/design/moliya-tushum.html, moliya-pnl.html
   ============================================================ */
.fin-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.fin-tone--success { color: var(--success); }
.fin-tone--warning { color: var(--warning); }
.fin-tone--danger { color: var(--danger); }
.fin-fill--brand { background: var(--brand); }
.fin-fill--success { background: var(--success); }
.fin-fill--warning { background: var(--warning); }
.fin-fill--danger { background: var(--danger); }
.fin-muted { color: var(--text-faint); }
.fin-spacer { flex: 1 1 auto; }
.fin-sortnote { font-size: var(--fs-body-sm); color: var(--text-muted); }
.fin-actions { display: flex; gap: var(--space-2); }
.fin-note { margin: 0; font-size: var(--fs-caption); line-height: 18px; color: var(--text-muted); }
.fin-editnote {
  padding: 10px var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-body-sm);
  background: var(--brand-tint); color: var(--text-strong); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}

.fin-cards { display: grid; gap: var(--space-4); }
.fin-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fin-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 14px var(--space-4); min-width: 0; }
.fin-card--success { border-color: var(--success); }
.fin-card--danger { border-color: var(--danger); }
.fin-card--empty { padding: 0; border: 0; background: none; }
.fin-card--empty .ui-empty { height: 100%; box-sizing: border-box; padding: var(--space-4); border-radius: var(--radius-lg); }
.fin-card__label { font-size: var(--fs-body-sm); color: var(--text-muted); }
.fin-card__value { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--text-strong); }
.fin-card__value.fin-tone--success, .fin-card__value.fin-tone--warning, .fin-card__value.fin-tone--danger { color: inherit; }
.fin-card__value.fin-tone--success .ui-num { color: var(--success); }
.fin-card__value.fin-tone--warning .ui-num { color: var(--warning); }
.fin-card__value.fin-tone--danger .ui-num { color: var(--danger); }
.fin-card__pct { font-size: 15px; line-height: 20px; }
.fin-card__sub { margin-top: 4px; font-size: var(--fs-caption); color: var(--text-muted); }
.fin-card__sub.fin-tone--warning { color: var(--warning); }
.fin-card__note { display: block; margin-top: 2px; font-size: 11px; line-height: 15px; color: var(--text-faint); }
.fin-card__extra { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.fin-card__extra-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-caption); color: var(--text-muted); }
.fin-card__extra-row b { color: var(--text-strong); font-weight: 600; }
.fin-bar { height: 8px; margin-top: 12px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.fin-bar span { display: block; height: 100%; }

/* Ulush ustuni — chiziq va foiz */
.fin-share { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.fin-share__track { flex: 1; height: 8px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.fin-share__track span { display: block; height: 100%; }
.fin-share__pct { width: 52px; flex: none; text-align: right; font-weight: 600; }
#rvTable td:first-child { min-width: 180px; }
#rvTable .ui-field { margin: 0; min-width: 140px; }
#rvTable .ui-field__control { height: 34px; }
#rvTable .ui-field__input { text-align: right; }

/* Foyda va zarar */
.fin-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.fin-grid > * { min-width: 0; }
.fin-side { display: flex; flex-direction: column; gap: var(--space-4); }
.fin-panel .ui-table-wrap { border-radius: var(--radius-md); }
.fin-cat { font-size: 14px; color: var(--text-strong); }
.fin-panel__note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-caption); line-height: 18px; color: var(--text-muted); }
.fin-trend { display: flex; flex-direction: column; gap: var(--space-3); }
.fin-trend__row { display: flex; align-items: center; gap: var(--space-3); min-height: 18px; }
.fin-trend__month { width: 72px; flex: none; font-size: var(--fs-caption); line-height: 16px; color: var(--text-muted); }
.fin-trend__row.is-current .fin-trend__month { color: var(--text-strong); font-weight: 600; }
.fin-trend__track { flex: 1; height: 10px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.fin-trend__track span { display: block; height: 100%; }
.fin-trend__pct { width: 56px; flex: none; text-align: right; font-size: var(--fs-caption); font-weight: 600; }
.fin-trend__none { flex: 1; font-size: var(--fs-caption); color: var(--text-faint); }
.fin-details { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 0 var(--space-4); }
.fin-details > summary { cursor: pointer; padding: 14px 0; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); border-radius: var(--radius-sm); }
.fin-details > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fin-details[open] { padding-bottom: var(--space-4); }

@media (max-width: 1100px) {
  .fin-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fin-cards--3 { grid-template-columns: 1fr; }
  .fin-sortnote { flex: 1 1 100%; }
  .fin-spacer { display: none; }
}
@media (max-width: 480px) {
  .fin-cards--4 { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .fin-card__value { font-size: 18px; line-height: 24px; }
}

/* ============================================================
   KPI TIZIMI — docs/design/sozlamalar-kpi.html (Parametrlar) + Qoidalar
   ============================================================ */
.kp-head-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.kp-last { font-size: var(--fs-body-sm); color: var(--text-muted); }
.kp-nosave {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-md);
  background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-body-sm); font-weight: 500;
}
.kp-ro-note {
  padding: 10px var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-body-sm);
  background: var(--info-tint); color: var(--text-strong); border: 1px solid color-mix(in srgb, var(--info) 35%, transparent);
}
.kp-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.kp-grid > * { min-width: 0; }
.kp-main { display: flex; flex-direction: column; gap: var(--space-4); }
.kp-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: var(--space-4); }
.kp-lead { margin: -6px 0 14px; font-size: var(--fs-body-sm); color: var(--text-muted); }
.kp-grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.kp-count { font-weight: 400; color: var(--text-muted); }
.kp-count--zero { color: var(--text-faint); }
.kp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.kp-fields .ui-field__help { margin-top: 4px; }
.kp-warn-line { margin: 4px 0 0; font-size: var(--fs-caption); line-height: 17px; color: var(--warning); }
.kp-screen .ui-field__input[aria-invalid="true"] { border-color: var(--danger); }
.kp-screen .ui-field__input:disabled { color: var(--text-strong); opacity: 1; background: var(--surface-sunken); }

.kp-crit-table td { vertical-align: middle; }
.kp-crit { font-weight: 600; color: var(--text-strong); }
.kp-gate { display: inline-block; width: 96px; }
.kp-gate .ui-field__control { height: 34px; }
.kp-gate .ui-field__input { text-align: right; }
.kp-row--low td { background: color-mix(in srgb, var(--warning-tint) 60%, transparent); }
.kp-low { color: var(--warning); font-weight: 600; }
.kp-crit-table .ui-table__sub { font-family: var(--font-sans); }
.kp-focus { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius-md); }
tr.kp-focus td { background: var(--brand-tint); }

.kp-impact .db-card__title, #kpExample .db-card__title { margin-bottom: 10px; }
.kp-impact__lead { margin: 0 0 10px; font-size: var(--fs-body-sm); line-height: 19px; color: var(--text-muted); }
.kp-kv { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); color: var(--text-muted); }
.kp-kv:last-child { border-bottom: 0; }
.kp-kv b { color: var(--text-strong); font-weight: 600; white-space: nowrap; }
.kp-kv b.fin-tone--success { color: var(--success); }
.kp-kv b.fin-tone--warning { color: var(--warning); }
.kp-kv b.fin-tone--danger { color: var(--danger); }
.kp-kv--total { border-top: 1px solid var(--border-strong); }
.kp-kv--total span, .kp-kv--pay span { color: var(--text-strong); font-weight: 600; }
.kp-kv--pay { background: var(--brand-tint); margin: 4px -8px 0; padding: 8px; border-radius: var(--radius-sm); border-bottom: 0; }
.kp-kv--pay b { color: var(--brand); }
.kp-alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--warning-tint); color: var(--text-strong); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  font-size: var(--fs-body-sm); line-height: 19px;
}
.kp-alert .ui-icon { flex: none; color: var(--warning); margin-top: 1px; }
#kpOtherInner { padding-top: var(--space-2); }

/* Qoidalar */
.kr-body { display: flex; flex-direction: column; gap: var(--space-3); }
.kr-step { display: flex; gap: var(--space-3); padding: 14px var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.kr-step--warning { border-color: color-mix(in srgb, var(--warning) 50%, transparent); background: color-mix(in srgb, var(--warning-tint) 55%, var(--surface-card)); }
.kr-step--danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger-tint) 55%, var(--surface-card)); }
.kr-step__num { width: 26px; height: 26px; flex: none; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: 600; background: var(--brand-tint); color: var(--brand); }
.kr-step--warning .kr-step__num { background: var(--warning-tint); color: var(--warning); }
.kr-step--danger .kr-step__num { background: var(--danger-tint); color: var(--danger); }
.kr-step__body { flex: 1; min-width: 0; }
.kr-step__text { font-size: var(--fs-body); line-height: 21px; color: var(--text); }
.kr-param { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: var(--fs-caption); color: var(--text-muted); }
.kr-param b { color: var(--text-strong); font-weight: 600; }
.kr-param__link { font-size: var(--fs-caption); }
.kr-crits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.kr-crit { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 12px var(--space-4); min-width: 0; }
.kr-crit__head { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.kr-crit__head .kr-param { margin-top: 0; }
.kr-crit__label { font-size: var(--fs-body); font-weight: 600; color: var(--text-strong); }
.kr-crit__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.kr-crit__table { margin-top: 8px; }
.kr-crit__table > summary { cursor: pointer; font-size: var(--fs-caption); font-weight: 600; color: var(--brand); padding: 4px 0; border-radius: var(--radius-sm); }
.kr-crit__table > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.kr-crit__table .ui-table-wrap { margin-top: 6px; }
.kr-note { margin: 0; font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); }

@media (max-width: 1100px) {
  .kp-grid { grid-template-columns: 1fr; }
  .kp-side { position: static; }
}
@media (max-width: 760px) {
  .kp-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-fields, .kr-crits { grid-template-columns: 1fr; }
  .kr-screen .ui-tabs-pill { width: 100%; }
}

/* ============================================================
   FORMALAR — forma-topshiriq.html, forma-kunlik-hisobot.html, bildirishnomalar.html
   ============================================================ */
/* ---- Yangi topshiriq (modal) ---- */
.tf-overlay { align-items: flex-start; overflow-y: auto; }
.tf-modal {
  width: 100%; max-width: 760px; margin: 24px auto; background: var(--surface-card); color: var(--text);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.25)); display: flex; flex-direction: column;
}
.tf-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); }
.tf-title { margin: 0; font-size: var(--fs-section-title); line-height: var(--lh-section-title); font-weight: 600; color: var(--text-strong); text-transform: none; letter-spacing: 0; }
.tf-sub { margin: 2px 0 0; font-size: var(--fs-body-sm); color: var(--text-muted); }
.tf-body { padding: 20px 24px 0; }
.tf { display: flex; flex-direction: column; gap: 18px; }
.tf-field { display: flex; flex-direction: column; gap: 8px; }
.tf-field > .ui-field__label { margin: 0; }
.tf-person { display: flex; align-items: center; gap: var(--space-3); }
.tf-person .ui-field { flex: 1; margin: 0; }
.tf-avatar { width: 36px; height: 36px; flex: none; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: 600; }
.tf-queue { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); }
.tf-queue b { color: var(--text-strong); }
.tf-queue--full { color: var(--warning); }
.tf-queue--full b { color: var(--warning); }
.tf-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tf-student { display: flex; flex-direction: column; gap: var(--space-3); padding: 14px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.tf-student[hidden], #tfCustomWrap[hidden], .tf-person[hidden], #tfRoleWrap[hidden] { display: none; }
.tf-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.tf-grid3 .ui-field, .tf-student .ui-field { margin: 0; }
.tf-queue-note { margin: 0; font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); }
.tf-over { color: var(--danger); font-weight: 600; }
#tfCustomWrap .ui-field { margin: 0; max-width: 220px; }
.tf-dup { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-md); background: var(--danger-tint); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); color: var(--text-strong); }
.tf-dup + .tf-dup { margin-top: 8px; }
.tf-dup > .ui-icon { flex: none; color: var(--danger); }
.tf-dup__body { flex: 1; min-width: 0; }
.tf-dup__title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--danger); }
.tf-dup__meta { font-size: var(--fs-caption); color: var(--text-muted); overflow-wrap: anywhere; }
.tf-dup__note { margin: 6px 0 0; font-size: var(--fs-caption); color: var(--text-muted); }
.tf-urgent { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.tf-urgent__title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.tf-urgent__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.tf-switch { position: relative; width: 40px; height: 24px; flex: none; border: 0; border-radius: var(--radius-pill); background: var(--border-strong); cursor: pointer; padding: 0; transition: background .15s var(--ease); }
.tf-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-card); transition: transform .15s var(--ease); }
.tf-switch[aria-checked="true"] { background: var(--danger); }
.tf-switch[aria-checked="true"] span { transform: translateX(16px); }
.tf-switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tf-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: 0 -24px; padding: 14px 24px; border-top: 1px solid var(--border-subtle); background: var(--surface-card); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.tf-foot__note { font-size: var(--fs-caption); color: var(--text-muted); }
.tf-foot__actions { display: flex; gap: var(--space-2); margin-left: auto; }
.tf-msg:empty { display: none; }
.tf-msg { font-size: var(--fs-body-sm); padding-bottom: 12px; }
.tf-err { color: var(--danger); font-weight: 600; }
.tf .ui-field__input[aria-invalid="true"] { border-color: var(--danger); }

/* ---- Kunlik hisobot ---- */
.dr-groups { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.dr-group { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); }
.dr-group__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 12px; }
.dr-group__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--text-faint); align-self: center; }
.dr-group--brand .dr-group__dot { background: var(--brand); }
.dr-group--warning .dr-group__dot { background: var(--warning); }
.dr-group--danger .dr-group__dot { background: var(--danger); }
.dr-group__title { margin: 0; font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: 600; color: var(--text-strong); text-transform: none; letter-spacing: 0; }
.dr-group__kind { font-size: var(--fs-caption); color: var(--text-muted); }
.dr-group__hint { margin: -6px 0 12px; font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); }
.dr-group .dr-state { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.cm-sum-hint { display: block; font-size: var(--fs-caption); color: var(--text-muted); font-weight: 400; }
.dr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.dr-grid .ui-field, .dr-state .ui-field { margin: 0; }
.dr-msg { margin: 4px 0 0; font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); min-height: 0; }
.dr-msg:empty { display: none; }
.dr-msg--danger { color: var(--danger); font-weight: 500; }
.dr-msg--warning { color: var(--warning); font-weight: 500; }
.dr-screen .ui-field__input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-tint); }
.dr-calc { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--fs-body-sm); color: var(--text-muted); }
.dr-calc b { color: var(--text-strong); }
.dr-state { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: end; }
.dr-state__diff { display: flex; flex-direction: column; gap: 6px; }
.dr-state__diff b { font-size: 22px; line-height: 38px; font-weight: 600; color: var(--text-strong); }
.dr-up { color: var(--success) !important; }
.dr-down { color: var(--danger) !important; }
.dr-note { margin: 12px 0 0; font-size: var(--fs-caption); color: var(--text-muted); }
.dr-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; margin-top: var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-body-sm); line-height: 19px; color: var(--text-strong); border: 1px solid transparent; }
.dr-banner > span { flex: 1 1 240px; }
.dr-banner > .ui-icon { flex: none; }
.dr-banner--warning { background: var(--warning-tint); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.dr-banner--warning > .ui-icon { color: var(--warning); }
.dr-banner--info { background: var(--info-tint); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.dr-banner--info > .ui-icon { color: var(--info); }
.dr-banner--success { background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.dr-banner--success > .ui-icon { color: var(--success); }
.dr-banner--danger { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.dr-banner--danger > .ui-icon { color: var(--danger); }
.dr-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); padding: 14px var(--space-4); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.dr-foot__note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-muted); }
.dr-foot__actions { display: flex; gap: var(--space-2); margin-left: auto; }
.dr-status { margin-top: 8px; font-size: var(--fs-body-sm); }
.cm-sum-group + .cm-sum-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.cm-sum-head { font-size: var(--fs-body-sm); color: var(--text-strong); margin-bottom: 2px; }
.cm-sum-head span { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 400; }

/* ---- Bildirishnomalar paneli ---- */
.notif-bell .ui-icon { width: 20px; height: 20px; }
.np[hidden] { display: none; }
.np {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 150;
  width: 440px; max-height: min(640px, calc(100vh - 90px)); display: flex; flex-direction: column;
  background: var(--surface-card); color: var(--text); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.2)); overflow: hidden;
}
.np-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.np-title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text-strong); text-transform: none; letter-spacing: 0; }
.np-markall { border: 0; background: none; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--brand); font: inherit; font-size: var(--fs-caption); font-weight: 600; cursor: pointer; }
.np-markall:hover { background: var(--brand-tint); }
.np-markall:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.np-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.np-list { flex: 1; overflow-y: auto; }
.np-list .ui-empty { margin: 24px 16px; }
.np-group__label { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text-faint); text-transform: uppercase; }
.np-items { list-style: none; margin: 0; padding: 0; }
.np-item { position: relative; padding: 10px 16px 10px 19px; border-bottom: 1px solid var(--border-subtle); }
.np-item.is-unread { background: color-mix(in srgb, var(--brand-tint) 55%, transparent); }
.np-item.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.np-item--overdue::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warning); }
.np-item__title { font-size: var(--fs-body-sm); line-height: 19px; font-weight: 600; color: var(--text-strong); }
.np-item__sub { margin-top: 2px; font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-item__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.np-item__time { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.np-done { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); color: var(--success); }
.np-foot { padding: 10px 16px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-caption); color: var(--text-faint); }

@media (max-width: 760px) {
  .tf-modal { margin: 0; min-height: 100%; border-radius: 0; }
  .tf-overlay { padding: 0; }
  .tf-head, .tf-body { padding-left: 16px; padding-right: 16px; }
  .tf-foot { margin: 0 -16px; padding: 12px 16px; border-radius: 0; }
  .tf-grid3, .dr-grid { grid-template-columns: 1fr; }
  .dr-state { grid-template-columns: 1fr 1fr; }
  .dr-state__diff { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 10px; }
  .np { position: fixed; top: 56px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 72px); }
}

/* ============================================================
   ROL PANELLARI — admin-bosh, sotuv-bosh, talim-menejer-bosh, oqituvchi-* (telefon)
   ============================================================ */
.hm-cap { display: flex; align-items: center; gap: 10px; min-width: 260px; }
.hm-cap__label { font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; }
.hm-cap__track { flex: 1; height: 8px; min-width: 100px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.hm-cap__track span { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-pill); }
.hm-cap__num { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.hm-tiles { display: grid; gap: var(--space-3); }
.hm-tiles--1 { grid-template-columns: minmax(0, 320px); }
.hm-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 76px; padding: 14px var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.hm-tile:hover { border-color: var(--border-strong); }
.hm-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hm-tile__n { font-size: 26px; line-height: 32px; font-weight: 600; color: var(--text-strong); }
.hm-tile--danger { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.hm-tile--danger .hm-tile__n { color: var(--danger); }
.hm-tile--warning .hm-tile__n { color: var(--warning); }
.hm-tile__label { font-size: var(--fs-body-sm); color: var(--text-muted); }
.hm-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.hm-grid > * { min-width: 0; }
.hm-grid--single { grid-template-columns: minmax(0, 1fr); }
.hm-side { display: flex; flex-direction: column; gap: var(--space-4); }
.hm-tasks { display: flex; flex-direction: column; gap: var(--space-3); }
.hm-task { position: relative; padding: 12px 14px 12px 17px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.hm-task::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--border-strong); }
.hm-task--danger::before { background: var(--danger); }
.hm-task--warning::before { background: var(--warning); }
.hm-task--info::before { background: var(--info); }
.hm-task__top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.hm-task__num { margin-left: auto; font-size: var(--fs-caption); color: var(--text-faint); }
.hm-task__text { margin: 8px 0 0; font-size: var(--fs-body); line-height: 21px; color: var(--text-strong); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.hm-task__meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-caption); color: var(--text-muted); }
.hm-task__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: 10px; }
.hm-task__from { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); color: var(--text-faint); }
.hm-note[hidden] { display: none; }
.hm-note { margin-top: 10px; }
.hm-note__row { display: flex; gap: var(--space-2); align-items: flex-end; }
.hm-note__row textarea { flex: 1; min-height: 60px; resize: vertical; }
.hm-count { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.hm-bars { display: flex; flex-direction: column; gap: 14px; }
.hm-bars__head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-body-sm); color: var(--text-muted); margin-bottom: 6px; }
.hm-bars__head b { color: var(--text-strong); font-weight: 600; }
.hm-bars__track { height: 8px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.hm-bars__track span { display: block; height: 100%; border-radius: var(--radius-pill); }
.hm-list { list-style: none; margin: 12px 0 0; padding: 0; }
.hm-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); color: var(--text-strong); }
.hm-more { margin-top: 8px; font-size: var(--fs-caption); }
.hm-daily { display: flex; flex-direction: column; gap: 12px; }
.hm-daily__row { display: flex; gap: 10px; align-items: flex-start; }
.hm-daily__row > .ui-icon { flex: none; color: var(--success); margin-top: 1px; }
.hm-daily--warn { background: var(--warning-tint); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.hm-daily--warn .hm-daily__row > .ui-icon { color: var(--warning); }
.hm-daily__title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.hm-daily__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.hm-daily .ui-btn { align-self: flex-start; }

/* ---- O'qituvchi (telefon birinchi) ---- */
.th-screen { display: flex; flex-direction: column; gap: var(--space-4); max-width: 560px; margin: 0 auto; }
.th-hello { display: flex; align-items: center; gap: 12px; }
.th-hello__av { width: 44px; height: 44px; flex: none; border-radius: var(--radius-pill); background: var(--brand); color: var(--text-on-brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.th-hello__name { font-size: 16px; font-weight: 600; color: var(--text-strong); }
.th-hello__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.th-kpi { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; padding: 16px; border: 0; border-radius: var(--radius-lg); background: var(--brand); color: var(--text-on-brand); }
.th-kpi:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.th-kpi--empty { display: flex; gap: 12px; align-items: flex-start; cursor: default; background: var(--surface-card); color: var(--text-muted); border: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); }
.th-kpi--empty .th-kpi__label { color: var(--text-strong); font-weight: 600; }
.th-kpi__top { display: flex; justify-content: space-between; gap: 12px; }
.th-kpi__label { font-size: var(--fs-body-sm); opacity: .85; }
.th-kpi__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.th-kpi__pct { font-size: 30px; line-height: 36px; font-weight: 600; }
.th-kpi__sum { font-size: var(--fs-body-sm); opacity: .9; }
.th-kpi__delta { align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-card); font-size: var(--fs-caption); font-weight: 600; }
.th-kpi__delta.is-up { color: var(--success); }
.th-kpi__delta.is-down { color: var(--danger); }
.th-kpi__bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.th-kpi__bar { height: 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text-on-brand) 25%, transparent); overflow: hidden; }
.th-kpi__bar span { display: block; height: 100%; background: var(--surface-card); }
.th-kpi__bar.is-low span { background: var(--warning-tint); }
.th-kpi__legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; font-size: 11px; opacity: .9; }
.th-warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); background: var(--warning-tint); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); font-size: var(--fs-body-sm); line-height: 19px; color: var(--text-strong); }
.th-warn > .ui-icon { flex: none; color: var(--warning); }
.th-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.th-sec__head h2 { margin: 0; font-size: var(--fs-card-title); font-weight: 600; color: var(--text-strong); text-transform: none; letter-spacing: 0; }
.th-sec__meta { font-size: var(--fs-caption); color: var(--text-muted); }
.th-screen .hm-task { cursor: pointer; }
.th-pay { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 14px 16px; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.th-pay > div { flex: 1; min-width: 0; }
.th-pay__title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.th-pay__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.th-pay__sum { font-size: 17px; font-weight: 600; color: var(--text-strong); }
.th-pay:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.th-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.th-h1 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--text-strong); }
.th-sub { font-size: var(--fs-caption); color: var(--text-muted); }
.th-month { width: 130px; }
.th-month .ui-field { margin: 0; }

.tk-total { padding: 16px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.tk-total__row { display: flex; justify-content: space-between; gap: 12px; }
.tk-total__label { font-size: var(--fs-caption); color: var(--text-muted); }
.tk-total__pct { font-size: 30px; line-height: 36px; font-weight: 600; color: var(--text-strong); }
.tk-total__right { text-align: right; }
.tk-total__sum { font-size: 20px; line-height: 36px; font-weight: 600; color: var(--text-strong); }
.tk-total__note { font-size: var(--fs-caption); color: var(--text-muted); }
.tk-gate-note { font-size: var(--fs-caption); color: var(--danger); }
.tk-crits { display: flex; flex-direction: column; gap: 10px; }
.tk-crit { padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.tk-crit.is-low { border-color: color-mix(in srgb, var(--warning) 50%, transparent); }
.tk-crit__head { display: flex; justify-content: space-between; font-size: var(--fs-body-sm); color: var(--text-strong); font-weight: 600; }
.tk-crit__track { position: relative; height: 10px; margin: 10px 0 6px; background: var(--surface-sunken); border-radius: var(--radius-pill); }
.tk-crit__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--success); border-radius: var(--radius-pill); }
.tk-crit.is-low .tk-crit__fill { background: var(--warning); }
/* Chegara — qora (matn rangidagi) vertikal belgi */
.tk-crit__gate { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--text-strong); border-radius: 2px; }
.tk-crit__foot { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-caption); color: var(--text-muted); }
.tk-crit.is-low .tk-crit__foot span:first-child { color: var(--warning); font-weight: 600; }
.tk-reach { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warning-tint); font-size: var(--fs-caption); color: var(--text-strong); }
.tk-note { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface-sunken); }
.tk-note__title { font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); }
.tk-note p { margin: 6px 0; font-size: var(--fs-body-sm); line-height: 20px; color: var(--text-strong); }
.tk-note__by { font-size: var(--fs-caption); color: var(--text-faint); }
.tk-warn-text { color: var(--warning); font-weight: 600; }

.ts-card { padding: 16px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.ts-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ts-card__head h2 { margin: 0; font-size: var(--fs-card-title); font-weight: 600; color: var(--text-strong); text-transform: none; letter-spacing: 0; }
.th-hand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--brand-tint); }
.th-hand__label { font-size: var(--fs-caption); color: var(--text-muted); }
.th-hand__sum { font-size: 24px; line-height: 30px; font-weight: 600; color: var(--brand); }
.th-hand__when { text-align: right; font-size: var(--fs-caption); color: var(--text-muted); }
.th-months { list-style: none; margin: 0; padding: 0; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.th-months li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 44px; border-bottom: 1px solid var(--border-subtle); }
.th-months li:last-child { border-bottom: 0; }
.th-months__m { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.th-months__k { font-size: var(--fs-caption); color: var(--text-muted); }
.th-months__r { text-align: right; font-size: var(--fs-body-sm); color: var(--text-strong); font-weight: 600; }
.th-months__s { font-size: var(--fs-caption); color: var(--text-faint); font-weight: 400; }
.th-sum { display: flex; justify-content: space-between; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--fs-body-sm); color: var(--text-muted); }
.th-sum b { color: var(--text-strong); }
.th-note { margin: 0; font-size: var(--fs-caption); color: var(--text-muted); text-align: center; }

/* Topshiriq tafsiloti (sheet) */
.ts-overlay { align-items: stretch; justify-content: flex-end; padding: 0; }
.ts { width: 100%; max-width: 480px; height: 100%; display: flex; flex-direction: column; background: var(--surface-page); color: var(--text); box-shadow: var(--shadow-lg); }
.ts-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card); }
.ts-title { font-size: 16px; font-weight: 600; color: var(--text-strong); }
.ts-sub { font-size: var(--fs-caption); color: var(--text-muted); }
.ts-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ts-text { margin: 0; font-size: 15px; line-height: 23px; color: var(--text-strong); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.ts-info { margin: 0; padding: 4px 14px; border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.ts-info > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--border-subtle); }
.ts-info > div:last-child { border-bottom: 0; }
.ts-info dt { font-size: var(--fs-caption); color: var(--text-muted); }
.ts-info dd { margin: 0; font-size: var(--fs-body-sm); color: var(--text-strong); font-weight: 500; text-align: right; }
.ts-phone { display: flex; align-items: center; gap: 8px; }
.ts-phone a:first-child { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); }
.ts-head .ui-btn { min-width: 44px; min-height: 44px; }
.ts-call { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--success-tint); color: var(--success); }
.ts-call:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ts-sec { font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); margin-top: 4px; }
.ts-chat { display: flex; flex-direction: column; gap: 10px; }
.ts-empty { margin: 0; font-size: var(--fs-caption); color: var(--text-faint); }
.ts-msg { display: flex; gap: 8px; align-items: flex-end; }
.ts-msg--mine { flex-direction: row-reverse; }
.ts-msg__av { width: 28px; height: 28px; flex: none; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.ts-msg__bubble { max-width: 80%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface-card); border: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); line-height: 19px; color: var(--text-strong); overflow-wrap: anywhere; }
.ts-msg--mine .ts-msg__bubble { border-radius: 14px 14px 4px 14px; background: var(--brand-tint); border-color: transparent; }
.ts-msg__meta { font-size: 11px; color: var(--text-faint); margin-bottom: 2px; }
.ts-compose { display: flex; gap: 8px; align-items: flex-end; }
.ts-compose textarea { flex: 1; min-height: 44px; resize: vertical; }
.ts-compose textarea, .ts-fail textarea, .hm-note textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-strong); font: inherit; font-size: var(--fs-body-sm);
}
.ts-compose textarea:focus-visible, .ts-fail textarea:focus-visible, .hm-note textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--brand); }
.ts-fail textarea[aria-invalid="true"] { border-color: var(--danger); }
.ts-compose .ui-btn { min-width: 44px; min-height: 44px; }
.ts-foot { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
.ts-foot > .ui-btn { flex: 1; min-height: 48px; }
.ts-fail { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ts-fail textarea { min-height: 60px; }
.ts-fail__note { margin: 0; font-size: var(--fs-caption); color: var(--text-muted); }
.ts-fail__actions { display: flex; gap: 10px; }
.ts-fail__actions .ui-btn { flex: 1; min-height: 44px; }

/* Pastki navigatsiya — faqat o'qituvchi va faqat telefonda */
.tnav { display: none; }
@media (max-width: 760px) {
  .hm-grid, .hm-tiles--2 { grid-template-columns: 1fr; }
  .hm-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cap { min-width: 0; width: 100%; }
  .tnav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: var(--surface-card); border-top: 1px solid var(--border-subtle); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; border-radius: var(--radius-md); }
  .tnav__item.active { color: var(--brand); font-weight: 600; }
  .tnav__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
  .shell-mode:has(.tnav) .app-main { padding-bottom: 76px; }
  /* 44px teginish maydoni */
  .th-screen .ui-btn, .hm-screen .ui-btn { min-height: 44px; }
  .th-month { width: 120px; }
  .ts { max-width: none; }
}

/* ============================================================
   DAVOMAT (1-bo'lak) — davomat-sozlama.html, rozilik, bo'sh holat
   ============================================================ */
.at-screen { max-width: 880px; }
.at-map { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); }
.at-map svg { display: block; width: 100%; height: auto; }
.at-map__bg { fill: var(--surface-sunken); }
.at-map__road { stroke: var(--border-strong); stroke-width: 10; opacity: .55; }
.at-map__outer { fill: none; stroke: var(--warning); stroke-width: 1.5; stroke-dasharray: 3 5; }
.at-map__zone { fill: var(--brand); fill-opacity: .12; stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 6 5; }
.at-map__pin { fill: var(--brand); }
.at-map__line { stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 4 3; }
.at-map__label { font: 600 13px var(--font-mono); fill: var(--text-strong); }
.at-map__label--muted { font-weight: 400; fill: var(--text-muted); font-family: var(--font-sans); }
.at-map__tag { fill: var(--surface-card); stroke: var(--border-subtle); }
.at-screen .tf-switch[aria-checked="true"], .st-modal .tf-switch[aria-checked="true"] { background: var(--brand); }
.at-map__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 12px 0; }
.at-map__actions a[hidden] { display: none; }
.at-map__msg { font-size: var(--fs-caption); color: var(--text-muted); }
.at-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.at-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.at-grid .ui-field, .at-row .ui-field { margin: 0; }
.at-screen .ui-field__input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-tint); }
.at-screen .ui-field__input:disabled, .at-screen select:disabled { color: var(--text-strong); opacity: 1; background: var(--surface-sunken); }
.at-note { margin: 12px 0 0; font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); }
.at-note--warn { color: var(--warning); font-weight: 600; }
.at-wifi { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: 12px; }
.at-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 12px; border-radius: var(--radius-pill); background: var(--success-tint); color: var(--text-strong); font-size: var(--fs-body-sm); font-weight: 500; }
.at-chip > .ui-icon { color: var(--success); }
.at-chip__x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-muted); cursor: pointer; }
.at-chip__x:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.at-chip__x:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.at-empty { font-size: var(--fs-caption); color: var(--text-faint); }
.at-wifi__add { display: flex; gap: var(--space-2); margin-bottom: 14px; }
.at-wifi__add .ui-field__input { flex: 1; height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-strong); font: inherit; font-size: var(--fs-body-sm); }
.at-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.at-row__ctl { width: 240px; flex: none; }
.at-row__ctl .ui-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.at-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.at-switch__title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.at-switch__sub { font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); }
.at-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.at-sec-head .kp-lead { margin: 4px 0 14px; }
#atAuto.is-off { opacity: .5; }
.at-info { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--info-tint); font-size: var(--fs-caption); line-height: 17px; color: var(--text-strong); }
.at-info > .ui-icon { flex: none; color: var(--info); }
.at-consent { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--success-tint); font-size: var(--fs-body-sm); color: var(--text-strong); }
.at-consent > .ui-icon { color: var(--success); flex: none; }
.at-consent > span { flex: 1 1 220px; }
.at-consent--warn { background: var(--warning-tint); }
.at-consent--warn > .ui-icon { color: var(--warning); }
.at-home { max-width: 640px; }
.at-consent-modal { max-width: 460px; }
.at-consent-modal p { margin: 0 0 10px; font-size: var(--fs-body-sm); line-height: 20px; }
.at-consent-list { margin: 0 0 12px; padding-left: 18px; font-size: var(--fs-body-sm); line-height: 21px; }
.at-consent-note { color: var(--text-muted); font-size: var(--fs-caption) !important; }
.at-consent-err { color: var(--danger); font-size: var(--fs-caption); margin-top: 8px; }
.at-consent-err:empty { display: none; }
@media (max-width: 760px) {
  .at-grid, .at-grid--3 { grid-template-columns: 1fr; }
  .at-row { flex-direction: column; align-items: stretch; }
  .at-row__ctl { width: auto; }
  .at-wifi__add { flex-direction: column; }
}

/* Davomat — jarima va bonus (davomat-jarima.html) */
.pen-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: 14px; }
.pen-method { display: grid; grid-template-columns: 18px 1fr; gap: 4px 10px; align-items: center; padding: 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.pen-method[aria-checked="true"] { border-color: var(--brand); background: var(--brand-tint); }
.pen-method:disabled { cursor: default; }
.pen-method:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pen-method__dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); box-sizing: border-box; }
.pen-method[aria-checked="true"] .pen-method__dot { border: 5px solid var(--brand); }
.pen-method__title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.pen-method__desc { grid-column: 2; font-size: var(--fs-caption); line-height: 17px; color: var(--text-muted); }
.pen-bonus { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: var(--space-4); align-items: end; }
.pen-bonus[hidden] { display: none; }
.pen-bonus .ui-field { margin: 0; }
.pen-summary { margin: 0 0 6px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--brand-tint); font-size: var(--fs-caption); line-height: 17px; color: var(--text-strong); }
.pen-h3 { margin: 20px 0 4px; font-size: var(--fs-body); font-weight: 600; color: var(--text-strong); text-transform: none; letter-spacing: 0; }
.pen-tiers td { vertical-align: middle; }
.pen-tier--base td { color: var(--text-muted); }
.pen-range { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pen-tiers input.pen-to { width: 64px; flex: none; height: 32px; padding: 0 8px; text-align: right; }
.pen-tiers input.pen-amt { width: 120px; flex: none; height: 32px; padding: 0 8px; text-align: right; }
.pen-tiers input { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-strong); box-sizing: border-box; }
.pen-tiers tr.is-invalid input { border-color: var(--danger); background: var(--danger-tint); }
.pen-tiers input:disabled { background: var(--surface-sunken); }
#penTierAdd { margin-top: 10px; }
.pen-forgive { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--fs-body-sm); color: var(--text-strong); }
.pen-forgive input.ui-field__input { width: 56px; flex: none; height: 32px; padding: 0 8px; text-align: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-strong); box-sizing: border-box; }
.pen-forgive input[aria-invalid="true"] { border-color: var(--danger); }
#penAbsenceAmount[hidden] { display: none; }
#penOvertime.is-off { opacity: .5; }
.pen-pct { width: 140px; }
@media (max-width: 760px) {
  .pen-methods, .pen-bonus { grid-template-columns: 1fr; }
  .pen-pct { width: auto; }
}

/* ============================================================
   DAVOMAT, 2-bo'lak — grafik, mening grafigim, smena turlari
   ============================================================ */
.sg-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sg-week { display: inline-flex; align-items: center; gap: 2px; }
.sg-week__label { min-width: 104px; text-align: center; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.sg-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-body-sm); color: var(--text-strong); }
.sg-muted { color: var(--text-muted); }
.sg-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-caption); font-weight: 600; }
.sg-badge--draft { background: var(--warning-tint); color: var(--warning); }
.sg-badge--pub { background: var(--success-tint); color: var(--success); }
.sg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--fs-caption); color: var(--text-muted); }
.sg-legend__title { font-weight: 600; color: var(--text-strong); }
.sg-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.sg-sw { width: 12px; height: 12px; flex: none; border-radius: 3px; background: var(--sc, var(--brand)); display: inline-block; }
.sg-sw--off { background: var(--surface-sunken); border: 1px solid var(--border-strong); box-sizing: border-box; }
.sg-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.sg-hint { font-size: var(--fs-caption); color: var(--text-faint); }
.sg-bulk { position: sticky; top: 64px; z-index: 6; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 10px var(--space-4); border-radius: var(--radius-md); background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); font-size: var(--fs-body-sm); color: var(--text-strong); }
.sg-bulk[hidden] { display: none; }
.sg-bulk__opts { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.sg-opt { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-strong); font: inherit; font-size: var(--fs-caption); font-weight: 600; cursor: pointer; }
.sg-opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sg-wrap { overflow-x: auto; }
.sg-table { min-width: 880px; }
.sg-table th.sg-emp { min-width: 190px; text-align: left; font-weight: 400; }
.sg-table thead th.sg-emp { font-weight: 500; }
.sg-dh { text-align: center; }
.sg-dh.is-today { color: var(--brand); font-weight: 700; }
.sg-td { padding: 4px !important; }
.sg-td.is-today { background: color-mix(in srgb, var(--brand-tint) 45%, transparent); }
.sg-cell { position: relative; width: 100%; min-width: 72px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; cursor: pointer; }
.sg-cell:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.sg-cell--shift { background: color-mix(in srgb, var(--sc) 14%, var(--surface-card)); border-color: color-mix(in srgb, var(--sc) 40%, transparent); color: var(--text-strong); }
.sg-cell__t { font-size: var(--fs-body-sm); font-weight: 600; }
.sg-cell__l { font-size: 10.5px; color: var(--text-muted); }
.sg-cell--off { background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-caption); }
.sg-cell--empty { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-faint); font-size: 16px; }
.sg-cell:hover { filter: brightness(0.97); }
.sg-cell.is-selected { outline: 2px solid var(--brand); outline-offset: 1px; }
.sg-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.sg-row--empty th, .sg-row--empty td { background: color-mix(in srgb, var(--danger-tint) 60%, transparent); }
.sg-row--empty .ui-table__sub { color: var(--danger); font-weight: 600; }
.sg-hours { font-weight: 600; }
.sg-foot { text-align: center; }
.sg-note { margin: 0; font-size: var(--fs-caption); color: var(--text-muted); }
.sg-pop { position: absolute; z-index: 300; width: 280px; padding: 6px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.sg-pop__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-strong); font: inherit; font-size: var(--fs-body-sm); text-align: left; cursor: pointer; }
.sg-pop__item:hover, .sg-pop__item:focus-visible { background: var(--surface-hover); outline: none; }
.sg-pop__item[aria-checked="true"] { background: var(--brand-tint); }
.sg-pop__sub { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; }
.sg-pop__clear { color: var(--danger); border-top: 1px solid var(--border-subtle); border-radius: 0; margin-top: 4px; }
.at-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: var(--fs-caption); color: var(--text-muted); }

/* Mening grafigim */
.ms-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.ms-sum__label { font-size: var(--fs-caption); color: var(--text-muted); }
.ms-sum__v { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--text-strong); }
.ms-sum__right { text-align: right; }
.ms-sum__bar { grid-column: 1 / -1; margin-top: 6px; }
.ms-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-day { position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 14px 10px 18px; border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.ms-day::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sc, var(--border-strong)); }
.ms-day.is-off::before, .ms-day.is-none::before { background: var(--border-subtle); }
.ms-day.is-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.ms-day__date { width: 36px; flex: none; display: flex; flex-direction: column; align-items: center; font-size: var(--fs-caption); color: var(--text-muted); }
.ms-day__date b { font-size: 17px; color: var(--text-strong); }
.ms-day__body { flex: 1; min-width: 0; }
.ms-day__main { font-size: var(--fs-body); font-weight: 600; color: var(--text-strong); }
.ms-day.is-off .ms-day__main, .ms-day.is-none .ms-day__main { color: var(--text-muted); font-weight: 500; }
.ms-day__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.ms-screen .sg-week .ui-btn { min-width: 44px; min-height: 44px; }

/* Smena turlari */
.st-list { list-style: none; margin: 0 0 12px; padding: 0; }
.st-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.st-item.is-inactive { opacity: .6; }
.st-item__body { flex: 1; min-width: 0; }
.st-item__name { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.st-item__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.st-item__use { font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; }
.st-modal { max-width: 560px; width: 100%; text-align: left; padding: 0; }
.st-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border-subtle); }
.st-head h3 { margin: 0; }
.st-sub { margin: 2px 0 0; font-size: var(--fs-caption); color: var(--text-muted); }
.st-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 220px); overflow-y: auto; }
.st-body .ui-field { margin: 0; }
#stLunchBox[hidden] { display: none; }
.st-colors { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.st-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface-card); background: var(--sc); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; }
.st-color[aria-checked="true"] { box-shadow: 0 0 0 2px var(--text-strong); }
.st-color:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.st-bar { display: flex; gap: 3px; height: 40px; }
.st-seg { display: flex; align-items: center; justify-content: center; min-width: 0; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.st-seg--work { background: var(--brand-tint); color: var(--brand); }
.st-seg--lunch { background: var(--warning-tint); color: var(--warning); }
.st-total { display: flex; justify-content: space-between; font-size: var(--fs-body-sm); color: var(--text-muted); }
.st-total b { color: var(--text-strong); font-size: 16px; }
.st-err { font-size: var(--fs-caption); color: var(--danger); }
.st-err:empty { display: none; }
.st-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border-subtle); }
@media (max-width: 760px) {
  .sg-actions { width: 100%; }
  .sg-hint { display: none; }
  .st-foot { flex-wrap: wrap; }
}

/* ============================================================
   DAVOMAT, 3-bo'lak — belgilash (kelish/tushlik/ketish), selfi, taymer, holatlar
   ============================================================ */
.ma-wrap { display: flex; flex-direction: column; gap: var(--space-5); max-width: 560px; margin: 0 auto; }
#maToday { display: flex; flex-direction: column; gap: var(--space-3); }
.ma-head { display: flex; align-items: center; gap: 12px; }
.ma-card { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.ma-card__title { font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); }
.ma-clock { align-items: center; text-align: center; padding: 20px 16px; }
.ma-clock__time { font-size: 44px; line-height: 50px; font-weight: 600; color: var(--text-strong); }
.ma-clock__date { font-size: var(--fs-body-sm); color: var(--text-muted); }
.ma-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-body-sm); color: var(--text-strong); }
.ma-check > div { flex: 1; min-width: 0; }
.ma-check__sub { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 400; }
.ma-check__num { font-weight: 600; }
.ma-check--ok > .ui-icon { color: var(--success); }
.ma-check--danger > .ui-icon, .ma-check--danger b { color: var(--danger); }
.ma-check--warning > .ui-icon, .ma-check--warning b { color: var(--warning); }
.ma-check--muted > .ui-icon { color: var(--text-faint); }
.ma-info { padding-top: 10px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); color: var(--text-strong); }
.ma-info__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.ma-big { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; border: 0; border-radius: var(--radius-lg); background: var(--brand); color: var(--text-on-brand); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.ma-big:disabled { opacity: .6; cursor: progress; }
.ma-big:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.ma-big--leave { background: var(--text-strong); color: var(--surface-card); }
.ma-note { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: var(--fs-caption); color: var(--text-muted); }
.ma-note--warn { color: var(--warning); font-weight: 600; }
.ma-in__row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ma-in__label { font-size: var(--fs-caption); color: var(--text-muted); }
.ma-in__time { font-size: 30px; line-height: 36px; font-weight: 600; color: var(--success); }
.ma-in__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.ma-late { color: var(--danger); }
.ma-in__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ma-in__worked { font-size: 22px; font-weight: 600; color: var(--text-strong); }
.ma-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; background: var(--surface-sunken); color: var(--text-muted); white-space: nowrap; }
.ma-tag--ok { background: var(--success-tint); color: var(--success); }
.ma-tag--warn { background: var(--warning-tint); color: var(--warning); }
.ma-tag--now { background: var(--brand-tint); color: var(--brand); }
.ma-day { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.ma-day__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--success); }
.ma-day__lunch { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--warning-tint), var(--warning-tint) 4px, color-mix(in srgb, var(--warning) 35%, transparent) 4px, color-mix(in srgb, var(--warning) 35%, transparent) 8px); }
.ma-day__legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.ma-lunchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); color: var(--text-strong); }
.ma-lunchrow .ui-btn, .ma-actions .ui-btn { min-height: 44px; }
.ma-week { list-style: none; margin: 0; padding: 0; }
.ma-week li { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); color: var(--text-strong); }
.ma-week li:last-child { border-bottom: 0; }
.ma-week li > span:first-child { width: 96px; color: var(--text-muted); }
.ma-week li > span:nth-child(2) { flex: 1; }
.ma-week li.is-today > span:first-child { color: var(--brand); font-weight: 600; }
.ma-alert { padding: 16px; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 10px; }
.ma-alert--danger { background: var(--danger-tint); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); color: var(--text-strong); }
.ma-alert__title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--danger); }
.ma-alert p { margin: 0; font-size: var(--fs-body-sm); line-height: 20px; }
.ma-timer { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-body-sm); color: var(--text-muted); }
.ma-timer b { font-size: 28px; color: var(--text-strong); }
.ma-actions { display: flex; gap: 8px; }
.ma-actions .ui-btn { flex: 1; }
.ma-lunch__title, .ma-done__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.ma-lunch__title .ui-icon { color: var(--warning); }
.ma-lunch__sub, .ma-done__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.ma-done__title .ui-icon { color: var(--success); }
.ma-done--auto .ma-done__title .ui-icon { color: var(--warning); }

/* "Kerak" oynasi (sabab/tasdiq) */
.ma-need { max-width: 420px; text-align: left; }
.ma-need__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--info-tint); color: var(--info); margin-bottom: 8px; }
.ma-need--danger .ma-need__icon { background: var(--danger-tint); color: var(--danger); }
.ma-need--warning .ma-need__icon { background: var(--warning-tint); color: var(--warning); }
.ma-need__text { font-size: var(--fs-body-sm); line-height: 20px; color: var(--text); margin: 0 0 12px; }
.ma-textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-strong); font: inherit; font-size: var(--fs-body-sm); resize: vertical; }
.ma-textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.ma-need__err { margin: 4px 0 0; font-size: var(--fs-caption); color: var(--danger); min-height: 0; }
.ma-need__err:empty { display: none; }
.ma-need__actions { display: flex; gap: 8px; margin-top: 14px; }
.ma-need__actions .ui-btn { flex: 1; min-height: 44px; }

/* Selfi oynasi */
.sf-overlay { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: #0f1115; color: #fff; }
.sf-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.sf-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sf-title { font-weight: 600; font-size: 16px; }
.sf-sub { font-size: var(--fs-caption); opacity: .75; }
.sf-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #15181f; }
.sf-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.sf-mask { position: absolute; inset: 0; background: radial-gradient(ellipse 34% 30% at 50% 45%, transparent 98%, rgba(15,17,21,.62) 100%); pointer-events: none; }
.sf-mask::after { content: ""; position: absolute; left: 50%; top: 45%; width: 68%; max-width: 280px; aspect-ratio: 104 / 132; transform: translate(-50%, -50%); border: 3px solid #4fd196; border-radius: 50%; }
.sf-msg { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); }
.sf-deny { padding: 16px; border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-strong); text-align: center; }
.sf-deny p { font-size: var(--fs-body-sm); color: var(--text-muted); }
.sf-note { margin: 0; padding: 10px 16px; text-align: center; font-size: var(--fs-caption); opacity: .8; }
.sf-actions { display: flex; justify-content: center; padding: 10px 0 calc(18px + env(safe-area-inset-bottom)); }
.sf-shot { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 4px; cursor: pointer; }
.sf-shot span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.sf-shot:disabled { opacity: .4; }
.sf-shot:focus-visible, .sf-x:focus-visible { outline: 3px solid #4fd196; outline-offset: 2px; }
.sf-msg { z-index: 3; }

/* QR skaner (orqa kamera — ko'zgusiz) */
.qr-video { transform: none; }
.qr-frame { position: absolute; left: 50%; top: 46%; width: min(68vw, 300px); aspect-ratio: 1; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 9999px rgba(15, 17, 21, .55); border-radius: 18px; pointer-events: none; overflow: hidden; }
.qr-frame span { position: absolute; inset: 0; border-radius: 18px;
  background:
    linear-gradient(#fff, #fff) left top / 34px 4px, linear-gradient(#fff, #fff) left top / 4px 34px,
    linear-gradient(#fff, #fff) right top / 34px 4px, linear-gradient(#fff, #fff) right top / 4px 34px,
    linear-gradient(#fff, #fff) left bottom / 34px 4px, linear-gradient(#fff, #fff) left bottom / 4px 34px,
    linear-gradient(#fff, #fff) right bottom / 34px 4px, linear-gradient(#fff, #fff) right bottom / 4px 34px;
  background-repeat: no-repeat; }
.qr-line { position: absolute; left: 8%; right: 8%; height: 2px; top: 10%; background: #4fd196; box-shadow: 0 0 12px #4fd196; animation: qr-scan 2.2s ease-in-out infinite alternate; }
@keyframes qr-scan { to { top: 90%; } }
@media (prefers-reduced-motion: reduce) { .qr-line { animation: none; top: 50%; } }
.qr-guide { position: absolute; left: 16px; right: 16px; bottom: 22px; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.35;
  padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, .55); color: #fff; }
.qr-guide--ok { background: rgba(14, 107, 67, .92); }
.qr-guide--warn { background: rgba(163, 90, 6, .92); }
.qr-guide--bad { background: rgba(198, 47, 47, .92); }

/* Yuz ramkasi: oq — yuz yo'q, sariq — noto'g'ri, yashil — to'g'ri; halqa 1 soniyalik ushlab turishni ko'rsatadi */
.fc-oval { position: absolute; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(15, 17, 21, .72); pointer-events: none;
  box-sizing: border-box; border: 4px solid #fff; transition: border-color .15s; }
.fc-oval.is-none { border-color: #ffffff; }
.fc-oval.is-warn { border-color: #f5c542; }
.fc-oval.is-ok { border-color: #34c77b; }
.fc-top { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.fc-guide { font-size: 17px; font-weight: 700; text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.fc-hint { min-height: 34px; padding: 6px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; background: rgba(0, 0, 0, .5); }
.fc-hint:empty { visibility: hidden; }
.fc-hold { width: 160px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.fc-hold i { display: block; height: 100%; background: #34c77b; transform: scaleX(0); transform-origin: left center; }
.fc-oval.is-warn ~ .fc-top .fc-hint { background: rgba(245, 197, 66, .95); color: #1c1400; }
.fc-oval.is-ok ~ .fc-top .fc-hint { background: rgba(52, 199, 123, .95); color: #04220f; }
.fc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .25s; }
.fc-flash.is-on { opacity: .85; }

/* "Davomat qabul qilindi" */
.ok-overlay { position: fixed; inset: 0; z-index: 450; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); background: #0e6b43; color: #fff; text-align: center; }
.ok-badge svg { width: 112px; height: 112px; }
.ok-badge circle { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 3; }
.ok-badge path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ok-draw .45s .1s ease-out forwards; }
@keyframes ok-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ok-badge path { animation: none; stroke-dashoffset: 0; } }
.ok-overlay h2 { color: #fff; margin: 8px 0 0; font-size: 26px; line-height: 1.25; font-weight: 700; }
.ok-title { margin: 0; font-size: 18px; opacity: .92; }
.ok-sub { margin: 4px 0 0; max-width: 340px; font-size: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.ok-close { margin-top: 18px; min-width: 180px; min-height: 48px; border: 0; border-radius: 12px; background: #fff; color: #0e6b43; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.ok-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.ma-tag--bad { background: var(--danger-tint); color: var(--danger); }
.ma-done--missing .ma-done__title { color: var(--danger); }
.ma-done--missing .ma-done__title .ui-icon { color: var(--danger); }
.ma-done--missing .ma-big { margin-top: 12px; }

/* Ofis ekrani hisoblari (Sozlamalar → Davomat) */
.os-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.os-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.os-row.is-off { opacity: .7; }
.os-row__main { flex: 1; min-width: 160px; }
.os-row__name { font-weight: 600; color: var(--text-strong); }
.os-row__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.os-row__acts { display: flex; gap: 4px; flex-wrap: wrap; }
.os-how { margin-top: 12px; }

/* ============================================================
   DAVOMAT, 4-bo'lak — jurnal, tafsilot, so'rovlar, oylik hisob
   ============================================================ */
.jr-screen { display: flex; flex-direction: column; gap: var(--space-4); }
.jr-headact { display: flex; gap: 8px; flex-wrap: wrap; }
.jr-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jr-nav { display: flex; align-items: center; gap: 4px; }
.jr-nav__label { min-width: 180px; text-align: center; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.jr-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.jr-kpi { padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); min-width: 0; }
.jr-kpi__label { font-size: var(--fs-caption); color: var(--text-muted); }
.jr-kpi__value { font-size: 24px; line-height: 30px; font-weight: 600; color: var(--text-strong); }
.jr-kpi__sub { font-size: 11px; color: var(--text-muted); }
.jr-kpi--brand .jr-kpi__value { color: var(--brand); }
.jr-kpi--success .jr-kpi__value { color: var(--success); }
.jr-kpi--warning .jr-kpi__value { color: var(--warning); }
.jr-kpi--danger .jr-kpi__value { color: var(--danger); }
.jr-warnrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--warning-tint); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); }
.jr-warnrow > div { flex: 1; min-width: 0; }
.jr-warnrow__icon { color: var(--warning); display: inline-flex; }
.jr-warnrow__title { font-weight: 600; color: var(--text-strong); font-size: var(--fs-body-sm); }
.jr-warnrow__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.jr-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.jr-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jr-av { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 600; }
.jr-who__name { font-weight: 600; color: var(--text-strong); font-size: var(--fs-body-sm); white-space: nowrap; }
.jr-who__role { font-size: var(--fs-caption); color: var(--text-muted); }
.jr-sub { font-size: 11px; line-height: 15px; color: var(--text-muted); margin-top: 2px; max-width: 240px; white-space: normal; }
.jr-muted { color: var(--text-muted); font-size: var(--fs-body-sm); }
.jr-late { color: var(--danger); }
.jr-bad { color: var(--danger); font-weight: 600; }
.jr-warn-txt { color: var(--warning); font-weight: 600; }
.jr-chks { display: inline-flex; gap: 4px; }
.jr-chk { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.jr-chk--ok { background: var(--success-tint); color: var(--success); }
.jr-chk--bad { background: var(--warning-tint); color: var(--warning); }
.jr-chk--none { background: var(--surface-sunken); color: var(--text-faint); }

.jr-modal .st-foot { justify-content: flex-end; }
.jr-modal { display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; }
.jr-modal > .st-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
.jr-selfie > .jr-noselfie { flex: 1; }
.jr-modal > .st-body > * { flex-shrink: 0; }
.jr-detail { max-width: 640px; }
.jr-media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jr-selfie { display: flex; gap: 8px; overflow-x: auto; }
.jr-selfie figure { margin: 0; flex: 0 0 auto; }
.jr-selfie img { display: block; width: 150px; height: 190px; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-sunken); }
.jr-selfie figcaption { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.jr-noselfie { height: 100%; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-caption); text-align: center; padding: 8px; }
.jr-map { margin: 0; }
.jr-map__me { stroke: var(--surface-card); stroke-width: 2; }
.jr-map__me--ok { fill: var(--success); }
.jr-map__me--bad { fill: var(--danger); }
.jr-osm { display: inline-block; margin-top: 4px; color: var(--brand); }
.jr-statusline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-body-sm); }
.jr-h { margin: 6px 0 0; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.jr-checklist { list-style: none; margin: 0; padding: 0; }
.jr-cl { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); color: var(--text-strong); }
.jr-cl:last-child { border-bottom: 0; }
.jr-cl > span:nth-child(2) { flex: 1; }
.jr-cl__sub { font-size: var(--fs-caption); color: var(--text-muted); text-align: right; }
.jr-cl--ok > .ui-icon { color: var(--success); }
.jr-cl--bad > .ui-icon { color: var(--warning); }
.jr-cl--none > .ui-icon { color: var(--text-faint); }
.jr-quote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--border-strong); background: var(--surface-sunken); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--fs-body-sm); line-height: 20px; color: var(--text-strong); }
.jr-quote--bad { border-left-color: var(--danger); }
.jr-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body-sm); }
.jr-reqs li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.jr-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: 11px; color: var(--text-muted); }
.jr-week__d { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jr-week__d .jr-dot { width: 100%; height: 22px; border-radius: 6px; }
.jr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--surface-sunken); }
.jr-dot--toliq { background: var(--success); }
.jr-dot--kechikkan { background: var(--warning); }
.jr-dot--kelmagan { background: var(--danger); }
.jr-dot--dam, .jr-dot--yoq { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.jr-dot--sababli { background: var(--info); }
.jr-dot--qoshimcha { background: var(--brand); }
.jr-dot--kelajak { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.jr-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-muted); }
.jr-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* So'rovlar */
.rq-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.rq-screen { display: flex; flex-direction: column; gap: var(--space-4); }
.rq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.rq-card { padding: 16px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.rq-card__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rq-card__time { font-size: var(--fs-caption); color: var(--text-muted); }
.rq-card__ctx { font-size: var(--fs-caption); color: var(--warning); font-weight: 600; }
.rq-file { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-strong); font-size: var(--fs-caption); text-decoration: none; }
.rq-file:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rq-impact { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--info-tint); color: var(--text-strong); font-size: var(--fs-body-sm); line-height: 20px; }
.rq-impact > .ui-icon { color: var(--info); flex: 0 0 auto; margin-top: 2px; }
.rq-paid { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: var(--fs-body-sm); color: var(--text-strong); cursor: pointer; }
.rq-paid input { width: 18px; height: 18px; accent-color: var(--brand); }
.rq-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rq-actions .ui-btn { min-height: 40px; }
.rq-resolved .rq-donelist { margin-top: 4px; }
.rq-donelist { list-style: none; margin: 0; padding: 0; }
.rq-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.rq-done:last-child { border-bottom: 0; }
.rq-done__t { font-size: var(--fs-body-sm); color: var(--text-strong); font-weight: 500; }
.rq-done__s { font-size: var(--fs-caption); color: var(--text-muted); }
.rq-linkbtn { border: 0; background: none; color: var(--brand); font: inherit; font-size: var(--fs-body-sm); cursor: pointer; padding: 4px 0; }
.rq-linkbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rq-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rq-type { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-strong); font: inherit; font-size: var(--fs-body-sm); font-weight: 500; cursor: pointer; text-align: left; }
.rq-type[aria-checked="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.rq-type:focus-visible, .rq-time:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rq-times { display: flex; gap: 8px; flex-wrap: wrap; }
.rq-time { min-height: 44px; min-width: 72px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-strong); font: inherit; font-size: var(--fs-body-sm); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rq-time[aria-checked="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.rq-time--input { padding: 0 6px; }
.rq-time--input input { border: 0; background: transparent; color: var(--text-strong); font: inherit; min-height: 40px; }
.rq-attach { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--fs-body-sm); cursor: pointer; }
.rq-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rq-attach:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Oylik varaqa */
.om-sheet { max-width: 680px; }
.om-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.om-kpis .jr-kpi__value { font-size: 20px; line-height: 26px; }
.om-calc { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.om-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); color: var(--text-strong); }
.om-line:last-child { border-bottom: 0; }
.om-line__sub { font-size: 11px; color: var(--text-muted); }
.om-line__amt { white-space: nowrap; font-weight: 500; }
.om-line--minus .om-line__amt { color: var(--danger); }
.om-line--plus .om-line__amt { color: var(--success); }
.om-line--sum { background: var(--surface-sunken); }
.om-line--total { background: var(--brand-tint); }
.om-line--total .om-line__amt { color: var(--brand); font-size: 16px; }
.om-foot { margin: 0; font-size: var(--fs-caption); color: var(--text-muted); }
.om-flag { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--fs-caption); color: var(--text-muted); line-height: 18px; }
.om-flag--frozen { background: var(--success-tint); color: var(--text-strong); }
.om-flag--frozen .ui-icon { color: var(--success); }
.om-strip { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; }
.om-day { height: 26px; border-radius: 4px; }
.om-day--pending { outline: 2px dashed var(--warning); outline-offset: -2px; }
.om-strip__nums { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }

/* Ish haqi jadvali: Bonus ustunidagi davomat havolasi */
.pc-att { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 2px 0 0 auto; padding: 2px 6px; border: 0; border-radius: var(--radius-pill); background: var(--success-tint); color: var(--success); font: inherit; font-size: 11px; font-family: var(--font-mono); cursor: pointer; white-space: nowrap; }
.pc-att--minus { background: var(--danger-tint); color: var(--danger); }
.pc-att:hover { text-decoration: underline; }
.pc-att:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

@media (max-width: 900px) {
  .jr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .jr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-nav__label { min-width: 0; flex: 1; }
  .jr-nav { flex: 1; }
  .jr-media { grid-template-columns: 1fr; }
  .om-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-strip { gap: 2px; }
  .om-day { height: 20px; }
  .jr-warnrow { flex-wrap: wrap; }
  .rq-file { margin-left: 0; }
}

/* Davomat huquqlari: qo'lda belgilangan badge, "Mening davomatim" so'rovlari va tarixi, qulflangan katak */
.jr-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ma-reqhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ma-reqhead .ui-btn { min-height: 40px; }
.ma-hist { list-style: none; margin: 0; padding: 0; }
.ma-hist li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); color: var(--text-strong); }
.ma-hist li:last-child { border-bottom: 0; }
.ma-hist__d { width: 92px; flex: 0 0 auto; color: var(--text-muted); }
.ma-hist__d span { font-size: 11px; }
.ma-hist__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ma-hist__n { font-size: 11px; color: var(--text-muted); }
.sg-cell--locked { cursor: not-allowed; opacity: .75; }

/* Selfi alohida yuboriladi: "surat yuborilmadi" ogohlantirishi va kamera ruxsatsiz variant */
.ma-alert--warning { background: var(--warning-tint); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); color: var(--text-strong); }
.ma-alert--warning .ma-alert__title { color: var(--warning); }
.ma-alert--warning .ui-btn { min-height: 44px; }
.sf-deny__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sf-deny__actions .ui-btn { min-height: 44px; }

/* ============================================================
   KITOB BUYURTMALARI — webapp/books.js. Telefon birinchi: kartalar, to'liq ekranli oynalar, 44px tugmalar.
   Kompyuterda — jadval. Ranglar faqat mavzu tokenlari orqali (tungi rejim ham ishlaydi).
   ============================================================ */
/* Komponentlarning display qiymati [hidden] ni bosib ketmasin */
.bk-screen [hidden], .bk-sheet [hidden] { display: none !important; }
.bk-screen { display: flex; flex-direction: column; gap: var(--space-4, 16px); min-width: 0; }
.bk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bk-head__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-lead { margin: 0; }
.bk-searchrow { display: flex; gap: 8px; }
.bk-search { flex: 1; min-width: 0; }
.bk-filters { padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
.bk-filters__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.bk-filters__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }
.bk-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: var(--fs-body-sm, 14px); }
.bk-check input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.bk-bad { color: var(--danger); }
.bk-warn { color: var(--warning); }
.bk-ok { color: var(--success); }
.bk-flag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--warning-tint); color: var(--warning); }
.bk-flag--bad { background: var(--danger-tint); color: var(--danger); }
.bk-link { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; min-height: 32px; }

/* Ro'yxat: telefonda kartalar, kompyuterda jadval */
.bk-cards { display: none; flex-direction: column; gap: 10px; }
.bk-cards--always { display: flex; }
.bk-card { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-strong); font: inherit; cursor: pointer; }
.bk-card--static { cursor: default; }
.bk-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bk-card__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bk-card__num { font-weight: 700; margin-right: auto; }
.bk-card__name { font-weight: 600; font-size: 16px; }
.bk-card__meta, .bk-card__books { font-size: var(--fs-caption); color: var(--text-muted); }
.bk-card__money { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 14px; margin-top: 2px; }
.bk-card__acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.bk-table-wrap { display: block; }
.bk-row { cursor: pointer; }
.bk-row:hover td, .bk-row:focus td { background: var(--brand-tint); }
/* CEO: tanlab o'chirish */
.bk-selbar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--danger); border-radius: var(--radius-lg); background: var(--danger-tint); }
.bk-selbar__n { margin-right: auto; }
.bk-pickbox { width: 20px; height: 20px; accent-color: var(--danger); flex: none; pointer-events: none; }
.bk-card.is-picked { border-color: var(--danger); background: var(--danger-tint); }
.bk-row.is-picked td { background: var(--danger-tint); }
.bk-totals { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: 0 -4px 12px rgba(0,0,0,.04); z-index: 2; }
.bk-totals:empty { display: none; }
.bk-totals > div { display: flex; flex-direction: column; min-width: 80px; }
.bk-totals span { font-size: 11px; color: var(--text-muted); }
.bk-totals b { font-size: 16px; }

/* Oynalar */
.bk-sheet { width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.bk-sheet--wide { width: min(760px, 100%); }
.bk-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.bk-sheet__head h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 18px; }
.bk-sheet__sub { margin: 4px 0 0; font-size: var(--fs-caption); color: var(--text-muted); }
.bk-sheet__body { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
.bk-sheet__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); }
.bk-ask__text { font-size: 14px; color: var(--text-strong); }
.bk-radio { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bk-radio__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; }
.bk-radio__opt:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.bk-radio__opt input { width: 18px; height: 18px; accent-color: var(--brand); }
.bk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-h4 { margin: 4px 0 6px; font-size: 14px; font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 8px; }
.bk-item { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.bk-item__book { flex: 1; min-width: 0; }
.bk-qty { display: inline-flex; align-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); flex: none; }
.bk-qty__b { width: 44px; height: 44px; border: 0; background: none; font-size: 20px; color: var(--text-strong); cursor: pointer; }
.bk-qty span { min-width: 28px; text-align: center; font-weight: 600; }
.bk-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-radius: var(--radius-md); background: var(--brand-tint); }
.bk-sum b { font-size: 20px; color: var(--brand); }

/* Buyurtma kartasi */
.bk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bk-step { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-muted); }
.bk-step b { display: block; font-weight: 600; }
.bk-step small { display: block; font-size: 11px; }
.bk-step__dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--surface-sunken); color: var(--text-muted); }
.bk-step.is-done { color: var(--text-strong); }
.bk-step.is-done .bk-step__dot { background: var(--success); color: #fff; }
.bk-step.is-next .bk-step__dot { box-shadow: 0 0 0 2px var(--brand); color: var(--brand); }
.bk-steps.is-closed .bk-step:not(.is-done) { opacity: .5; }
.bk-alert { padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13px; }
.bk-alert--bad { background: var(--danger-tint); color: var(--text-strong); }
.bk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-block { padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.bk-block--bad { border-top-color: var(--danger); }
.bk-note { font-size: 13px; margin: 6px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bk-student { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.bk-tel { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand); font-weight: 600; text-decoration: none; }
.bk-items, .bk-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bk-items li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--border-subtle); }
.bk-items li:last-child { border-bottom: 0; }
.bk-pay { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.bk-pay[data-open] { cursor: pointer; }
.bk-pay--tekshirish { border-color: var(--danger); background: var(--danger-tint); }
.bk-pay--bekor { opacity: .6; }
.bk-pay--big b { font-size: 18px; }
.bk-pay__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-timeline li { display: grid; grid-template-columns: 88px 1fr; gap: 8px; font-size: 13px; }
.bk-timeline li > span { color: var(--text-muted); font-size: 12px; }
.bk-audit-diff { word-break: break-word; }
.bk-old { text-decoration: line-through; opacity: .7; }

/* Qo'ng'iroqlar */
.bk-calls, .bk-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bk-call { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border-subtle); border-left: 4px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
.bk-call.is-overdue { border-left-color: var(--danger); background: var(--danger-tint); }
.bk-call__main { flex: 1; min-width: 200px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.bk-call__acts { display: flex; gap: 8px; }
.bk-btn-call { text-decoration: none; }
.bk-req { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }

/* Pul */
.bk-hero { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 18px; border-radius: var(--radius-lg); background: var(--brand); color: var(--text-on-brand, #fff); }
.bk-hero span { opacity: .85; font-size: 13px; }
.bk-hero > b { font-size: 32px; line-height: 1.1; }
.bk-hero small b { font-size: inherit; }
.bk-hero small { opacity: .9; }
.bk-hero .ui-btn { margin-top: 8px; background: var(--surface-card); color: var(--brand); border-color: transparent; }
.bk-kv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bk-kv3 > div, .bk-money > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.bk-kv3 span, .bk-money span { font-size: 11px; color: var(--text-muted); }
.bk-kv3 b, .bk-money b { font-size: 16px; }
.bk-money { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bk-money .is-now { border: 1px dashed var(--border-subtle); }
.bk-money .is-now span::after { content: " · hozir"; }
.bk-count { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 10px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; }

/* Kitobchi: olib kelish */
.bk-pick { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
.bk-pick__head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.bk-pick__title { font-weight: 600; font-size: 16px; }
.bk-pick__qty { font-size: 26px; color: var(--brand); white-space: nowrap; }
.bk-pick__qty small { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.bk-pick summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; font-size: 13px; color: var(--brand); font-weight: 600; }
.bk-pick__orders { list-style: none; margin: 0; padding: 0; }
.bk-pick__orders li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px dashed var(--border-subtle); }
.bk-wide { width: 100%; justify-content: center; }

/* Hisobot, katalog */
.bk-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bk-range { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.bk-range .ui-field { min-width: 150px; }
.bk-range__presets { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 4px; }
.bk-cat.is-off { opacity: .65; }
.bk-cat__prices { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.bk-cat__prices b { color: var(--text-strong); }
.bk-more { display: flex; justify-content: center; }
.bk-sub td { color: var(--text-muted); font-size: 13px; }
.bk-ret td { color: var(--danger); }
.bk-reset { max-width: 720px; }
/* Darajalar va kurslar */
.bk-levels { max-width: 760px; }
.bk-lvlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-lv { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
.bk-lv.is-off { opacity: .7; background: var(--surface-sunken); }
.bk-lv__pos { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand); font-weight: 700; font-size: 13px; }
.bk-lv__main { min-width: 0; }
.bk-lv__move, .bk-lv__acts { display: flex; gap: 4px; }
.bk-lv__move .ui-btn { min-width: 44px; min-height: 44px; }
@media (max-width: 760px) {
  .bk-lv { grid-template-columns: 32px 1fr auto; }
  .bk-lv__acts { grid-column: 1 / -1; }
  .bk-lv__acts .ui-btn { flex: 1; justify-content: center; }
}
.bk-roles td:first-child { min-width: 220px; }
.bk-yes { color: var(--success); display: inline-flex; }
.bk-no { color: var(--text-muted); }
.ui-col--center { text-align: center; }

/* Pastki menyudagi son */
.tnav__item { position: relative; }
.tnav__count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tnav__count[hidden] { display: none; }
.tnav__count--danger { background: var(--danger); }
.tnav__count--warning { background: var(--warning); }

@media (max-width: 1100px) {
  .bk-filters__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-money, .bk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bk-cards { display: flex; }
  .bk-table-wrap { display: none; }
  .bk-filters__grid, .bk-grid2 { grid-template-columns: 1fr; }
  .bk-money, .bk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-steps { grid-template-columns: 1fr 1fr; }
  .shell-mode:has(.tnav) .bk-totals { bottom: 76px; }
  /* Telefonda oyna — to'liq ekran */
  .bk-overlay { padding: 0; align-items: stretch; }
  .bk-sheet, .bk-sheet--wide { width: 100%; max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .bk-sheet__foot .ui-btn { flex: 1; justify-content: center; }
  .bk-actions .ui-btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  /* 44px teginish maydoni */
  .bk-screen .ui-btn, .bk-sheet .ui-btn, .bk-screen .ui-field__input, .bk-sheet .ui-field__input { min-height: 44px; }
  .bk-head .tasks-title { font-size: 22px; }
}

/* ---------- Sozlamalar → Avtomatik topshiriqlar (namuna: "Avtomatik topshiriqlar" dizayni) ---------- */
.au-screen { max-width: 960px; }
.au-lead { max-width: 62ch; }
.au-ro { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--radius-lg); background: var(--warning-tint); border: 1px solid var(--border-subtle); color: var(--warning); font-size: var(--fs-body-sm); font-weight: 600; }
.au-ro .ui-icon { flex: none; }

/* Bot holati (heartbeat) */
.au-beat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 13px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: var(--shadow-card); }
.au-beat__dot { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--success); }
.au-beat__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--success); opacity: .5; animation: au-pulse 2s ease-out infinite; }
.au-beat.is-warn { border-color: var(--warning); }
.au-beat.is-warn .au-beat__dot { background: var(--warning); }
.au-beat.is-warn .au-beat__dot::after { border-color: var(--warning); }
.au-beat.is-idle .au-beat__dot { background: var(--text-faint); }
.au-beat.is-idle .au-beat__dot::after { display: none; }
.au-beat__txt { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.au-beat__sub { font-size: var(--fs-body-sm); color: var(--text-muted); }
.au-beat__warn { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); font-weight: 600; color: var(--warning); }
.au-beat__warn .ui-icon { flex: none; }
@keyframes au-pulse { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }

/* Yig'ma */
.au-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.au-stat { padding: 14px 16px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.au-stat__n { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
.au-stat__l { margin-top: 2px; font-size: var(--fs-caption); color: var(--text-muted); }
.au-stat.is-on .au-stat__n { color: var(--success); }
.au-stat.is-err .au-stat__n { color: var(--danger); }
.au-stat.is-off .au-stat__n { color: var(--text-faint); }

.au-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.au-search { flex: 1 1 220px; min-width: 180px; }
.au-search .ui-field { margin: 0; }
.au-chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* Qoida kartasi: chapda ma'lumot, o'ngda boshqaruv ustuni */
.au-list { display: flex; flex-direction: column; gap: var(--space-3); }
.au-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.au-card.is-err { border-left: 3px solid var(--danger); }
.au-card.is-paused { opacity: .72; }
.au-card.is-paused .au-ttl { color: var(--text-muted); }
.au-crow { display: flex; align-items: flex-start; gap: 14px; padding: 16px; }
.au-main { flex: 1; min-width: 0; }
.au-titleline { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.au-ttl { margin: 0; font-size: 15.5px; line-height: 1.4; font-weight: 650; letter-spacing: -.01em; color: var(--text-strong); overflow-wrap: anywhere; }
.au-cat { padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; background: var(--surface-sunken); color: var(--text-muted); }
.au-cat--fin { background: var(--warning-tint); color: var(--warning); }
.au-cat--edu { background: var(--info-tint); color: var(--info); }
.au-cat--sales { background: var(--success-tint); color: var(--success); }
.au-cat--ctrl { background: var(--brand-tint); color: var(--brand); }
.au-desc { margin: 5px 0 0; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.au-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin-top: 14px; }
.au-f__k, .au-k { margin-bottom: 3px; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.au-k { margin-bottom: 6px; }
.au-f__v { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); font-weight: 500; color: var(--text-strong); overflow-wrap: anywhere; min-width: 0; }
.au-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.au-av { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 10.5px; font-weight: 700; }
.au-errbar { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--danger-tint); color: var(--danger); font-size: var(--fs-body-sm); overflow-wrap: anywhere; }
.au-errbar .ui-icon { flex: none; margin-top: 2px; }
.au-errbar b { font-weight: 700; }

.au-side { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex: none; }
.au-card .tf-switch[aria-checked="true"] { background: var(--success); }
.au-card .tf-switch:disabled { opacity: .4; cursor: not-allowed; }
.au-hp { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.au-hp::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.au-hp--running { background: var(--success-tint); color: var(--success); }
.au-hp--running::before { animation: au-pulse2 2s ease-out infinite; }
.au-hp--broken { background: var(--danger-tint); color: var(--danger); }
.au-hp--paused { background: var(--surface-sunken); color: var(--text-faint); }
@keyframes au-pulse2 { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 70% { box-shadow: 0 0 0 5px transparent; opacity: .6; } 100% { opacity: 1; } }
.au-runs { display: inline-flex; align-items: flex-end; gap: 3px; }
.au-runs i { width: 6px; height: 15px; border-radius: 2px; background: var(--success); opacity: .85; }
.au-runs i.is-bad { background: var(--danger); opacity: 1; }
.au-runs i.is-dim { background: var(--border-subtle); opacity: 1; }
.au-main { cursor: pointer; }
.au-main:hover .au-ttl { color: var(--brand); }
.au-card.is-paused .au-main:hover .au-ttl { color: var(--text-strong); }
.au-openref { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border: 0; border-radius: 6px; background: none; color: var(--text-faint); font: inherit; font-size: var(--fs-caption); cursor: pointer; }
.au-openref:hover { color: var(--brand); }
.au-openref:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.au-muted { margin: 0; font-size: var(--fs-body-sm); color: var(--text-faint); }
.au-empty { margin: 0; padding: 40px 0; text-align: center; font-size: 14px; color: var(--text-muted); }

/* Batafsil sahifa */
.au-droot { display: contents; }
.au-back { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.au-back:hover { color: var(--brand); }
.au-back:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.au-dhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.au-dhead__main { min-width: 0; flex: 1 1 320px; }
.au-dhead .au-titleline { margin-bottom: 6px; }
.au-dhead .au-desc { margin: 0; max-width: 60ch; }
.au-dtitle { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--text-strong); overflow-wrap: anywhere; }
.au-dside { display: flex; align-items: center; gap: 10px; flex: none; }
.au-dside .tf-switch[aria-checked="true"], .au-roles .tf-switch[aria-checked="true"] { background: var(--success); }
.au-dside .tf-switch:disabled, .au-roles .tf-switch:disabled { opacity: .4; cursor: not-allowed; }
.au-sec { padding: 16px 18px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; }
.au-sec--err { border-left: 3px solid var(--danger); }
.au-sec--err .au-errbar { margin: 0; }
.au-sec__h { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.au-ov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.au-ov .au-f__v { font-size: 13.5px; }
.au-src { padding: 1px 6px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--surface-sunken); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.au-sample { padding: 13px 15px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-strong); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.au-ol { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: au-s; }
.au-ol li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--text-strong); counter-increment: au-s; overflow-wrap: anywhere; }
.au-ol li::before { content: counter(au-s); flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 700; }
.au-ol li span { padding-top: 1px; }
.au-done { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--success-tint); font-size: 13.5px; color: var(--text-strong); overflow-wrap: anywhere; }
.au-done > .ui-icon { flex: none; margin-top: 2px; color: var(--success); }
.au-done > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.au-done b { color: var(--success); }
.au-done__list { margin: 0; padding-left: 18px; }
.au-roles { display: flex; flex-direction: column; }
.au-role { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.au-role:last-child { border-bottom: 0; }
.au-role__nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--text-strong); }
.au-role__people { font-weight: 400; color: var(--text-muted); }
.au-pin { padding: 2px 7px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand); font-size: 10.5px; font-weight: 600; }
.au-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); }
.au-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.au-filterbar .ui-field { margin: 0; width: 170px; }
.au-log { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.au-log th { padding: 0 10px 8px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.au-log td { padding: 9px 10px; border-top: 1px solid var(--border-subtle); color: var(--text-strong); overflow-wrap: anywhere; }
.au-log .au-log__n { text-align: right; font-weight: 600; white-space: nowrap; }
.au-logtot { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--border-subtle); font-size: 14px; font-weight: 700; color: var(--text-strong); }
.au-hist { display: flex; align-items: flex-end; gap: 4px; }
.au-hist i { width: 9px; height: 18px; border-radius: 2px; background: var(--success); }
.au-hist i.is-bad { background: var(--danger); }

.au-foot { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--brand-tint); font-size: var(--fs-body-sm); color: var(--text-muted); }
.au-foot .ui-icon { flex: none; margin-top: 1px; color: var(--brand); }

@media (max-width: 760px) {
  .au-stats, .au-meta, .au-ov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .au-crow { flex-direction: column; }
  .au-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; }
  .au-ov { grid-template-columns: 1fr; }
  .au-filterbar .ui-field { width: calc(50% - 5px); }
}
@media (prefers-reduced-motion: reduce) {
  .au-beat__dot::after, .au-hp--running::before { animation: none; }
}

/* Tizim holati (Sozlamalar) */
.ops-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.ops-path { font-size: var(--fs-caption, 12px); color: var(--text-muted); word-break: break-all; }
.ops-msg { max-width: 420px; word-break: break-word; }