/* ==========================================================================
   Sovg'a tizimi - dizayn tokenlari
   Bu yerdagi qiymatlar butun tizim bo'ylab ishlatiladi. Rang yoki o'lcham
   kerak bo'lsa - yangi hex yozmasdan, shu yerdan token olinadi.
   ========================================================================== */
:root {
    /* --- Sirt va matn --- */
    --bg: #f7f8fa;
    --surface: #ffffff;
    --surface-2: #fbfcfd;   /* qator ustiga kelganda, yupqa ajratish */
    --border: #eceef1;
    --border-strong: #e0e3e8;
    --text: #17181c;
    --text-secondary: #6b7280;
    --text-muted: #9aa1ac;
    --primary: #17181c;
    --primary-hover: #000000;
    --accent: #4f46e5;
    --accent-soft: #eef1ff;

    /* --- Holat ranglari ---
       Har bir holat uchun uchlik: matn (asosiy), fon (soft), chegara.
       Status nishonlari, ogohlantirishlar va grafiklar shundan oladi. */
    --ok: #059669;
    --ok-strong: #047857;
    --ok-soft: #ecfdf5;
    --ok-border: #a7f3d0;

    --warn: #b45309;
    --warn-strong: #c2410c;
    --warn-soft: #fffbeb;
    --warn-soft-2: #fff7ed;
    --warn-border: #fde68a;
    --warn-border-2: #fed7aa;

    --danger: #dc2626;
    --danger-strong: #b91c1c;
    --danger-soft: #fef2f2;
    --danger-soft-2: #fff5f5;
    --danger-border: #fecdd3;

    --info: #2563eb;
    --info-strong: #1d4ed8;
    --info-soft: #eff6ff;
    --info-border: #dbeafe;
    --info-border-2: #bfdbfe;

    --violet: #6d28d9;
    --violet-soft: #f5f3ff;
    --violet-border: #ede9fe;

    --cyan: #0e7490;
    --cyan-soft: #ecfeff;
    --cyan-border: #cffafe;

    /* --- Shrift shkalasi (6 pog'ona) ---
       Yangi joyda shulardan biri ishlatiladi, oraliq qiymat yozilmaydi. */
    --fs-xs: 0.70rem;   /* belgilar, jadval sarlavhalari */
    --fs-sm: 0.78rem;   /* ikkilamchi matn */
    --fs-md: 0.85rem;   /* asosiy matn */
    --fs-lg: 1rem;      /* karta sarlavhasi */
    --fs-xl: 1.25rem;   /* bo'lim sarlavhasi */
    --fs-2xl: 1.6rem;   /* sahifa sarlavhasi */

    /* --- Bo'shliq shkalasi (4px qadam) --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 22px;
    --sp-6: 32px;

    /* --- Shakl --- */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px rgba(16,18,24,0.04), 0 1px 3px rgba(16,18,24,0.02);
    --shadow-pop: 0 12px 32px rgba(16,18,24,.14);
}

* { box-sizing: border-box; }
/* `hidden` atributi har doim ishlasin. Ba'zi komponentlarga display: flex
   berilgani uchun brauzerning o'z qoidasi ustidan o'tib ketar edi - natijada
   yashirilgan element ko'rinib qolardi. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); }

/* ---------- Sidebar ---------- */
.sidebar {
    width: 240px; flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    padding: 20px 14px;
    position: fixed; top: 0; left: 0; height: 100vh;
    z-index: 20;
}
.brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--text); font-weight: 700; font-size: 0.98rem;
    letter-spacing: -0.01em; padding: 6px 8px 20px;
}
.brand-icon {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.side-label {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-muted); font-weight: 600; padding: 0 8px 8px;
}
.side-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 0.875rem; font-weight: 500;
    transition: background .12s ease, color .12s ease;
}
.side-nav a i { font-size: 1rem; width: 18px; text-align: center; }
.side-nav a:hover { background: var(--bg); color: var(--text); }
.side-nav a.active { background: var(--accent-soft); color: var(--accent); }
.nav-badge {
    margin-left: auto; background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border);
    font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
}

.side-user {
    border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px;
    display: flex; align-items: center; gap: 10px;
}
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.78rem; flex-shrink: 0;
}
.side-user-info { flex: 1; min-width: 0; }
.side-user-name { font-size: 0.83rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-role { font-size: 0.72rem; color: var(--text-muted); }
.btn-logout {
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary);
    width: 30px; height: 30px; border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; transition: all .12s ease;
}
.btn-logout:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

/* Yon menyu yig'ilgan holatda turadi; chap yuqoridagi tugma ochadi */
body.has-sidebar .sidebar { transform: translateX(-100%); transition: transform .18s ease; box-shadow: none; }
body.has-sidebar.menu-open .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(16,18,24,.12); }
.menu-toggle {
    position: fixed; top: 14px; left: 14px; z-index: 30;
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    box-shadow: var(--shadow);
}
.menu-toggle:hover { border-color: var(--text-muted); }
body.menu-open .menu-toggle { left: 254px; }
.menu-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(16,18,24,.25); }
.menu-backdrop[hidden] { display: none; }

