/* =========================================================================
   Эрүүл Сургууль — Design system v2 (sidebar layout)
   Reference: design_handoff_eruul_surguuli/Сургуулийн эмчийн систем.dc.html
   ========================================================================= */

:root {
    /* Colors — surface */
    --es-bg:            #F4F3EF;
    --es-bg-alt:        #FAF9F6;
    --es-sidebar-bg:    #F3F6FB;
    --es-sidebar-bd:    #E2E8F2;
    --es-card:          #FFFFFF;
    --es-card-bd:       #E4E2DB;
    --es-divider:       #EDEBE5;
    --es-divider-soft:  #F1EFE9;
    --es-dark:          #26272C;
    --es-dark-2:        #3A3C43;

    /* Colors — primary */
    --es-primary:       #2F62C4;
    --es-primary-hover: #22499A;
    --es-primary-soft:  #E6EDFA;
    --es-primary-soft2: #D5E2F6;
    --es-primary-hover-soft: #E7EEF8;

    /* Colors — semantic */
    --es-success:       #2F7D5C;
    --es-success-soft:  #E6F2EC;
    --es-success-band:  #EAF3EE;
    --es-warn:          #B4531A;
    --es-warn-soft:     #FBEDE3;
    --es-warn-bd:       #F0DCCB;
    --es-warn-ink:      #7C4318;
    --es-danger:        #A32E22;
    --es-danger-soft:   #F8E7E4;
    --es-info:          #54688C;
    --es-info-soft:     #E9EFF8;
    --es-amber:         #C08A2E;

    /* Colors — text */
    --es-ink:           #16211E;
    --es-ink-2:         #26272C;
    --es-ink-3:         #3C4744;
    --es-ink-4:         #4A5652;
    --es-muted:         #5B6763;
    --es-muted-2:       #6B7772;
    --es-muted-3:       #8A938F;
    --es-muted-4:       #9AA5A0;

    /* Colors — form */
    --es-input-bd:      #DCDAD3;
    --es-input-bd-hov:  #CFD6D3;
    --es-input-focus:   #2F62C4;
    --es-neutral-soft:  #EFEEE8;

    /* Radii */
    --es-r-sm: 6px;
    --es-r:    8px;
    --es-r-md: 9px;
    --es-r-lg: 10px;
    --es-r-xl: 12px;
    --es-r-2xl: 14px;
    --es-r-3xl: 16px;
    --es-r-pill: 20px;

    /* Shadows */
    --es-shadow-sm:  0 1px 2px rgba(0, 0, 0, .12);
    --es-shadow:     0 4px 12px rgba(0, 0, 0, .06);
    --es-shadow-lg:  0 12px 40px rgba(32, 26, 34, .07);
    --es-shadow-pop: 0 8px 24px rgba(0, 0, 0, .1);

    /* Layout */
    --es-sidebar-w:   236px;
    --es-main-max:    1180px;
    --es-main-pad-x:  34px;
    --es-main-pad-y:  26px;

    /* Fonts */
    --es-font-sans: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --es-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* =========================================================================
   Reset + base
   ========================================================================= */
.es-scope, .es-scope * { box-sizing: border-box; }
.es-scope {
    background: var(--es-bg);
    font-family: var(--es-font-sans);
    color: var(--es-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.5;
}
.es-scope a { color: var(--es-primary); text-decoration: none; }
.es-scope a:hover { color: var(--es-primary-hover); text-decoration: underline; }
.es-scope input,
.es-scope select,
.es-scope textarea,
.es-scope button { font-family: inherit; font-size: inherit; color: inherit; }
.es-scope input:focus,
.es-scope select:focus,
.es-scope textarea:focus { outline: 2px solid var(--es-primary); outline-offset: 1px; }
.es-scope ::placeholder { color: var(--es-muted-4); }

@keyframes es-fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.es-fade { animation: es-fadeUp .22s ease both; }

/* =========================================================================
   Right-side aside (roster / picker)
   ========================================================================= */
.es-aside {
    width: 268px;
    flex: 0 0 268px;
    position: sticky;
    top: 22px;
    background: var(--es-card);
    border: 1px solid var(--es-card-bd);
    border-radius: var(--es-r-xl);
    padding: 14px 15px;
    max-height: calc(100vh - 44px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--es-shadow-sm);
}
.es-aside__title {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--es-muted-2);
}
.es-aside__caption {
    font-size: 12px;
    color: var(--es-muted-3);
    margin-bottom: 11px;
}
.es-aside__section {
    padding-bottom: 11px;
    border-bottom: 1px solid var(--es-divider-soft);
    margin-bottom: 11px;
}
.es-aside__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    margin-right: -5px;
    padding-right: 5px;
    flex: 1;
}

