/* ========================================================================
   EEAGIZA Modern Theme — Engineering green, Bootstrap 5 ready
   Light mode, RTL-aware, designed for consultants & engineers.
   ======================================================================== */

:root {
    /* Brand — engineering deep green, anchored at #07683a */
    --eg-green-50:  #e8f3ec;
    --eg-green-100: #c6e3d0;
    --eg-green-200: #99cdaa;
    --eg-green-300: #66b380;
    --eg-green-400: #2f9758;
    --eg-green-500: #128947;
    --eg-green-600: #07683a;   /* primary brand */
    --eg-green-700: #055530;
    --eg-green-800: #044226;
    --eg-green-900: #02321b;

    /* Neutrals (slate scale) */
    --eg-white:     #ffffff;
    --eg-bg:        #f6faf7;       /* page bg, slight green tint */
    --eg-surface:   #ffffff;       /* card bg */
    --eg-border:    #e2e8f0;
    --eg-border-strong: #cbd5e1;
    --eg-muted:     #94a3b8;
    --eg-text-soft: #475569;
    --eg-text:      #0f172a;

    /* Semantic */
    --eg-primary:        var(--eg-green-600);
    --eg-primary-hover:  var(--eg-green-700);
    --eg-primary-soft:   var(--eg-green-100);
    --eg-primary-ring:   rgba(7, 104, 58, .22);

    --eg-success: #07683a;
    --eg-warning: #d97706;
    --eg-danger:  #dc2626;
    --eg-info:    #0284c7;

    /* Shape & motion */
    --eg-radius:     14px;
    --eg-radius-sm:  10px;
    --eg-radius-pill: 999px;

    --eg-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --eg-shadow-sm: 0 2px 6px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .04);
    --eg-shadow:    0 8px 24px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .04);
    --eg-shadow-lg: 0 24px 60px rgba(15, 23, 42, .12), 0 8px 16px rgba(15, 23, 42, .06);

    --eg-ease: cubic-bezier(.2, .8, .2, 1);

    /* Typography */
    --eg-font-ar: 'IBM Plex Sans Arabic', 'Readex Pro', 'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
    --eg-font-en: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --eg-font:    var(--eg-font-ar);
}

/* ---------- Base ---------- */

html, body {
    background: var(--eg-bg);
    color: var(--eg-text);
    font-family: var(--eg-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* IBM Plex weights cap at 700 — adjust ultra-bold targets */
.eg-login__hero h1,
.eg-login__title,
.eg-login__logo-text { font-weight: 700; }

html[lang="en"] body { font-family: var(--eg-font-en); }

a { color: var(--eg-primary); text-decoration: none; transition: color .15s var(--eg-ease); }
a:hover { color: var(--eg-primary-hover); }

::selection { background: var(--eg-primary-soft); color: var(--eg-green-800); }

/* =========================================================================
   LOGIN PAGE
   ========================================================================= */

body.eg-login-body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--eg-bg);
    display: flex;
}

.eg-login {
    flex: 1;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 991.98px) {
    .eg-login { grid-template-columns: 1fr; }
}

/* ----- Brand panel ----- */
.eg-login__brand {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(1200px 600px at 100% 0%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(0,0,0,.18), transparent 60%),
        linear-gradient(135deg, var(--eg-green-700) 0%, var(--eg-green-500) 100%);
}

.eg-login__brand::before,
.eg-login__brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.eg-login__brand::before {
    width: 520px; height: 520px;
    inset-inline-end: -180px;
    top: -180px;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
}
.eg-login__brand::after {
    width: 360px; height: 360px;
    inset-inline-start: -120px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(255,255,255,.10), transparent 60%);
}

.eg-login__brand-inner { position: relative; z-index: 1; }

.eg-login__logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 3.5rem;
}
.eg-login__logo img {
    height: 56px; width: 56px;
    border-radius: 14px;
    object-fit: cover;
    background: rgba(255,255,255,.15);
    padding: 6px;
    backdrop-filter: blur(4px);
}
.eg-login__logo-text {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: .2px;
}

.eg-login__hero h1 {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 1rem 0;
    letter-spacing: -0.5px;
}
.eg-login__hero p {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.7;
    color: rgba(255,255,255,.95);
    max-width: 460px;
    margin: 0;
}

.eg-login__features {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0 0;
    display: grid;
    gap: .85rem;
    max-width: 460px;
}
.eg-login__features li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}
.eg-login__features .eg-feat-ico {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(255,255,255,.18);
    display: grid; place-items: center;
    color: #fff;
}

.eg-login__copyright {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.85);
    font-size: .9rem;
    font-weight: 500;
}

/* ----- Form panel ----- */
.eg-login__form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--eg-surface);
}

.eg-login__card {
    width: 100%;
    max-width: 440px;
}

.eg-login__title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--eg-text);
    margin: 0 0 .4rem 0;
    letter-spacing: -0.3px;
}
.eg-login__subtitle {
    color: var(--eg-text-soft);
    margin: 0 0 2rem 0;
    font-size: 1rem;
    font-weight: 500;
}

/* ----- Form controls ----- */
.eg-field { margin-bottom: 1.1rem; }

.eg-label {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--eg-text);
    margin-bottom: .5rem;
}

.eg-input-wrap {
    position: relative;
}
.eg-input {
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    padding-inline-start: 2.85rem;
    border: 1.5px solid var(--eg-border);
    border-radius: var(--eg-radius-sm);
    background: var(--eg-white);
    color: var(--eg-text);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    transition: border-color .15s var(--eg-ease), box-shadow .15s var(--eg-ease), background .15s;
    box-sizing: border-box;
}
.eg-input::placeholder { color: var(--eg-muted); font-weight: 500; }
.eg-input:hover { border-color: var(--eg-border-strong); }
.eg-input:focus {
    outline: none;
    border-color: var(--eg-primary);
    box-shadow: 0 0 0 4px var(--eg-primary-ring);
}
.eg-input:focus ~ .eg-input-icon { color: var(--eg-primary); }

.eg-input-icon {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--eg-muted);
    pointer-events: none;
    font-size: 1rem;
    transition: color .15s var(--eg-ease);
}

.eg-input-toggle {
    position: absolute;
    inset-inline-end: .75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: .35rem .5rem;
    color: var(--eg-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.eg-input-toggle:hover { color: var(--eg-primary); background: var(--eg-primary-soft); }

/* ----- Checkbox + link row ----- */
.eg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .25rem 0 1.5rem 0;
    flex-wrap: wrap;
}

.eg-check {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--eg-text);
    cursor: pointer;
    user-select: none;
}
.eg-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid var(--eg-border-strong);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: all .15s var(--eg-ease);
    display: grid; place-items: center;
}
.eg-check input[type="checkbox"]:checked {
    background: var(--eg-primary);
    border-color: var(--eg-primary);
}
.eg-check input[type="checkbox"]:checked::after {
    content: '';
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

.eg-link {
    font-size: .95rem;
    font-weight: 700;
    color: var(--eg-primary);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}
.eg-link:hover { color: var(--eg-primary-hover); text-decoration: underline; }

/* ----- Buttons ----- */
.eg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    height: 50px;
    padding: 0 1.5rem;
    border: 1.5px solid transparent;
    border-radius: var(--eg-radius-sm);
    font-family: inherit;
    font-weight: 700;
    font-size: 1.02rem;
    cursor: pointer;
    transition: all .15s var(--eg-ease);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}
.eg-btn:disabled { opacity: .65; cursor: not-allowed; }
.eg-btn--block { width: 100%; }

.eg-btn--primary {
    background: var(--eg-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(7,104,58,.28);
}
.eg-btn--primary:hover:not(:disabled) {
    background: var(--eg-primary-hover);
    box-shadow: 0 8px 22px rgba(7,104,58,.36);
    transform: translateY(-1px);
    color: #fff;
}
.eg-btn--primary:active { transform: translateY(0); }

.eg-btn--ghost {
    background: transparent;
    color: var(--eg-text-soft);
    border-color: var(--eg-border-strong);
}
.eg-btn--ghost:hover {
    color: var(--eg-primary);
    border-color: var(--eg-primary);
    background: var(--eg-primary-soft);
}

.eg-btn--danger {
    background: var(--eg-danger);
    color: #fff;
    box-shadow: 0 4px 14px rgba(220, 38, 38, .25);
}
.eg-btn--danger:hover:not(:disabled) {
    background: #b91c1c;
    box-shadow: 0 8px 22px rgba(220, 38, 38, .32);
    transform: translateY(-1px);
    color: #fff;
}

.eg-actions {
    display: flex;
    gap: .75rem;
}
.eg-actions .eg-btn { flex: 1; }

/* ----- Alerts ----- */
.eg-alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: var(--eg-radius-sm);
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}
.eg-alert--danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.eg-alert--danger .eg-alert-ico { color: var(--eg-danger); }

.eg-alert-ico { flex: 0 0 auto; margin-top: 1px; }

/* ----- Form transitions ----- */
.eg-form { animation: eg-fade .35s var(--eg-ease); }
.eg-form[hidden] { display: none; }
@keyframes eg-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Responsive ----- */
@media (max-width: 991.98px) {
    .eg-login__brand {
        padding: 2.5rem 1.75rem;
        min-height: 280px;
    }
    .eg-login__hero h1 { font-size: 1.75rem; }
    .eg-login__hero p { font-size: .975rem; }
    .eg-login__features { display: none; }
    .eg-login__form-wrap { padding: 2.25rem 1.5rem; }
}

@media (max-width: 575.98px) {
    .eg-login__brand { padding: 2rem 1.25rem; min-height: 220px; }
    .eg-login__logo { margin-bottom: 1.75rem; }
    .eg-login__logo img { height: 44px; width: 44px; }
    .eg-login__hero h1 { font-size: 1.5rem; }
    .eg-login__title { font-size: 1.5rem; }
}

/* =========================================================================
   APP SHELL — topbar + sidebar + content
   ========================================================================= */

:root {
    --eg-topbar-h: 64px;
    --eg-sidebar-w: 268px;
    --eg-sidebar-w-collapsed: 76px;
}

body.eg-app {
    margin: 0;
    background: var(--eg-bg);
    min-height: 100vh;
}

.eg-app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--eg-sidebar-w) 1fr;
    grid-template-rows: var(--eg-topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
}
/* CSS Grid auto-mirrors columns when dir="rtl" — no override needed. */

/* ----- Topbar ----- */
.eg-topbar {
    grid-area: topbar;
    background: var(--eg-surface);
    border-bottom: 1px solid var(--eg-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

.eg-topbar__hamburger {
    display: none;
    width: 40px; height: 40px;
    border: 1px solid var(--eg-border);
    background: var(--eg-white);
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: var(--eg-text);
    cursor: pointer;
    transition: all .15s var(--eg-ease);
}
.eg-topbar__hamburger:hover {
    border-color: var(--eg-primary);
    color: var(--eg-primary);
    background: var(--eg-primary-soft);
}

.eg-topbar__title {
    flex: 1;
    min-width: 0;
}
.eg-topbar__page-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--eg-text);
    margin: 0;
    line-height: 1.2;
}
.eg-topbar__crumbs {
    font-size: .82rem;
    color: var(--eg-text-soft);
    font-weight: 500;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.eg-topbar__crumbs a { color: var(--eg-text-soft); }
.eg-topbar__crumbs a:hover { color: var(--eg-primary); }
.eg-topbar__crumbs i { font-size: .55rem; opacity: .55; }

.eg-topbar__actions {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.eg-icon-btn {
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid var(--eg-border);
    background: var(--eg-white);
    color: var(--eg-text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s var(--eg-ease);
    font-size: 1rem;
    position: relative;
}
.eg-icon-btn:hover {
    border-color: var(--eg-primary);
    color: var(--eg-primary);
    background: var(--eg-primary-soft);
}
.eg-icon-btn .eg-dot {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--eg-danger);
    border: 2px solid var(--eg-white);
}

/* User menu */
.eg-user-menu { position: relative; }
.eg-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .35rem .75rem .35rem .35rem;
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius-pill);
    background: var(--eg-white);
    cursor: pointer;
    transition: all .15s var(--eg-ease);
}
[dir="rtl"] .eg-user-trigger { padding: .35rem .35rem .35rem .75rem; }
.eg-user-trigger:hover {
    border-color: var(--eg-primary);
    background: var(--eg-primary-soft);
}
.eg-user-trigger img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 32px;
}
.eg-user-trigger__name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--eg-text);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eg-user-trigger i.fa-chevron-down {
    color: var(--eg-text-soft);
    font-size: .7rem;
}

.eg-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    background: var(--eg-white);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-shadow-lg);
    min-width: 240px;
    padding: .5rem;
    z-index: 100;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    transition: all .15s var(--eg-ease);
}
.eg-dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.eg-dropdown a, .eg-dropdown button {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .85rem;
    border-radius: var(--eg-radius-sm);
    color: var(--eg-text);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    width: 100%;
    text-align: inherit;
    font-family: inherit;
    transition: background .12s, color .12s;
}
.eg-dropdown a:hover, .eg-dropdown button:hover {
    background: var(--eg-primary-soft);
    color: var(--eg-primary-hover);
}
.eg-dropdown a i, .eg-dropdown button i {
    width: 18px;
    color: var(--eg-text-soft);
    font-size: .95rem;
}
.eg-dropdown a:hover i, .eg-dropdown button:hover i { color: var(--eg-primary); }
.eg-dropdown__divider {
    height: 1px;
    background: var(--eg-border);
    margin: .35rem .25rem;
}

/* ----- Sidebar ----- */
.eg-sidebar {
    grid-area: sidebar;
    background: var(--eg-white);
    border-inline-end: 1px solid var(--eg-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    z-index: 60;
}

.eg-sidebar__brand {
    height: var(--eg-topbar-h);
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    border-bottom: 1px solid var(--eg-border);
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
}
.eg-sidebar__brand:hover { color: inherit; }
.eg-sidebar__brand img {
    width: 36px; height: 36px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--eg-primary-soft);
}
.eg-sidebar__brand-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--eg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eg-sidebar__search {
    padding: 1rem 1rem .25rem;
}
.eg-sidebar__search .eg-input-wrap { margin: 0; }
.eg-sidebar__search .eg-input {
    height: 42px;
    font-size: .9rem;
    font-weight: 500;
    background: var(--eg-bg);
    border-color: transparent;
}
.eg-sidebar__search .eg-input:focus {
    background: var(--eg-white);
}

.eg-sidebar__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .5rem .5rem 1rem;
}
.eg-sidebar__scroll::-webkit-scrollbar { width: 6px; }
.eg-sidebar__scroll::-webkit-scrollbar-thumb {
    background: var(--eg-border-strong);
    border-radius: 3px;
}