/* ---------- Main ---------- */
main { padding: 34px 40px 90px 64px; min-width: 0; }
body.has-sidebar main { margin-left: 0; }
.page-head { margin-bottom: 26px; }
h1.page-title { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, table { max-width: 100%; }

/* ---------- Mobile (phones / Telegram Mini App) ---------- */
@media (max-width: 720px) {
    .sidebar { width: 260px; }
    body.menu-open .menu-toggle { left: 274px; }
    main { padding: 64px 14px 70px; }
    .page-head { margin-bottom: 18px; flex-wrap: wrap; }
    h1.page-title { font-size: 1.2rem; }
    .card-body { padding: 14px 16px; }
    .filter-bar { gap: 8px; }
    .filter-bar > div { width: 100% !important; min-width: 0; }
    .stat-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
    .btn { padding: 8px 12px; }
}

/* Keng jadvallar 1000px dan pastda kartaga aylanadi. Yon menyu
   720px da yig'iladi (yuqorida), lekin jadval undan ancha oldin
   sig'masdan qoladi - noutbuk/planshet oralig'ida ustunlar
   bildirmasdan kesilib ketmasligi uchun chegara kengaytirilgan. */
@media (max-width: 1000px) {
    .table-wrap { overflow-x: visible; }
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    /* Har bir qator - alohida karta. Yorliq chapda kulrang, qiymat o'ngda:
       barmoq bilan ishlashda ustunlar aralashib ketmaydi. */
    .table-stack tr {
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius-sm); margin-bottom: var(--sp-2);
        padding: var(--sp-2) var(--sp-3);
    }
    .table-stack tr:hover { background: var(--surface); }
    .table-stack td {
        display: flex; align-items: baseline; gap: var(--sp-3);
        padding: 5px 0; border: none; text-align: right;
    }
    .table-stack td:not(:last-child) { border-bottom: 1px solid var(--border); }
    .table-stack td.empty-row { text-align: center; border-bottom: none; display: block; }
    .table-stack td[data-label]::before {
        content: attr(data-label); flex-shrink: 0; text-align: left;
        font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
        color: var(--text-muted); min-width: 92px;
    }
    .table-stack td > * { margin-left: auto; }
    .table-stack td:first-child { justify-content: flex-start; border-bottom: 1px solid var(--border); }
    .table-stack td:first-child > * { margin-left: 0; }
    /* Karta ichida checkbox va tugmalar to'liq kenglikda */
    .table-stack td input[type=checkbox] { transform: scale(1.15); }
    .table-stack .status-form { flex-wrap: wrap; }
}

/* ---------- Taqsimot ro'yxati (hudud / sovg'a / punkt) ----------
   Bir xil tugmachalar o'rniga reyting ro'yxati: son o'ngda,
   orqa fonda proporsional chiziq - qaysi biri ko'pligi bir
   qarashda ko'rinadi. */
.dist-list { display: flex; flex-direction: column; gap: 1px; }
.dist-row {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 6px 9px; border-radius: 6px; font-size: 0.83rem;
    overflow: hidden; isolation: isolate;
}
.dist-bar {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(79,70,229,.17), rgba(79,70,229,.09));
    border-radius: 6px; min-width: 26px;
}
.dist-name {
    flex: 1; min-width: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.dist-count {
    flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--text);
}
.dist-total {
    float: right; font-weight: 500; color: var(--text-muted);
    text-transform: none; letter-spacing: 0;
}
.dist-total-hot { color: var(--danger); font-weight: 700; }
.dist-row-warn .dist-bar { background: var(--danger-soft); }
.dist-row-warn .dist-name, .dist-row-warn .dist-count { color: var(--danger-strong); }

/* ---------- Punktga yetib keldi ---------- */
.arrivals-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
    position: sticky; top: 0; z-index: 5;
    background: var(--bg); padding: 10px 0;
}
.arrival-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.arrival-point { font-weight: 700; font-size: 0.95rem; }
.arrival-all {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
    white-space: nowrap; cursor: pointer;
}

