/* ============================================================
   EduSmart — Modern Redesign (Bootstrap 5 based)
   Light, minimal, blue accent. Loads AFTER legacy CSS to override.
   ============================================================ */

:root {
    --es-bg: #f5f7fb;
    --es-surface: #ffffff;
    --es-surface-2: #f9fafc;
    --es-border: #e5e9f2;
    --es-border-strong: #d6dbe7;
    --es-text: #1f2937;
    --es-text-muted: #6b7280;
    --es-text-soft: #9ca3af;
    --es-primary: #2563eb;
    --es-primary-hover: #1d4ed8;
    --es-primary-soft: #eff6ff;
    --es-success: #10b981;
    --es-success-soft: #ecfdf5;
    --es-warning: #f59e0b;
    --es-warning-soft: #fffbeb;
    --es-danger: #ef4444;
    --es-danger-soft: #fef2f2;
    --es-info: #06b6d4;
    --es-radius: 10px;
    --es-radius-sm: 6px;
    --es-radius-lg: 16px;
    --es-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --es-shadow: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .04);
    --es-shadow-md: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .05);
    --es-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, .1), 0 8px 10px -6px rgba(15, 23, 42, .06);
    --es-sidebar-width: 260px;
    --es-sb-bg-1: #0F172A;
    --es-sb-bg-2: #1E293B;
    --es-sb-primary: #2563EB;
    --es-sb-accent: #38BDF8;
    --es-sb-fg: #F8FAFC;
    --es-sb-muted: rgba(248, 250, 252, .55);
    --es-sb-soft: rgba(248, 250, 252, .08);
    --es-sb-border: rgba(248, 250, 252, .06);
    --es-topbar-height: 64px;
    --es-font: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Reset / typography ---------- */
.es-redesign body,
body.es-redesign,
.es-layout {
    background: var(--es-bg) !important;
    color: var(--es-text);
    font-family: var(--es-font);
    font-size: 14px;
    line-height: 1.5;
    overflow: visible !important;
    min-height: 100vh;
}
html, body.es-redesign { overflow-y: auto; }

.es-layout *:not(i):not(.fa):not([class*="fa-"]):not(.fas):not(.far):not(.fab):not(.fal):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: var(--es-font);
}
.es-layout i,
.es-layout .fa,
.es-layout [class^="fa-"],
.es-layout [class*=" fa-"] {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
}
.es-layout .fab, .es-layout .fa-brands {
    font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands' !important;
}

.es-layout h1, .es-layout h2, .es-layout h3,
.es-layout h4, .es-layout h5, .es-layout h6 {
    color: var(--es-text);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 .5rem;
}
.es-layout h1 { font-size: 1.75rem; }
.es-layout h2 { font-size: 1.5rem; }
.es-layout h3 { font-size: 1.25rem; }
.es-layout h4 { font-size: 1.125rem; }
.es-layout h5 { font-size: 1rem; }
.es-layout h6 { font-size: .875rem; }
.es-layout p { margin: 0 0 .75rem; }
.es-layout a { color: #0F172A; text-decoration: none; }
.es-layout a:hover { color: #2563EB; }

/* ---------- App shell ---------- */
.es-shell {
    display: flex;
    min-height: 100vh;
}

/* ============================================================
   PREMIUM LIGHT SIDEBAR — Linear / Stripe / Notion 2026 style
   ============================================================ */
:root {
    --sb-bg: #FFFFFF;
    --sb-bg-soft: #F8FAFC;
    --sb-bg-muted: #F1F5F9;
    --sb-text: #0F172A;
    --sb-text-2: #334155;
    --sb-muted: #64748B;
    --sb-primary: #2563EB;
    --sb-primary-2: #3B82F6;
    --sb-primary-3: #60A5FA;
    --sb-border: #E2E8F0;
    --sb-border-soft: #EEF2F7;
    --sb-radius: 14px;
    --sb-radius-sm: 10px;
}

.es-sidebar {
    width: var(--es-sidebar-width);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1040;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    color: var(--sb-text);
    border-right: 1px solid var(--sb-border-soft);
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.es-sidebar::-webkit-scrollbar { width: 4px; }
.es-sidebar::-webkit-scrollbar-track { background: transparent; }
.es-sidebar::-webkit-scrollbar-thumb { background: var(--sb-border); border-radius: 4px; }
.es-sidebar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* ---------- Brand (logo + name) — premium card ---------- */
.es-sidebar__brand {
    display: flex !important;
    align-items: center;
    gap: .8rem;
    padding: 1.1rem 1.1rem;
    margin: .85rem .85rem .5rem;
    border-radius: var(--sb-radius);
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid var(--sb-border-soft);
    color: var(--sb-text) !important;
    text-decoration: none !important;
    transition: border-color .2s ease, background .2s ease;
}
.es-sidebar__brand:hover {
    color: var(--sb-text) !important;
    border-color: var(--sb-border);
    background: #FFFFFF;
}
.es-sidebar__brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    padding: 6px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563EB 0%, #6366F1 50%, #8B5CF6 100%);
    box-shadow: 0 6px 14px -4px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.25);
    border: 1px solid rgba(255,255,255,.5);
}
.es-sidebar__brand b {
    color: var(--sb-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
    display: block;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background: none;
}
.es-sidebar__brand small {
    display: block;
    color: var(--sb-muted);
    font-size: .7rem;
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: .01em;
}

/* ---------- Chips row ---------- */
.es-sidebar__chips {
    display: flex;
    gap: .35rem;
    padding: .35rem 1rem .15rem;
    flex-wrap: wrap;
}
.es-sb-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    font-size: .68rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--sb-bg-muted);
    border: 1px solid var(--sb-border-soft);
    color: var(--sb-text-2);
    letter-spacing: .01em;
}
.es-sb-chip i {
    font-size: .6rem !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: none !important;
    border: 0 !important;
    color: inherit !important;
    padding: 0 !important;
}
.es-sb-chip--online {
    color: #047857;
    background: #ECFDF5;
    border-color: #A7F3D0;
}
.es-sb-chip--online .es-sb-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
    animation: es-pulse 2s ease-in-out infinite;
}
.es-sb-chip--ver {
    color: #7C3AED;
    background: #F5F3FF;
    border-color: #DDD6FE;
}
.es-sb-chip--course {
    color: #1D4ED8;
    background: #EFF6FF;
    border-color: #BFDBFE;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.es-sb-chip--user {
    color: #B45309;
    background: #FFFBEB;
    border-color: #FDE68A;
}
@keyframes es-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* ---------- Section label ---------- */
.es-sidebar__section {
    padding: 1.1rem 1.5rem .55rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sb-muted);
}

