/* =====================================================================
   e-Schooling Design System — ePass BackOffice reskin
   Loads AFTER Default.css (alphabetical theme injection) so it wins.
   Scope: global chrome (sidebar, topbar, cards, tables, forms, buttons).
   Light mode. Tokens defined so dark mode can be flipped on later.
   ===================================================================== */

:root {
    /* Brand — primary blues */
    --es-blue-500:  #00A0E9;
    --es-blue-600:  #0087D4;
    --es-blue-200:  #C2E2F1;
    --es-blue-100:  #EFF9FF;
    --es-blue-glow: rgba(0,160,233,0.40);
    --es-cover-blue:#5BB7D8;
    --es-cover-band:#83C1D8;

    /* Greys / chrome */
    --es-ink-900: #202122;
    --es-ink-800: #353A40;
    --es-ink-700: #354051;
    --es-ink-650: #22324D;
    --es-ink-600: #283446;
    --es-ink-500: #4D5662;
    --es-ink-400: #7B8895;
    --es-ink-300: #A6AFBA;
    --es-ink-200: #ACC3D6;
    --es-ink-150: #CBD1D6;
    --es-ink-100: #E3E6EA;
    --es-ink-75:  #E3E8F1;
    --es-ink-50:  #F1F1F1;
    --es-ink-25:  #F4F8F9;
    --es-paper:   #FFFFFF;

    /* Feedback / semantic */
    --es-positive:#1BC54E;
    --es-warning: #FABB3A;
    --es-negative:#F4623F;
    --es-info:    #00A0E9;
    --es-private: #FFEDBF;

    /* Semantic — light */
    --es-bg:            var(--es-paper);
    --es-bg-body:       var(--es-ink-25);
    --es-bg-menu:       var(--es-ink-700);
    --es-bg-menu-hover: var(--es-ink-650);
    --es-bg-card:       var(--es-paper);
    --es-bg-hover:      var(--es-blue-100);
    --es-bg-disabled:   var(--es-ink-100);
    --es-bg-table-row:  var(--es-ink-75);
    --es-bg-blocked:    rgba(53,64,81,0.70);

    --es-text:          var(--es-ink-400);
    --es-text-title:    var(--es-ink-500);
    --es-text-blue:     var(--es-blue-500);
    --es-text-menu:     var(--es-ink-75);
    --es-text-disabled: var(--es-ink-300);
    --es-text-inverse:  var(--es-paper);

    --es-border:          var(--es-ink-150);
    --es-border-selected: var(--es-blue-500);

    --es-font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Radii */
    --es-radius-sm:   4px;
    --es-radius-lg:   10px;
    --es-radius-pill: 999px;

    /* Shadows */
    --es-shadow-card:  0 5px 10px 0 rgba(53,64,81,0.10);
    --es-shadow-pop:   0 10px 20px 0 rgba(184,208,228,0.40);
    --es-shadow-focus: 0 0 0 3px var(--es-blue-glow);

    /* Layout */
    --es-sidebar-width: 240px;
    --es-topbar-height: 64px;
}

/* ---------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------- */
html, body, form {
    background: var(--es-bg-body);
    font-family: var(--es-font-sans);
    color: var(--es-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Force a permanent window scrollbar so a transient one (e.g. a 1px repaint on
   hover) can't narrow the viewport and shove the right-anchored topbar cluster
   sideways. scrollbar-gutter alone is ignored unless html is a scroll container. */
html { overflow-y: scroll; }

a:link, a:visited, a:active { color: var(--es-text-blue); }
a:hover { color: var(--es-blue-600); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { color: var(--es-text-title); font-family: var(--es-font-sans); }
h1 { font-size: 24px; font-weight: 400; line-height: 1.15; }
h2 { font-size: 20px; font-weight: 400; line-height: 1.15; }
h3 { font-size: 18px; font-weight: 700; line-height: 1.15; }
h4 { font-size: 16px; font-weight: 400; line-height: 1.15; }
h5 { font-size: 14px; font-weight: 400; line-height: 1.15; }
h6 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.15; }

/* ---------------------------------------------------------------------
   2. App shell — fixed dark sidebar + topbar
   --------------------------------------------------------------------- */
.wrapper { width: 100%; min-height: 100%; }

/* Push content right of the sidebar / below the topbar — ONLY on pages
   that actually render the sidebar (Intra). Login/registration/info pages
   use the bare master and stay centered. */
/* Sticky-footer flex shell: wrapper fills viewport, main grows to fill the
   slack, footer sits at the bottom — no forced 100vh that would overflow. */
.wrapper:has(.es-sidebar) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.main:has(.es-sidebar) {
    flex: 1 0 auto;
    margin-left: var(--es-sidebar-width);
    padding-top: var(--es-topbar-height);
    box-sizing: border-box;
}
.wrapper:has(.es-sidebar) .footer {
    flex: 0 0 auto;
    margin-left: var(--es-sidebar-width);
    width: auto;            /* override Default.css width:100% — else 100%+240px overflows */
    box-sizing: border-box;
}

.footer {
    color: var(--es-text);
    font-size: 12px;
    border-top: 1px solid var(--es-border);
    background: var(--es-bg-body);
}
.footer a { color: var(--es-text-blue); }

/* --- Sidebar ------------------------------------------------------- */
.es-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--es-sidebar-width);
    background: var(--es-bg-menu);          /* always navy #354051 */
    display: flex;
    flex-direction: column;
    z-index: 30;
    overflow: hidden;
}

.es-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--es-topbar-height);
    padding: 0 20px;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.es-sidebar-brand img { width: 36px; height: auto; display: block; }
.es-sidebar-brand .es-wordmark {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.es-sidebar nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0;
}
.es-sidebar nav::-webkit-scrollbar { width: 6px; }
.es-sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }

/* Vertical menu (was the horizontal top nav .menu) */
.es-sidebar .menu { list-style: none; margin: 0; padding: 0; display: block; }
.es-sidebar .menu li { float: none; display: block; width: 100%; }