/* ---------- Sinxronizatsiya paneli ---------- */
.sync-mini { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.sync-mini-info { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.sync-new { color: var(--ok-strong); font-weight: 600; }
.sync-err { color: var(--danger-strong); }

/* ---------- Boshqaruv paneli ---------- */
.kpi-row {
    display: grid; gap: 12px; margin-bottom: 24px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kpi {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 16px;
}
.kpi-link { text-decoration: none; }
.kpi-link:hover { border-color: var(--accent); }
.kpi-label {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px;
}
.kpi-value {
    font-size: 1.9rem; font-weight: 700; line-height: 1.1;
    color: var(--text); font-variant-numeric: tabular-nums;
}
.kpi-unit { font-size: 1rem; font-weight: 600; color: var(--text-muted); }
.kpi-blue { color: var(--info); }
.kpi-green { color: var(--ok-strong); }
.kpi-red { color: var(--danger-strong); }
.kpi-foot { font-size: 0.72rem; color: var(--text-muted); margin-top: 5px; }
.kpi-meter {
    margin-top: 9px; height: 5px; border-radius: 3px;
    background: var(--accent-soft); overflow: hidden;
}
.kpi-meter span { display: block; height: 100%; background: var(--ok-strong); border-radius: 3px; }

/* Diqqat talab qiladigan holatlar - nol bo'lsa xotirjam, aks holda qizil */
.alert-row {
    display: grid; gap: 12px; margin-bottom: 26px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.alert-card {
    display: block; text-decoration: none; padding: 14px 16px;
    border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
}
.alert-card:hover { border-color: var(--text-muted); }
.alert-num {
    font-size: 1.45rem; font-weight: 700; color: var(--text-muted);
    display: flex; align-items: center; gap: 8px;
}
.alert-title { font-size: 0.86rem; font-weight: 600; color: var(--text); margin-top: 4px; }
.alert-hint { font-size: 0.73rem; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.alert-hot { background: var(--danger-soft-2); border-color: var(--danger-border); }
.alert-hot:hover { border-color: var(--danger); }
.alert-hot .alert-num, .alert-hot .alert-title { color: var(--danger-strong); }

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

/* Bosqichlar quvuri - dist-list kabi, lekin bosiladigan filtr */
.pipe { display: flex; flex-direction: column; gap: 1px; }
.pipe-step {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 7px 9px; border-radius: 6px; font-size: 0.83rem;
    overflow: hidden; isolation: isolate; text-decoration: none;
}
.pipe-step:hover { background: var(--bg); }
.pipe-fill {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: -1;
    background: var(--accent-soft); border-radius: 6px;
}
.pipe-name {
    flex: 1; min-width: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.pipe-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.pipe-active { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---------- Qora ro'yxatdagi mijoz ---------- */
tbody tr.row-blacklisted { background: var(--danger-soft-2); }
tbody tr.row-blacklisted:hover { background: var(--danger-border); }
tbody tr.row-blacklisted td { border-bottom-color: var(--danger-border); }
tr.row-blacklisted .bl-name { color: var(--danger-strong); font-weight: 700; }
.bl-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--danger-soft); color: var(--danger-strong); border: 1px solid var(--danger-border);
    font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 5px;
    text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}

/* Buyurtma raqami - mijoz ismidan keyin kichik havola sifatida */
.order-ref {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.68rem; color: var(--text-muted);
    display: inline-block; max-width: 130px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.page-sub { color: var(--text-secondary); font-size: 0.875rem; margin-top: 4px; }
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-secondary); font-size: 0.82rem; font-weight: 500; margin-bottom: 14px;
}
.back-link:hover { color: var(--text); }

/* ---------- Alerts ---------- */
.alerts { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.alert { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 0.85rem; border: 1px solid transparent; }
.alert-error { background: var(--danger-soft); color: var(--danger-strong); border-color: var(--danger-border); }
.alert-success { background: var(--ok-soft); color: var(--ok-strong); border-color: var(--ok-border); }

/* ---------- Cards ---------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-body { padding: 18px 20px; }
.section-label {
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    margin: 0 0 10px;
}

/* ---------- Stat tiles ---------- */
.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 28px;
}
.stat-card { display: block; }
.stat-card .card { transition: border-color .12s ease, transform .12s ease; }
.stat-card:hover .card { border-color: var(--border-strong); transform: translateY(-1px); }
.stat-card .card-body { padding: 16px 18px; }
.stat-value { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 10px; }

/* ---------- Badges ---------- */
.badge-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 500; font-size: 0.75rem; padding: 3px 9px;
    border-radius: 6px; white-space: nowrap; border: 1px solid transparent;
}
.badge-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-new { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }
.badge-in_review { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-border); }
.badge-forwarded { background: var(--cyan-soft); color: var(--cyan); border-color: var(--cyan-border); }
.badge-in_progress { background: var(--warn-soft-2); color: var(--warn-strong); border-color: var(--warn-border-2); }
.badge-ready_for_delivery { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-border); }
.badge-at_pickup_point { background: var(--info-soft); color: var(--info-strong); border-color: var(--info-border-2); }
.badge-delivered { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-border); }
.badge-cancelled { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.badge-plain { background: var(--bg); color: var(--text-secondary); border-color: var(--border-strong); }
/* Holat nishonining maʼnoviy ko'rinishlari. Buyurtma holatlari uchun
   yuqoridagi `.badge-<status>` ishlatiladi, boshqa hamma joyda (xodim faolmi,
   punkt ishlayaptimi, telegram ulanganmi) - shu beshtadan biri. */
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-border); }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-border); }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.badge-info { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }
.badge-muted { background: var(--bg); color: var(--text-secondary); border-color: var(--border-strong); }
.badge-muted::before { display: none; }
.badge-plain::before { display: none; }
.badge-role-admin { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.badge-role-worker1 { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }
.badge-role-worker2 { background: var(--warn-soft-2); color: var(--warn-strong); border-color: var(--warn-border-2); }
.badge-role-worker3 { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-border); }
.badge-role-admin::before, .badge-role-worker1::before, .badge-role-worker2::before, .badge-role-worker3::before { display: none; }

/* ---------- Partiya yaratish paneli (worker1) ----------
   Uch qadam ketma-ket: kimga -> qaysi buyurtmalar -> yaratish.
   Butun qaror bitta joyda, tugma tepada. */
