/* =====================================================================
   DOS дизайны систем (UI_V2, 2026-10-07). app.css-ийн ДАРАА ачаалагдана.
   Зарчим: цайвар суурь, нэг акцент (navy #1F3A8A), системийн фонт, тоо tabular-nums,
   төлөв өнгө + текстээр, ширээнд нягт (36px мөр), утсанд хүрэлтэд (44px).
   Хуучин хувьсагчдыг (--navy, --bg, --surface ...) энд шинэ утга руу заана — хуучин хуудсууд
   кодоо өөрчлөхгүйгээр шинэ загварт шилжинэ. UI_V2=0 үед энэ файл ачаалагдахгүй.
   ===================================================================== */
:root {
    --ds-bg: #F6F7F9; --ds-surface: #FFFFFF; --ds-subtle: #FAFBFC;
    --ds-border: #E3E6EB; --ds-border-strong: #D5D9E0;
    --ds-text: #1B1F27; --ds-text-2: #5C6370; --ds-text-3: #8A909B;
    --ds-accent: #1F3A8A; --ds-accent-hover: #16296A; --ds-accent-soft: #EEF1F8;
    --ds-ok: #17663F; --ds-ok-bg: #E7F5EC;
    --ds-info: #1D4ED8; --ds-info-bg: #E8EEFB;
    --ds-warn: #92400E; --ds-warn-bg: #FEF4E2;
    --ds-bad: #B42318; --ds-bad-bg: #FDECEC;
    --ds-mute: #4A505C; --ds-mute-bg: #F1F2F5;
    --ds-urgent: #C2410C;
    --ds-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
    --ds-radius: 10px; --ds-radius-sm: 8px;
    --ds-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --ds-shadow-pop: 0 12px 32px rgba(16, 24, 40, .16);

    /* хуучин нэрс → шинэ утга */
    --navy-950: #0F1D47; --navy-900: #16296A; --navy-800: var(--ds-accent); --navy-700: #2A4AA3; --navy-600: #3A5BB8;
    --navy: var(--ds-accent); --navy-hover: var(--ds-accent-hover); --navy-active: #2A4AA3;
    --bg-app: var(--ds-bg); --bg: var(--ds-bg); --bg-card: var(--ds-surface); --surface: var(--ds-surface);
    --text-primary: var(--ds-text); --text: var(--ds-text); --text-secondary: var(--ds-text-2); --text-muted: var(--ds-text-2);
    --text-tertiary: var(--ds-text-3); --text-faint: var(--ds-text-3);
    --border-subtle: var(--ds-border); --border: var(--ds-border); --border-strong: var(--ds-border-strong);
    --shadow-card: var(--ds-shadow); --shadow-card-hover: 0 4px 14px rgba(16, 24, 40, .08);
    --radius-md: var(--ds-radius); --radius-sm: var(--ds-radius-sm);
    --font-primary: var(--ds-font);
    --status-success-bg: var(--ds-ok-bg); --status-success-text: var(--ds-ok);
    --status-processing-bg: var(--ds-info-bg); --status-processing-text: var(--ds-info);
    --status-pending-bg: var(--ds-mute-bg); --status-pending-text: var(--ds-mute);
    --status-warning-bg: var(--ds-warn-bg); --status-warning-text: var(--ds-warn);
    --status-critical-bg: var(--ds-bad-bg); --status-critical-text: var(--ds-bad);
}

body { font-family: var(--ds-font); background: var(--ds-bg); color: var(--ds-text); line-height: 1.45; -webkit-font-smoothing: antialiased; }
.mono, td.mono, .stat-card .stat-value, .order-total-value, .credential-value, .current-price-box,
.final-price-preview-value, .typeahead-item .item-code { font-family: var(--ds-font); font-variant-numeric: tabular-nums; }
table, input[type=number], .num, .n { font-variant-numeric: tabular-nums; }
a { color: var(--ds-accent); }
.glass-orb, .sidebar-foot { display: none; }
:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