.es-sidebar .menu li a {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 2px 12px;
    padding: 11px 14px;
    border-radius: var(--es-radius-sm);
    color: var(--es-text-menu);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .12s ease-out, color .12s ease-out;
}
.es-sidebar .menu li a .fa-fw,
.es-sidebar .menu li a i { width: 20px; font-size: 16px; text-align: center; color: var(--es-ink-75); transition: color .12s ease-out; }

.es-sidebar .menu li a:hover {
    background: var(--es-bg-menu-hover);
    color: #fff;
    text-decoration: none;
}
.es-sidebar .menu li a:hover i { color: #fff; }

.es-sidebar .menu li a.selected,
.es-sidebar .menu li a.selected:hover {
    background: var(--es-bg-menu-hover);
    color: var(--es-blue-500);
    margin: 2px 12px;
    padding: 11px 14px;
    border-radius: var(--es-radius-sm);
    box-shadow: inset 3px 0 0 0 var(--es-blue-500);
}
.es-sidebar .menu li a.selected i,
.es-sidebar .menu li a.selected:hover i { color: var(--es-blue-500); }

/* --- Topbar -------------------------------------------------------- */
.es-topbar {
    position: fixed;
    top: 0; right: 0; left: var(--es-sidebar-width);
    height: var(--es-topbar-height);
    background: var(--es-bg);
    border-bottom: 1px solid var(--es-border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    z-index: 25;
}
.es-topbar .es-topbar-spacer { flex: 1 1 auto; }
.es-topbar .es-topbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* School selector → blue-outline pill (native fallback before select2 inits) */
.es-topbar select,
.es-topbar .es-school select {
    height: 38px;
    background: var(--es-bg) !important;
    color: var(--es-text-title) !important;
    border: 1px solid var(--es-blue-500) !important;
    border-radius: var(--es-radius-pill) !important;
    padding: 0 16px !important;
    font-size: 14px;
    width: 230px;
    cursor: pointer;
}
.es-topbar .es-school { padding: 0 !important; width: auto !important; }

/* --- select2 (v3) → e-Schooling rounded dropdown -------------------- */
.select2-container { min-width: 90px; max-width: 100%; vertical-align: middle; }
/* Closed control: rounded pill */
.select2-container .select2-choice {
    height: 38px;
    line-height: 36px;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-pill);
    background: var(--es-bg);
    color: var(--es-text-title) !important;
    padding: 0 14px;
    box-shadow: none;
    transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
.es-topbar .select2-container .select2-choice { border-color: var(--es-blue-500); }
.select2-container .select2-choice .select2-arrow {
    background: transparent;
    border-left: none;
    width: 22px;
}
.select2-container .select2-choice .select2-arrow b { background-position: 0 4px; }
.select2-container-active .select2-choice { box-shadow: var(--es-shadow-focus); border-color: var(--es-blue-500); }

/* Open: keep the pill fully round (never square the corners) */
.select2-dropdown-open .select2-choice {
    background: var(--es-bg);
    border-color: var(--es-blue-500);
    border-radius: var(--es-radius-pill);
    box-shadow: none;
}

/* The popup panel (appended to <body>) — fully rounded, detached pill-card */
.select2-drop {
    border: 1px solid var(--es-blue-500);
    border-radius: var(--es-radius-lg);
    box-shadow: var(--es-shadow-pop);
    background: var(--es-bg-card);
    overflow: hidden;
    padding: 6px;
    margin-top: 6px;
    min-width: 200px;
    max-width: 420px;
}
.select2-drop.select2-drop-above {
    margin-top: 0;
    margin-bottom: 6px;
}
.select2-results { margin: 0; padding: 0; }
.select2-results .select2-result-label {
    padding: 9px 12px;
    border-radius: var(--es-radius-sm);
    color: var(--es-text-title);
    font-size: 14px;
}
.select2-results .select2-highlighted {
    background: var(--es-blue-100);
    color: var(--es-blue-600);
}
.select2-results .select2-highlighted .select2-result-label { color: var(--es-blue-600); }
.select2-search { padding: 4px; }
.select2-search input {
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    min-height: 34px;
}
.select2-search input:focus { border-color: var(--es-blue-500); box-shadow: var(--es-shadow-focus); }

/* --- select2 multi-select (tag box) -------------------------------- */
.select2-container-multi .select2-choices {
    min-height: 40px;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    background: var(--es-bg);
    padding: 3px 6px;
    box-shadow: none;
}
.select2-container-multi.select2-container-active .select2-choices {
    border-color: var(--es-blue-500);
    box-shadow: var(--es-shadow-focus);
}
/* Selected tags → blue pills */
.select2-container-multi .select2-choices .select2-search-choice {
    background: var(--es-blue-100);
    border: 1px solid var(--es-blue-200);
    border-radius: var(--es-radius-pill);
    color: var(--es-blue-600);
    box-shadow: none;
    padding: 4px 10px 4px 22px;
    margin: 4px 4px 4px 0;
    font-size: 13px;
    line-height: 1.3;
}
.select2-container-multi .select2-choices .select2-search-choice-close {
    left: 7px;
    top: 6px;
}
.select2-container-multi .select2-choices .select2-search-field input {
    color: var(--es-text-title);
    font-family: var(--es-font-sans);
    font-size: 14px;
    min-height: 30px;
    padding: 5px;
}
.select2-search-choice-focus { background: var(--es-blue-200) !important; }

/* User pill (reuse .userinfo from markup) */
.es-topbar .userinfo {
    float: none;
    display: flex;
    align-items: center;
    height: auto;
    gap: 4px;
    overflow: visible;   /* kill Default.css overflow:auto → box-shadow no longer
                            triggers a scrollbar that shifts the cluster on hover */
}
.es-topbar .userinfo > a {
    float: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    color: var(--es-text-title);
    font-size: 14px;
    border-radius: var(--es-radius-pill);
    border: 1px solid var(--es-border);
    box-sizing: border-box;
    white-space: nowrap;
    transition: background-color .12s ease-out;
}
/* hover changes colour only — geometry locked so the cluster never shifts.
   !important beats Default.css .userinfo a:hover (bg #8da0b2 + color #fff). */
.es-topbar .userinfo > a:hover {
    background: var(--es-bg-hover) !important;
    color: var(--es-text-title) !important;
    border-color: var(--es-border) !important;
    text-decoration: none !important;
}
.es-topbar .currentuserphoto {
    float: none;
    width: 32px; height: 32px;
    margin: 0;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-color: var(--es-ink-100);
    flex: 0 0 auto;
}
/* Generic avatar when the user has no photo */
.es-topbar .currentuserphoto.es-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--es-blue-200);
}
.es-topbar .currentuserphoto.es-avatar-fallback i {
    color: var(--es-blue-600);
    font-size: 14px;
}
/* Logout: the logout.png is white/transparent → invisible on the white topbar.
   Recolour it to a visible dark grey with a filter (no bg/border to avoid
   the filter tinting them). Darkens further on hover. */