/* Re-skin the BS3 menudisply markup */
.eg-sidebar .page-sidebar-menu {
    list-style: none;
    padding: 0 !important;
    margin: 0;
}
.eg-sidebar .sidebar-toggler-wrapper,
.eg-sidebar .sidebar-search-wrapper { display: none !important; }

.eg-sidebar .page-sidebar-menu > li {
    list-style: none;
    margin: 2px 0;
}
.eg-sidebar .page-sidebar-menu > li > a,
.eg-sidebar .page-sidebar-menu .sub-menu > li > a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .65rem .9rem;
    border-radius: var(--eg-radius-sm);
    color: var(--eg-text-soft);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s, color .12s;
    position: relative;
}
.eg-sidebar .page-sidebar-menu > li > a:hover,
.eg-sidebar .page-sidebar-menu .sub-menu > li > a:hover {
    background: var(--eg-primary-soft);
    color: var(--eg-primary-hover);
}
/* Top-level ACTIVE LEAF (no open submenu) → solid primary */
.eg-sidebar .page-sidebar-menu > li.active:not(.open) > a {
    background: var(--eg-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(7,104,58,.24);
}
.eg-sidebar .page-sidebar-menu > li.active:not(.open) > a:hover {
    background: var(--eg-primary-hover);
    color: #fff;
}

/* Top-level PARENT whose submenu is open / contains the active leaf → soft */
.eg-sidebar .page-sidebar-menu > li.active.open > a,
.eg-sidebar .page-sidebar-menu > li.open > a {
    background: var(--eg-primary-soft);
    color: var(--eg-primary-hover);
    box-shadow: none;
}
.eg-sidebar .page-sidebar-menu > li.active.open > a:hover,
.eg-sidebar .page-sidebar-menu > li.open > a:hover {
    background: var(--eg-primary-soft);
    color: var(--eg-primary-hover);
}

/* SUB-MENU ACTIVE leaf → solid primary, regardless of nesting depth */
.eg-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.eg-sidebar .page-sidebar-menu .sub-menu li.active > a {
    background: var(--eg-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(7,104,58,.24);
}
.eg-sidebar .page-sidebar-menu .sub-menu > li.active > a:hover,
.eg-sidebar .page-sidebar-menu .sub-menu li.active > a:hover {
    background: var(--eg-primary-hover);
    color: #fff;
}

/* Visual hint: keep the indent/border colour brand-tinted under an active branch */
.eg-sidebar .page-sidebar-menu > li.active.open > .sub-menu,
.eg-sidebar .page-sidebar-menu > li.open.active > .sub-menu {
    border-inline-start-color: var(--eg-primary);
}

.eg-sidebar .page-sidebar-menu > li > a > i,
.eg-sidebar .page-sidebar-menu .sub-menu > li > a > i {
    font-size: 1rem;
    width: 22px;
    text-align: center;
    flex: 0 0 22px;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Default icon when DB row has no icon set (empty class, just "fa", or any
   class string without an "fa-xxx" glyph token) */
.eg-sidebar .page-sidebar-menu > li > a > i:not([class*="fa-"])::before,
.eg-sidebar .page-sidebar-menu .sub-menu > li > a > i:not([class*="fa-"])::before {
    content: '\f192'; /* fa-circle-dot */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .8rem;
    opacity: .55;
}

/* Default icon for parent items (those that have a sub-menu) */
.eg-sidebar .page-sidebar-menu > li:has(> .sub-menu) > a > i:not([class*="fa-"])::before {
    content: '\f07b'; /* fa-folder */
    font-size: .95rem;
    opacity: .7;
}
.eg-sidebar .page-sidebar-menu .title { flex: 1; }

.eg-sidebar .page-sidebar-menu .arrow {
    width: 18px; height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s var(--eg-ease);
    margin-inline-start: auto;
}
.eg-sidebar .page-sidebar-menu .arrow::before {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .75rem;
}
.eg-sidebar .page-sidebar-menu > li.open > a > .arrow {
    transform: rotate(-180deg);
}
.eg-sidebar .page-sidebar-menu .selected { display: none; }

.eg-sidebar .page-sidebar-menu .sub-menu {
    list-style: none;
    padding: .25rem 0 .25rem 0;
    margin: .25rem 0 .35rem;
    display: none;
    border-inline-start: 2px solid var(--eg-border);
    margin-inline-start: 1.4rem;
    padding-inline-start: .5rem;
}
.eg-sidebar .page-sidebar-menu > li.open > .sub-menu { display: block; }
.eg-sidebar .page-sidebar-menu .sub-menu > li > a {
    padding: .5rem .75rem;
    font-size: .88rem;
    font-weight: 500;
}

.eg-sidebar .badge {
    background: var(--eg-danger);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    margin-inline-start: auto;
}

/* ----- Main content ----- */
.eg-main {
    grid-area: main;
    padding: 1.75rem 2rem 3rem;
    min-width: 0;
}

.eg-page-header {
    margin-bottom: 1.5rem;
}
.eg-page-header__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--eg-text);
    margin: 0 0 .35rem 0;
    letter-spacing: -0.2px;
}
.eg-page-header__subtitle {
    font-size: .95rem;
    color: var(--eg-text-soft);
    margin: 0;
}

/* ----- Cards ----- */
.eg-card {
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--eg-shadow-xs);
    transition: box-shadow .15s var(--eg-ease), transform .15s var(--eg-ease);
}
.eg-card:hover {
    box-shadow: var(--eg-shadow-sm);
}
.eg-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--eg-text);
    margin: 0 0 .9rem 0;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.eg-card__title i { color: var(--eg-primary); }

/* ----- KPI cards ----- */
.eg-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.eg-kpi {
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    padding: 1.25rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--eg-shadow-xs);
    transition: all .15s var(--eg-ease);
    position: relative;
    overflow: hidden;
}
.eg-kpi::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--eg-tone, var(--eg-primary));
    opacity: 0;
    transition: opacity .15s var(--eg-ease);
}
.eg-kpi:hover {
    border-color: var(--eg-tone, var(--eg-primary));
    box-shadow: var(--eg-shadow);
    transform: translateY(-2px);
    color: inherit;
}
.eg-kpi:hover::before { opacity: 1; }

.eg-kpi__ico {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--eg-tone-soft, var(--eg-primary-soft));
    color: var(--eg-tone, var(--eg-primary));
    display: grid; place-items: center;
    font-size: 1.35rem;
}

.eg-kpi__body {
    flex: 1;
    min-width: 0;
}
.eg-kpi__label {
    font-size: .85rem;
    color: var(--eg-text-soft);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}
.eg-kpi__value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--eg-text);
    margin: 2px 0 0 0;
    line-height: 1.1;
    letter-spacing: -.5px;
}
.eg-kpi__trend {
    font-size: .8rem;
    color: var(--eg-text-soft);
    margin-top: 2px;
}

/* tone variants */
.eg-kpi--green   { --eg-tone: var(--eg-green-600); --eg-tone-soft: var(--eg-green-100); }
.eg-kpi--blue    { --eg-tone: #2563eb; --eg-tone-soft: #dbeafe; }
.eg-kpi--orange  { --eg-tone: #ea580c; --eg-tone-soft: #ffedd5; }
.eg-kpi--purple  { --eg-tone: #7c3aed; --eg-tone-soft: #ede9fe; }
.eg-kpi--rose    { --eg-tone: #e11d48; --eg-tone-soft: #ffe4e6; }
.eg-kpi--slate   { --eg-tone: #475569; --eg-tone-soft: #e2e8f0; }

/* ----- Section header ----- */
.eg-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.25rem 0 .85rem;
    gap: 1rem;
}
.eg-section-head h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--eg-text);
    margin: 0;
}

/* ----- Quick actions ----- */
.eg-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .85rem;
}
.eg-quick {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    text-decoration: none;
    color: var(--eg-text);
    transition: all .15s var(--eg-ease);
}
.eg-quick:hover {
    border-color: var(--eg-primary);
    background: var(--eg-primary-soft);
    color: var(--eg-primary-hover);
    transform: translateY(-1px);
}
.eg-quick__ico {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--eg-primary-soft);
    color: var(--eg-primary);
    display: grid; place-items: center;
    font-size: 1rem;
    flex: 0 0 auto;
}
.eg-quick:hover .eg-quick__ico {
    background: var(--eg-primary);
    color: #fff;
}
.eg-quick__label {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ----- Inline office input bar (consultant) ----- */
.eg-inline-form {
    display: flex;
    gap: .65rem;
    align-items: end;
    background: var(--eg-surface);
    padding: 1rem 1.25rem;
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    margin-bottom: 1.5rem;
}
.eg-inline-form .eg-field { flex: 1; margin-bottom: 0; }
.eg-inline-form .eg-btn { height: 50px; }

/* ----- Mobile ----- */
@media (max-width: 991.98px) {
    .eg-app-shell,
    [dir="rtl"] .eg-app-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }
    .eg-sidebar {
        position: fixed;
        top: 0;
        inset-inline-start: 0;          /* LTR: pin to left; RTL: pin to right */
        height: 100vh;
        width: var(--eg-sidebar-w);
        max-width: 88vw;
        transform: translateX(-100%);   /* LTR: off-screen to the left */
        transition: transform .25s var(--eg-ease);
        box-shadow: var(--eg-shadow-lg);
        z-index: 70;                    /* above topbar (50) and overlay (55) */
    }
    [dir="rtl"] .eg-sidebar {
        transform: translateX(100%);    /* RTL: pinned to right, off-screen to the right */
    }
    .eg-sidebar.is-open,
    [dir="rtl"] .eg-sidebar.is-open    { transform: translateX(0) !important; }
    .eg-topbar__hamburger { display: inline-flex !important; }

    .eg-overlay {
        position: fixed; inset: 0;
        background: rgba(15,23,42,.45);
        z-index: 55;
        opacity: 0;
        visibility: hidden;
        transition: all .2s var(--eg-ease);
    }
    .eg-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    .eg-main { padding: 1.25rem 1rem 2.5rem; }
    .eg-user-trigger__name { display: none; }
}

@media (max-width: 575.98px) {
    .eg-page-header__title { font-size: 1.35rem; }
    .eg-kpi__value { font-size: 1.5rem; }
}

/* =========================================================================
   LEGACY (BS3 + Metronic) → MODERN COMPAT LAYER
   Re-skins existing show.html / add.html / edit.html markup without
   touching any view file.
   ========================================================================= */

/* --- Page wrappers: let them flow inside .eg-main without extra padding --- */
.eg-main .page-content-wrapper,
.eg-main .page-content {
    padding: 0;
    margin: 0;
    background: transparent;
    min-height: 0;
}

/* --- Hide the in-view breadcrumb/title (we have them in the topbar) --- */
.eg-main .page-bar {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 .5rem;
}
.eg-main .page-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* topbar already shows it */
}
.eg-main .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--eg-text);
    margin: 0 0 1.25rem;
    letter-spacing: -.2px;
}
.eg-main .page-title small { color: var(--eg-text-soft); font-weight: 500; }

/* --- col-xs-* polyfill (BS5 dropped xs prefix; old views still use it) --- */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    flex: 0 0 auto;
    box-sizing: border-box;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left:  calc(var(--bs-gutter-x, 1.5rem) * .5);
    width: 100%;
    margin-top: var(--bs-gutter-y, 0);
}
.col-xs-1  { width: 8.33333333%; }
.col-xs-2  { width: 16.66666667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.33333333%; }
.col-xs-5  { width: 41.66666667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.33333333%; }
.col-xs-8  { width: 66.66666667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }

/* --- pull-* polyfill (BS5 renamed to float-end/float-start) --- */
.pull-right { float: inline-end !important; }
.pull-left  { float: inline-start !important; }

/* --- Portlet → modern card --- */
.eg-main .portlet,
.eg-main .portlet.light,
.eg-main .portlet.box {
    position: relative;
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    padding: 0;
    box-shadow: var(--eg-shadow-xs);
    margin-bottom: 1.25rem;
    transition: box-shadow .15s var(--eg-ease);
    overflow: hidden;
}
.eg-main .portlet:hover { box-shadow: var(--eg-shadow-sm); }
/* allow dropdown menus & date pickers to escape the card */
.eg-main .portlet.has-overflow,
.eg-main .portlet:has(.dropdown-menu),
.eg-main .portlet:has(.select2-container) { overflow: visible; }

/* ----- Portlet title bar ----- */
.eg-main .portlet-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
    padding: .85rem 1.25rem;
    min-height: 64px;
    background: linear-gradient(to bottom, #fbfdfc 0%, var(--eg-white) 100%);
    border-bottom: 1px solid var(--eg-border);
    border-radius: var(--eg-radius) var(--eg-radius) 0 0;
}
/* ===== .portlet.light — branded title bar ===== */
.eg-main .portlet.light > .portlet-title {
    background:
        linear-gradient(135deg, rgba(7, 104, 58, .10) 0%, rgba(7, 104, 58, .02) 65%, transparent 100%),
        var(--eg-surface);
    border-bottom: 1px solid var(--eg-green-200);
    border-top: 3px solid var(--eg-primary);
    border-start-start-radius: var(--eg-radius);
    border-start-end-radius: var(--eg-radius);
    min-height: 64px;
    padding: .9rem 1.25rem;
    position: relative;
}
/* brand accent under the title — short stripe */
.eg-main .portlet.light > .portlet-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    inset-inline-start: 0;
    width: 96px;
    height: 3px;
    background: linear-gradient(to inline-end, var(--eg-primary) 0%, transparent 100%);
    border-radius: 0;
}

/* Caption text in deep brand green */
.eg-main .portlet.light > .portlet-title .caption,
.eg-main .portlet.light > .portlet-title .caption .caption-subject {
    color: var(--eg-primary-hover);
    font-weight: 700;
    letter-spacing: 0;
}

/* Icon as a filled brand badge with stronger shadow.
   !important needed because Metronic's .font-red-sunglo / .font-red-flamingo /
   .font-blue-madison etc. on the <i> tag would otherwise win the cascade. */