.batch-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; margin-bottom: 22px; overflow: hidden;
}
.bp-step {
    display: flex; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.bp-step-last { border-bottom: none; background: var(--bg); }
.bp-num {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.bp-body { flex: 1; min-width: 0; }
.bp-label { font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.bp-gear {
    margin-left: auto; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.bp-gear:hover, .bp-gear-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.bp-select { max-width: 300px; }
.bp-hint { font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; }
.bp-warn {
    font-size: 0.84rem; color: var(--danger-strong); background: var(--danger-soft-2);
    border: 1px solid var(--danger-border); border-radius: 8px; padding: 10px 12px;
}

/* Rejim kartalari - radio o'rniga bosiladigan karta */
.bp-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.bp-mode {
    display: flex; gap: 7px; align-items: flex-start; cursor: pointer;
    border: 1.5px solid var(--border-strong); border-radius: 8px; padding: 6px 10px;
    transition: border-color .12s, background .12s;
}
.bp-mode:hover { border-color: var(--text-muted); }
.bp-mode-on { border-color: var(--accent); background: var(--accent-soft); }
.bp-mode-off { opacity: .6; cursor: default; }
.bp-mode-off:hover { border-color: var(--border-strong); }
.bp-mode input[type=radio] { margin-top: 2px; accent-color: var(--accent); }
.bp-mode-body { flex: 1; min-width: 0; }
.bp-mode-title { font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bp-count { margin-left: auto; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.bp-mode-desc { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }
.bp-mode-desc b { color: var(--text); }
.bp-mode-count { font-size: 0.86rem; margin-top: 6px; }
.bp-mode-count b { font-size: 1.05rem; }
.bp-mode-foot { font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; }
.bp-due { color: var(--ok); font-weight: 600; }
.bp-pill {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 1px 7px; border-radius: 999px; margin-left: 4px;
    background: var(--bg); color: var(--text-muted); border: 1px solid var(--border-strong);
}
.bp-pill-on { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-border); }
.bp-check {
    display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem;
    font-weight: 600; cursor: pointer;
}
.bp-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.bp-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.bp-settings {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
    margin-top: 10px; padding: 12px; background: var(--bg);
    border: 1px dashed var(--border-strong); border-radius: 9px; font-size: 0.82rem;
}
.bp-settings-label { font-size: 0.78rem; font-weight: 600; margin-bottom: 6px; }
.bp-settings-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bp-action { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bp-action-hint { font-size: 0.8rem; color: var(--text-muted); }
.btn-lg { padding: 9px 18px; font-size: 0.88rem; }

/* Ballar taqsimoti - qaysi mahsulotdan kelgan */
.pts { display: block; font-size: 0.7rem; color: var(--text-muted); line-height: 1.3; }
.pts span + span::before { content: ' · '; }

/* Sana oralig'i filtri */
.date-range { display: flex; align-items: center; gap: 6px; }
.date-range .form-control { width: 140px; }

.last-batch {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    font-size: 0.82rem; color: var(--text-secondary);
    background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
    padding: 8px 14px; margin-bottom: 14px;
}

/* Partiya yaratish - tugma ostida ochiladigan ixcham panel */
.mini-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
    padding: 4px 14px; margin-bottom: 12px;
}
.mini-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 0; font-size: 0.82rem; margin: 0;
}
.mini-row + .mini-row { border-top: 1px solid var(--border); }
.mini-label { font-weight: 700; min-width: 100px; display: inline-flex; align-items: center; gap: 6px; }
.mini-row .btn { margin-left: auto; }

.point-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px; }
.point-check { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; font-weight: normal; cursor: pointer; }
.point-check input { accent-color: var(--accent); }

/* Bajaruvchi partiya jadvali - ixcham, bir ekranga sig'adi */
.w2-table thead th { padding: 8px 8px; font-size: 0.64rem; }
.w2-table tbody td { padding: 7px 8px; font-size: 0.78rem; line-height: 1.3; }
.w2-table .text-muted { font-size: 0.72rem; }
.w2-actions { display: inline-flex; gap: 3px; }
.btn-mini {
    width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-mini:hover { color: var(--text); border-color: var(--text-muted); background: var(--bg); }
.btn-mini-warn:hover { color: var(--warn); border-color: var(--warn-border); background: var(--warn-soft); }
.btn-mini-danger:hover { color: var(--danger); border-color: var(--danger-border); background: var(--danger-soft); }

.reason-note { font-size: 0.76rem; margin-top: 4px; line-height: 1.35; }

.tot-main { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 9px 8px; font-size: 0.9rem; }
.tot-main b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* Yetkazishga yuborish - sana so'rash oynasi */
.ship-modal { position: fixed; inset: 0; z-index: 40; background: rgba(16,18,24,.35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ship-modal[hidden] { display: none; }
.ship-box { background: var(--surface); border-radius: 14px; padding: 22px; width: 380px; max-width: 100%; box-shadow: 0 20px 60px rgba(16,18,24,.25); }
.ship-title { font-weight: 700; font-size: 1rem; margin-bottom: 12px; }
.ship-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 16px; }
.ship-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Yo'ldagi partiyalar (qabul xodimi) */
.ship-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ship-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 0.84rem; }
.ship-item-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ship-eta { color: var(--text-secondary); }
.ship-today { border-color: var(--ok-border); background: var(--ok-soft); }
.ship-today .ship-eta b { color: var(--ok); }
.ship-late { border-color: var(--danger-border); background: var(--danger-soft-2); }
.ship-late .ship-eta b { color: var(--danger-strong); }
.text-danger { color: var(--danger-strong); }

.eta-pill { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 8px; background: var(--accent-soft); color: var(--accent); vertical-align: middle; }
.eta-today { background: var(--ok-soft); color: var(--ok); }
.eta-late { background: var(--danger-soft); color: var(--danger-strong); }

/* Xavf tekshiruvi (test) */
.test-tag {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-border);
    padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 8px;
}
/* Xavf ro'yxati - kartalar, ichida to'liq faktlar */
.risk-list { display: flex; flex-direction: column; gap: 8px; }
.risk-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 11px; overflow: hidden;
}
.risk-card-high { border-color: var(--danger-border); }
.risk-main {
    display: grid; grid-template-columns: 54px minmax(180px, 1.3fr) minmax(130px, 1fr) minmax(200px, 1.4fr) 20px;
    gap: 14px; align-items: center; padding: 11px 14px; cursor: pointer;
}
.risk-main:hover { background: var(--surface-2); }
.risk-name { font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.risk-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.risk-gift-name { font-size: 0.84rem; }
.risk-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.risk-chip {
    font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px;
    white-space: nowrap; border: 1px solid var(--border-strong);
    background: var(--bg); color: var(--text-secondary);
}
.risk-chip-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-border); }
.risk-chip-danger { background: var(--danger-soft); color: var(--danger-strong); border-color: var(--danger-border); }
.risk-chip-ok { background: var(--ok-soft); color: var(--ok-strong); border-color: var(--ok-border); }
.risk-state {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
    font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.risk-state-given { background: var(--ok-soft); color: var(--ok-strong); border: 1px solid var(--ok-border); }
.risk-state-wait { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border-strong); }
.risk-state-none { background: var(--danger-soft); color: var(--danger-strong); border: 1px solid var(--danger-border); }
.risk-given-num { color: var(--ok-strong); }

.risk-chev { color: var(--text-muted); transition: transform .15s; }
.risk-open .risk-chev { transform: rotate(180deg); }

.risk-detail { border-top: 1px solid var(--border); background: var(--bg); padding: 14px; }
.risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.risk-box { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px; }
.risk-box-wide { grid-column: 1 / -1; }
.risk-box-head {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); margin-bottom: 9px;
}
.risk-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8rem; padding: 3px 0; }
.risk-kv span { color: var(--text-secondary); }
.risk-kv b { font-variant-numeric: tabular-nums; text-align: right; }