/* ---------- Хүрээ: цэс ---------- */
.sidebar.nav2 { background: var(--ds-surface); color: var(--ds-text); border-right: 1px solid var(--ds-border); width: 236px; }
.nav2 .sidebar-brand { border-bottom: 1px solid var(--ds-border); padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.nav2 .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--ds-accent); color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex: none; letter-spacing: .02em; }
.nav2 .brand-name { font-weight: 700; font-size: 14.5px; color: var(--ds-text); line-height: 1.2; }
.nav2 .sidebar-nav { padding: 10px 8px 24px; }
.nav2 .sidebar-nav a { color: var(--ds-text); font-size: 14px; padding: 7px 10px; min-height: 36px; border-radius: 8px; margin-bottom: 1px; gap: 10px; }
.nav2 .sidebar-nav a:hover { background: var(--ds-mute-bg); color: var(--ds-text); }
.nav2 .sidebar-nav a.active { background: var(--ds-accent-soft); color: var(--ds-accent); font-weight: 600; }
.nav2 .sidebar-nav a.sub { padding-left: 38px; font-size: 13.5px; color: var(--ds-text-2); min-height: 32px; }
.nav2 .sidebar-nav a.sub.active { color: var(--ds-accent); background: transparent; }
.nav2 .sidebar-nav a.sub:hover { color: var(--ds-text); }
.nav-ico { width: 18px; height: 18px; flex: none; color: var(--ds-text-3); }
.nav2 a.active .nav-ico, .nav2 a.open .nav-ico { color: var(--ds-accent); }
.nav2 .nav-heading { font-size: 11.5px; color: var(--ds-text-3); font-weight: 600; padding: 14px 10px 4px; text-transform: none; letter-spacing: 0; }
.nav2 .nav-badge, .ds-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--ds-mute-bg); color: var(--ds-mute); font-size: 12px; font-weight: 600; margin-left: auto; }
.nav2 .nav-badge.hot, .ds-count.hot { background: var(--ds-urgent); color: #fff; }

/* ---------- Хүрээ: толгой ---------- */
.app-topbar { background: var(--ds-surface); color: var(--ds-text); border-bottom: 1px solid var(--ds-border); padding: 10px 24px;
    margin: -28px -36px 24px -36px; justify-content: space-between; min-height: 56px; }
.app-topbar .user-info { color: var(--ds-text); }
.app-topbar a.logout-link, .app-topbar a.login-link { color: var(--ds-text-2); }
.app-topbar a.logout-link:hover { color: var(--ds-text); }
.avatar-circle { background: var(--ds-accent-soft); color: var(--ds-accent); font-weight: 700; }
.menu-toggle, .topbar-brand { color: var(--ds-text); }
.top-search { flex: 1; max-width: 520px; height: 38px; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-bg);
    display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--ds-text-2); cursor: text; font: inherit; font-size: 14px; text-align: left; }