.eg-main .portlet.light > .portlet-title .caption > i,
.eg-main .portlet.light > .portlet-title > i {
    background: var(--eg-primary);
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(7, 104, 58, .32);
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

/* Body — slightly more breathing room and a clean white surface */
.eg-main .portlet.light > .portlet-body,
.eg-main .portlet.light .portlet-body {
    padding: 1.5rem 1.5rem;
    background: var(--eg-surface);
}

/* When the body is a form (no padding) we don't add extra breathing — form-body owns it */
.eg-main .portlet.light > .portlet-body.form { padding: 0; }

/* ----- Caption (left side) ----- */
.eg-main .portlet-title .caption,
.eg-main .portlet-title > .caption {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--eg-text);
    font-size: 1rem;
    font-weight: 700;
    padding: 0;
    margin: 0;
    border: 0;
    float: none;
}
/* Icon — modern green badge */
.eg-main .portlet-title .caption > i,
.eg-main .portlet-title > i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--eg-primary-soft);
    color: var(--eg-primary);
    display: inline-grid;
    place-items: center;
    font-size: .95rem;
    flex: 0 0 auto;
    line-height: 1;
}
.eg-main .caption-subject {
    font-weight: 700;
    color: var(--eg-text);
    font-size: 1rem;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}
.eg-main .caption-helper {
    font-size: .82rem;
    font-weight: 500;
    color: var(--eg-text-soft);
    margin-inline-start: .35rem;
}

/* ----- Actions (right side) ----- */
.eg-main .portlet-title .actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border: 0;
    float: none;
}
.eg-main .portlet-title .actions .btn,
.eg-main .portlet-title .actions a.btn,
.eg-main .portlet-title .actions button {
    height: 38px;
    padding: 0 1rem;
    font-size: .88rem;
    border-radius: var(--eg-radius-sm);
    margin: 0;
}
.eg-main .portlet-title .actions .btn-icon-only,
.eg-main .portlet-title .actions .btn.btn-icon-only {
    width: 38px;
    padding: 0;
}
.eg-main .portlet-title .actions .btn-circle,
.eg-main .portlet-title .actions .btn.btn-circle {
    border-radius: var(--eg-radius-pill);
}
.eg-main .portlet-title .actions .btn-group { display: inline-flex; gap: .25rem; }
.eg-main .portlet-title .actions .dropdown-menu { z-index: 70; }

/* ----- Tools (collapse / config / reload / remove / fullscreen) ----- */
.eg-main .portlet-title .tools {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border: 0;
    float: none;
}
.eg-main .portlet-title .tools > a,
.eg-main .portlet-title .tools > .btn-default {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: transparent;
    border: 0;
    color: var(--eg-text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;     /* hide any inline glyph fallback text */
    line-height: 1;
    text-decoration: none;
    transition: all .12s var(--eg-ease);
}
.eg-main .portlet-title .tools > a:hover {
    background: var(--eg-primary-soft);
    color: var(--eg-primary);
}
.eg-main .portlet-title .tools > a::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .9rem;
}
.eg-main .portlet-title .tools > a.collapse::before,
.eg-main .portlet-title .tools > a.collapsed::before { content: '\f068'; } /* − */
.eg-main .portlet-title .tools > a.expand::before     { content: '\f067'; } /* + */
.eg-main .portlet-title .tools > a.config::before     { content: '\f013'; } /* cog */
.eg-main .portlet-title .tools > a.reload::before     { content: '\f021'; } /* refresh */
.eg-main .portlet-title .tools > a.remove::before     { content: '\f00d'; } /* × */
.eg-main .portlet-title .tools > a.fullscreen::before { content: '\f065'; } /* expand */

/* Inputs (search) inside portlet-title */
.eg-main .portlet-title .inputs,
.eg-main .portlet-title .input-inline {
    flex: 1 1 240px;
    max-width: 360px;
}
.eg-main .portlet-title .inputs .form-control { height: 38px; }

/* ----- Body ----- */
.eg-main .portlet-body {
    padding: 1.25rem 1.5rem;
}
.eg-main .portlet-body.form { padding: 0; } /* legacy: form portlets push their own padding via .form-body */
.eg-main .portlet-body.no-padding { padding: 0; }
.eg-main .portlet-body > .table-responsive,
.eg-main .portlet-body > .dataTables_wrapper { margin: 0; }

/* form-actions inside portlet-body should bleed to the card edge */
.eg-main .portlet-body .form-actions {
    margin: 1.25rem -1.5rem -1.25rem;
    border-radius: 0 0 var(--eg-radius) var(--eg-radius);
}