/* Compact list item (roster row, menu entry, etc.) */
.es-list-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: 1px solid transparent;
    background: #fff;
    color: var(--es-ink);
    border-radius: 9px;
    padding: 7px 10px 7px 8px;
    cursor: pointer;
    text-align: left;
    text-decoration: none !important;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.es-list-item:hover {
    background: var(--es-primary-hover-soft);
    color: var(--es-ink);
    text-decoration: none !important;
}
.es-list-item.is-active {
    border-color: var(--es-primary);
    background: var(--es-primary-soft);
    color: var(--es-primary);
}
.es-list-item.is-active .es-list-item__meta { color: var(--es-primary); }
.es-list-item__body {
    min-width: 0;
    flex: 1;
    line-height: 1.35;
}
.es-list-item__name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.es-list-item__meta {
    display: block;
    font-size: 11.5px;
    color: var(--es-muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty state helper */
.es-empty {
    padding: 14px 4px;
    text-align: center;
    font-size: 12.5px;
    color: var(--es-muted-3);
}

/* =========================================================================
   Legacy wrapper reset — layouts.layout-с шилжсэн хуудсуудад .main_wrap /
   .main_container / .section_container / .main_content_wrap нь давхар зай
   тавихгүй, зөвхөн layout-ынхаа content-т нэг зэрэгт таарна.
   ========================================================================= */
.es-main .main_wrap,
.es-main .main_container,
.es-main .section_container,
.es-main .main_content_wrap {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100%;
    background: transparent;
    display: block;
}
.es-main .main_wrap { margin-top: 0 !important; }

/* Хуучин .card_box → шинэ es-card style тайлбар (өнгө/сүүдэр таарна) */
.es-main .card_box,
.es-main .main_box {
    background: var(--es-card) !important;
    border: 1px solid var(--es-card-bd) !important;
    border-radius: var(--es-r-xl) !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
}
.es-main .card_header { border-bottom: 1px solid var(--es-divider) !important; padding: 14px 18px !important; }
.es-main .card_main { padding: 16px 18px !important; }

/* Breadcrumb нь sidebar-той харилцан таарна */
.es-main .n_breadcrumbs ul { font-size: 13px; color: var(--es-muted-2); }
.es-main .n_breadcrumbs a { color: var(--es-muted-2); }
.es-main .n_breadcrumbs a:hover { color: var(--es-primary); }

/* =========================================================================
   Toast notifications (design-system aligned)
   ========================================================================= */
.es-toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 420px;
}
@keyframes es-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes es-toast-out { to { opacity: 0; transform: translateX(24px); } }
.es-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--es-card-bd);
    border-left: 4px solid var(--es-primary);
    border-radius: 10px;
    box-shadow: var(--es-shadow-lg);
    font-size: 13.5px;
    color: var(--es-ink);
    animation: es-toast-in .18s ease both;
    max-width: 380px;
}
.es-toast.hide { animation: es-toast-out .22s ease forwards; }
.es-toast.success { border-left-color: var(--es-success); }
.es-toast.error   { border-left-color: var(--es-danger); }
.es-toast.warn    { border-left-color: var(--es-warn); }
.es-toast.info    { border-left-color: var(--es-info); }
.es-toast__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background: var(--es-primary-soft);
    color: var(--es-primary);
    font-size: 13px;
    font-weight: 700;
}
.es-toast.success .es-toast__ico { background: var(--es-success-soft); color: var(--es-success); }
.es-toast.error   .es-toast__ico { background: var(--es-danger-soft);  color: var(--es-danger); }
.es-toast.warn    .es-toast__ico { background: var(--es-warn-soft);    color: var(--es-warn); }
.es-toast.info    .es-toast__ico { background: var(--es-info-soft);    color: var(--es-info); }
.es-toast__body { flex: 1; min-width: 0; }
.es-toast__title { font-weight: 600; margin-bottom: 2px; color: var(--es-ink-2); }
.es-toast__msg   { color: var(--es-muted); font-size: 12.5px; line-height: 1.4; }
.es-toast__close {
    border: 0; background: none; color: var(--es-muted-4);
    cursor: pointer; font-size: 16px; line-height: 1;
    padding: 0 2px; margin-left: 4px;
}
.es-toast__close:hover { color: var(--es-ink); }