.top-search svg { width: 16px; height: 16px; flex: none; }
.top-search .kbd { margin-left: auto; font-size: 11px; border: 1px solid var(--ds-border-strong); border-radius: 4px; padding: 0 5px; background: #fff; }

/* ---------- Агуулга ---------- */
.main, .app-main { background: var(--ds-bg); }
.page-title { font-size: 22px; font-weight: 600; letter-spacing: -.005em; }
.page-sub { color: var(--ds-text-2); }
.section-heading { font-size: 14px; font-weight: 600; }
.detail-card, .form-card, .empty-msg, .table-wrap, .toolbar, .filter-bar, .pivot-table-wrap, .stat-card, .kpi-card, .chart-container {
    border-radius: var(--ds-radius); border-color: var(--ds-border); box-shadow: none; }
.kpi-card { border-left: 1px solid var(--ds-border); }
.empty-msg { color: var(--ds-text-2); }
.success-banner { background: var(--ds-ok-bg); border-color: #BFE3CC; color: var(--ds-ok); border-radius: var(--ds-radius-sm); font-weight: 600; }
.form-error, .role-warning { background: var(--ds-bad-bg); border-color: #F5C2BE; color: var(--ds-bad); border-radius: var(--ds-radius-sm); }
.detail-item .detail-label, .credential-label, .final-price-preview-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* хүснэгт: цайвар толгой, нягт мөр, тоо баруун */
table.data th { background: var(--ds-subtle); color: var(--ds-text-2); font-size: 12.5px; text-transform: none; letter-spacing: 0;
    font-weight: 600; border-bottom: 1px solid var(--ds-border); }
table.data th, table.data td { padding: 8px 12px; }
table.data tbody tr:nth-child(even) { background: transparent; }
table.data tbody tr:hover { background: #F3F5F9; }
table.data td.mono { color: var(--ds-text); font-size: 13px; }
table.data tfoot .totals-row td { background: var(--ds-subtle); }
table.no-cards tbody tr:nth-child(even) td:first-child { background-color: var(--ds-surface); }
table.pivot th, table.pivot th.sku-col-header { background: var(--ds-subtle); color: var(--ds-text-2); }
table.pivot td.sku-col { background: var(--ds-surface); }
.order-total-box { background: var(--ds-accent); border-radius: var(--ds-radius); }

/* товч */
.btn-primary, .btn-secondary, form.search button { border-radius: var(--ds-radius-sm); font-weight: 600; min-height: 36px; font-family: inherit; }
.btn-primary { background: var(--ds-accent); border-color: var(--ds-accent); }
.btn-primary:hover { background: var(--ds-accent-hover); border-color: var(--ds-accent-hover); }
.btn-secondary { background: var(--ds-surface); border-color: var(--ds-border-strong); color: var(--ds-text); }
.btn-secondary:hover { background: var(--ds-mute-bg); }
.btn-ghost { background: transparent; border: 0; color: var(--ds-accent); font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 8px; font: inherit; }
.btn-ghost:hover { background: var(--ds-accent-soft); }
.btn-danger { background: var(--ds-surface); border: 1px solid #F0B4AE; color: var(--ds-bad); border-radius: var(--ds-radius-sm); padding: 8px 16px; font-weight: 600; cursor: pointer; }

/* маягт */
select, input[type=date], input[type=number], input[type=text], input[type=email], input[type=tel], input[type=password], input[type=url], input[type=search], textarea,
form.search input[type=text], tr.column-filter-row input {
    border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-text); }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--ds-accent); outline-offset: -1px; }
.field-group label { color: var(--ds-text-2); font-weight: 600; }
.typeahead-results { border-radius: 0 0 8px 8px; border-color: var(--ds-border-strong); }
.typeahead-item:hover { background: var(--ds-accent-soft); }
.order-tabs a.active, .order-tabs a:hover { color: var(--ds-accent); border-bottom-color: var(--ds-accent); }
.metric-tabs a.active { background: var(--ds-accent); border-color: var(--ds-accent); }
.status-badge { font-size: 12px; padding: 2px 9px; }

/* ---------- Шинэ бүрэлдэхүүнүүд ---------- */
.ds-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ds-head .page-title { margin: 0; }
.ds-head .sub { color: var(--ds-text-2); font-size: 13.5px; margin-top: 2px; }
.ds-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-actions a { text-decoration: none; }
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); }
.ds-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ds-border);
    font-weight: 600; font-size: 14px; }
.ds-card-h a { font-weight: 600; font-size: 13px; text-decoration: none; }
.ds-grid2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ds-stack { display: flex; flex-direction: column; gap: 16px; }
.ds-muted { color: var(--ds-text-2); }

.cue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cue { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ds-text); min-height: 84px; }
.cue:hover { border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow); }
.cue .n { font-size: 26px; font-weight: 600; line-height: 1.2; }
.cue .n.small { font-size: 16px; line-height: 1.4; padding-top: 6px; }
.cue .l { font-size: 13px; color: var(--ds-text-2); }
.cue.warn .n { color: var(--ds-warn); }

.work-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #EEF0F3; color: var(--ds-text);
    text-decoration: none; min-height: 52px; }