/* ----- Coloured-box portlet variants (Metronic .box.green / .box.blue / etc.) ----- */
.eg-main .portlet.box > .portlet-title {
    background: var(--eg-primary);
    color: #fff;
    border-bottom-color: rgba(0,0,0,.08);
    background-image: linear-gradient(180deg, var(--eg-green-600) 0%, var(--eg-green-700) 100%);
}
.eg-main .portlet.box > .portlet-title .caption,
.eg-main .portlet.box > .portlet-title .caption .caption-subject,
.eg-main .portlet.box > .portlet-title .caption-helper { color: #fff; }
.eg-main .portlet.box > .portlet-title .caption > i {
    background: rgba(255,255,255,.18);
    color: #fff !important;
}
.eg-main .portlet.box > .portlet-title .tools > a { color: rgba(255,255,255,.85); }
.eg-main .portlet.box > .portlet-title .tools > a:hover { background: rgba(255,255,255,.18); color: #fff; }

.eg-main .portlet.box.blue   > .portlet-title { background-image: linear-gradient(180deg,#2563eb,#1d4ed8); }
.eg-main .portlet.box.red    > .portlet-title { background-image: linear-gradient(180deg,#dc2626,#b91c1c); }
.eg-main .portlet.box.purple > .portlet-title { background-image: linear-gradient(180deg,#7c3aed,#6d28d9); }
.eg-main .portlet.box.yellow > .portlet-title { background-image: linear-gradient(180deg,#d97706,#b45309); }
.eg-main .portlet.box.grey,
.eg-main .portlet.box.dark   > .portlet-title { background: var(--eg-text); background-image: none; }

/* --- Buttons --- */
.eg-main .btn,
.eg-main button.btn,
.eg-main a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 40px;
    padding: 0 1.05rem;
    border: 1.5px solid transparent;
    border-radius: var(--eg-radius-sm);
    font-family: inherit;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1;
    cursor: pointer;
    transition: all .15s var(--eg-ease);
    text-decoration: none;
    white-space: nowrap;
    background: var(--eg-white);
    color: var(--eg-text);
}
.eg-main .btn:hover { box-shadow: var(--eg-shadow-xs); }

.eg-main .btn-xs,
.eg-main .btn.btn-xs { height: 22px; padding: 0 .45rem; font-size: .72rem; gap: .25rem; }
.eg-main .btn-xs.btn-icon-only,
.eg-main .btn.btn-xs.btn-icon-only { width: 22px; padding: 0; }
.eg-main .btn-xs > i,
.eg-main .btn.btn-xs > i { font-size: .75rem; }
.eg-main .btn-sm,
.eg-main .btn.btn-sm { height: 36px; padding: 0 .85rem; font-size: .85rem; }
.eg-main .btn-lg,
.eg-main .btn.btn-lg { height: 48px; padding: 0 1.4rem; font-size: 1rem; }
.eg-main .btn-block,
.eg-main .btn.btn-block { width: 100%; }
.eg-main .btn-circle,
.eg-main .btn.btn-circle { border-radius: 999px; }

/* color variants — Metronic + BS5 names */
.eg-main .btn.green, .eg-main .btn.btn-success, .eg-main .btn.green-haze, .eg-main .btn.green-jungle, .eg-main .btn.green-meadow, .eg-main .btn.green-sharp, .eg-main .btn-primary {
    background: var(--eg-primary); color: #fff; border-color: var(--eg-primary);
}
.eg-main .btn.green:hover, .eg-main .btn.btn-success:hover, .eg-main .btn.green-haze:hover, .eg-main .btn.green-jungle:hover, .eg-main .btn.green-meadow:hover, .eg-main .btn.green-sharp:hover, .eg-main .btn-primary:hover {
    background: var(--eg-primary-hover); border-color: var(--eg-primary-hover); color: #fff;
}
.eg-main .btn.blue, .eg-main .btn.blue-hoki, .eg-main .btn.btn-info, .eg-main .btn.blue-madison, .eg-main .btn.blue-steel {
    background: #2563eb; color: #fff; border-color: #2563eb;
}
.eg-main .btn.blue:hover, .eg-main .btn.blue-hoki:hover, .eg-main .btn.btn-info:hover, .eg-main .btn.blue-madison:hover, .eg-main .btn.blue-steel:hover {
    background: #1d4ed8; border-color: #1d4ed8;
}
.eg-main .btn.red, .eg-main .btn.btn-danger, .eg-main .btn.red-flamingo, .eg-main .btn.red-pink, .eg-main .btn.red-sunglo, .eg-main .btn.red-thunderbird {
    background: var(--eg-danger); color: #fff; border-color: var(--eg-danger);
}
.eg-main .btn.red:hover, .eg-main .btn.btn-danger:hover, .eg-main .btn.red-flamingo:hover, .eg-main .btn.red-pink:hover, .eg-main .btn.red-sunglo:hover, .eg-main .btn.red-thunderbird:hover {
    background: #b91c1c; border-color: #b91c1c;
}
.eg-main .btn.yellow, .eg-main .btn.btn-warning, .eg-main .btn.yellow-gold, .eg-main .btn.yellow-casablanca {
    background: var(--eg-warning); color: #fff; border-color: var(--eg-warning);
}
.eg-main .btn.yellow:hover, .eg-main .btn.btn-warning:hover {
    background: #b45309; border-color: #b45309;
}
.eg-main .btn.purple, .eg-main .btn.purple-plum, .eg-main .btn.purple-soft, .eg-main .btn.purple-medium {
    background: #7c3aed; color: #fff; border-color: #7c3aed;
}
.eg-main .btn.purple:hover, .eg-main .btn.purple-plum:hover {
    background: #6d28d9; border-color: #6d28d9;
}
.eg-main .btn.grey, .eg-main .btn.grey-cascade, .eg-main .btn.grey-mint, .eg-main .btn.grey-salt, .eg-main .btn.grey-salsa, .eg-main .btn.btn-default, .eg-main .btn.default {
    background: var(--eg-white); color: var(--eg-text); border-color: var(--eg-border-strong);
}
.eg-main .btn.grey:hover, .eg-main .btn.grey-cascade:hover, .eg-main .btn.grey-salsa:hover, .eg-main .btn.btn-default:hover, .eg-main .btn.default:hover {
    background: var(--eg-bg); border-color: var(--eg-text-soft); color: var(--eg-text);
}
.eg-main .btn.dark, .eg-main .btn.btn-dark {
    background: var(--eg-text); color: #fff; border-color: var(--eg-text);
}
.eg-main .btn.btn-outline,
.eg-main .btn.btn-outline-primary {
    background: transparent; color: var(--eg-primary); border-color: var(--eg-primary);
}
.eg-main .btn.btn-outline:hover, .eg-main .btn.btn-outline-primary:hover {
    background: var(--eg-primary-soft); color: var(--eg-primary-hover);
}
.eg-main .btn-group { display: inline-flex; gap: .35rem; }

/* --- Forms --- */
.eg-main .form-group { margin-bottom: 1.1rem; }
.eg-main .form-group > label,
.eg-main label.control-label {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--eg-text);
    margin-bottom: .45rem;
}
.eg-main label.control-label.required::after,
.eg-main label.control-label .required { color: var(--eg-danger); }

.eg-main .form-control,
.eg-main .form-select,
.eg-main input[type="text"].form-control,
.eg-main input[type="email"].form-control,
.eg-main input[type="password"].form-control,
.eg-main input[type="number"].form-control,
.eg-main input[type="date"].form-control,
.eg-main input[type="tel"].form-control,
.eg-main textarea.form-control,
.eg-main select.form-control {
    width: 100%;
    min-height: 44px;
    padding: .6rem .9rem;
    border: 1.5px solid var(--eg-border);
    border-radius: var(--eg-radius-sm);
    background: var(--eg-white);
    color: var(--eg-text);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.45;
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-sizing: border-box;
}
.eg-main textarea.form-control { min-height: 120px; }
.eg-main .form-control:hover { border-color: var(--eg-border-strong); }
.eg-main .form-control:focus,
.eg-main .form-select:focus {
    outline: none;
    border-color: var(--eg-primary);
    box-shadow: 0 0 0 4px var(--eg-primary-ring);
}
.eg-main .form-control::placeholder { color: var(--eg-muted); font-weight: 500; }

.eg-main .form-control-solid {
    background: var(--eg-bg);
    border-color: transparent;
}

/* ----- Validation states (jQuery Validate + Bootstrap-style classes) ----- */
.eg-main .form-group.has-error .form-control,
.eg-main .form-control.error,
.eg-main .form-control.is-invalid,
.eg-main input.error,
.eg-main select.error,
.eg-main textarea.error {
    border-color: var(--eg-danger) !important;
    background-color: #fef2f2;
}
.eg-main .form-group.has-error .form-control:focus,
.eg-main .form-control.error:focus,
.eg-main .form-control.is-invalid:focus,
.eg-main input.error:focus,
.eg-main select.error:focus,
.eg-main textarea.error:focus {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .18);
}
.eg-main .form-group.has-error .control-label,
.eg-main .form-group.has-error > label { color: var(--eg-danger); }

.eg-main .form-group.has-success .form-control,
.eg-main .form-control.is-valid {
    border-color: var(--eg-primary);
    background-color: #f0fdf4;
}
.eg-main .form-group.has-success .control-label,
.eg-main .form-group.has-success > label { color: var(--eg-primary); }

/* Error / help message under input */
.eg-main .eg-field-error,
.eg-main label.error,
.eg-main span.error,
.eg-main .help-block.help-block-error,
.eg-main .invalid-feedback {
    display: block !important;
    color: var(--eg-danger);
    font-size: .82rem;
    font-weight: 600;
    margin-top: .35rem;
    line-height: 1.3;
}
.eg-main .help-block {
    display: block;
    color: var(--eg-text-soft);
    font-size: .82rem;
    margin-top: .35rem;
}

/* Required marker — Metronic uses .required next to label */
.eg-main label .required,
.eg-main label.required::after {
    color: var(--eg-danger);
    margin-inline-start: 3px;
    font-weight: 700;
}

/* ============================================================
   FORM-ACTIONS — footer bar with action buttons
   - When inside .portlet-body: bleeds to card edges (handled
     by the .portlet-body .form-actions rule in the portlet block).
   - Standalone: rendered as its own bordered panel.
   ============================================================ */
.eg-main .form-actions {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--eg-bg);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    row-gap: .5rem;
}

/* Modifiers */
.eg-main .form-actions.right    { justify-content: flex-end; }
.eg-main .form-actions.center   { justify-content: center; }
.eg-main .form-actions.noborder { border: 0; background: transparent; padding-inline: 0; }
.eg-main .form-actions.fluid    { background: transparent; }

/* Row layout (Metronic's <div class="row">/<div class="col-md-offset-3 col-md-9"> pattern) */
.eg-main .form-actions > .row {
    width: 100%;
    margin: 0;
    --bs-gutter-x: 0;
    flex: 1 1 100%;
}
.eg-main .form-actions > .row > [class*="col-"] {
    padding-inline: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

/* Buttons inside form-actions → bigger, bolder, primary-emphasised */
.eg-main .form-actions .btn,
.eg-main .form-actions button.btn,
.eg-main .form-actions a.btn,
.eg-main .form-actions input.btn,
.eg-main .form-actions input[type="submit"],
.eg-main .form-actions input[type="reset"],
.eg-main .form-actions input[type="button"] {
    height: 44px;
    padding: 0 1.5rem;
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    min-width: 110px;
    border-radius: var(--eg-radius-sm);
}
.eg-main .form-actions .btn-sm,
.eg-main .form-actions .btn.btn-sm { height: 38px; min-width: 0; padding: 0 1rem; font-size: .88rem; }

/* Submit / save buttons get a brand-coloured shadow for emphasis */
.eg-main .form-actions .btn.green,
.eg-main .form-actions .btn.btn-success,
.eg-main .form-actions .btn.btn-primary,
.eg-main .form-actions input[type="submit"]:not(.btn-default):not(.default):not(.grey):not(.btn-secondary):not(.btn-danger):not(.red) {
    background: var(--eg-primary);
    color: #fff;
    border-color: var(--eg-primary);
    box-shadow: 0 4px 14px rgba(7,104,58,.22);
}
.eg-main .form-actions .btn.green:hover,
.eg-main .form-actions .btn.btn-success:hover,
.eg-main .form-actions .btn.btn-primary:hover,
.eg-main .form-actions input[type="submit"]:not(.btn-default):not(.default):not(.grey):not(.btn-secondary):not(.btn-danger):not(.red):hover {
    background: var(--eg-primary-hover);
    border-color: var(--eg-primary-hover);
    box-shadow: 0 8px 22px rgba(7,104,58,.32);
    transform: translateY(-1px);
    color: #fff;
}

/* Cancel / default buttons → ghost-style */
.eg-main .form-actions .btn.default,
.eg-main .form-actions .btn.btn-default,
.eg-main .form-actions .btn.grey,
.eg-main .form-actions .btn.grey-cascade,
.eg-main .form-actions .btn.btn-secondary {
    background: var(--eg-white);
    color: var(--eg-text);
    border-color: var(--eg-border-strong);
    box-shadow: none;
}
.eg-main .form-actions .btn.default:hover,
.eg-main .form-actions .btn.btn-default:hover,
.eg-main .form-actions .btn.grey:hover,
.eg-main .form-actions .btn.grey-cascade:hover,
.eg-main .form-actions .btn.btn-secondary:hover {
    background: var(--eg-bg);
    border-color: var(--eg-text-soft);
    color: var(--eg-text);
}

/* RTL-aware floats: anything pull-right pushes to the end of the row */
.eg-main .form-actions .pull-right { margin-inline-start: auto; float: none !important; }
.eg-main .form-actions .pull-left  { margin-inline-end: auto;  float: none !important; }

/* Generic input-as-button polish (used outside form-actions too) */
.eg-main input.btn,
.eg-main input[type="submit"].btn,
.eg-main input[type="reset"].btn,
.eg-main input[type="button"].btn {
    height: 40px;
    padding: 0 1.05rem;
    border: 1.5px solid transparent;
    border-radius: var(--eg-radius-sm);
    font-family: inherit;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    background: var(--eg-white);
    color: var(--eg-text);
    line-height: 1;
    transition: all .15s var(--eg-ease);
}

.eg-main .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.eg-main .input-group > .form-control { flex: 1 1 auto; }
.eg-main .input-group-btn .btn,
.eg-main .input-group-text {
    background: var(--eg-bg);
    border: 1.5px solid var(--eg-border);
    color: var(--eg-text-soft);
    padding: 0 .9rem;
    display: inline-flex;
    align-items: center;
    border-radius: 0;
}
[dir="ltr"] .eg-main .input-group > :first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
[dir="ltr"] .eg-main .input-group > :last-child  { border-start-start-radius: 0; border-end-start-radius: 0; }
[dir="rtl"] .eg-main .input-group > :first-child { border-start-start-radius: 0; border-end-start-radius: 0; }
[dir="rtl"] .eg-main .input-group > :last-child  { border-start-end-radius: 0; border-end-end-radius: 0; }

.eg-main .input-icon { position: relative; }
.eg-main .input-icon > i {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--eg-muted);
    pointer-events: none;
}
.eg-main .input-icon > .form-control { padding-inline-start: 2.6rem; }

/* --- Metronic checkbox/radio --- */
.eg-main .mt-checkbox,
.eg-main .mt-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-inline-start: 26px;
    margin: 0 .25rem 0 0;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    color: var(--eg-text);
    min-height: 22px;
    line-height: 22px;
}
.eg-main .mt-checkbox > input[type="checkbox"],
.eg-main .mt-radio > input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.eg-main .mt-checkbox > span,
.eg-main .mt-radio > span {
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    background: #fff;
    border: 1.5px solid var(--eg-border-strong);
    border-radius: 5px;
    transition: all .15s var(--eg-ease);
    display: grid; place-items: center;
}
.eg-main .mt-radio > span { border-radius: 50%; }
.eg-main .mt-checkbox > input:checked ~ span,
.eg-main .mt-radio > input:checked ~ span {
    background: var(--eg-primary);
    border-color: var(--eg-primary);
}
.eg-main .mt-checkbox > input:checked ~ span::after {
    content: '';
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}
.eg-main .mt-radio > input:checked ~ span::after {
    content: '';
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
}
.eg-main .mt-checkbox.mt-checkbox-outline > input:not(:checked) ~ span,
.eg-main .mt-radio.mt-radio-outline > input:not(:checked) ~ span {
    background: transparent;
}

/* DataTables checkbox column */
.eg-main .table-checkbox label.mt-checkbox {
    padding-inline-start: 22px;
}

/* --- Tables --- */
.eg-main .table {
    width: 100%;
    background: var(--eg-surface);
    color: var(--eg-text);
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1rem;
}

/* Colored header — primary green with white text */
.eg-main .table > thead > tr > th,
.eg-main .table > tbody > tr > th,
.eg-main .table > tfoot > tr > th,
.eg-main table.dataTable > thead > tr > th {
    background: var(--eg-primary);
    background-image: linear-gradient(180deg, var(--eg-green-600) 0%, var(--eg-green-700) 100%);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    text-transform: none;
    letter-spacing: .2px;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--eg-green-800);
    border-top: 0;
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
}
.eg-main .table > thead > tr > th:first-child { border-start-start-radius: var(--eg-radius-sm); }
.eg-main .table > thead > tr > th:last-child  { border-start-end-radius: var(--eg-radius-sm); }

/* Body cells — never wrap */
.eg-main .table > tbody > tr > td,
.eg-main table.dataTable > tbody > tr > td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--eg-border);
    vertical-align: middle;
    font-size: .92rem;
    font-weight: 500;
    white-space: nowrap;
}
/* Allow wrap only when explicitly requested */
.eg-main .table td.wrap,
.eg-main .table td.text-wrap { white-space: normal; }

/* Bordered variant */
.eg-main .table-bordered { border: 1px solid var(--eg-border); border-radius: var(--eg-radius-sm); overflow: hidden; }
.eg-main .table-bordered > thead > tr > th { border-inline-end: 1px solid rgba(255,255,255,.18); }
.eg-main .table-bordered > tbody > tr > td { border-inline-end: 1px solid var(--eg-border); }
.eg-main .table-bordered > thead > tr > th:last-child,
.eg-main .table-bordered > tbody > tr > td:last-child { border-inline-end: 0; }

.eg-main .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(7, 104, 58, .025); }
.eg-main .table-hover > tbody > tr:hover > * { background: var(--eg-primary-soft); }

/* Horizontal scroll for wide tables — scoped so it ONLY wraps the table itself,
   not the surrounding length picker / search / info / pagination rows.
   The DataTables BS5 layout puts the table inside its own row > col-*, so we
   target that column with :has(). Manual tables can be wrapped in
   .table-responsive (or sit alone inside .portlet-body) for the same effect. */
.eg-main .dataTables_wrapper { overflow: visible; }
.eg-main .portlet-body { overflow: visible; }

.eg-main .dataTables_wrapper > .row > [class*="col-"]:has(> table.dataTable),
.eg-main .table-responsive,
.eg-main .portlet-body > .table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Pagination / info row — never scroll, always wrap nicely. */
.eg-main .dataTables_wrapper > .row:last-child {
    flex-wrap: wrap;
    row-gap: .5rem;
    align-items: center;
}
.eg-main .dataTables_wrapper .dataTables_info,
.eg-main .dataTables_wrapper .dataTables_paginate {
    overflow: visible !important;
    white-space: normal;
}
.eg-main .dataTables_wrapper .pagination {
    flex-wrap: wrap;
    margin: 0;
    gap: 4px;
}

/* ----- DataTables sort icons — clean single FA arrow ----- */
/* Reserve room on the side, kill DT's built-in ::before indicator. */
.eg-main table.dataTable.dataTable > thead > tr > th.sorting,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_asc,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_desc,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_asc_disabled,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_desc_disabled {
    cursor: pointer;
    position: relative;
    padding-inline-end: 30px !important;
    background-image: none !important;
}
.eg-main table.dataTable.dataTable > thead > tr > th.sorting::before,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_asc::before,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_desc::before,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_asc_disabled::before,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_desc_disabled::before {
    content: '' !important;
    display: none !important;
}

/* Our own ::after with FA6 sort icon */
.eg-main table.dataTable.dataTable > thead > tr > th.sorting::after,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_asc::after,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_desc::after,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_asc_disabled::after,
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_desc_disabled::after {
    font-family: var(--fa-style-family, 'Font Awesome 6 Free') !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    position: absolute !important;
    inset-inline-end: 10px !important;
    top: 50% !important;
    bottom: auto !important;
    inset-inline-start: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: .82rem !important;
    text-shadow: none !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, .55) !important;
    transition: color .12s var(--eg-ease);
}
.eg-main table.dataTable.dataTable > thead > tr > th.sorting::after          { content: '\f0dc' !important; }
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_asc::after      { content: '\f0de' !important; color: #fff !important; }
.eg-main table.dataTable.dataTable > thead > tr > th.sorting_desc::after     { content: '\f0dd' !important; color: #fff !important; }
.eg-main table.dataTable.dataTable > thead > tr > th.sorting:hover::after    { color: #fff !important; }

/* ----- DataTables: each pre-table row gets toolbar treatment ----- */

/* Row that holds the dt-buttons (Copy / CSV / Excel / PDF / Print) — keep
   the row + col wrappers transparent so only the buttons themselves show. */
.eg-main .dataTables_wrapper > .row:has(.dt-buttons) {
    display: block;
    margin: 0 0 .75rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.eg-main .dataTables_wrapper > .row:has(.dt-buttons) > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0;
}

/* Row that holds length picker and / or search input */
.eg-main .dataTables_wrapper > .row:has(.dataTables_length),
.eg-main .dataTables_wrapper > .row:has(.dataTables_filter) {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    background: var(--eg-bg);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    flex-wrap: wrap;
}
.eg-main .dataTables_wrapper > .row:has(.dataTables_length) > [class*="col-"],
.eg-main .dataTables_wrapper > .row:has(.dataTables_filter) > [class*="col-"] {
    width: auto;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    max-width: none;
}
/* If the row contains ONLY length (no filter), don't push the filter slot */
.eg-main .dataTables_wrapper > .row:has(.dataTables_length):not(:has(.dataTables_filter)) > [class*="col-"]:first-child {
    flex: 0 0 auto;
}
/* If the row contains ONLY the filter, let it span the row width */
.eg-main .dataTables_wrapper > .row:has(.dataTables_filter):not(:has(.dataTables_length)) > [class*="col-"] {
    flex: 1 1 100%;
    width: 100%;
}

/* Footer row (info + paginate) — never style as toolbar; only relax */
.eg-main .dataTables_wrapper > .row:has(.dataTables_info),
.eg-main .dataTables_wrapper > .row:has(.dataTables_paginate),
.eg-main .dataTables_wrapper > .row:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: .5rem;
    margin: 1rem 0 0;
    padding: 0;
    background: transparent;
    border: 0;
}

/* Length picker — pill */
.eg-main .dataTables_wrapper .dataTables_length {
    color: var(--eg-text-soft);
    font-size: .9rem;
    font-weight: 600;
    flex: 0 0 auto;
    text-align: start;
}
.eg-main .dataTables_wrapper .dataTables_length label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
}
.eg-main .dataTables_wrapper .dataTables_length select {
    height: 38px;
    min-width: 76px;
    padding: 0 2rem 0 .85rem;
    border: 1.5px solid var(--eg-border);
    border-radius: var(--eg-radius-pill);
    background: var(--eg-white);
    color: var(--eg-text);
    font-family: inherit;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2307683a' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 14px;
}
[dir="rtl"] .eg-main .dataTables_wrapper .dataTables_length select {
    background-position: left .65rem center;
    padding: 0 .85rem 0 2rem;
}
.eg-main .dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--eg-primary);
    box-shadow: 0 0 0 4px var(--eg-primary-ring);
}

/* Search input — centered, wide, icon-prefixed */
.eg-main .dataTables_wrapper .dataTables_filter {
    flex: 1 1 320px;
    margin: 0;
    text-align: center;
    max-width: 520px;
    margin-inline: auto;
}
.eg-main .dataTables_wrapper .dataTables_filter label {
    position: relative;
    display: block;
    margin: 0;
    font-size: 0;        /* hide the “Search:” caption */
    color: transparent;
}
.eg-main .dataTables_wrapper .dataTables_filter label::before {
    content: '\f002';    /* fa-magnifying-glass */
    font-family: var(--fa-style-family, 'Font Awesome 6 Free');
    font-weight: 900;
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .95rem;
    color: var(--eg-muted);
    pointer-events: none;
    z-index: 1;
}
.eg-main .dataTables_wrapper .dataTables_filter input,
.eg-main .dataTables_wrapper .dataTables_filter input[type="search"] {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 1rem;
    padding-inline-start: 2.7rem;
    border: 1.5px solid var(--eg-border);
    border-radius: var(--eg-radius-pill);
    background: var(--eg-white);
    color: var(--eg-text);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-sizing: border-box;
}
.eg-main .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--eg-muted); font-weight: 500; }
.eg-main .dataTables_wrapper .dataTables_filter input:hover { border-color: var(--eg-border-strong); }
.eg-main .dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--eg-primary);
    box-shadow: 0 0 0 4px var(--eg-primary-ring);
}