/* =========================================================================
   Layout — sidebar + main
   ========================================================================= */
.es-app { display: flex; min-height: 100vh; background: var(--es-bg); }

.es-sidebar {
    width: var(--es-sidebar-w);
    flex: 0 0 var(--es-sidebar-w);
    background: var(--es-sidebar-bg);
    border-right: 1px solid var(--es-sidebar-bd);
    color: var(--es-ink-3);
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.es-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    text-decoration: none;
    color: inherit;
}
.es-sidebar__brand img {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: #fff;
    padding: 1px;
    flex: 0 0 34px;
}
.es-sidebar__brand:hover { text-decoration: none; }
.es-sidebar__title { font-size: 14px; font-weight: 600; color: var(--es-ink-2); letter-spacing: -.01em; }
.es-sidebar__subtitle { font-size: 11px; color: var(--es-muted-3); }

.es-sidebar__section { display: flex; flex-direction: column; gap: 2px; }
.es-sidebar__label {
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--es-muted-4);
    padding: 0 10px 8px;
}
.es-nav__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    border: 0; background: transparent;
    border-radius: 8px; padding: 9px 10px;
    cursor: pointer; font-size: 13.5px;
    color: var(--es-muted);
    font-weight: 400;
    text-decoration: none !important;
    transition: background .12s ease, color .12s ease;
}
.es-nav__item:hover { background: var(--es-primary-hover-soft); color: var(--es-ink-3); }
.es-nav__item.is-active { background: var(--es-primary); color: #fff !important; font-weight: 500; }
.es-nav__item .es-nav__icon { width: 16px; text-align: center; font-size: 13px; opacity: .9; }
.es-nav__item .es-nav__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-nav__badge {
    font-size: 11px; font-family: var(--es-font-mono);
    background: var(--es-primary); color: #fff;
    border-radius: var(--es-r-pill);
    padding: 1px 7px;
}
.es-nav__item.is-active .es-nav__badge { background: rgba(255, 255, 255, .22); }

.es-sidebar__group.submenu {
    display: flex; flex-direction: column; gap: 2px;
    padding-left: 26px;
    border-left: 1px solid var(--es-sidebar-bd);
    margin-left: 18px;
}
.es-sidebar__group.submenu .es-nav__item { padding: 7px 10px; font-size: 12.5px; }

.es-sidebar__foot {
    margin-top: auto;
    border-top: 1px solid var(--es-sidebar-bd);
    padding-top: 14px;
    display: flex; align-items: center; gap: 10px;
}
.es-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--es-primary-soft); color: var(--es-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
    flex: 0 0 30px;
}
.es-avatar--lg { width: 58px; height: 58px; font-size: 19px; }
.es-avatar--md { width: 34px; height: 34px; font-size: 12px; background: var(--es-neutral-soft); color: var(--es-ink-4); }
.es-avatar--sm { width: 28px; height: 28px; font-size: 11px; background: var(--es-neutral-soft); color: var(--es-ink-4); }
.es-sidebar__foot-name { font-size: 12.5px; color: var(--es-ink-3); }
.es-sidebar__foot-role { font-size: 11px; color: var(--es-muted-3); }
.es-icon-btn {
    margin-left: auto;
    border: 0; background: none;
    color: var(--es-muted-4);
    font-size: 14px; cursor: pointer;
}
.es-icon-btn:hover { color: var(--es-primary); }