.es-topbar .logstatus {
    display: inline-block;
    height: 18px;
    width: auto;
    padding: 10px;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
    filter: brightness(0) opacity(0.55);   /* black silhouette @ 55% = grey */
    transition: filter .12s ease-out;
}
/* never let the logout link carry a background — Default.css sets one on :hover
   (#8da0b2) and our brightness(0) filter would turn it into a black square */
.es-topbar .logstatus,
.es-topbar .logstatus:hover { background: transparent !important; }
.es-topbar .logstatus:hover { filter: brightness(0) opacity(0.9); }

/* Hamburger (mobile) */
.es-topbar .hamb { display: none; float: none; padding: 0; margin-right: 4px; cursor: pointer; }
.es-topbar .hamb-line,
.es-topbar .hamb-line::before,
.es-topbar .hamb-line::after { background: var(--es-ink-500); }

/* ---------------------------------------------------------------------
   3. Content area — section sub-nav (.leftcol) + main card (.rightcol)
   --------------------------------------------------------------------- */
.contentcontainer { margin: 24px; }

/* Intra dashboard: full-bleed background photo behind topbar + content.
   Photo lives on the wrapper (fixed cover) so it spans under the white topbar
   too — the topbar then goes transparent so the white bar no longer cuts the
   image. Sidebar/footer stay opaque navy and sit on top of the photo. */
.homeContent {
    padding: 32px 40px;
    width: 100%;
    box-sizing: border-box;
    background: transparent !important;
    color: #fff;
}
.homeContent::before { display: none !important; } /* old ::before photo stays off; photo now on wrapper */

.wrapper:has(.homeContent) {
    /* clean text-free photo (Unsplash) → centered cover, no headline to dodge */
    background: url('../../_img/home_bg.jpg') center center / cover no-repeat fixed;
}
/* dark scrim so the widgets/cards sit on a consistent contrast floor regardless
   of the bright city-lights in the lower band of the photo */
.homeContent { position: relative; }
.homeContent::after {
    content: "";
    position: fixed;
    inset: 0 0 0 var(--es-sidebar-width);
    background: linear-gradient(180deg, rgba(32,40,55,0.45) 0%, rgba(32,40,55,0.68) 100%);
    z-index: 0;
    pointer-events: none;
}
.homeContent .default-wrapper { position: relative; z-index: 1; }
/* let the photo show through the shell */
.main:has(.homeContent) { background: transparent !important; }

/* topbar blends into the photo (no white bar, no divider) */
.wrapper:has(.homeContent) .es-topbar {
    background: transparent;
    border-bottom: none;
}
/* transparent topbar over the photo → the user pill loses its white backdrop and
   the dark "Admin" text vanishes. Give it a solid white pill (like the school
   selector) so the name reads on any part of the photo. */
.wrapper:has(.homeContent) .es-topbar .userinfo > a {
    background: var(--es-bg);
}
/* logout: wrap (.es-logout span) carries the pill; the inner link/img is
   recoloured to a dark glyph. Pill on the wrapper means bg + filter live on
   different nodes (no conflict), and it works whether LoginStatus renders an
   <a> or a bare <img>. */
.es-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.es-logout .logstatus, .es-logout a, .es-logout img {
    height: 20px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
}
.es-logout .logstatus { filter: brightness(0) opacity(0.6); transition: filter .12s ease-out; }
.es-logout:hover .logstatus { filter: brightness(0) opacity(0.9); }

/* over the photo: give the wrapper a white pill so the glyph always reads */
.wrapper:has(.homeContent) .es-topbar .es-logout {
    background: var(--es-bg);
    box-shadow: var(--es-shadow-card);
    transition: background-color .12s ease-out;
}
.wrapper:has(.homeContent) .es-topbar .es-logout:hover { background: var(--es-bg-hover); }

/* =====================================================================
   Dashboard 2.0 — glass KPI tiles + white panel cards + live feed
   (markup: Intra/Default.aspx → .es-dash). Sits on the photo + scrim.
   ===================================================================== */
/* clip (not hidden): hidden forces overflow-y:auto → an internal scrollbar that
   toggles on repaint and makes the fixed cover-photo jitter. clip doesn't create
   a scroll container, so the photo stays rock-steady. */
.main:has(.homeContent) { overflow-x: clip; }
.homeContent { margin-bottom: 0 !important; }
.es-dash { width: 100% !important; margin: 0 !important; max-width: 1320px; }

