/* «Хоолны цэс төлөвлөгч» (Editors/MenuPlanner) — бүх класс mp- угтвартай тул
   XAF/DevExpress-ийн стильтэй давхцахгүй. Өнгө нь Bootstrap-ийн хувьсагчийг
   (DevExpress-ийн сэдэв тэднийг тодорхойлдог) дагаж, байхгүй бол нөөц утгаа авна. */

.mp-root {
    --mp-accent: var(--bs-primary, #2563eb);
    --mp-border: var(--bs-border-color, #e2e8f0);
    --mp-muted: var(--bs-secondary-color, #64748b);
    --mp-surface: var(--bs-body-bg, #ffffff);
    --mp-soft: var(--bs-tertiary-bg, #f8fafc);
    --mp-danger: var(--bs-danger, #dc2626);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 480px;
    font-size: 0.875rem;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.mp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.mp-branch { min-width: 280px; max-width: 420px; }
.mp-branch-name { font-weight: 600; font-size: 1rem; }

.mp-week-nav { display: flex; align-items: center; gap: 6px; }
.mp-week-label { font-weight: 600; min-width: 170px; text-align: center; }
.mp-toolbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.mp-icon-btn {
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    line-height: 1;
    font-size: 1.1rem;
    cursor: pointer;
    color: inherit;
}
.mp-icon-btn:hover { border-color: var(--mp-accent); color: var(--mp-accent); }

.mp-chip {
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    color: inherit;
    white-space: nowrap;
}
.mp-chip:hover:not(:disabled) { border-color: var(--mp-accent); }
.mp-chip:disabled { opacity: 0.55; cursor: default; }
.mp-chip-on { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }

.mp-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--mp-accent);
    border-radius: 8px;
    background: var(--mp-soft);
}

.mp-empty { padding: 48px 16px; text-align: center; color: var(--mp-muted); }
.mp-hint { padding: 12px 4px; color: var(--mp-muted); }
.mp-hint-small { font-size: 0.75rem; color: var(--mp-muted); line-height: 1.3; }
.mp-muted { color: var(--mp-muted); }
.mp-spacer { flex: 1; }

/* ── Layout ──────────────────────────────────────────────── */
.mp-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

/* ── Хоолны жагсаалт ─────────────────────────────────────── */
.mp-products {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    padding: 10px;
    background: var(--mp-surface);
}

.mp-search {
    width: 100%;
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    padding: 6px 10px;
    background: var(--mp-surface);
    color: inherit;
}
.mp-search:focus { outline: none; border-color: var(--mp-accent); }

.mp-type-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mp-type-chips .mp-chip { padding: 2px 10px; font-size: 0.8rem; }

.mp-product-list {
    height: calc(100vh - 320px);
    min-height: 320px;
    overflow-y: auto;
}

.mp-product {
    height: 50px;
    margin-bottom: 4px;
    padding: 6px 8px;
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    background: var(--mp-surface);
    cursor: grab;
    overflow: hidden;
}
.mp-product:hover { border-color: var(--mp-accent); }
.mp-product-selected { border-color: var(--mp-accent); box-shadow: inset 3px 0 0 var(--mp-accent); }
.mp-product-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-product-meta { display: flex; gap: 8px; font-size: 0.75rem; color: var(--mp-muted); white-space: nowrap; overflow: hidden; }

/* ── 7 хоногийн хүснэгт ──────────────────────────────────── */
.mp-calendar {
    display: grid;
    grid-template-columns: 110px repeat(var(--mp-days, 5), minmax(150px, 1fr));
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    overflow: auto;
    background: var(--mp-surface);
}

.mp-corner, .mp-day-head, .mp-slot-head, .mp-cell {
    border-right: 1px solid var(--mp-border);
    border-bottom: 1px solid var(--mp-border);
}

.mp-corner { padding: 8px; background: var(--mp-soft); }

.mp-day-head { padding: 8px 10px; background: var(--mp-soft); }
.mp-day-name { font-weight: 600; }
.mp-day-date { font-size: 0.8rem; color: var(--mp-muted); }
.mp-day-count { font-size: 0.72rem; color: var(--mp-muted); }
.mp-today { box-shadow: inset 0 3px 0 var(--mp-accent); }
.mp-today .mp-day-name { color: var(--mp-accent); }

.mp-slot-head {
    padding: 10px 8px;
    font-weight: 600;
    background: var(--mp-soft);
    font-size: 0.8rem;
}

.mp-cell {
    min-height: 88px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background-color 0.12s;
}
.mp-cell-hover { background: color-mix(in srgb, var(--mp-accent) 10%, transparent); outline: 2px dashed var(--mp-accent); outline-offset: -3px; }
.mp-past { opacity: 0.72; }

/* ── Карт ────────────────────────────────────────────────── */
.mp-card {
    padding: 6px 8px;
    border: 1px solid var(--mp-border);
    border-left: 4px solid #94a3b8;
    border-radius: 6px;
    background: var(--mp-surface);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.mp-card:hover { border-color: var(--mp-accent); }
.mp-card-editing { outline: 2px solid var(--mp-accent); }
.mp-card-name { font-weight: 500; line-height: 1.25; word-break: break-word; }
.mp-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: 0.72rem; color: var(--mp-muted); }

/* Түвшний өнгө: Бүгд / Бага / Дунд / Ахлах / Ажилтан / Бэлтгэл */
.mp-lvl-0 { border-left-color: #94a3b8; }
.mp-lvl-1 { border-left-color: #16a34a; }
.mp-lvl-2 { border-left-color: #2563eb; }
.mp-lvl-3 { border-left-color: #9333ea; }
.mp-lvl-4 { border-left-color: #ea580c; }
.mp-lvl-5 { border-left-color: #0891b2; }

.mp-badge {
    padding: 0 6px;
    border-radius: 4px;
    background: var(--mp-soft);
    border: 1px solid var(--mp-border);
    color: inherit;
}
.mp-product-meta .mp-badge { border-left-width: 3px; }

.mp-pos { padding: 0 5px; border-radius: 4px; background: #dcfce7; color: #166534; font-weight: 600; }
.mp-warn { margin-top: 4px; font-size: 0.72rem; color: var(--mp-danger); }

.mp-add {
    border: 1px dashed var(--mp-accent);
    background: transparent;
    color: var(--mp-accent);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 0.75rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* ── Засварын самбар ─────────────────────────────────────── */
.mp-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.25); z-index: 1040; }

.mp-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    z-index: 1041;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    overflow-y: auto;
    background: var(--mp-surface);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
}

.mp-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mp-drawer-title { font-size: 1.05rem; font-weight: 600; }
.mp-field { display: flex; flex-direction: column; gap: 6px; }
.mp-field > label { font-size: 0.78rem; color: var(--mp-muted); }
.mp-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-drawer-actions { display: flex; gap: 8px; align-items: center; margin-top: auto; }

/* ── 2-р шат: загвар, өдрийн үйлдэл, илчлэг ──────────────── */
.mp-grow { flex: 1; min-width: 0; }

.mp-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    background: var(--mp-soft);
}
.mp-panel-title { font-weight: 600; }
.mp-panel-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.mp-template-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.mp-template {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    background: var(--mp-surface);
}
.mp-template-name { font-weight: 500; }

.mp-day-actions { display: flex; gap: 10px; margin-top: 2px; }
.mp-link {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.72rem;
    color: var(--mp-accent);
    cursor: pointer;
}
.mp-link:hover { text-decoration: underline; }
.mp-link-danger { color: var(--mp-danger); }

.mp-total-head { background: var(--mp-soft); }
.mp-total-cell { min-height: 0; background: var(--mp-soft); gap: 2px; }
.mp-total-line { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; }
.mp-total-line .mp-badge { border-left-width: 3px; font-size: 0.7rem; }

/* ── Гарын авлага ────────────────────────────────────────── */
.mp-help-btn { margin-left: auto; }
.mp-toolbar-actions + .mp-help-btn { margin-left: 0; }

.mp-tip {
    padding: 10px 14px;
    border-left: 4px solid var(--mp-accent);
    border-radius: 6px;
    background: var(--mp-soft);
    line-height: 1.5;
}
.mp-tip .mp-link { font-size: 0.8rem; margin-left: 6px; }

.mp-help { width: min(520px, 100vw); gap: 8px; line-height: 1.55; }
.mp-help h4 { margin: 12px 0 2px; font-size: 0.95rem; font-weight: 600; }
.mp-help p { margin: 0; }
.mp-help ul, .mp-help ol { margin: 0; padding-left: 20px; }
.mp-help li { margin: 3px 0; }
.mp-help li ul { margin-top: 4px; }

/* ── Жижиг дэлгэц ────────────────────────────────────────── */
@media (max-width: 1000px) {
    .mp-body { grid-template-columns: minmax(0, 1fr); }
    .mp-products { position: static; }
    .mp-product-list { height: 260px; min-height: 0; }
    .mp-toolbar-actions { margin-left: 0; }
}