/* Pagination + info */
.eg-main .dataTables_wrapper .dt-paging .page-link,
.eg-main .dataTables_wrapper .pagination .page-link {
    color: var(--eg-text-soft);
    border-color: var(--eg-border);
    border-radius: var(--eg-radius-sm) !important;
    margin: 0 2px;
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all .12s var(--eg-ease);
}
.eg-main .dataTables_wrapper .pagination .page-link:hover {
    background: var(--eg-primary-soft);
    border-color: var(--eg-primary);
    color: var(--eg-primary-hover);
}
.eg-main .dataTables_wrapper .dt-paging .page-item.active .page-link,
.eg-main .dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--eg-primary);
    border-color: var(--eg-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(7, 104, 58, .22);
}
.eg-main .dataTables_wrapper .pagination .page-item.disabled .page-link {
    background: transparent;
    color: var(--eg-muted);
}
.eg-main .dataTables_wrapper .dataTables_info {
    color: var(--eg-text-soft);
    font-size: .88rem;
    font-weight: 500;
    padding-top: .85rem;
}

/* Mobile: stack the toolbar */
@media (max-width: 575.98px) {
    .eg-main .dataTables_wrapper > .row:first-child {
        flex-direction: column;
        align-items: stretch;
    }
    .eg-main .dataTables_wrapper .dataTables_filter {
        max-width: 100%;
        margin-inline: 0;
    }
    .eg-main .dataTables_wrapper .dataTables_length { text-align: center; }
}

/* --- Metronic display utilities (templates pre-render alert placeholders
   with .display-hide and JS toggles them to .display-show on validation) --- */
.display-hide { display: none !important; }
.display-show { display: block !important; }
.hidden       { display: none !important; }