/* ---------- Nav list ---------- */
.es-nav {
    list-style: none;
    padding: 0 .65rem 1rem;
    margin: 0;
}
.es-nav li { list-style: none; margin-bottom: 3px; }

/* MENU ITEM — proper flex row with chevron always at end */
.es-nav__item {
    display: flex !important;
    align-items: center !important;
    gap: .7rem;
    padding: .55rem .7rem;
    color: var(--sb-text-2);
    font-size: .88rem;
    font-weight: 500;
    border-radius: var(--sb-radius);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
    text-decoration: none !important;
    position: relative;
    letter-spacing: -.005em;
    width: 100%;
    box-sizing: border-box;
}
/* Spacer between text and chevron — pushes chevron to far right */
.es-nav__item > span:not(.es-nav__badge) {
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: .5rem;
}
.es-nav__item:hover {
    background: var(--sb-bg-muted);
    color: var(--sb-text);
}

/* Icon tile — soft light */
.es-nav__item > i:first-child,
.es-nav__item > .es-nav__icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: var(--sb-muted);
    background: var(--sb-bg-muted);
    border: 1px solid var(--sb-border-soft);
    border-radius: 9px;
    flex-shrink: 0;
    flex-grow: 0;
    transition: background-color .2s, color .2s, border-color .2s;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden;
}
.es-nav__item:hover > i:first-child,
.es-nav__item:hover > .es-nav__icon {
    color: var(--sb-primary);
    background: #DBEAFE;
    border-color: #BFDBFE;
}

/* Active item — premium indigo/blue gradient */
.es-nav__item.is-active,
.es-nav__item.acta {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: #1E40AF;
    font-weight: 600;
}
.es-nav__item.is-active:hover,
.es-nav__item.acta:hover {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #1E40AF;
}
.es-nav__item.is-active::before,
.es-nav__item.acta::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    background: linear-gradient(180deg, #2563EB, #1E40AF);
    border-radius: 0 4px 4px 0;
}
.es-nav__item.is-active > i:first-child,
.es-nav__item.acta > i:first-child {
    color: #fff !important;
    background: linear-gradient(135deg, #2563EB, #1E40AF) !important;
    border-color: transparent !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, .3) !important;
}
.es-nav__item.is-active .es-nav__chev,
.es-nav__item.acta .es-nav__chev {
    color: #1E40AF !important;
    opacity: .9;
}

/* Notification badge */
.es-nav__badge {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #EF4444;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* CHEVRON — always at far right */
.es-nav__chev {
    flex-shrink: 0;
    margin-left: .5rem !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    background: none !important;
    border: 0 !important;
    font-size: .75rem !important;
    color: var(--sb-muted) !important;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    opacity: .55;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.es-nav__item:hover .es-nav__chev { opacity: 1; color: var(--sb-text-2) !important; }
.es-nav__group.is-open > .es-nav__item .es-nav__chev {
    transform: rotate(180deg);
    color: var(--sb-primary) !important;
    opacity: 1;
}

/* ---------- Sidebar footer (profile mini card) ---------- */
.es-sidebar__footer {
    margin: auto .85rem .85rem;
    padding: .75rem .85rem;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid var(--sb-border-soft);
    border-radius: var(--sb-radius);
    display: flex;
    align-items: center;
    gap: .65rem;
    transition: border-color .2s;
}
.es-sidebar__footer:hover { border-color: var(--sb-border); }
.es-sidebar__footer .es-avatar {
    background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-3));
    color: #fff;
    flex-shrink: 0;
}
.es-sidebar__footer-name { color: var(--sb-text); font-weight: 600; font-size: .82rem; line-height: 1.15; }
.es-sidebar__footer-role { color: var(--sb-muted); font-size: .68rem; margin-top: 2px; }

.es-nav__sub {
    list-style: none;
    padding: .15rem 0 .35rem;
    margin: 0;
    background: var(--es-surface-2);
    display: none !important;
}
.es-nav__group.is-open > .es-nav__sub { display: block !important; }

/* Block legacy hover triggers from showing submenu */
.es-sidebar ul:hover > ul,
.es-sidebar li:hover > ul,
.es-nav__group:hover > .es-nav__sub,
.es-nav li:hover > ul {
    display: none !important;
}
.es-nav__group.is-open:hover > .es-nav__sub,
.es-nav__group.is-open > .es-nav__sub { display: block !important; }

/* Sidebar icon visibility — ensure FA icons render */
.es-topbar i,
.es-btn i {
    font-style: normal !important;
    display: inline-block !important;
    line-height: 1;
}

/* ---------- Submenu — compact, dark elegant ---------- */
.es-nav__sub {
    list-style: none;
    padding: .15rem 0 .25rem .4rem !important;
    margin: .15rem 0 .25rem .85rem !important;
    background: transparent !important;
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--sb-border-soft) !important;
}
@keyframes es-submenu-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.es-nav__group.is-open > .es-nav__sub {
    animation: es-submenu-slide .22s cubic-bezier(.4, 0, .2, 1);
}
.es-nav__sub a {
    display: flex !important;
    align-items: center !important;
    gap: .55rem;
    padding: .4rem .65rem !important;
    font-size: .82rem;
    color: #334155;
    text-decoration: none !important;
    border-radius: var(--sb-radius-sm);
    margin: 1px .35rem 1px 0;
    transition: color .15s ease, background .15s ease;
    border-left: 0 !important;
    position: relative;
    font-weight: 500;
}
.es-nav__sub a::before { content: none !important; }

/* Submenu icon — small, elegant, no tile bg */
.es-nav__sub-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    background: none !important;
    border: 0 !important;
    color: #94A3B8 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    transition: color .15s ease;
    padding: 0 !important;
    margin: 0 !important;
}

.es-nav__sub a:hover {
    color: var(--sb-primary);
    background: #EFF6FF;
}
.es-nav__sub a:hover .es-nav__sub-icon {
    color: var(--sb-primary) !important;
}

