/* =========================================================================
   UI сайжруулалт — style.css дээр давхарлаж ачаалагдана.
   Бүх хуудсанд нэгдсэн орчин үеийн харагдац өгнө.
   ========================================================================= */

:root {
    /* Хөтчийн өөрийн хэсгүүд (огнооны сонгогч, гүйлгэх зурвас, dropdown)
       гэрэл/харанхуйг үүнээс уншина. Үгүй бол харанхуй үед огнооны хуанлийн
       дүрс хар дэвсгэр дээр хараар зурагдаж, харагдахаа больдог. */
    color-scheme: light;

    /* ═══════════════════════════════════════════════════════════════
       ЭМХТ — НЭГДСЭН DESIGN TOKEN СИСТЕМ (нэг эх сурвалж)
       Төрийн эрүүл мэндийн байгууллага: гүн navy брэнд, navy-bias
       цэвэрхэн нейтрал, найдвартай мэргэжлийн төрх. Бүх өнгө/radius/
       spacing энд төвлөрнө — --nova-*, legacy токенууд ч энэ рүү залгагдана.
       ═══════════════════════════════════════════════════════════════ */

    /* ── БРЭНД: Төрийн эрүүл мэндийн салбар — гүн navy + мэргэжлийн цэнхэр accent.
       (SaaS indigo-blue биш; эрүүл мэндийн байгууллагын бодит өнгө.) ── */
    --ux-brand: #0f172a;          /* гүн navy — хажуугийн цэс, лого, толгой */
    --ux-brand-dark: #0b1220;
    --ux-primary: #2563eb;        /* үндсэн цэнхэр — гол accent */
    --ux-primary-dark: #1d4ed8;   /* hover / идэвхтэй */
    --ux-primary-soft: #dbeafe;   /* цэнхэрийн зөөлөн дэвсгэр */
    --ux-accent: #2563eb;
    --ux-accent-soft: #dbeafe;

    /* Нейтрал — БҮГД нэг гэр бүл (cool slate). Өмнө нь текст, зураас нь
       ногоовтор-саарал аястай байсан тул цэнхэр accent-тайгаа зөрж, өнгө нь
       бохир мэт харагддаг байв. */
    /* Давхаргын гүн: суурийг нэг шат гүнзгийрүүлж, цагаан карт «дээш өргөгдсөн»
       мэт харагдана. Өмнө нь суурь (#f1f5f9) цагаан картаас ердөө ~4% бараан
       байсан тул бүх зүйл хавтгай, тусашгүй харагддаг байв (dark mode-той
       харьцуулахад). */
    /* ХУУДАСНЫ СУУРЬ нь цагаан картаас ХАРАГДАХУЙЦ бараан байх ёстой.
       #f8fafc (slate-50) нь цагаанаас ердөө ~3% бараан тул карт бүр
       дэвсгэртэйгээ нийлж, хуудас бүхэлдээ цагаан хавтгай болж хувирдаг —
       хүрээ дангаараа тэр ялгааг үүрч чадахгүй. Тиймээс суурийг гүн
       (#e9eef5) хэвээр үлдээв.

       Харин ХАЙРЦГИЙН дотоод зурвас (хүснэгтийн толгой, «Төслийн мэдээлэл»-ийн
       толгой) нь slate-100 (#f1f5f9) — цагаан картын дотор тод ялгарна. */
    --ux-bg: #e9eef5;             /* хуудасны суурь — гүнзгийрүүлсэн */
    --ux-card: #ffffff;           /* карт, панель */
    --ux-surface: #f1f5f9;        /* картын дотоод зурвас (thead, hover) — slate-100 */
    --ux-border: #e2e8f0;         /* картын гадна зах — slate-200 */
    --ux-border-strong: #c3ccd8;
    --ux-text: #1e293b;           /* үндсэн текст */
    --ux-text-2: #475569;         /* хоёрдогч текст */
    --ux-muted: #64748b;          /* сул текст, label */
    --ux-icon: #94a3b8;           /* идэвхгүй дүрс */

    /* Төлвийн өнгө — суурь нь ижил ханалттай, зөөлөн нь ижил гэрэлтэйгээр
       (~95%) тааруулсан. Ингэснээр ногоон/шар/улаан гурав хоорондоо ч,
       цэнхэртэйгээ ч зохицно. */
    --ux-success: #16a34a;  --ux-success-soft: #dcfce7;   /* дууссан */
    --ux-warning: #b45309;  --ux-warning-soft: #fef3c7;   /* анхааруулга */
    /* Улаан хоёр өнгөтэй: ЗӨӨЛӨН дэвсгэр дээрх БИЧВЭР нь #dc2626 (уншигдана),
       цул цэг/дүүргэлт нь #ef4444. #ef4444-ийг #fef2f2 дээр бичвэл ялгарал
       ердөө ~3.4:1 болж, жижиг үсэг бүдгэрнэ. */
    --ux-danger:  #dc2626;  --ux-danger-soft:  #fef2f2;   /* хугацаа хэтэрсэн */
    --ux-info:    #2563eb;  --ux-info-soft:    #dbeafe;   /* хийгдэж байгаа */
    /* Цэгэн тэмдэглэгээнд (dot, дүүргэлт) хэрэглэх тод хувилбар */
    --ux-success-solid: #22c55e;
    --ux-warning-solid: #f59e0b;
    --ux-danger-solid:  #ef4444;

    /* Radius — төрийн байгууллага: нягт, албан ёсны (AI-ийн "бүх зүйл дугуй"-аас
       салж, нарийн 6px үндсэн). */
    --ux-radius-sm: 4px;
    --ux-radius: 6px;            /* үндсэн (карт, input, товч) */
    --ux-radius-lg: 8px;
    --ux-radius-xl: 12px;
    --ux-radius-pill: 999px;

    /* Spacing scale — 4px үржвэр */
    --ux-sp-1: 4px;  --ux-sp-2: 8px;  --ux-sp-3: 12px;
    --ux-sp-4: 16px; --ux-sp-5: 20px; --ux-sp-6: 24px; --ux-sp-8: 32px;

    /* Сүүдэр — албан ёсны, нягт, дулаавтар navy аястай (хөвсөн биш, суурьтай).
       Light mode-д давхаргын өнгө ялгаа бага тул сүүдэр нь картыг «өргөх»
       гол хэрэгсэл — өмнөх .04–.08 alpha бараг үл харагддаг байсныг
       хоёр давхарга болгож тодруулав. */
    --ux-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
    --ux-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .06);
    --ux-shadow-lg: 0 4px 12px rgba(15, 23, 42, .10), 0 12px 32px rgba(15, 23, 42, .12);
    --ux-ring: 0 0 0 3px rgba(37, 99, 235, .18);  /* focus ring — цэнхэр */

    /* ── Нэгдсэн palette (хэрэглэгчийн тогтоосон) ──
       Бүх хуудас ЗӨВХӨН эндээс өнгө авна: шинэ өнгө хэрэгтэй бол энд нэмнэ. */
    --ux-secondary: #0ea5e9;      /* тэнгэрийн цэнхэр — хоёрдогч */
    --ux-cyan: #06b6d4;           /* түүх, явцын шугам */
    --ux-purple: #8b5cf6;         /* байгууллага */
    --ux-indigo: #6366f1;         /* эрхийн тохиргоо */
    --ux-teal: #14b8a6;           /* профайл */
    --ux-green: #22c55e;
    --ux-orange: #f59e0b;
    --ux-red: #ef4444;
    --ux-title: #0f172a;          /* гарчгийн өнгө */

    /* ── Legacy alias-ууд: бусад файлын хуучин токеныг энэ рүү залгана ── */
    --nova-bg: var(--ux-bg);
    --nova-card: var(--ux-card);
    --nova-border: var(--ux-border);
    --nova-blue: var(--ux-primary);
    --nova-blue-dark: var(--ux-primary-dark);
    --nova-text: var(--ux-text);
    --nova-muted: var(--ux-muted);
    --primaryColor: var(--ux-primary);
    --secondColor: var(--ux-accent);
    --baseColor: var(--ux-text);
}

body {
    background: var(--ux-bg) !important;
    color: var(--ux-text);
    font-family: "Segoe UI", "Helvetica Neue", "Noto Sans", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01";
}
/* Гарчиг — албан ёсны, нягт tracking (эрүүл мэндийн салбарын жинтэй байдал) */
.app_page_title_text h1,
.header_wrap h1, .header_left h1, .co_head h1,
.nova_brand_text {
    font-family: "Segoe UI Semibold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -.01em;
}

/* ---------- Sidebar — цагаан төрийн загвар ---------- */
.nova_sidebar {
    background: var(--ux-card) !important;
    border-right: 1px solid var(--ux-border) !important;
    box-shadow: 1px 0 3px rgba(30, 38, 55, .04) !important;
}
.nova_brand {
    /* Дээд мөр 60px өндөртэй — хажуугийн логоны блок 64px байсан тул хоёрын
       доод зураас 4px-ээр зөрж, шат мэт харагдаж байв. */
    height: 60px !important;
    border-bottom: 1px solid var(--ux-border) !important;
    background: var(--ux-surface);
}
.nova_brand,
.nova_brand a { color: var(--ux-text) !important; }
/* Лого + текст давхцахааргүй цэгцтэй байрлал */
.nova_brand a { display: flex !important; align-items: center !important; gap: 11px !important; min-width: 0; }
.nova_brand_text {
    color: var(--ux-text) !important; display: flex; flex-direction: column; min-width: 0;
    line-height: 1.15 !important; font-size: .98rem !important; font-weight: 800 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nova_brand_text small {
    color: var(--ux-muted) !important; display: block; font-weight: 500 !important;
    font-size: .74rem !important; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nova_logo {
    flex: none !important;
    width: 36px !important; height: 36px !important;
    background: var(--ux-brand) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(20,44,78,.25) !important;
    border-radius: 9px !important;
    font-size: 1rem !important; font-weight: 800 !important;
    letter-spacing: .01em;
    border: none !important;
}
.nova_nav_title {
    color: var(--ux-muted) !important;
    letter-spacing: .06em;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    padding-left: 14px !important;
}
.nova_nav_item {
    color: var(--ux-muted) !important;
    border-radius: 9px !important;
    margin: 2px 10px !important;
    padding: 9px 12px !important;
    border-left: none !important;
    font-weight: 500;
    font-size: 13.5px !important;
    transition: background .13s, color .13s;
}
.nova_nav_item:hover {
    background: var(--ux-surface) !important;
    color: var(--ux-text) !important;
    transform: none;
}
.nova_nav_item.active {
    background: var(--ux-primary-soft) !important;
    color: var(--ux-primary) !important;
    box-shadow: none !important;
    font-weight: 700;
    border-radius: 9px !important;
}
.nova_nav_item.active .nn_icon { color: var(--ux-primary) !important; }
.nova_role_tag {
    border-radius: 6px !important;
    background: var(--ux-bg) !important;
    color: var(--ux-muted) !important;
    border: 1px solid var(--ux-border);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px !important;
}
.nova_role_tag.is_admin {
    background: var(--ux-primary-soft) !important;
    color: var(--ux-primary) !important;
    border-color: transparent;
}

/* ---------- Topbar — албан ёсны, доор нь брэнд accent зураас ---------- */
.nova_topbar {
    background: rgba(255,255,255,.9) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ux-border) !important;
    box-shadow: inset 0 -3px 0 -2px var(--ux-primary) !important;
    color: var(--ux-text);
    height: 60px !important;
    /* Дотоод зай нь хуудасны агуулгатай яг эгнэнэ: .nova_content 24px +
       .container 28px = 52px. Өмнө нь 22px байсан тул хайлтын талбар, баруун
       талын товчнууд картуудаас гадагш цухуйж байв. */
    padding: 0 52px !important;
    gap: 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    position: sticky;
    top: 0 !important;
    z-index: 50;
    flex-shrink: 0;
}
.nova_burger {
    border: 1px solid var(--ux-border) !important;
    background: var(--ux-card) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 6px !important;
    transition: background .15s, border-color .15s;
}
/* ===== Sidebar багасгах товч (зөвхөн desktop) ===== */
.nova_collapse_btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--ux-border); background: var(--ux-card);
    border-radius: 6px; color: var(--ux-muted); cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.nova_collapse_btn svg { width: 18px; height: 18px; }
.nova_collapse_btn:hover { color: var(--ux-primary); border-color: var(--ux-primary); }
@media (max-width: 1024px) { .nova_collapse_btn { display: none !important; } }

/* ===== Багасгасан горим ===== */
html.sidebar-collapsed .nova_sidebar { width: 68px !important; }
html.sidebar-collapsed .nova_main { margin-left: 68px !important; }
/* Brand: зөвхөн лого, текст нуух */
html.sidebar-collapsed .nova_brand_text { display: none !important; }
html.sidebar-collapsed .nova_brand a { justify-content: center; gap: 0 !important; }
html.sidebar-collapsed .nova_brand { padding: 0 !important; justify-content: center; }

/* ── ЦЭСИЙГ ХУРААХ ТОВЧ ЦЭСНИЙ ТОЛГОЙД ──
   Дээд мөрөнд, хайлтын хажууд байсныг лого руу нь авчрав. Хураасан үед
   цэс 72px өргөнтэй болдог тул логоны ДООР босоо байрлана. */
.nova_brand { gap: 10px; }
.nova_brand .nova_collapse_btn {
    margin-left: auto; width: 34px !important; height: 34px !important;
    /* Хажуугийн цэс нь хоёр ч theme-д ХАР суурьтай тул цагаан товч дээр нь
       наалдсан цаас мэт харагдана — тунгалаг болгов. */
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: var(--ux-text-2) !important;
}
.nova_brand .nova_collapse_btn:hover {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .3) !important;
    color: #fff !important;
}
html.sidebar-collapsed .nova_brand {
    flex-direction: column; gap: 8px;
    height: auto !important; padding: 12px 0 !important;
}
html.sidebar-collapsed .nova_brand .nova_collapse_btn { margin: 0 !important; }
/* Nav: текст нуух, icon голлуулах */
html.sidebar-collapsed .nova_nav_title { display: none !important; }
html.sidebar-collapsed .nova_nav_item {
    justify-content: center; gap: 0 !important; padding: 10px 0 !important;
    font-size: 0 !important; border-radius: 6px !important;
}
html.sidebar-collapsed .nova_nav_item .nn_icon { margin: 0 !important; }
html.sidebar-collapsed .nova_nav_item.active { border-left-color: transparent !important; }
/* Footer role tag нуух */
html.sidebar-collapsed .nova_sidebar_foot { display: none !important; }
/* Багасгасан үед hover-д tooltip маягаар нэр харуулах */
html.sidebar-collapsed .nova_nav_item { position: relative; }
html.sidebar-collapsed .nova_nav_item:hover::after {
    content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%;
    transform: translateY(-50%); background: var(--ux-text); color: var(--ux-card);
    padding: 5px 10px; border-radius: 5px; font-size: 12px; font-weight: 600;
    white-space: nowrap; z-index: 100; box-shadow: var(--ux-shadow-lg); pointer-events: none;
}
.nova_burger:hover { background: var(--ux-bg) !important; border-color: var(--ux-border-strong) !important; }
.nova_burger span { background: var(--ux-muted) !important; }
html[data-theme="dark"] .nova_burger:hover { background: rgba(255,255,255,.05) !important; }
.nova_search {
    flex: 1;
    max-width: 400px;
    margin-left: 0;
}
.nova_search .ns_icon {
    opacity: .5;
    color: #64748b;
    display: inline-flex;
    align-items: center;
}
.nova_search input {
    border-radius: 8px !important;
    border: 1px solid var(--ux-border) !important;
    background: var(--ux-surface) !important;
    color: var(--ux-text) !important;
    height: 38px !important;
    font-size: 13px !important;
}
.nova_search input::placeholder { color: var(--ux-muted) !important; }
.nova_search input:focus {
    background: #fff !important;
    border-color: var(--ux-primary) !important;
    box-shadow: var(--ux-ring) !important;
    outline: none;
}
.nova_topbar_right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.nova_topbar .notification_button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    border: 1px solid var(--ux-border) !important;
    background: var(--ux-card) !important;
    color: var(--ux-muted) !important;
    transition: background .15s, color .15s, border-color .15s;
}
.nova_topbar .notification_button:hover {
    background: var(--ux-primary-soft) !important;
    border-color: transparent !important;
    color: var(--ux-primary) !important;
}
.nova_topbar .notification_badge {
    border-color: var(--ux-card) !important;
}
.nova_user {
    color: var(--ux-text);
    padding: 4px 10px 4px 4px !important;
    border-radius: 9px !important;
    gap: 10px !important;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}
.nova_user:hover {
    background: var(--ux-bg) !important;
    border-color: var(--ux-border) !important;
}
.nova_user_name {
    color: var(--ux-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    max-width: 140px;
}
.nova_caret { color: var(--ux-muted) !important; }
.nova_user_avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    background: var(--ux-primary) !important;
    border: none !important;
    color: #fff !important;
}
.nova_list_search input {
    border-radius: 4px !important;
    border: 1px solid var(--ux-border) !important;
    background: #fff !important;
    transition: border-color .18s, box-shadow .18s;
}
.nova_list_search input:focus {
    border-color: var(--ux-primary) !important;
    box-shadow: var(--ux-ring) !important;
    outline: none;
}
.nova_user_menu,
.notification_panel {
    border-radius: var(--ux-radius-lg) !important;
    border: 1px solid var(--ux-border) !important;
    box-shadow: var(--ux-shadow-lg) !important;
    /* Илүү том цонх — олон мэдэгдэл багтана. Scroll-ыг зөвхөн body-д даатгаж,
       толгойг тогтмол байлгана (panel өөрөө overflow-гүй). */
    width: 400px !important;
    max-width: calc(100vw - 32px);
    max-height: none !important;
    overflow: hidden !important;
    flex-direction: column;
    /* Анхдагчаар нуугдана — зөвхөн .is-open үед л нээгдэнэ (toggle). */
    display: none !important;
}
.notification_panel.is-open,
.nova_user_menu.is-open { display: flex !important; }
/* Мэдэгдлийн жагсаалт — цонхны өндрийн ихэнхийг эзэлж scroll хийнэ. */
.notification_body { max-height: min(70vh, 560px) !important; overflow-y: auto; }

/* ---------- Headings ---------- */
.header_wrap h1,
.header_left h1 {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ux-text);
}

/* ---------- Cards ---------- */
.nova_table_card,
.matrix_card,
.form_card,
.dashboard_card,
.nova_table_card.task_table_wrap {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow) !important;
    background: var(--ux-card) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
.matrix_card:hover,
.dashboard_card:hover { box-shadow: var(--ux-shadow-lg) !important; }

/* =========================================================================
   ХАЖУУГИЙН ЦЭСНИЙ БЛОКУУД — хамт олон, гүйцэтгэлийн товч мэдээлэл.
   Цэс нь зөвхөн холбоос байснаас илүү ажлын самбар шиг мэдээлэлтэй болов.
   ========================================================================= */