.es-main {
    flex: 1; min-width: 0;
    padding: var(--es-main-pad-y) var(--es-main-pad-x) 60px;
    max-width: var(--es-main-max);
}

/* =========================================================================
   Page header
   ========================================================================= */
.es-page-eyebrow { font-size: 12px; color: var(--es-muted-2); letter-spacing: .02em; }
.es-page-title { margin: 4px 0 0; font-size: 27px; font-weight: 600; letter-spacing: -.02em; color: var(--es-ink-2); }
.es-page-title--sm { font-size: 23px; }
.es-page-title--lg { font-size: 42px; line-height: 1.15; letter-spacing: -.03em; }
.es-page-sub { margin: 0 0 20px; font-size: 13.5px; color: var(--es-muted-2); }
.es-header-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
}

/* =========================================================================
   Buttons
   ========================================================================= */
.es-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; background: var(--es-primary);
    color: #fff !important;
    font-size: 13.5px; font-weight: 500;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: var(--es-shadow-sm);
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    text-decoration: none !important;
    line-height: 1.15;
}
.es-btn:hover { background: var(--es-primary-hover); color: #fff !important; }
.es-btn * { color: inherit; }
.es-btn:disabled { background: var(--es-muted-3); cursor: not-allowed; box-shadow: none; }
.es-btn--lg { padding: 12px 24px; font-size: 14px; border-radius: 9px; }
.es-btn--sm { padding: 6px 12px; font-size: 12.5px; border-radius: 7px; box-shadow: none; }
.es-btn--block { width: 100%; justify-content: center; }

.es-btn--outline {
    background: #fff;
    color: var(--es-ink-3) !important;
    border: 1px solid var(--es-input-bd-hov);
    box-shadow: none;
}
.es-btn--outline:hover { border-color: var(--es-primary); color: var(--es-primary) !important; background: #fff; }

.es-btn--soft {
    background: var(--es-primary-soft);
    color: var(--es-primary) !important;
    border: 1px solid var(--es-primary);
    box-shadow: none;
}
.es-btn--soft:hover { background: var(--es-primary-soft2); color: var(--es-primary) !important; }

.es-btn--ghost {
    background: transparent; color: var(--es-muted-2);
    border: 0; box-shadow: none;
    padding: 6px 10px;
}
.es-btn--ghost:hover { color: var(--es-primary); background: var(--es-primary-hover-soft); }

.es-btn--danger { background: var(--es-danger); }
.es-btn--danger:hover { background: #7d2418; }

/* =========================================================================
   Form controls
   ========================================================================= */
.es-input,
.es-select,
.es-textarea {
    width: 100%;
    border: 1px solid var(--es-input-bd);
    background: #fff;
    border-radius: 9px;
    padding: 11px 13px;
    font-size: 14px;
    color: var(--es-ink);
}
.es-textarea { resize: vertical; line-height: 1.5; }
.es-input--mono { font-family: var(--es-font-mono); }
.es-input--sm { padding: 9px 11px; font-size: 13.5px; border-radius: 8px; }

.es-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.es-field__label { font-size: 12.5px; color: var(--es-muted); }
.es-field__hint { font-size: 11.5px; color: var(--es-muted-3); margin-top: 2px; }

.es-checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--es-muted); cursor: pointer;
}
.es-checkbox input { width: 15px; height: 15px; accent-color: var(--es-primary); }

/* =========================================================================
   Cards
   ========================================================================= */
.es-card {
    background: var(--es-card);
    border: 1px solid var(--es-card-bd);
    border-radius: var(--es-r-xl);
    padding: 16px 18px;
}
.es-card--flush { padding: 0; overflow: hidden; }
.es-card--pad-lg { padding: 20px 22px; }
.es-card__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--es-divider);
}
.es-card__title {
    margin: 0; font-size: 14.5px; font-weight: 600; color: var(--es-ink-2);
}
.es-card__title--sm {
    font-size: 13px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--es-muted-2);
}
.es-card__caption { font-size: 12px; color: var(--es-muted-2); }

/* =========================================================================
   Stat card / KPI
   ========================================================================= */