/* --- Alerts --- */
.eg-main .alert {
    padding: .9rem 1.1rem;
    border-radius: var(--eg-radius-sm);
    border: 1px solid transparent;
    font-weight: 500;
    margin-bottom: 1rem;
}
.eg-main .alert-success { background: var(--eg-green-50); border-color: var(--eg-green-200); color: var(--eg-green-800); }
.eg-main .alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.eg-main .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.eg-main .alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.eg-main .alert .close,
.eg-main .alert button.close {
    background: transparent;
    border: 0;
    float: inline-end;
    font-size: 1.2rem;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

/* --- Badges, labels --- */
.eg-main .badge,
.eg-main .label {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    background: var(--eg-bg);
    color: var(--eg-text);
}
.eg-main .badge-default, .eg-main .label-default { background: var(--eg-bg); color: var(--eg-text-soft); }
.eg-main .badge-success, .eg-main .label-success, .eg-main .badge.bg-success { background: var(--eg-green-100); color: var(--eg-green-800); }
.eg-main .badge-info,    .eg-main .label-info,    .eg-main .badge.bg-info    { background: #dbeafe; color: #1e40af; }
.eg-main .badge-warning, .eg-main .label-warning, .eg-main .badge.bg-warning { background: #fef3c7; color: #92400e; }
.eg-main .badge-danger,  .eg-main .label-danger,  .eg-main .badge.bg-danger  { background: #fee2e2; color: #991b1b; }
.eg-main .badge-primary { background: var(--eg-primary-soft); color: var(--eg-primary-hover); }

/* --- Color helpers (Metronic .font-* utilities) --- */
.eg-main .font-green, .eg-main .font-green-haze, .eg-main .font-green-jungle { color: var(--eg-primary) !important; }
.eg-main .font-red, .eg-main .font-red-flamingo { color: var(--eg-danger) !important; }
.eg-main .font-blue, .eg-main .font-blue-hoki, .eg-main .font-blue-madison { color: #2563eb !important; }
.eg-main .font-yellow, .eg-main .font-yellow-gold { color: var(--eg-warning) !important; }
.eg-main .font-purple { color: #7c3aed !important; }
.eg-main .font-grey, .eg-main .font-grey-cascade { color: var(--eg-text-soft) !important; }
.eg-main .font-dark { color: var(--eg-text) !important; }
.eg-main .font-white { color: #fff !important; }
.eg-main .bold, .eg-main .strong { font-weight: 700; }
.eg-main .uppercase { text-transform: uppercase; letter-spacing: .3px; }

/* --- Margin / padding helpers commonly used in Metronic views --- */
.eg-main .margin-bottom-10 { margin-bottom: 10px; }
.eg-main .margin-bottom-20 { margin-bottom: 20px; }
.eg-main .margin-top-10 { margin-top: 10px; }
.eg-main .margin-top-20 { margin-top: 20px; }
.eg-main .margin-right-10 { margin-inline-end: 10px; }
.eg-main .margin-left-10  { margin-inline-start: 10px; }
.eg-main .clearfix::after { content: ''; display: block; clear: both; }
.eg-main .bg-inverse { background: transparent !important; }

/* =========================================================================
   FORM BODY / SECTION HEADERS / FILE INPUT / INPUT ICONS
   Patterns used across add.html / edit.html / show.html
   ========================================================================= */

/* portlet-body.form: padding handled by .form-body / .form-actions inside */
.eg-main .portlet-body.form { padding: 0; }
.eg-main .portlet-body.form > form { display: block; }

/* Form body — comfortable breathing room + a self-contained flex grid so
   columns laid out directly inside (no .row wrapper) still arrange properly.
   !important is used on visual props (bg/border/radius) because some legacy
   views set these via INLINE styles like
       <div class="form-body" style="background:#fff;border:2px solid #000;...">
   and inline styles can otherwise only be beaten by !important. */
.eg-main .form-body {
    padding: 0 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-inline: -1.25rem;
}

/* Full-width children inside form-body */
.eg-main .form-body > .alert,
.eg-main .form-body > .row,
.eg-main .form-body > h4,
.eg-main .form-body > h5,
.eg-main .form-body > .form-section,
.eg-main .form-body > .clearfix,
.eg-main .form-body > hr,
.eg-main .form-body > .note,
.eg-main .form-body > .well {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-inline: .85rem;
}

/* form-group acts as a row — full width, then its col-* children flow inside */
.eg-main .form-body > .form-group {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-inline: .85rem;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
}
.eg-main .form-body > .form-group:has(> [class*="col-"]) {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.85rem 1.25rem;
    padding: 0;
}
.eg-main .form-body > .form-group:has(> [class*="col-"]) > [class*="col-"] {
    padding-inline: 1.25rem !important;
    margin: 0 0 1.5rem !important;
    box-sizing: border-box;
}

/* Cols laid out directly inside form-body (no .row wrapper) — give them
   real BS3 widths so they line up in a grid, and kill any rogue margins. */
.eg-main .form-body > [class*="col-"] {
    box-sizing: border-box;
    padding-inline: 1.25rem !important;
    margin: 0 0 1.5rem !important;
}

/* The .form-group INSIDE a col already lives in a row with bottom margin —
   so don't add a SECOND bottom margin on top of that. */
.eg-main .form-body > [class*="col-"] > .form-group,
.eg-main .form-body > .form-group > [class*="col-"] > .form-group {
    margin-bottom: 0;
}
.eg-main .form-body > .col-md-12 { flex: 0 0 100%;        max-width: 100%; }
.eg-main .form-body > .col-md-11 { flex: 0 0 91.6667%;    max-width: 91.6667%; }
.eg-main .form-body > .col-md-10 { flex: 0 0 83.3333%;    max-width: 83.3333%; }
.eg-main .form-body > .col-md-9  { flex: 0 0 75%;         max-width: 75%; }
.eg-main .form-body > .col-md-8  { flex: 0 0 66.6667%;    max-width: 66.6667%; }
.eg-main .form-body > .col-md-7  { flex: 0 0 58.3333%;    max-width: 58.3333%; }
.eg-main .form-body > .col-md-6  { flex: 0 0 50%;         max-width: 50%; }
.eg-main .form-body > .col-md-5  { flex: 0 0 41.6667%;    max-width: 41.6667%; }
.eg-main .form-body > .col-md-4  { flex: 0 0 33.3333%;    max-width: 33.3333%; }
.eg-main .form-body > .col-md-3  { flex: 0 0 25%;         max-width: 25%; }
.eg-main .form-body > .col-md-2  { flex: 0 0 16.6667%;    max-width: 16.6667%; }
.eg-main .form-body > .col-md-1  { flex: 0 0 8.3333%;     max-width: 8.3333%; }

@media (max-width: 991.98px) {
    .eg-main .form-body > [class*="col-"] { flex: 0 0 50%;  max-width: 50%; }
    .eg-main .form-body > .col-md-12      { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 575.98px) {
    .eg-main .form-body > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* Existing nested .row inside form-body (e.g. _user/add.html pattern) */
.eg-main .form-body .row {
    margin-inline: -.85rem;
    row-gap: .25rem;
}
.eg-main .form-body .row > [class*="col-"] {
    padding-inline: .85rem;
    margin-bottom: .25rem;
}

/* =========================================================================
   HORIZONTAL FORM (Metronic .horizontal-form / Bootstrap .form-horizontal)
   Label on the side of the input — stacks on mobile.
   ========================================================================= */
.eg-main .form-horizontal,
.eg-main .horizontal-form {
    width: 100%;
    padding: 1.5rem 1.75rem .5rem;
}

/* form-actions inside a horizontal-form bleeds back to the portlet card edges
   so the footer bar still spans full width regardless of form padding. */
.eg-main .form-horizontal > .form-actions,
.eg-main .horizontal-form > .form-actions {
    margin: 1.5rem -1.75rem -1.5rem;
    border-radius: 0 0 var(--eg-radius) var(--eg-radius);
    border: 0;
    border-top: 1px solid var(--eg-border);
}

@media (max-width: 575.98px) {
    .eg-main .form-horizontal,
    .eg-main .horizontal-form {
        padding: 1.25rem 1.25rem .25rem;
    }
    .eg-main .form-horizontal > .form-actions,
    .eg-main .horizontal-form > .form-actions {
        margin: 1.25rem -1.25rem -1.25rem;
    }
}

/* Default form-group: stacked label above input, no flex layout. This is the
   actual pattern most "horizontal-form" views use (label + input both inside
   a .col-md-4), so it must be the default. */
.eg-main .form-horizontal .form-group,
.eg-main .horizontal-form .form-group {
    margin-bottom: 1.25rem;
}

/* TRUE horizontal layout — only when the form-group itself contains col-*
   children (i.e. <label class="col-md-3"> + <div class="col-md-9">) */
.eg-main .form-horizontal .form-group:has(> [class*="col-"]),
.eg-main .horizontal-form .form-group:has(> [class*="col-"]) {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 -.85rem 1.25rem;
}

.eg-main .form-horizontal .form-group:has(> [class*="col-"]) > [class*="col-"],
.eg-main .horizontal-form .form-group:has(> [class*="col-"]) > [class*="col-"] {
    padding-inline: .85rem;
    box-sizing: border-box;
}

/* Side-aligned control-label, ONLY for true horizontal groups */
.eg-main .form-horizontal .form-group:has(> [class*="col-"]) > .control-label,
.eg-main .horizontal-form .form-group:has(> [class*="col-"]) > .control-label {
    display: block;
    margin: 0;
    padding-top: .7rem;
    text-align: end;
    font-weight: 700;
    color: var(--eg-text);
    font-size: .92rem;
    line-height: 1.4;
}

/* Help text under inputs */
.eg-main .form-horizontal .help-block,
.eg-main .horizontal-form .help-block { margin-top: .35rem; }

/* Mobile: stack the truly-horizontal groups */
@media (max-width: 767.98px) {
    .eg-main .form-horizontal .form-group:has(> [class*="col-"]) > .control-label,
    .eg-main .horizontal-form .form-group:has(> [class*="col-"]) > .control-label {
        text-align: start;
        padding-top: 0;
        margin-bottom: .45rem;
        flex: 1 1 100%;
        max-width: 100%;
    }
    .eg-main .form-horizontal .form-group:has(> [class*="col-"]) > [class*="col-"]:not(.control-label),
    .eg-main .horizontal-form .form-group:has(> [class*="col-"]) > [class*="col-"]:not(.control-label) {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.eg-main .portlet-body.form .form-actions {
    margin: 0;
    border-radius: 0 0 var(--eg-radius) var(--eg-radius);
    border: 0;
    border-top: 1px solid var(--eg-border);
    padding: 1rem 2rem;
}

/* On narrow viewports, ease the padding so inputs aren't cramped */
@media (max-width: 575.98px) {
    .eg-main .form-body { padding: 1.25rem 1.25rem .5rem; }
    .eg-main .portlet-body.form .form-actions { padding: 1rem 1.25rem; }
}

/* h4.form-section — section divider with green underline */
.eg-main .form-section {
    font-size: 1rem;
    font-weight: 700;
    color: var(--eg-text);
    margin: 1.75rem 0 1.25rem;
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--eg-border);
    position: relative;
    letter-spacing: 0;
    text-transform: none;
}
.eg-main .form-section:first-child { margin-top: 0; }
.eg-main .form-section::after {
    content: '';
    position: absolute;
    bottom: -2px;
    inset-inline-start: 0;
    width: 60px;
    height: 2px;
    background: var(--eg-primary);
    border-radius: 2px;
}

/* input-icon (default: icon at start) and .right modifier */
.eg-main .input-icon { position: relative; }
.eg-main .input-icon > .form-control { padding-inline-start: 2.6rem; }
.eg-main .input-icon > i {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--eg-muted);
    pointer-events: none;
    font-size: .95rem;
}
.eg-main .input-icon.right > .form-control {
    padding-inline-start: 1rem;
    padding-inline-end: 2.6rem;
}
.eg-main .input-icon.right > i {
    inset-inline-start: auto;
    inset-inline-end: 1rem;
}

/* Metronic .fileinput — image picker with preview thumbnail */
.eg-main .fileinput { display: block; }
.eg-main .fileinput .thumbnail,
.eg-main .fileinput .fileinput-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--eg-bg);
    border: 2px dashed var(--eg-border-strong);
    border-radius: var(--eg-radius-sm);
    padding: .5rem;
    margin-bottom: .65rem;
    overflow: hidden;
    transition: border-color .15s var(--eg-ease);
}
.eg-main .fileinput .thumbnail:hover,
.eg-main .fileinput:hover .thumbnail {
    border-color: var(--eg-primary);
}
.eg-main .fileinput .thumbnail img,
.eg-main .fileinput .fileinput-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
}
.eg-main .fileinput-exists.fileinput-preview { background: var(--eg-white); }

/* .btn-file — clickable label hiding the file input */
.eg-main .btn-file {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.eg-main .btn-file > input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.eg-main .fileinput .btn,
.eg-main .fileinput a.btn { margin-inline-end: .35rem; }

/* Small status .label (used like a chip) */
.eg-main .label.label-default,
.eg-main span.label.label-default,
.eg-main .label.label-info,
.eg-main span.label.label-info,
.eg-main .label.label-warning,
.eg-main span.label.label-warning,
.eg-main .label.label-danger,
.eg-main span.label.label-danger,
.eg-main .label.label-success,
.eg-main span.label.label-success {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
}

/* =========================================================================
   PRINT ACTION BAR  (<div class="printtab"> wrapping .printtabs / .print / .print1 / .print2)
   Used after DataTables on report pages (printareceipt, reportprint, etc.).
   IMPORTANT: scoped to <div> so it never matches <th class="printtab"> /
   <td class="printtab"> in the table itself.
   ========================================================================= */
.eg-main div.printtab,
.eg-main > div.printtab,
.eg-main .portlet-body > div.printtab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, var(--eg-green-50) 0%, var(--eg-bg) 100%);
    border: 1px solid var(--eg-green-200);
    border-radius: var(--eg-radius);
}

.eg-main .printtabs,
.eg-main .printtab .printtabs,
.eg-main .printtab .btn.printtabs,
.eg-main a.printtabs.btn,
.eg-main button.printtabs {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    height: 44px !important;
    min-width: 150px;
    padding: 0 1.5rem !important;
    background: var(--eg-primary) !important;
    color: #fff !important;
    border: 1.5px solid var(--eg-primary) !important;
    border-radius: var(--eg-radius-sm) !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(7, 104, 58, .22);
    transition: all .15s var(--eg-ease);
}
.eg-main .printtabs:hover,
.eg-main .printtab .printtabs:hover {
    background: var(--eg-primary-hover) !important;
    border-color: var(--eg-primary-hover) !important;
    box-shadow: 0 8px 22px rgba(7, 104, 58, .32);
    transform: translateY(-1px);
    color: #fff !important;
}
.eg-main .printtabs i {
    font-size: 1rem;
}
/* xs sized print button — keep it compact in inline contexts */
.eg-main .printtabs.btn-xs {
    height: 36px !important;
    min-width: 110px;
    padding: 0 1rem !important;
    font-size: .85rem !important;
}

/* Other print-action variants (buttons used inline in tables) */
.eg-main .print, .eg-main .print1, .eg-main .print2, .eg-main .printnew, .eg-main .printevaluat {
    /* default: not visible action containers — only show when used as buttons */
}
.eg-main .btn.print, .eg-main .btn.print1, .eg-main .btn.print2,
.eg-main a.print.btn, .eg-main a.print1.btn, .eg-main a.print2.btn {
    background: #475569;
    color: #fff;
    border-color: #475569;
}
.eg-main .btn.print:hover, .eg-main .btn.print1:hover, .eg-main .btn.print2:hover {
    background: #334155;
    border-color: #334155;
    color: #fff;
}

/* Empty <th> still gets a minimum visual width so the gradient header doesn't collapse */
.eg-main .table > thead > tr > th:empty,
.eg-main table.dataTable > thead > tr > th:empty {
    min-width: 36px;
}

/* DataTables BS3 plugin wraps tables in .table-scrollable; the inner table at
   100% width often shows a 1-2 px horizontal scrollbar. Trim it to 99% to hide. */
.eg-main .table-scrollable {
    overflow-x: auto;
    border: 0;
    background: transparent;
}
.eg-main .table-scrollable > .table,
.eg-main .table-scrollable > table.dataTable,
.eg-main .table-scrollable > .dataTable {
    width: 99% !important;
    margin: 0 auto;
}

/* =========================================================================
   FILTER BAR INSIDE PORTLET-BODY
   Common pattern across "show" pages: a horizontal bar of select2 / date /
   text filters followed by a "Search" button, then a DataTable below.
   The legacy markup nests the form INSIDE a .row, with each filter as a
   .col-md-2 (often with inline `style="width:200px"`).  We turn the form
   itself into a flex container so inline widths still work, then strip the
   col styling so they stack neatly.
   ========================================================================= */

/* The outer .row that ONLY contains filter inputs (with or without a form
   wrapper) → render as a clean bordered toolbar card. */
.eg-main .portlet-body > .row:has(> form),
.eg-main .portlet-body > .row:has(> .form-horizontal),
.eg-main .portlet-body > .row:has(> .form-inline),
.eg-main .portlet-body > .row:has(> .input-daterange),
.eg-main .portlet-body > .row:has(> [class*="col-"] > .form-control),
.eg-main .portlet-body > .row:has(> [class*="col-"] > .select2),
.eg-main .portlet-body > .row:has(> [class*="col-"] > input[type="button"]),
.eg-main .portlet-body > .row:has(> [class*="col-"] > input[type="text"]),
.eg-main .portlet-body > .row:has(> [class*="col-"] > input[type="date"]),
.eg-main .portlet-body > .row:has(> [class*="col-"] > select) {
    background: var(--eg-bg);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    padding: 1rem 1rem .25rem;
    margin: 0 0 1.25rem;
    text-align: start !important;     /* override inline text-align: center */
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: end;
}

/* Direct col children of such rows (no form wrapper) — same toolbar treatment */
.eg-main .portlet-body > .row:has(> [class*="col-"] > .form-control) > [class*="col-"],
.eg-main .portlet-body > .row:has(> [class*="col-"] > .select2) > [class*="col-"],
.eg-main .portlet-body > .row:has(> [class*="col-"] > input[type="text"]) > [class*="col-"],
.eg-main .portlet-body > .row:has(> [class*="col-"] > select) > [class*="col-"],
.eg-main .portlet-body > .row:has(> .input-daterange) > [class*="col-"] {
    width: auto !important;
    min-width: 200px;
    max-width: 100%;
    flex: 1 1 200px;
    padding: 0 !important;
    margin: 0 0 .75rem !important;
}
.eg-main .portlet-body > .row:has(> [class*="col-"] > input[type="button"]) > [class*="col-"]:has(> input[type="button"]) {
    flex: 0 0 auto !important;
    min-width: 110px;
    margin-inline-start: auto !important;
}
.eg-main .portlet-body > .row > [class*="col-"] > input[type="button"],
.eg-main .portlet-body > .row > [class*="col-"] > .btn {
    height: 42px;
    width: 100%;
    min-width: 110px;
    padding: 0 1.5rem;
    font-weight: 700;
    font-size: .95rem;
    background: var(--eg-primary);
    color: #fff;
    border-color: var(--eg-primary);
    border-radius: var(--eg-radius-sm);
    box-shadow: 0 4px 14px rgba(7, 104, 58, .22);
}
.eg-main .portlet-body > .row > [class*="col-"] > input[type="button"]:hover,
.eg-main .portlet-body > .row > [class*="col-"] > .btn:hover {
    background: var(--eg-primary-hover);
    border-color: var(--eg-primary-hover);
    box-shadow: 0 8px 22px rgba(7, 104, 58, .32);
    transform: translateY(-1px);
}

/* Hide trailing <br> noise after these toolbar rows too */
.eg-main .portlet-body > .row:has(> .input-daterange) ~ br,
.eg-main .portlet-body > .row:has(> [class*="col-"] > .form-control) ~ br,
.eg-main .portlet-body > .row:has(> [class*="col-"] > select) ~ br {
    display: none;
}

/* Form acts as a flex toolbar */
.eg-main .portlet-body > .row > form,
.eg-main .portlet-body > .row > .form-horizontal,
.eg-main .portlet-body > .row > .form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: end;
    width: 100%;
    margin: 0;
}

/* Each filter "col" inside the form → uniform width, ignore inline widths */
.eg-main .portlet-body > .row > form > [class*="col-"],
.eg-main .portlet-body > .row > .form-horizontal > [class*="col-"],
.eg-main .portlet-body > .row > .form-inline > [class*="col-"] {
    width: auto !important;
    min-width: 200px;
    max-width: 100%;
    flex: 1 1 200px;
    padding: 0 !important;
    margin: 0 0 .75rem !important;
}
/* Date-range inputs stay paired (start + end) in compact mode */
.eg-main .portlet-body > .row > form > .input-daterange {
    flex: 1 1 180px;
    min-width: 180px;
}

/* Submit / search button column — auto-size, push to end */
.eg-main .portlet-body > .row > form > [class*="col-"]:has(> input[type="button"]),
.eg-main .portlet-body > .row > form > [class*="col-"]:has(> .btn),
.eg-main .portlet-body > .row > form > [class*="col-"]:has(> input[type="submit"]) {
    flex: 0 0 auto !important;
    min-width: 110px;
    max-width: none;
    margin-inline-start: auto !important;
}
.eg-main .portlet-body > .row > form > [class*="col-"] > input[type="button"],
.eg-main .portlet-body > .row > form > [class*="col-"] > input[type="submit"],
.eg-main .portlet-body > .row > form > [class*="col-"] > .btn {
    height: 42px;
    width: 100%;
    min-width: 110px;
    padding: 0 1.5rem;
    font-weight: 700;
    font-size: .95rem;
    background: var(--eg-primary);
    color: #fff;
    border-color: var(--eg-primary);
    border-radius: var(--eg-radius-sm);
    box-shadow: 0 4px 14px rgba(7, 104, 58, .22);
}
.eg-main .portlet-body > .row > form > [class*="col-"] > input[type="button"]:hover,
.eg-main .portlet-body > .row > form > [class*="col-"] > input[type="submit"]:hover,
.eg-main .portlet-body > .row > form > [class*="col-"] > .btn:hover {
    background: var(--eg-primary-hover);
    border-color: var(--eg-primary-hover);
    box-shadow: 0 8px 22px rgba(7, 104, 58, .32);
    transform: translateY(-1px);
}

/* Hide the chain of <br> that legacy views use to space the table from the filter */
.eg-main .portlet-body > .row:has(> form) ~ br,
.eg-main .portlet-body > .row:has(> .form-horizontal) ~ br,
.eg-main .portlet-body > .row:has(> .form-inline) ~ br {
    display: none;
}

/* Heights inside filter — match the modern field height */
.eg-main .portlet-body > .row .form-control,
.eg-main .portlet-body > .row .select2-container .select2-selection {
    height: 42px;
    min-height: 42px;
}
.eg-main .portlet-body > .row .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
}
.eg-main .portlet-body > .row .select2-container--default .select2-selection--multiple {
    min-height: 42px;
    padding: 2px 4px;
}

/* =========================================================================
   DATATABLE WRAPPER LAYOUT
   Make sure the dt-buttons + length picker + search input sit nicely on one
   row, with sensible wrapping on small screens.
   ========================================================================= */
.eg-main .dataTables_wrapper > .row:first-child > [class*="col-"]:first-child {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
}
.eg-main .dataTables_wrapper > .row:first-child .dt-buttons + .dataTables_length,
.eg-main .dataTables_wrapper .dt-buttons + .dataTables_length { margin-inline-start: 0; }

/* =========================================================================
   DATATABLES BUTTONS EXTENSION
   <div class="dt-buttons"><button class="dt-button">Excel</button></div>
   The legacy datatables.min.css sets `div.dt-buttons { float: left }`,
   which makes the toolbar overlap surrounding content. Force it inline.
   ========================================================================= */
.eg-main div.dt-buttons,
.eg-main .dataTables_wrapper div.dt-buttons,
.eg-main .dataTables_wrapper > .row .dt-buttons {
    float: none !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 .35rem .25rem 0;
    width: auto;
    text-align: start;
}
[dir="rtl"] .eg-main div.dt-buttons {
    margin: 0 0 .25rem .35rem;
}
.eg-main div.dt-buttons.buttons-right { float: none !important; }
.eg-main .dt-buttons + .dataTables_filter,
.eg-main .dataTables_wrapper .dt-buttons + .dataTables_filter { display: inline-block; }

.eg-main .dt-button,
.eg-main .dataTables_wrapper .dt-buttons .dt-button,
.eg-main button.dt-button,
.eg-main a.dt-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    height: 38px !important;
    padding: 0 1rem !important;
    margin: 0 !important;
    background: var(--eg-white) !important;
    background-image: none !important;
    border: 1.5px solid var(--eg-border-strong) !important;
    border-radius: var(--eg-radius-sm) !important;
    color: var(--eg-text) !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all .15s var(--eg-ease) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.eg-main .dt-button:hover,
.eg-main .dataTables_wrapper .dt-buttons .dt-button:hover {
    background: var(--eg-primary-soft) !important;
    border-color: var(--eg-primary) !important;
    color: var(--eg-primary-hover) !important;
}
.eg-main .dt-button.disabled,
.eg-main .dt-button[disabled] {
    opacity: .55 !important;
    cursor: not-allowed !important;
}
.eg-main .dt-button > span { display: inline-flex; align-items: center; gap: .35rem; }

/* Per-format button colours — Metronic adds .buttons-excel / .buttons-pdf etc. */
.eg-main .dt-button.buttons-excel,
.eg-main .dt-button.buttons-csv {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}
.eg-main .dt-button.buttons-excel:hover,
.eg-main .dt-button.buttons-csv:hover {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #fff !important;
}
.eg-main .dt-button.buttons-pdf {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
.eg-main .dt-button.buttons-pdf:hover { background: #b91c1c !important; border-color: #b91c1c !important; }
.eg-main .dt-button.buttons-print {
    background: #475569 !important;
    border-color: #475569 !important;
    color: #fff !important;
}
.eg-main .dt-button.buttons-print:hover { background: #334155 !important; border-color: #334155 !important; }
.eg-main .dt-button.buttons-copy {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
.eg-main .dt-button.buttons-copy:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }

/* When dt-buttons sit in the top toolbar row */
.eg-main .dataTables_wrapper > .row:first-child .dt-buttons {
    flex: 0 0 auto;
}

/* =========================================================================
   TABS (.nav.nav-tabs / .tab-content / .tabbable-custom / .tabbable-line)
   ========================================================================= */
.eg-main .nav-tabs,
.eg-main .nav.nav-tabs {
    border: 0;
    border-bottom: 2px solid var(--eg-border);
    margin-bottom: 1.25rem;
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    padding: 0;
}
.eg-main .nav-tabs > li,
.eg-main .nav.nav-tabs > li { margin: 0; list-style: none; }
.eg-main .nav-tabs > li > a,
.eg-main .nav.nav-tabs > li > a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.1rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--eg-text-soft);
    text-decoration: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    background: transparent;
    transition: all .15s var(--eg-ease);
}
.eg-main .nav-tabs > li > a:hover,
.eg-main .nav.nav-tabs > li > a:hover {
    color: var(--eg-primary);
    background: transparent;
    border-color: transparent;
}
.eg-main .nav-tabs > li.active > a,
.eg-main .nav.nav-tabs > li.active > a,
.eg-main .nav-tabs > li > a.active,
.eg-main .nav.nav-tabs > li > a.active {
    color: var(--eg-primary);
    border-bottom-color: var(--eg-primary);
    background: transparent;
    font-weight: 700;
}
/* Pill style */
.eg-main .nav-tabs.nav-pills > li > a {
    border-radius: var(--eg-radius-pill);
    border: 0;
    margin: 0 .25rem .25rem 0;
}
.eg-main .nav-tabs.nav-pills > li.active > a {
    background: var(--eg-primary);
    color: #fff;
    border: 0;
}
/* Bordered/custom variant */
.eg-main .tabbable-custom > .nav-tabs {
    border-bottom: 1px solid var(--eg-border);
}
.eg-main .tabbable-custom > .tab-content,
.eg-main .tabbable-bordered > .tab-content {
    background: var(--eg-surface);
    padding: 1.25rem;
    border: 1px solid var(--eg-border);
    border-top: 0;
    border-radius: 0 0 var(--eg-radius) var(--eg-radius);
}
.eg-main .tab-content { padding-top: .25rem; }
.eg-main .tab-pane { animation: eg-fade .25s var(--eg-ease); }
/* Validation indicator on tabs */
.eg-main .nav-tabs a small.required { color: var(--eg-danger); margin-inline-start: 4px; font-weight: 700; }

/* =========================================================================
   PANELS / ACCORDION (.panel, .panel-group, collapsible)
   ========================================================================= */
.eg-main .panel-group { margin-bottom: 1.25rem; }
.eg-main .panel,
.eg-main .panel.panel-default {
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius-sm);
    box-shadow: var(--eg-shadow-xs);
    margin-bottom: .65rem;
    overflow: hidden;
}
.eg-main .panel-heading {
    padding: .85rem 1rem;
    background: var(--eg-bg);
    border-bottom: 1px solid var(--eg-border);
    font-weight: 700;
}
.eg-main .panel-title { margin: 0; font-size: .95rem; }
.eg-main .panel-title a {
    color: var(--eg-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.eg-main .panel-title a::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f078';   /* down chevron */
    font-size: .75rem;
    color: var(--eg-text-soft);
    transition: transform .2s var(--eg-ease);
}
.eg-main .panel-title a.collapsed::after { transform: rotate(-90deg); }
.eg-main .panel-body { padding: 1rem 1.25rem; }
.eg-main .panel-primary > .panel-heading { background: var(--eg-primary-soft); color: var(--eg-primary-hover); border-color: var(--eg-green-200); }
.eg-main .panel-success > .panel-heading { background: var(--eg-green-50); color: var(--eg-green-800); border-color: var(--eg-green-200); }
.eg-main .panel-danger  > .panel-heading { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.eg-main .panel-warning > .panel-heading { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.eg-main .panel-info    > .panel-heading { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* =========================================================================
   DATE / TIME PICKERS (Bootstrap-Datepicker, Daterangepicker, DateTimePicker, Clockface)
   ========================================================================= */
/* Common popup container */
.datepicker.datepicker-dropdown,
.bootstrap-datetimepicker-widget.dropdown-menu,
.daterangepicker {
    background: var(--eg-surface) !important;
    border: 1px solid var(--eg-border) !important;
    border-radius: var(--eg-radius) !important;
    box-shadow: var(--eg-shadow-lg) !important;
    padding: .75rem !important;
    font-family: var(--eg-font) !important;
    z-index: 2000 !important;
}

/* Bootstrap-Datepicker */
.datepicker table { border-spacing: 2px; border-collapse: separate; }
.datepicker table tr td,
.datepicker table tr th {
    border-radius: 6px;
    padding: 6px 8px;
    font-weight: 500;
    color: var(--eg-text);
    text-align: center;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background: var(--eg-primary-soft) !important;
    color: var(--eg-primary-hover) !important;
}
.datepicker table tr td.active.day,
.datepicker table tr td.active.day:hover,
.datepicker table tr td.active.active {
    background: var(--eg-primary) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    text-shadow: none !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: var(--eg-green-100) !important;
    color: var(--eg-primary-hover) !important;
}
.datepicker table tr td.disabled,
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: var(--eg-muted) !important;
    background: transparent !important;
}
.datepicker table thead tr th {
    color: var(--eg-text-soft);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.datepicker table thead .datepicker-switch:hover,
.datepicker table thead .prev:hover,
.datepicker table thead .next:hover {
    background: var(--eg-primary-soft);
    color: var(--eg-primary-hover);
}

/* Daterangepicker */
.daterangepicker .calendar-table { border: 0; }
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: var(--eg-primary) !important;
    color: #fff !important;
    border-radius: 6px;
}
.daterangepicker td.in-range { background: var(--eg-primary-soft); color: var(--eg-primary-hover); }
.daterangepicker td.start-date,
.daterangepicker td.end-date { background: var(--eg-primary) !important; color: #fff !important; }
.daterangepicker .ranges li.active {
    background: var(--eg-primary) !important;
    color: #fff !important;
}
.daterangepicker .ranges li:hover { background: var(--eg-primary-soft); color: var(--eg-primary-hover); }
.daterangepicker .drp-buttons .btn { height: 36px; padding: 0 1rem; }

/* DateTimePicker */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--eg-primary) !important;
    color: #fff !important;
    border-radius: 6px;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover { background: var(--eg-primary-soft); color: var(--eg-primary-hover); }
.bootstrap-datetimepicker-widget .timepicker-picker .btn { color: var(--eg-text-soft); }

/* =========================================================================
   BOOTSTRAP-SWITCH (toggle)
   ========================================================================= */
.bootstrap-switch {
    border: 0 !important;
    border-radius: 999px !important;
    overflow: hidden;
    height: 28px;
}
.bootstrap-switch .bootstrap-switch-container { border-radius: 999px; }
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
    font-weight: 600;
    font-size: .82rem;
    padding: 0 .9rem;
    line-height: 28px;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { background: var(--eg-bg); color: var(--eg-text-soft); }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on { background: var(--eg-primary); color: #fff; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger { background: var(--eg-danger); color: #fff; }
.bootstrap-switch .bootstrap-switch-label { background: #fff; border: 1.5px solid var(--eg-border); padding: 0 .25rem; }

/* =========================================================================
   CKEDITOR WRAPPER POLISH
   ========================================================================= */
.eg-main .cke,
.eg-main .cke_chrome {
    border: 1.5px solid var(--eg-border) !important;
    border-radius: var(--eg-radius-sm) !important;
    box-shadow: var(--eg-shadow-xs);
    overflow: hidden;
}
.eg-main .cke_top {
    background: var(--eg-bg) !important;
    border-bottom: 1px solid var(--eg-border) !important;
    padding: .35rem !important;
}
.eg-main .cke_bottom {
    background: var(--eg-bg) !important;
    border-top: 1px solid var(--eg-border) !important;
    padding: .25rem .5rem !important;
}
.eg-main .cke_inner { background: var(--eg-surface) !important; }
.eg-main .cke_combo_button,
.eg-main .cke_button { border-radius: 6px !important; }
.eg-main .cke_button:hover,
.eg-main .cke_button_on { background: var(--eg-primary-soft) !important; }

/* =========================================================================
   JSTREE / NESTABLE
   ========================================================================= */
.eg-main .jstree-default .jstree-clicked,
.eg-main .jstree-default .jstree-hovered {
    background: var(--eg-primary-soft) !important;
    border-radius: 6px;
    box-shadow: none !important;
    color: var(--eg-primary-hover);
}
.eg-main .jstree-default .jstree-anchor { color: var(--eg-text); }

.eg-main .dd-list { padding-inline-start: 0; }

/* dd-handle (default Nestable v1 — handle wraps the whole row) */
.eg-main .dd-item .dd-handle,
.eg-main .dd-item > .dd-handle {
    background: var(--eg-surface);
    border: 1.5px solid var(--eg-border);
    border-radius: var(--eg-radius-sm);
    padding: .65rem .9rem;
    font-weight: 600;
    color: var(--eg-text);
    margin-bottom: .35rem;
    box-shadow: var(--eg-shadow-xs);
}
.eg-main .dd-item .dd-handle:hover { border-color: var(--eg-primary); background: var(--eg-primary-soft); color: var(--eg-primary-hover); }
.eg-main .dd-placeholder { background: var(--eg-primary-soft); border: 2px dashed var(--eg-primary); border-radius: var(--eg-radius-sm); }
.eg-main .dd-empty { border-color: var(--eg-border-strong); }

/* Nestable v3 markup — separate small handle + content row.
   <li class="dd-item dd3-item">
       <div class="dd-handle dd3-handle"></div>
       <div class="dd3-content">…</div>
   </li>
   Make the handle a brand-green grip on the start side, with a white
   drag-icon, and the content as a clean light card next to it.        */
.eg-main .dd3-item { position: relative; }
.eg-main .dd3-handle,
.eg-main .dd-item.dd3-item > .dd3-handle,
.eg-main .dd-item.dd3-item > .dd-handle.dd3-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 36px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--eg-primary) !important;
    border: 0 !important;
    border-radius: var(--eg-radius-sm) 0 0 var(--eg-radius-sm);
    color: #fff !important;
    cursor: move;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
}
[dir="rtl"] .eg-main .dd3-handle,
[dir="rtl"] .eg-main .dd-item.dd3-item > .dd3-handle {
    border-radius: 0 var(--eg-radius-sm) var(--eg-radius-sm) 0;
}
/* Make the legacy ::before glyph white-on-green and visible */
.eg-main .dd3-handle::before,
.eg-main .dd-item.dd3-item > .dd3-handle::before {
    content: '\f7a4' !important;        /* fa-grip-vertical */
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    color: #fff !important;
    font-size: 1rem !important;
    text-indent: 0 !important;
    position: static !important;
    line-height: 1 !important;
}

.eg-main .dd3-content {
    display: block;
    min-height: 44px;
    margin-inline-start: 36px;       /* leave room for the handle */
    margin-inline-end: 0;
    padding: .85rem 1rem;
    background: var(--eg-surface);
    border: 1.5px solid var(--eg-border);
    border-inline-start: 0;
    border-radius: 0 var(--eg-radius-sm) var(--eg-radius-sm) 0;
    color: var(--eg-text);
    font-weight: 600;
    box-shadow: var(--eg-shadow-xs);
    transition: border-color .12s var(--eg-ease);
}
[dir="rtl"] .eg-main .dd3-content {
    margin-inline-start: 36px;
    border-inline-start: 0;
    border-inline-end: 0;
    border-radius: var(--eg-radius-sm) 0 0 var(--eg-radius-sm);
}
.eg-main .dd3-item:hover > .dd3-content { border-color: var(--eg-primary); }

/* =========================================================================
   PROFILE COMPONENTS (_myinfo and similar)
   ========================================================================= */
.eg-main .profile-sidebar {
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    padding: 1.5rem;
    box-shadow: var(--eg-shadow-xs);
    text-align: center;
}
.eg-main .profile-userpic img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--eg-primary-soft);
}
.eg-main .profile-usertitle { padding: 1rem 0 .5rem; }
.eg-main .profile-usertitle-name { font-size: 1.2rem; font-weight: 700; color: var(--eg-text); margin-bottom: .25rem; }
.eg-main .profile-usertitle-job { font-size: .9rem; color: var(--eg-text-soft); }
.eg-main .profile-usermenu { margin-top: 1rem; padding: 0; list-style: none; text-align: start; }
.eg-main .profile-usermenu li { border-top: 1px solid var(--eg-border); }
.eg-main .profile-usermenu li:first-child { border-top: 0; }
.eg-main .profile-usermenu li a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem 0;
    color: var(--eg-text);
    text-decoration: none;
    font-weight: 500;
}
.eg-main .profile-usermenu li a:hover,
.eg-main .profile-usermenu li.active a { color: var(--eg-primary); }
.eg-main .profile-usermenu li a i { color: var(--eg-text-soft); width: 18px; }
.eg-main .profile-usermenu li.active a i,
.eg-main .profile-usermenu li a:hover i { color: var(--eg-primary); }

/* =========================================================================
   FORM HELPERS
   ========================================================================= */
.eg-main .form-control-static {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .55rem 0;
    color: var(--eg-text);
    font-weight: 600;
}
.eg-main .help-block,
.eg-main .help-text {
    display: block;
    font-size: .82rem;
    color: var(--eg-text-soft);
    margin-top: .35rem;
    line-height: 1.4;
}
.eg-main .help-block-error,
.eg-main .help-block.help-block-error { color: var(--eg-danger); font-weight: 600; }

.eg-main label .required,
.eg-main label.required::after {
    color: var(--eg-danger);
    margin-inline-start: 3px;
    font-weight: 700;
}

/* form-control sizes */
.eg-main .input-xs,  .eg-main .form-control.input-xs   { height: 32px; padding: 0 .65rem; font-size: .82rem; }
.eg-main .input-sm,  .eg-main .form-control.input-sm,
.eg-main .form-control-sm                              { height: 36px; padding: 0 .75rem; font-size: .85rem; }
.eg-main .input-medium                                 { width: 220px; max-width: 100%; }
.eg-main .input-large, .eg-main .form-control-lg       { height: 50px; padding: 0 1rem; font-size: 1.05rem; }
.eg-main .input-fixed                                  { width: 280px; max-width: 100%; }
.eg-main .input-inline,
.eg-main .form-control.input-inline                    { display: inline-flex; width: auto; }
.eg-main .input-small                                  { width: 160px; max-width: 100%; }

/* =========================================================================
   BUTTON GROUPS
   ========================================================================= */
.eg-main .btn-group {
    display: inline-flex;
    align-items: center;
    border-radius: var(--eg-radius-sm);
    overflow: hidden;
    box-shadow: var(--eg-shadow-xs);
}
.eg-main .btn-group > .btn {
    margin: 0 !important;
    border-radius: 0;
    border-inline-end-width: 0;
}
.eg-main .btn-group > .btn:first-child { border-start-start-radius: var(--eg-radius-sm); border-end-start-radius: var(--eg-radius-sm); }
.eg-main .btn-group > .btn:last-child  { border-start-end-radius: var(--eg-radius-sm); border-end-end-radius: var(--eg-radius-sm); border-inline-end-width: 1.5px; }
.eg-main .btn-group-vertical > .btn { width: 100%; border-radius: 0; }

/* =========================================================================
   MODAL SIZES
   ========================================================================= */
.modal-dialog.modal-sm,
.modal-sm > .modal-dialog { max-width: 380px; }
.modal-dialog.modal-lg,
.modal-lg > .modal-dialog { max-width: 800px; }
.modal-dialog.modal-xl,
.modal-xl > .modal-dialog { max-width: 1140px; }
/* Bootbox tweaks */
.bootbox.modal .modal-content,
.bootbox-confirm .modal-content,
.bootbox-alert .modal-content {
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-shadow-lg);
    font-family: var(--eg-font);
}
.bootbox .modal-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--eg-border); }
.bootbox .modal-body { padding: 1.25rem; font-weight: 500; color: var(--eg-text); }
.bootbox .modal-footer { padding: .85rem 1.25rem; border-top: 1px solid var(--eg-border); gap: .5rem; }
.bootbox .modal-footer .btn { height: 40px; padding: 0 1.2rem; }