.risk-bar-row { display: flex; align-items: center; gap: 9px; font-size: 0.78rem; padding: 3px 0; }
.risk-bar-label { width: 108px; flex-shrink: 0; color: var(--text-secondary); }
.risk-bar { flex: 1; height: 7px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.risk-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.risk-bar-num { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }

.risk-rules { width: 100%; border-collapse: collapse; }
.risk-rules td { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.8rem; vertical-align: top; }
.risk-rules tr:last-child td { border-bottom: none; }
.risk-rule-name { font-weight: 600; white-space: nowrap; padding-right: 14px !important; width: 140px; }
.risk-rule-fact { color: var(--text-secondary); line-height: 1.45; }
.risk-rule-pts { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 14px !important; color: var(--warn); }
.risk-minus { color: var(--ok-strong); }
.risk-rules-total td { border-top: 1px solid var(--border-strong); font-weight: 700; padding-top: 9px !important; }
.risk-rules-total .risk-rule-pts { color: var(--text); font-size: 0.95rem; }
.risk-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 11px; }

@media (max-width: 860px) {
    .risk-main { grid-template-columns: 44px 1fr 20px; row-gap: 8px; }
    .risk-gift { grid-column: 2; }
    .risk-chips { grid-column: 1 / -1; }
    .risk-bar-label { width: 84px; }
}

.risk-score {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; padding: 3px 8px; border-radius: 7px;
    font-weight: 700; font-size: 0.86rem; font-variant-numeric: tabular-nums;
}
.risk-high { background: var(--danger-soft); color: var(--danger-strong); border: 1px solid var(--danger-border); }
.risk-mid { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-border); }
.risk-low { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border-strong); }
.risk-reasons { margin: 0; padding-left: 16px; font-size: 0.78rem; line-height: 1.45; }
.risk-reasons li { margin: 0; }
.risk-flagged { font-size: 0.74rem; color: var(--warn); white-space: nowrap; }

.rs-head { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 12px; }
.rs-rule { padding: 12px 0; border-top: 1px solid var(--border); }
.rs-rule:first-of-type { border-top: none; padding-top: 0; }
.rs-title { font-size: 0.88rem; font-weight: 600; margin-bottom: 7px; }
.rs-fields { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.rs-f { font-size: 0.8rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.rs-input { width: 86px; }
.rs-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }
.rs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-label { font-size: 0.85rem; font-weight: 600; }

.tr-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--ok-soft); color: var(--ok-strong); border: 1px solid var(--ok-border);
    font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 5px;
    text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
/* Partiya ichidagi filtr paneli (sovg'a / hudud) */
.fbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 16px; background: var(--bg);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.fdrop { position: relative; }
.fbtn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-family: inherit; font-size: 0.8rem; padding: 7px 12px;
    border: 1px solid var(--border-strong); border-radius: 9px;
    background: var(--surface); color: var(--text);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.fbtn:hover { border-color: var(--text-muted); }
.fbtn i { font-size: 0.9rem; color: var(--text-muted); }
.fbtn-label { color: var(--text-secondary); }
.fbtn-value { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbtn-chev { font-size: 0.7rem !important; margin-left: 2px; }
.fbtn-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fbtn-on i, .fbtn-on .fbtn-label { color: var(--accent); }
.fbtn-on .fbtn-value { color: var(--accent); }

.fmenu {
    position: absolute; z-index: 25; top: calc(100% + 6px); left: 0;
    min-width: 260px; max-height: 320px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 11px; padding: 6px; box-shadow: var(--shadow-pop);
}
.fopt {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 7px 9px; border-radius: 7px; font-size: 0.82rem;
}
.fopt:hover { background: var(--bg); }
.fopt input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.fopt-name { flex: 1; min-width: 0; }
.fopt-n {
    font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--text-muted); background: var(--bg);
    padding: 1px 7px; border-radius: 999px;
}
.fopt:has(input:checked) { background: var(--accent-soft); }
.fopt:has(input:checked) .fopt-name { font-weight: 600; color: var(--accent); }