.work-row:last-child { border-bottom: 0; }
.work-row:hover { background: #F8F9FB; }
.work-row .t { font-weight: 600; font-size: 14px; line-height: 1.3; }
.work-row .s { font-size: 12.5px; color: var(--ds-text-2); margin-top: 1px; }
.work-row .grow { flex: 1; min-width: 0; }
.work-row .chev { color: var(--ds-text-3); }
.dot-urgent { width: 8px; height: 8px; border-radius: 4px; background: var(--ds-urgent); flex: none; }
.dot-idle { width: 8px; height: 8px; border-radius: 4px; background: var(--ds-border-strong); flex: none; }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.quick a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm); text-decoration: none; color: var(--ds-text); font-weight: 600; background: var(--ds-surface); }
.quick a:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.quick a.primary { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }
.mod-list a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #EEF0F3; text-decoration: none; color: var(--ds-text); }
.mod-list a:last-child { border-bottom: 0; }
.mod-list a:hover { background: #F8F9FB; }
.mod-list .d { font-size: 12.5px; color: var(--ds-text-2); }
.soon-tag { display: inline-flex; font-size: 11.5px; font-weight: 600; border-radius: 10px; padding: 0 7px; background: var(--ds-mute-bg);
    color: var(--ds-mute); white-space: nowrap; margin-left: 6px; }
.li-soon { color: var(--ds-text-3) !important; cursor: default; }
.group-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ds-border); }
.group-h .t { font-weight: 600; flex: 1; min-width: 0; }
.group-h .s { font-size: 12.5px; color: var(--ds-text-2); font-weight: 400; }
.chk-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #EEF0F3; }
.chk-row input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--ds-accent); }
.chk-row a { color: var(--ds-text); text-decoration: none; flex: 1; min-width: 0; }
.bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--ds-subtle); border-top: 1px solid var(--ds-border);
    border-radius: 0 0 var(--ds-radius) var(--ds-radius); flex-wrap: wrap; }

/* ---------- Хайлтын цонх (Ctrl+K) ---------- */
.palette-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 1100; display: none; }
.palette-back.open { display: block; }
.palette { position: fixed; z-index: 1101; left: 50%; top: 10vh; transform: translateX(-50%); width: min(640px, calc(100vw - 24px));
    background: var(--ds-surface); border-radius: 12px; box-shadow: var(--ds-shadow-pop); display: none; flex-direction: column; max-height: 76vh; }
.palette.open { display: flex; }
.palette .pin { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--ds-border); }
.palette .pin input { flex: 1; border: 0 !important; outline: none !important; min-height: 52px; font-size: 16px; background: transparent; padding: 0; }
.palette .pres { overflow-y: auto; padding: 6px 0 10px; }
.palette .pg { font-size: 12px; color: var(--ds-text-3); font-weight: 600; padding: 10px 16px 4px; }
.palette .pi { display: block; padding: 8px 16px; text-decoration: none; color: var(--ds-text); }
.palette .pi .s { font-size: 12.5px; color: var(--ds-text-2); }
.palette .pi.sel, .palette .pi:hover { background: var(--ds-accent-soft); }
.palette .pempty { padding: 18px 16px; color: var(--ds-text-2); font-size: 14px; }
.palette .pfoot { border-top: 1px solid var(--ds-border); padding: 8px 14px; font-size: 12px; color: var(--ds-text-3); }

