/* «Үдийн хоол самбар» дизайны фонт — @import нь файлын эхний дүрэм байх ёстой; ачаалагдахгүй бол system-ui */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap");

/* «Ирцийн мэдээлэл» — самбар (Editors/AttendanceDashboard). Бүх класс att- угтвартай.
   Өнгө нь Bootstrap-ийн хувьсагчийг (DevExpress-ийн сэдэв) дагана — inventory-dashboard.css-тэй ижил. */

.att-root {
    --att-accent: var(--bs-primary, #2563eb);
    --att-border: var(--bs-border-color, #e2e8f0);
    --att-muted: var(--bs-secondary-color, #64748b);
    --att-surface: var(--bs-body-bg, #ffffff);
    --att-soft: var(--bs-tertiary-bg, #f8fafc);
    --att-danger: var(--bs-danger, #dc2626);
    --att-success: var(--bs-success, #16a34a);
    --att-warn: #b45309;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 0.875rem;
    max-width: 1280px;
}

.att-error { padding: 16px; border: 1px solid var(--att-danger); border-radius: 8px; color: var(--att-danger); }

.att-header { display: flex; align-items: center; justify-content: space-between; }
.att-title { font-size: 1.25rem; font-weight: 600; }
.att-subtitle { color: var(--att-muted); }
.att-branch { min-width: 280px; max-width: 420px; margin-top: 4px; }

.att-icon-btn {
    border: 1px solid var(--att-border);
    background: var(--att-surface);
    border-radius: 8px;
    width: 36px; height: 36px;
    font-size: 1.1rem;
    cursor: pointer;
}

/* ── Өнөөдрийн дүн ─────────────────────────────── */
.att-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.att-stat {
    border: 1px solid var(--att-border);
    border-radius: 10px;
    background: var(--att-surface);
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px;
}
.att-stat-value { font-size: 1.35rem; font-weight: 600; }
.att-stat-ok { border-color: var(--att-success); }
.att-stat-warn { border-color: var(--att-warn); }

/* ── Шууд холбоос ─────────────────────────────── */
.att-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.att-action {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; min-height: 52px;
    border: 1px solid var(--att-border);
    border-radius: 10px;
    background: var(--att-surface);
    font-size: 0.95rem; font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.att-action:hover { border-color: var(--att-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.att-action-icon { font-size: 1.3rem; }

/* ── Картууд ─────────────────────────────── */
.att-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.att-card {
    border: 1px solid var(--att-border);
    border-radius: 10px;
    background: var(--att-surface);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.att-card-title { font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.att-count {
    background: var(--att-soft);
    border: 1px solid var(--att-border);
    border-radius: 999px;
    padding: 0 8px;
    font-size: 0.75rem; font-weight: 600;
}
.att-card-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.att-empty, .att-hint, .att-muted { color: var(--att-muted); }
.att-ok { color: var(--att-success); }
.att-danger { color: var(--att-danger); font-weight: 600; }
.att-nowrap { white-space: nowrap; }

.att-link { border: none; background: none; padding: 0; color: var(--att-accent); font-weight: 600; cursor: pointer; }
.att-link:disabled { opacity: .5; cursor: not-allowed; }

.att-table { width: 100%; border-collapse: collapse; }
.att-table td { padding: 4px 0; border-bottom: 1px solid var(--att-border); vertical-align: top; }
.att-num { text-align: right; white-space: nowrap; padding-left: 8px; }

.att-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.att-tag {
    border: 1px solid var(--att-border);
    border-radius: 999px;
    padding: 2px 10px;
    background: var(--att-soft);
    font-size: 0.8rem;
}
.att-tag-work { border-color: var(--att-success); color: var(--att-success); }

/* ── Чиг хандлага (CSS баар) ─────────────────────────────── */
.att-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 4px; }
.att-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.att-bar-val { font-size: 0.7rem; color: var(--att-muted); height: 16px; }
.att-bar-track { flex: 1; width: 100%; max-width: 36px; display: flex; align-items: flex-end; background: var(--att-soft); border-radius: 4px; }
.att-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 3px; }
.att-bar-full { background: var(--att-success); }
.att-bar-partial { background: var(--att-warn); }
.att-bar-none { background: var(--att-border); }
.att-bar-label { font-size: 0.7rem; margin-top: 4px; white-space: nowrap; }
.att-bar-sub { font-size: 0.68rem; white-space: nowrap; }
.att-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.75rem; color: var(--att-muted); }
.att-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

@media (max-width: 600px) {
    .att-bars { height: 120px; }
    .att-bar-val, .att-bar-sub { display: none; }
}

/* ── Гарын авлага (AttendanceHelpContent.razor) ─────────────── */
.att-guide { border-color: var(--att-accent); }
.att-guide-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.att-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.att-chip {
    border: 1px solid var(--att-border);
    background: var(--att-surface);
    border-radius: 999px;
    padding: 3px 12px;
    cursor: pointer;
    font-size: 0.8rem;
}
.att-chip:hover { border-color: var(--att-accent); }
.att-chip-active { background: var(--att-accent); border-color: var(--att-accent); color: #fff; }

.atth-root {
    --atth-accent: var(--bs-primary, #2563eb);
    --atth-border: var(--bs-border-color, #e2e8f0);
    --atth-muted: var(--bs-secondary-color, #64748b);
    --atth-soft: var(--bs-tertiary-bg, #f8fafc);
    font-size: 0.875rem;
    line-height: 1.55;
    display: flex; flex-direction: column; gap: 12px;
}
.atth-lead { margin: 0; }
.atth-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 5px; }
.atth-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.atth-node {
    flex: 1; min-width: 160px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--atth-border);
    border-left: 4px solid var(--atth-border);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
}
.atth-node small { color: var(--atth-muted); font-size: 0.75rem; }
.atth-main { border-left-color: var(--atth-accent); }
.atth-ico { font-size: 1.2rem; }
.atth-arrow { align-self: center; color: var(--atth-muted); font-weight: 600; }
.atth-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.atth-table th, .atth-table td { border-bottom: 1px solid var(--atth-border); padding: 5px 6px; text-align: left; vertical-align: top; }
.atth-table th { color: var(--atth-muted); font-weight: 600; }
.atth-callout {
    border: 1px solid var(--atth-border);
    border-left: 4px solid var(--atth-accent);
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--atth-soft);
}
@media (max-width: 700px) {
    .atth-flow { flex-direction: column; }
    .atth-arrow { transform: rotate(90deg); }
}

/* ── Горим, хугацаа сонгох ─────────────────────────────── */
.att-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.att-seg { display: inline-flex; border: 1px solid var(--att-border); border-radius: 8px; overflow: hidden; }
.att-seg-btn { border: none; background: var(--att-surface); padding: 6px 14px; font-weight: 600; cursor: pointer; }
.att-seg-btn + .att-seg-btn { border-left: 1px solid var(--att-border); }
.att-seg-active { background: var(--att-accent); color: #fff; }
.att-nav { display: flex; align-items: center; gap: 8px; }
.att-period { font-weight: 600; min-width: 190px; text-align: center; }
.att-date { width: 150px; }

/* ── Календарь (сарын горим) ─────────────────────────────── */
.att-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.att-cal-head { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--att-muted); padding: 2px 0; }
.att-cal-cell {
    min-height: 68px;
    border: 1px solid var(--att-border);
    border-radius: 8px;
    background: var(--att-surface);
    padding: 4px 6px;
    text-align: left;
    display: flex; flex-direction: column; gap: 1px;
    cursor: pointer;
    font-size: 0.75rem;
}
.att-cal-cell:disabled { cursor: default; }
.att-cal-cell:hover:not(:disabled) { border-color: var(--att-accent); }
.att-cal-day { font-weight: 600; font-size: 0.85rem; }
.att-cal-sub { color: var(--att-muted); }
.att-cal-pct { font-weight: 600; }
.att-cal-bar { height: 4px; background: var(--att-soft); border-radius: 2px; margin-top: auto; }
.att-cal-fill { height: 100%; background: var(--att-success); border-radius: 2px; }
.att-cal-out { visibility: hidden; }
.att-cal-off { background: var(--att-soft); color: var(--att-muted); }
.att-cal-future { opacity: .6; }
.att-cal-none { border-left: 4px solid var(--att-border); }
.att-cal-partial { border-left: 4px solid var(--att-warn); }
.att-cal-full { border-left: 4px solid var(--att-success); }
.att-cal-today { box-shadow: inset 0 0 0 2px var(--att-accent); }
.att-cal-legend-off { background: var(--att-soft); border: 1px solid var(--att-border); }

/* ── Бүлэг × өдөр хүснэгт ─────────────────────────────── */
.att-scroll { overflow-x: auto; }
.att-matrix { border-collapse: collapse; font-size: 0.78rem; width: 100%; }
.att-matrix th, .att-matrix td { border: 1px solid var(--att-border); padding: 3px 4px; text-align: center; white-space: nowrap; }
.att-matrix th { background: var(--att-soft); font-weight: 600; }
.att-matrix th small { color: var(--att-muted); font-weight: 400; }
.att-matrix-name { text-align: left !important; position: sticky; left: 0; background: var(--att-surface); font-weight: 600; min-width: 110px; }
.att-matrix th.att-matrix-name { background: var(--att-soft); }
.att-matrix-off { background: var(--att-soft); color: var(--att-muted); }
.att-matrix-today { box-shadow: inset 0 -2px 0 var(--att-accent); }
.att-matrix-missing { background: #fdecec; color: var(--att-danger); font-weight: 600; }
.att-matrix-has { background: #effaf1; }
.att-matrix-cut { background: #fff7e6; }
.att-cell-btn { border: none; background: none; padding: 0; cursor: pointer; font: inherit; line-height: 1.15; }
.att-cell-btn small { color: var(--att-muted); }
.att-cell-btn:hover { color: var(--att-accent); }

/* ── Баар — товч болгосон (өдөр рүү шилжих) ─────────────── */
.att-bar-col { border: none; background: none; padding: 0; cursor: pointer; font: inherit; }
.att-bar-col:hover .att-bar-track { outline: 1px solid var(--att-accent); }
.att-bars-dense .att-bar-val, .att-bars-dense .att-bar-sub { display: none; }
.att-bars-dense .att-bar-label { font-size: 0.6rem; transform: rotate(-60deg); margin-top: 10px; }

@media (max-width: 700px) {
    .att-period { min-width: 0; }
    .att-cal-cell { min-height: 52px; }
    .att-cal-sub { display: none; }
}

/* ── Сүү хөтөлбөрийн самбар (Editors/MilkDashboard) мөн att-* классуудыг хэрэглэнэ ── */
.att-row-static { padding: 6px 0; border-bottom: 1px solid var(--att-border); }

/* ── Таб: «Өдрийн ирц | Үдийн хоол» ─────────────────────────────── */
.att-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--att-border); }
.att-tab {
    border: none;
    background: none;
    padding: 8px 18px;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    font-size: 0.95rem; font-weight: 600;
    color: var(--att-muted);
    cursor: pointer;
}
.att-tab:hover { color: var(--att-accent); }
.att-tab-active { color: var(--att-accent); border-bottom-color: var(--att-accent); }

/* ── «Үдийн хоол» таб (FoodDashboard.razor) ─────────────────────── */
.att-section-title { font-weight: 600; margin-top: 4px; }
.att-warn-text { color: var(--att-warn); }
.att-matrix tr.att-matrix-group td { background: var(--att-soft); text-align: left; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   att-theme — «Ирцийн мэдээлэл» самбарын шинэ загвар («Үдийн хоол самбар» дизайн, 2026-10-18).
   Зөвхөн Attendance_DashboardView (.att-root.att-theme) — сүү хөтөлбөрийн самбар (.att-root) хуучнаараа.
   ══════════════════════════════════════════════════════════════════════ */
.att-root.att-theme {
    --att-accent: #C2470A;
    --att-accent-strong: #E8590C;
    --att-accent-soft: #FFF4ED;
    --att-accent-border: #F2C3A7;
    --att-border: #E7E2DC;
    --att-border-soft: #EFEAE4;
    --att-border-row: #F3EFEA;
    --att-muted: #6B635A;
    --att-ink: #1F1B16;
    --att-surface: #ffffff;
    --att-soft: #FBF9F7;
    --att-page: #F6F4F1;
    --att-seg-bg: #ECE7E1;
    --att-danger: #B42318;
    --att-danger-soft: #FDECEA;
    --att-success: #2F8F4E;
    --att-warn: #E8955A;
    --att-pink: #E9B8A8;
    --att-miss: #F1C9BE;
    max-width: none;            /* дэлгэцийн бүх өргөнөөр — хоёр талд зай үлдээхгүй */
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 24px 20px 64px;
    gap: 20px;
    background: var(--att-page);
    color: var(--att-ink);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
.att-theme button, .att-theme input { font-family: inherit; }
.att-theme .att-card, .att-theme .att-stat, .att-theme .att-action { border-color: var(--att-border); border-radius: 14px; }
.att-theme .att-card { padding: 18px 20px; gap: 10px; }
.att-theme .att-table td { border-bottom-color: var(--att-border-row); padding: 8px 12px 8px 0; vertical-align: middle; }
.att-theme .att-table td:last-child { padding-right: 0; }
.att-theme .att-table tr.att-muted td { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.att-theme .att-num { padding-left: 12px; }

/* Картын сүлжээ: өргөн дэлгэцэд ч карт бүр ≥460px — давхцаж шахагдахгүй; урт карт дотроо гүйлгэнэ,
   гарчиг нь дээр наалттай үлдэнэ */
.att-theme .att-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 20px; align-items: start; }
.att-theme .att-grid > .att-card { max-height: 560px; overflow-y: auto; padding-top: 0; }
.att-theme .att-grid > .att-card > .att-card-title {
    position: sticky; top: 0; z-index: 1;
    background: #fff; padding: 18px 0 10px; border-bottom: 1px solid var(--att-border-soft);
}
.att-theme .att-stats { gap: 12px; }
.att-theme .att-link { color: var(--att-accent); }
.att-theme .att-link:hover:not(:disabled) { color: #8F3307; text-decoration: underline; }
.att-theme .att-stat-ok { border-color: #BFDCC8; }
.att-theme .att-stat-warn { border-color: var(--att-accent-border); }
.att-theme .att-matrix-missing { background: #FFFAF8; }
.att-theme .att-cal-cell { border-radius: 10px; }

/* ── Толгой ─────────────────────────────── */
.att-theme .att-header { flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.att-theme .att-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.att-theme .att-subtitle { font-size: 13px; color: var(--att-muted); }
.att-theme .att-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--att-ink); }
.att-theme .att-branch { margin-top: 0; }
.att-theme .att-head-actions { display: flex; align-items: center; gap: 10px; }

/* Сегмент таб «Өдрийн ирц | Үдийн хоол» */
.att-theme .att-tabs { display: flex; gap: 4px; background: var(--att-seg-bg); padding: 4px; border-radius: 10px; border: 0; }
.att-theme .att-tab {
    border: 0; margin: 0; background: transparent;
    padding: 8px 16px; border-radius: 7px;
    font-size: 14px; font-weight: 400; color: var(--att-muted);
}
.att-theme .att-tab:hover { color: var(--att-ink); }
.att-theme .att-tab-active { background: #fff; font-weight: 600; color: var(--att-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); border: 0; }

/* «?» гарын авлагын цэс */
.att-help { position: relative; }
.att-help-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--att-border); background: #fff; color: var(--att-accent);
    font-size: 18px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.att-help-btn:hover, .att-help-btn.is-open { background: var(--att-accent-soft); border-color: var(--att-accent-strong); }
.att-help-backdrop { position: fixed; inset: 0; z-index: 19; }
.att-help-menu {
    position: absolute; right: 0; top: 48px; z-index: 20;
    width: 280px; max-width: calc(100vw - 32px);
    background: #fff; border: 1px solid var(--att-border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(31, 27, 22, .14); overflow: hidden;
}
.att-help-menu-head { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--att-border-soft); font-size: 12px; }
.att-help-menu-title { font-size: 15px; font-weight: 600; }
.att-help-menu-list { display: flex; flex-direction: column; padding: 6px; }
.att-help-item {
    display: flex; justify-content: space-between; align-items: center;
    border: 0; background: transparent; text-align: left;
    padding: 9px 10px; border-radius: 7px; font-size: 14px; color: var(--att-ink); cursor: pointer;
}
.att-help-item:hover, .att-help-item.is-active { background: #FBF6F1; color: var(--att-accent); }
.att-help-chevron { color: #B5ACA2; }

/* Гарын авлагын карт */
.att-theme .att-guide { border-color: var(--att-accent-border); }
.att-theme .att-chip { border-color: var(--att-border); color: var(--att-ink); }
.att-theme .att-chip-active { background: var(--att-ink); border-color: var(--att-ink); color: #fff; }

/* ── Toolbar ─────────────────────────────── */
.att-theme .att-toolbar { padding: 12px; background: #fff; border: 1px solid var(--att-border); border-radius: 12px; }
.att-theme .att-seg { border-color: var(--att-border); }
.att-theme .att-seg-btn { padding: 8px 14px; font-size: 14px; font-weight: 400; background: #fff; color: var(--att-ink); }
.att-theme .att-seg-btn + .att-seg-btn { border-left: 0; }
.att-theme .att-seg-active { background: var(--att-accent-strong); color: #fff; font-weight: 600; }
.att-theme .att-nav { gap: 6px; }
.att-nav-btn {
    width: 34px; height: 34px; flex: none;
    border: 1px solid var(--att-border); background: #fff; border-radius: 8px;
    cursor: pointer; font-size: 15px; color: var(--att-muted);
}
.att-nav-btn:hover { border-color: var(--att-accent-strong); color: var(--att-accent); }
.att-date-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 170px; height: 34px; padding: 0 12px;
    border: 1px solid var(--att-border); background: #fff; border-radius: 8px;
    font-size: 15px; font-weight: 600; color: var(--att-ink); white-space: nowrap;
}
.att-date-btn svg { color: var(--att-accent); flex: none; }
.att-date-btn:hover { border-color: var(--att-accent-strong); }
/* Ил харагдахгүй огноо сонгогч товчийг бүхэлд нь бүрхэнэ — дарахад браузерийн календарь нээгдэнэ */
.att-date-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.att-date-input::-webkit-calendar-picker-indicator {
    position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; cursor: pointer;
}
.att-today-btn {
    border: 1px solid var(--att-border); background: #fff;
    padding: 8px 12px; border-radius: 8px; font-size: 14px;
    cursor: pointer; color: var(--att-accent); font-weight: 600;
}
.att-today-btn.is-today { color: var(--att-muted); font-weight: 400; }
.att-toolbar-spacer { flex: 1; }

/* ══ «Үдийн хоол» таб (FoodDashboard.razor) — fd-* ═════════════════ */
.fd-mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.fd-red { color: var(--att-danger); }
.fd-green { color: var(--att-success); }
.fd-accent { color: var(--att-accent); }
.fd-ink { color: var(--att-ink); font-weight: 500; }
.fd-strong { font-weight: 600; }
.fd-medium { font-weight: 500; }
.fd-small { font-size: 12px; }
.fd-r { text-align: right; }
.fd-caption { font-size: 12px; color: var(--att-muted); }
.fd-spacer { flex: 1; }

.fd-card { background: #fff; border: 1px solid var(--att-border); border-radius: 14px; }
.fd-pad { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.fd-pad-row { padding: 12px 20px; }
.fd-border-bottom { border-bottom: 1px solid var(--att-border-soft); }
.fd-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fd-card-title { font-size: 15px; font-weight: 600; }
.fd-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* KPI */
.fd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.fd-kpi { background: #fff; border: 1px solid var(--att-border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fd-kpi-label { font-size: 14px; color: var(--att-muted); }
.fd-kpi-value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fd-kpi-value .fd-mono { font-size: 40px; font-weight: 600; line-height: 1; }
.fd-kpi-unit { font-size: 20px; color: var(--att-muted); }
.fd-kpi-foot { font-size: 14px; font-weight: 500; line-height: 1.5; }
.fd-kpi-foot.att-muted { font-weight: 400; }
.fd-blocks { display: flex; flex-wrap: wrap; gap: 3px; }
.fd-block { flex: 1 1 0; min-width: 6px; height: 10px; border-radius: 2px; }
.fd-block.is-ok { background: var(--att-success); }
.fd-block.is-miss { background: var(--att-miss); }
.fd-split { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--att-seg-bg); }
.fd-split-ok { background: var(--att-success); }
.fd-split-no { background: var(--att-pink); }
.fd-split-miss { background: var(--att-miss); }
.fd-legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.fd-legend.fd-small { gap: 14px; font-size: 12px; color: var(--att-muted); }
.fd-legend span { display: flex; align-items: center; gap: 6px; }
.fd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.fd-dot.is-ok { background: var(--att-success); }
.fd-dot.is-no { background: var(--att-pink); }
.fd-dot.is-part { background: var(--att-warn); }

/* Хэсэг, шүүлтийн chip */
.fd-section { display: flex; flex-direction: column; gap: 12px; }
.fd-h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--att-ink); }
.fd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fd-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; font-size: 13px; cursor: pointer;
    border: 1px solid var(--att-border); background: #fff; color: var(--att-ink); font-weight: 400;
}
.fd-chip:hover { border-color: var(--att-muted); }
.fd-chip.is-active { background: var(--att-ink); border-color: var(--att-ink); color: #fff; font-weight: 600; }
.fd-chip.is-active.is-danger { background: var(--att-danger); border-color: var(--att-danger); }
.fd-chip-count { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; opacity: .75; }
.fd-chip-sep { width: 1px; height: 20px; background: var(--att-border); margin: 0 4px; }
.fd-search {
    height: 32px; min-width: 180px; padding: 0 12px;
    border: 1px solid var(--att-border); border-radius: 8px;
    font-size: 13px; background: #fff; color: var(--att-ink);
}
.fd-search:focus { outline: none; border-color: var(--att-accent-strong); }

/* Grid хүснэгт */
.fd-scroll { overflow-x: auto; }
.fd-table { min-width: 720px; }
.fd-tr {
    display: grid; gap: 12px; align-items: center;
    padding: 10px 20px; border-bottom: 1px solid var(--att-border-row); font-size: 14px;
}
.fd-tr > * { min-width: 0; overflow-wrap: anywhere; }
.fd-grades .fd-tr { grid-template-columns: 70px 1fr 90px 80px 80px 1.4fr 80px; }
.fd-grades-amount .fd-tr { grid-template-columns: 70px 1fr 90px 80px 80px 1.4fr 110px 80px; }
.fd-mm { min-width: 560px; }
.fd-mm .fd-tr { grid-template-columns: 1.6fr 70px 1fr 1fr 70px; }
.fd-th {
    padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--att-muted);
    text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--att-border-soft);
}
.fd-tr-missing { background: #FFFAF8; }
.fd-scroll-y { max-height: 440px; overflow-y: auto; }
.fd-total { background: var(--att-soft); font-weight: 600; border-bottom: 0; padding: 12px 20px; }
.fd-group {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 20px; background: var(--att-soft); border-bottom: 1px solid var(--att-border-soft); font-size: 13px;
}
.fd-group-title { font-size: 14px; font-weight: 700; }
.fd-pct { display: flex; align-items: center; gap: 8px; }
.fd-pct-track { flex: 1; height: 6px; background: var(--att-seg-bg); border-radius: 3px; overflow: hidden; }
.fd-pct-fill { height: 100%; background: var(--att-success); }
.fd-pct > span { width: 36px; font-size: 12px; color: var(--att-muted); text-align: right; }
.fd-btn-soft {
    border: 1px solid var(--att-accent-border); background: var(--att-accent-soft); color: var(--att-accent);
    padding: 5px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fd-btn-soft:hover:not(:disabled) { border-color: var(--att-accent-strong); }
.fd-btn-soft:disabled { opacity: .5; cursor: not-allowed; }
.fd-empty { padding: 28px 20px; text-align: center; font-size: 14px; color: var(--att-muted); }
.fd-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
    padding: 12px 20px; font-size: 13px; color: var(--att-muted); background: var(--att-soft);
}
.fd-note { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13px; }
.fd-status { padding: 2px 8px; border-radius: 5px; font-size: 13px; white-space: nowrap; }
.fd-status.is-present { background: #E8F3EC; color: #2F6B43; }
.fd-status.is-online { background: #EEF0F7; color: #3B4A7A; }
.fd-status.is-absent { background: var(--att-danger-soft); color: var(--att-danger); }

/* Доод хэсэг: график, бүртгээгүй өдөр, хоол */
.fd-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.fd-chart { display: grid; gap: 6px; align-items: end; height: 180px; }
.fd-chart-col {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
    height: 100%; min-width: 0; border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
}
.fd-chart-col:hover .fd-chart-bar { filter: brightness(.92); }
.fd-chart-val { font-size: 11px; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--att-muted); }
.fd-chart-bar { display: block; width: 100%; border-radius: 4px 4px 0 0; }
.fd-chart-bar.is-ok { background: var(--att-success); }
.fd-chart-bar.is-part { background: var(--att-warn); }
.fd-chart-bar.is-none { background: var(--att-border); }
.fd-chart-axis { display: grid; gap: 6px; margin-top: -10px; }
.fd-chart-axis > div { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; min-width: 0; }
.fd-chart-axis > div > span + span { font-size: 10px; }
.fd-badge { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.fd-badge.is-red { background: var(--att-danger-soft); color: var(--att-danger); }
.fd-badge.is-green { background: #E8F3EC; color: var(--att-success); }
.fd-missed-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--att-border-row); font-size: 14px; }
.fd-missed-date { width: 76px; flex: none; text-align: left; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; color: var(--att-ink); }
.fd-missed-date:hover { color: var(--att-accent); text-decoration: underline; }
.fd-pills { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fd-pill { padding: 2px 8px; background: var(--att-border-row); border-radius: 5px; font-size: 13px; }
.fd-meal-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }

@media (max-width: 700px) {
    .att-root.att-theme { padding: 16px 16px 48px; }
    .att-theme .att-head-actions { width: 100%; justify-content: space-between; }
    .att-date-btn { min-width: 0; flex: 1; font-size: 14px; }
    .att-theme .att-nav { flex: 1; min-width: 0; }
    .att-toolbar-spacer { display: none; }
    .fd-kpi-value .fd-mono { font-size: 32px; }
    .fd-bottom { grid-template-columns: minmax(0, 1fr); }
    .fd-chart-val { display: none; }
    .fd-search { flex: 1; min-width: 0; }
}

/* ══ «Сүү хөтөлбөр → Санхүүжилт» (Editors/MilkDashboard/MilkFundingTab.razor) — mf-* ═════
   fd-* (үдийн хоолны самбар)-ийн карт, хүснэгт, chip-ийг дахин ашиглана. */
.mf-status {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    padding: 12px 16px; background: #fff; border: 1px solid var(--att-border); border-radius: 12px; font-size: 14px;
}
.mf-status.is-closed { border-color: #BFDCC8; background: #F4FAF6; }
.mf-status.is-open { border-color: var(--att-accent-border); }
.mf-form { gap: 10px; }
.mf-input { width: 100%; box-sizing: border-box; }
.mf-actions { display: flex; gap: 14px; align-items: center; }
.mf-kpi-warn { border-color: var(--att-accent-border); background: #FFFAF8; }
.mf-kpis .fd-kpi { gap: 8px; }
.mf-kpis .fd-kpi-value .fd-mono { font-size: 30px; }
.mf-kpis .fd-kpi-foot { font-size: 13px; }

.mf-schools { min-width: 1040px; }
.mf-schools .fd-tr { grid-template-columns: 40px minmax(200px, 2fr) repeat(4, minmax(110px, 1fr)) minmax(120px, 1fr) minmax(110px, 1fr); }
.mf-months { min-width: 880px; }
.mf-months .fd-tr { grid-template-columns: 140px repeat(4, minmax(100px, 1fr)) minmax(120px, 1.1fr) minmax(110px, 1fr) 130px; }
.mf-other { min-width: 720px; }
.mf-other .fd-tr { grid-template-columns: minmax(200px, 2fr) 130px 70px 90px 110px minmax(120px, 1fr); }
.mf-drift { min-width: 780px; }
.mf-drift .fd-tr { grid-template-columns: minmax(200px, 2fr) 90px 100px minmax(130px, 1fr) minmax(130px, 1fr) 120px; }
.mf-rows { max-height: 640px; overflow-y: auto; }
.mf-amount { display: block; }
.mf-sub { display: block; font-size: 11px; color: var(--att-muted); white-space: nowrap; }
.mf-th-sub { display: block; font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.mf-zero { background: #FFF4F2; border-radius: 6px; padding: 2px 6px; }
.mf-future { opacity: .45; }
.mf-school { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--att-ink); cursor: pointer; text-align: left; }
.mf-school:hover { color: var(--att-accent); text-decoration: underline; }
.mf-tag {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px;
    font-size: 11px; font-weight: 500; background: var(--att-border-row); color: var(--att-muted);
}
.mf-tag.is-red { background: var(--att-danger-soft); color: var(--att-danger); }

/* ══ «Сүү хөтөлбөр → ESIS лог» (Editors/MilkDashboard/MilkEsisLogTab.razor), самбарын алдааны карт — mel-* ═════ */
.mel-cat {
    display: flex; justify-content: space-between; gap: 12px; width: 100%;
    border: 1px solid var(--att-border); background: #fff; border-radius: 8px;
    padding: 6px 10px; font-size: 13px; cursor: pointer; text-align: left; color: var(--att-ink);
}
.mel-cat:hover { border-color: var(--att-muted); }
.mel-cat.is-active { border-color: var(--att-danger); background: var(--att-danger-soft); }
.mel-groups { min-width: 980px; }
.mel-groups .fd-tr { grid-template-columns: minmax(180px, 1.6fr) 70px 80px 70px 60px 60px 60px minmax(160px, 1.6fr) 190px; }
.mel-calls { min-width: 900px; }
.mel-calls .fd-tr { grid-template-columns: 80px minmax(160px, 1.4fr) 110px minmax(150px, 1fr) 60px 60px minmax(200px, 2fr); }
.mel-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.mel-detail { padding: 10px 20px 14px; background: var(--att-soft); border-bottom: 1px solid var(--att-border-row); display: flex; flex-direction: column; gap: 8px; }
.mel-msg { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.mel-raw-line { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--att-muted); overflow-wrap: anywhere; }
.mel-students { display: flex; flex-wrap: wrap; gap: 6px; }
.mel-raw summary { cursor: pointer; font-size: 11px; color: var(--att-muted); }