.fsum {
    margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.78rem; color: var(--text-muted);
}
.fsum b { color: var(--text); font-variant-numeric: tabular-nums; }
.fclear {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    font-family: inherit; font-size: 0.76rem; padding: 4px 10px;
    border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface); color: var(--text-secondary);
}
.fclear:hover { border-color: var(--danger-border); color: var(--danger-strong); background: var(--danger-soft); }

@media (max-width: 720px) {
    .fbar { padding: 10px 14px; }
    .fsum { margin-left: 0; width: 100%; justify-content: space-between; }
    .fmenu { min-width: 220px; }
}

.arrival-chev { color: var(--text-muted); transition: transform .15s; margin-left: 8px; }
.arrival-open .arrival-chev { transform: rotate(180deg); }
.arrival-toggle:hover { background: var(--surface-2); }

.btn-mini-ok:hover { color: var(--ok-strong); border-color: var(--ok-border); background: var(--ok-soft); }
.btn-mini-on { color: var(--ok-strong); border-color: var(--ok-border); background: var(--ok-soft); }
.btn-ok-on { color: var(--ok-strong); border-color: var(--ok-border); background: var(--ok-soft); }

/* Tablar: Navbat / Qoldirilgan / Shubhali */
.tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.tab {
    padding: 6px 12px; border-radius: 7px; font-size: 0.82rem; font-weight: 600;
    color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--text); }