/* =========================================================================
   ERROR PAGES (.page-404, .page-500)
   ========================================================================= */
.eg-main .page-404,
.eg-main .page-500,
.eg-main .error-container {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-shadow-xs);
}
.eg-main .error-title,
.eg-main .page-404 .error-number,
.eg-main .page-500 .error-number {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--eg-primary);
    margin: 0 0 .5rem;
    line-height: 1;
}
.eg-main .error-subtitle { font-size: 1.4rem; font-weight: 700; color: var(--eg-text); margin-bottom: 1rem; }
.eg-main .error-description { color: var(--eg-text-soft); max-width: 480px; margin: 0 auto 1.5rem; line-height: 1.6; }

/* =========================================================================
   PAGE FOOTER
   ========================================================================= */
.eg-main .page-footer,
.eg-main .page-footer-inner {
    text-align: center;
    color: var(--eg-text-soft);
    font-size: .85rem;
    padding: 1rem 0 .25rem;
}

/* =========================================================================
   SCROLLER (slimscroll wrapper used in dropdowns)
   ========================================================================= */
.scroller,
.eg-main .scroller {
    max-height: 360px;
    overflow-y: auto;
}
.scroller::-webkit-scrollbar,
.eg-main .scroller::-webkit-scrollbar { width: 6px; }
.scroller::-webkit-scrollbar-thumb,
.eg-main .scroller::-webkit-scrollbar-thumb {
    background: var(--eg-border-strong);
    border-radius: 3px;
}