/* --- Header --- */
.es-dash-head { margin: 0 0 22px; }
.es-dash-greeting {
    color: #fff; font-size: 26px; font-weight: 700; line-height: 1.1; margin: 0;
    text-shadow: 0 1px 12px rgba(0,0,0,0.25);
}
.es-dash-greeting .es-dash-school { color: var(--es-blue-200); font-weight: 700; }
.es-dash-sub {
    margin: 8px 0 0; color: rgba(255,255,255,0.82); font-size: 13.5px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.es-dash-sub i { opacity: 0.8; }
.es-dash-sub .es-sep { opacity: 0.5; }

/* --- KPI grid (frosted glass tiles) --- */
.es-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.es-kpi {
    position: relative;
    padding: 18px 20px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 10px 30px rgba(8,15,30,0.22);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: #fff;
    overflow: hidden;
    transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out;
}
.es-kpi::before { /* accent glow per type */
    content: ""; position: absolute; top: -40%; right: -20%;
    width: 160px; height: 160px; border-radius: 50%;
    background: var(--es-kpi-accent, var(--es-blue-500));
    opacity: 0.30; filter: blur(34px); pointer-events: none;
}
.es-kpi:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(8,15,30,0.34); background: rgba(255,255,255,0.14); }
.es-kpi--students { --es-kpi-accent: #00A0E9; }
.es-kpi--sales    { --es-kpi-accent: #F0822E; }
.es-kpi--staff    { --es-kpi-accent: #9A8CFF; }
.es-kpi--meals    { --es-kpi-accent: #1BC54E; }

.es-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.es-kpi-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 13px;
    background: var(--es-kpi-accent); color: #fff; font-size: 18px;
    box-shadow: 0 6px 16px -4px var(--es-kpi-accent);
}
.es-kpi-value {
    font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
    display: flex; align-items: baseline; gap: 4px;
}
.es-kpi-value label { font: inherit; color: inherit; }
.es-kpi-label {
    margin-top: 10px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.92);
    line-height: 1.25;
}
.es-kpi-label small {
    display: block; margin-top: 3px; font-size: 11px; font-weight: 400;
    text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.65);
}

/* Trend chip */
.es-kpi-trend {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
    background: rgba(255,255,255,0.16); color: #fff;
}
.es-kpi-trend--up   { background: rgba(27,197,78,0.22);  color: #7BF3A4; }
.es-kpi-trend--down { background: rgba(244,98,63,0.22);  color: #FF9E86; }

/* --- Panels (charts + feed) → solid white cards --- */
.es-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    align-items: stretch;   /* all three cards share the row height (feed = tallest) */
}
.es-card {
    background: var(--es-bg-card);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(8,15,30,0.18);
    padding: 18px 20px;
    color: var(--es-text-title);
    display: flex;
    flex-direction: column;
}
.es-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 8px;
}
.es-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--es-text-title); text-transform: none; letter-spacing: 0; }
.es-card-sub { font-size: 12px; color: var(--es-text); text-transform: uppercase; letter-spacing: 0.03em; }
.es-card-range { font-size: 11px; font-weight: 700; color: var(--es-blue-500); background: var(--es-blue-100); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

/* Chart body: fixed box so the frappe svg (plot + x-axis labels) stays fully
   inside the white card instead of spilling onto the photo below. */
/* grow to fill the (stretched) card and centre the plot vertically, so the
   chart cards match the feed height with balanced breathing room top + bottom */
.es-chart-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 200px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 8px;   /* breathing room under the x-axis labels */
}
.es-chart-body > div[id^="chart"] { min-height: 160px; }
/* frappe-charts theming → soft grid, readable labels, bold line + filled region */
.es-chart .frappe-chart .chart-label,
.es-chart .frappe-chart text { fill: var(--es-ink-600); font-family: var(--es-font-sans); font-size: 11.5px; font-weight: 600; }
.es-chart .frappe-chart .y-axis line,
.es-chart .frappe-chart .x-axis line,
.es-chart .frappe-chart line.dashed { stroke: var(--es-ink-75); }
.es-chart .frappe-chart .y-axis .specific-value { stroke: var(--es-ink-75); }
.es-chart .frappe-chart path.line-graph-path { stroke-width: 2.5px; }
.es-chart .frappe-chart path.region-fill { opacity: 0.14; }
.es-chart .frappe-chart .line-chart .dot { r: 4; }
/* invisible range-padding markers: keep the axis extension, hide the line/label */
.es-chart .frappe-chart .marker line,
.es-chart .frappe-chart g[class*="marker"] line { stroke: transparent !important; }
.es-chart .frappe-chart .marker text,
.es-chart .frappe-chart g[class*="marker"] text { display: none !important; }
.es-skeleton {
    position: absolute; inset: auto 0 10px 0; height: 170px;
    display: flex; align-items: flex-end; gap: 10%; padding: 0 6%;
}
.es-skeleton span {
    flex: 1; border-radius: 6px 6px 0 0;
    background: linear-gradient(90deg, var(--es-ink-50) 25%, var(--es-ink-100) 37%, var(--es-ink-50) 63%);
    background-size: 400% 100%; animation: es-shimmer 1.3s ease-in-out infinite;
}
.es-skeleton span:nth-child(1){ height: 55%; } .es-skeleton span:nth-child(2){ height: 80%; }
.es-skeleton span:nth-child(3){ height: 45%; } .es-skeleton span:nth-child(4){ height: 70%; }
.es-skeleton span:nth-child(5){ height: 60%; }
@keyframes es-shimmer { 0%{ background-position: 100% 0; } 100%{ background-position: -100% 0; } }
.es-empty {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    color: var(--es-ink-300); font-size: 13px;
}
.es-empty[hidden] { display: none !important; } /* honour the hidden attr over display:flex */
.es-empty i { font-size: 26px; }

/* --- Activity feed --- */
.es-feed-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--es-positive); }
.es-feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--es-positive); box-shadow: 0 0 0 0 rgba(27,197,78,0.5); animation: es-pulse 1.6s infinite; }
@keyframes es-pulse { 0%{ box-shadow: 0 0 0 0 rgba(27,197,78,0.5);} 70%{ box-shadow: 0 0 0 7px rgba(27,197,78,0);} 100%{ box-shadow: 0 0 0 0 rgba(27,197,78,0);} }