.tab-on { background: var(--primary); color: #fff; }
.tab-on:hover { color: #fff; }
.tab-count { font-size: 0.7rem; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.08); }
.tab-on .tab-count { background: rgba(255,255,255,.2); }
.tab-warn:not(.tab-on) { color: var(--warn); }
.triage-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.btn-warn { color: var(--warn); border-color: var(--warn-border); }
.btn-warn:hover { background: var(--warn-soft); }

/* Jadval qatoridagi kichik bekor tugmasi */
.btn-icon-danger {
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.btn-icon-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

/* Belgilanganlar bo'lsa pastda suzuvchi panel */
.float-bar {
    position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px; z-index: 30;
    background: var(--primary); color: #fff; border-radius: 999px;
    padding: 8px 10px 8px 18px; font-size: 0.86rem;
    box-shadow: 0 8px 24px rgba(16,18,24,.25);
}
body.has-sidebar .float-bar { left: 50%; }
.float-bar .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); background: transparent; }
.float-bar .btn-ghost:hover { background: rgba(255,255,255,.12); }
.float-bar .btn-primary { background: #fff; color: var(--primary); border-color: #fff; }
@media (max-width: 720px) {
    body.has-sidebar .float-bar { left: 50%; width: calc(100% - 28px); justify-content: space-between; }
    .bp-step { padding: 14px; gap: 12px; }
}

/* ---------- Forms ---------- */
.form-label {
    display: block; font-size: 0.76rem; color: var(--text-secondary);
    margin-bottom: 6px; font-weight: 500;
}
.form-control, .form-select {
    width: 100%; font-size: 0.85rem; padding: 8px 11px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font-family: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus, .form-select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.filter-bar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-bar .grow { flex: 1; min-width: 220px; }
.input-inline {
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font-family: inherit;
    font-size: 0.82rem; padding: 7px 9px; transition: border-color .12s ease, box-shadow .12s ease;
}
.input-inline:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-label { display: block; font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 0.85rem; font-weight: 500; padding: 8px 15px;
    border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
    font-family: inherit; white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn i { font-size: 0.95em; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-success { background: var(--ok); color: #fff; }
.btn-success:hover { background: var(--ok-strong); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg); border-color: var(--text-muted); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Segmented control */
.segmented { display: inline-flex; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.segmented button {
    border: none; background: transparent; cursor: pointer; font-family: inherit;
    font-size: 0.8rem; font-weight: 500; color: var(--text-secondary);
    padding: 5px 12px; border-radius: 6px; transition: all .12s ease;
}
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }
/* Uzun ro'yxatda sarlavha ko'rinib tursin */
.table-wrap thead th { position: sticky; top: 0; z-index: 2; }
/* Raqamlar ustunda bir xil kenglikda tursin - taqqoslash osonlashadi */
tbody td { font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; }
thead th {
    text-align: left; font-size: var(--fs-xs); text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600;
    padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2);
    white-space: nowrap;
}
tbody td {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    font-size: 0.85rem; vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty-row, .empty-state { text-align: center; color: var(--text-muted); padding: var(--sp-3); font-size: var(--fs-md); }

/* ---------- Toast xabarlari ---------- */
.toasts {
    position: fixed; right: 18px; bottom: 18px; z-index: 60;
    display: flex; flex-direction: column; gap: var(--sp-2); max-width: 380px;
}
.toast {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    background: var(--surface); border: 1px solid var(--border-strong);
    border-left-width: 3px; border-radius: var(--radius-sm);
    padding: 11px var(--sp-3); box-shadow: var(--shadow-pop);
    font-size: var(--fs-md); animation: toast-in .2s ease;
}
.toast-ok { border-left-color: var(--ok); }
.toast-ok > i { color: var(--ok); }
.toast-error { border-left-color: var(--danger); }
.toast-error > i { color: var(--danger); }
.toast-text { flex: 1; min-width: 0; line-height: 1.45; }
.toast-x {
    border: none; background: transparent; cursor: pointer; color: var(--text-muted);
    font-size: 1rem; line-height: 1; padding: 0 2px; font-family: inherit;
}
.toast-x:hover { color: var(--text); }
.toast-out { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
    .toasts { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

/* ---------- Tasdiq oynasi ---------- */
.modal {
    position: fixed; inset: 0; z-index: 70; display: flex;
    align-items: center; justify-content: center; padding: var(--sp-4);
    background: rgba(16,18,24,.35);
}
.modal-box {
    background: var(--surface); border-radius: var(--radius);
    padding: var(--sp-5); width: 420px; max-width: 100%;
    box-shadow: 0 20px 60px rgba(16,18,24,.25);
}
.modal-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-2); }
.modal-text { font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.5; margin-bottom: var(--sp-4); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* ---------- Tugmaning kutish holati ---------- */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy > * { visibility: hidden; }
.btn.is-busy::after {
    content: ''; position: absolute; width: 14px; height: 14px;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    animation: spin .6s linear infinite;
    color: #fff; top: 50%; left: 50%; margin: -7px 0 0 -7px;
}
.btn-ghost.is-busy::after, .btn-danger.is-busy::after { color: var(--text-secondary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Bo'sh holat ---------- */
.empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-4); text-align: center;
}
.empty-icon {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--text-muted); font-size: 1rem;
    border: 1px solid var(--border);
}
.empty-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); }
.empty-hint { font-size: var(--fs-sm); color: var(--text-muted); max-width: 320px; line-height: 1.45; }
.card-body > .empty, .table-wrap > .empty { padding: var(--sp-6) var(--sp-4); }

/* "Hammasi tinch" qatori - ogohlantirish bo'lmaganda joy egallamasin */
.calm {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    background: var(--ok-soft); border: 1px solid var(--ok-border);
    color: var(--ok-strong); border-radius: var(--radius-sm);
    padding: 9px var(--sp-4); font-size: var(--fs-sm); margin-bottom: var(--sp-5);
}
.calm > i { font-size: 0.95rem; }
.calm-more { margin-left: auto; }
.calm-more > summary {
    cursor: pointer; list-style: none; font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: .04em; opacity: .75;
}
.calm-more > summary::-webkit-details-marker { display: none; }
.calm-list { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.calm-item {
    font-size: var(--fs-xs); background: var(--surface); border: 1px solid var(--ok-border);
    border-radius: var(--radius-pill); padding: 2px 10px;
}
.calm-item b { font-variant-numeric: tabular-nums; }

.kpi-empty { color: var(--text-muted); }

.status-form { display: flex; gap: 8px; align-items: center; }
.status-form select { min-width: 150px; }

/* ---------- Login ---------- */
.login-wrap {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; width: 100%; padding: 20px;
    background:
        radial-gradient(900px 420px at 50% -8%, var(--accent-soft), transparent 70%),
        var(--bg);
}
.login-card { width: 380px; max-width: 100%; }
.login-card .card-body { padding: 36px 32px; }
.login-card { box-shadow: 0 18px 44px rgba(16,18,24,.07); }
.login-foot {
    margin-top: var(--sp-4); text-align: center;
    font-size: var(--fs-xs); color: var(--text-muted);
}
@media (max-width: 480px) { .login-card .card-body { padding: 28px 20px; } }
.login-icon {
    width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 16px;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.login-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 3px; letter-spacing: -0.02em; text-align: center; }
.login-sub { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 24px; text-align: center; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 6px; margin-top: 20px; list-style: none; padding: 0; }
.pagination a, .pagination span {
    display: inline-block; padding: 6px 13px; border-radius: var(--radius-sm);
    font-size: 0.8rem; color: var(--text); border: 1px solid var(--border-strong); background: var(--surface);
}
.pagination a:hover { border-color: var(--text-muted); }
.pagination .disabled { color: var(--text-secondary); border-color: var(--border); background: transparent; }

/* ---------- Order / photo cards (worker3) ---------- */
.order-card { margin-bottom: 14px; }
.order-card-head {
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
    padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.order-card-id { font-weight: 600; font-size: 0.92rem; }
.photo-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 600px) { .photo-slots { grid-template-columns: 1fr; } }
.photo-slot {
    border: 1.5px dashed var(--border-strong); border-radius: 10px;
    padding: 14px; text-align: center; background: var(--bg);
}
.photo-slot.has-photo { border-style: solid; border-color: var(--border); padding: 8px; background: var(--surface); }
.photo-slot img { width: 100%; max-height: 140px; object-fit: cover; border-radius: 7px; display: block; }
.photo-slot-label { font-size: 0.77rem; color: var(--text-secondary); margin: 8px 0 6px; }
.photo-slot input[type=file] { font-size: 0.75rem; color: var(--text-secondary); width: 100%; }
.order-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Details toggle ---------- */
.details-toggle > summary {
    cursor: pointer; list-style: none; user-select: none;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.82rem; font-weight: 500; color: var(--text-secondary);
    padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); transition: all .12s ease;
}
.details-toggle > summary::-webkit-details-marker { display: none; }
.details-toggle > summary:hover { color: var(--text); border-color: var(--text-muted); }
.details-toggle .icon-open { display: none; }
.details-toggle[open] .icon-open { display: inline; }
.details-toggle[open] .icon-closed { display: none; }
.details-toggle .details-body { margin-top: 14px; }

/* ---------- Utility ---------- */
.region-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.muted-row { color: var(--text-secondary); font-size: 0.8rem; }
.totals-list { display: flex; flex-direction: column; gap: 2px; }
.totals-row-item {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.83rem; padding: 3px 0;
}
.totals-row-item span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tungi rejim. Tizim sozlamasiga qarab avtomatik, yoki yon menyudagi
   tugma orqali qo'lda (<html data-theme="dark|light">).
   Faqat tokenlar qayta ta'riflanadi - komponentlar o'zgarmaydi.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f1115;
        --surface: #171a21;
        --surface-2: #1c2029;
        --border: #242934;
        --border-strong: #2f3542;
        --text: #e8eaed;
        --text-secondary: #a1a8b3;
        --text-muted: #727a86;
        --primary: #2b313c;
        --primary-hover: #353c49;
        --accent: #818cf8;
        --accent-soft: rgba(129,140,248,.16);

        --ok: #34d399; --ok-strong: #6ee7b7;
        --ok-soft: rgba(52,211,153,.14); --ok-border: rgba(52,211,153,.32);
        --warn: #fbbf24; --warn-strong: #fcd34d;
        --warn-soft: rgba(251,191,36,.13); --warn-soft-2: rgba(251,191,36,.13);
        --warn-border: rgba(251,191,36,.3); --warn-border-2: rgba(251,191,36,.3);
        --danger: #f87171; --danger-strong: #fca5a5;
        --danger-soft: rgba(248,113,113,.13); --danger-soft-2: rgba(248,113,113,.13);
        --danger-border: rgba(248,113,113,.32);
        --info: #60a5fa; --info-strong: #93c5fd;
        --info-soft: rgba(96,165,250,.13); --info-border: rgba(96,165,250,.3);
        --info-border-2: rgba(96,165,250,.3);
        --violet: #a78bfa; --violet-soft: rgba(167,139,250,.13); --violet-border: rgba(167,139,250,.3);
        --cyan: #22d3ee; --cyan-soft: rgba(34,211,238,.13); --cyan-border: rgba(34,211,238,.3);

        --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.2);
        --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
    }
}