.es-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.es-stat {
    background: var(--es-card);
    border: 1px solid var(--es-card-bd);
    border-radius: 10px;
    padding: 14px 16px;
}
.es-stat__label { font-size: 11.5px; color: var(--es-muted-2); margin-bottom: 6px; }
.es-stat__value {
    font-family: var(--es-font-mono);
    font-size: 26px; font-weight: 500;
    letter-spacing: -.02em; color: var(--es-ink);
    line-height: 1.15;
}
.es-stat__note { font-size: 11.5px; color: var(--es-muted-2); margin-top: 3px; }
.es-stat__note--warn { color: var(--es-warn); }
.es-stat__note--danger { color: var(--es-danger); }
.es-stat__note--success { color: var(--es-success); }
.es-stat--accent { border-left: 3px solid var(--es-primary); }
.es-stat--accent-warn    { border-left: 3px solid var(--es-warn); }
.es-stat--accent-danger  { border-left: 3px solid var(--es-danger); }
.es-stat--accent-success { border-left: 3px solid var(--es-success); }

/* =========================================================================
   Chip
   ========================================================================= */
.es-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--es-input-bd);
    background: #fff;
    color: var(--es-muted);
    font-size: 13px; font-weight: 500;
    padding: 7px 15px;
    border-radius: var(--es-r-pill);
    cursor: pointer;
    line-height: 1.15;
    text-decoration: none !important;
}
.es-chip:hover { border-color: var(--es-primary); color: var(--es-primary); }
.es-chip.is-active {
    border-color: var(--es-primary);
    background: var(--es-primary-soft);
    color: var(--es-primary);
}
.es-chip--sm { font-size: 12px; padding: 4px 11px; }

.es-tag {
    display: inline-flex; align-items: center;
    font-size: 11px; border-radius: 5px; padding: 2px 7px;
    background: var(--es-neutral-soft); color: var(--es-muted);
    line-height: 1.4;
}
.es-tag--danger { background: var(--es-danger-soft); color: var(--es-danger); }
.es-tag--warn   { background: var(--es-warn-soft); color: var(--es-warn); }
.es-tag--info   { background: var(--es-info-soft); color: var(--es-info); }
.es-tag--success{ background: var(--es-success-soft); color: var(--es-success); }
.es-tag--primary{ background: var(--es-primary-soft); color: var(--es-primary); }

/* =========================================================================
   Table
   ========================================================================= */
.es-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.es-table thead th {
    text-align: left; padding: 11px 18px;
    border-bottom: 1px solid var(--es-divider);
    font-size: 11.5px; color: var(--es-muted-2);
    letter-spacing: .03em; text-transform: uppercase;
    font-weight: 500;
    background: transparent;
}
.es-table tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--es-divider-soft);
    color: var(--es-ink);
}
.es-table tbody tr:hover { background: var(--es-bg-alt); }
.es-table tbody tr:last-child td { border-bottom: 0; }

.es-list-row {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--es-divider-soft);
}
.es-list-row:last-child { border-bottom: 0; }
.es-list-row:hover { background: var(--es-bg-alt); }

/* Reg number / value display */
.es-mono { font-family: var(--es-font-mono); }

/* =========================================================================
   Progress bar
   ========================================================================= */
.es-progress {
    height: 7px; border-radius: 4px;
    background: var(--es-divider); overflow: hidden;
}
.es-progress__bar { height: 100%; background: var(--es-primary); }
.es-progress__bar--warn    { background: var(--es-warn); }
.es-progress__bar--amber   { background: var(--es-amber); }
.es-progress__bar--success { background: var(--es-success); }

/* =========================================================================
   Alerts
   ========================================================================= */
.es-alert {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--es-info-soft); color: var(--es-info);
    font-size: 13px;
}
.es-alert__dot { font-size: 13px; line-height: 1.2; }
.es-alert__title { font-size: 13px; font-weight: 500; }
.es-alert__body { font-size: 12px; color: var(--es-muted); margin-top: 2px; line-height: 1.45; }
.es-alert--danger { background: var(--es-danger-soft); color: var(--es-danger); }
.es-alert--warn   { background: var(--es-warn-soft); color: var(--es-warn); }
.es-alert--info   { background: var(--es-info-soft); color: var(--es-info); }