.es-feed-list { list-style: none; margin: 6px 0 0; padding: 0; }
.es-feed-item {
    display: flex; align-items: center; gap: 12px; padding: 11px 6px;
    border-bottom: 1px solid var(--es-ink-75);
    animation: es-feed-in .35s ease-out;
}
.es-feed-item:last-child { border-bottom: none; }
@keyframes es-feed-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.es-feed-ic {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    background: var(--es-blue-100); color: var(--es-blue-600);
}
.es-feed--buy .es-feed-ic      { background: #FDEBDD; color: #F0822E; }
.es-feed--meal .es-feed-ic     { background: #DFF6E6; color: #1BC54E; }
.es-feed--entry .es-feed-ic    { background: #E2F4FC; color: #0087D4; }
.es-feed--exit .es-feed-ic     { background: #FDE7E2; color: #F4623F; }
.es-feed--recharge .es-feed-ic { background: #EDEAFF; color: #6F5BE0; }
.es-feed-body { flex: 1 1 auto; min-width: 0; }
.es-feed-name { font-size: 13.5px; font-weight: 700; color: var(--es-text-title); }
.es-feed-ee { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--es-text); }
.es-feed-msg { font-size: 12.5px; color: var(--es-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-feed-time { flex: 0 0 auto; font-size: 11px; color: var(--es-ink-300); white-space: nowrap; }
.es-feed-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 0; color: var(--es-ink-300); font-size: 13px; }
.es-feed-empty i { font-size: 24px; }
.es-feed-skel { height: 44px; margin: 8px 0; border-radius: 10px; background: linear-gradient(90deg, var(--es-ink-50) 25%, var(--es-ink-100) 37%, var(--es-ink-50) 63%); background-size: 400% 100%; animation: es-shimmer 1.3s ease-in-out infinite; }

/* On small viewports the feed drops below the charts naturally (auto-fit). */
@media (max-width: 760px) {
    .es-dash-greeting { font-size: 22px; }
    .es-kpi-value { font-size: 34px; }
}

.leftcol {
    position: fixed;
    left: var(--es-sidebar-width);
    top: var(--es-topbar-height);
    width: 220px;
    height: calc(100% - var(--es-topbar-height));
    background: transparent;
    padding: 24px 12px 24px 24px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Section sub-nav accordion */
.sidemenu > li.title.es-acc-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: color .12s ease-out;
}
.sidemenu > li.title.es-acc-title:hover { color: var(--es-text-title); }
/* CSS-drawn chevron (no Font Awesome dependency → no tofu □ if the FA family
   name doesn't match). A down-pointing triangle that rotates when collapsed. */
.sidemenu > li.title.es-acc-title::after {
    content: "";
    flex: 0 0 auto;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--es-ink-300);
    transition: transform .12s ease-out;
}
.sidemenu > li.title.es-acc-title.collapsed::after { transform: rotate(-90deg); }
/* kill the legacy Default.css sprite arrow that also showed next to the title */
.sidemenu > li.title { background-image: none !important; }

.rightcol {
    margin: 24px 24px 24px calc(220px + 24px);
    padding: 24px;
    background: var(--es-bg-card);
    border-radius: var(--es-radius-sm);
    box-shadow: var(--es-shadow-card);
    border: none;
}
/* nested rightcol stays flat (no double card) */
.rightcol .rightcol { box-shadow: none; border: none; padding: 16px 0; margin: 0; }
.rightcol .leftcol { position: relative; left: 0; top: 0; width: 180px; padding: 0; background: transparent; }

/* Section sub-nav list */
.sidemenu { margin: 0; padding: 0; overflow: visible; }
.sidemenu > li { float: none; display: block; overflow: visible; }
.sidemenu > li.title {
    border-bottom: none;
    color: var(--es-text);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: auto;
    margin: 18px 0 6px;
    padding: 0 12px;
}
.sidemenu > li > a {
    float: none;
    display: block;
    width: auto;
    margin: 2px 0;
    padding: 9px 12px;
    border: none;
    border-radius: var(--es-radius-sm);
    color: var(--es-text-title);
    font-size: 14px;
    text-align: left;
    transition: background-color .12s ease-out, color .12s ease-out;
}
.sidemenu > li > a:hover {
    background: var(--es-bg-hover);
    color: var(--es-text-title);
    text-decoration: none;
}
.sidemenu > li > a.selected,
.sidemenu > li > a.selected:hover {
    background: var(--es-blue-100);
    color: var(--es-blue-500);
    border: none;
    padding: 9px 12px;
    font-weight: 700;
}

/* "New …" primary action in the sub-nav */
.sideactions > li > a {
    display: block;
    background: var(--es-blue-500);
    color: #fff !important;
    text-align: center !important;
    padding: 12px 16px !important;
    border-radius: var(--es-radius-sm);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
    transition: background-color .12s ease-out;
}
.sideactions > li > a:hover { background: var(--es-blue-600); text-decoration: none; }

/* Content sub-menu tabs */
.contentsubmenu {
    border-bottom: 1px solid var(--es-border);
    margin: 0 0 20px;
}
.contentsubmenu > li > a {
    background: transparent;
    border: none;
    border-radius: var(--es-radius-sm) var(--es-radius-sm) 0 0;
    color: var(--es-text);
    margin: 0 2px;
    padding: 10px 18px;
    font-size: 14px;
    border-bottom: 2px solid transparent;
}
.contentsubmenu > li > a:hover { background: var(--es-bg-hover); color: var(--es-text-title); }
.contentsubmenu > li.active > a,
.contentsubmenu > li.active > a:hover,
.contentsubmenu > li.selected > a,
.contentsubmenu > li.selected > a:hover {
    background: transparent;
    color: var(--es-blue-500);
    border-bottom: 2px solid var(--es-blue-500);
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------- */
input[type=submit], .button, a.button, button {
    font-family: var(--es-font-sans);
    display: inline-block;
    cursor: pointer;
    padding: 10px 18px;
    min-height: 40px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--es-radius-sm);
    color: #fff;
    background-color: var(--es-blue-500);
    box-shadow: none;
    transition: background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out;
    margin: 4px 6px 4px 0;
    text-decoration: none;
}
input[type=submit]:hover, .button:hover, a.button:hover, button:hover {
    background-color: var(--es-blue-600);
    color: #fff;
    text-decoration: none;
    box-shadow: none;
}
input[type=submit]:focus, .button:focus, button:focus { outline: none; box-shadow: var(--es-shadow-focus); }

/* Secondary / cancel variant */
.buttonCancel, a.buttonCancel, input[type=submit].buttonCancel,
.button.secondary, .buttonSecondary {
    background-color: var(--es-paper) !important;
    color: var(--es-ink-500) !important;
    border: 1px solid var(--es-border) !important;
}
.buttonCancel:hover, a.buttonCancel:hover, input[type=submit].buttonCancel:hover,
.button.secondary:hover, .buttonSecondary:hover {
    background-color: var(--es-bg-hover) !important;
    color: var(--es-ink-700) !important;
    border-color: var(--es-blue-500) !important;
}

/* modal-confirm primary button: Default.css:3017 hard-codes #25486d navy — repoint
   it to the design-system primary so the modal Ok matches every other primary. */
.modal-confirm .modal-footer input:last-child {
    background: var(--es-blue-500);
    color: #fff;
}
.modal-confirm .modal-footer input:last-child:hover {
    background: var(--es-blue-600);
    color: #fff;
}

.moreoptions {
    background: var(--es-ink-500) url(_img/bkg.button.moreoptions.png) right center no-repeat;
    padding-right: 25px;
    border: none;
}
.moreoptions:hover { background: var(--es-ink-700) url(_img/bkg.button.moreoptions.png) right center no-repeat; border: none; }

/* ---------------------------------------------------------------------
   5. Inputs
   --------------------------------------------------------------------- */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], input[type=tel], input[type=date], select, textarea {
    font-family: var(--es-font-sans);
    background: var(--es-bg);
    color: var(--es-text-title);
    font-size: 14px;
    padding: 8px 12px;
    min-height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
textarea { min-height: 100px; line-height: 1.4; }
select { cursor: pointer; }

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=number]:focus, input[type=search]:focus, input[type=tel]:focus,
input[type=date]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--es-blue-500);
    box-shadow: var(--es-shadow-focus);
}
::placeholder { color: var(--es-ink-300); font-style: italic; font-weight: 300; }
.watermarktext { color: var(--es-ink-300); font-style: italic; }

/* Checkboxes / radios tinted to brand */
input[type=checkbox], input[type=radio] { accent-color: var(--es-blue-500); width: 16px; height: 16px; }

/* ---------------------------------------------------------------------
   6. Tables — datatable + form tables
   --------------------------------------------------------------------- */
.datatable { border-collapse: separate; border-spacing: 0; }
.datatable td, .datatable th { padding: 12px 10px; }
/* Listing tables: respect set column widths, let the unwidthed text column
   absorb the slack (so it starts right after the meta columns, like Users). */
.datatable.es-list { table-layout: fixed; width: 100%; }
.datatable.es-list td { overflow: hidden; text-overflow: ellipsis; }

.tableheader, .datatable .tableheader {
    background: var(--es-bg-table-row);
}
.tableheader > td, .tableheader > th {
    color: var(--es-text-title);
    font-weight: 700;
    font-size: 13px;
    border-bottom: 1px solid var(--es-border);
}
/* Filter rows (td cells, not GridView header th): bottom-align the controls so
   they line up on one baseline regardless of how many lines the label wraps to,
   and centre the label over its control. Cells with an inline text-align
   (e.g. the right-aligned search button) keep theirs. */
.tableheader > td {
    vertical-align: bottom;
    text-align: center;
}
.tablebody > td { border-bottom: 1px solid var(--es-border); color: var(--es-text); }
.tablebody:hover > td { background: var(--es-bg-hover); }

/* Form (label/value) tables */
.form td, .formFloat td { padding: 10px 8px; border-bottom: 1px solid var(--es-border); }
.formFloat { top: var(--es-topbar-height); }
.titlerow > td {
    background: var(--es-bg-table-row);
    color: var(--es-text-title);
    font-weight: 700;
    border-bottom: 1px solid var(--es-border);
}
.optionsrow > td { background: var(--es-ink-25); border-bottom: 1px solid var(--es-border); }
.firstcol, .middlecol { background: transparent; color: var(--es-text-title); font-weight: 700; }

/* ---------------------------------------------------------------------
   7. Tags / pills / chips
   --------------------------------------------------------------------- */
.multiselect li label {
    border: 1px solid var(--es-border);
    background: var(--es-bg);
    border-radius: var(--es-radius-pill);
    color: var(--es-text-title);
    height: auto;
    line-height: 1.2;
    padding: 7px 14px;
}
.multiselect li label:hover { background: var(--es-bg-hover); }
.multiselect li label.selected, .multiselect li label.selected:hover {
    background: var(--es-blue-500);
    color: #fff;
    border-color: var(--es-blue-500);
}
/* .rightcol .form td.secondcol label (specificity 0,3,2) outranks the rule above
   (0,2,2) whenever a .multiselect list lives inside that form layout, silently
   keeping selected chips background:var(--es-bg)/color:var(--es-text-title).
   Re-declare scoped to that same ancestor so it wins there too. */
.rightcol .form td.secondcol .multiselect li label.selected,
.rightcol .form td.secondcol .multiselect li label.selected:hover {
    background: var(--es-blue-500);
    color: #fff;
    border-color: var(--es-blue-500);
}

.checklistoptions > li {
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
}
.checklistoptions > li:hover { background: var(--es-bg-hover); }
.checklistoptions > li.selected { background: var(--es-blue-100); color: var(--es-blue-500); }

/* ---------------------------------------------------------------------
   8. Modals / popups
   --------------------------------------------------------------------- */
.modalbkg { background: var(--es-bg-blocked); opacity: 1; filter: none; }
.modalpopup, .modalpopupsmall, .modalpopupfeaturedimage {
    background: var(--es-bg-card);
    border-radius: var(--es-radius-sm);
    box-shadow: var(--es-shadow-pop);
}
.modalpopupoptions, .modalpopupoptionsCategoriesProductsOnline {
    background: var(--es-ink-25);
    border-top: 1px solid var(--es-border);
}
.popupmenucontainer {
    background: var(--es-bg-card);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    box-shadow: var(--es-shadow-pop);
}

/* ---------------------------------------------------------------------
   9. Feedback / alerts
   --------------------------------------------------------------------- */
.validationsummary {
    background: #FDECE8;
    color: var(--es-negative);
    border: 1px solid var(--es-negative);
    border-radius: var(--es-radius-sm);
    padding: 12px 16px;
}
.infobox {
    background: var(--es-blue-100);
    color: var(--es-text-title);
    border: 1px solid var(--es-blue-200);
    border-radius: var(--es-radius-sm);
    padding: 12px 16px;
    text-align: left;
}
.alertbox {
    /* base Default.css pins this as a fixed 300px toast at top:0 — it lands behind
       the fixed es-topbar and floats over the content. These are server-rendered
       page banners (success / fail / missing-costs), so flow them inline instead:
       a full-width banner above the content, in normal document flow. */
    position: static;
    top: auto;
    left: auto;
    width: auto;
    margin: 0 0 16px;
    padding: 12px 16px;
    text-align: left;
    border-radius: var(--es-radius-sm);
    box-shadow: var(--es-shadow-pop);
}
.coloralert { background: var(--es-blue-500); }
.colorwarning { background: var(--es-negative); }
.colorlight { background: var(--es-warning); color: var(--es-ink-700); }
.altvalid { color: var(--es-positive); }
.altinvalid { color: var(--es-negative); }

/* ---------------------------------------------------------------------
   10. Misc — pager, scrollbars
   --------------------------------------------------------------------- */
.datapager a, .datapager span { color: var(--es-text-blue); }

* { scrollbar-color: var(--es-ink-200) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--es-ink-200); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
   11. Responsive — collapse sidebar under 1100px
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .es-topbar .hamb { display: inline-block; }
    .es-sidebar { transform: translateX(-100%); transition: transform .15s ease-out; }
    #side-menu:checked ~ .es-sidebar,
    .es-sidebar.is-open { transform: translateX(0); box-shadow: var(--es-shadow-pop); }
    .main:has(.es-sidebar) { margin-left: 0; }
    .wrapper:has(.es-sidebar) .footer { margin-left: 0; }
    .es-topbar { left: 0; }
    .leftcol { left: 0; }
    .rightcol { margin-left: calc(220px + 24px); }
}
@media (max-width: 760px) {
    .leftcol { position: relative; left: 0; top: 0; width: auto; height: auto; padding: 16px; }
    .rightcol { margin: 16px; }
    .contentcontainer { margin: 12px; }
}