/* =========================================================================
   FULLCALENDAR (.fc-*)
   ========================================================================= */
.eg-main .fc {
    font-family: var(--eg-font);
}
.eg-main .fc-toolbar h2 { font-size: 1.25rem; font-weight: 700; color: var(--eg-text); }
.eg-main .fc-button {
    background: var(--eg-white) !important;
    background-image: none !important;
    border: 1.5px solid var(--eg-border-strong) !important;
    color: var(--eg-text) !important;
    border-radius: var(--eg-radius-sm) !important;
    text-shadow: none !important;
    height: 36px;
    padding: 0 1rem !important;
    font-weight: 600 !important;
}
.eg-main .fc-button:hover { background: var(--eg-primary-soft) !important; border-color: var(--eg-primary) !important; color: var(--eg-primary-hover) !important; }
.eg-main .fc-state-active,
.eg-main .fc-button.fc-state-active {
    background: var(--eg-primary) !important;
    border-color: var(--eg-primary) !important;
    color: #fff !important;
}
.eg-main .fc th { background: var(--eg-bg); color: var(--eg-text-soft); font-weight: 700; }
.eg-main .fc-day-today { background: var(--eg-green-50) !important; }
.eg-main .fc-event {
    background: var(--eg-primary);
    border-color: var(--eg-primary);
    color: #fff;
    border-radius: 6px;
    padding: 2px 6px;
    font-weight: 500;
    font-size: .82rem;
}

/* =========================================================================
   iCheck PLUGIN (rare but loaded)
   ========================================================================= */
.icheckbox_flat-green.checked,
.icheckbox_flat.checked,
.iradio_flat.checked,
.iradio_flat-green.checked { background-color: var(--eg-primary) !important; }

/* =========================================================================
   PRINT
   ========================================================================= */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .eg-topbar, .eg-sidebar, .eg-overlay, .no-print, .form-actions, .actions, .tools,
    .dataTables_filter, .dataTables_length, .dataTables_paginate, .dt-buttons,
    .dataTables_info, .pagination, .breadcrumb, .page-bar { display: none !important; }
    .eg-app-shell {
        display: block !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: "main" !important;
    }
    .eg-main { padding: 0 !important; grid-area: main !important; }
    .portlet, .portlet.light, .portlet.box {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }
    .table > thead > tr > th { background: #eee !important; color: #000 !important; }
    .printtab, .printtab1, .printtabs, .print, .print1, .print2, .print-date, .print-m {
        display: block !important;
    }
    a { color: #000 !important; text-decoration: none !important; }
}
.no-print { /* visible normally; hidden in print via the @media block above */ }

/* =========================================================================
   BREADCRUMB (Bootstrap)
   ========================================================================= */
.eg-main .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 .85rem;
    font-size: .82rem;
    color: var(--eg-text-soft);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.eg-main .breadcrumb > li,
.eg-main .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.eg-main .breadcrumb > li + li::before,
.eg-main .breadcrumb-item + .breadcrumb-item::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--eg-muted);
    font-size: .65rem;
    margin-inline-end: .35rem;
}
[dir="rtl"] .eg-main .breadcrumb > li + li::before,
[dir="rtl"] .eg-main .breadcrumb-item + .breadcrumb-item::before { content: '\f104'; }
.eg-main .breadcrumb a { color: var(--eg-text-soft); }
.eg-main .breadcrumb a:hover { color: var(--eg-primary); }
.eg-main .breadcrumb > .active { color: var(--eg-text); font-weight: 600; }

/* =========================================================================
   DROPDOWN EXTENDED (Metronic notification / inbox / tasks)
   ========================================================================= */
.dropdown-menu.dropdown-menu-default {
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-shadow-lg);
    padding: .5rem;
    min-width: 220px;
    z-index: 1050;
}
.dropdown-menu.dropdown-menu-default > li > a {
    padding: .55rem .85rem;
    border-radius: var(--eg-radius-sm);
    color: var(--eg-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
}
.dropdown-menu.dropdown-menu-default > li > a:hover {
    background: var(--eg-primary-soft);
    color: var(--eg-primary-hover);
}
.dropdown-menu.dropdown-menu-default > li.divider,
.dropdown-menu .dropdown-divider {
    height: 1px;
    background: var(--eg-border);
    margin: .35rem .25rem;
}
.dropdown-menu .dropdown-header {
    padding: .35rem .85rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--eg-text-soft);
}

/* =========================================================================
   TOOLTIPS (Bootstrap 3 native + Metronic .tooltips)
   ========================================================================= */
.tooltip-inner {
    background: var(--eg-text);
    color: #fff;
    border-radius: 6px;
    font-family: var(--eg-font);
    font-weight: 500;
    font-size: .82rem;
    padding: .35rem .55rem;
}
.tooltip.in { opacity: 1; }
.tooltip.top .tooltip-arrow,
.tooltip.bottom .tooltip-arrow,
.tooltip.left .tooltip-arrow,
.tooltip.right .tooltip-arrow { border-color: transparent; }
.tooltip.top .tooltip-arrow    { border-top-color: var(--eg-text); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--eg-text); }
.tooltip.left .tooltip-arrow   { border-left-color: var(--eg-text); }
.tooltip.right .tooltip-arrow  { border-right-color: var(--eg-text); }

/* =========================================================================
   SELECT2 — match the modern .form-control look (44 px height, brand focus,
   RTL-aware caret).  All rules use !important because the legacy
   `select2-bootstrap.min.css` carries strong styles.
   ========================================================================= */
.eg-main .select2-container { width: 100% !important; }

.eg-main .select2-container--default .select2-selection--single,
.eg-main .select2-container--default .select2-selection--multiple,
.eg-main .select2-container--bootstrap .select2-selection,
.eg-main .form-group .select2-container .select2-selection {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 .85rem !important;
    background: var(--eg-white) !important;
    border: 1.5px solid var(--eg-border) !important;
    border-radius: var(--eg-radius-sm) !important;
    color: var(--eg-text) !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    font-size: .95rem !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* SINGLE select rendered text + caret */
.eg-main .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4 !important;
    padding: 0 !important;
    color: var(--eg-text) !important;
    font-weight: 500 !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eg-main .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--eg-muted) !important;
    font-weight: 500 !important;
}
.eg-main .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    width: 24px !important;
    top: 0 !important;
    inset-inline-end: .5rem !important;
    inset-inline-start: auto !important;
    border: 0 !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eg-main .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--eg-text-soft) transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 4px 0 4px !important;
    margin: 0 !important;
    position: static !important;
}
.eg-main .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--eg-primary) !important;
    border-width: 0 4px 5px 4px !important;
}

/* Clear (×) button */
.eg-main .select2-container--default .select2-selection__clear {
    color: var(--eg-text-soft) !important;
    font-weight: 700 !important;
    margin-inline-end: .35rem !important;
}

/* MULTIPLE select pills */
.eg-main .select2-container--default .select2-selection--multiple {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 4px 6px !important;
}
.eg-main .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
}
.eg-main .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--eg-primary-soft) !important;
    color: var(--eg-primary-hover) !important;
    border: 1px solid var(--eg-primary) !important;
    border-radius: 999px !important;
    padding: 0 .65rem !important;
    margin: 2px !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    line-height: 28px !important;
    display: inline-flex;
    align-items: center;
}
.eg-main .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--eg-primary-hover) !important;
    font-weight: 700 !important;
    margin-inline-end: .35rem !important;
    margin-inline-start: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 1rem !important;
}
.eg-main .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 4px !important;
    font-family: inherit !important;
    color: var(--eg-text);
}

/* Focus / open state */
.eg-main .select2-container--default.select2-container--focus .select2-selection,
.eg-main .select2-container--default.select2-container--open .select2-selection {
    border-color: var(--eg-primary) !important;
    box-shadow: 0 0 0 4px var(--eg-primary-ring) !important;
}

/* Dropdown panel + results */
.eg-main .select2-dropdown,
.select2-dropdown {
    border: 1px solid var(--eg-border) !important;
    border-radius: var(--eg-radius-sm) !important;
    box-shadow: var(--eg-shadow-lg) !important;
    font-family: var(--eg-font);
    overflow: hidden;
}
.select2-search--dropdown .select2-search__field {
    border: 1.5px solid var(--eg-border) !important;
    border-radius: var(--eg-radius-sm) !important;
    padding: .45rem .65rem !important;
    font-family: inherit !important;
}
.select2-search--dropdown .select2-search__field:focus {
    outline: 0 !important;
    border-color: var(--eg-primary) !important;
    box-shadow: 0 0 0 3px var(--eg-primary-ring) !important;
}
.select2-results__option {
    padding: .55rem .85rem !important;
    font-weight: 500;
}
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--eg-primary) !important;
    color: #fff !important;
}
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background: var(--eg-primary-soft) !important;
    color: var(--eg-primary-hover) !important;
}

/* =========================================================================
   RTL — labels align to start (= right side in Arabic), inputs inherit dir
   ========================================================================= */
.eg-main label,
.eg-main label.control-label,
.eg-main .form-group > label {
    text-align: start;
    direction: inherit;
}
.eg-main .form-control,
.eg-main select.form-control,
.eg-main textarea.form-control {
    direction: inherit;
    text-align: start;
}
/* If a field author explicitly sets text-right / text-left, honour it */
.eg-main .form-control.text-right { text-align: right !important; }
.eg-main .form-control.text-left  { text-align: left !important; }
/* RTL caret position for select2 (already set above via inset-inline-end) */

/* --- Toastr --- */
#toast-container > div {
    border-radius: var(--eg-radius-sm) !important;
    box-shadow: var(--eg-shadow-lg) !important;
    font-family: var(--eg-font) !important;
    font-weight: 500;
    opacity: .98 !important;
}
#toast-container > .toast-success { background-color: var(--eg-primary) !important; }

/* --- Modals (BS5 native, but slightly polished) --- */
.modal-content {
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-shadow-lg);
    font-family: var(--eg-font);
}
.modal-header { border-bottom: 1px solid var(--eg-border); padding: 1rem 1.25rem; }
.modal-header .modal-title { font-weight: 700; color: var(--eg-text); }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--eg-border); padding: 1rem 1.25rem; gap: .5rem; }

/* --- Confirm dialog (delete / dangerous actions) --- */
.eg-confirm .modal-body {
    text-align: center;
    padding: 2rem 1.5rem 1rem;
}
.eg-confirm__icon {
    width: 72px; height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #fef2f2;
    color: var(--eg-danger);
    display: grid; place-items: center;
    font-size: 1.85rem;
    box-shadow: 0 0 0 8px rgba(220,38,38,.06);
}
.eg-confirm__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--eg-text);
    margin: 0 0 .5rem;
}
.eg-confirm__msg {
    font-size: .95rem;
    color: var(--eg-text-soft);
    margin: 0;
    font-weight: 500;
    line-height: 1.55;
}
.eg-confirm .modal-footer {
    border-top: 0;
    padding: .75rem 1.5rem 1.5rem;
    justify-content: center;
}
.eg-confirm .modal-footer .eg-btn { min-width: 120px; }

/* --- File input (.bootstrap-fileinput) common usage in legacy forms --- */
.eg-main input[type="file"] {
    padding: .55rem .75rem;
    background: var(--eg-bg);
    border: 1.5px dashed var(--eg-border-strong);
    border-radius: var(--eg-radius-sm);
    cursor: pointer;
    width: 100%;
}
.eg-main input[type="file"]:hover {
    border-color: var(--eg-primary);
    background: var(--eg-primary-soft);
}

/* --- Misc Metronic widgets --- */
.eg-main .note,
.eg-main .well {
    background: var(--eg-bg);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius-sm);
    padding: .9rem 1.1rem;
    margin-bottom: 1rem;
}

.eg-main .scroller {
    max-height: 360px;
    overflow-y: auto;
}

/* row gutters consistent */
.eg-main .row { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }

/* avatar / .img-circle */
.eg-main .img-circle { border-radius: 50% !important; }

/* Hide noisy Metronic page bar elements that we replaced in the topbar */
.eg-main .page-bar > .page-toolbar { display: none; }