.sb_block { padding: 14px 16px 4px; }
.sb_title {
    display: block; margin-bottom: 9px;
    font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ux-muted);
}
.sb_mates { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sb_mate { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sb_av {
    width: 28px; height: 28px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ux-primary-soft); color: var(--ux-primary);
    font-size: .76rem; font-weight: 800; text-transform: uppercase;
}
.sb_mate_txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb_mate_txt b { font-size: .8rem; font-weight: 600; color: var(--ux-text); }
.sb_mate_txt small { font-size: .74rem; color: var(--ux-muted); }

.sb_stat {
    display: flex; flex-direction: column; gap: 4px;
    padding: 11px 12px; border-radius: 12px;
    background: var(--ux-card); border: 1px solid var(--ux-border);
}
.sb_stat_num { font-size: 1.3rem; font-weight: 800; color: var(--ux-primary); line-height: 1; }
.sb_stat_lbl { font-size: .76rem; color: var(--ux-muted); }
.sb_stat_bar { height: 5px; border-radius: 99px; background: var(--ux-surface); overflow: hidden; }
.sb_stat_bar > span { display: block; height: 100%; background: var(--ux-primary); border-radius: 99px; }

.sb_add {
    display: block; margin-bottom: 10px; padding: 9px;
    border: 1px dashed var(--ux-primary); border-radius: 10px;
    background: var(--ux-primary-soft); color: var(--ux-primary);
    font-size: .82rem; font-weight: 700; text-align: center; text-decoration: none;
}
.sb_add:hover { background: var(--ux-primary); color: #fff; }

/* Хураангуй (collapsed) цэсэнд эдгээр багтахгүй. */
html.sidebar-collapsed .sb_block,
html.sidebar-collapsed .sb_add { display: none; }

/* Хажуугийн цэсний доод талын гарах товч. */
.sb_logout {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--ux-border); border-radius: 10px;
    background: var(--ux-card); color: var(--ux-text-2, #475569);
    font-size: .84rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.sb_logout svg { width: 16px; height: 16px; }
.sb_logout:hover { border-color: var(--ux-danger); background: var(--ux-danger-soft); color: var(--ux-danger); }

/* ---------- Tables ---------- */
.nova_list_table,
.matrix_table,
.dashboard_table { border-collapse: separate !important; border-spacing: 0; }

/* Гүйлгэхэд баганын нэр (НЭР · БАЙГУУЛЛАГА · ТӨЛӨВ …) дээрээ үлдэнэ.
   Хүрээ нь `overflow-x: auto`-тай тул өөрөө гүйлгэлтийн хайрцаг болдог —
   иймд `top: 0` нь ТУХАЙН ХАЙРЦГИЙН дээд тал. Хайрцгийн өндрийг дэлгэцэнд
   багтаана: доторх мөрүүд гүйхэд толгой нь байрандаа үлдэнэ.
   Гар утсанд хэрэглэхгүй — тэнд хүснэгт карт болж задардаг (mobile.css). */
@media (min-width: 761px) {
    .nova_table_card > .nova_table_scroll {
        max-height: calc(100vh - var(--sticky_head, 155px) - 28px);
        overflow-y: auto;
    }
    .nova_table_card > .nova_table_scroll .nova_list_table thead th {
        position: sticky;
        top: 0;
        z-index: 20;
    }
}
.nova_list_table thead th,
.dashboard_table thead th {
    background: var(--ux-surface) !important;
    color: var(--ux-muted) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--ux-border) !important;
    padding: 13px 16px !important;
}
.nova_list_table tbody td,
.dashboard_table tbody td { padding: 13px 16px !important; }
/* САМБАРЫН ХОЁР БАГАНАТ ХЭСЭГ.
   Тэнд хүснэгт нь ~440px-ийн картад ордог: 5 багана × 16px хажуугийн зай
   гэдэг ганцаараа 160px тул баруун захын «Дундаж явц» багана картаасаа
   хальж хайчлагдаж байв (548 > 440). Зайг нь багасгаж, багтахгүй үед
   гүйлгэдэг болгов. */
.dash_tbl_scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dashboard_columns .dashboard_table thead th,
.dashboard_columns .dashboard_table tbody td { padding-left: 8px !important; padding-right: 8px !important; }
/* Тоон багана нь агуулгынхаа хэрээр л зай эзэлнэ (1-3 орон), үлдсэн
   өргөнийг НЭР авна — эс бөгөөс байгууллагын нэр «Эрүү…» болтлоо хумигдаж,
   хажууд нь тоонууд задгай зайд эргэлдэнэ. */
.dashboard_columns .dashboard_table th:not(:first-child) { width: 1%; }
.dashboard_columns .dashboard_table td:not(:first-child) { width: 1%; white-space: nowrap; }
.dashboard_columns .dashboard_table td:first-child { max-width: 190px; }
.dashboard_columns .org_name_text > strong,
.dashboard_columns .org_name_text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* Баганын гарчиг хоёр мөр болж болно — «Дундаж явц» ганц мөрөнд 134px
   эзэлж, бүх хүснэгтийг хальгаж байв. */
.dashboard_columns .dashboard_table thead th { white-space: normal; line-height: 1.25; }
.dashboard_columns .dash_td_bar .ux_prog { min-width: 88px; gap: 7px; }
.dashboard_columns .dash_td_bar .ux_prog_track { min-width: 44px; max-width: 68px; }
.dashboard_columns .dash_td_bar .ux_prog_pct { min-width: 28px; font-size: .78rem; }
/* Хүснэгтийн бүх текст ЖИГД зөөлөн өнгө (нэр, хариуцагч, огноо, байгууллага) —
   аль ч theme-д нэг адил (--ux-text-2 нь theme-aware зөөлөн хар/цайвар) */
.nova_list_table tbody td,
.nova_list_table tbody td a:not(.pc_item),
.nova_list_table tbody .nlt_name,
.nova_list_table tbody .nlt_muted { color: var(--ux-text-2); }
.nova_list_table tbody .nlt_name { font-weight: 500; }
.nova_list_table tbody tr,
.matrix_table tbody tr { transition: background .14s ease; }
.nova_list_table tbody tr:hover,
.matrix_table tbody tr:hover { background: var(--ux-surface) !important; }

/* ---------- Buttons ---------- */
.__btn {
    border-radius: var(--ux-radius-sm) !important;
    font-weight: 600 !important;
    box-shadow: var(--ux-shadow-sm);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease !important;
}
.__btn:hover { transform: translateY(-1px); box-shadow: var(--ux-shadow); }
.__btn:active { transform: translateY(0); }
.__btn.__primary {
    background: var(--ux-primary) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(29,78,216,.25), 0 4px 12px rgba(29,78,216,.20) !important;
}
.__btn.__primary:hover { background: var(--ux-primary-dark) !important; box-shadow: 0 2px 4px rgba(29,78,216,.3), 0 6px 16px rgba(29,78,216,.28) !important; }

/* ---------- Forms ---------- */
.form_input,
.form_select,
.form_textarea,
.__input,
.__select,
.__textarea {
    border-radius: var(--ux-radius-sm) !important;
    border: 1px solid var(--ux-border-strong) !important;
    transition: border-color .18s, box-shadow .18s !important;
}
.form_input:focus,
.form_select:focus,
.form_textarea:focus,
.__input:focus,
.__select:focus,
.__textarea:focus {
    border-color: var(--ux-primary) !important;
    box-shadow: var(--ux-ring) !important;
    outline: none !important;
}
.form_label,
.__label { color: var(--ux-muted) !important; font-weight: 600 !important; }

/* ---------- Tabs (эрхийн матриц) ---------- */
.matrix_tab {
    box-shadow: var(--ux-shadow-sm);
    transition: transform .12s, box-shadow .18s, background .18s;
}
.matrix_tab:hover { transform: translateY(-1px); box-shadow: var(--ux-shadow); }
.matrix_tab.active {
    background: var(--ux-primary) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(29,78,216,.28);
}

/* ---------- Pills / badges ---------- */
.status_pill,
.nova_badge,
.count {
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
}
.notification_badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    background: var(--ux-danger) !important;
    border: 1.5px solid var(--ux-card) !important;
    box-shadow: none !important;
}

/* ---------- Alerts ---------- */
.admin_alert {
    border-radius: var(--ux-radius-sm) !important;
    box-shadow: var(--ux-shadow-sm);
}

/* ---------- Жижиг дэлгэц ---------- */
@media (max-width: 640px) {
    .admin_toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .matrix_card { padding: 14px !important; }
}

/* ---------- Анимаци ---------- */
.nova_content > * { animation: ux-fade .35s ease both; }
@keyframes ux-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* =========================================================================
   АЖЛЫН САМБАР (dashboard)
   ========================================================================= */
.dashboard_summary { gap: 14px !important; }
/* Албаны шинжтэй статистик карт — дээд талдаа navy accent зураастай, хатуу сүүдэр */
.dashboard_card {
    border: 1px solid var(--ux-border) !important;
    border-top: 3px solid var(--ux-primary) !important;
    border-radius: 6px !important;
    box-shadow: var(--ux-shadow) !important;
    background: var(--ux-card) !important;
    position: relative;
    overflow: hidden;
    padding: 15px 16px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    transition: box-shadow .16s ease, border-color .16s ease !important;
}
.dashboard_card:hover { border-color: var(--ux-border-strong) !important; box-shadow: var(--ux-shadow-lg) !important; }
.dashboard_card.active { box-shadow: 0 0 0 2px var(--ux-primary), var(--ux-shadow) !important; }
.dc_ic {
    flex: none;
    border-radius: 7px !important;
    width: 44px !important; height: 44px !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.dc_ic svg { width: 20px; height: 20px; }
.dc_ic.ic_blue   { background: var(--ux-primary-soft) !important; color: var(--ux-primary) !important; }
.dc_ic.ic_green  { background: #dcfce7 !important; color: #16a34a !important; }
.dc_ic.ic_amber  { background: #fef3c7 !important; color: #d97706 !important; }
.dc_ic.ic_red    { background: #fee2e2 !important; color: #dc2626 !important; }
.dc_ic.ic_indigo { background: var(--ux-primary-soft) !important; color: var(--ux-primary) !important; }
.dc_body { display: flex; flex-direction: column-reverse; gap: 2px; }
.dc_body p { font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.05; }
.dc_body h3 { margin: 0 !important; font-size: .8rem !important; color: var(--ux-muted, #64748b) !important; font-weight: 600 !important; }
button.dashboard_card { text-align: left; font: inherit; cursor: pointer; }
/* Карт дарж болохыг илэрхийлэх баруун талын сум */
.dashboard_card .dc_body { flex: 1 1 auto; min-width: 0; }
.dashboard_card::after {
    content: ""; flex: none; width: 9px; height: 9px; margin-left: 6px;
    border-right: 2px solid var(--ux-muted); border-top: 2px solid var(--ux-muted);
    transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease;
    opacity: .55;
}
.dashboard_card:hover::after,
.dashboard_card.active::after { border-color: var(--ux-primary); opacity: 1; }
.dashboard_card.active::after { transform: rotate(135deg); }

.dashboard_panel,
.dashboard_table,
.dash_filter_card,
.dash_list {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow) !important;
    background: var(--ux-card) !important;
}
/* Дашбордын хүснэгт нарийн дэлгэцэнд body-г түлхэхгүй — дотроо хэвтээ гүйнэ */
.dashboard_table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dashboard_panel h2,
.dashboard_table h2 {
    font-weight: 700; letter-spacing: -.01em; color: var(--ux-text);
    display: flex; align-items: center; gap: 8px;
    border-bottom: none; /* Гарчгийн доорх зураас арилгав. */
}
.dashboard_panel h2 .h_ic,
.dashboard_table h2 .h_ic { color: var(--ux-primary); }

.completion_bar { border-radius: 999px !important; overflow: hidden; height: 26px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.cb_done    { background: linear-gradient(90deg, #22c55e, #16a34a) !important; }
.cb_pending { background: linear-gradient(90deg, #fbbf24, #f59e0b) !important; }
.cb_overdue { background: linear-gradient(90deg, #f87171, #ef4444) !important; }

.table_progress span { background: linear-gradient(90deg, var(--ux-primary), var(--ux-primary-dark)) !important; border-radius: 999px !important; }

/* ---------- Явцын мөр (% гүйцэтгэл) — dashboard, жагсаалт ---------- */
.ux_prog {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 110px;
}
.ux_prog_track {
    flex: 1;
    height: 8px;
    min-width: 72px;
    max-width: 96px;
    background: var(--ux-border);
    border-radius: 999px;
    overflow: hidden;
}
.ux_prog_fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2d6fb5, var(--ux-primary));
    transition: width .45s ease;
    min-width: 0;
}
.ux_prog_fill.is_high { background: linear-gradient(90deg, #22c55e, #16a34a); }
.ux_prog_fill.is_mid  { background: linear-gradient(90deg, #f59e0b, #d97706); }
.ux_prog_fill.is_low  { background: linear-gradient(90deg, #2d6fb5, var(--ux-primary)); }
.ux_prog_pct {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ux-text);
    min-width: 34px;
    text-align: right;
    line-height: 1;
    flex: none;
}
.ux_prog_compact .ux_prog_track { max-width: 80px; min-width: 56px; }
.ux_prog_compact .ux_prog_pct { font-size: .75rem; color: var(--ux-muted); min-width: auto; }

.upcoming_item {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius-sm) !important;
    background: #fffdf7 !important;
    border-left: 4px solid #f59e0b !important;
    transition: transform .14s, box-shadow .18s, border-color .18s;
}
.upcoming_item:hover { transform: translateX(3px); box-shadow: var(--ux-shadow); }
/* upcoming_item нь <a> болсон — текстийн доогуур зураас, өнгийг залруулна */
.upcoming_item { text-decoration: none !important; color: inherit; cursor: pointer; }
.upcoming_item:hover { text-decoration: none; }
/* Самбарын жагсаалтын мөр — дарж болно */
.dash_task_row { cursor: pointer; }
.dash_task_row:hover { background: var(--ux-primary-soft) !important; }
.dash_person_row { cursor: pointer; }
.dash_person_row:hover { background: var(--ux-primary-soft) !important; }
.dash_org_row { cursor: pointer; }
.dash_org_row:hover > td { background: var(--ux-primary-soft) !important; }
.upcoming_item.is_urgent { border-left: 4px solid #ef4444 !important; background: #fff7f7 !important; }
.upcoming_main strong { color: var(--ux-text); }
.upcoming_main span { color: var(--ux-muted); font-size: .82rem; }
.upcoming_date { color: var(--ux-text); font-weight: 600; font-size: .85rem; }
.upcoming_left { background: var(--ux-primary-soft) !important; color: var(--ux-primary) !important; border-radius: 999px; font-weight: 600; padding: 4px 10px; font-size: .78rem; }
.upcoming_item.is_urgent .upcoming_left { background: #fee2e2 !important; color: #dc2626 !important; }

/* Байгууллагын бүтэц — dashboard */
/* Hint текст — гарчгийн доогуур зурааcны доор, зайтай байрлана (текст зурааcтай
   давхцахаас сэргийлнэ). Өмнө сөрөг margin текстийг зураас руу дээш татаж байсан. */
.dash_org_hint {
    margin: 0;
    padding: 12px 20px 16px;
    font-size: .84rem;
    color: var(--ux-muted);
    line-height: 1.5;
}
.dash_org_hint b { color: var(--ux-text); font-weight: 700; }
.dashboard_table .org_name_cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.org_av {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ux-primary-soft);
    color: var(--ux-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
    flex: none;
}
.org_av.is_sub {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--ux-surface);
    color: var(--ux-muted);
    font-size: .76rem;
}
.org_av.is_sub svg { width: 15px; height: 15px; }
.org_name_text { min-width: 0; }
.org_name_text strong { display: block; font-size: .92rem; color: var(--ux-text); }
.org_name_text small { display: block; font-size: .76rem; color: var(--ux-muted); margin-top: 1px; }
.dashboard_table .row_child .org_name_cell { padding-left: 8px; }
.dashboard_table .row_child .org_name_text { color: var(--ux-muted); font-size: .88rem; }
.dash_stat_num { font-weight: 700; font-variant-numeric: tabular-nums; }
.dash_stat_num.is_done { color: #16a34a; }
.dash_stat_num.is_over { color: #dc2626; }

.person_av {
    background: var(--ux-primary) !important;
    color: #fff !important; border-radius: 999px !important; font-weight: 700;
}

/* ---------- Гүйцэтгэлийн ерөнхий байдал (шинэ) ---------- */
.completion_layout {
    display: flex; align-items: center; gap: 34px; flex-wrap: wrap; padding: 6px 4px 4px;
}
.completion_donut {
    --done: 0; --pending: 0; --overdue: 0;
    width: 168px; height: 168px; border-radius: 50%; flex: none; position: relative;
    background: conic-gradient(
        #22c55e 0 calc(var(--done) * 1%),
        #f59e0b calc(var(--done) * 1%) calc((var(--done) + var(--pending)) * 1%),
        #ef4444 calc((var(--done) + var(--pending)) * 1%) 100%
    );
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    animation: ux-donut .6s ease both;
}
@keyframes ux-donut { from { transform: rotate(-12deg) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.cd_hole {
    position: absolute; inset: 20px; background: #fff; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px var(--ux-border);
}
.cd_pct { font-size: 38px; font-weight: 800; letter-spacing: -.03em; color: var(--ux-text); line-height: 1; }
.cd_sub { font-size: 13px; color: var(--ux-muted); margin-top: 3px; }

.completion_stats { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 14px; }
.cstat {
    display: grid;
    grid-template-columns: 150px 1fr auto auto;
    align-items: center; gap: 12px;
}
.cstat_head { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ux-text); font-size: 14px; }
.cstat_dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.is_done .cstat_dot { background: #22c55e; }
.is_pending .cstat_dot { background: #f59e0b; }
.is_overdue .cstat_dot { background: #ef4444; }
.cstat_bar { height: 10px; background: var(--ux-surface); border-radius: 999px; overflow: hidden; }
.cstat_bar span { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.is_done .cstat_bar span { background: linear-gradient(90deg, #22c55e, #16a34a); }
.is_pending .cstat_bar span { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.is_overdue .cstat_bar span { background: linear-gradient(90deg, #f87171, #ef4444); }
.cstat_num { font-weight: 700; color: var(--ux-text); white-space: nowrap; }
.cstat_num small { color: var(--ux-muted); font-weight: 500; margin-left: 5px; font-size: 12px; }
.cstat_pct { font-weight: 800; min-width: 48px; text-align: right; color: var(--ux-text); }
.is_done .cstat_pct { color: #16a34a; }
.is_overdue .cstat_pct { color: #dc2626; }

@media (max-width: 560px) {
    .completion_layout { gap: 20px; justify-content: center; }
    .cstat { grid-template-columns: 1fr auto; grid-template-areas: "head pct" "bar bar" "num num"; }
    .cstat_head { grid-area: head; } .cstat_pct { grid-area: pct; } .cstat_bar { grid-area: bar; } .cstat_num { grid-area: num; }
}
/* Статус badge (хүснэгтэд) — дэвсгэртэй, өнгөт цэгтэй тод pill.
   Төлөв бүр нүдээр тод ялгагдана (light/dark хоёуланд зөв). */
.task_table .nova_badge,
.nova_list_table .nova_badge {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 3px 11px 3px 9px !important;
    background: var(--ux-surface) !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    white-space: nowrap;
}
/* Өнгөт цэг — badge бүрийн эхэнд */
.task_table .nova_badge::before,
.nova_list_table .nova_badge::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: currentColor;
}
.task_table .nova_badge.is_green,  .nova_list_table .nova_badge.is_green {
    background: var(--ux-success-soft) !important; color: var(--ux-success) !important;
    border-color: color-mix(in srgb, var(--ux-success) 25%, transparent) !important;
}
/* Хийгдэж байгаа — тод цэнхэр (teal primary/ногооноос ялгаатай) */
.task_table .nova_badge.is_blue,   .nova_list_table .nova_badge.is_blue {
    background: #dbeafe !important; color: var(--ux-primary) !important;
    border-color: rgba(37, 99, 235, .28) !important;
}
html[data-theme="dark"] .task_table .nova_badge.is_blue,
html[data-theme="dark"] .nova_list_table .nova_badge.is_blue {
    background: rgba(59,130,246,.2) !important; color: #7fb8f2 !important;
    border-color: rgba(59,130,246,.4) !important;
}
.task_table .nova_badge.is_yellow, .nova_list_table .nova_badge.is_yellow {
    background: var(--ux-warning-soft) !important; color: var(--ux-warning) !important;
    border-color: color-mix(in srgb, var(--ux-warning) 25%, transparent) !important;
}
.task_table .nova_badge.is_gray,   .nova_list_table .nova_badge.is_gray {
    background: var(--ux-surface) !important; color: var(--ux-muted) !important;
    border-color: var(--ux-border) !important;
}
.task_table .nova_badge.is_red,    .nova_list_table .nova_badge.is_red {
    background: var(--ux-danger-soft, #fee2e2) !important; color: var(--ux-danger) !important;
    border-color: color-mix(in srgb, var(--ux-danger) 25%, transparent) !important;
}

/* Бусад газрын badge (жагсаалт бус) — хуучин soft өнгө хэвээр */
.nova_badge.is_green  { background: #dcfce7 !important; color: #166534 !important; }
.nova_badge.is_yellow { background: #fef3c7 !important; color: #92400e !important; }
.nova_badge.is_blue   { background: #cbe9e5 !important; color: #1e40af !important; }
.nova_badge.is_gray   { background: var(--ux-surface) !important; color: #475569 !important; }

/* =========================================================================
   БАЙГУУЛЛАГА / ЭРХ ТОХИРГОО — нийтлэг
   ========================================================================= */
.admin_toolbar_title { font-size: 15px; color: var(--ux-text) !important; }
.admin_toolbar_title::before {
    content: ""; display: inline-block; width: 6px; height: 18px; border-radius: 3px;
    background: linear-gradient(180deg, var(--ux-primary), var(--ux-primary-dark)); margin-right: 10px; vertical-align: -3px;
}

/* Статистик картууд (байгууллага хуудсанд нэмэгдэнэ) */
.stat_row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 18px 0; }
.stat_card {
    background: var(--ux-card); border: 1px solid var(--ux-border); border-radius: var(--ux-radius);
    box-shadow: var(--ux-shadow); padding: 18px 20px; display: flex; align-items: center; gap: 14px;
    transition: transform .18s, box-shadow .18s;
}
.stat_card:hover { border-color: var(--ux-border-strong); box-shadow: var(--ux-shadow); }
.stat_ic { width: 44px; height: 44px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.stat_ic.blue  { background: var(--ux-primary-soft); }
.stat_ic.green { background: #dcfce7; }
.stat_ic.amber { background: #fef3c7; }
.stat_meta .num { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ux-text); line-height: 1; }
.stat_meta .lbl { font-size: 13px; color: var(--ux-muted); margin-top: 4px; }

/* Байгууллагын мөр дэх нэрийн icon */
.org_name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.org_av {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ux-primary); color: #fff; font-weight: 700; font-size: 14px;
}

/* =========================================================================
   ЭРХ ТОХИРГОО — segmented scope control + card header avatar
   ========================================================================= */
.matrix_card { padding: 22px !important; }
.matrix_card_head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.matrix_av {
    width: 44px; height: 44px; border-radius: 6px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 16px;
    background: var(--ux-primary);
}
.matrix_av.is_role { background: var(--ux-primary); }
.matrix_card_head h2 { margin: 0 !important; }

.scope_choices {
    display: inline-flex !important; gap: 4px !important;
    background: var(--ux-surface); padding: 4px; border-radius: 10px; flex-wrap: nowrap !important;
}
.scope_choice { position: relative; margin: 0 !important; cursor: pointer; }
.scope_choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.scope_choice span {
    display: block; padding: 6px 13px; border-radius: 8px; font-size: 13px;
    color: var(--ux-muted); transition: all .15s ease; white-space: nowrap;
}
.scope_choice input:checked + span {
    background: #fff; color: var(--ux-primary); font-weight: 600; box-shadow: var(--ux-shadow-sm);
}
.scope_choice:hover span { color: var(--ux-text); }
.matrix_table tbody tr:hover { background: var(--ux-surface) !important; }
.matrix_group_row td { background: linear-gradient(90deg, var(--ux-primary-soft), transparent) !important; }

/* ---------- Даалгавар үүсгэх дэх байгууллага сонголт ---------- */
.org_select { width: 100%; }
.org_add_link {
    display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600;
    color: var(--ux-primary); text-decoration: none;
}
.org_add_link:hover { text-decoration: underline; }
.org_empty_hint {
    background: #fff7ed; border: 1px dashed #fdba74; color: #9a3412;
    border-radius: var(--ux-radius-sm); padding: 10px 14px; font-size: 13px;
}
.org_empty_hint a { color: var(--ux-primary); font-weight: 600; margin-left: 6px; }

/* =========================================================================
   НЭГДСЭН ТИПОГРАФИ, СУУРЬ
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "SF display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    line-height: 1.5;
}

::selection {
    background: rgba(20,44,78, .18);
    color: var(--ux-text);
}

:focus-visible {
    outline: 2px solid var(--ux-primary);
    outline-offset: 2px;
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #c5d0e0 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
    background: #c5d0e0;
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: #a8b5c9; }

/* =========================================================================
   НЭВТРЭХ / БҮРТГЭЛ — зочин хуудас
   ========================================================================= */
.auth_shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background:
        radial-gradient(ellipse 80% 60% at 15% 5%, rgba(29,92,150, .08), transparent 55%),
        radial-gradient(ellipse 70% 55% at 90% 95%, rgba(13,59,92, .07), transparent 50%),
        linear-gradient(165deg, #eef2f8 0%, var(--ux-bg) 45%, #f0f4fa 100%);
}
.auth_shell_inner {
    width: 100%;
    max-width: 440px;
    animation: ux-fade .45s ease both;
}
.auth_modal {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius-lg) !important;
    box-shadow: var(--ux-shadow-lg) !important;
    background: var(--ux-card) !important;
    overflow: hidden;
}
.auth_modal_brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 24px 0;
}
.auth_brand_logo {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ux-brand);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(20,44,78, .28);
}
.auth_modal_brand strong {
    display: block;
    font-size: 1rem;
    color: var(--ux-text);
    line-height: 1.2;
}
.auth_modal_brand small {
    display: block;
    font-size: .76rem;
    color: var(--ux-muted);
    font-weight: 500;
}
.auth_modal .modal_header {
    background: transparent !important;
    color: var(--ux-text) !important;
    padding: 18px 24px 0 !important;
}
.auth_modal .modal_header h3 {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    color: var(--ux-text) !important;
}
.auth_subtitle {
    margin: 6px 0 0;
    font-size: .9rem;
    color: var(--ux-muted);
    font-weight: 400;
}
.auth_modal .modal_main {
    padding: 20px 24px 28px !important;
}
.auth_modal .form_item { margin-bottom: 16px; }
.auth_modal .form_input {
    min-height: 46px !important;
    padding: 0 14px !important;
    background: var(--ux-surface) !important;
}
.auth_modal .form_input:focus { background: #fff !important; }
.auth_alert {
    border-radius: var(--ux-radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: .88rem;
}
.auth_alert ul { margin: 0; padding-left: 18px; }
.auth_alert_error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.auth_modal_footer_single { grid-template-columns: 1fr !important; }
.auth-helper {
    margin-top: 20px !important;
    padding-top: 18px;
    border-top: 1px solid var(--ux-border);
    font-size: .9rem !important;
    color: var(--ux-muted) !important;
}
.auth-helper a {
    color: var(--ux-primary) !important;
    font-weight: 600;
    text-decoration: none !important;
}
.auth-helper a:hover { text-decoration: underline !important; }
.auth_modal_footer { display: grid !important; gap: 10px !important; margin-top: 4px !important; }
.auth_btn { width: 100% !important; min-height: 48px !important; justify-content: center; font-size: .98rem !important; }
.auth-helper { text-align: center; }
.form_checkbox_item .label-text { color: var(--ux-muted); font-size: .9rem; }

/* =========================================================================
   ХУУДАСНЫ ГАРЧИГ
   ========================================================================= */
.header_wrap {
    margin-bottom: 4px;
}
.header_wrap h1,
.header_left h1 {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    letter-spacing: -.025em;
    position: relative;
    padding-bottom: 12px;
}
.header_wrap h1::after,
.header_left h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ux-primary), var(--ux-primary-dark));
}
.main_wrap { padding-top: 4px; }

/* =========================================================================
   ХУУДАСНЫ ТОЛГОЙ (app_page_head partial) — breadcrumb + icon + гарчиг.
   Өмнө эдгээр классуудад CSS байгаагүй тул давхацаж, эмх замбараагүй
   харагдаж байсныг бүрэн загварчлав.
   ========================================================================= */
.app_page_header { margin-bottom: 22px; }
.gov_breadcrumb {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--ux-muted); margin-bottom: 10px;
}
.gov_breadcrumb a { color: var(--ux-muted); text-decoration: none; transition: color .15s; }
.gov_breadcrumb a:hover { color: var(--ux-primary); }
.gov_bc_sep { color: var(--ux-border-strong); font-size: 13px; }
.gov_bc_current { color: var(--ux-text-2); font-weight: 600; }
.app_page_title_row {
    display: flex; align-items: center; gap: 14px;
}
.app_page_ic {
    flex: none; width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ux-primary-soft); color: var(--ux-primary);
}
.app_page_ic svg { width: 22px; height: 22px; }
.app_page_title_text { min-width: 0; }
.app_page_title_text h1 {
    margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--ux-text); line-height: 1.2;
}
.app_page_title_text h1::after { display: none !important; }
.app_page_subtitle {
    margin: 3px 0 0; font-size: .88rem; color: var(--ux-muted); font-weight: 500;
}
@media (max-width: 640px) {
    .app_page_title_text h1 { font-size: 1.25rem; }
    .app_page_ic { width: 38px; height: 38px; border-radius: 10px; }
    .app_page_ic svg { width: 19px; height: 19px; }
}

/* =========================================================================
   НЭГДСЭН ХУУДАСНЫ ӨРГӨН — бүх хуудас ДЭЛГЭЦ ДҮҮРЭН, зөвхөн захын зайтай.
   Өмнө: .container 840px, ax_container 1100px, gov_form 860px гэх мэт
   зөрүүтэй байсныг нэг эх сурвалжид нэгтгэж, full-width болгов.
   ========================================================================= */
.nova_content .container,
.nova_content .ax_container,
.nova_content .full_container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    box-sizing: border-box;
}
.nova_content .co_page .container { max-width: 100% !important; }
/* Access хуудас өөрийн .ax_wrap padding-тай тул container-д давхар зай өгөхгүй */
.nova_content .ax_wrap .ax_container { padding-left: 0 !important; padding-right: 0 !important; }
/* Байгууллага үүсгэх форм ч дэлгэц дүүрэн */
.nova_content .gov_page_form .container { max-width: 100% !important; }
@media (max-width: 640px) {
    .nova_content .container,
    .nova_content .ax_container,
    .nova_content .full_container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* =========================================================================
   ТАБ, ХАЙЛТ, ХЭСГИЙН ТОЛГОЙ
   ========================================================================= */
.task_tabs_bar {
    background: var(--ux-card) !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-sm) !important;
    padding: 10px 14px !important;
    margin-bottom: 18px !important;
}
.task_tabs_bar .tab_item {
    font-weight: 600 !important;
    transition: background .15s, color .15s !important;
}
.task_tabs_bar .tab_item.active {
    background: var(--ux-primary-soft) !important;
    color: var(--ux-primary) !important;
}
.task_tabs_bar .tab_item .count {
    font-weight: 700 !important;
    min-width: 22px;
    text-align: center;
}
.nova_list_top { margin-bottom: 18px !important; }

/* Хийгдэх ажил — toolbar (тоо, хайлт, нэмэх товч) */
.app_toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--ux-card);
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius);
    box-shadow: var(--ux-shadow-sm);
    padding: 12px 16px;
    margin-bottom: 18px;
}
.app_toolbar_spacer { flex: 1 1 auto; }

/* Төлвөөр шүүх tab-ууд (Бүгд / Хүлээгдэж буй / Хийгдэж байгаа / Дууссан).
   Доод шугамаар идэвхтэй tab-ыг тодруулж, тоог дугуй badge-ээр харуулна. */
.status_tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ux-border);
}
.status_tabs .status_tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.status_tabs .status_tab:hover {
    color: var(--ux-primary);
}
.status_tabs .status_tab.is_active {
    color: var(--ux-primary);
    border-bottom-color: var(--ux-primary);
}
.status_tabs .st_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #64748b;
    background: var(--ux-primary-soft);
}
.status_tabs .status_tab.is_active .st_badge {
    color: #fff;
    background: var(--ux-primary);
}
html[data-theme="dark"] .status_tabs {
    border-bottom-color: var(--ux-border);
}
html[data-theme="dark"] .status_tabs .status_tab {
    color: var(--ux-muted);
}
html[data-theme="dark"] .status_tabs .st_badge {
    background: rgba(59, 130, 246, 0.16);
    color: var(--ux-text-2);
}
html[data-theme="dark"] .status_tabs .status_tab.is_active,
html[data-theme="dark"] .status_tabs .status_tab:hover {
    color: var(--ux-primary);
}
html[data-theme="dark"] .status_tabs .status_tab.is_active {
    border-bottom-color: var(--ux-primary);
}
html[data-theme="dark"] .status_tabs .status_tab.is_active .st_badge {
    background: #2d6fb5;
    color: #fff;
}

.app_count_pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ux-primary-soft);
    border: 1px solid rgba(20,44,78, 0.14);
    line-height: 1;
}
.app_count_pill .acp_num {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ux-primary);
    letter-spacing: -0.01em;
}
.app_count_pill .acp_lbl {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
}
.app_toolbar .nova_list_search { flex: 0 1 280px; }
@media (max-width: 640px) {
    .app_toolbar .nova_list_search { flex: 1 1 100%; order: 3; }
    .app_toolbar .__btn { flex: 1 1 100%; order: 4; justify-content: center; }
}
html[data-theme="dark"] .app_toolbar {
    background: var(--ux-card);
    border-color: var(--ux-border);
}
html[data-theme="dark"] .app_count_pill {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.25);
}
html[data-theme="dark"] .app_count_pill .acp_lbl { color: var(--ux-muted); }

/* =========================================================================
   ХҮСНЭГТ — мөр, дэлгэрэнгүй, явц
   ========================================================================= */
.nova_list_table tbody tr:hover { background: #f8fbff !important; }
.nova_list_table .row_desc {
    display: block;
    margin-top: 4px;
    font-size: .8rem;
    color: var(--ux-muted);
    line-height: 1.35;
}
.row_progress {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
}
.row_progress .rp_bar {
    flex: 1;
    height: 7px;
    background: var(--ux-surface);
    border-radius: 999px;
    overflow: hidden;
    min-width: 56px;
}
.row_progress .rp_bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ux-primary), var(--ux-primary-dark));
    transition: width .4s ease;
}
.row_progress small {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ux-muted);
    white-space: nowrap;
}
.task_detail_inner {
    background: linear-gradient(180deg, var(--ux-surface), #fff) !important;
    border-radius: var(--ux-radius-sm);
    margin: 4px 12px 12px;
    padding: 16px 18px !important;
    border: 1px solid var(--ux-border);
}
.task_detail_inner .task_details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.task_detail_inner .detail_item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--ux-border);
    border-radius: 9px;
    transition: border-color .16s, background .16s;
}
.task_detail_inner .detail_item:hover { border-color: #d7deea; background: #fafbfd; }
.dt_ico {
    width: 16px; height: 16px; flex: none;
    color: #9aa6b8;
}
.dt_body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dt_label {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ux-muted); font-weight: 600;
}
.dt_val {
    font-size: .9rem; font-weight: 600; color: var(--ux-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt_val small { color: var(--ux-muted); font-weight: 600; }
.dt_status {
    display: inline-flex; align-items: center; padding: 1px 9px;
    border-radius: 999px; font-size: .78rem; font-weight: 700; width: fit-content; margin-top: 1px;
}

/* Даалгаврын жагсаалт — нэрийн өмнөх төлвийн icon */
.row_name_cell { display: flex; align-items: center; gap: 9px; }
/* Ажлын нэр — аль ч theme-д уншигдана, бусад баганатай жигд зөөлөн өнгө */
.nlt_name { color: var(--ux-text-2) !important; font-weight: 500; opacity: 1 !important; }
.task_ico {
    width: 26px; height: 26px; border-radius: 7px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.task_ico svg { width: 15px; height: 15px; }
.task_ico.is_green  { background: #dcfce7; color: #16a34a; }
.task_ico.is_yellow { background: #fef3c7; color: #d97706; }
.task_ico.is_gray   { background: var(--ux-surface); color: #64748b; }
.task_ico.is_blue   { background: var(--ux-primary-soft); color: var(--ux-primary); }

/* Даалгаврын нэрийн эхний үсгийн avatar (статусаар өнгөтэй) */
.task_av {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem; line-height: 1;
}
.task_av.is_green  { background: #dcfce7; color: #16a34a; }
.task_av.is_yellow { background: #fdecc4; color: #b45309; }
.task_av.is_gray   { background: #e8edf3; color: #475569; }

/* Даалгаврын мөрийн дугаар (checkbox-ыг орлоно) */
.col_num { width: 44px; text-align: center; color: var(--ux-muted); font-size: .82rem; font-weight: 600; }
thead .col_num { font-weight: 700; }

/* ---------- Toast мэдэгдэл (alert-ийг орлоно) ---------- */
.ux_toast_wrap {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    z-index: 4000; display: flex; flex-direction: column; gap: 10px;
    padding: 16px; width: 100%; max-width: 460px; pointer-events: none;
}
.ux_toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; border: 1px solid var(--ux-border);
    border-left: 4px solid var(--ux-primary);
    border-radius: 6px; padding: 14px 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .22);
    font-size: .95rem; color: var(--ux-text);
    animation: ux_toast_in .28s cubic-bezier(.2,.8,.3,1.2) both;
}
.ux_toast.is_hide { animation: ux_toast_out .25s ease forwards; }
.ux_toast.is_error { border-left-color: #ef4444; }
.ux_toast.is_success { border-left-color: #22c55e; }
.ux_toast_ic { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.ux_toast.is_error .ux_toast_ic { color: #ef4444; }
.ux_toast.is_success .ux_toast_ic { color: #22c55e; }
.ux_toast.is_info .ux_toast_ic { color: var(--ux-primary); }
.ux_toast_msg { flex: 1; line-height: 1.45; white-space: pre-line; font-weight: 500; }
.ux_toast_x { background: none; border: none; color: #9aa6b8; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; flex: none; }
.ux_toast_x:hover { color: var(--ux-text); }
@keyframes ux_toast_in { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes ux_toast_out { to { opacity: 0; transform: translateY(-16px); } }

/* ---------- Modal form alert (шинэ ажил нэмэх г.м) ---------- */
.ux_form_alert {
    display: none;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .88rem;
    line-height: 1.45;
    margin-bottom: 14px;
}
.ux_form_alert.is_visible { display: flex; align-items: flex-start; gap: 10px; animation: ux-fade .22s ease; }
.ux_form_alert_ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ux_form_alert_body { flex: 1; min-width: 0; }
.ux_form_alert.is_error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.ux_form_alert.is_error .ux_form_alert_ic { color: #ef4444; }
.ux_form_alert.is_success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.ux_form_alert.is_success .ux_form_alert_ic { color: #22c55e; }
.ux_form_alert ul { margin: 4px 0 0; padding-left: 18px; }
.ux_form_alert li { margin: 2px 0; }
/* Алдаатай талбарын улаан хүрээ нь focus-ийн цэнхэр хүрээнд дардаг байв —
   uxFieldErrors нь эхний алдаатай талбарт focus өгдөг тул ЯГ анхаарал татах
   ёстой талбар нь энгийн «сонгогдсон» талбар мэт харагдаж байлаа. */
.form_input.is_invalid,
.form_select.is_invalid,
.form_textarea.is_invalid,
.task_modal_wrap .task_modal .modal_main .form_input.is_invalid:focus,
.task_modal .modal_main .form_input.is_invalid:focus,
.task_modal .modal_main .form_select.is_invalid:focus,
.form_input.is_invalid:focus,
.form_select.is_invalid:focus,
.form_textarea.is_invalid:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .16) !important;
}
/* Талбарын доорх тодорхой алдаа — «яагаад хадгалагдахгүй байгаа» нь ЯГ тэр
   талбарын хажууд бичигдэнэ. Цонхны толгой дахь ерөнхий жагсаалт нь урт формыг
   доош гүйлгэсэн хэрэглэгчид огт харагддаггүй байв. */
.ux_field_err {
    display: block; margin-top: 5px;
    font-size: .78rem; font-weight: 600; color: #dc2626;
}
.ux_field_err::before { content: "⚠ "; }
/* Хайлттай сонгогч (жинхэнэ <select> нь нуугдмал байдаг). */
.ss_control.is_invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .16) !important;
}
/* Заавал бөглөх талбарын нэрийг ялгаж харуулна */
.form_label .req { color: #dc2626; font-weight: 700; }
html[data-theme="dark"] .ux_field_err { color: #fca5a5; }
html[data-theme="dark"] .ux_form_alert.is_error { background: #2a1416; border-color: #7f1d1d; color: #fca5a5; }
html[data-theme="dark"] .ux_form_alert.is_success { background: #14291f; border-color: #166534; color: #86efac; }

/* ---------- Дэд даалгаврын мөр (цэвэрлэсэн) ---------- */
.task_detail_inner .sub_task_ul > li {
    padding: 0 !important;
    border: none !important;
    margin-bottom: 8px;
}
.task_detail_inner .sub_task_ul > li:last-child { margin-bottom: 0; }
.task_detail_inner .task_sub_desc {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--ux-border);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.task_detail_inner .task_sub_desc:hover { border-color: #d7deea; box-shadow: 0 2px 8px rgba(15,23,42,.05); }
.task_detail_inner .task_sub_col { display: flex; align-items: center; gap: 11px; min-width: 0; }
.task_detail_inner .sub_main_content { min-width: 0; }
.task_detail_inner .sub_main_content p {
    margin: 0; font-size: 1rem; font-weight: 600; color: var(--ux-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task_detail_inner .sub_main_content em {
    font-style: normal; font-size: .76rem; color: var(--ux-muted);
}
.task_detail_inner .task_sub_last_col { display: flex; align-items: center; gap: 10px; flex: none; }

/* ── Даалгаврыг «Дууссан» болгох галочка ──────────────────────────────────
   Олон даалгавартай ажил дээр хийж дуусгасан мөрөө нэг дарж тэмдэглэнэ
   (өмнө нь зөвхөн явцын хувийг 100 гэж ГАРААР бичих зам байсан). */
.sub_done {
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer; user-select: none; white-space: nowrap;
}
.sub_done input { position: absolute; opacity: 0; width: 0; height: 0; }
.sub_done_box {
    width: 20px; height: 20px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.6px solid var(--ux-border-strong, #cbd5e1);
    border-radius: 6px; background: var(--ux-card, #fff);
    color: transparent;
    transition: background .14s, border-color .14s, color .14s;
}
.sub_done_box svg { width: 13px; height: 13px; }
.sub_done:hover .sub_done_box { border-color: var(--ux-primary); }
/* Тэмдэглэсэн байдал нь ЗӨӨЛӨН ногоон: цул ногоон дөрвөлжин нь даалгаврын
   мөрөнд хамгийн тод толбо болж, ажлын нэрнээс ч илүү анхаарал татдаг байв. */
.sub_done input:checked + .sub_done_box {
    background: #ecfdf5; border-color: #86efac; color: #16a34a;
}
.sub_done input:focus-visible + .sub_done_box { box-shadow: var(--ux-ring, 0 0 0 3px rgba(37,99,235,.25)); }
.sub_done input:disabled + .sub_done_box { opacity: .45; cursor: not-allowed; }
.sub_done_lbl { font-size: .78rem; font-weight: 700; color: var(--ux-muted, #64748b); }
.sub_done input:checked ~ .sub_done_lbl { color: #16a34a; }
.sub_done input:disabled ~ .sub_done_lbl { opacity: .55; }
html[data-theme="dark"] .sub_done_box { background: var(--ux-input); border-color: var(--ux-border-strong); }
html[data-theme="dark"] .sub_done input:checked + .sub_done_box { background: rgba(34, 197, 94, .16); border-color: #22c55e; color: #4ade80; }
html[data-theme="dark"] .sub_done input:checked ~ .sub_done_lbl { color: #6ee7b7; }
.task_detail_inner .percentage {
    display: inline-flex; align-items: center; gap: 1px;
    font-size: .82rem; font-weight: 700; color: var(--ux-muted);
    background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: 8px;
    padding: 3px 9px 3px 4px; transition: border-color .15s, box-shadow .15s;
}
.task_detail_inner .percentage:focus-within { border-color: var(--ux-primary); box-shadow: var(--ux-ring); }
.task_detail_inner .percentage .percent_input {
    width: 40px; text-align: center; padding: 3px 2px;
    border: none; background: transparent; border-radius: 6px;
    font-size: .92rem; font-weight: 700; color: var(--ux-text);
}
.task_detail_inner .percentage .percent_input:focus { outline: none; }
.task_detail_inner .sub_type .form_select {
    min-height: 34px; padding: 4px 26px 4px 10px;
    border: 1px solid var(--ux-border-strong); border-radius: 7px;
    font-size: .82rem; background-color: #fff;
}
.task_detail_inner .sub_type .form_select:focus {
    border-color: var(--ux-primary); outline: none; box-shadow: var(--ux-ring);
}
/* Дэд даалгаврын checkbox — цэвэр (дууссан үед ногоон ✓) */
.task_detail_inner .form-checkbox-label { position: relative; display: inline-flex; cursor: pointer; flex: none; }
.task_detail_inner .form-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.task_detail_inner .form-checkmark {
    width: 20px; height: 20px; border-radius: 6px; border: 2px solid #cbd5e1;
    background: #fff; display: inline-block; transition: background .15s, border-color .15s;
}
.task_detail_inner .form-checkbox:checked + .form-checkmark { background: var(--ux-success); border-color: var(--ux-success); }
.task_detail_inner .form-checkbox:checked + .form-checkmark::after {
    content: ''; position: absolute; left: 6.5px; top: 2.5px;
    width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.task_detail_inner .percentage::after { content: ''; }
.task_detail_inner .sub_task_ul { margin-top: 14px; padding-top: 14px; }
.dt_status.is_done    { background: #dcfce7; color: #166534; }
.dt_status.is_pending { background: #fef3c7; color: #92400e; }
.dt_status.is_idle    { background: var(--ux-surface); color: #475569; }
.dt_range { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.dt_arrow { color: var(--ux-muted); font-style: normal; }
.dt_overdue { color: #dc2626; }
.task_detail_inner .detail_item.detail_full {
    display: block;
    grid-column: 1 / -1;
}
.task_detail_inner .detail_item.detail_full .dt_label { margin-bottom: 4px; }
.task_detail_inner .detail_item.detail_full .dt_val { white-space: normal; font-weight: 500; color: var(--ux-text); }
.task_detail_inner .detail_item.detail_full {
    grid-column: 1 / -1;
    background: #fafbfd !important;
}
.sub_task_ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ux-border);
    padding-top: 12px;
}
.sub_task_ul > li {
    padding: 10px 0;
    border-bottom: 1px solid #f1f4f8;
}
.sub_task_ul > li:last-child { border-bottom: none; }
.sub_task_ul .no_sub {
    text-align: center;
    color: var(--ux-muted);
    font-size: .88rem;
    padding: 20px;
}
.task_item_dragging { opacity: .55; background: var(--ux-primary-soft) !important; }
.col_drag .task_drag {
    cursor: grab;
    color: #b0bac9;
    font-size: 1.1rem;
    padding: 4px;
    border-radius: 6px;
    transition: color .12s, background .12s;
}
.col_drag .task_drag:hover {
    color: var(--ux-primary);
    background: var(--ux-primary-soft);
}
.col_drag .task_drag:active { cursor: grabbing; }
.nova_badge.is_red {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}
.nova_badge.mini {
    font-size: .74rem !important;
    padding: 2px 8px !important;
    vertical-align: middle;
}
.text_danger { color: #dc2626 !important; font-weight: 600; }

/* =========================================================================
   МОДАЛ — ажил нэмэх
   ========================================================================= */
.task_modal_wrap .modal-dialog { max-width: 520px; }
.task_modal {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-lg) !important;
    overflow: hidden;
}
.task_modal .modal_header {
    padding: 20px 22px 16px !important;
    border-bottom: 1px solid var(--ux-border);
    background: #fafbfc;
}
.task_modal .modal_header h3 {
    font-weight: 800 !important;
    letter-spacing: -.02em;
    color: var(--ux-text);
}
.task_modal .modal_main { padding: 20px 22px !important; }
.task_modal .modal_footer {
    padding: 16px 22px 20px !important;
    border-top: 1px solid var(--ux-border);
    background: #fafbfc;
}
.task_modal .form_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 480px) {
    .task_modal .form_row { grid-template-columns: 1fr; }
}
.__btn.__border_btn {
    border: 1px solid var(--ux-border-strong) !important;
    background: #fff !important;
    color: var(--ux-text) !important;
    font-weight: 600 !important;
}
.__btn.__border_btn:hover {
    background: var(--ux-surface) !important;
    border-color: var(--ux-primary) !important;
    color: var(--ux-primary) !important;
}

/* =========================================================================
   ПРОФАЙЛ
   ========================================================================= */
.profile_hero {
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow) !important;
}
.profile_cover {
    height: 120px !important;
    background: var(--ux-brand) !important;
}
.profile_avatar {
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(20, 44, 78, .3) !important;
}
.profile_identity h1 {
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.profile_stat {
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-sm) !important;
    border-color: var(--ux-border) !important;
}
.profile_card {
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow) !important;
    border-color: var(--ux-border) !important;
}
.profile_role.is_admin {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important;
}
.profile_task:hover { background: var(--ux-primary-soft) !important; }
.ps_icon svg { width: 22px; height: 22px; }
.ps_blue svg { color: var(--ux-primary); }
.ps_green svg { color: #16a34a; }
.ps_amber svg { color: #d97706; }
.ps_red svg { color: #dc2626; }
.ps_blue { background: var(--ux-primary-soft) !important; }
.ps_green { background: #dcfce7 !important; }
.ps_amber { background: #fef3c7 !important; }
.ps_red { background: #fee2e2 !important; }
.profile_empty::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 6px;
    background: var(--ux-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E") center/24px no-repeat;
}

/* Профайл — 2 багана + гүйцэтгэлийн задаргаа */
.profile_grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
    align-items: start;
    margin-top: 18px;
}
.profile_card { padding: 20px 22px; }
.profile_card_head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef1f5;
}
@media (max-width: 860px) {
    .profile_grid { grid-template-columns: 1fr !important; }
}
.perf_box {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef1f5;
}
.perf_ring {
    --val: 0;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    flex: none;
    position: relative;
    background: conic-gradient(#22c55e calc(var(--val) * 1%), #e9edf2 0);
    transition: background .4s ease;
}
.perf_ring_hole {
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-shadow: inset 0 0 0 1px #f1f4f8;
}
.perf_pct {
    font-size: 1.65rem;
    font-weight: 800;
    color: #16a34a;
    line-height: 1;
    letter-spacing: -.02em;
}
.perf_pct i { font-size: .85rem; font-weight: 700; font-style: normal; margin-left: 1px; }
.perf_pct_lbl {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ux-muted);
    font-weight: 700;
}
.perf_legend { flex: 1; min-width: 0; }
.perf_seg {
    display: flex;
    height: 9px;
    border-radius: 99px;
    overflow: hidden;
    background: #eef1f5;
    margin-bottom: 12px;
}
.perf_seg > span { display: block; height: 100%; transition: width .4s ease; }
.seg_done { background: #22c55e; }
.seg_prog { background: #f59e0b; }
.seg_over { background: #ef4444; }
.perf_keys {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.perf_keys li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: #475569;
}
.perf_keys li b { margin-left: auto; font-weight: 700; color: var(--ux-text); }
.perf_keys .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dot_done { background: #22c55e; }
.dot_prog { background: #f59e0b; }
.dot_over { background: #ef4444; }
.perf_empty { margin: 0; font-size: .88rem; color: var(--ux-muted); }
@media (max-width: 420px) {
    .perf_box { flex-direction: column; text-align: center; }
    .perf_keys li b { margin-left: 8px; }
}
html[data-theme="dark"] .profile_card_head { border-bottom-color: var(--ux-border); }
html[data-theme="dark"] .profile_card_head h2 { color: var(--ux-text); }
html[data-theme="dark"] .perf_box { border-top-color: var(--ux-border); }
html[data-theme="dark"] .perf_ring { background: conic-gradient(#22c55e calc(var(--val) * 1%), var(--ux-border) 0); }
html[data-theme="dark"] .perf_ring_hole { background: var(--ux-card); box-shadow: inset 0 0 0 1px var(--ux-border); }
html[data-theme="dark"] .perf_seg { background: var(--ux-border); }
html[data-theme="dark"] .perf_keys li { color: var(--ux-text-2); }
html[data-theme="dark"] .perf_keys li b { color: var(--ux-text); }

/* =========================================================================
   САМБАР — шүүлт, жагсаалт
   ========================================================================= */
.dash_filter_head {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s;
}
.dash_filter_head:hover { color: var(--ux-primary); }
.dfh_title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dfh_title .h_ic { width: 18px; height: 18px; color: var(--ux-primary); }
.dash_list {
    display: none;
    margin-bottom: 20px;
    overflow: hidden;
}
.dash_list.is_open {
    display: block;
    animation: ux-fade .25s ease both;
}
/* Картын ажлын жагсаалтыг ~4 мөр харуулж, үлдсэнийг scroll-оор гүйлгэнэ. */
.dash_list .nova_table_scroll { max-height: 260px; overflow-y: auto; }
/* Scroll хийхэд хүснэгтийн толгой дээр үлдэнэ. */
.dash_list .nova_list_table thead th {
    position: sticky; top: 0; z-index: 2; background: #fafbfc;
}
.dash_list .nova_table_scroll::-webkit-scrollbar { width: 8px; }
.dash_list .nova_table_scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dash_list .nova_table_scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
html[data-theme="dark"] .dash_list .nova_list_table thead th { background: var(--ux-surface); }
html[data-theme="dark"] .dash_list .nova_table_scroll::-webkit-scrollbar-thumb { background: #475569; }
.dash_list_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ux-border);
    background: #fafbfc;
}
.dlh_title { font-weight: 700; color: var(--ux-text); }
.dlh_title em { font-style: normal; color: var(--ux-muted); font-weight: 500; }
.dash_list_close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--ux-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    color: var(--ux-muted);
    transition: background .12s, color .12s;
}
.dash_list_close:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}
/* --- Шүүлтийн товчнууд: нэг эгнээнд (хажуу хажуудаа), баруун зэрэгцсэн --- */
.filter_form .filter_actions {
    grid-column: 1 / -1 !important;       /* бүтэн мөр эзэлнэ */
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    border-top: 1px solid var(--ux-border);
    padding-top: 14px !important;
    margin-top: 4px;
}
.filter_btn {
    width: auto !important;
    min-width: 134px;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600 !important;
}
.filter_btn svg { width: 16px; height: 16px; flex: none; }
.filter_clear_btn {
    background: #fff !important;
    color: var(--ux-muted) !important;
    border: 1px solid var(--ux-border-strong) !important;
    text-decoration: none !important;
}
.filter_clear_btn:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}
.filter_clear_btn.is_muted { opacity: .5; }

/* --- Шүүлтийн хэсгийн ерөнхий өнгөлгөө (flat төрийн загвар) --- */
.dash_filter_card {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    background: var(--ux-card) !important;
    box-shadow: var(--ux-shadow) !important;
}
.dash_filter_head { padding: 14px 18px !important; }
.dash_filter_active {
    background: var(--ux-primary-soft) !important;
    color: var(--ux-primary) !important;
    font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
}
.filter_form label,
.filter_form .form_item label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--ux-muted) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.filter_form .form_select,
.filter_form .form_input {
    min-height: 42px !important;
    border-radius: var(--ux-radius-sm) !important;
    border: 1px solid var(--ux-border-strong) !important;
    background: #fff !important;
    transition: border-color .18s, box-shadow .18s;
}
.filter_form .form_select:focus,
.filter_form .form_input:focus {
    border-color: var(--ux-primary) !important;
    box-shadow: var(--ux-ring) !important;
    outline: none;
}

/* Хэрэв хуучин текст-холбоос хаа нэгтээ үлдсэн бол */
.filter_clear_link {
    color: var(--ux-muted);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: var(--ux-radius-sm);
}
.dashboard_columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
@media (max-width: 900px) {
    .dashboard_columns { grid-template-columns: 1fr; }
}
.person_chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* =========================================================================
   УДИРДЛАГА — байгууллага, эрх
   ========================================================================= */
.admin_toolbar {
    background: var(--ux-card);
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius);
    padding: 14px 18px;
    box-shadow: var(--ux-shadow-sm);
}
.admin_alert {
    border-left: 4px solid #22c55e !important;
}
.form_card {
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow) !important;
}
.matrix_tabs { gap: 6px !important; }
.matrix_actions {
    padding-top: 8px;
    border-top: 1px solid var(--ux-border);
    margin-top: 16px !important;
}

/* =========================================================================
   МЭДЭГДЭЛ, ХЭРЭГЛЭГЧИЙН цэс
   ========================================================================= */
.notification_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ux-border);
    color: var(--ux-text);
    flex: none; z-index: 2;
    background: var(--ux-card, #fff);
}
.nh_title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .98rem; }
.nh_count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: #dc2626; color: #fff; font-size: .76rem; font-weight: 700;
}
.notif_read_all {
    background: none; border: none; cursor: pointer;
    font-size: .78rem; font-weight: 600; color: var(--ux-primary, #1d5c96);
    padding: 4px 8px; border-radius: 6px; transition: background .12s;
}
.notif_read_all:hover { background: var(--ux-primary-soft, var(--ux-surface)); text-decoration: none; }

.notification_body { max-height: 380px; overflow-y: auto; }

.notification_item {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 13px 18px;
    text-decoration: none;
    color: var(--ux-text);
    font-size: .88rem;
    border-bottom: 1px solid var(--ux-border, #f1f4f8);
    transition: background .12s;
}
.notification_item:last-of-type { border-bottom: none; }
.notification_item:hover { background: var(--ux-bg, #f6f8fa); }
/* Мэдэгдлийн icon дугуй */
.notif_ic {
    flex: none; width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ux-primary-soft); color: var(--ux-primary); margin-top: 1px;
}
.notif_ic svg { width: 17px; height: 17px; }
.notif_content { flex: 1; min-width: 0; }
/* Уншаагүй мэдэгдэл — зүүн талд цэнхэр зураас, бага зэрэг тодруулга */
.notification_item.is_unread { background: var(--ux-primary-soft); box-shadow: inset 3px 0 0 var(--ux-primary); }
.notification_item.is_unread .notif_title { font-weight: 700; }
html[data-theme="dark"] .notification_item.is_unread { background: var(--ux-primary-soft); box-shadow: inset 3px 0 0 var(--ux-primary); }
html[data-theme="dark"] .notif_ic { background: rgba(59,130,246,.18); color: var(--ux-primary); }
.notif_title { display: block; font-weight: 600; line-height: 1.35; }
.notif_msg { display: block; margin-top: 2px; color: var(--ux-muted); font-size: .82rem; line-height: 1.4;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notification_item small {
    display: block;
    margin-top: 4px;
    color: var(--ux-muted);
    font-size: .76rem;
}
html[data-theme="dark"] .notif_msg { color: var(--ux-muted) !important; }
html[data-theme="dark"] .notification_header { background: var(--ux-card) !important; }
.notification_empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 36px 16px;
    text-align: center;
    color: var(--ux-muted);
    font-size: .88rem;
}
.notification_empty svg { width: 38px; height: 38px; opacity: .5; }
.notification_all {
    display: block; text-align: center; padding: 11px;
    font-size: .84rem; font-weight: 600; color: var(--ux-primary); text-decoration: none;
    border-top: 1px solid var(--ux-border, #eef1f4); background: var(--ux-bg, var(--ux-surface));
}
.notification_all:hover { background: var(--ux-primary-soft, var(--ux-surface)); text-decoration: underline; }
html[data-theme="dark"] .notification_all { color: var(--ux-primary); background: var(--ux-surface); border-top-color: var(--ux-border); }

/* =========================================================================
   CHECKBOX, ХООСОН ТӨЛӨВ
   ========================================================================= */
.form-checkbox-label { cursor: pointer; }
.form-checkmark {
    border: 2px solid var(--ux-border-strong) !important;
    border-radius: 6px !important;
    transition: border-color .12s, background .12s !important;
}
.form-checkbox:checked + .form-checkmark {
    background: var(--ux-primary) !important;
    border-color: var(--ux-primary) !important;
}
.nova_empty,
.empty_row {
    padding: 48px 20px !important;
    color: var(--ux-muted) !important;
    font-size: .92rem;
}
.nova_empty::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 6px;
    background: var(--ux-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'/%3E%3C/svg%3E") center/24px no-repeat;
    opacity: 1;
}

/* =========================================================================
   NAV ICON — илүү цэгцтэй харагдах
   ========================================================================= */
.nova_nav_item .nn_icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent !important;
    font-size: .9rem !important;
}
.nova_nav_item.active .nn_icon,
.nova_nav_item:hover .nn_icon {
    background: transparent !important;
}

/* ---------- Төрийн системийн ерөнхий харагдац ---------- */
/* .nova_main дээр overflow тавихгүй — topbar-ийн position:sticky-г эвддэг.
   Хэвтээ халилтыг зөвхөн .nova_content-д хязгаарлана. */
.nova_main { min-width: 0 !important; overflow: visible !important; }
.nova_content {
    padding: 20px 24px 36px !important;
    background: var(--ux-bg);
    margin-top: 0;
    min-width: 0;
    overflow-x: clip;
}
.app_page .header_wrap,
.gov_page .header_wrap { display: none; }
.nova_table_card,
.dashboard_panel,
.dashboard_table,
.dash_filter_card,
.profile_card,
.profile_hero,
.form_card {
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-sm) !important;
}
.header_wrap h1::after,
.header_left h1::after {
    display: none;
}
.header_wrap h1,
.header_left h1 {
    font-size: 18px !important;
    font-weight: 700 !important;
    padding-bottom: 0;
}
@media (max-width: 1024px) {
    .nova_topbar { padding: 0 12px 0 8px !important; }
    .nova_search { max-width: 240px; }
}
@media (max-width: 640px) {
    .nova_user_name { display: none !important; }
    .nova_search { max-width: none; flex: 1; }
    .nova_topbar_divider { margin: 0 4px; }
}

/* Duotone icons */
.duo_icon { display: block; flex-shrink: 0; }
.duo_sm { width: 22px; height: 22px; }
.duo_md { width: 32px; height: 32px; }
.duo_lg { width: 52px; height: 52px; }
.nn_icon .duo_icon { width: 22px; height: 22px; }

/* Duotone дүрснүүд ногоовтор дүүргэлттэй байсныг цэнхэр болгов — интерфэйсийн
   үндсэн өнгөтэй нэг мөр байна. SVG-ийн fill атрибутыг CSS дарж бичдэг. */
.duo_icon [fill="#cdeae6"] { fill: #dbeafe; }
.duo_icon [fill="#a3d9d2"] { fill: #bfdbfe; }
.duo_icon [fill="#5cb5ab"] { fill: #60a5fa; }
html[data-theme="dark"] .duo_icon [fill="#cdeae6"] { fill: #1e3a5f; }
html[data-theme="dark"] .duo_icon [fill="#a3d9d2"] { fill: #2b5183; }
html[data-theme="dark"] .duo_icon [fill="#5cb5ab"] { fill: #4d94e8; }

/* =========================================================================
   ХЭВЛЭМЭЛ / ЖИЖИГ ДЭЛГЭЦ
   ========================================================================= */
@media (max-width: 640px) {
    .auth_shell { padding: 20px 14px; }
    .auth_modal .modal_main,
    .auth_modal .modal_header { padding-left: 18px !important; padding-right: 18px !important; }
    .dashboard_summary { grid-template-columns: 1fr 1fr !important; }
    .profile_stats { grid-template-columns: 1fr 1fr !important; }
    .header_wrap h1 { font-size: 1.35rem !important; }
}

@media print {
    .nova_sidebar,
    .nova_topbar,
    .nova_burger,
    .task_tabs_right .__btn,
    .col_actions { display: none !important; }
    .nova_main { margin-left: 0 !important; }
    .nova_content { padding: 0 !important; }
}

/* =========================================================================
   ЧИРЭХ (drag) БАРИУЛЫГ БҮХ ХУУДАСНААС НУУХ
   ========================================================================= */
.col_drag,
th.col_drag,
td.col_drag,
.task_drag,
.drag_dots { display: none !important; }

/* =========================================================================
   АЖИЛ / ДААЛГАВАР НЭМЭХ MODAL — том, бараг дэлгэц дүүрэн
   ( .auth_modal-д нөлөөлөхгүйн тулд зөвхөн .task_modal_wrap дотор )
   ========================================================================= */
.task_modal_wrap .modal-dialog {
    max-width: 560px !important;
    width: 94vw !important;
    margin: 3vh auto !important;
    padding: 0 !important;
}
.task_modal_wrap .task_modal {
    margin: 0 auto !important;
    width: 100%;
    border-radius: 7px !important;
    border: 1px solid var(--ux-border) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .32) !important;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Толгой — төрийн хөх gradient баар, icon + хаах товчтой */
.task_modal_wrap .task_modal .modal_header {
    background: var(--ux-brand) !important;
    color: #fff !important;
    padding: 20px 26px !important;
    flex: none;
    display: flex !important;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
/* Толгойн баруун доор бүдэг чимэглэл (accent) */
.task_modal_wrap .task_modal .modal_header::after {
    content: "";
    position: absolute;
    right: -30px; top: -40px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
    pointer-events: none;
}
.task_modal_wrap .task_modal .modal_header .mh_txt {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.task_modal_wrap .task_modal .modal_header h3 {
    color: #fff !important;
    font-size: 1.22rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.task_modal_wrap .task_modal .modal_header .mh_sub {
    margin: 3px 0 0 !important;
    font-size: .82rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, .78) !important;
    line-height: 1.3;
}
/* Толгойн зүүн талын icon */
.task_modal_wrap .task_modal .modal_header .mh_ic {
    width: 40px; height: 40px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16);
    border-radius: 11px;
    position: relative; z-index: 1;
}
.task_modal_wrap .task_modal .modal_header .mh_ic svg { width: 22px; height: 22px; }
/* Хаах (✕) товч */
.task_modal_wrap .task_modal .modal_header .mh_close {
    width: 34px; height: 34px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12);
    border: none; border-radius: 9px; cursor: pointer;
    color: #fff; position: relative; z-index: 1;
    transition: background .15s ease;
}
.task_modal_wrap .task_modal .modal_header .mh_close:hover { background: rgba(255,255,255,.26); }
.task_modal_wrap .task_modal .modal_header .mh_close svg { width: 18px; height: 18px; }

/* Их бие — гүйлгэдэг, нэг баганат цэвэрхэн дараалал */
.task_modal_wrap .task_modal .modal_main {
    padding: 24px 26px !important;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    gap: 18px;
}
.task_modal_wrap .task_modal .modal_main .form_item { margin: 0 !important; width: 100%; }
/* Огноо/бусад хосолсон мөр — зэрэгцээ 2 талбар */
.task_modal_wrap .task_modal .modal_main .form_row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    width: 100%;
}
.task_modal_wrap .task_modal .modal_main .form_row .form_item { margin: 0 !important; }

.task_modal_wrap .task_modal .modal_main .form_label,
.task_modal_wrap .task_modal .modal_main label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--ux-muted) !important;
    margin-bottom: 7px !important;
    display: flex !important;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* Label-ийн урд жижиг өнгөт accent цэг */
.task_modal_wrap .task_modal .modal_main .form_label::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ux-primary);
    flex: none;
    opacity: .55;
}
.task_modal_wrap .task_modal .modal_main .form_input,
.task_modal_wrap .task_modal .modal_main .form_select,
.task_modal_wrap .task_modal .modal_main .form_textarea {
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--ux-border-strong) !important;
    background: var(--ux-surface) !important;
    font-size: 14px !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.task_modal_wrap .task_modal .modal_main .form_input:hover,
.task_modal_wrap .task_modal .modal_main .form_select:hover,
.task_modal_wrap .task_modal .modal_main .form_textarea:hover { border-color: var(--ux-muted) !important; background: #fff !important; }
.task_modal_wrap .task_modal .modal_main .form_input:focus,
.task_modal_wrap .task_modal .modal_main .form_select:focus,
.task_modal_wrap .task_modal .modal_main .form_textarea:focus {
    border-color: var(--ux-primary) !important;
    background: #fff !important;
    box-shadow: var(--ux-ring) !important;
    outline: none;
}
/* Сонголтын chevron icon */
.task_modal_wrap .task_modal .modal_main .form_select {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 38px !important;
    cursor: pointer;
}
/* Заавал талбарын улаан од — арай зөөлөн */
.task_modal_wrap .task_modal .modal_main .req { color: #ef4444; font-weight: 700; margin-left: 2px; }
/* TinyMCE редактор modal дотор өндөр авах */
.task_modal_wrap .task_modal .modal_main .tox-tinymce { min-height: 180px; border-radius: var(--ux-radius-sm) !important; }

/* Хөл — доор наалдсан, тод */
.task_modal_wrap .task_modal .modal_footer {
    flex: none;
    padding: 16px 26px !important;
    border-top: 1px solid var(--ux-border);
    background: var(--ux-surface);
}
.task_modal_wrap .task_modal .modal_footer .__btn {
    min-height: 44px; padding: 0 24px;
    font-weight: 700; border-radius: 10px;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.task_modal_wrap .task_modal .modal_footer .__btn.__primary {
    box-shadow: 0 2px 8px rgba(29,78,216, .24);
}
.task_modal_wrap .task_modal .modal_footer .__btn.__primary:hover {
    box-shadow: 0 4px 14px rgba(29,78,216, .32);
    transform: translateY(-1px);
}
.task_modal_wrap .task_modal .modal_footer .__btn:active { transform: scale(.98); }

/* Backdrop арай бараан */
.task_modal_wrap.modal { background: rgba(15, 23, 42, .45); }

@media (max-width: 720px) {
    .task_modal_wrap .modal-dialog { width: 96vw !important; margin: 2vh auto !important; }
    .task_modal_wrap .task_modal .modal_main { grid-template-columns: 1fr; }
}

/* =========================================================================
   DARK MODE — html[data-theme="dark"] дээр идэвхжинэ.
   Толгойн dark-mode унтраалгаар сэлгэнэ; localStorage-д хадгална.
   ========================================================================= */
html[data-theme="dark"] {
    /* Хөтчийн огнооны сонгогч, гүйлгэх зурвас зэрэг нь харанхуй болно. */
    color-scheme: dark;

    /* ── Харанхуй горимын palette (нэг эх сурвалж) ──
       Хэсэг бүрийн өнгийг ЭНДЭЭС авна. Шинэ дүрэм бичихдээ өнгийг гараар
       бичихгүй, доорх token-уудыг ашиглана: `background: var(--ux-card)`. */
    --ux-brand: #4f8ff7;
    --ux-brand-dark: #397bea;
    --ux-primary: #4f8ff7;
    --ux-primary-dark: #397bea;
    --ux-primary-light: #72a8ff;
    --ux-primary-soft: rgba(79, 143, 247, .16);
    --ux-accent: #4f8ff7;
    --ux-accent-soft: rgba(79, 143, 247, .16);

    /* Давхаргалал: суурь → цэс → карт → хүснэгтийн толгой гэж аажим цайрна.
       (Хэт бараан байсныг нэг шат цайруулав — давхаргын ялгаа хэвээр.) */
    --ux-bg: #101827;             /* хуудасны суурь */
    /* Хажуугийн цэс нь картаас БАРААН байсан тул харанхуй горимд бараг хар
       зурвас болж, дүрснүүд нь дэвсгэртэйгээ нийлдэг байв. Одоо картаас нэг
       шат ЦАЙРУУЛСАН — цэс нь хуудасны дээр хөвж буй давхарга гэдэг нь
       мэдэгдэнэ. */
    --ux-sidebar: #1f2d47;        /* хажуугийн цэс */
    --ux-card: #182438;           /* карт, хүснэгт */
    --ux-card-hover: #1d2b42;     /* мөрийн hover */
    --ux-surface: #202f47;        /* хүснэгтийн толгой, табын hover */
    --ux-input: #152136;          /* оролтын талбар */
    --ux-border: #2a3a52;
    --ux-border-soft: #24344b;    /* мөр хоорондын нарийн зураас */
    --ux-border-strong: #3a4d6b;
    --ux-text: #f1f5f9;           /* үндсэн текст */
    --ux-text-2: #cbd5e1;         /* хүснэгтийн нүд, хоёрдогч */
    --ux-muted: #b6c3d4;          /* сул текст, label */
    --ux-icon: #8190a5;           /* идэвхгүй дүрс */

    --ux-success: #34d399;  --ux-success-soft: rgba(52, 211, 153, .14);
    --ux-warning: #fbbf24;  --ux-warning-soft: rgba(251, 191, 36, .14);
    --ux-danger:  #fb7185;  --ux-danger-soft:  rgba(251, 113, 133, .14);
    --ux-info:    #4f8ff7;  --ux-info-soft:    rgba(79, 143, 247, .14);

    /* Хялбар нэрсийн alias — ижил утга, өөр нэр (аль нь ч ажиллана). */
    --bg-main: var(--ux-bg);
    --bg-sidebar: var(--ux-sidebar);
    --bg-card: var(--ux-card);
    --bg-card-hover: var(--ux-card-hover);
    --bg-input: var(--ux-input);
    --border: var(--ux-border);
    --border-light: var(--ux-border-strong);
    --text-primary: var(--ux-text);
    --text-secondary: var(--ux-muted);
    --text-muted: var(--ux-icon);
    --blue: var(--ux-primary);
    --blue-hover: var(--ux-primary-dark);
    --blue-light: var(--ux-primary-light);
    --success: var(--ux-success);
    --warning: var(--ux-warning);
    --danger: var(--ux-danger);

    --ux-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --ux-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 2px 6px rgba(0,0,0,.28);
    --ux-shadow-lg: 0 12px 32px rgba(0, 0, 0, .45), 0 4px 12px rgba(0,0,0,.3);
    --ux-ring: 0 0 0 3px rgba(77, 148, 232, .28);
}

/* Үндсэн гадаргуу */
html[data-theme="dark"] body { background: var(--ux-bg) !important; color: var(--ux-text); }

/* Sidebar */
/* Цэс нь `--ux-sidebar`-аар: картаас нэг шат цайрсан тул хуудасны суурин дээр
   тод ялгарна. Урьд нь картын өнгөөр будагдаж, бараг хар зурвас болдог байв. */
html[data-theme="dark"] .nova_sidebar { background: var(--ux-sidebar) !important; border-right-color: var(--ux-border-strong) !important; box-shadow: 1px 0 8px rgba(0,0,0,.25) !important; }
/* Цэсийн дүрснүүд цайруулсан дэвсгэр дээр илүү тод байх ёстой. */
html[data-theme="dark"] .nova_sidebar .nova_nav_item { color: var(--ux-text-2) !important; }
html[data-theme="dark"] .nova_sidebar .nova_nav_sep,
html[data-theme="dark"] .nova_sidebar hr { border-color: var(--ux-border-strong) !important; }
html[data-theme="dark"] .nova_brand { background: transparent; border-bottom-color: var(--ux-border) !important; }
html[data-theme="dark"] .nova_brand_text { color: var(--ux-text) !important; }
html[data-theme="dark"] .nova_brand_text small,
html[data-theme="dark"] .nova_nav_title { color: var(--ux-muted) !important; }
html[data-theme="dark"] .nova_nav_item { color: var(--ux-muted) !important; }
html[data-theme="dark"] .nova_nav_item:hover { background: rgba(255,255,255,.05) !important; color: var(--ux-text) !important; }
html[data-theme="dark"] .nova_nav_item.active { background: var(--ux-primary-soft) !important; color: var(--ux-primary) !important; }
html[data-theme="dark"] .nova_nav_item.active .nn_icon { color: var(--ux-primary) !important; }
html[data-theme="dark"] .nova_sidebar_foot { border-top-color: var(--ux-border) !important; }
html[data-theme="dark"] .nova_role_tag { background: var(--ux-card) !important; color: var(--ux-muted) !important; border-color: var(--ux-border); }

/* Topbar */
html[data-theme="dark"] .nova_topbar { background: rgba(13,20,32,.85) !important; border-bottom-color: var(--ux-border) !important; }
html[data-theme="dark"] .nova_search input,
html[data-theme="dark"] .nova_search { background: var(--ux-card) !important; color: var(--ux-text) !important; }
html[data-theme="dark"] .nova_search input::placeholder { color: var(--ux-muted) !important; }
html[data-theme="dark"] .nova_user_name { color: var(--ux-text) !important; }
html[data-theme="dark"] .nova_user:hover { background: rgba(255,255,255,.05) !important; }
html[data-theme="dark"] .nova_user_menu,
html[data-theme="dark"] .notification_panel { background: var(--ux-card) !important; border-color: var(--ux-border) !important; }
html[data-theme="dark"] .num_item { color: var(--ux-text) !important; }
html[data-theme="dark"] .num_item:hover { background: rgba(255,255,255,.05) !important; }
html[data-theme="dark"] .notification_item { color: var(--ux-text-2) !important; border-bottom-color: var(--ux-border) !important; }
html[data-theme="dark"] .notification_item:hover { background: var(--ux-surface) !important; }
html[data-theme="dark"] .notification_item small { color: #64748b !important; }
html[data-theme="dark"] .notification_header { color: var(--ux-text) !important; border-bottom-color: var(--ux-border) !important; }
html[data-theme="dark"] .notification_empty { color: #64748b !important; }

/* Картууд, хүснэгт */
html[data-theme="dark"] .nova_table_card,
html[data-theme="dark"] .gov_panel,
html[data-theme="dark"] .nova_list_table,
html[data-theme="dark"] .dashboard_table,
html[data-theme="dark"] .gov_page_header { background: var(--ux-card) !important; border-color: var(--ux-border) !important; }
html[data-theme="dark"] .nova_list_table thead th,
html[data-theme="dark"] .dashboard_table thead th {
    background: var(--ux-surface) !important;
    color: var(--ux-muted) !important;
    border-bottom-color: var(--ux-border) !important;
}
html[data-theme="dark"] .nova_list_table td,
html[data-theme="dark"] .dashboard_table td { border-bottom-color: var(--ux-border) !important; }
/* Dark mode — ажлын нэр, байгууллага, хариуцагч БҮГД жигд нэг зөөлөн өнгө */
html[data-theme="dark"] .nova_list_table tbody td,
html[data-theme="dark"] .nova_list_table tbody .nlt_name,
html[data-theme="dark"] .nova_list_table tbody .nlt_muted { color: var(--ux-text-2) !important; }
html[data-theme="dark"] .nova_list_table tbody tr:hover,
html[data-theme="dark"] .task_row:hover { background: var(--ux-surface) !important; }
html[data-theme="dark"] .nlt_name { color: var(--ux-text) !important; }
/* Самбарын "карт дарахад гарах жагсаалт" — dark горим */
html[data-theme="dark"] .dash_list_head { background: var(--ux-surface) !important; border-bottom-color: var(--ux-border) !important; }
html[data-theme="dark"] .dlh_title { color: var(--ux-text) !important; }
html[data-theme="dark"] .dlh_title em { color: var(--ux-muted) !important; }
html[data-theme="dark"] .dash_list_close { background: var(--ux-surface) !important; border-color: var(--ux-border) !important; color: var(--ux-muted) !important; }
html[data-theme="dark"] .dash_list_close:hover { background: #450a0a !important; color: #fca5a5 !important; border-color: #7f1d1d !important; }
html[data-theme="dark"] .row_desc,
html[data-theme="dark"] .nlt_sub { color: #64748b !important; }
/* Байгууллага (nlt_muted) — жагсаалтад бусадтай ойролцоо тод, бусад газар бүдэг */
html[data-theme="dark"] .nlt_muted { color: var(--ux-text-2) !important; }
html[data-theme="dark"] .nova_empty { color: #64748b !important; }

/* Эрэмбэ — task detail */
html[data-theme="dark"] .task_detail_row > td { background: var(--ux-surface) !important; }
html[data-theme="dark"] .detail_item { color: var(--ux-text-2) !important; }
html[data-theme="dark"] .sub_task_ul li { background: var(--ux-card) !important; border-color: var(--ux-border) !important; }
html[data-theme="dark"] .sub_main_content p { color: var(--ux-text) !important; }
html[data-theme="dark"] .sub_main_content em { color: #64748b !important; }

/* Формын элементүүд */
html[data-theme="dark"] .form_input,
html[data-theme="dark"] .form_select,
html[data-theme="dark"] .form_textarea,
html[data-theme="dark"] .gov_field .form_input,
html[data-theme="dark"] .gov_field .form_select,
html[data-theme="dark"] .gov_field .form_textarea {
    background: var(--ux-surface) !important;
    border-color: var(--ux-border) !important;
    color: var(--ux-text) !important;
}
html[data-theme="dark"] .form_input::placeholder,
html[data-theme="dark"] .form_textarea::placeholder { color: #64748b !important; }
html[data-theme="dark"] .form_label,
html[data-theme="dark"] .gov_field .form_label { color: var(--ux-text-2) !important; }
html[data-theme="dark"] .form_select option { background: var(--ux-card); color: var(--ux-text); }

/* gov panel хэсгүүд */
html[data-theme="dark"] .gov_panel_head,
html[data-theme="dark"] .gov_panel_foot,
html[data-theme="dark"] .gov_toggle_row,
html[data-theme="dark"] .gov_meta_row { background: var(--ux-surface) !important; border-color: var(--ux-border) !important; }
html[data-theme="dark"] .gov_panel_head h2,
html[data-theme="dark"] .gov_toggle_title,
html[data-theme="dark"] .gov_meta_value { color: var(--ux-text) !important; }
html[data-theme="dark"] .gov_panel_hint,
html[data-theme="dark"] .gov_field_hint,
html[data-theme="dark"] .gov_meta_label { color: #64748b !important; }
html[data-theme="dark"] .gov_form_section { border-bottom-color: var(--ux-border) !important; }
html[data-theme="dark"] .gov_section_title { color: var(--ux-primary) !important; border-bottom-color: var(--ux-border) !important; }
html[data-theme="dark"] .gov_panel_head_ic,
html[data-theme="dark"] .gov_meta_ic,
html[data-theme="dark"] .gst_ic { background: var(--ux-primary-soft) !important; border-color: #4d94e8 !important; }
html[data-theme="dark"] .gov_create_intro {
    background: linear-gradient(135deg, #123f3b 0%, var(--ux-surface) 60%) !important;
    border-color: #1d5c96 !important;
}
html[data-theme="dark"] .gov_create_intro_text h2 { color: var(--ux-text) !important; }
html[data-theme="dark"] .gov_create_intro_text p { color: var(--ux-muted) !important; }
html[data-theme="dark"] .gov_create_intro_ic { background: var(--ux-card) !important; border-color: var(--ux-border) !important; }
html[data-theme="dark"] .gov_status_tab { background: var(--ux-card) !important; border-color: var(--ux-border) !important; }
html[data-theme="dark"] .gov_status_tab.is_active { background: var(--ux-primary-soft) !important; border-color: #4d94e8 !important; }
html[data-theme="dark"] .gst_label { color: var(--ux-muted) !important; }
html[data-theme="dark"] .gst_num { color: var(--ux-text) !important; }
html[data-theme="dark"] .gov_subtab { color: var(--ux-muted) !important; }
html[data-theme="dark"] .gov_subtab:hover { background: var(--ux-surface) !important; color: var(--ux-primary) !important; }
html[data-theme="dark"] .gov_subtab.active { background: var(--ux-primary-soft) !important; color: var(--ux-primary) !important; }
html[data-theme="dark"] .gov_breadcrumb { color: #64748b !important; }
html[data-theme="dark"] .gov_breadcrumb a { color: var(--ux-primary) !important; }
html[data-theme="dark"] .gov_bc_current { color: var(--ux-text-2) !important; }

/* org index */
html[data-theme="dark"] .org_name { color: var(--ux-text) !important; }
html[data-theme="dark"] .org_av { background: var(--ux-primary-soft) !important; color: var(--ux-primary) !important; }
html[data-theme="dark"] .admin_alert { background: var(--ux-primary-soft) !important; color: #bfdbfe !important; border-color: #4d94e8 !important; }

/* Modal */
html[data-theme="dark"] .task_modal { background: var(--ux-card) !important; color: var(--ux-text) !important; }
html[data-theme="dark"] .task_modal_wrap .task_modal .modal_header { background: linear-gradient(120deg, #142b4d 0%, #1a3a6b 60%, #1e4a85 100%) !important; border-bottom-color: var(--ux-border) !important; }
html[data-theme="dark"] .task_modal .modal_header h3 { color: var(--ux-text) !important; }
html[data-theme="dark"] .task_modal .modal_footer { background: var(--ux-surface) !important; border-top-color: var(--ux-border) !important; }
/* Modal доторх формын талбарууд — style.css-ийн #fff-ийг дарна (өндөр specificity) */
html[data-theme="dark"] .task_modal .modal_main .form_input,
html[data-theme="dark"] .task_modal .modal_main .form_select,
html[data-theme="dark"] .task_modal .modal_main .form_textarea {
    background: var(--ux-surface) !important;
    border-color: var(--ux-border) !important;
    color: var(--ux-text) !important;
}
html[data-theme="dark"] .task_modal_wrap .task_modal .modal_main .form_input:hover,
html[data-theme="dark"] .task_modal_wrap .task_modal .modal_main .form_select:hover,
html[data-theme="dark"] .task_modal_wrap .task_modal .modal_main .form_textarea:hover { background: var(--ux-surface) !important; border-color: #475569 !important; }
html[data-theme="dark"] .task_modal_wrap .task_modal .modal_main .form_input:focus,
html[data-theme="dark"] .task_modal_wrap .task_modal .modal_main .form_select:focus,
html[data-theme="dark"] .task_modal_wrap .task_modal .modal_main .form_textarea:focus { background: var(--ux-surface) !important; }
html[data-theme="dark"] .task_modal .modal_main .form_input::placeholder,
html[data-theme="dark"] .task_modal .modal_main .form_textarea::placeholder { color: #64748b !important; }
html[data-theme="dark"] .task_modal .modal_main .form_label { color: var(--ux-text-2) !important; }
html[data-theme="dark"] .task_modal_wrap .task_modal .modal_main .form_label::before { background: var(--ux-primary); }
html[data-theme="dark"] .task_modal .modal_main .form_select option { background: var(--ux-card); color: var(--ux-text); }
html[data-theme="dark"] .task_modal .modal_main .form_input:focus,
html[data-theme="dark"] .task_modal .modal_main .form_select:focus,
html[data-theme="dark"] .task_modal .modal_main .form_textarea:focus {
    border-color: #2d6fb5 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
}
/* Огнооны icon-ийг харагдуулна (dark дээр хар icon алга болдог) */
html[data-theme="dark"] .task_modal .modal_main input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }

/* "заавал биш" гэсэн жижиг тэмдэглэгээ */
.form_opt { font-size: .78em; font-weight: 400; color: var(--ux-muted); }
html[data-theme="dark"] .form_opt { color: #64748b; }

/* Товч */
html[data-theme="dark"] .__btn.__border_btn { background: var(--ux-card) !important; border-color: #475569 !important; color: var(--ux-text-2) !important; }
html[data-theme="dark"] .__btn.__border_btn:hover { background: var(--ux-border) !important; }
html[data-theme="dark"] .nlt_action { color: var(--ux-muted) !important; }
html[data-theme="dark"] .nlt_action:hover { background: var(--ux-surface) !important; color: var(--ux-text) !important; }

/* Progress bar */
html[data-theme="dark"] .rp_bar { background: var(--ux-border) !important; }
html[data-theme="dark"] .row_progress small { color: var(--ux-muted) !important; }

/* Dark-mode унтраалга (topbar) */
.theme_toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--ux-border);
    background: var(--ux-card);
    color: var(--ux-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}
.theme_toggle:hover { color: var(--ux-primary); border-color: var(--ux-primary); }
.theme_toggle svg { width: 18px; height: 18px; }
.theme_toggle .icon_sun { display: none; }
.theme_toggle .icon_moon { display: block; }
html[data-theme="dark"] .theme_toggle { background: var(--ux-surface); border-color: var(--ux-border); color: #fbbf24; }
html[data-theme="dark"] .theme_toggle:hover { color: #fcd34d; border-color: #fbbf24; }
html[data-theme="dark"] .theme_toggle .icon_sun { display: block; }
html[data-theme="dark"] .theme_toggle .icon_moon { display: none; }


/* =========================================================================
   Home дэлгэрэнгүй самбар — DARK theme унших боломжтой болгох
   ========================================================================= */
html[data-theme="dark"] .task_detail_inner {
    background: var(--ux-surface) !important; border-color: var(--ux-border) !important;
}
html[data-theme="dark"] .task_detail_inner .detail_item {
    background: var(--ux-surface) !important; border-color: var(--ux-border) !important;
}
html[data-theme="dark"] .task_detail_inner .detail_item.detail_full { background: var(--ux-surface) !important; }
html[data-theme="dark"] .dt_label { color: var(--ux-muted) !important; }
html[data-theme="dark"] .dt_val,
html[data-theme="dark"] .task_detail_inner .detail_item.detail_full .dt_val { color: var(--ux-text) !important; }
html[data-theme="dark"] .dt_ico { color: #7c8aa3 !important; }
html[data-theme="dark"] .task_detail_inner .task_sub_desc {
    background: var(--ux-surface) !important; border-color: var(--ux-border) !important;
}
html[data-theme="dark"] .task_detail_inner .percentage {
    background: var(--ux-surface) !important; border-color: #475569 !important; color: var(--ux-muted) !important;
}
html[data-theme="dark"] .task_detail_inner .percentage .percent_input { color: var(--ux-text) !important; }
html[data-theme="dark"] .task_detail_inner .sub_type .form_select {
    background: var(--ux-surface) !important; border-color: #475569 !important; color: var(--ux-text) !important;
}

/* =========================================================================
   Гоё confirm диалог + товчны spinner
   ========================================================================= */
.uxc_ov {
    position: fixed; inset: 0; z-index: 4500;
    background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.uxc_ov.is_open { display: flex; animation: uxc_fade .18s ease; }
.uxc_card {
    background: #fff; border-radius: 8px; width: 100%; max-width: 400px;
    padding: 24px; box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    animation: uxc_pop .24s cubic-bezier(.2,.8,.3,1.1);
}
.uxc_top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.uxc_ic {
    width: 42px; height: 42px; border-radius: 6px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fef2f2; color: #ef4444;
}
.uxc_ic svg { width: 22px; height: 22px; }
.uxc_title { margin: 0; font-size: 1.1rem; font-weight: 800; color: #111827; }
.uxc_msg { margin: 0 0 20px; font-size: .95rem; color: #475569; line-height: 1.5; }
.uxc_foot { display: flex; gap: 10px; justify-content: flex-end; }
.uxc_cancel, .uxc_ok {
    height: 40px; padding: 0 18px; border-radius: 10px; font-size: .92rem; font-weight: 700; cursor: pointer;
    border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.uxc_cancel { background: #fff; border-color: #e5e7eb; color: #374151; }
.uxc_cancel:hover { background: #f9fafb; }
.uxc_ok { background: var(--ux-primary); color: #fff; }
.uxc_ok:hover { filter: brightness(1.06); }
.uxc_ok.is_danger { background: #ef4444; }
.uxc_ok.is_danger:hover { background: #dc2626; }
@keyframes uxc_fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uxc_pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* Товчны spinner */
.ux_spin {
    display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
    animation: ux_spin .7s linear infinite;
}
.is_loading { opacity: .85; cursor: progress; }
@keyframes ux_spin { to { transform: rotate(360deg); } }

/* Confirm dark theme */
html[data-theme="dark"] .uxc_card { background: var(--ux-card); }
html[data-theme="dark"] .uxc_title { color: var(--ux-text); }
html[data-theme="dark"] .uxc_msg { color: var(--ux-text-2); }
html[data-theme="dark"] .uxc_cancel { background: var(--ux-card); border-color: var(--ux-border); color: var(--ux-text); }
html[data-theme="dark"] .uxc_cancel:hover { background: #283549; }

/* =========================================================================
   МОБАЙЛ RESPONSIVE — жижиг дэлгэц
   ========================================================================= */
@media (max-width: 768px) {
    /* Хүснэгтүүд хэвтээ гүйлгэгдэнэ (хуудас бүхэлдээ хажуу тийш гүйхээс сэргийлнэ) */
    .nova_table_scroll, .co_table_card, .otm_body, .otask_table_wrap,
    .task_table_wrap, .od_table_scroll, .axm_scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .co_table, .nova_list_table, .otm_table, .oti_table { min-width: 620px; }
    .task_table { min-width: 680px; }
    .od_table { min-width: 600px; }
    .axm_table { min-width: 620px; }

    /* Modal/popup бараг бүтэн дэлгэц */
    .org_modal_wrap .modal-dialog,
    #editOrgModal .modal-dialog,
    .task_modal_wrap .modal-dialog { width: 96vw !important; max-width: 96vw !important; margin: 3vh auto !important; }
    .task_modal_wrap .task_modal .modal_main .form_row { grid-template-columns: 1fr !important; }

    /* Дэлгэрэнгүй grid — нэг багана */
    .tl_grid, .task_detail_inner .task_details, .completion_layout { grid-template-columns: 1fr !important; }
    .completion_stats .cstat { grid-template-columns: 1fr auto; }

    /* Toolbar/гарчиг */
    .co_toolbar { flex-wrap: wrap; }
    .co_search { flex: 1 1 100%; }
    .co_head h1, .header_left h1, .header_wrap h1 { font-size: 1.25rem; }
    .co_add_btn { flex: 1 1 100%; justify-content: center; }

    /* Toast/confirm бүтэн өргөн */
    .ux_toast_wrap { max-width: 100%; }
    .uxc_card { max-width: 100%; }

    /* Самбарын картууд */
    .dashboard_summary { grid-template-columns: 1fr 1fr !important; }
    .profile_stats { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 460px) {
    .dashboard_summary, .profile_stats { grid-template-columns: 1fr !important; }
    .co_av { width: 26px; height: 26px; font-size: 12px; }
}

/* =========================================================================
   Pagination (Bootstrap-4 markup) + хүснэгтийн хөл
   ========================================================================= */
.nova_table_foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pagination { display: inline-flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pagination .page-item .page-link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px;
    padding: 0 8px; border: 1px solid var(--ux-border); border-radius: 8px; background: #fff;
    color: var(--ux-text); font-size: .85rem; font-weight: 600; text-decoration: none;
    transition: background .14s, border-color .14s, color .14s;
}
.pagination .page-item .page-link:hover { background: var(--ux-primary-soft); border-color: #c7d9fc; color: var(--ux-primary); }
.pagination .page-item.active .page-link { background: var(--ux-primary); border-color: var(--ux-primary); color: #fff; }
.pagination .page-item.disabled .page-link { opacity: .45; pointer-events: none; }
html[data-theme="dark"] .pagination .page-item .page-link { background: var(--ux-card); border-color: var(--ux-border); color: var(--ux-text); }
html[data-theme="dark"] .pagination .page-item.active .page-link { background: var(--ux-primary); border-color: var(--ux-primary); color: #fff; }

/* =========================================================================
   CRM жагсаалт (co_*), wizard, modal, inline detail — БҮХ ХУУДСАНД хуваалцана
   ========================================================================= */
/* Өгсөн ажлууд popup */
.co_row_view { color: #cbd0d8; display: inline-flex; background: none; border: none; padding: 5px; border-radius: 6px; cursor: pointer; }
.co_row_view:hover { color: var(--ux-primary); background: var(--ux-primary-soft); }
.co_row_view svg { width: 16px; height: 16px; }
.co_row_key { color: #cbd0d8; display: inline-flex; background: none; border: none; padding: 5px; border-radius: 6px; cursor: pointer; }
.co_row_key:hover { color: #d97706; background: #fffbeb; }
.co_row_key svg { width: 16px; height: 16px; }
html[data-theme="dark"] .co_row_key { color: #64748b; }
html[data-theme="dark"] .co_row_key:hover { color: #fbbf24; background: #422006; }
.co_row.is_expanded > td { background: #f5f8ff !important; }
.co_row.is_expanded .co_row_view { color: var(--ux-primary); background: var(--ux-primary-soft); }

/* Мөрөн доорх дэлгэрэнгүй (inline, AJAX) */
.co_detail_row { display: none; }
.co_detail_row.is_open { display: table-row; }
.co_detail_row > td { padding: 0 !important; background: var(--ux-surface); border-bottom: 1px solid var(--ux-border) !important; }
.co_detail_inner { padding: 16px 18px; animation: co_slide .22s ease; }
@keyframes co_slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.oti_sum { font-size: 13px; color: #6b7280; font-weight: 600; margin-bottom: 12px; }
/* Байгууллагын товч самбар */
.oti_stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.oti_stat { background: #fff; border: 1px solid var(--ux-border); border-radius: 10px; padding: 11px 14px; }
.oti_stat_num { display: block; font-size: 22px; font-weight: 800; color: #111827; letter-spacing: -.02em; line-height: 1; }
.oti_stat_lbl { display: block; font-size: 12px; color: #6b7280; margin-top: 4px; }
.ot_green { color: #16a34a; } .ot_red { color: #dc2626; } .ot_blue { color: #1d4ed8; }
.oti_progress { height: 8px; background: #eef0f2; border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.oti_progress span { display: block; height: 100%; background: linear-gradient(90deg,#10b981,#059669); border-radius: 999px; transition: width .4s ease; }
html[data-theme="dark"] .oti_stat { background: var(--ux-surface); border-color: var(--ux-border); }
html[data-theme="dark"] .oti_stat_num { color: var(--ux-text); }
@media (max-width: 560px) { .oti_stats { grid-template-columns: 1fr 1fr; } }
.oti_empty { text-align: center; color: #9ca3af; padding: 22px 0; }
.oti_table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; border: 1px solid var(--ux-border); border-radius: 10px; overflow: hidden; }
.oti_table thead th { text-align: left; background: #fafbfc; color: #6b7280; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; border-bottom: 1px solid var(--ux-border); }
.oti_table tbody td { padding: 9px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.oti_table tbody tr:last-child td { border-bottom: none; }
.oti_name { font-weight: 600; color: var(--ux-text); }
.oti_status { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.oti_status.is_done { background: #dcfce7; color: #166534; }
.oti_status.is_pending { background: #fef3c7; color: #92400e; }
.oti_status.is_idle { background: var(--ux-surface); color: #475569; }
.oti_status.is_doing { background: #dbeafe; color: #1d4ed8; }
.oti_status.is_over { background: #fee2e2; color: #dc2626; }
.oti_bar { display: inline-block; width: 64px; height: 6px; background: #eef0f2; border-radius: 999px; overflow: hidden; vertical-align: middle; }
.oti_bar span { display: block; height: 100%; background: linear-gradient(90deg,#10b981,#059669); border-radius: 999px; }
.oti_bar + small { margin-left: 7px; color: #6b7280; font-weight: 600; }
.oti_muted { color: #9ca3af; }
.oti_red { color: #dc2626; }
html[data-theme="dark"] .co_detail_row > td { background: var(--ux-surface); border-bottom-color: var(--ux-border) !important; }
html[data-theme="dark"] .oti_table { background: var(--ux-surface); border-color: var(--ux-border); }
html[data-theme="dark"] .oti_table thead th { background: var(--ux-surface); color: var(--ux-muted); border-bottom-color: var(--ux-border); }
html[data-theme="dark"] .oti_table tbody td { border-bottom-color: var(--ux-border); color: var(--ux-text-2); }
html[data-theme="dark"] .oti_name { color: var(--ux-text); }
html[data-theme="dark"] .co_row.is_expanded > td { background: var(--ux-surface) !important; }

/* ===== CRM маягийн байгууллагын жагсаалт ===== */
/* .co_page .container өргөн нь дээрх нэгдсэн дүрмээр удирдагдана (1160px) */
.co_head h1 { font-size: 1.5rem; font-weight: 800; color: #111827; margin: 0 0 4px; letter-spacing: -.02em; }
.co_subtitle { margin: 0 0 14px; font-size: 13px; color: #64748b; line-height: 1.4; }
html[data-theme="dark"] .co_subtitle { color: var(--ux-muted); }
.co_tabs_bar { border-bottom: 1px solid #e5e7eb; margin-bottom: 16px; }
.co_tabs { display: flex; gap: 4px; }
.co_tab { background: none; border: none; padding: 10px 6px; margin-right: 18px; font-size: 14px; font-weight: 600; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px; }
.co_tab:hover { color: #111827; }
.co_tab.active { color: #047857; border-bottom-color: #047857; }
.co_tab_n { background: #f3f4f6; color: #6b7280; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.co_tab.active .co_tab_n { background: #d1fae5; color: #047857; }

.co_toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.co_toolbar_spacer { flex: 1; }
/* Хайлт — байгууллагын dropdown-тай яг ижил хэмжээ (46px өндөр, 10px radius) */
.co_search { position: relative; flex: 0 1 340px; min-width: 240px; }
.co_search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ux-muted); }
.co_search input {
    width: 100%; min-height: 46px; height: 46px; padding: 0 14px 0 38px;
    border: 1.5px solid var(--ux-border); border-radius: 10px; font-size: .92rem;
    background: var(--ux-card); color: var(--ux-text);
    transition: border-color .15s, box-shadow .15s;
}
.co_search input::placeholder { color: var(--ux-muted); }
.co_search input:focus { outline: none; border-color: var(--ux-primary); box-shadow: 0 0 0 3px var(--ux-primary-soft); }
.co_tool_btn { height: 38px; padding: 0 14px; border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; font-size: 14px; font-weight: 600; color: #374151; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.co_tool_btn svg { width: 15px; height: 15px; }
.co_tool_btn:hover { background: #f9fafb; }
.co_tool_spacer { flex: 1; }
.co_listview { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-weight: 600; color: #374151; background: #fff; }
.co_listview svg { width: 15px; height: 15px; color: #6b7280; }
.co_add_btn { height: 38px; padding: 0 16px; border: none; background: var(--ux-primary); color: #fff; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 1px 2px rgba(20,44,78,.25); }
.co_add_btn svg { width: 15px; height: 15px; }
.co_add_btn:hover { background: var(--ux-primary-dark); }

.co_table_card { background: var(--ux-card); border: 1px solid var(--ux-border); border-radius: var(--ux-radius); overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--ux-shadow-sm); }
.co_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.co_table thead th { text-align: left; background: #fafbfc; color: #6b7280; font-size: 12px; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--ux-border); white-space: nowrap; }
.co_th_num { width: 44px; text-align: center !important; }
.co_th_plus { width: 44px; }
.co_table tbody td { padding: 11px 16px; border-bottom: 1px solid #f3f4f6; color: #374151; vertical-align: middle; }
.co_table tbody tr:last-child td { border-bottom: none; }
.co_row { cursor: pointer; }
.co_row:hover td { background: #f9fafb; }
.co_td_num { text-align: center; color: #9ca3af; font-size: 13px; }
.co_muted { color: #9ca3af; }
.co_name { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #111827; font-weight: 600; }
.co_av { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex: none; }
.co_name:hover .co_name_txt { color: var(--ux-primary); }

.co_status { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.co_status_active { background: #d9f7e4; color: #1c8b4d; }
.co_status_inactive { background: #eef0f2; color: #6b7280; }
.co_taskcount { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 9px; background: var(--ux-primary-soft); color: var(--ux-primary-dark); border-radius: 999px; font-size: 13px; font-weight: 700; }

.co_range { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.co_range_gray { background: #eef0f2; color: #6b7280; }
.co_range_green { background: #d9f7e4; color: #1c8b4d; }
.co_range_teal { background: #cffafe; color: #0e7490; }
.co_range_amber { background: #fef3c7; color: #b45309; }
.co_range_blue { background: #dbeafe; color: #1d4ed8; }
.co_range_indigo { background: var(--ux-primary-soft); color: var(--ux-primary-dark); }
.co_range_purple { background: var(--ux-primary-soft); color: var(--ux-primary-dark); }

.co_th_plus { width: 116px; }
.co_td_plus { text-align: center; }
.co_row_actions { display: inline-flex; align-items: center; gap: 4px; }
.co_row_edit, .co_row_del, .co_row_tasks { color: #cbd0d8; display: inline-flex; background: none; border: none; padding: 5px; border-radius: 6px; cursor: pointer; }
.co_row_tasks:hover { color: var(--ux-primary); background: var(--ux-primary-soft); }
.co_row_edit:hover { color: var(--ux-primary); background: var(--ux-primary-soft); }
.co_row_del:hover { color: #ef4444; background: #fef2f2; }
.co_row_edit svg, .co_row_del svg, .co_row_tasks svg { width: 16px; height: 16px; }
.co_del_form { display: inline-flex; margin: 0; }
.co_empty { text-align: center; color: #9ca3af; padding: 36px 0 !important; }

/* Modal — байгууллага нэмэх / засах */
.org_modal_wrap .modal-dialog { max-width: 780px; width: 94vw; margin: 4vh auto; }
.org_modal_wrap .org_card { max-height: 90vh; overflow-y: auto; margin: 0; }
.org_modal_wrap.modal { background: rgba(15,23,42,.45); }
.org_modal_content { background: transparent; border: none; }
.org_modal_loading { padding: 60px; text-align: center; color: #6b7280; background: #fff; border-radius: 8px; }
.org_modal_wrap.modal { background: rgba(15,23,42,.5); }
#editOrgModal .modal-dialog { max-width: 460px !important; margin: 8vh auto !important; }
#editOrgModal .org_card { border: 1px solid var(--ux-border) !important; box-shadow: 0 24px 60px rgba(15,23,42,.32) !important; }
html[data-theme="dark"] .org_modal_loading { background: var(--ux-card); color: var(--ux-muted); }
button.co_row_edit { background: none; border: none; padding: 4px; cursor: pointer; }

/* ===== Wizard (2 алхам) ===== */
.ow_steps { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ow_step_dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #9ca3af; }
.ow_step_dot b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #e5e7eb; color: #6b7280; font-size: 12px; }
.ow_step_dot.active { color: #047857; }
.ow_step_dot.active b { background: var(--ux-primary); color: #fff; }
.ow_step_dot.done b { background: #d1fae5; color: #047857; }
.ow_step_sep { width: 26px; height: 2px; background: #e5e7eb; border-radius: 2px; }
.ow_created { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }
.ow_task_list { list-style: none; margin: 6px 0 0; padding: 0; }
.ow_task_list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--ux-border); border-radius: 8px; margin-bottom: 8px; background: #fafbfc; }
.owt_name { font-weight: 600; color: var(--ux-text); font-size: 14px; }
.owt_meta { font-size: 12px; color: var(--ux-muted); white-space: nowrap; }
.ow_task_list li::before { content: "✓"; color: var(--ux-primary); font-weight: 700; margin-right: 8px; }

/* =========================================================================
   Эрхийн матриц (ax_*) — access болон users/access хуудсанд хуваалцана
   ========================================================================= */
.ax_hint { margin: 6px 0 18px; font-size: 13px; color: #6b7280; }
.ax_card { background: #fff; border: 1px solid var(--ux-border); border-radius: 7px; box-shadow: 0 1px 3px rgba(15,23,42,.05); margin-bottom: 18px; overflow: hidden; }
.ax_card_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ux-surface); background: #fafbfc; flex-wrap: wrap; }
.ax_role { display: flex; align-items: center; gap: 12px; }
.ax_role_av { width: 40px; height: 40px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; background: var(--ux-primary); }
.ax_role_av.is_admin { background: var(--ux-primary-dark); }
.ax_role h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--ux-text); }
.ax_role_sub { font-size: 12px; color: var(--ux-muted); font-weight: 600; }
.ax_locked { font-size: 12px; font-weight: 700; color: var(--ux-primary); background: var(--ux-primary-soft); padding: 5px 12px; border-radius: 5px; border: 1px solid var(--ux-border); }
.ax_body { padding: 18px 20px; }
.ax_group { margin-bottom: 18px; }
.ax_group:last-of-type { margin-bottom: 0; }
.ax_group_title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ux-muted); font-weight: 800; margin-bottom: 10px; }
.ax_row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; }
.ax_ability { font-size: 14px; font-weight: 600; color: var(--ux-text); }
.ax_seg { display: inline-flex; gap: 3px; background: var(--ux-surface); padding: 3px; border-radius: 9px; flex-wrap: nowrap; }
.ax_seg_opt { position: relative; margin: 0; cursor: pointer; }
.ax_seg_opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.ax_seg_opt span { display: block; padding: 5px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: #64748b; white-space: nowrap; transition: all .14s; }
.ax_seg_opt input:checked + span { background: var(--ux-card); color: var(--ux-primary); box-shadow: 0 1px 2px rgba(15,23,42,.12); font-weight: 700; }
.ax_seg_opt input:disabled + span { opacity: .6; cursor: not-allowed; }
.ax_seg_opt:hover span { color: var(--ux-primary); }
.ax_foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ux-surface); }
html[data-theme="dark"] .ax_card { background: var(--ux-card); border-color: var(--ux-border); }
html[data-theme="dark"] .ax_card_head { background: var(--ux-surface); border-bottom-color: var(--ux-border); }
html[data-theme="dark"] .ax_role h2 { color: var(--ux-text); }
html[data-theme="dark"] .ax_ability { color: var(--ux-text); }
html[data-theme="dark"] .ax_seg { background: var(--ux-surface); }
html[data-theme="dark"] .ax_seg_opt input:checked + span { background: #0f1d33; color: var(--ux-primary); }
html[data-theme="dark"] .ax_foot, html[data-theme="dark"] .ax_card_head { border-color: var(--ux-border); }
@media (max-width: 640px) {
    .ax_row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ax_seg { overflow-x: auto; max-width: 100%; }
}

/* Хийгдэх ажил — мөр бүхэлдээ дарж нээгддэг */
.task_table .task_row { cursor: pointer; }
/* Нээгдсэн мөр — зөөлөн accent дэвсгэр + зүүн талд accent зураас */
.task_table tbody.task_item.open .task_row td { background: var(--ux-primary-soft); }
.task_table tbody.task_item.open .task_row td:first-child { box-shadow: inset 3px 0 0 var(--ux-primary); }
html[data-theme="dark"] .task_table tbody.task_item.open .task_row td { background: var(--ux-surface); }
html[data-theme="dark"] .task_table tbody.task_item.open .task_row td:first-child { box-shadow: inset 3px 0 0 var(--ux-primary); }
.task_table .sub_toggle svg { transition: transform .2s ease; }
.task_table tbody.task_item.open .sub_toggle { color: var(--ux-primary); }
.task_table tbody.task_item.open .sub_toggle svg { transform: scale(1.1); }
/* Дэлгэрэнгүй панель — зүүн талаас accent (мөртэй холбоотойг тодруулна).
   Хуудасны гол өнгөтэй нэг хэвэнд (өмнө нь цайвар горимд ганцаараа
   ногоон байсан тул тохирохгүй байв). */
.task_table tbody.task_item.open .task_detail_inner { border-left: 3px solid var(--ux-primary) !important; }

/* Хийгдэх ажил — дэлгэрэнгүй (цомхотгосон): зөвхөн тайлбар + дэд даалгавар */
.td_desc { background: #fff; border: 1px solid var(--ux-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.td_desc_label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ux-muted); font-weight: 700; margin-bottom: 5px; }
.td_desc .rich_content { font-size: .92rem; color: var(--ux-text); line-height: 1.55; }

/* Тойм мэдээллийн chip-үүд */
.td_meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.td_chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid var(--ux-border); border-radius: 999px;
    padding: 6px 13px; font-size: .82rem; color: var(--ux-muted); font-weight: 600;
}
.td_chip svg { width: 15px; height: 15px; color: #9aa6b8; flex: none; }
.td_chip b { color: var(--ux-text); font-weight: 700; }
.td_chip.is_danger { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.td_chip.is_danger svg, .td_chip.is_danger b { color: #b91c1c; }

/* Дэд даалгаврын толгой + нэмэх товч + явцын зураас */
.td_sub_head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.td_sub_title { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ux-muted); }
.td_sub_count { background: var(--ux-primary-soft); color: var(--ux-primary); font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; letter-spacing: 0; }
.td_add_sub {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ux-primary); color: #fff;
    border: none; border-radius: 8px; padding: 8px 14px;
    font-size: .82rem; font-weight: 600; cursor: pointer;
    line-height: 1; white-space: nowrap;
    box-shadow: 0 1px 3px rgba(20,44,78,.25);
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.td_add_sub svg {
    width: 15px; height: 15px;
    background: none; padding: 0;
    transition: transform .18s ease;
}
.td_add_sub:hover {
    background: #1d4ed8;
    box-shadow: 0 3px 10px rgba(20,44,78,.35);
}
.td_add_sub:hover svg { transform: rotate(90deg); }
.td_add_sub:active { transform: scale(.97); }
.td_sub_bar { height: 6px; background: #e8edf3; border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.td_sub_bar > span { display: block; height: 100%; background: linear-gradient(90deg, #34d399, #10b981); border-radius: 99px; transition: width .3s ease; }
/* Дууссан дэд даалгавар — нэр дээр зураас */
.task_detail_inner .sub_task_ul > li.is_done .sub_main_content p { color: var(--ux-muted); }

html[data-theme="dark"] .td_desc { background: var(--ux-surface); border-color: var(--ux-border); }
html[data-theme="dark"] .td_desc .rich_content { color: var(--ux-text); }
html[data-theme="dark"] .td_chip { background: var(--ux-surface); border-color: var(--ux-border); }
html[data-theme="dark"] .td_chip b { color: var(--ux-text); }
html[data-theme="dark"] .td_sub_bar { background: var(--ux-border); }

/* =========================================================================
   DARK MODE — ДУТУУ ҮЛДСЭН ХЭСГҮҮД (цагаан байсан газруудыг бараан болгоно)
   Доорх блок нь өмнө override хийгдээгүй классуудыг бүгдийг хамруулна.
   ========================================================================= */

/* ----- Үндсэн гадаргуу: nova хувьсагчдыг бараан болгоно -----
   Эдгээр хувьсагчдыг profile, dashboard, sidebar бүх хуудас ашигладаг тул
   эндээс override хийснээр тэдгээр газрууд автоматаар бараан болно. */
html[data-theme="dark"] {
    /* --nova-* нь --ux-* рүү залгагдсан (дээрх :root-д). Dark-д давхар
       тодорхойлохгүй — нэг эх сурвалжаас автоматаар бараан болно. */
    --nova-bg: var(--ux-bg);
    --nova-card: var(--ux-card);
    --nova-border: var(--ux-border);
    --nova-text: var(--ux-text);
    --nova-muted: var(--ux-muted);
    --nova-blue: var(--ux-primary);
    --nova-blue-dark: var(--ux-primary-dark);
}
html[data-theme="dark"] .nova_shell { background: var(--ux-bg) !important; }
html[data-theme="dark"] .nova_content { color: var(--ux-text); }
html[data-theme="dark"] .auth_shell { background: var(--ux-bg) !important; }

/* ----- Нийтлэг гарчиг / текст ----- */
html[data-theme="dark"] .header_wrap h1,
html[data-theme="dark"] .header_left h1,
html[data-theme="dark"] .co_head h1,
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--ux-text); }

/* =========================================================================
   CRM жагсаалт (co_*) — байгууллага / хэрэглэгчийн жагсаалт
   ========================================================================= */
html[data-theme="dark"] .co_head h1 { color: var(--ux-text); }
html[data-theme="dark"] .co_tabs_bar { border-bottom-color: var(--ux-border); }
html[data-theme="dark"] .co_tab { color: var(--ux-muted); }
html[data-theme="dark"] .co_tab:hover { color: var(--ux-text); }
html[data-theme="dark"] .co_tab.active { color: var(--ux-primary); border-bottom-color: var(--ux-primary); }
html[data-theme="dark"] .co_tab_n { background: var(--ux-surface); color: var(--ux-muted); }
html[data-theme="dark"] .co_tab.active .co_tab_n { background: var(--ux-primary-soft); color: var(--ux-primary); }

html[data-theme="dark"] .co_search input,
html[data-theme="dark"] .co_tool_btn,
html[data-theme="dark"] .co_listview {
    background: var(--ux-surface) !important; border-color: var(--ux-border) !important; color: var(--ux-text) !important;
}
html[data-theme="dark"] .co_search input::placeholder { color: #64748b; }
html[data-theme="dark"] .co_search svg,
html[data-theme="dark"] .co_listview svg { color: #64748b; }
html[data-theme="dark"] .co_tool_btn:hover { background: var(--ux-surface) !important; }

html[data-theme="dark"] .co_table_card { background: var(--ux-card) !important; border-color: var(--ux-border) !important; }
html[data-theme="dark"] .co_table thead th { background: var(--ux-surface); color: var(--ux-muted); border-bottom-color: var(--ux-border); }
html[data-theme="dark"] .co_table tbody td { border-bottom-color: var(--ux-border); color: var(--ux-text-2); }
html[data-theme="dark"] .co_row:hover td { background: var(--ux-surface); }
html[data-theme="dark"] .co_td_num { color: #64748b; }
html[data-theme="dark"] .co_muted,
html[data-theme="dark"] .co_empty { color: #64748b; }
html[data-theme="dark"] .co_name { color: var(--ux-text); }
html[data-theme="dark"] .co_name:hover .co_name_txt { color: var(--ux-primary); }
html[data-theme="dark"] .co_status_inactive { background: var(--ux-card); color: var(--ux-muted); }
html[data-theme="dark"] .co_taskcount { background: var(--ux-primary-soft); color: var(--ux-primary); }
html[data-theme="dark"] .co_range_gray { background: var(--ux-card); color: var(--ux-muted); }
html[data-theme="dark"] .co_row_view,
html[data-theme="dark"] .co_row_edit,
html[data-theme="dark"] .co_row_del,
html[data-theme="dark"] .co_row_tasks { color: #64748b; }
html[data-theme="dark"] .co_row_view:hover,
html[data-theme="dark"] .co_row_tasks:hover { color: var(--ux-primary); background: var(--ux-primary-soft); }
html[data-theme="dark"] .co_row_edit:hover { color: var(--ux-primary); background: var(--ux-primary-soft); }
html[data-theme="dark"] .co_row_del:hover { color: #f87171; background: #450a0a; }
html[data-theme="dark"] .co_detail_inner { color: var(--ux-text-2); }

/* =========================================================================
   Байгууллагын дотоод самбар (oti_*)
   ========================================================================= */
html[data-theme="dark"] .oti_sum { color: var(--ux-muted); }
html[data-theme="dark"] .oti_stat_lbl { color: var(--ux-muted); }
html[data-theme="dark"] .oti_empty,
html[data-theme="dark"] .oti_muted { color: #64748b; }
html[data-theme="dark"] .oti_progress,
html[data-theme="dark"] .oti_bar { background: var(--ux-border); }
html[data-theme="dark"] .oti_bar + small { color: var(--ux-muted); }
html[data-theme="dark"] .oti_status.is_done { background: #064e3b; color: #6ee7b7; }
html[data-theme="dark"] .oti_status.is_pending { background: #422006; color: #fcd34d; }
html[data-theme="dark"] .oti_status.is_idle { background: var(--ux-card); color: var(--ux-muted); }
html[data-theme="dark"] .oti_status.is_doing { background: #16283f; color: #93c5fd; }
html[data-theme="dark"] .oti_status.is_over { background: #381a17; color: #f87171; }
html[data-theme="dark"] .ot_green { color: #34d399; }
html[data-theme="dark"] .ot_red { color: #f87171; }
html[data-theme="dark"] .ot_blue { color: var(--ux-primary); }

/* =========================================================================
   Wizard (ow_*) — байгууллага үүсгэх 2 алхам
   ========================================================================= */
html[data-theme="dark"] .ow_step_dot { color: #64748b; }
html[data-theme="dark"] .ow_step_dot b { background: var(--ux-border); color: var(--ux-muted); }
html[data-theme="dark"] .ow_step_dot.active { color: var(--ux-primary); }
html[data-theme="dark"] .ow_step_dot.active b { background: var(--ux-primary); color: #fff; }
html[data-theme="dark"] .ow_step_dot.done b { background: #064e3b; color: #6ee7b7; }
html[data-theme="dark"] .ow_step_sep { background: var(--ux-border); }
html[data-theme="dark"] .ow_created { background: #064e3b; border-color: #047857; color: #6ee7b7; }
html[data-theme="dark"] .ow_task_list li { background: var(--ux-surface); border-color: var(--ux-border); }
html[data-theme="dark"] .owt_name { color: var(--ux-text); }
html[data-theme="dark"] .owt_meta { color: #64748b; }

/* =========================================================================
   Эрхийн матриц (ax_*) — нэмэлт хэсгүүд
   ========================================================================= */
html[data-theme="dark"] .ax_hint { color: var(--ux-muted); }
html[data-theme="dark"] .ax_group_title { color: #64748b; }
html[data-theme="dark"] .ax_role_sub { color: #64748b; }
html[data-theme="dark"] .ax_locked { background: #064e3b; color: #6ee7b7; }
html[data-theme="dark"] .ax_seg_opt span { color: var(--ux-muted); }
html[data-theme="dark"] .ax_seg_opt:hover span { color: var(--ux-text); }
html[data-theme="dark"] .ax_foot { border-top-color: var(--ux-border); }

/* =========================================================================
   Confirm dialog icon + danger chip + бусад жижиг зүйлс
   ========================================================================= */
html[data-theme="dark"] .uxc_ic { background: #450a0a; color: #f87171; }
html[data-theme="dark"] .td_chip svg { color: #64748b; }
html[data-theme="dark"] .td_chip.is_danger { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
html[data-theme="dark"] .td_chip.is_danger svg,
html[data-theme="dark"] .td_chip.is_danger b { color: #fca5a5; }
html[data-theme="dark"] .td_desc_label,
html[data-theme="dark"] .td_sub_title { color: var(--ux-muted); }
html[data-theme="dark"] .td_sub_count { background: var(--ux-primary-soft); color: var(--ux-primary); }
html[data-theme="dark"] .td_sub_bar { background: var(--ux-border); }

/* ----- Sidebar nav n: жагсаалтын badge / pagination foot ----- */
html[data-theme="dark"] .nlt_type.is_problem { background: #450a0a; color: #fca5a5; }
html[data-theme="dark"] .nova_badge.is_yellow { background: #422006; color: #fcd34d; }
html[data-theme="dark"] .num_item:hover { background: var(--ux-surface); }
html[data-theme="dark"] .num_logout:hover { background: #450a0a; }
html[data-theme="dark"] .nlt_action:hover { background: var(--ux-surface); color: var(--ux-text-2); }
html[data-theme="dark"] .nlt_delete:hover { background: #450a0a; color: #f87171; }

/* ----- Toast мэдэгдэл ----- */
html[data-theme="dark"] .ux_toast { background: var(--ux-card); border-color: var(--ux-border); color: var(--ux-text); }
html[data-theme="dark"] .ux_toast_msg { color: var(--ux-text); }

/* ----- Topbar: мэдэгдлийн хонх товч (цагаан байсан) ----- */
html[data-theme="dark"] .notification_button {
    background-color: #333b4a !important; border-color: var(--ux-border) !important; color: var(--ux-text-2) !important;
}
html[data-theme="dark"] .notification_button:hover { background-color: #243a5c !important; border-color: #475569 !important; }
html[data-theme="dark"] .bell_icon { color: var(--ux-text-2); }
html[data-theme="dark"] .notification_count { background: var(--ux-primary-soft); color: var(--ux-primary); }

/* ----- Dashboard: donut график төв + цагаан progress trough ----- */
html[data-theme="dark"] .cd_hole { background: var(--ux-card); }
html[data-theme="dark"] .cstat_bar { background: var(--ux-border); }
html[data-theme="dark"] .completion_donut { box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .table_progress::before { background: var(--ux-border); }
html[data-theme="dark"] .ux_prog_track { background: var(--ux-border); }
html[data-theme="dark"] .ux_prog_pct { color: var(--ux-text); }
html[data-theme="dark"] .upcoming_item {
    background: var(--ux-card) !important;
    border-color: var(--ux-border) !important;
}
html[data-theme="dark"] .upcoming_item.is_urgent {
    background: #2a1515 !important;
    border-left-color: #ef4444 !important;
}
html[data-theme="dark"] .upcoming_main strong { color: var(--ux-text); }
html[data-theme="dark"] .upcoming_main span { color: var(--ux-muted); }
html[data-theme="dark"] .upcoming_date { color: var(--ux-text-2); }
html[data-theme="dark"] .upcoming_left { background: var(--ux-primary-soft) !important; color: var(--ux-primary) !important; }
html[data-theme="dark"] .upcoming_item.is_urgent .upcoming_left { background: #3a1515 !important; color: #fca5a5 !important; }
html[data-theme="dark"] .dashboard_table .row_parent td { background: var(--ux-surface) !important; }
html[data-theme="dark"] .dashboard_table tbody tr:hover { background: #243049 !important; }
html[data-theme="dark"] .org_av { background: var(--ux-primary-soft); color: var(--ux-primary); }
html[data-theme="dark"] .org_av.is_sub { background: #243049; color: var(--ux-muted); }
html[data-theme="dark"] .org_name_text strong { color: var(--ux-text); }
html[data-theme="dark"] .dashboard_panel { background: var(--ux-card); border-color: var(--ux-border); }

/* ----- Profile: hero толгойн цагаан хэсэг + Гарах товч ----- */
html[data-theme="dark"] .profile_hero { background: var(--ux-card) !important; border: 1px solid var(--ux-border); }
html[data-theme="dark"] .profile_cover {
    background: var(--ux-brand) !important;
}
/* Админы cover — брэнд navy (AI нил ягаан gradient-ыг арилгав) */
html[data-theme="dark"] .profile_hero.is_admin .profile_cover {
    background: var(--ux-brand) !important;
}
html[data-theme="dark"] .profile_identity h1 { color: var(--ux-text) !important; }
html[data-theme="dark"] .profile_email { color: var(--ux-muted) !important; }
html[data-theme="dark"] .profile_logout .__btn {
    background: var(--ux-surface) !important; border-color: #475569 !important; color: var(--ux-text-2) !important;
}
html[data-theme="dark"] .profile_logout .__btn:hover { background: #243a5c !important; }

/* ----- Жагсаалт: хайх input + хүснэгтийн хөл (Нийт) ----- */
html[data-theme="dark"] .nova_list_search input {
    background: var(--ux-surface) !important; border-color: var(--ux-border) !important; color: var(--ux-text) !important;
}
html[data-theme="dark"] .nova_list_search input::placeholder { color: #64748b; }
html[data-theme="dark"] .nova_list_search svg { color: #64748b; }
html[data-theme="dark"] .nova_table_foot { background: var(--ux-surface); border-top-color: var(--ux-border); color: var(--ux-muted); }

/* =========================================================================
   PROFILE хуудас — hardcoded #fff картууд
   ========================================================================= */
html[data-theme="dark"] .profile_stat,
html[data-theme="dark"] .profile_card { background: var(--ux-card); border-color: var(--ux-border); }
html[data-theme="dark"] .profile_card_head { border-bottom-color: var(--ux-border); }
html[data-theme="dark"] .info_row { border-bottom-color: var(--ux-border); }
html[data-theme="dark"] .profile_progress_box { background: var(--ux-surface); }
html[data-theme="dark"] .ppb_bar { background: var(--ux-border); }
html[data-theme="dark"] .profile_task:hover { background: var(--ux-surface); }
html[data-theme="dark"] .ps_blue { background: var(--ux-primary-soft); }
html[data-theme="dark"] .ps_green { background: #064e3b; }
html[data-theme="dark"] .ps_amber { background: #422006; }
html[data-theme="dark"] .ps_red { background: #450a0a; }
html[data-theme="dark"] .profile_role.is_admin { background: var(--ux-primary-soft); color: var(--ux-primary); }

/* =========================================================================
   DASHBOARD хуудас — hardcoded #fff картууд / зураасан график
   ========================================================================= */
html[data-theme="dark"] .dash_filter_card { background: var(--ux-card); border-color: var(--ux-border); }
html[data-theme="dark"] .dash_filter_active { background: var(--ux-primary-soft); color: var(--ux-primary); }
html[data-theme="dark"] .dc_ic.ic_blue { background: #0f172a; color: var(--ux-primary); }
html[data-theme="dark"] .dc_ic.ic_green { background: #064e3b; color: #6ee7b7; }
html[data-theme="dark"] .dc_ic.ic_amber { background: #422006; color: #fcd34d; }
html[data-theme="dark"] .dc_ic.ic_red { background: #450a0a; color: #fca5a5; }
html[data-theme="dark"] .dc_ic.ic_indigo { background: var(--ux-primary-soft); color: var(--ux-primary); }

/* =========================================================================
   HOME — даалгаврын хүснэгт (task_table) hardcoded өнгүүд
   ========================================================================= */
html[data-theme="dark"] .task_tabs_bar .tab_wrap { background: var(--ux-card); border-color: var(--ux-border); }
html[data-theme="dark"] .task_tabs_bar .tab_item.active { background: rgba(96,165,250,.18); color: var(--ux-primary); }
html[data-theme="dark"] .task_table tbody.task_item.open { background: var(--ux-surface); }
html[data-theme="dark"] .task_detail_inner .detail_item { background: var(--ux-surface); border-color: var(--ux-border); }
html[data-theme="dark"] .task_detail_inner .detail_item.detail_full { background: var(--ux-surface); }
html[data-theme="dark"] .rp_bar { background: var(--ux-border); }
html[data-theme="dark"] .nova_badge.is_red { background: #450a0a; color: #fca5a5; }
html[data-theme="dark"] .drag_dots { color: #475569; }
html[data-theme="dark"] .task_item_dragging { background: var(--ux-surface) !important; }

/* ----- Badge / role tag хувилбарууд ----- */
html[data-theme="dark"] .nova_role_tag.is_admin { background: #422006 !important; color: #fcd34d !important; }
html[data-theme="dark"] .nova_badge.is_green { background: #064e3b !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .nova_badge.is_blue { background: var(--ux-primary-soft) !important; color: var(--ux-primary) !important; }
html[data-theme="dark"] .nova_badge.is_gray { background: var(--ux-card) !important; color: var(--ux-muted) !important; }
html[data-theme="dark"] .nova_badge.is_yellow { background: #422006 !important; color: #fcd34d !important; }
/* Хүснэгтийн badge — dark-д ч гол дүрмийн soft дэвсгэр (--ux-*-soft токен)
   ашиглана. Тусад нь override хийхгүй — токенууд dark-д зөв утгатай. */

/* Жагсаалт/home — нэрний avatar (T, 1 гэх мэт) dark горим */
html[data-theme="dark"] .task_av.is_green  { background: #064e3b; color: #6ee7b7; }
html[data-theme="dark"] .task_av.is_yellow { background: #422006; color: #fcd34d; }
html[data-theme="dark"] .task_av.is_gray   { background: var(--ux-card); color: var(--ux-text-2); }

/* =========================================================================
   Хүснэгтийн үйлдлийн товч — өнгөөр ялгаатай hover (ойлгомжтой болгоно)
   харах=цэнхэр, нэмэх=ногоон, устгах=улаан
   ========================================================================= */
/* ЗӨВХӨН биеийн нүдэнд: opacity нь толгойн нүдийг хагас тунгалаг болгож,
   доогуур нь гүйж буй мөр наалдсан толгойгоор дамжин харагдаж байв. */
td.col_actions { opacity: .8; transition: opacity .15s ease; }
.task_row:hover td.col_actions,
.nova_list_table tbody tr:hover td.col_actions,
/* Гар/товчлуураар шилжихэд (hover биш) товч бүдэг үлдэхээс сэргийлнэ —
   focus-within-ээр мөрийн товч фокус авмагц бүрэн харагдана. */
.task_row:focus-within td.col_actions,
.nova_list_table tbody tr:focus-within td.col_actions { opacity: 1; }
.nlt_action.sub_toggle:hover { background: var(--ux-primary-soft); color: var(--ux-primary); }
.nlt_action.add_sub_list:hover { background: var(--ux-success-soft); color: var(--ux-success); }
html[data-theme="dark"] .nlt_action.sub_toggle:hover { background: var(--ux-primary-soft) !important; color: var(--ux-primary) !important; }
html[data-theme="dark"] .nlt_action.add_sub_list:hover { background: var(--ux-success-soft) !important; color: var(--ux-success) !important; }
html[data-theme="dark"] .nlt_delete:hover { background: #450a0a !important; color: var(--ux-danger) !important; }

/* Хоосон төлөвийн (empty state) хэв маягийг нэгдсэн `partials/empty_state`
   partial дотор тодорхойлсон (.ux_empty svg / h3 / p). Өмнө нь энд `.ux_empty_ic`,
   `.ux_empty_title`, `.ux_empty_text` гэсэн ЗЭРЭГЦЭЭ багц байсан ч аль ч хуудас
   тэдгээрийг ашиглахаа больсон тул давхардлыг арилгав. */

/* Явц багана — 0/0 (дэд даалгаваргүй) үед зураасыг бүдэгрүүлж, текстийг л үлдээнэ */
.row_progress.is_empty .rp_bar { opacity: .4; }
.row_progress.is_empty small { color: var(--ux-muted); }

/* =========================================================================
   Дэд даалгавар устгах товч (status select-ийн хажууд)
   ========================================================================= */
.sub_del_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    /* ТАЙВАН БАЙДАЛД САААРАЛ. Өмнө нь улаан хүрээ, улаан дүрстэй байсан тул
       даалгавар бүрийн баруун захад «Дууссан» ногоон, явцын саарал, «Буцаах»
       шар, устгах улаан — дөрвөн өнгө зэрэг зогсож, аль нь чухал болох нь
       мэдэгдэхээ больдог байв. Устгах бол ХОВОР үйлдэл: түүн рүү заасан
       үедээ л улаан болно. */
    border: 1px solid var(--ux-border);
    background: var(--ux-card);
    color: var(--ux-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.sub_del_btn svg { width: 16px; height: 16px; }
.sub_del_btn:hover { background: #fef2f2; border-color: #f87171; color: #dc2626; }
.sub_del_btn:active { transform: scale(.95); }
html[data-theme="dark"] .sub_del_btn { background: var(--ux-surface); border-color: var(--ux-border); color: var(--ux-muted); }
html[data-theme="dark"] .sub_del_btn:hover { background: #450a0a; border-color: #b91c1c; color: #fca5a5; }

/* =========================================================================
   Олон ажил сонгож устгах (bulk select + delete)
   ========================================================================= */
.col_check { width: 40px; text-align: center; padding-right: 0 !important; }
.tk_check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.tk_check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tk_check span {
    width: 18px; height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    display: inline-block;
    transition: background .12s ease, border-color .12s ease;
    position: relative;
}
.tk_check input:checked + span {
    background: var(--ux-primary);
    border-color: var(--ux-primary);
}
.tk_check input:checked + span::after {
    content: "";
    position: absolute;
    left: 5px; top: 1.5px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.tk_check input:indeterminate + span {
    background: var(--ux-primary);
    border-color: var(--ux-primary);
}
.tk_check input:indeterminate + span::after {
    content: "";
    position: absolute;
    left: 3px; top: 7px;
    width: 10px; height: 2px;
    background: #fff;
}
.tk_check:hover span { border-color: var(--ux-primary); }
html[data-theme="dark"] .tk_check span { background: var(--ux-surface); border-color: #475569; }
html[data-theme="dark"] .tk_check input:checked + span,
html[data-theme="dark"] .tk_check input:indeterminate + span { background: var(--ux-primary); border-color: var(--ux-primary); }

/* Сонгогдсон мөр */
.task_table tbody.task_item.is_selected .task_row td { background: #eff5ff; }
html[data-theme="dark"] .task_table tbody.task_item.is_selected .task_row td { background: var(--ux-surface); }

/* Bulk action bar — сонголт хийсэн үед л харагдана */
.bulk_bar {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 16px;
    background: var(--ux-primary-soft);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    animation: bulk_in .18s ease;
}
.bulk_bar.is_open { display: flex; }
@keyframes bulk_in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bulk_info { font-size: 13.5px; color: #1e3a8a; font-weight: 600; }
.bulk_info b { font-weight: 800; }
.bulk_spacer { flex: 1; }
.bulk_clear {
    border: none; background: transparent; color: #475569;
    font-size: 13px; font-weight: 600; cursor: pointer; padding: 7px 12px; border-radius: 7px;
}
.bulk_clear:hover { background: rgba(15,23,42,.06); color: var(--ux-text); }
.bulk_del_btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; background: #ef4444; color: #fff;
    font-size: 13px; font-weight: 700; cursor: pointer;
    padding: 8px 14px; border-radius: 8px;
    box-shadow: 0 1px 3px rgba(239,68,68,.3);
    transition: background .14s ease;
}
.bulk_del_btn svg { width: 15px; height: 15px; }
.bulk_del_btn:hover { background: #dc2626; }
.bulk_del_btn:active { transform: scale(.98); }
html[data-theme="dark"] .bulk_bar { background: var(--ux-surface); border-color: var(--ux-primary-soft); }
html[data-theme="dark"] .bulk_info { color: var(--ux-primary); }
html[data-theme="dark"] .bulk_clear { color: var(--ux-muted); }
html[data-theme="dark"] .bulk_clear:hover { background: rgba(255,255,255,.06); color: var(--ux-text); }

/* =========================================================================
   Хуудас ачаалах + хайлтын товчлол
   ========================================================================= */
.nova_content > .body_wrap {
    animation: ux-page-in .28s ease both;
}
@keyframes ux-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nova_content > .body_wrap,
    .dash_list.is_open,
    .bulk_bar { animation: none !important; }
}
.nova_search { position: relative; }
.nova_search input { padding-right: 72px !important; }
.nova_search_kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--ux-muted);
    background: #fff;
    border: 1px solid var(--ux-border);
    border-radius: 4px;
    padding: 2px 5px;
    line-height: 1.3;
    pointer-events: none;
    font-family: inherit;
}
.nova_search:focus-within .nova_search_kbd,
.nova_search input:not(:placeholder-shown) ~ .nova_search_kbd { display: none; }
html[data-theme="dark"] .nova_search_kbd {
    background: var(--ux-card);
    border-color: #475569;
    color: #64748b;
}

/* =========================================================================
   Хуудас ачаалах + хайлтын товчлол
   ========================================================================= */
.nova_content > .body_wrap {
    animation: ux-page-in .28s ease both;
}
@keyframes ux-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nova_content > .body_wrap,
    .dash_list.is_open,
    .bulk_bar { animation: none !important; }
}
.nova_search input::placeholder { transition: opacity .15s; }

/* =========================================================================
   ХАЙЛТТАЙ СОНГОХ ТАЛБАР (searchable select) — байгууллага сонголт г.м
   ========================================================================= */
.ss_wrap { position: relative; }
.ss_control {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    text-align: left;
    padding: 0 0 0 14px;
    background: var(--ux-card);
    border: 1.5px solid var(--ux-border);
    border-radius: 10px;
    color: var(--ux-text);
    cursor: pointer;
    font-size: .92rem;
    transition: border-color .15s, box-shadow .15s;
}
.ss_control .ss_lead_ic {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    color: var(--ux-primary);
}
.ss_control .ss_value {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ss_control .ss_value.ss_placeholder { color: var(--ux-muted); }
/* Сумыг тусдаа хэсэг болгож босоо зураасаар тусгаарлана */
.ss_control .ss_caret {
    align-self: stretch;
    width: 42px;
    flex: 0 0 auto;
    padding: 0 12px;
    border-left: 1.5px solid var(--ux-border);
    color: #64748b;
    box-sizing: border-box;
    transition: transform .18s ease, color .15s;
}
.ss_control:hover .ss_caret { color: var(--ux-primary); }
.ss_wrap.is_open .ss_control .ss_caret { transform: rotate(180deg); color: var(--ux-primary); }
.ss_wrap.is_open .ss_control {
    border-color: var(--ux-primary) !important;
    box-shadow: var(--ux-ring) !important;
}
html[data-theme="dark"] .ss_control .ss_caret { border-left-color: var(--ux-border); }
/* Toolbar дахь байгууллага сонгох dropdown-ийн өргөн (org + users хуудас) */
.co_ss { min-width: 280px; max-width: 380px; flex: 0 1 340px; }

/* Унждаг панел */
.ss_panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--ux-card);
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius);
    box-shadow: var(--ux-shadow-lg);
    padding: 6px;
    display: none;
}
.ss_wrap.is_open .ss_panel { display: block; }

.ss_search_box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius-sm);
    background: var(--ux-surface);
}
.ss_search_box svg { width: 15px; height: 15px; color: var(--ux-muted); flex: 0 0 auto; }
.ss_search {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: .9rem;
    color: var(--ux-text);
}

.ss_options {
    max-height: 260px;
    overflow-y: auto;
}
.ss_option {
    padding: 9px 11px;
    border-radius: var(--ux-radius-sm);
    font-size: .9rem;
    color: var(--ux-text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss_option:hover { background: var(--ux-primary-soft); }
.ss_option.is_selected {
    background: var(--ux-primary);
    color: #fff;
    font-weight: 600;
}
.ss_option.is_placeholder { color: var(--ux-muted); }
.ss_no_result {
    padding: 14px 11px;
    text-align: center;
    color: var(--ux-muted);
    font-size: .88rem;
}

/* Dark theme */
html[data-theme="dark"] .ss_control { background: var(--ux-card); color: var(--ux-text); }
html[data-theme="dark"] .ss_control .ss_value.ss_placeholder { color: #64748b; }
html[data-theme="dark"] .ss_panel { background: var(--ux-card); border-color: var(--ux-border); }
html[data-theme="dark"] .ss_search_box { background: #0f172a; border-color: var(--ux-border); }
html[data-theme="dark"] .ss_search { color: var(--ux-text); }
html[data-theme="dark"] .ss_option { color: var(--ux-text-2); }
html[data-theme="dark"] .ss_option:hover { background: rgba(59, 130, 246, 0.16); }

/* =========================================================================
   ХАРИУЦАГЧИЙН ХОЛБОО БАРИХ (утас, gmail) — хүснэгт болон дэлгэрэнгүйд
   ========================================================================= */
.person_cell { display: flex; flex-direction: column; gap: 3px; }
.person_name { font-weight: 600; color: var(--ux-text); }
.person_contact { display: flex; flex-direction: column; gap: 2px; }
.pc_item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    color: #64748b;
    text-decoration: none;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pc_item svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pc_item:hover { color: var(--ux-primary); text-decoration: underline; }
.pc_mail:hover { color: #ea4335; } /* Gmail улаан */

/* Дэлгэрэнгүй дэх дарж болох chip (утас/gmail) */
.td_chip_link { text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s; }
.td_chip_link:hover { border-color: var(--ux-primary); color: var(--ux-primary); }

html[data-theme="dark"] .person_name { color: var(--ux-text); }
html[data-theme="dark"] .pc_item { color: var(--ux-muted); }
html[data-theme="dark"] .pc_item:hover { color: var(--ux-primary); }

/* ---------- МОДАЛЫН АРЫН ДЭВСГЭР ----------
   Bootstrap-ын анхны .5 бүрхүүл хуудсыг хэт харлуулдаг тул
   зөөлөн бүдгэрүүлэлт болгож нэгтгэв (light + dark). */
.modal-backdrop.show { opacity: 1; }
.modal-backdrop { background-color: rgba(15, 23, 42, .16); backdrop-filter: blur(3px); }
html[data-theme="dark"] .modal-backdrop { background-color: rgba(2, 6, 23, .3); }

/* =========================================================================
   АМЬД БАЙДЛЫН САЙЖРУУЛАЛТ (v2) — брэндийн navy→teal, зөөлөн хөдөлгөөн.
   Дээрх дүрмийг дарж бичихгүй, зөвхөн нэмэлт өнгө/hover/градиент өгнө.
   ========================================================================= */

/* ── Stat картууд: hover өргөлт + брэнд градиент дүрс ── */
.u_stat, .pf_stat, .dc_card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.u_stat:hover, .dc_card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13, 59, 92, .10);
    border-color: color-mix(in srgb, var(--ux-primary) 22%, var(--ux-border));
}

/* Хэрэглэгчийн stat дүрсэнд брэнд градиент (хавтгай биш) */
.u_stat_ic.blue  { background: linear-gradient(135deg, #dcf0ee, #c6e8e4) !important; color: #0b6f68; }
.u_stat_ic.green { background: linear-gradient(135deg, #dcefe0, #c8e8d2) !important; color: #2e7d4f; }
.u_stat_ic.gray  { background: linear-gradient(135deg, #e6edf2, #d5e0e9) !important; color: #0d3b5c; }

/* ── Аватар: navy→teal градиент (хавтгай нэг өнгөний оронд) ── */
/* Профайлын том аватар (`.pf_avatar`) энд ОРОХГҮЙ. Түүний үсэг нь загварын
   өнгөтэй (цайвар горимд цэнхэр, харанхуйд цайвар цэнхэр) тул доор нь цэнхэр
   градиент тавихад үсэг нь бараг үл ялгагдах болно. Цайвар горимд энэ градиент
   ямар ч байсан цагаанаар дарагдаж, зөвхөн ХАРАНХУЙ горимд гарч ирээд аватарыг
   цэнхэр дөрвөлжин болгож, «А» үсгийг нь алга болгож байв. Аватарын өнгийг
   profile.css өөрөө горим тус бүрээр хариуцна. */
.co_av, .u_av {
    background-image: linear-gradient(135deg, var(--ux-brand), var(--ux-primary)) !important;
    box-shadow: 0 2px 6px rgba(13, 59, 92, .18);
}

/* ── Үндсэн товч: teal градиент + hover өргөлт + focus ring ── */
.co_add_btn, .pf_pw_btn, .pf_pw_modal_ok {
    background-image: linear-gradient(135deg, var(--ux-primary), var(--ux-primary-dark)) !important;
    box-shadow: 0 2px 8px rgba(29, 92, 150, .26) !important;
    transition: filter .14s ease, transform .1s ease, box-shadow .14s ease;
}
.co_add_btn:hover, .pf_pw_btn:hover, .pf_pw_modal_ok:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(29, 92, 150, .32) !important;
}
.co_add_btn:active, .pf_pw_btn:active { transform: translateY(0); }

/* ── Хайлтын талбар: teal focus ring ── */
.co_search:focus-within, .u_search:focus-within {
    border-color: var(--ux-primary);
    box-shadow: var(--ux-ring);
}

/* ── Хүснэгтийн мөр: зөөлөн teal hover ── */
.co_table tbody tr:hover td,
.u_row:hover td,
.task_table tbody tr:hover td {
    background: color-mix(in srgb, var(--ux-primary-soft) 45%, transparent);
}

/* ── Роль/төлөв чипүүд: брэнд аястай ── */
.u_chip.is_admin {
    background: var(--ux-primary-soft);
    color: var(--ux-primary-dark);
}
html[data-theme="dark"] .u_chip.is_admin {
    background: color-mix(in srgb, var(--ux-primary) 26%, transparent);
    color: #7fb8f2;
}

/* ── Хөдөлгөөнийг багасгах горим ── */
@media (prefers-reduced-motion: reduce) {
    .u_stat, .pf_stat, .dc_card, .co_add_btn, .pf_pw_btn, .pf_pw_modal_ok {
        transition: none;
    }
    .u_stat:hover, .dc_card:hover, .co_add_btn:hover, .pf_pw_btn:hover { transform: none; }
}

/* ═══════════════ Нэгдсэн хайлт (толгой хэсэг) ═══════════════ */
/* margin-left байхгүй — дээд мөрний зай нь хуудасны агуулгатай эгнэсэн тул
   хайлтын талбар картуудын зүүн ирмэгээс яг эхэлнэ. */
.gsearch { position: relative; flex: 1; max-width: 460px; }
.gsearch .gs_ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ux-muted); pointer-events: none; display: flex; }
.gsearch .gs_ic svg { width: 16px; height: 16px; }
#gsInput {
    width: 100%; padding: 9px 40px 9px 36px; border-radius: 10px;
    border: 1px solid var(--ux-border); background: var(--ux-surface); color: var(--ux-text);
    font-size: .88rem; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
#gsInput::placeholder { color: var(--ux-muted); }
#gsInput:focus { border-color: var(--ux-primary); background: var(--ux-card); box-shadow: 0 0 0 3px var(--ux-primary-soft); }
.gs_kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: .76rem; font-weight: 700; color: var(--ux-muted); pointer-events: none;
    border: 1px solid var(--ux-border); border-radius: 5px; padding: 1px 6px; background: var(--ux-card);
}
#gsInput:focus ~ .gs_kbd { opacity: 0; }
.gs_panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 200;
    max-height: 62vh; overflow-y: auto; padding: 6px;
    background: var(--ux-card); border: 1px solid var(--ux-border);
    border-radius: 12px; box-shadow: var(--ux-shadow-lg);
}
.gs_panel[hidden] { display: none; }
.gs_sec { padding: 8px 10px 4px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ux-muted); }
.gs_row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; text-decoration: none; }
.gs_row:hover, .gs_row.is_cur { background: var(--ux-primary-soft); }
.gs_kind { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gs_kind.gs_task { background: var(--ux-primary); }
.gs_kind.gs_org { background: var(--ux-warning, #d97706); }
.gs_kind.gs_user { background: var(--ux-info, #2563eb); }
.gs_main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.gs_name { font-size: .88rem; font-weight: 600; color: var(--ux-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs_sub { font-size: .76rem; color: var(--ux-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs_empty { padding: 22px 12px; text-align: center; color: var(--ux-muted); font-size: .86rem; }
@media (max-width: 780px) {
    .gsearch { max-width: none; margin-left: 10px; }
    .gs_kbd { display: none; }
    #gsInput { padding-right: 12px; }
}
/* Жижиг дэлгэц — хайлт icon болж хураагдаж, дарахад бүтэн дэлгэгдэнэ */
@media (max-width: 560px) {
    .gsearch { flex: none; width: 38px; margin-left: 6px; transition: width .18s; }
    #gsInput { width: 38px; padding: 9px 0 9px 34px; border-radius: 999px; cursor: pointer; }
    #gsInput::placeholder { color: transparent; }
    .gsearch.is_open { position: absolute; left: 8px; right: 8px; width: auto; z-index: 210; }
    .gsearch.is_open #gsInput { width: 100%; padding: 9px 12px 9px 36px; border-radius: 10px; cursor: text; }
    .gsearch.is_open #gsInput::placeholder { color: var(--ux-muted); }
}

/* Самбарын «Хэрэглэгчид» хэсэгт хариуцагчгүй ажлын сануулга.
   Доорх мөрүүдийн нийлбэр нийт ажлын тоотой тэнцэхгүйн шалтгааныг тайлбарлана. */
.dash_unassigned {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 20px 14px; padding: 10px 13px;
    border-radius: 9px;
    background: #fff7ed; color: #9a3412;
    font-size: .82rem; line-height: 1.5;
}
.dash_unassigned svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.dash_unassigned b { font-weight: 800; }
html[data-theme="dark"] .dash_unassigned { background: #3a2411; color: #fdba74; }

/* =========================================================================
   НЭГТГЭЛИЙН ДАРАА ДАХИН БУУЛГАСАН ХЭСГҮҮД
   ========================================================================= */

/* Задарсан select-ийн жагсаалт харанхуй үед цагаан хэвээр гарч байв.
   color-scheme дангаараа хүрэлцэхгүй — хөтөч жагсаалтыг option-ы өөрийнх нь
   өнгөөр буддаг. Сонгогч бүрд тусад нь бус, нэг мөсөн хэрэглэв. */
html[data-theme="dark"] option,
html[data-theme="dark"] optgroup {
    background-color: var(--ux-card);
    color: var(--ux-text);
}
/* Гар утсанд «N ажил» товчийг бүрхсэн үл үзэгдэх сонгогч. */
html[data-theme="dark"] .acp_status_sel {
    background-color: var(--ux-card);
    color: var(--ux-text);
}

/* Огноо/цагийн талбар хөтчийн анхдагчаар monospace болдог тул бусад
   талбарын хажууд өөр үсгээр бичигдэж, эвгүй харагддаг. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
    font-family: inherit;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: .7; cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Харанхуй үед хуудасны толгойн дүрсний хайрцаг дэвсгэрээс бараг
   ялгарахгүй байсныг тодруулж, ирмэг өгнө. */
.app_page_ic { border: 1px solid transparent; }
html[data-theme="dark"] .app_page_ic {
    background: rgba(77, 148, 232, .16);
    border-color: rgba(77, 148, 232, .30);
}

@media (max-width: 760px) {
    /* Гүйлгэхэд ажлын тоо, шүүлт, хайлт дэлгэц дээр үлдэнэ — урт жагсаалтад
       төлөв солих, хайх бүрдээ дээш эргэж очих шаардлагагүй.
       Дээд мөр өөрөө 60px өндөртэй наалддаг тул яг түүний доор байрлана. */
    .app_toolbar {
        position: sticky; top: 60px; z-index: 30;
        margin-bottom: 12px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
    }
}

/* =========================================================================
   RICH TEXT ЗАСВАРЛАГЧ (public/js/richtext.js)
   TinyMCE-ийн үүлэн CDN-ээс салсны дараах өөрийн засварлагчийн хэв маяг.
   Энэ блок дутуу байхад хэрэгслийн товчнууд хоосон дөрвөлжин болж харагдана.
   ========================================================================= */
.rt_wrap {
    border: 1px solid var(--ux-border);
    border-radius: 10px;
    background: var(--ux-card);
    overflow: hidden;
}
.rt_wrap:focus-within {
    border-color: var(--ux-primary);
    box-shadow: var(--ux-ring, 0 0 0 3px rgba(29, 92, 150, .12));
}
.rt_bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--ux-border);
    background: var(--ux-surface);
}
.rt_btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: none; border-radius: 7px;
    background: transparent; color: var(--ux-text-2);
    cursor: pointer;
    transition: background .13s, color .13s;
}
.rt_btn:hover { background: var(--ux-primary-soft); color: var(--ux-primary); }
.rt_btn.is_on { background: var(--ux-primary-soft); color: var(--ux-primary); }
.rt_btn svg { width: 16px; height: 16px; }
.rt_sep {
    width: 1px; height: 18px; margin: 0 4px;
    background: var(--ux-border);
}
.rt_area {
    min-height: 130px; max-height: 320px; overflow-y: auto;
    padding: 12px 14px;
    font-size: .93rem; line-height: 1.6; color: var(--ux-text);
    outline: none;
}
.rt_area:empty::before {
    content: attr(data-placeholder);
    color: var(--ux-muted);
}
.rt_area p { margin: 0 0 8px; }
.rt_area ul, .rt_area ol { margin: 0 0 8px; padding-left: 22px; }
.rt_area a { color: var(--ux-primary); }

@media (max-width: 760px) {
    .rt_area { min-height: 96px; max-height: 200px; padding: 10px 12px; }
    .rt_btn { width: 34px; height: 34px; }
}

/* =========================================================================
   ЗАГВАРЫН НЭГДСЭН ДҮРЭМ — «Modern Healthcare Admin»
   (хамгийн сүүлд байрлана: өмнөх дүрмүүдийг дарж бичнэ)

   Цэнхэр #2563EB accent · turquoise #06B6D4 хоёрдогч · гүн navy хажуугийн
   цэс. Төлөв бүр өөрийн өнгөтэй: шар=хүлээгдэж буй, цэнхэр=хийгдэж байгаа,
   ногоон=дууссан, улаан=хэтэрсэн.
   ========================================================================= */
:root {
    --ux-secondary: #06b6d4;   /* turquoise — явцын шугам, хоёрдогч өнгө */
    --ux-accent-2: #3b82f6;    /* цайвар цэнхэр — gradient-ийн төгсгөл */
}

/* ── Хажуугийн цэс: ЦАГААН, идэвхтэй нь gradient ────────────────────────
   Гэрэл горимд цэс нь гүн navy байсан тул хуудасны бусад бүх гадаргуу цагаан
   байхад зөвхөн тэр л хар зурвас болж зогсдог байв — нэг дэлгэц дээр хоёр
   өөр сэдэв зэрэгцэнэ. Одоо цэс нь агуулгынхаа хамт цагаан, идэвхтэй мөр нь
   цэнхэр шахмалаараа ялгарна. */
html:not([data-theme="dark"]) .nova_sidebar {
    background: #ffffff !important;
    border-right-color: var(--ux-border) !important;
    box-shadow: 1px 0 3px rgba(15, 23, 42, .05) !important;
}
html:not([data-theme="dark"]) .nova_brand {
    background: #ffffff !important;
    border-bottom-color: var(--ux-border) !important;
}
html:not([data-theme="dark"]) .nova_brand_text,
html:not([data-theme="dark"]) .nova_brand a { color: var(--ux-text) !important; }
html:not([data-theme="dark"]) .nova_brand_text small { color: var(--ux-muted) !important; }
html:not([data-theme="dark"]) .nova_nav_title { color: var(--ux-muted) !important; }

html:not([data-theme="dark"]) .nova_nav_item {
    color: var(--ux-text-2) !important;
    border-left-color: transparent !important;
    border-radius: 8px !important;
}
html:not([data-theme="dark"]) .nova_nav_item:hover {
    background: var(--ux-surface) !important;
    color: var(--ux-text) !important;
}
html:not([data-theme="dark"]) .nova_nav_item.active {
    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    color: #fff !important;
    border-left-color: transparent !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}

/* Цэсний дүрс — идэвхгүй нь ч уншигдахуйц тод.
   ХАРАНХУЙ горимд цайвар зураастай; ЦАГААН цэс дээр тэр нь бараг үл
   үзэгдэх тул гэрэл горимд бараан зураас хэрэглэнэ. */
html[data-theme="dark"] .nova_sidebar .duo_icon [stroke] { stroke: #cbd5e1; }
html[data-theme="dark"] .nova_sidebar .duo_icon [fill]:not([fill="none"]) { fill: #1e3a5f; }
html[data-theme="dark"] .nova_sidebar .nova_nav_item:hover .duo_icon [stroke] { stroke: #f1f5f9; }
html[data-theme="dark"] .nova_sidebar .nova_nav_item:hover .duo_icon [fill]:not([fill="none"]) { fill: #24476f; }

html:not([data-theme="dark"]) .nova_sidebar .duo_icon [stroke] { stroke: #64748b; }
html:not([data-theme="dark"]) .nova_sidebar .duo_icon [fill]:not([fill="none"]) { fill: #dbeafe; }
html:not([data-theme="dark"]) .nova_sidebar .nova_nav_item:hover .duo_icon [stroke] { stroke: #1e293b; }
html:not([data-theme="dark"]) .nova_sidebar .nova_nav_item:hover .duo_icon [fill]:not([fill="none"]) { fill: #bfdbfe; }

/* Идэвхтэй мөр нь хоёр горимд ч цэнхэр шахмал тул дүрс нь цагаан. */
.nova_sidebar .nova_nav_item.active .duo_icon [stroke] { stroke: #ffffff; }
.nova_sidebar .nova_nav_item.active .duo_icon [fill]:not([fill="none"]) { fill: rgba(255, 255, 255, .3); }
.nova_sidebar .nova_logo {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important; color: #fff !important;
}

html:not([data-theme="dark"]) .nova_sidebar_foot { border-top-color: var(--ux-border) !important; }
html:not([data-theme="dark"]) .sb_logout {
    background: var(--ux-card); border-color: var(--ux-border-strong); color: var(--ux-text-2);
}
html:not([data-theme="dark"]) .sb_logout:hover {
    background: #fee2e2; border-color: #fca5a5; color: #991b1b;
}

/* ── Дээд мөр ──────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .nova_topbar {
    background: #ffffff !important;
    backdrop-filter: none;
    border-bottom: 1px solid var(--ux-border-strong) !important;
    /* Толгойг доод агуулгаас тусгаарлаж, наалдсан үедээ «дээр хөвж буй» мэт
       харагдуулна — өмнө нь box-shadow: none тул цагаан дэвсгэртэй нийлдэг байв. */
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06) !important;
}
html:not([data-theme="dark"]) .gsearch input {
    background: #f8fafc !important; border-color: var(--ux-text-2) !important;
}

/* ── Үндсэн товч — gradient + зөөлөн туяа ──────────────────────────────── */
.__btn.__primary, .hf_apply, .sub_upload_send, .mn_fab {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .25) !important;
}
.__btn.__primary:hover, .hf_apply:hover, .sub_upload_send:hover, .mn_fab:hover {
    background: #1d4ed8 !important;
}

/* ── Төлвийн табууд ────────────────────────────────────────────────────────
   Эдгээр нь одоо доогуураа зураастай таб биш, бүтэн хүрээтэй «шахмал» болсон
   тул хуучин доод шугам (.status_tabs border-bottom) болон түүн рүү наалдуулж
   байсан margin-bottom: -1px-ийг цуцална. Тэдгээр нь табын доод ирмэгийг
   таслаад, хайрцаг нь битүү бус, нэг тал нь дутуу мэт харагдуулж байв. */
.status_tabs {
    border-bottom: none !important;
    gap: 8px !important;
    row-gap: 8px;
    padding-bottom: 2px;
}
.status_tabs .status_tab {
    border: 1px solid var(--ux-border) !important;
    border-radius: 10px !important;
    margin-bottom: 0 !important;
    background: var(--ux-card) !important; color: var(--ux-muted) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.status_tabs .status_tab .st_badge {
    background: var(--ux-border) !important; color: var(--ux-text-2) !important;
}
.status_tabs .status_tab:hover {
    background: #f8fafc !important; color: var(--ux-text) !important;
    border-color: var(--ux-text-2) !important;
}
.status_tabs .status_tab.is_active {
    background: #dbeafe !important; border-color: #93c5fd !important; color: #1d4ed8 !important;
}
.status_tabs .status_tab.is_active .st_badge { background: #2563eb !important; color: #fff !important; }
html[data-theme="dark"] .status_tabs .status_tab {
    border-color: var(--ux-border) !important; box-shadow: none;
}

/* ── Хүснэгт ───────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .nova_list_table thead th {
    /* Толгойн мөрийг картын биеэс тодорхой ялгана. Өмнө нь цагаан→#f8fafc
       нялх градиент байсан тул толгой цагаан карт дээр бараг үл харагддаг
       байв — dark mode-д толгой нь --ux-surface-ээр тод ялгардаг шиг. */
    background: var(--ux-surface) !important;
    border-bottom: 1px solid var(--ux-border-strong) !important;
}
html:not([data-theme="dark"]) .nova_list_table tbody tr:hover > td { background: #eff6ff; }
html:not([data-theme="dark"]) .task_table tbody.task_item.open .task_row > td { background: #dbeafe; }

/* ── Төлвийн badge ─────────────────────────────────────────────────────── */
.nova_badge.is_blue,  .task_table .nova_badge.is_blue,  .nova_list_table .nova_badge.is_blue {
    background: #dbeafe !important; color: #2563eb !important; border-color: transparent !important;
}
.nova_badge.is_green, .task_table .nova_badge.is_green, .nova_list_table .nova_badge.is_green {
    background: #dcfce7 !important; color: #15803d !important; border-color: transparent !important;
}
.nova_badge.is_yellow, .task_table .nova_badge.is_yellow, .nova_list_table .nova_badge.is_yellow,
.nova_badge.is_gray,   .task_table .nova_badge.is_gray,   .nova_list_table .nova_badge.is_gray {
    background: #fef3c7 !important; color: #b45309 !important; border-color: transparent !important;
}
.nova_badge.is_red,   .task_table .nova_badge.is_red,   .nova_list_table .nova_badge.is_red {
    background: #fee2e2 !important; color: #b91c1c !important; border-color: transparent !important;
}

/* ── Карт — зөөлөн өндөр сүүдэр ────────────────────────────────────────── */
html:not([data-theme="dark"]) .nova_table_card,
html:not([data-theme="dark"]) .od_card,
html:not([data-theme="dark"]) .co_table_card,
html:not([data-theme="dark"]) .app_page_header,
html:not([data-theme="dark"]) .dashboard_card {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}
html:not([data-theme="dark"]) .dashboard_card,
html:not([data-theme="dark"]) .od_member.is_link { transition: transform .15s, box-shadow .15s; }
html:not([data-theme="dark"]) .dashboard_card:hover,
html:not([data-theme="dark"]) .od_member.is_link:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .1) !important;
}

/* ── Дугуй дүрсний хүрээ (хуудасны толгой, картын дүрс) ────────────────── */
html:not([data-theme="dark"]) .app_page_ic,
html:not([data-theme="dark"]) .od_card_ic,
html:not([data-theme="dark"]) .dc_ic {
    background: #eff6ff !important; color: #2563eb !important;
}

/* ── Явцын шугам — цэнхрээс turquoise руу ──────────────────────────────── */
.ux_prog, .ux_prog_track, .od_bar, .od_prog_bar, .oti_bar, .table_progress, .task_bar {
    background: #e2e8f0 !important;
}
.ux_prog::after, .od_bar > span, .od_prog_bar > span, .oti_bar > span, .od_progress > span {
    background: linear-gradient(90deg, #2563eb, #06b6d4) !important;
}

/* ── Дүрс ──────────────────────────────────────────────────────────────── */
.nlt_action, .theme_toggle, .notification_button { color: var(--ux-icon); }
.nlt_action:hover { color: var(--ux-primary); }

/* =========================================================================
   ХАЖУУГИЙН ЦЭС · ДЭЭД МӨР — v2
   (энэ хэсэг файлын хамгийн сүүлд: дээрх бүх дүрмийг дарж бичнэ)

   Цэсний мөр 48px өндөр, 16px дотоод зайтай, идэвхтэй нь gradient дэвсгэр
   дээр 4px цэнхэр зүүн зураастай. Дүрснүүд Lucide маягийн нэг зураастай
   болсон тул эцгийнхээ өнгийг шууд авна (.lu_icon).
   ========================================================================= */

/* ── 1. Лого хэсэг ─────────────────────────────────────────────────────── */
.nova_brand a { gap: 10px !important; width: 100%; }
.nova_logo {
    width: 38px !important; height: 38px !important;
    border-radius: 11px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .35) !important;
}
.nova_brand_text { font-size: 1rem !important; letter-spacing: .01em; }
/* Хувилбарын шошго — логоны мөрийн баруун үзүүрт. */
.nova_ver {
    margin-left: auto; flex: none;
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    color: var(--ux-muted);
    background: rgba(148, 163, 184, .14);
    border: 1px solid rgba(148, 163, 184, .24);
    padding: 2px 7px; border-radius: 999px;
}

/* ── 2. Бүлгийн гарчиг ─────────────────────────────────────────────────── */
.nova_sidebar .nova_nav_title {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    color: #64748b !important;
    padding: 0 20px !important;
    margin: 18px 0 8px !important;
    display: block;
}
.nova_sidebar .nova_nav_group:first-child .nova_nav_title { margin-top: 14px !important; }

/* ── 3. Цэсний мөр ─────────────────────────────────────────────────────── */
.nova_sidebar .nova_nav_item {
    min-height: 48px !important;
    padding: 0 16px !important;
    margin: 3px 12px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    border-left: 4px solid transparent !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ux-muted) !important;
    transition: background .15s, color .15s, border-color .15s;
}
.nova_sidebar .nova_nav_item:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}
.nova_sidebar .nova_nav_item.active {
    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    /* Зүүн 4px зураас: gradient-ийн эхлэл нь #2563EB тул #3B82F6 зураас
       түүн дээр бараг мэдэгдэхгүй — нэг шат цайвар өнгө авав. */
    border-left-color: #93c5fd !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .35) !important;
}
/* Харанхуй горимд ч ижил байдал — `html[data-theme="dark"] .nova_nav_item…`
   дүрэм нь атрибутын сонгуураараа илүү жинтэй тул тусад нь давтав. */
html[data-theme="dark"] .nova_sidebar .nova_nav_item { color: var(--ux-muted) !important; }
html[data-theme="dark"] .nova_sidebar .nova_nav_item:hover {
    background: #1e293b !important; color: #ffffff !important;
}
html[data-theme="dark"] .nova_sidebar .nova_nav_item.active {
    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    border-left-color: #93c5fd !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .nova_sidebar .nova_nav_item.active .nn_icon { color: #ffffff !important; }

/* Lucide дүрс — өнгө нь мөрийнхөө өнгийг дагана. Өмнө нь .nn_icon-д тусад нь
   `color: var(--ux-primary)` тавьдаг байсан тул идэвхтэй мөрийн цэнхэр дэвсгэр
   дээр дүрс нь мөн цэнхэр болж, харагдахаа больсон байв. */
.nova_sidebar .nova_nav_item .nn_icon,
.nova_sidebar .nova_nav_item:hover .nn_icon { color: inherit !important; }
/* Идэвхтэй мөрийн дүрс — өнгийг ЯГ зааж өгнө (`inherit` нь дээрх хуучин
   `.nn_icon { color: var(--ux-primary) }` дүрмүүдээс мултарч чадахгүй байв). */
.nova_sidebar .nova_nav_item.active .nn_icon,
.nova_sidebar .nova_nav_item.active .nn_icon .lu_icon,
.nova_sidebar .nova_nav_item.active .lu_icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
    opacity: 1 !important;
}
.nn_icon { width: 20px !important; height: 20px !important; flex: none; }
.nova_sidebar .lu_icon { width: 20px; height: 20px; stroke-width: 1.9; }
.nova_sidebar .nova_nav_item.active .lu_icon { stroke-width: 2.1; }
.sb_logout .lu_icon { width: 18px; height: 18px; }

/* ── 4. Хураасан горим (▶ товч) ────────────────────────────────────────── */
html.sidebar-collapsed .nova_sidebar .nova_nav_item {
    padding: 0 !important;
    margin: 4px 10px !important;
    justify-content: center;
    gap: 0 !important;
    font-size: 0 !important;
    border-left-width: 0 !important;
    border-radius: 12px !important;
}
html.sidebar-collapsed .nova_ver { display: none !important; }
html.sidebar-collapsed .nova_sidebar .nova_nav_title { display: none !important; }
html.sidebar-collapsed .nova_collapse_btn .lu_icon { transform: rotate(180deg); }

/* ── 4b. Хураасан рэйлийн ЖИНХЭНЭ хэлбэр ───────────────────────────────────
   Өмнө нь мөрүүд өндөргүй (`padding: 0`, тогтсон өндөргүй) байсан тул
   идэвхтэй мөрний дэвсгэр нь дүрснээсээ хамаагүй өргөн, намхан ЗУРВАС болж,
   дүрснүүд нь голоороо биш, тэгш бус зайтай харагддаг байв. Бүлгийн гарчиг
   нуугдахдаа ямар ч тэмдэггүй хоосон зай үлдээж, ангилал нь ойлгогдохгүй
   болдог байсныг нарийн зураасаар сольсон. */
html.sidebar-collapsed .nova_sidebar .nova_nav_item {
    width: 44px;
    height: 44px;
    margin: 3px auto !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px !important;
}
html.sidebar-collapsed .nova_sidebar .nova_nav_item .nn_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Идэвхтэй нь дүүрэн дөрвөлжин хавтан — цайвар/харанхуй хоёуланд ижил. */
html.sidebar-collapsed .nova_sidebar .nova_nav_item.active,
html[data-theme="dark"].sidebar-collapsed .nova_sidebar .nova_nav_item.active {
    background: var(--ux-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .32);
}
html.sidebar-collapsed .nova_sidebar .nova_nav_item.active .lu_icon,
html.sidebar-collapsed .nova_sidebar .nova_nav_item.active svg { color: #fff !important; }

/* Бүлэг хоорондын зааг — гарчиг нуугдсаны оронд. */
html.sidebar-collapsed .nova_sidebar .nova_nav_group + .nova_nav_group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ux-border);
}

/* Дүрсний нэр — hover-д баруун талд гарах жижиг тэмдэглэгээ. */
html.sidebar-collapsed .nova_nav_item:hover::after {
    left: calc(100% + 10px);
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12.5px;
}

/* ── 5. Дээд мөрийн дүрсэн товчнууд — 40×40 нэг хэмжээ ─────────────────── */
.nova_topbar_right { gap: 8px !important; }
.theme_toggle,
.nova_topbar .notification_button,
.nova_collapse_btn {
    width: 40px !important; height: 40px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    flex: none;
    border-radius: 10px !important;
    border: 1px solid var(--ux-border) !important;
    background: var(--ux-card) !important;
    color: #475569 !important;
    cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.theme_toggle:hover,
.nova_topbar .notification_button:hover,
.nova_collapse_btn:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}
.theme_toggle .lu_icon, .notification_button .lu_icon,
.nova_collapse_btn .lu_icon { width: 18px; height: 18px; }
html[data-theme="dark"] .theme_toggle { color: #fbbf24 !important; }
html[data-theme="dark"] .theme_toggle:hover,
html[data-theme="dark"] .nova_topbar .notification_button:hover,
html[data-theme="dark"] .nova_collapse_btn:hover {
    background: rgba(79, 143, 247, .18) !important;
    border-color: #4d94e8 !important;
}

/* ── 6. Мэдэгдлийн тоолуур — томруулав ─────────────────────────────────── */
.nova_topbar .notification_badge {
    min-width: 20px !important; height: 20px !important;
    top: -5px !important; right: -5px !important;
    padding: 0 5px !important;
    font-size: 12px !important; line-height: 17px !important;
    background: #ef4444 !important;
    border: 2px solid var(--ux-card) !important;
}

/* ── 7. Хайлт — 44px өндөр, 12px радиус ────────────────────────────────── */
.gsearch { max-width: 480px; }
.gsearch .gs_ic { left: 14px; }
.gsearch .gs_ic svg { width: 18px !important; height: 18px !important; }
#gsInput {
    height: 44px;
    padding: 0 44px 0 42px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    font-size: .9rem !important;
}
#gsInput:focus {
    border-color: #2563eb !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
}
html[data-theme="dark"] #gsInput {
    background: var(--ux-surface) !important; border-color: var(--ux-border) !important;
}

/* ── 8. Хэрэглэгчийн блок — дугуй avatar + нэр/рол ─────────────────────── */
.nova_user { padding: 4px 12px 4px 4px !important; border-radius: 12px !important; gap: 10px !important; }
.nova_user_avatar {
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #fff !important; font-size: 13px !important; font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .28) !important;
}
.nova_user_name {
    font-size: 13px !important; font-weight: 700 !important;
    max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Хураасан цэсний тайлбар (tooltip) — .nova_nav дээрх `overflow-y: auto` нь
   мөрнөөс гадагш гарсан тайлбарыг таслаад, зөвхөн эхний үсэг нь харагддаг
   байв. Дэлгэц хангалттай өндөр үед л гүйлгэлтийг цуцална. */
@media (min-height: 620px) {
    html.sidebar-collapsed .nova_nav { overflow: visible !important; }
}

/* Хураах товч нь зөвхөн ширээн дээр. (Дээрх 40×40 дүрэм нь `!important`-той
   тул файлын эхэн дэх media query-г дарж бичдэг — иймд энд давтав.) */
@media (max-width: 1024px) {
    .nova_collapse_btn { display: none !important; }
}

/* =========================================================================
   ХАРАНХУЙ ГОРИМ — v2 (файлын хамгийн сүүлд: өмнөх бүх дүрмийг дарж бичнэ)

   Өнгө бүр `html[data-theme="dark"]`-д тодорхойлсон token-оос ирнэ. Шинэ
   дүрэм бичихдээ өнгийг гараар бус, token-оор: var(--ux-card) гэх мэт.
   ========================================================================= */

/* ── Суурь ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .nova_shell,
html[data-theme="dark"] .nova_content { background: var(--ux-bg) !important; color: var(--ux-text); }
/* Баруун дээд буланд бараг мэдэгдэхгүй цэнхэр туяа — хавтгай байдлыг арилгана. */
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 80% 0%, rgba(79, 143, 247, .06), transparent 32%),
        var(--ux-bg) !important;
    color: var(--ux-text);
}
html[data-theme="dark"] ::selection { background: rgba(79, 143, 247, .35); color: #fff; }

/* ── Хажуугийн цэс ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .nova_sidebar {
    background: var(--ux-sidebar) !important;
    border-right-color: var(--ux-border) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .nova_brand {
    background: var(--ux-sidebar) !important;
    border-bottom-color: var(--ux-border) !important;
}
html[data-theme="dark"] .nova_sidebar .nova_nav_item { color: var(--ux-muted) !important; }
html[data-theme="dark"] .nova_sidebar .nova_nav_item:hover {
    background: #1b2a40 !important; color: #e2e8f0 !important;
}
html[data-theme="dark"] .nova_sidebar .nova_nav_item.active {
    background: linear-gradient(135deg, var(--ux-primary-dark), var(--ux-primary)) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(79, 143, 247, .28) !important;
}
/* Үндсэн товч — харанхуйд зөөлөн цэнхэр (цайвар горимын gradient хэт хатуу). */
html[data-theme="dark"] .__btn.__primary,
html[data-theme="dark"] .hf_apply,
html[data-theme="dark"] .sub_upload_send,
html[data-theme="dark"] .co_add_btn,
html[data-theme="dark"] .mn_fab {
    background: linear-gradient(135deg, var(--ux-primary-dark), var(--ux-primary)) !important;
    box-shadow: 0 6px 18px rgba(79, 143, 247, .25) !important;
}
html[data-theme="dark"] .__btn.__primary:hover,
html[data-theme="dark"] .hf_apply:hover,
html[data-theme="dark"] .co_add_btn:hover { background: var(--ux-primary-dark) !important; }
html[data-theme="dark"] .nova_sidebar_foot { border-top-color: var(--ux-border) !important; }
html[data-theme="dark"] .sb_logout {
    background: var(--ux-card) !important; border-color: var(--ux-border) !important; color: var(--ux-muted) !important;
}
html[data-theme="dark"] .sb_logout:hover {
    background: var(--ux-danger-soft) !important; border-color: var(--ux-danger) !important; color: var(--ux-danger) !important;
}

/* ── Дээд мөр ба хайлт ─────────────────────────────────────────────────── */
html[data-theme="dark"] .nova_topbar {
    background: rgba(19, 29, 44, .92) !important;
    border-bottom-color: var(--ux-border) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] #gsInput,
html[data-theme="dark"] .nova_search input {
    background: var(--ux-input) !important; border-color: var(--ux-border) !important; color: var(--ux-text) !important;
}
html[data-theme="dark"] #gsInput::placeholder { color: var(--ux-icon) !important; }
html[data-theme="dark"] #gsInput:focus {
    border-color: var(--ux-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 143, 247, .14) !important;
}
html[data-theme="dark"] .theme_toggle,
html[data-theme="dark"] .nova_topbar .notification_button,
html[data-theme="dark"] .nova_collapse_btn {
    background: var(--ux-card) !important; border-color: var(--ux-border) !important;
}
html[data-theme="dark"] .nova_topbar .notification_badge { border-color: var(--ux-bg) !important; }

/* ── Карт ба хуудасны толгой ───────────────────────────────────────────── */
html[data-theme="dark"] .nova_table_card,
html[data-theme="dark"] .co_table_card,
html[data-theme="dark"] .dashboard_card,
html[data-theme="dark"] .dashboard_panel,
html[data-theme="dark"] .od_card,
html[data-theme="dark"] .profile_card,
html[data-theme="dark"] .rx_card,
html[data-theme="dark"] .dch_card {
    background: var(--ux-card) !important;
    border-color: var(--ux-border) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18) !important;
}
html[data-theme="dark"] .app_page_header {
    background: linear-gradient(135deg, #1d2839, #18202f) !important;
    border-color: var(--ux-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25) !important;
}
html[data-theme="dark"] .app_page_title_text h1 { color: var(--ux-text) !important; }
html[data-theme="dark"] .app_page_header .gov_bc_current { color: var(--ux-primary-light) !important; }

/* ── Төлвийн табууд ────────────────────────────────────────────────────── */
html[data-theme="dark"] .status_tabs .status_tab {
    background: var(--ux-card) !important; border-color: var(--ux-border) !important;
    color: var(--ux-muted) !important; box-shadow: none;
}
html[data-theme="dark"] .status_tabs .status_tab:hover {
    background: var(--ux-surface) !important; color: #fff !important; border-color: var(--ux-border-strong) !important;
}
html[data-theme="dark"] .status_tabs .status_tab .st_badge {
    background: var(--ux-surface) !important; color: var(--ux-muted) !important;
}
html[data-theme="dark"] .status_tabs .status_tab.is_overdue_tab { color: var(--ux-danger) !important; }
/* Идэвхтэй таб — харанхуй дэвсгэр дээр цайвар шахмал (хамгийн тод ялгарна).
   Үүнийг тусад нь бичихгүй бол дээрх бараан суурь нь идэвхтэйг дардаг. */
html[data-theme="dark"] .status_tabs .status_tab.is_active {
    background: #dbeafe !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}
html[data-theme="dark"] .status_tabs .status_tab.is_active .st_badge {
    background: var(--ux-primary-dark) !important; color: #fff !important;
}
html[data-theme="dark"] .status_tabs .status_tab.is_overdue_tab.is_active {
    background: var(--ux-danger-soft) !important;
    border-color: rgba(251, 113, 133, .4) !important;
    color: var(--ux-danger) !important;
}
html[data-theme="dark"] .status_tabs .status_tab.is_overdue_tab.is_active .st_badge {
    background: var(--ux-danger) !important; color: #fff !important;
}

/* ── Хүснэгт ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] .nova_list_table thead th,
html[data-theme="dark"] .co_table thead th,
html[data-theme="dark"] .task_table thead th,
html[data-theme="dark"] .dashboard_table thead th,
html[data-theme="dark"] .rx_matrix thead th {
    background: var(--ux-surface) !important;
    color: var(--ux-muted) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom-color: var(--ux-border) !important;
}
html[data-theme="dark"] .nova_list_table tbody td,
html[data-theme="dark"] .co_table tbody td,
html[data-theme="dark"] .task_table tbody td,
html[data-theme="dark"] .dashboard_table tbody td {
    background: var(--ux-card);
    color: var(--ux-text-2);
    border-bottom-color: var(--ux-border-soft) !important;
}
html[data-theme="dark"] .nova_list_table tbody tr:hover > td,
html[data-theme="dark"] .co_table tbody tr:hover > td,
html[data-theme="dark"] .task_table tbody tr:hover > td,
html[data-theme="dark"] .dashboard_table tbody tr:hover > td { background: var(--ux-card-hover) !important; }
html[data-theme="dark"] .task_table tbody.task_item.open .task_row > td,
html[data-theme="dark"] .co_row.is_open > td,
html[data-theme="dark"] .u_row.is_open > td { background: var(--ux-card-hover) !important; }
html[data-theme="dark"] .task_name_txt,
html[data-theme="dark"] .co_name_txt { color: #e2e8f0 !important; }

/* ── Төлвийн шошго — тунгалаг өнгө, гэрэлтсэн цэг ──────────────────────── */
html[data-theme="dark"] .nova_badge.is_blue {
    background: var(--ux-info-soft) !important; color: var(--ux-primary-light) !important;
    border: 1px solid rgba(79, 143, 247, .34) !important;
}
html[data-theme="dark"] .nova_badge.is_green {
    background: var(--ux-success-soft) !important; color: var(--ux-success) !important;
    border: 1px solid rgba(52, 211, 153, .34) !important;
}
html[data-theme="dark"] .nova_badge.is_yellow,
html[data-theme="dark"] .nova_badge.is_gray {
    background: var(--ux-warning-soft) !important; color: var(--ux-warning) !important;
    border: 1px solid rgba(251, 191, 36, .34) !important;
}
html[data-theme="dark"] .nova_badge.is_red {
    background: var(--ux-danger-soft) !important; color: var(--ux-danger) !important;
    border: 1px solid rgba(251, 113, 133, .34) !important;
}
/* Жагсаалтын доторх badge-д илүү өндөр жинтэй дүрэм байдаг тул давтав. */
html[data-theme="dark"] .task_table .nova_badge.is_blue,
html[data-theme="dark"] .nova_list_table .nova_badge.is_blue {
    background: var(--ux-info-soft) !important;
    color: var(--ux-primary-light) !important;
    border-color: rgba(79, 143, 247, .34) !important;
}
html[data-theme="dark"] .task_table .nova_badge.is_green,
html[data-theme="dark"] .nova_list_table .nova_badge.is_green {
    background: var(--ux-success-soft) !important;
    color: var(--ux-success) !important;
    border-color: rgba(52, 211, 153, .34) !important;
}
html[data-theme="dark"] .nova_badge.is_blue::before { box-shadow: 0 0 7px rgba(79, 143, 247, .8); }
html[data-theme="dark"] .nova_badge.is_green::before { box-shadow: 0 0 7px rgba(52, 211, 153, .8); }

/* ── Шүүлтийн товч ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .hf_toggle {
    background: var(--ux-card) !important; border-color: var(--ux-border) !important; color: var(--ux-text-2) !important;
}
html[data-theme="dark"] .hf_toggle:hover {
    background: var(--ux-surface) !important; border-color: #30425a !important; color: #fff !important;
}

/* ── Цонх ба задардаг цэс ──────────────────────────────────────────────── */
html[data-theme="dark"] .modal-content {
    background: linear-gradient(145deg, #1c2637, #151f2e) !important;
    border: 1px solid var(--ux-border) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .5) !important;
}
html[data-theme="dark"] .nova_user_menu,
html[data-theme="dark"] .notification_panel,
html[data-theme="dark"] .gs_panel,
html[data-theme="dark"] .rx_menu_pop {
    background: var(--ux-card) !important;
    border-color: var(--ux-border) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .35) !important;
}
html[data-theme="dark"] .num_item,
html[data-theme="dark"] .gs_row,
html[data-theme="dark"] .rx_menu_item { color: var(--ux-text-2) !important; }
html[data-theme="dark"] .num_item:hover,
html[data-theme="dark"] .gs_row:hover,
html[data-theme="dark"] .gs_row.is_cur,
html[data-theme="dark"] .rx_menu_item:hover { background: var(--ux-surface) !important; color: #fff !important; }
html[data-theme="dark"] .notification_item:hover { background: var(--ux-surface) !important; }

/* ── Явцын шугам ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .ux_prog,
html[data-theme="dark"] .ux_prog_track,
html[data-theme="dark"] .od_bar,
html[data-theme="dark"] .oti_bar,
html[data-theme="dark"] .table_progress { background: #1e293b !important; }
html[data-theme="dark"] .ux_prog::after,
html[data-theme="dark"] .od_bar > span,
html[data-theme="dark"] .oti_bar > span {
    background: linear-gradient(90deg, var(--ux-primary-dark), var(--ux-primary-light)) !important;
}

/* ── Мөрийн үйлдлийн товчнууд ──────────────────────────────────────────────
   ХАРАНХУЙ ГОРИМД ТОВЧНЫ ХҮРЭЭ АЛГА БОЛДОГ БАЙВ.

   Энэ блок нь товчнуудыг дан дүрс байх үеийнх — бүгдийг `transparent
   !important` болгож, `--ux-icon` гэсэн ганц саарлаар будаж байлаа. Хожим
   товчнууд өнгөт хүрээтэй, дүүргэлттэй, нэрээ дэргэдээ бичдэг «шахмал»
   болсон ч энэ дүрэм `!important`-оороо тэр бүхнийг цуцалсаар байсан:
   харанхуйд хүрээ нь ул мөргүй арилж, дөрвүүлээ ижил саарал болж, аль нь
   юу хийхийг ялгах аргагүй болдог.

   Одоо гэрэл горимын өнгөний кодыг харанхуйд ТААРУУЛЖ давтана — хүрээ,
   дүүргэлт, өнгө гурвуулаа хэвээр. `.nlt_action` (ажлын мөрийн товч) нь
   ширээний дэлгэцэд гэрэл горимд ч хүрээгүй, дан дүрс байдаг тул энд
   хөндөхгүй — гар утасны хүрээг нь mobile.css өөрөө харанхуйд тааруулна. */
html[data-theme="dark"] .nlt_action {
    background: transparent !important; color: var(--ux-icon) !important; border-color: transparent !important;
}
html[data-theme="dark"] .co_row_actions .co_row_edit,
html[data-theme="dark"] .co_row_actions .co_row_sub,
html[data-theme="dark"] .co_row_actions .co_row_emp,
html[data-theme="dark"] .co_row_actions .co_row_tasks {   /* харандаа/нэмэх — үндсэн */
    color: #93b4fc !important; border-color: #2f4a7a !important; background: #17233c !important;
}
html[data-theme="dark"] .co_row_actions .co_row_view {    /* бамбай — тусгай эрх */
    color: #a794ff !important; border-color: #3b3169 !important; background: #221d3a !important;
}
html[data-theme="dark"] .co_row_actions .co_row_key {     /* түлхүүр — нууц үг */
    color: #fbbf24 !important; border-color: #5a4213 !important; background: #2a2109 !important;
}
html[data-theme="dark"] .co_row_actions .co_row_del {     /* сав — устгах */
    color: #f87171 !important; border-color: #5b2020 !important; background: #2a1414 !important;
}
html[data-theme="dark"] .nlt_action:hover,
html[data-theme="dark"] .co_row_edit:hover,
html[data-theme="dark"] .co_row_sub:hover,
html[data-theme="dark"] .co_row_emp:hover,
html[data-theme="dark"] .co_row_key:hover,
html[data-theme="dark"] .co_row_view:hover {
    background: var(--ux-surface) !important; color: #e2e8f0 !important;
}
html[data-theme="dark"] .co_row_del:hover {
    background: var(--ux-danger-soft) !important; color: var(--ux-danger) !important;
}

/* ── Оролтын талбарууд ─────────────────────────────────────────────────── */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .org_input,
html[data-theme="dark"] .org_select,
html[data-theme="dark"] .org_textarea,
html[data-theme="dark"] .ct_input,
html[data-theme="dark"] .ct_select {
    /* `background` ТОВЧЛОЛ БИШ, `background-color`.
       Товчлол нь `background-image`-ийг ЦУГ УСТГАДАГ тул `appearance: none`
       болгож, доошоо сум (chevron)-аа зурган дэвсгэрээр өгсөн бүх сонгогч
       харанхуй горимд СУМГҮЙ болж, энгийн бичих талбар мэт харагддаг байв
       (хэрэглэгчийн жагсаалтын «Бүх байгууллага», эрхийн хуудасны ролийн
       сонголт г.м). Зөвхөн өнгийг нь дарж бичнэ. */
    background-color: var(--ux-input) !important;
    color: var(--ux-text-2) !important;
    border-color: var(--ux-border) !important;
}
/* Харанхуйд сумны өнгө нь цайвар горимынхоос тодрох ёстой. */
html[data-theme="dark"] .u_org_filter,
html[data-theme="dark"] .rx_select,
html[data-theme="dark"] .rx_rolepick select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):hover,
html[data-theme="dark"] select:hover,
html[data-theme="dark"] textarea:hover { border-color: var(--ux-border-strong) !important; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: var(--ux-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 143, 247, .14) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--ux-icon) !important; }

/* ── Гүйлгэх зурвас ────────────────────────────────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar { width: 7px; height: 7px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--ux-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ux-border-strong); border-radius: 20px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5d78; }

/* Хуудасны өөрийн CSS-д үлдсэн хэт бараан утгууд — шинэ давхаргад тааруулав. */
html[data-theme="dark"] .co_row.co_group { background: #202b3d !important; }
html[data-theme="dark"] .co_row.co_group.is_open { background: #24334a !important; }
html[data-theme="dark"] .co_detail_inner { background: #16202f !important; }
html[data-theme="dark"] .co_emp { background: var(--ux-card) !important; border-color: var(--ux-border) !important; }
html[data-theme="dark"] .co_emp_av { background: var(--ux-surface) !important; color: var(--ux-primary-light) !important; }
html[data-theme="dark"] .co_usercount { background: rgba(79, 143, 247, .18) !important; color: var(--ux-primary-light) !important; }
html[data-theme="dark"] .co_taskcount { background: var(--ux-surface) !important; color: var(--ux-text-2) !important; }

/* =========================================================================
   НЭГДСЭН ӨНГӨНИЙ СИСТЕМ — v3
   Дэвсгэр #F8FAFC · карт #FFFFFF · үндсэн #2563EB · хоёрдогч #0EA5E9 ·
   амжилт #22C55E · сануулга #F59E0B · алдаа #EF4444 · зураас #E2E8F0 ·
   гарчиг #0F172A · текст #475569.  Хэсэг бүр өөрийн аястай: байгууллага
   нил ягаан, хэрэглэгч ногоон, эрх indigo, түүх cyan, профайл teal.
   ========================================================================= */
html:not([data-theme="dark"]) {
    /* Light mode-ийн гүнзгийрүүлсэн суурь (:root-той нийцүүлэв). Энэ selector
       нь :root-оос өндөр specificity-тэй тул давхардлыг эндээс тааруулна —
       эс бөгөөс дээрх --ux-b: #e9eef5 өөрчлөлт үл ажиллана. */
    --ux-bg: #e9eef5;
    --ux-surface: #eef2f7;
    --ux-text: #0f172a;
    --ux-text-2: #475569;
}
/* Light горимд хуудасны суурийг тодорхой цайвар болгож БАТАЛГААЖУУЛНА —
   ямар нэг тодорхойгүй дүрэм body-г бараан болгохоос сэргийлнэ. */
html:not([data-theme="dark"]) body { background: #e9eef5 !important; color: #475569; }
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) .app_page_title_text h1,
html:not([data-theme="dark"]) .co_head h1 { color: #0f172a; }

/* ── Хуудасны толгойн дүрс — хэсгийн өнгөөр ────────────────────────────── */
.app_page_ic .lu_icon { width: 22px; height: 22px; }
html:not([data-theme="dark"]) .app_page_ic.tone_blue   { background: #eff6ff !important; color: #2563eb !important; }
html:not([data-theme="dark"]) .app_page_ic.tone_purple { background: #f5f3ff !important; color: #8b5cf6 !important; }
html:not([data-theme="dark"]) .app_page_ic.tone_green  { background: #f0fdf4 !important; color: #16a34a !important; }
html:not([data-theme="dark"]) .app_page_ic.tone_indigo { background: #eef2ff !important; color: #6366f1 !important; }
html:not([data-theme="dark"]) .app_page_ic.tone_cyan   { background: #ecfeff !important; color: #0891b2 !important; }
html:not([data-theme="dark"]) .app_page_ic.tone_teal   { background: #f0fdfa !important; color: #0d9488 !important; }
html[data-theme="dark"] .app_page_ic.tone_purple { color: #a78bfa !important; }
html[data-theme="dark"] .app_page_ic.tone_green  { color: #4ade80 !important; }
html[data-theme="dark"] .app_page_ic.tone_indigo { color: #818cf8 !important; }
html[data-theme="dark"] .app_page_ic.tone_cyan   { color: #22d3ee !important; }
html[data-theme="dark"] .app_page_ic.tone_teal   { color: #2dd4bf !important; }

/* ── 2. Самбарын KPI карт — тус бүр өөрийн gradient ────────────────────── */
html:not([data-theme="dark"]) .dashboard_card {
    border: 1px solid var(--ux-border) !important;
    border-top: none !important;
    border-radius: 16px !important;
    overflow: hidden;
    position: relative;
}
/* Дээд ирмэгийн өнгөт зурвас */
html:not([data-theme="dark"]) .dashboard_card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--dc-grad, linear-gradient(90deg, #2563eb, #3b82f6));
}
.dashboard_card[data-list="total"]     { --dc-grad: linear-gradient(90deg, #2563eb, #3b82f6); --dc-soft: #eff6ff; --dc-ink: #2563eb; }
.dashboard_card[data-list="completed"] { --dc-grad: linear-gradient(90deg, #16a34a, #22c55e); --dc-soft: #f0fdf4; --dc-ink: #16a34a; }
.dashboard_card[data-list="doing"]     { --dc-grad: linear-gradient(90deg, #0891b2, #06b6d4); --dc-soft: #ecfeff; --dc-ink: #0891b2; }
.dashboard_card[data-list="overdue"]   { --dc-grad: linear-gradient(90deg, #dc2626, #ef4444); --dc-soft: #fef2f2; --dc-ink: #dc2626; }
html:not([data-theme="dark"]) .dashboard_card .dc_ic {
    background: var(--dc-soft) !important; color: var(--dc-ink) !important;
    border: none !important; border-radius: 12px !important;
}
html:not([data-theme="dark"]) .dashboard_card .dc_body p { color: var(--dc-ink) !important; }
html:not([data-theme="dark"]) .dashboard_card.is_active,
html:not([data-theme="dark"]) .dashboard_card:hover { border-color: var(--dc-ink) !important; }
html[data-theme="dark"] .dashboard_card .dc_ic { color: var(--dc-ink) !important; }

/* Хэрэглэгчийн хуудасны жижиг статистик — ижил өнгөний хэлээр (өмнө нь
   ногоовтор-teal gradient байсан нь шинэ palette-тай зөрж байв). */
html:not([data-theme="dark"]) .u_stat_ic.blue  { background: #eff6ff !important; color: #2563eb !important; }
html:not([data-theme="dark"]) .u_stat_ic.green { background: #f0fdf4 !important; color: #16a34a !important; }
html:not([data-theme="dark"]) .u_stat_ic.gray  { background: #f1f5f9 !important; color: #64748b !important; }
.u_stat_ic .lu_icon { width: 22px; height: 22px; }

/* ── 4. Ролын шошго — рол бүр өөр өнгө ─────────────────────────────────── */
.u_chip.u_role_admin { background: #dbeafe !important; color: #1d4ed8 !important; border-color: transparent !important; }
.u_chip.u_role_slate { background: #f1f5f9 !important; color: #475569 !important; border-color: transparent !important; }
.u_chip.u_role_c1    { background: #dcfce7 !important; color: #15803d !important; border-color: transparent !important; }
.u_chip.u_role_c2    { background: #ede9fe !important; color: #6d28d9 !important; border-color: transparent !important; }
.u_chip.u_role_c3    { background: #ffedd5 !important; color: #c2410c !important; border-color: transparent !important; }
.u_chip.u_role_c4    { background: #cffafe !important; color: #0e7490 !important; border-color: transparent !important; }

/* Хэрэглэгчийн жагсаалтын бүлгийн мөр (Админ · Дарга · Хэрэглэгч).
   Өнгийг token-оос авах тул гэрэл/харанхуй хоёуланд зөв харагдана. */
.u_group_row > td {
    background: var(--ux-surface) !important;
    padding: 9px 16px !important;
    border-bottom: 1px solid var(--ux-border) !important;
}
.u_group_row:hover > td { background: var(--ux-surface) !important; }
.u_group_name {
    font-size: 12px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ux-muted);
}
.u_group_count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; margin-left: 8px; padding: 0 6px;
    border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1;
    background: var(--ux-primary-soft); color: var(--ux-primary);
}

/* ── 5. Эрхийн матриц — сонголт бүр өнгөт шошго ────────────────────────── */
.rx_select {
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-align: center;
    border: 1px solid transparent !important;
    padding: 5px 10px !important;
    cursor: pointer;
}
.rx_select:focus { box-shadow: var(--ux-ring) !important; outline: none !important; }
/* Өнгийг нь access.css өөрөө хариуцна (хуудасны дээд талын тайлбартай яг
   тааруулсан: үгүй=саарал · өөрийн=цэнхэр · байгууллагын=шар · бүгд=ногоон).
   Энд зөвхөн хэлбэрийг нь шошго болгов. */

/* ── 6. Профайл — gradient толгой ──────────────────────────────────────── */
/* ХЭМЖЭЭ, ХЭЛБЭР нь горимоос ХАМААРАХГҮЙ. Өмнө нь энэ бүхэн бүхэлдээ
   `html:not([data-theme="dark"])` дотор байсан тул харанхуй горимд аватар
   огт өөр (жижиг, өөр булантай) болж, профайлын толгой хоёр горимд өөр өөр
   загвартай харагдаж байв. Гар утсанд mobile.css эдгээрийг өөрөө дарж, 52px
   болгодог — тэр нь одоо хоёр горимд адилхан ажиллана. */
.pf_hero { border-radius: 16px !important; overflow: hidden; }
.pf_avatar {
    width: 104px !important; height: 104px !important;
    border-radius: 24px !important;
    font-size: 2.4rem !important; font-weight: 800 !important;
    border-width: 4px !important; border-style: solid !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .18) !important;
}
/* ӨНГӨ нь горим тус бүрээр. */
html:not([data-theme="dark"]) .pf_hero_bg {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}
html:not([data-theme="dark"]) .pf_avatar {
    background: #ffffff !important; color: #2563eb !important; border-color: #ffffff !important;
}
html[data-theme="dark"] .pf_avatar {
    background: #16243a !important; color: #7fb8f2 !important; border-color: #16243a !important;
}

/* ── 8. Modal — цэнхэр толгой, gradient «Хадгалах» ─────────────────────── */
html:not([data-theme="dark"]) .modal-content { border-radius: 16px !important; overflow: hidden; border: none !important; }
html:not([data-theme="dark"]) .modal-header {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border-bottom: none !important;
    color: #fff !important;
}
html:not([data-theme="dark"]) .modal-header .modal-title,
html:not([data-theme="dark"]) .modal-header h5,
html:not([data-theme="dark"]) .modal-header .ct_head_title { color: #fff !important; }
html:not([data-theme="dark"]) .modal-header .btn-close,
html:not([data-theme="dark"]) .modal-header .close,
html:not([data-theme="dark"]) .modal-header .ct_close { color: #fff !important; filter: brightness(0) invert(1); opacity: .85; }
html:not([data-theme="dark"]) .modal-header .ct_close:hover { opacity: 1; }

/* ── 9. Форм — 44px өндөр, 12px радиус ─────────────────────────────────── */
.org_input, .org_select, .org_textarea,
.ct_input, .ct_select, .ct_textarea,
.pf_input, .pf_select,
.hf_input, .hf_select {
    min-height: 44px;
    border-radius: 12px !important;
    border: 1px solid var(--ux-border) !important;
    padding-left: 14px !important; padding-right: 14px !important;
    font-size: .92rem;
    transition: border-color .15s, box-shadow .15s;
}
.org_textarea, .ct_textarea { min-height: 88px; padding-top: 10px !important; }
.org_input:focus, .org_select:focus, .org_textarea:focus,
.ct_input:focus, .ct_select:focus, .ct_textarea:focus,
.pf_input:focus, .pf_select:focus,
.hf_input:focus, .hf_select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
    outline: none !important;
}
html:not([data-theme="dark"]) .org_label, html:not([data-theme="dark"]) .ct_label,
html:not([data-theme="dark"]) .pf_label, html:not([data-theme="dark"]) .hf_label {
    color: #334155 !important; font-weight: 600;
}
html:not([data-theme="dark"]) input::placeholder,
html:not([data-theme="dark"]) textarea::placeholder { color: var(--ux-muted) !important; }

/* ── 10. Хүснэгт — толгой #F8FAFC, hover #EFF6FF, сонгосон #DBEAFE ─────── */
html:not([data-theme="dark"]) .nova_list_table thead th,
html:not([data-theme="dark"]) .co_table thead th,
html:not([data-theme="dark"]) .rx_matrix thead th,
html:not([data-theme="dark"]) .dashboard_table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
}
html:not([data-theme="dark"]) .co_table tbody tr:hover > td,
html:not([data-theme="dark"]) .dashboard_table tbody tr:hover > td { background: #eff6ff; }
html:not([data-theme="dark"]) .co_row.is_open > td,
html:not([data-theme="dark"]) .u_row.is_open > td { background: #dbeafe !important; }

/* ── 11. Товч ──────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .__btn.__ghost,
html:not([data-theme="dark"]) .__btn.__secondary,
html:not([data-theme="dark"]) .hf_clear {
    background: #ffffff !important; color: #475569 !important;
    border: 1px solid var(--ux-border) !important;
}
html:not([data-theme="dark"]) .__btn.__ghost:hover,
html:not([data-theme="dark"]) .__btn.__secondary:hover,
html:not([data-theme="dark"]) .hf_clear:hover { background: #f8fafc !important; border-color: var(--ux-text-2) !important; }
html:not([data-theme="dark"]) .__btn.__danger,
html:not([data-theme="dark"]) .co_row_del:hover,
html:not([data-theme="dark"]) .u_del:hover { color: #ef4444 !important; }
html:not([data-theme="dark"]) .__btn.__danger {
    background: #ef4444 !important; color: #fff !important; border-color: transparent !important;
}
html:not([data-theme="dark"]) .__btn.__danger:hover { background: #dc2626 !important; }
html:not([data-theme="dark"]) .__btn.__success {
    background: #22c55e !important; color: #fff !important; border-color: transparent !important;
}
html:not([data-theme="dark"]) .__btn.__success:hover { background: #16a34a !important; }

/* ── 12. Хоосон төлөв — дүрс дугуй хүрээнд ─────────────────────────────── */
.ux_empty svg {
    width: 28px !important; height: 28px !important;
    color: #2563eb !important; stroke-width: 1.8 !important;
    box-sizing: content-box;
    padding: 14px; border-radius: 50%;
    background: #eff6ff;
}
html[data-theme="dark"] .ux_empty svg { background: rgba(79, 143, 247, .16); }
.ux_empty h3 { font-size: 1.02rem !important; }

/* ── 14. Мэдэгдлийн toast — 4 өнгө ─────────────────────────────────────── */
.ux_toast { border-left-width: 4px !important; border-radius: 12px !important; }
.ux_toast.is_success { border-left-color: #22c55e !important; }
.ux_toast.is_info    { border-left-color: #2563eb !important; }
.ux_toast.is_warning { border-left-color: #f59e0b !important; }
.ux_toast.is_error   { border-left-color: #ef4444 !important; }
.ux_toast.is_warning .ux_toast_ic { color: #f59e0b; }

/* =========================================================================
   МӨРНИЙ ҮЙЛДЛИЙН ТОВЧ — ВЕБ, ГАР УТАС ХОЁРТ НЭГ ХЭЛБЭР

   Байгууллага, хэрэглэгчийн жагсаалтын товчнууд ширээний дэлгэцэд 26px,
   хүрээгүй, бараг цагаан саарал (#cbd0d8) байсан тул товч мэт харагддаггүй,
   гар утсанд харин хүрээтэй 36px хайрцаг болсон — нэг систем дотор хоёр өөр
   харагдац үүсч байв. Энд ГАНЦ тодорхойлолт болгож нэгтгэв.

   Сонгогчийн жин: `.co_row_actions .x` (0,2,0) нь organizations/index.blade
   доторх `<style>`-ийн `.co_row_sub` (0,1,0)-оос ӨНДӨР тул, тэр нь HTML-д
   хожуу ачаалагдсан ч энэ дүрэм ялна.
   ========================================================================= */
.co_row_actions {
    display: inline-flex; align-items: center; gap: 5px;
}
.co_row_actions .co_row_sub,
.co_row_actions .co_row_emp,
.co_row_actions .co_row_view,
.co_row_actions .co_row_edit,
.co_row_actions .co_row_key,
.co_row_actions .co_row_del,
.co_row_actions .co_row_tasks {
    width: 32px; height: 32px; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ux-border); border-radius: 9px;
    background: var(--ux-card); color: var(--ux-text-2);
    cursor: pointer; transition: border-color .14s, background .14s, color .14s;
}
.co_row_actions .co_row_sub svg,
.co_row_actions .co_row_emp svg,
.co_row_actions .co_row_view svg,
.co_row_actions .co_row_edit svg,
.co_row_actions .co_row_key svg,
.co_row_actions .co_row_del svg,
.co_row_actions .co_row_tasks svg { width: 18px; height: 18px; stroke-width: 2.1; }
/* ── Үйлдэл бүр ӨӨРИЙН өнгөтэй, амарч байхдаа ч тод ──
   Өмнө нь бүгд нэг бүдэг саарал (--ux-text-2) байсан тул а) товч уу, чимэглэл
   үү нь мэдэгдэхгүй, б) хажуу хажуугаа 4 ижил дүрс байснаас аль нь юу хийхийг
   зөвхөн хулгана дээр нь тавьж байж мэддэг байв. Гар утсанд hover гэж
   байхгүй тул тэнд огт мэдэх аргагүй. */
.co_row_actions .co_row_view {            /* бамбай — тусгай эрх */
    color: #6d4aff; border-color: #ded5ff; background: #f5f2ff;
}
.co_row_actions .co_row_edit,
.co_row_actions .co_row_sub,
.co_row_actions .co_row_emp,
.co_row_actions .co_row_tasks {           /* харандаа/нэмэх — үндсэн үйлдэл */
    color: var(--ux-primary); border-color: var(--ux-primary-soft); background: var(--ux-primary-soft);
}
.co_row_actions .co_row_key {             /* түлхүүр — нууц үг */
    color: #b45309; border-color: #fde3ab; background: #fffaf0;
}
.co_row_actions .co_row_del {             /* сав — устгах */
    color: var(--ux-danger); border-color: var(--ux-danger-soft); background: #fef4f2;
}
html[data-theme="dark"] .co_row_actions .co_row_view { color: #a794ff; border-color: #3b3169; background: #221d3a; }
html[data-theme="dark"] .co_row_actions .co_row_key { color: #fbbf24; border-color: #5a4213; background: #2a2109; }
html[data-theme="dark"] .co_row_actions .co_row_del { color: #f87171; border-color: #5b2020; background: #2a1414; }
.co_row_actions .co_row_sub:hover,
.co_row_actions .co_row_emp:hover,
.co_row_actions .co_row_view:hover,
.co_row_actions .co_row_edit:hover { color: var(--ux-primary); border-color: var(--ux-primary); background: var(--ux-primary-soft); }
.co_row_actions .co_row_key:hover { color: var(--ux-warning); border-color: var(--ux-warning); background: var(--ux-warning-soft); }
.co_row_actions .co_row_del:hover { color: var(--ux-danger); border-color: var(--ux-danger); background: var(--ux-danger-soft); }
.co_row_actions .co_del_form { display: inline-flex; }
/* Өөрийгөө устгах товчгүй мөрд байрыг нь хоосон үлдээнэ (баганууд зэрэгцэнэ). */
.co_row_actions .co_row_del_placeholder { width: 32px; height: 32px; flex: none; display: inline-block; }
.co_row_actions .co_row_chev {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ux-icon, #94a3b8);
}
.co_row_actions .co_row_chev svg { width: 18px; height: 18px; }
/* Hover хүртэл бүдгэрдэг байсныг болиулав — хуруунд hover гэж байхгүй. */
.co_row_actions { opacity: 1 !important; }

/* Профайл зураг — дээд мөр ба гар утасны хуудсанд. Зураггүй бол эхний үсэг. */
.nova_user_avatar { overflow: hidden; }
.nova_user_avatar img,
.ms_av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.ms_av { overflow: hidden; }

/* =========================================================================
   МӨРИЙН ҮЙЛДЛИЙН ТОВЧНУУД — ШИНЭ ӨНГӨ (2026-08).
   Цайвар хүрээтэй хувилбар нь бүдэг, «идэвхгүй» мэт харагддаг байв. Одоо:
   дүүрэн градиент шахмал, цагаан дүрс, зөөлөн өнгөт сүүдэр — товч гэдэг нь
   эргэлзээгүй, өнгө нь үйлдлээ ялгана (бамбай=ягаан, харандаа=цэнхэр,
   түлхүүр=шар, сав=улаан). Файлын ТӨГСГӨЛД — cascade-аар дээрх блокоо дарна.
   ========================================================================= */
.co_row_actions .co_row_view,
.co_row_actions .co_row_edit,
.co_row_actions .co_row_key,
.co_row_actions .co_row_del,
.co_row_actions .co_row_sub,
.co_row_actions .co_row_emp,
.co_row_actions .co_row_tasks {
    border: none; color: #fff; border-radius: 10px;
    transition: filter .14s, transform .14s, box-shadow .14s;
}
.co_row_actions .co_row_view {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 3px 8px rgba(124, 58, 237, .30);
}
.co_row_actions .co_row_edit,
.co_row_actions .co_row_sub,
.co_row_actions .co_row_emp,
.co_row_actions .co_row_tasks {
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    box-shadow: 0 3px 8px rgba(37, 99, 235, .28);
}
.co_row_actions .co_row_key {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    box-shadow: 0 3px 8px rgba(217, 119, 6, .28);
}
.co_row_actions .co_row_del {
    background: linear-gradient(135deg, #fb7185, #dc2626);
    box-shadow: 0 3px 8px rgba(220, 38, 38, .28);
}
.co_row_actions .co_row_view:hover,
.co_row_actions .co_row_edit:hover,
.co_row_actions .co_row_key:hover,
.co_row_actions .co_row_del:hover,
.co_row_actions .co_row_sub:hover,
.co_row_actions .co_row_emp:hover,
.co_row_actions .co_row_tasks:hover {
    color: #fff; border: none; filter: brightness(1.08);
    transform: translateY(-1px);
}
.co_row_actions .co_row_view svg,
.co_row_actions .co_row_edit svg,
.co_row_actions .co_row_key svg,
.co_row_actions .co_row_del svg { stroke-width: 2; }
/* Харанхуй горимд градиент хэвээр — цагаан дүрс аль ч дэвсгэрт уншигдана. */
html[data-theme="dark"] .co_row_actions .co_row_view,
html[data-theme="dark"] .co_row_actions .co_row_key,
html[data-theme="dark"] .co_row_actions .co_row_del { color: #fff; border: none; }

/* =========================================================================
   МӨРИЙН ҮЙЛДЛИЙН ТОВЧНУУД — ӨНГӨГҮЙ (2026-08-24, хэрэглэгчийн хүсэлт).
   Градиент өнгөт хувилбарыг халж, бүрэн төвийг сахисан болгов: дэвсгэргүй,
   хүрээгүй, саарал дүрс; hover дээр л зөөлөн саарал дэвсгэр гарна.
   Файлын ТӨГСГӨЛД — өмнөх өнгөт блокоо cascade-аар дарна.
   ========================================================================= */
.co_row_actions .co_row_view,
.co_row_actions .co_row_edit,
.co_row_actions .co_row_key,
.co_row_actions .co_row_del,
.co_row_actions .co_row_sub,
.co_row_actions .co_row_emp,
.co_row_actions .co_row_tasks {
    background: none; border: none; box-shadow: none;
    color: var(--ux-text-2, #6b7280);
    transform: none;
}
.co_row_actions .co_row_view:hover,
.co_row_actions .co_row_edit:hover,
.co_row_actions .co_row_key:hover,
.co_row_actions .co_row_del:hover,
.co_row_actions .co_row_sub:hover,
.co_row_actions .co_row_emp:hover,
.co_row_actions .co_row_tasks:hover {
    background: var(--ux-hover, #f1f3f8); border: none; box-shadow: none;
    color: var(--ux-text, #171a2b);
    filter: none; transform: none;
}
html[data-theme="dark"] .co_row_actions .co_row_view,
html[data-theme="dark"] .co_row_actions .co_row_edit,
html[data-theme="dark"] .co_row_actions .co_row_key,
html[data-theme="dark"] .co_row_actions .co_row_del {
    background: none; border: none; color: #94a3b8;
}
html[data-theme="dark"] .co_row_actions .co_row_view:hover,
html[data-theme="dark"] .co_row_actions .co_row_edit:hover,
html[data-theme="dark"] .co_row_actions .co_row_key:hover,
html[data-theme="dark"] .co_row_actions .co_row_del:hover {
    background: #1f2637; color: #e2e8f0;
}

/* =========================================================================
   МӨРИЙН ҮЙЛДЛИЙН ТОВЧНУУД — ЦЭНХЭР ХҮРЭЭТЭЙ ДӨРВӨЛЖИН (2026-08-24).
   Өнгөгүй хувилбарын дараагийн хүсэлт: товч бүр дөрвөлжин хүрээнд, хүрээ
   ба дүрс хоёулаа цэнхэр. Файлын ТӨГСГӨЛД — өмнөх блокуудаа дарна.
   ========================================================================= */
.co_row_actions .co_row_view,
.co_row_actions .co_row_edit,
.co_row_actions .co_row_key,
.co_row_actions .co_row_del,
.co_row_actions .co_row_sub,
.co_row_actions .co_row_emp,
.co_row_actions .co_row_tasks {
    background: none;
    border: 1.5px solid #2563eb;
    border-radius: 8px;
    color: #2563eb;
    box-shadow: none;
}
.co_row_actions .co_row_view:hover,
.co_row_actions .co_row_edit:hover,
.co_row_actions .co_row_key:hover,
.co_row_actions .co_row_del:hover,
.co_row_actions .co_row_sub:hover,
.co_row_actions .co_row_emp:hover,
.co_row_actions .co_row_tasks:hover {
    background: #eaf1fe; border: 1.5px solid #1d4ed8; color: #1d4ed8;
    box-shadow: none; filter: none; transform: none;
}
html[data-theme="dark"] .co_row_actions .co_row_view,
html[data-theme="dark"] .co_row_actions .co_row_edit,
html[data-theme="dark"] .co_row_actions .co_row_key,
html[data-theme="dark"] .co_row_actions .co_row_del {
    background: none; border: 1.5px solid #60a5fa; color: #60a5fa;
}
html[data-theme="dark"] .co_row_actions .co_row_view:hover,
html[data-theme="dark"] .co_row_actions .co_row_edit:hover,
html[data-theme="dark"] .co_row_actions .co_row_key:hover,
html[data-theme="dark"] .co_row_actions .co_row_del:hover {
    background: #172136; border-color: #93c5fd; color: #93c5fd;
}

/* =========================================================================
   ҮЙЛДЛИЙН ТОВЧ — НАРИЙВЧИЛСАН ЦЭНХЭР ХУВИЛБАР (2026-08-24, 2-р давталт).
   Хатуу тод хүрээ нь бүх мөрөнд давтагдахаар «тор» шиг харагдаж байв.
   Зөөлрүүлэв: цайвар цэнхэр хүрээ + маш бүдэг цэнхэр дэвсгэр, hover дээр л
   хүрээ тодорно. Гар/дэлгэц уншигчид зориулж focus-visible цагираг нэмэв.
   ========================================================================= */
.co_row_actions .co_row_view,
.co_row_actions .co_row_edit,
.co_row_actions .co_row_key,
.co_row_actions .co_row_del,
.co_row_actions .co_row_sub,
.co_row_actions .co_row_emp,
.co_row_actions .co_row_tasks {
    background: #f8fbff;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    color: #2563eb;
    transition: border-color .13s, background .13s, color .13s, box-shadow .13s;
}
.co_row_actions .co_row_view:hover,
.co_row_actions .co_row_edit:hover,
.co_row_actions .co_row_key:hover,
.co_row_actions .co_row_del:hover,
.co_row_actions .co_row_sub:hover,
.co_row_actions .co_row_emp:hover,
.co_row_actions .co_row_tasks:hover {
    background: #eaf1fe; border: 1px solid #2563eb; color: #1d4ed8;
}
.co_row_actions .co_row_view:focus-visible,
.co_row_actions .co_row_edit:focus-visible,
.co_row_actions .co_row_key:focus-visible,
.co_row_actions .co_row_del:focus-visible {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
}
.co_row_actions .co_row_view:active,
.co_row_actions .co_row_edit:active,
.co_row_actions .co_row_key:active,
.co_row_actions .co_row_del:active { background: #dbe8fd; }
html[data-theme="dark"] .co_row_actions .co_row_view,
html[data-theme="dark"] .co_row_actions .co_row_edit,
html[data-theme="dark"] .co_row_actions .co_row_key,
html[data-theme="dark"] .co_row_actions .co_row_del {
    background: #131c2e; border: 1px solid #2a3f63; color: #7fb0fa;
}
html[data-theme="dark"] .co_row_actions .co_row_view:hover,
html[data-theme="dark"] .co_row_actions .co_row_edit:hover,
html[data-theme="dark"] .co_row_actions .co_row_key:hover,
html[data-theme="dark"] .co_row_actions .co_row_del:hover {
    background: #1a2740; border-color: #7fb0fa; color: #a9c9fc;
}

/* =========================================================================
   ҮЙЛДЛИЙН ТОВЧ — БҮР БҮДЭГ ХУВИЛБАР (2026-08-24, 3-р давталт).
   Амарч байхдаа бараг үл анзаарагдам: маш цайвар хүрээ, дэвсгэргүй,
   бүдэг саарал-цэнхэр дүрс. Hover/фокус дээр л цэнхэр болж «сэрнэ».
   ========================================================================= */
.co_row_actions .co_row_view,
.co_row_actions .co_row_edit,
.co_row_actions .co_row_key,
.co_row_actions .co_row_del,
.co_row_actions .co_row_sub,
.co_row_actions .co_row_emp,
.co_row_actions .co_row_tasks {
    background: none;
    border: 1px solid #eef1f7;
    color: #b6c0d4;
}
.co_row_actions .co_row_view:hover,
.co_row_actions .co_row_edit:hover,
.co_row_actions .co_row_key:hover,
.co_row_actions .co_row_del:hover,
.co_row_actions .co_row_sub:hover,
.co_row_actions .co_row_emp:hover,
.co_row_actions .co_row_tasks:hover {
    background: #f4f8fe; border: 1px solid #b6d1fb; color: #2563eb;
}
html[data-theme="dark"] .co_row_actions .co_row_view,
html[data-theme="dark"] .co_row_actions .co_row_edit,
html[data-theme="dark"] .co_row_actions .co_row_key,
html[data-theme="dark"] .co_row_actions .co_row_del {
    background: none; border: 1px solid #212b3f; color: #4d5a75;
}
html[data-theme="dark"] .co_row_actions .co_row_view:hover,
html[data-theme="dark"] .co_row_actions .co_row_edit:hover,
html[data-theme="dark"] .co_row_actions .co_row_key:hover,
html[data-theme="dark"] .co_row_actions .co_row_del:hover {
    background: #16202f; border-color: #3b5d9e; color: #7fb0fa;
}

/* Бүдэг хувилбар хэтэрхий сулхан харагдав — дүрс, хүрээг дунд түвшинд тодруулав. */
.co_row_actions .co_row_view,
.co_row_actions .co_row_edit,
.co_row_actions .co_row_key,
.co_row_actions .co_row_del,
.co_row_actions .co_row_sub,
.co_row_actions .co_row_emp,
.co_row_actions .co_row_tasks {
    border: 1px solid #d6dcea;
    color: #64748b;
}
html[data-theme="dark"] .co_row_actions .co_row_view,
html[data-theme="dark"] .co_row_actions .co_row_edit,
html[data-theme="dark"] .co_row_actions .co_row_key,
html[data-theme="dark"] .co_row_actions .co_row_del {
    border: 1px solid #33405c;
    color: #8b9ab5;
}