/* ---------- Утасны доод цэс ---------- */
.bottom-nav { display: none; }
@media (max-width: 900px) {
    .app-topbar { margin: 0 -16px 16px -16px; padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top)); min-height: 52px; }
    .top-search { display: none; }
    .bottom-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--ds-surface);
        border-top: 1px solid var(--ds-border); }
    .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        font-size: 11px; color: var(--ds-text-2); text-decoration: none; position: relative; background: none; border: 0; font-family: inherit; }
    .bottom-nav svg { width: 22px; height: 22px; }
    .bottom-nav button { font-size: 11px !important; cursor: pointer; padding: 0; }
    .bottom-nav .on { color: var(--ds-accent); font-weight: 600; }
    .bottom-nav .dot { position: absolute; top: 6px; left: 52%; min-width: 17px; height: 17px; border-radius: 9px; background: var(--ds-urgent);
        color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
    body.ui2 .main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    body.ui2 .app-topbar .bell { display: none; }
    .ds-grid2 { grid-template-columns: 1fr; }
    .palette { top: 0; left: 0; transform: none; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    /* наалттай доод товчны мөр доод цэсний дээр */
    body.ui2 .actions, body.ui2 .bar { bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
    .page-title { font-size: 19px; }
    .ds-head .ds-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .ds-head .ds-actions a:first-child:last-child { grid-column: 1 / -1; }
    .ds-head .ds-actions button { width: 100%; min-height: 44px; padding: 6px 10px; line-height: 1.25; }
    .cue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cue { padding: 12px; min-height: 76px; }
    .cue .n { font-size: 22px; }
    .quick { grid-template-columns: 1fr 1fr; }
    table.data:not(.no-cards):not(.cf-week-table) tr { border-radius: var(--ds-radius); box-shadow: none; }
}
@media print { .bottom-nav, .palette, .palette-back { display: none !important; } }
.chev svg { width: 16px; height: 16px; display: block; }
.palette .pin svg { width: 18px; height: 18px; flex: none; color: var(--ds-text-3); }

/* ---------- Бүртгэлийн стандарт (_ds/record.html) ---------- */
.flags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.flags:empty { display: none; }
.rec-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 4px 0 16px; max-width: 760px; }
.rec-step { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rec-step .bar { height: 6px; border-radius: 3px; background: var(--ds-border); }
.rec-step.done .bar { background: #9DB0DE; }
.rec-step.now .bar { background: var(--ds-accent); }
.rec-step .lbl { font-size: 12px; color: var(--ds-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-step.now .lbl { color: var(--ds-accent); font-weight: 600; }
.rec-step.done .lbl { color: var(--ds-text-2); }
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rec-main .detail-card, .rec-main .form-card, .rec-main .order-total-box { max-width: none; }
.rec-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.rec-side .rec-ev { padding: 10px 16px; border-bottom: 1px solid #EEF0F3; font-size: 13.5px; }
.rec-side .rec-ev:last-child { border-bottom: 0; }
.rec-ev .meta { font-size: 12px; color: var(--ds-text-2); }
.rec-ev.comment .txt { background: var(--ds-accent-soft); border-radius: 8px; padding: 6px 10px; margin-top: 4px; white-space: pre-wrap; }
.rec-comment { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ds-border); align-items: flex-end; }
.rec-comment textarea { flex: 1; min-height: 40px; resize: vertical; }
.rec-rel { display: flex; flex-direction: column; padding: 10px 16px; border-bottom: 1px solid #EEF0F3; text-decoration: none; color: var(--ds-text); }
.rec-rel:last-child { border-bottom: 0; }
.rec-rel:hover { background: #F8F9FB; }
@media (max-width: 1100px) { .rec-grid { grid-template-columns: minmax(0, 1fr); } .rec-aside { position: static; } }
.rec-main, .rec-aside { min-width: 0; }
@media (max-width: 640px) { .rec-step .lbl { font-size: 10.5px; } .rec-comment { flex-direction: column; align-items: stretch; } }

/* ---------- Хадгалсан шүүлтүүр ---------- */
.saved-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -6px 0 14px; }
.sf-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--ds-border-strong); border-radius: 16px;
    padding: 2px 4px 2px 12px; background: var(--ds-surface); font-size: 13px; }
.sf-chip a { text-decoration: none; color: var(--ds-text); font-weight: 600; }
.sf-chip button { border: 0; background: none; color: var(--ds-text-3); cursor: pointer; font-size: 16px !important; padding: 0 6px; min-height: 28px; }
.sf-save summary { cursor: pointer; color: var(--ds-accent); font-size: 13px; font-weight: 600; list-style: none; }
.sf-save summary::-webkit-details-marker { display: none; }
.sf-save form { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.sf-save input { min-width: 200px; }

/* ---------- Хажуугийн самбар (drawer.js) ---------- */
.drawer-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .28); z-index: 1050; display: none; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 62vw); background: var(--ds-bg); z-index: 1051;
    box-shadow: var(--ds-shadow-pop); display: none; flex-direction: column; }
.drawer.open, .drawer-back.open { display: flex; }
.drawer-back.open { display: block; }
.drawer-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); }
.drawer-h .grow { flex: 1; }
.drawer-h a, .drawer-h button { font-size: 13.5px; }
.drawer iframe { flex: 1; width: 100%; border: 0; background: var(--ds-bg); }
tr.drawer-on { background: var(--ds-accent-soft) !important; }