/* ---------------------------------------------------------------------
   12. Login (root Default.aspx + Login.ascx) — centered two-panel card
   --------------------------------------------------------------------- */
.logincontainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 760px;
    max-width: calc(100vw - 32px);
    min-height: 440px;
    display: flex;
    background: var(--es-bg-card);
    border-radius: var(--es-radius-lg);
    box-shadow: var(--es-shadow-card);
    overflow: hidden;
    padding: 0;
}

/* Left brand panel */
.logincontainer .logincontent {
    float: none;
    flex: 0 0 300px;
    width: 300px;
    height: auto;
    border-right: 1px solid var(--es-border);
    background: var(--es-ink-25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}
.logincontainer .logincontent > img { width: 100%; max-width: 200px; padding: 0; height: auto; }

/* Right form panel */
.logincontainer .loginbox {
    float: none;
    flex: 1 1 auto;
    margin: 0;
    padding: 48px 44px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.logincontainer .loginbox h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--es-text-title);
    margin: 0 0 6px;
}
/* turn the inline label text nodes into readable field labels */
.logincontainer .loginbox {
    color: var(--es-text-title);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}
/* drop the control's manual <br/> spacers — block inputs handle layout */
.logincontainer .loginbox br { display: none; }
.logincontainer .loginbox input[type=text],
.logincontainer .loginbox input[type=password] {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    margin: 6px 0 16px;
}
.logincontainer .loginbox label { font-weight: 400; }
/* keep checkbox + its label on one row (the loginbox is a flex column, so the
   CheckBox's wrapping span is one item and its input/label sit inline inside) */