/* Active submenu — soft blue */
.es-nav__sub a.acta,
.es-nav__sub a.is-active {
    color: var(--sb-primary) !important;
    font-weight: 600 !important;
    background: #EFF6FF !important;
}
.es-nav__sub a.acta .es-nav__sub-icon,
.es-nav__sub a.is-active .es-nav__sub-icon {
    color: var(--sb-primary) !important;
}
.es-nav__sub a.acta::after,
.es-nav__sub a.is-active::after {
    content: '';
    position: absolute;
    left: -.43rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--sb-primary);
    border-radius: 2px;
}

.es-nav__bullet { display: none !important; }

/* ---------- Topbar ---------- */
.es-topbar {
    position: sticky;
    top: 0;
    height: var(--es-topbar-height);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--es-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    z-index: 1030;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}
.es-topbar__toggle {
    background: none;
    border: 0;
    color: var(--es-text);
    font-size: 1.25rem;
    cursor: pointer;
    padding: .4rem .5rem;
    border-radius: var(--es-radius-sm);
}
.es-topbar__toggle:hover { background: var(--es-surface-2); }
.es-topbar__title { font-size: 1rem; font-weight: 600; color: var(--es-text); margin: 0; }
.es-topbar__spacer { flex: 1; }

.es-topbar__icon-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--es-radius-sm);
    color: var(--es-text-muted);
    background: var(--es-surface-2);
    border: 1px solid var(--es-border);
    cursor: pointer;
    transition: all .15s;
    position: relative;
}
.es-topbar__icon-btn:hover { color: var(--es-primary); border-color: var(--es-primary); }

.es-sidebar__old {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    margin: .65rem .85rem .35rem;
    padding: .6rem .85rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    color: #fff !important;
    font-size: .82rem; font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 4px 12px -4px rgba(37,99,235,.5);
    transition: transform .15s, box-shadow .15s, filter .15s;
    white-space: nowrap;
}
.es-sidebar__old:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 16px -4px rgba(37,99,235,.6); color: #fff; }
.es-sidebar__old i { font-size: .9rem; }
.es-topbar__icon-btn .es-badge-dot {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--es-danger); border: 2px solid var(--es-surface);
}

.es-topbar__user {
    display: flex; align-items: center; gap: .65rem;
    padding: .35rem .75rem .35rem .35rem;
    border-radius: 999px;
    background: var(--es-surface-2);
    border: 1px solid var(--es-border);
    cursor: pointer;
}
.es-topbar__user:hover { border-color: var(--es-primary); }
.es-topbar__user img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.es-topbar__user span { font-size: .85rem; font-weight: 600; color: var(--es-text); }
.es-topbar__user small { display: block; color: var(--es-text-muted); font-size: .7rem; font-weight: 500; }

.es-lang { display: inline-flex; gap: .25rem; }
.es-lang a { display: inline-flex; padding: 4px; border-radius: 50%; opacity: .55; transition: opacity .15s; }
.es-lang a:hover, .es-lang a.is-active { opacity: 1; }
.es-lang img { width: 22px; height: 22px; border-radius: 50%; }

/* ---------- Main content ---------- */
.es-main {
    margin-left: var(--es-sidebar-width);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
.es-content {
    padding: 1.5rem;
    flex: 1;
}

/* ---------- Page header ---------- */
.es-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.es-page-header h1 { font-size: 1.5rem; margin: 0; }
.es-page-header__sub { color: var(--es-text-muted); font-size: .85rem; }
.es-page-header__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.es-breadcrumb {
    display: flex; gap: .35rem; align-items: center;
    color: var(--es-text-muted); font-size: .8rem;
    margin-bottom: .25rem;
}
.es-breadcrumb a { color: var(--es-text-muted); }
.es-breadcrumb a:hover { color: var(--es-primary); }
.es-breadcrumb .sep { color: var(--es-text-soft); }

/* ---------- Card ---------- */
.es-card {
    background: var(--es-surface);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    box-shadow: var(--es-shadow-sm);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.es-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--es-border);
    gap: 1rem;
    flex-wrap: wrap;
}
.es-card__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--es-text); }
.es-card__body { padding: 1.25rem; }
.es-card__footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--es-border);
    background: var(--es-surface-2);
    display: flex; gap: .5rem; justify-content: flex-end;
}