/* ---------- partial горим (drawer доторх хуудас) ---------- */
body.partial .main { padding: 16px 20px 32px; }

/* ---------- Хүсэлтийн жагсаалт ---------- */
.req-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.req-amt { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; align-self: flex-start; padding-top: 2px; }

/* ---------- Хэрэглэгчийн цэс (баруун дээд) ---------- */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 40px;
    padding: 2px 6px; border-radius: 8px; color: var(--ds-text); }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover, .user-menu[open] > summary { background: #F2F4F7; }
.user-menu .chev { width: 14px; height: 14px; color: var(--ds-text-2); }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 250px; background: #FFFFFF;
    border: 1px solid #E4E7EC; border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); padding: 6px; }
.user-menu-panel a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--ds-text); text-decoration: none; font-size: 14px; }
.user-menu-panel a:hover { background: #F2F4F7; }
.user-menu-panel .um-head { padding: 8px 12px 10px; font-weight: 700; border-bottom: 1px solid #EEF0F3; margin-bottom: 4px; }
.user-menu-panel .um-tag { font-size: 11px; font-weight: 600; background: var(--ds-accent-soft); color: var(--ds-accent); border-radius: 10px; padding: 1px 8px; }
.user-menu-panel .um-sec { padding: 10px 12px 4px; font-size: 11.5px; font-weight: 700; color: var(--ds-text-2); text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid #EEF0F3; margin-top: 4px; }
.user-menu-panel a.um-out { border-top: 1px solid #EEF0F3; margin-top: 4px; border-radius: 0 0 6px 6px; color: #B42318; }
@media (max-width: 640px) { .user-menu-panel { position: fixed; right: 8px; left: 8px; top: 56px; min-width: 0; } }

/* Маягтын талбарууд картанд бүтэн өргөнөөр */
.ec-grid .field-group input, .ec-grid .field-group select, .ec-row .field-group input, .ec-row .field-group select { width: 100%; box-sizing: border-box; min-height: 40px; }

/* Хавсралт: файл чирж оруулах (templates/_ds/files.html, static/js/files.js) */
.dropzone { border: 1.5px dashed #B9C3D3; border-radius: 10px; padding: 14px; background: #FAFBFD; transition: background .15s, border-color .15s; }
.dropzone.dz-over { border-color: var(--ds-accent, #1F3A8A); background: #EEF2FA; }
.dropzone .dz-msg { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.dropzone .dz-icon { font-size: 22px; }
.dropzone .dz-pick { background: none; border: 0; padding: 0; color: var(--ds-accent, #1F3A8A); font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 0; font-size: inherit; }
.dropzone .dz-hint { font-size: 12px; color: #667085; margin-top: 2px; }
.dropzone .dz-list { list-style: none; margin: 0; padding: 0; }
.dropzone.has-files .dz-list { margin-top: 10px; border-top: 1px solid #E4E7EC; }
.dropzone .dz-list li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #EEF0F3; font-size: 13px; }
.dropzone .dz-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dropzone .dz-size { color: #667085; white-space: nowrap; font-size: 12px; }
.dropzone .dz-bad { color: #B42318; }
.dropzone .dz-x { background: none; border: 0; color: #667085; cursor: pointer; min-height: 32px; min-width: 32px; }
.att-list { list-style: none; margin: 0; padding: 0; }
.att-list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13.5px; overflow-wrap: anywhere; }