.logincontainer .loginbox .rememberme {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
}
.logincontainer .loginbox .rememberme label { margin: 0; }
.logincontainer .loginbox input[type=checkbox] { margin: 0; flex: 0 0 auto; }

/* Button row: Login + Microsoft on one baseline, equal height */
.logincontainer .loginbox > div:has(.button) {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}
.logincontainer .loginbox .button,
.logincontainer .loginbox .ad_button { float: none !important; margin: 0; }
.logincontainer .loginbox > div:has(.button) .button {
    width: auto;
    min-width: 140px;
    text-align: center;
}

/* Microsoft / AD sign-in button — match the 40px button height */
.logincontainer .microsoftLogo {
    float: none !important;
    width: 140px !important;
    height: 40px !important;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    margin: 0 !important;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .12s ease-out, background-color .12s ease-out;
}
.logincontainer .microsoftLogo:hover { outline: none; border-color: var(--es-blue-500); background: var(--es-bg-hover); }
.logincontainer .microsoftLogo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Errors */
.validationError, .failureNotification { color: var(--es-negative); font-weight: 400; }
.loginbox .validationError {
    background: #FDECE8;
    border: 1px solid var(--es-negative);
    border-radius: var(--es-radius-sm);
    padding: 10px 12px;
    margin: 0 0 14px;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .logincontainer { flex-direction: column; min-height: 0; width: 380px; }
    .logincontainer .logincontent { flex-basis: auto; width: 100%; border-right: none; border-bottom: 1px solid var(--es-border); padding: 28px; }
    .logincontainer .logincontent > img { max-width: 150px; }
    .logincontainer .loginbox { padding: 32px 28px; }
}

/* =====================================================================
   14. Shared page utilities — moved out of inline <style> on edit pages
   (UserUpdt etc.). Loader overlay, datatable scroll, action-button rows.
   ===================================================================== */
.loaderBackground { position: fixed; inset: 0; background: rgba(53,64,82,.7); z-index: 99; display: none; }
.loader {
    border: 3px solid var(--es-ink-100);
    border-top: 3px solid var(--es-blue-500);
    border-radius: 50%;
    width: 30px; height: 30px;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: es-spin 1s linear infinite;
}
@keyframes es-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.datatable-container { overflow-x: auto; }
/* Scroll wrapper for wide list tables with filter headers (Cards, etc.).
   .es-list is table-layout:fixed/width:100% so it never overflows on its own;
   giving it a min-width lets the wrapper scroll horizontally on small screens
   instead of compressing columns until dates/filters clip again. */
.datatable-scroll > .datatable.es-list { min-width: 1000px; }
/* Only enable horizontal scroll on narrow viewports. On wide screens the
   wrapper stays overflow:visible so CalendarExtender/date-picker popups in the
   filter header are not clipped (the table already fits at >=1000px anyway). */
@media (max-width: 1100px) {
    .datatable-scroll { overflow-x: auto; }
}
.cancel-button, .send-email-button { margin-left: 30px; }
.button-container { margin-left: 30px; display: flex; align-items: center; gap: 10px; }
.button-container button { display: inline-block; }