:root[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #171a21;
    --surface-2: #1c2029;
    --border: #242934;
    --border-strong: #2f3542;
    --text: #e8eaed;
    --text-secondary: #a1a8b3;
    --text-muted: #727a86;
    --primary: #2b313c;
    --primary-hover: #353c49;
    --accent: #818cf8;
    --accent-soft: rgba(129,140,248,.16);

    --ok: #34d399; --ok-strong: #6ee7b7;
    --ok-soft: rgba(52,211,153,.14); --ok-border: rgba(52,211,153,.32);
    --warn: #fbbf24; --warn-strong: #fcd34d;
    --warn-soft: rgba(251,191,36,.13); --warn-soft-2: rgba(251,191,36,.13);
    --warn-border: rgba(251,191,36,.3); --warn-border-2: rgba(251,191,36,.3);
    --danger: #f87171; --danger-strong: #fca5a5;
    --danger-soft: rgba(248,113,113,.13); --danger-soft-2: rgba(248,113,113,.13);
    --danger-border: rgba(248,113,113,.32);
    --info: #60a5fa; --info-strong: #93c5fd;
    --info-soft: rgba(96,165,250,.13); --info-border: rgba(96,165,250,.3);
    --info-border-2: rgba(96,165,250,.3);
    --violet: #a78bfa; --violet-soft: rgba(167,139,250,.13); --violet-border: rgba(167,139,250,.3);
    --cyan: #22d3ee; --cyan-soft: rgba(34,211,238,.13); --cyan-border: rgba(34,211,238,.3);

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.2);
    --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
}

/* Mavzu almashtirish tugmasi (yon menyu pastida) */
.theme-toggle {
    width: 30px; height: 30px; border-radius: var(--radius-sm); cursor: pointer;
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center; font-family: inherit;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }
:root[data-theme="dark"] .theme-toggle .bi-moon, :root:not([data-theme]) .theme-toggle .bi-moon { display: inline; }

/* ==========================================================================
   Chop etish (partiya ro'yxatini punktga qog'ozda berish uchun)
   ========================================================================== */
@media print {
    .sidebar, .menu-toggle, .menu-backdrop, .toasts, .modal,
    .filter-bar, .tabs-row, .float-bar, .fbar, .btn, .sync-bar,
    form .btn, .arrival-all { display: none !important; }
    body { background: #fff; font-size: 11px; }
    main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    .card { border: none !important; box-shadow: none !important; break-inside: avoid; }
    .arrival-body[hidden] { display: block !important; }
    table { width: 100%; border-collapse: collapse; }
    thead th { background: #f3f4f6 !important; border-bottom: 1px solid #999; }
    tbody td { border-bottom: 1px solid #ddd; }
    a { text-decoration: none; color: #000; }
    .page-title::after {
        content: ' — ' attr(data-print-note);
        font-weight: 400; font-size: 11px; color: #555;
    }
}