/* ---------- Stat cards ---------- */
.es-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.es-stat {
    background: var(--es-surface);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    padding: 1.1rem 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: var(--es-shadow-sm);
    transition: transform .15s, box-shadow .15s;
}
.es-stat:hover { box-shadow: var(--es-shadow); }
.es-stat__icon {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--es-radius);
    font-size: 1.25rem;
    background: var(--es-primary-soft);
    color: var(--es-primary);
    flex-shrink: 0;
}
.es-stat__icon--success { background: var(--es-success-soft); color: var(--es-success); }
.es-stat__icon--warning { background: var(--es-warning-soft); color: var(--es-warning); }
.es-stat__icon--danger { background: var(--es-danger-soft); color: var(--es-danger); }
.es-stat__label { font-size: .75rem; color: var(--es-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.es-stat__value { font-size: 1.55rem; font-weight: 700; color: var(--es-text); line-height: 1.1; }
.es-stat__trend { font-size: .75rem; color: var(--es-success); font-weight: 600; }
.es-stat__trend.is-down { color: var(--es-danger); }

/* ---------- Buttons ---------- */
.es-btn,
.es-layout .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    border-radius: var(--es-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}
.es-btn-primary,
.es-layout .btn-primary {
    background: var(--es-primary) !important;
    border-color: var(--es-primary) !important;
    color: #fff !important;
}
.es-btn-primary:hover,
.es-layout .btn-primary:hover {
    background: var(--es-primary-hover) !important;
    border-color: var(--es-primary-hover) !important;
    color: #fff !important;
}
.es-btn-secondary,
.es-layout .btn-secondary {
    background: var(--es-surface) !important;
    border-color: var(--es-border-strong) !important;
    color: var(--es-text) !important;
    margin: 0 !important;
    padding: .5rem 1rem !important;
}
.es-btn-secondary:hover,
.es-layout .btn-secondary:hover {
    background: var(--es-surface-2) !important;
    border-color: var(--es-primary) !important;
    color: var(--es-primary) !important;
}
.es-btn-success, .es-layout .btn-success { background: var(--es-success) !important; border-color: var(--es-success) !important; color: #fff !important; }
.es-btn-danger, .es-layout .btn-danger { background: var(--es-danger) !important; border-color: var(--es-danger) !important; color: #fff !important; }
.es-btn-warning, .es-layout .btn-warning { background: var(--es-warning) !important; border-color: var(--es-warning) !important; color: #fff !important; }
.es-btn-info, .es-layout .btn-info { background: var(--es-info) !important; border-color: var(--es-info) !important; color: #fff !important; }

.es-btn-outline {
    background: transparent !important;
    border-color: var(--es-border-strong) !important;
    color: var(--es-text) !important;
}
.es-btn-outline:hover { border-color: var(--es-primary) !important; color: var(--es-primary) !important; }

.es-btn-sm, .es-layout .btn-sm { padding: .3rem .65rem; font-size: .78rem; }
.es-btn-lg, .es-layout .btn-lg { padding: .7rem 1.5rem; font-size: 1rem; }
.es-btn-icon { width: 36px; height: 36px; padding: 0; }

/* ---------- Forms ---------- */
.es-layout .form-group { margin-bottom: 1rem; }
.es-layout label, .es-layout .control-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--es-text);
    margin-bottom: .35rem;
}
.es-layout .form-control,
.es-layout input[type="text"],
.es-layout input[type="email"],
.es-layout input[type="password"],
.es-layout input[type="number"],
.es-layout input[type="tel"],
.es-layout input[type="date"],
.es-layout input[type="time"],
.es-layout input[type="datetime-local"],
.es-layout input[type="search"],
.es-layout select,
.es-layout textarea {
    width: 100%;
    padding: .55rem .85rem;
    font-size: .875rem;
    color: var(--es-text);
    background: var(--es-surface);
    border: 1px solid var(--es-border-strong);
    border-radius: var(--es-radius-sm);
    transition: border-color .15s, box-shadow .15s;
    line-height: 1.4;
    box-shadow: none;
}
.es-layout .form-control:focus,
.es-layout input:focus,
.es-layout select:focus,
.es-layout textarea:focus {
    border-color: var(--es-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    outline: 0;
}
.es-layout .form-control[disabled],
.es-layout input[disabled],
.es-layout select[disabled],
.es-layout textarea[disabled] {
    background: var(--es-surface-2);
    color: var(--es-text-muted);
}
.es-layout .help-block, .es-layout .form-text {
    font-size: .75rem;
    color: var(--es-text-muted);
    margin-top: .25rem;
}
.es-layout .has-error .form-control { border-color: var(--es-danger); }
.es-layout .has-error .help-block { color: var(--es-danger); }

/* select2 alignment */
.es-layout .select2-container--default .select2-selection--single {
    border: 1px solid var(--es-border-strong);
    border-radius: var(--es-radius-sm);
    height: 38px;
}
.es-layout .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: .85rem;
    color: var(--es-text);
}
.es-layout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

/* ---------- Tables ---------- */
.es-table-wrap { overflow-x: auto; }
.es-layout .table,
.es-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    font-size: .875rem;
}
.es-layout .table thead th,
.es-table thead th {
    background: var(--es-surface-2);
    color: var(--es-text-muted);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--es-border);
    border-top: 0;
    white-space: nowrap;
}
.es-layout .table tbody td,
.es-table tbody td {
    padding: .8rem 1rem;
    border-top: 1px solid var(--es-border);
    color: var(--es-text);
    vertical-align: middle;
}
.es-layout .table tbody tr:hover,
.es-table tbody tr:hover { background: transparent; }
.es-layout .table-striped tbody tr:nth-of-type(odd) { background: var(--es-surface-2); }

.es-layout .summary { color: var(--es-text-muted); font-size: .8rem; margin: 1rem 0; }
.es-layout .pagination { gap: .25rem; }
.es-layout .pagination li > a, .es-layout .pagination li > span {
    border-radius: var(--es-radius-sm) !important;
    border: 1px solid var(--es-border) !important;
    color: var(--es-text) !important;
    padding: .4rem .75rem !important;
    margin: 0 !important;
    background: var(--es-surface) !important;
}
.es-layout .pagination li.active > a,
.es-layout .pagination li.active > span {
    background: var(--es-primary) !important;
    border-color: var(--es-primary) !important;
    color: #fff !important;
}

/* ---------- Badges ---------- */
.es-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--es-primary-soft);
    color: var(--es-primary);
    line-height: 1.3;
}
.es-badge--success { background: var(--es-success-soft); color: var(--es-success); }
.es-badge--warning { background: var(--es-warning-soft); color: var(--es-warning); }
.es-badge--danger  { background: var(--es-danger-soft); color: var(--es-danger); }
.es-badge--neutral { background: var(--es-surface-2); color: var(--es-text-muted); }

/* ---------- Alerts ---------- */
.es-layout .alert {
    border-radius: var(--es-radius);
    border: 1px solid transparent;
    padding: .85rem 1rem;
    font-size: .875rem;
}
.es-layout .alert-success { background: var(--es-success-soft); border-color: #a7f3d0; color: #065f46; }
.es-layout .alert-danger, .es-layout .alert-error { background: var(--es-danger-soft); border-color: #fecaca; color: #991b1b; }
.es-layout .alert-warning { background: var(--es-warning-soft); border-color: #fde68a; color: #92400e; }
.es-layout .alert-info { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }

/* ---------- Modals ---------- */
.es-layout .modal-content {
    border-radius: var(--es-radius-lg);
    border: 0;
    box-shadow: var(--es-shadow-lg);
}
.es-layout .modal-header { border-bottom: 1px solid var(--es-border); padding: 1.1rem 1.25rem; }
.es-layout .modal-title { font-size: 1rem; font-weight: 600; }
.es-layout .modal-body { padding: 1.25rem; }
.es-layout .modal-footer { border-top: 1px solid var(--es-border); padding: 1rem 1.25rem; }

/* ---------- Search bar ---------- */
.es-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    margin-bottom: 1rem;
}
.es-toolbar .es-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 380px;
}
.es-toolbar .es-search input {
    padding-left: 2.25rem;
}
.es-toolbar .es-search i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--es-text-muted);
    pointer-events: none;
}