.es-banner {
    display: flex; gap: 8px; align-items: center;
    background: var(--es-warn-soft);
    border: 1px solid var(--es-warn-bd);
    border-radius: 9px;
    padding: 10px 14px;
    color: var(--es-warn-ink);
    font-size: 13px;
}

/* =========================================================================
   Grid helpers
   ========================================================================= */
.es-grid { display: grid; gap: 12px; }
.es-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.es-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.es-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.es-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.es-grid--auto-160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.es-grid--auto-180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.es-grid--auto-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.es-cluster { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.es-stack { display: flex; flex-direction: column; gap: 16px; }
.es-stack-sm { display: flex; flex-direction: column; gap: 10px; }

/* =========================================================================
   Mobile top-bar + hamburger drawer (only shown < 720px)
   ========================================================================= */
.es-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid var(--es-sidebar-bd);
    position: sticky;
    top: 0;
    z-index: 40;
    gap: 12px;
}
.es-topbar__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.es-topbar__brand img { width: 28px; height: 28px; border-radius: 6px; background: #fff; padding: 1px; }
.es-topbar__title { font-size: 14px; font-weight: 600; color: var(--es-ink-2); letter-spacing: -.01em; }
.es-topbar__burger,
.es-topbar__more {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; background: none;
    color: var(--es-ink-3); cursor: pointer;
    border-radius: 8px; font-size: 20px;
    flex: 0 0 40px;
}
.es-topbar__burger:hover, .es-topbar__more:hover { background: var(--es-primary-hover-soft); color: var(--es-primary); }

.es-scrim {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .48);
    z-index: 45;
    opacity: 0;
    transition: opacity .18s ease;
}
.es-scrim.is-open { display: block; opacity: 1; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
    :root { --es-sidebar-w: 200px; --es-main-pad-x: 24px; }
    .es-grid--3, .es-grid--4, .es-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    :root {
        --es-main-pad-x: 14px;
        --es-main-pad-y: 14px;
    }
    /* Mobile drawer — sidebar hidden by default; overlay when opened */
    .es-topbar { display: flex; }
    .es-app { flex-direction: column; }
    .es-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 260px; flex: 0 0 260px; height: 100vh;
        transform: translateX(-100%);
        transition: transform .22s ease;
        z-index: 50;
        overflow-y: auto;
        box-shadow: 8px 0 24px rgba(0,0,0,.08);
    }
    .es-sidebar.is-open { transform: translateX(0); }

    .es-main { padding: 14px; max-width: 100%; width: 100%; }

    /* Grid stacks */
    .es-grid--2, .es-grid--3, .es-grid--4, .es-grid--5,
    .es-grid--auto-160, .es-grid--auto-180, .es-grid--auto-220 { grid-template-columns: 1fr !important; }
    .es-stats { grid-template-columns: 1fr 1fr; }
    .es-header-row { flex-direction: column; align-items: flex-start; }

    /* Cards & typography — smaller */
    .es-page-title { font-size: 22px; }
    .es-page-title--lg { font-size: 30px; }
    .es-card { padding: 14px; }
    .es-card--pad-lg { padding: 16px; }
    .es-card__head { padding: 12px 14px; }
    .es-stat__value { font-size: 22px; }

    /* Tables — horizontal scroll wrapper */
    .es-card--flush { overflow-x: auto; }

    /* Sticky action bar less padding */
    .es-toast-stack { top: 12px; right: 12px; left: 12px; max-width: none; }
    .es-toast { max-width: none; }

    /* addScreening aside stacks below main */
    .es-aside {
        position: relative;
        width: 100%;
        flex: 1 1 auto !important;
        max-height: 320px;
    }
    .es-visit-layout > div:first-child { max-width: 100% !important; }

    /* Two-column dashboard grids stack on mobile */
    .es-main div[style*="grid-template-columns:1.35fr 1fr"],
    .es-main div[style*="grid-template-columns:1fr 1.25fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Table horizontal-scroll на любой ширине — data tables shouldn't force page-wide overflow */
.es-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.es-scroll-x > * { min-width: 640px; }