/* =====================================================================
   13. Edit-form polish (UserUpdt & friends) — segmented Yes/No, photo card
   Scoped to .rightcol .form so it only touches the intra edit pages.
   ===================================================================== */
/* RadioButtonList (Flow) → segmented pill control. Native radio hidden, its
   adjacent <label> becomes the pill; the checked one fills brand blue. */
.rightcol .form td.secondcol input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0; margin: 0;
}
.rightcol .form td.secondcol label {
    display: inline-flex;
    align-items: center;
    margin: 4px 0 4px -1px;
    padding: 8px 18px;
    border: 1px solid var(--es-border);
    background: var(--es-bg);
    color: var(--es-text-title);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .12s ease-out, color .12s ease-out, border-color .12s ease-out;
}
.rightcol .form td.secondcol br { display: none; }   /* keep segmented pills on one row (Sexo + Sim/Não) */
.rightcol .form td.secondcol label:first-of-type { margin-left: 0; border-radius: var(--es-radius-pill) 0 0 var(--es-radius-pill); }
.rightcol .form td.secondcol label:last-of-type  { border-radius: 0 var(--es-radius-pill) var(--es-radius-pill) 0; }
.rightcol .form td.secondcol label:hover { background: var(--es-bg-hover); }
.rightcol .form td.secondcol input[type="radio"]:checked + label {
    /* position:relative lets the checked pill cover its neighbours' shared border.
       No positive z-index — a positive value created a page-content stacking layer
       that punched the Sim/Não pills through ModalPopup dialogs. */
    position: relative;
    background: var(--es-blue-500);
    color: #fff;
    border-color: var(--es-blue-500);
}
.rightcol .form td.secondcol input[type="radio"]:disabled + label {
    opacity: .45;
    cursor: not-allowed;
}
.rightcol .form td.secondcol input[type="radio"]:disabled:checked + label {
    background: var(--es-ink-400);
    border-color: var(--es-ink-400);
    color: #fff;
    opacity: .7;
}

/* =========================================================================
   Photo upload widget (UserUpdt) — eschooling design system
   Avatar acts as the file picker (hover overlay), with a primary "Carregar"
   and a ghost-danger "Apagar" below. Beats legacy Default.css rules
   (#ccc bg, absolute upload, max-height:160) via specificity + !important.
   ========================================================================= */
:root { --es-photo-w: 220px; --es-photo-h: 300px; }

.photocontainer.es-photo-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: var(--es-photo-w) !important;
    height: auto !important;          /* beat Default.css .photocontainer{height:180px} */
    margin: 0;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    position: static !important;
    box-shadow: none !important;
}

/* Portrait framed avatar (grows downward) that doubles as the file-picker trigger */
.es-photo-frame {
    position: relative;
    display: block;
    width: var(--es-photo-w);
    height: var(--es-photo-h);
    border-radius: var(--es-radius-md, 8px);
    overflow: hidden;
    border: 1px solid var(--es-border);
    box-shadow: var(--es-shadow-card);
    background: var(--es-ink-50);
    cursor: pointer;
}
.es-photo-readonly .es-photo-frame { cursor: default; }

/* The avatar image itself — placeholder silhouette shows when src is empty */
.es-photo-frame .userphoto,
.es-photo-card #userPhoto {
    display: block;
    width: var(--es-photo-w) !important;
    height: var(--es-photo-h) !important;
    max-width: var(--es-photo-w) !important;
    max-height: var(--es-photo-h) !important;
    object-fit: cover;
    border: none !important;
    border-radius: 0 !important;
    background: var(--es-ink-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A6AFBA'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center/112px no-repeat;
    font-size: 0; color: transparent;        /* swallow broken-img alt text */
}

/* Hover overlay (camera + "Escolher foto") — also the <label> for the input */
.es-photo-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    margin: 0;
    color: #fff; font-size: 12px; font-weight: 700; text-align: center;
    background: rgba(0, 32, 51, 0.55);
    opacity: 0;
    transition: opacity .15s ease-out;
    cursor: pointer;
}
.es-photo-overlay i { font-size: 22px; }
.es-photo-frame:hover .es-photo-overlay,
.es-photo-frame:focus-within .es-photo-overlay { opacity: 1; }

.es-file-input {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; overflow: hidden; padding: 0; margin: 0; border: 0;
}

/* Action buttons under the avatar */
.uploadphotocontainer.es-photo-upload {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 8px !important;
    width: var(--es-photo-w);
    margin: 0 !important;
    position: static !important;
    bottom: auto !important; left: auto !important;
}
.es-file-name {
    font-size: 12px; color: var(--es-text); text-align: center;
    max-width: var(--es-photo-w);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.es-file-name:empty { display: none; }

.es-photo-upload .es-photo-save,
.es-photo-upload .es-photo-delete {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 6px 10px !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}
/* "Apagar Foto" → ghost-danger so it reads as the destructive secondary */
.es-photo-upload .es-photo-delete {
    background: var(--es-paper) !important;
    color: var(--es-ink-500) !important;
    border: 1px solid var(--es-border) !important;
    font-weight: 700;
}
.es-photo-upload .es-photo-delete:hover {
    color: #c0392b !important;
    border-color: #c0392b !important;
    background: #fdf3f2 !important;
}

/* =========================================================================
   Filter rows (.optionsrow) — date pickers were clipped (inline width:80px
   too narrow for "01/06/2025"). min-width clamps over the inline width
   without !important; the legacy 80px td grows to fit (auto table layout).
   Transversal: applies to every filter row across the BackOffice.
   ========================================================================= */
.optionsrow input[type="text"] {
    min-width: 112px;
    box-sizing: border-box;
}
/* Date-range filter inputs in list headers (Cards "Data de Emissão / Validade",
   StockTransactions/OrderDocuments/MealMenus/Products date ranges). Explicit
   .es-datefilter class on the TextBox — min-width clamps over the inline
   width:80px without !important, so "18/06/2026" fits. Replaces an earlier
   selector coupled to the inline style string. */
.es-datefilter {
    min-width: 104px;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
}