/* ---------- Empty state ---------- */
.es-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--es-text-muted);
}
.es-empty i { font-size: 3rem; color: var(--es-text-soft); margin-bottom: 1rem; display: block; }
.es-empty h4 { color: var(--es-text); margin-bottom: .25rem; }

/* ---------- Avatars ---------- */
.es-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--es-primary-soft);
    color: var(--es-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .8rem;
    overflow: hidden;
    flex-shrink: 0;
}
.es-avatar img { width: 100%; height: 100%; object-fit: cover; }
.es-avatar--sm { width: 28px; height: 28px; font-size: .7rem; }
.es-avatar--lg { width: 52px; height: 52px; font-size: 1rem; }

/* ============================================================
   USR-AVI — new lightweight initials badge (replaces es-avatar)
   No hover effects, no transforms, fully static
   ============================================================ */
span.usr-avi,
.usr-avi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #2563EB, #60A5FA) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}
span.usr-avi:hover, .usr-avi:hover,
span.usr-avi:focus, .usr-avi:focus,
span.usr-avi:active, .usr-avi:active {
    transform: none !important;
    background: linear-gradient(135deg, #2563EB, #60A5FA) !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.usr-avi--lg { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; font-size: .9rem !important; }
.usr-avi--xl { width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; font-size: 1.1rem !important; border-radius: 16px !important; }
.usr-avi--square { border-radius: 10px !important; }

/* Color variants */
.usr-avi--green  { background: linear-gradient(135deg, #16A34A, #4ADE80) !important; }
.usr-avi--orange { background: linear-gradient(135deg, #EA580C, #FB923C) !important; }
.usr-avi--purple { background: linear-gradient(135deg, #7C3AED, #A78BFA) !important; }
.usr-avi--pink   { background: linear-gradient(135deg, #DB2777, #F472B6) !important; }
.usr-avi--slate  { background: linear-gradient(135deg, #475569, #94A3B8) !important; }

/* ---------- Utilities ---------- */
.es-stack-sm { display: flex; flex-direction: column; gap: .35rem; }
.es-stack { display: flex; flex-direction: column; gap: .75rem; }
.es-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.es-row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.es-muted { color: var(--es-text-muted); }
.es-text-sm { font-size: .8rem; }
.es-text-xs { font-size: .72rem; }
.es-fw-600 { font-weight: 600; }
.es-mt-0 { margin-top: 0 !important; }
.es-mb-0 { margin-bottom: 0 !important; }
.es-divider { height: 1px; background: var(--es-border); border: 0; margin: 1rem 0; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    :root { --es-sidebar-width: 240px; }
    .es-sidebar { transform: translateX(-100%); }
    .es-sidebar.is-open { transform: translateX(0); box-shadow: var(--es-shadow-lg); }
    .es-main { margin-left: 0; }
    .es-content { padding: 1rem; }
    .es-backdrop {
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, .5);
        z-index: 1035;
        display: none;
    }
    .es-backdrop.is-open { display: block; }

    /* Topbar mobile */
    .es-topbar { padding: 0 .85rem; gap: .5rem; }
    .es-topbar .es-badge {
        font-size: .68rem; padding: .25rem .55rem;
        max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .es-topbar__user { padding: .25rem .55rem .25rem .35rem; }
    .es-topbar__user div { display: none; }
    .es-topbar__user .es-avatar { margin: 0; }
}

@media (max-width: 640px) {
    .es-topbar { padding: 0 .65rem; gap: .35rem; height: 56px; }
    :root { --es-topbar-height: 56px; }
    .es-topbar__toggle { font-size: 1.15rem; padding: .35rem .45rem; }
    .es-topbar .es-badge {
        max-width: 90px;
        font-size: .65rem;
    }
    .es-topbar .es-badge i { display: none; }
    .es-topbar__icon-btn { width: 36px; height: 36px; font-size: .85rem; }
    .es-topbar__user { padding: 0; border: 0; background: transparent; }
    .es-topbar__user .es-avatar, .usr-avi { width: 32px; height: 32px; font-size: .78rem; }
    .es-lang { display: none !important; }
    .es-content { padding: .85rem .65rem; }
}

@media (max-width: 420px) {
    .es-topbar { gap: .25rem; }
    .es-topbar .es-row .es-badge:nth-child(2) { display: none; } /* hide SMS balance on small */
    .es-topbar__icon-btn { width: 34px; height: 34px; }
}

/* === Global link decoration override === */
form#frm-example a,
form#frm-example a:link,
form#frm-example a:visited,
form#frm-example a:hover,
form#frm-example a:focus,
form#frm-example a:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* === Fresh stat / name pill (replacement for es-stat__icon) === */
.fn-stat {
    background:#fff; border:1px solid var(--es-border, #E2E8F0); border-radius:14px;
    padding:.95rem 1.1rem; display:flex; align-items:center; gap:.85rem;
    transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .2s;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.fn-stat:hover { transform:translateY(-2px); box-shadow:0 8px 18px -6px rgba(15,23,42,.1); border-color:#CBD5E1; }
.fn-ic {
    width:42px; height:42px; min-width:42px; border-radius:11px;
    color:#fff; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; flex-shrink:0;
    background:linear-gradient(135deg, var(--fn-ac,#2563EB), var(--fn-ac2,#3B82F6));
    box-shadow:0 4px 12px -3px var(--fn-shadow,rgba(37,99,235,.35));
}
.fn-ic, .fn-ic i, .fn-ic b {
    transition:none !important; transform:none !important;
    line-height:1 !important; backface-visibility:hidden;
}
tr:hover .fn-ic, tr:hover .fn-ic i,
.fn-name:hover .fn-ic, .fn-name:hover .fn-ic i {
    transform:none !important; transition:none !important;
}
.fn-ic--sm { width:34px; height:34px; min-width:34px; font-size:.85rem; border-radius:9px; }
.fn-ic--xs { width:28px; height:28px; min-width:28px; font-size:.75rem; border-radius:8px; }
.fn-ic--blue   { --fn-ac:#2563EB; --fn-ac2:#3B82F6; --fn-shadow:rgba(37,99,235,.35); }
.fn-ic--green  { --fn-ac:#059669; --fn-ac2:#10B981; --fn-shadow:rgba(5,150,105,.35); }
.fn-ic--amber  { --fn-ac:#D97706; --fn-ac2:#F59E0B; --fn-shadow:rgba(217,119,6,.35); }
.fn-ic--red    { --fn-ac:#DC2626; --fn-ac2:#EF4444; --fn-shadow:rgba(220,38,38,.35); }
.fn-ic--purple { --fn-ac:#7C3AED; --fn-ac2:#8B5CF6; --fn-shadow:rgba(124,58,237,.35); }
.fn-ic--cyan   { --fn-ac:#0EA5E9; --fn-ac2:#22D3EE; --fn-shadow:rgba(14,165,233,.35); }
.fn-ic--pink   { --fn-ac:#EC4899; --fn-ac2:#F472B6; --fn-shadow:rgba(236,72,153,.35); }
/* Big number pill (for fan counts etc) */
.fn-num {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:48px; height:34px; padding:0 .85rem;
    border-radius:10px;
    font-size:1.05rem; font-weight:800; letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;
    background:#F1F5F9; color:#475569;
    transition:transform .15s;
}
.fn-num:hover { transform:scale(1.05); }
.fn-num--blue   { background:linear-gradient(135deg,#EFF6FF,#DBEAFE); color:#1D4ED8; border:1px solid #BFDBFE; }
.fn-num--green  { background:linear-gradient(135deg,#F0FDF4,#DCFCE7); color:#15803D; border:1px solid #BBF7D0; }
.fn-num--amber  { background:linear-gradient(135deg,#FFFBEB,#FEF3C7); color:#B45309; border:1px solid #FDE68A; }
.fn-num--red    { background:linear-gradient(135deg,#FEF2F2,#FEE2E2); color:#B91C1C; border:1px solid #FECACA; }
.fn-num--purple { background:linear-gradient(135deg,#F5F3FF,#EDE9FE); color:#6D28D9; border:1px solid #DDD6FE; }

.fn-stat__lbl { font-size:.7rem; color:var(--es-text-muted,#94A3B8); font-weight:600; text-transform:uppercase; letter-spacing:.05em; line-height:1.1; }
.fn-stat__val { font-size:1.4rem; font-weight:800; color:var(--es-text,#0F172A); letter-spacing:-.015em; line-height:1.1; margin-top:.2rem; font-variant-numeric:tabular-nums; }

/* Inline name + ic */
.fn-name { display:inline-flex; align-items:center; gap:.55rem; min-width:0; text-decoration:none !important; }
.fn-name__tx { font-weight:700; color:var(--es-text,#0F172A); font-size:.88rem; line-height:1.2; }
.fn-name:hover .fn-name__tx { color:var(--es-primary,#1E40AF); }

/* Stats grid responsive */
.es-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem; margin-bottom:1.25rem; }
@media(max-width:991.98px){ .es-stats { grid-template-columns:repeat(2,1fr); gap:.6rem; } }
@media(max-width:480px){
    .es-stats { grid-template-columns:repeat(2,1fr); gap:.5rem; }
    .fn-stat { padding:.7rem .8rem; gap:.6rem; border-radius:12px; }
    .fn-ic { width:36px; height:36px; min-width:36px; font-size:.85rem; }
    .fn-stat__val { font-size:1.1rem; }
    .fn-stat__lbl { font-size:.62rem; }
}

/* === Timetable mobile === */
@media(max-width:991.98px){
    .tt-week-btns { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.85rem; }
    .tt-week-btns .btn_collapse, .btn_collapse {
        font-size:.78rem !important; padding:.5rem .85rem !important;
        flex:1 1 calc(33% - .4rem);
    }
    .table-responsive table.table th, .table-responsive table.table td {
        font-size:.78rem !important; padding:.5rem .35rem !important;
    }
    .table-responsive table.table th label,
    .table-responsive table.table th span {
        padding:.25rem .55rem !important;
        font-size:.7rem !important; line-height:1.2 !important;
        margin:1px !important;
    }
}
@media(max-width:640px){
    .btn_collapse { flex:1 1 calc(50% - .4rem) !important; font-size:.72rem !important; padding:.45rem .55rem !important; }
    .table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .table-responsive table { min-width:540px; }
}

/* === Mobile responsive tables (xodimlar / staff index pages) === */
@media (max-width: 991.98px) {
    .es-card__body.es-table-wrap,
    .es-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -.5rem; padding: 0 .5rem !important;
    }
    .es-table-wrap > form, .es-table-wrap > table { min-width: 720px; }
    .es-table-wrap table.table {
        font-size: .82rem;
    }
    .es-table-wrap .table thead th {
        font-size: .68rem; padding: .55rem .55rem;
        white-space: nowrap;
    }
    .es-table-wrap .table tbody td {
        padding: .55rem .55rem; white-space: nowrap;
        vertical-align: middle;
    }
    .es-table-wrap .es-btn-sm { padding: .25rem .45rem; font-size: .72rem; }
    .es-table-wrap .es-btn-sm i { font-size: .7rem; }

    /* Page header mobile */
    .es-page-header {
        flex-direction: column; align-items: flex-start; gap: .5rem;
        padding: .5rem 0 .85rem;
    }
    .es-page-header h1 { font-size: 1.15rem; line-height: 1.25; margin: 0; }
    .es-page-header__sub { font-size: .78rem; }
    .es-page-header__actions { width: 100%; flex-wrap: wrap; gap: .35rem; }
    .es-page-header__actions .es-btn { font-size: .78rem; padding: .45rem .75rem; }

    /* Toolbar mobile */
    .es-toolbar {
        flex-direction: column; align-items: stretch; gap: .5rem;
    }
    .es-toolbar .es-search { max-width: 100%; width: 100%; }
    .es-toolbar .es-search input { width: 100%; }
    .es-toolbar > .es-btn,
    .es-toolbar > a {
        width: 100%; justify-content: center;
    }
}

@media (max-width: 640px) {
    .es-card { border-radius: 10px; }
    .es-card__header { padding: .85rem 1rem; flex-direction: column; align-items: flex-start; gap: .5rem; }
    .es-card__header h3 { font-size: .95rem; }
    .es-card__body { padding: .85rem 1rem; }
    .es-card__footer { padding: .75rem 1rem; flex-wrap: wrap; gap: .5rem; }

    .es-page-header h1 i { font-size: .95rem; }

    /* Buttons row tightening */
    .row.g-3, .row.g-2 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-12,
    .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 { width: 100%; flex: 0 0 100%; max-width: 100%; }

    /* Stat / detail grids */
    .row .col-md-4 { margin-bottom: .65rem; }

    /* Form inputs taller for finger taps */
    input.form-control, select.form-control, textarea.form-control,
    .form-control { font-size: 16px !important; min-height: 44px; }
    textarea.form-control { min-height: 90px; }

    /* Stretch primary buttons */
    .es-page-header__actions .es-btn-primary,
    .es-card__footer .es-btn-primary { width: 100%; }
}

/* Avatar mobile */
@media (max-width: 480px) {
    .usr-avi, .es-avatar { width: 28px !important; height: 28px !important; font-size: .72rem; }
    .es-badge { font-size: .68rem; padding: .2rem .5rem; }
}

/* ---------- Hide legacy holiday/snow noise ---------- */
.es-layout .snowflake,
.es-layout .christmas-lights-row,
.es-layout .lights-container,
.es-layout .new-year-navbar,
.es-layout .hanging-gift,
.es-layout .star { display: none !important; }

/* ---------- Site-index fancy fallback ---------- */
.es-layout .fancy { font-size: 1.5rem; color: var(--es-text); font-weight: 600; }

/* ============================================================
   Modern action button group (table rows)
   ============================================================ */
.es-act-group {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.es-act {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: all .18s ease;
    background: var(--es-surface-2);
    color: var(--es-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.es-act:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}
.es-act i {
    font-size: 13px !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
}
.es-act--view { background: #EFF6FF !important; color: #2563EB !important; border-color: #DBEAFE !important; }
.es-act--view:hover { background: #2563EB !important; color: #fff !important; border-color: #2563EB !important; }
.es-act--edit { background: #FEF3C7 !important; color: #B45309 !important; border-color: #FDE68A !important; }
.es-act--edit:hover { background: #F59E0B !important; color: #fff !important; border-color: #F59E0B !important; }
.es-act--add  { background: #DCFCE7 !important; color: #15803D !important; border-color: #BBF7D0 !important; }
.es-act--add:hover { background: #16A34A !important; color: #fff !important; border-color: #16A34A !important; }
.es-act--del  { background: #FEE2E2 !important; color: #B91C1C !important; border-color: #FECACA !important; }
.es-act--del:hover { background: #DC2626 !important; color: #fff !important; border-color: #DC2626 !important; }
.es-act--pay  { background: #D1FAE5 !important; color: #047857 !important; border-color: #A7F3D0 !important; }
.es-act--pay:hover { background: #10B981 !important; color: #fff !important; border-color: #10B981 !important; }
.es-act--print { background: #F1F5F9 !important; color: #475569 !important; border-color: #E2E8F0 !important; }
.es-act--print:hover { background: #475569 !important; color: #fff !important; border-color: #475569 !important; }

/* Force icon visibility inside es-act regardless of parent hover */
.es-act i,
.pay-card:hover .es-act i,
.stu-card:hover .es-act i,
tr:hover .es-act i {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
}
/* Lock each variant's own color on parent hover (don't inherit row/card color) */
.pay-card:hover .es-act--view,
.stu-card:hover .es-act--view,
tr:hover .es-act--view { background: #EFF6FF !important; color: #2563EB !important; border-color: #DBEAFE !important; }
.pay-card:hover .es-act--edit,
.stu-card:hover .es-act--edit,
tr:hover .es-act--edit { background: #FEF3C7 !important; color: #B45309 !important; border-color: #FDE68A !important; }
.pay-card:hover .es-act--add,
.stu-card:hover .es-act--add,
tr:hover .es-act--add { background: #DCFCE7 !important; color: #15803D !important; border-color: #BBF7D0 !important; }
.pay-card:hover .es-act--del,
.stu-card:hover .es-act--del,
tr:hover .es-act--del { background: #FEE2E2 !important; color: #B91C1C !important; border-color: #FECACA !important; }
.pay-card:hover .es-act--pay,
.stu-card:hover .es-act--pay,
tr:hover .es-act--pay { background: #D1FAE5 !important; color: #047857 !important; border-color: #A7F3D0 !important; }
.pay-card:hover .es-act--print,
.stu-card:hover .es-act--print,
tr:hover .es-act--print { background: #F1F5F9 !important; color: #475569 !important; border-color: #E2E8F0 !important; }
.es-act > i.fa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   AUTO-STYLE: icon-only es-btn-sm → action button look
   Modern browsers support :has()
   ============================================================ */
.es-btn.es-btn-sm:has(> i.fa:only-child):not(:has(span)):not(:has(b)):not(:has(strong)),
.es-btn.es-btn-sm:has(> .fa:only-child):not(:has(span)):not(:has(b)):not(:has(strong)) {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0 !important;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: all .18s ease;
}
.es-btn.es-btn-sm:has(> i.fa:only-child):not(:has(span)):not(:has(b)):not(:has(strong)):hover,
.es-btn.es-btn-sm:has(> .fa:only-child):not(:has(span)):not(:has(b)):not(:has(strong)):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}

/* View — sky blue */
.es-btn.es-btn-sm:has(.fa-eye:only-child),
.es-btn.es-btn-sm:has(.fa-search:only-child) {
    background: #EFF6FF !important;
    color: #2563EB !important;
    border-color: #DBEAFE !important;
}
.es-btn.es-btn-sm:has(.fa-eye:only-child):hover,
.es-btn.es-btn-sm:has(.fa-search:only-child):hover {
    background: #2563EB !important;
    color: #fff !important;
    border-color: #2563EB !important;
}

/* Edit — amber */
.es-btn.es-btn-sm:has(.fa-pencil:only-child),
.es-btn.es-btn-sm:has(.fa-edit:only-child),
.es-btn.es-btn-sm:has(.fa-pen:only-child) {
    background: #FEF3C7 !important;
    color: #B45309 !important;
    border-color: #FDE68A !important;
}
.es-btn.es-btn-sm:has(.fa-pencil:only-child):hover,
.es-btn.es-btn-sm:has(.fa-edit:only-child):hover,
.es-btn.es-btn-sm:has(.fa-pen:only-child):hover {
    background: #F59E0B !important;
    color: #fff !important;
    border-color: #F59E0B !important;
}

/* Add — green */
.es-btn.es-btn-sm:has(.fa-plus:only-child),
.es-btn.es-btn-sm:has(.fa-user-plus:only-child) {
    background: #DCFCE7 !important;
    color: #15803D !important;
    border-color: #BBF7D0 !important;
}
.es-btn.es-btn-sm:has(.fa-plus:only-child):hover,
.es-btn.es-btn-sm:has(.fa-user-plus:only-child):hover {
    background: #16A34A !important;
    color: #fff !important;
    border-color: #16A34A !important;
}

/* Delete — red */
.es-btn.es-btn-sm:has(.fa-trash:only-child),
.es-btn.es-btn-sm:has(.fa-trash-o:only-child),
.es-btn.es-btn-sm:has(.fa-close:only-child),
.es-btn.es-btn-sm:has(.fa-times:only-child) {
    background: #FEE2E2 !important;
    color: #B91C1C !important;
    border-color: #FECACA !important;
}
.es-btn.es-btn-sm:has(.fa-trash:only-child):hover,
.es-btn.es-btn-sm:has(.fa-trash-o:only-child):hover,
.es-btn.es-btn-sm:has(.fa-close:only-child):hover,
.es-btn.es-btn-sm:has(.fa-times:only-child):hover {
    background: #DC2626 !important;
    color: #fff !important;
    border-color: #DC2626 !important;
}

/* Pay/Money — emerald */
.es-btn.es-btn-sm:has(.fa-money:only-child),
.es-btn.es-btn-sm:has(.fa-money-bill:only-child),
.es-btn.es-btn-sm:has(.fa-credit-card:only-child),
.es-btn.es-btn-sm:has(.fa-dollar:only-child) {
    background: #D1FAE5 !important;
    color: #047857 !important;
    border-color: #A7F3D0 !important;
}
.es-btn.es-btn-sm:has(.fa-money:only-child):hover,
.es-btn.es-btn-sm:has(.fa-money-bill:only-child):hover,
.es-btn.es-btn-sm:has(.fa-credit-card:only-child):hover,
.es-btn.es-btn-sm:has(.fa-dollar:only-child):hover {
    background: #10B981 !important;
    color: #fff !important;
    border-color: #10B981 !important;
}

/* Print — slate */
.es-btn.es-btn-sm:has(.fa-print:only-child),
.es-btn.es-btn-sm:has(.fa-file:only-child),
.es-btn.es-btn-sm:has(.fa-file-text:only-child) {
    background: #F1F5F9 !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
}
.es-btn.es-btn-sm:has(.fa-print:only-child):hover,
.es-btn.es-btn-sm:has(.fa-file:only-child):hover,
.es-btn.es-btn-sm:has(.fa-file-text:only-child):hover {
    background: #475569 !important;
    color: #fff !important;
    border-color: #475569 !important;
}

/* List — purple */
.es-btn.es-btn-sm:has(.fa-list:only-child),
.es-btn.es-btn-sm:has(.fa-list-ul:only-child),
.es-btn.es-btn-sm:has(.fa-bars:only-child) {
    background: #EDE9FE !important;
    color: #6D28D9 !important;
    border-color: #DDD6FE !important;
}
.es-btn.es-btn-sm:has(.fa-list:only-child):hover,
.es-btn.es-btn-sm:has(.fa-list-ul:only-child):hover,
.es-btn.es-btn-sm:has(.fa-bars:only-child):hover {
    background: #7C3AED !important;
    color: #fff !important;
    border-color: #7C3AED !important;
}

/* Send/sign-in — cyan */
.es-btn.es-btn-sm:has(.fa-sign-in:only-child),
.es-btn.es-btn-sm:has(.fa-paper-plane:only-child),
.es-btn.es-btn-sm:has(.fa-envelope:only-child) {
    background: #CFFAFE !important;
    color: #0E7490 !important;
    border-color: #A5F3FC !important;
}
.es-btn.es-btn-sm:has(.fa-sign-in:only-child):hover,
.es-btn.es-btn-sm:has(.fa-paper-plane:only-child):hover,
.es-btn.es-btn-sm:has(.fa-envelope:only-child):hover {
    background: #06B6D4 !important;
    color: #fff !important;
    border-color: #06B6D4 !important;
}

/* Override es-btn-danger when has single icon — keep red but rounded */
.es-btn.es-btn-danger.es-btn-sm:has(> i.fa:only-child) {
    background: #FEE2E2 !important;
    color: #B91C1C !important;
    border-color: #FECACA !important;
}
.es-btn.es-btn-danger.es-btn-sm:has(> i.fa:only-child):hover {
    background: #DC2626 !important;
    color: #fff !important;
    border-color: #DC2626 !important;
}

/* ============================================================
   Status pill — bold colored status indicator
   ============================================================ */
.es-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.005em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.es-status-pill .es-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: es-status-pulse 2s ease-in-out infinite;
}
@keyframes es-status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.8); }
}
.es-status-pill--success {
    background: #DCFCE7;
    color: #15803D;
    border-color: #BBF7D0;
}
.es-status-pill--success .es-status-dot {
    background: #16A34A;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .2);
}
.es-status-pill--warning {
    background: #FEF3C7;
    color: #B45309;
    border-color: #FDE68A;
}
.es-status-pill--warning .es-status-dot {
    background: #F59E0B;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .25);
}
.es-status-pill--danger {
    background: #FEE2E2;
    color: #B91C1C;
    border-color: #FECACA;
}
.es-status-pill--danger .es-status-dot {
    background: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .25);
}
.es-status-pill--info {
    background: #DBEAFE;
    color: #1D4ED8;
    border-color: #BFDBFE;
}
.es-status-pill--info .es-status-dot {
    background: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}
.es-status-pill--neutral {
    background: #F1F5F9;
    color: #475569;
    border-color: #E2E8F0;
}
.es-status-pill--neutral .es-status-dot {
    background: #94A3B8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .2);
}

/* ---------- Print ---------- */
@media print {
    .es-sidebar, .es-topbar, .es-page-header__actions, .es-toolbar { display: none !important; }
    .es-main { margin-left: 0 !important; }
    .es-content { padding: 0 !important; }
    .es-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}