/* ================================================================
   Edunology ERP — Professional Blue Theme · Complete UI
   ================================================================ */

/* ── CSS Variables ── */
:root {
    /* Primary = clean professional blue */
    --p:       #1a56db;
    --p-d:     #1446b8;
    --p-l:     #eff6ff;
    --p-glow:  rgba(26,86,219,.18);

    /* Backward-compat aliases used in inline styles throughout templates */
    --eerp-primary:       #1a56db;
    --eerp-primary-dark:  #1446b8;
    --eerp-primary-light: #eff6ff;
    --eerp-success:       #059669;
    --eerp-danger:        #dc2626;
    --eerp-warning:       #d97706;
    --eerp-info:          #0284c7;
    --eerp-purple:        #7c3aed;

    /* Status colours */
    --g:   #059669;  --g-l: #d1fae5;
    --r:   #dc2626;  --r-l: #fee2e2;
    --y:   #d97706;  --y-l: #fef3c7;
    --pu:  #7c3aed;  --pu-l:#ede9fe;

    /* Layout */
    --sb-bg:  #1e3a5f;   /* navy sidebar */
    --sb-w:   240px;
    --tb-h:   60px;

    /* Shape */
    --rad:    12px;
    --rad-sm: 8px;
    --rad-lg: 18px;

    /* Shadow */
    --sh-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --sh:    0 4px 12px rgba(0,0,0,.1);
    --sh-md: 0 8px 28px rgba(0,0,0,.14);
    --sh-lg: 0 20px 56px rgba(0,0,0,.2);

    /* Misc */
    --tr:     .17s ease;
    --border: #e5e7eb;
    --text:   #111827;
    --muted:  #6b7280;
    --subtle: #9ca3af;
    --font:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ================================================================
   RESET (inside app container)
   ================================================================ */
#eerp-app *, #eerp-app *::before, #eerp-app *::after {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased;
}
#eerp-app a, #eerp-app a:hover, #eerp-app a:focus,
#eerp-app a:visited, #eerp-app a:active {
    text-decoration: none !important; color: inherit !important; outline: none !important;
}
#eerp-app button  { font-family: var(--font) !important; cursor: pointer !important; outline: none !important; }
#eerp-app input, #eerp-app select, #eerp-app textarea { font-family: var(--font) !important; }
#eerp-app img     { max-width: 100% !important; }
#eerp-app ul, #eerp-app ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#eerp-app p  { margin: 0 !important; }
#eerp-app h1, #eerp-app h2, #eerp-app h3, #eerp-app h4, #eerp-app h5 {
    margin: 0 !important; padding: 0 !important; font-weight: 700 !important; line-height: 1.3 !important;
}

/* ================================================================
   NUCLEAR POSITIONING — escapes WordPress theme completely
   ================================================================ */
#eerp-app {
    position: fixed !important;
    inset: 0 !important; top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    z-index: 99999 !important; overflow: hidden !important;
    font-family: var(--font) !important;
    font-size: 14px !important; line-height: 1.6 !important;
    color: var(--text) !important;
    background: #f3f6fb !important;
}
#eerp-app:not(.eerp-login-page) { display: flex !important; }
#eerp-app.eerp-login-page {
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg,#0f172a 0%,#1e3a5f 60%,#0f172a 100%) !important;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.eerp-app .eerp-sidebar {
    width: var(--sb-w) !important; min-width: var(--sb-w) !important;
    background: var(--sb-bg) !important;
    display: flex !important; flex-direction: column !important;
    flex-shrink: 0 !important; overflow-y: auto !important; overflow-x: hidden !important;
    z-index: 200 !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    transition: transform var(--tr) !important;
}
.eerp-app .eerp-sidebar::-webkit-scrollbar { width: 0 !important; }

.eerp-app .eerp-sidebar-brand {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 18px 14px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    min-height: 64px !important; flex-shrink: 0 !important;
}
.eerp-app .eerp-sidebar-logo {
    height: 30px !important; width: auto !important; object-fit: contain !important;
    border-radius: 6px !important; flex-shrink: 0 !important;
}
.eerp-app .eerp-sidebar-brand > span {
    color: #fff !important; font-size: 14.5px !important; font-weight: 700 !important;
    letter-spacing: -.01em !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
}

.eerp-app .eerp-nav {
    flex: 1 !important; padding: 10px 8px !important;
    display: flex !important; flex-direction: column !important; gap: 2px !important;
}
.eerp-app .eerp-nav-item {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 9px 11px !important; color: rgba(255,255,255,.55) !important;
    text-decoration: none !important; font-size: 13px !important; font-weight: 500 !important;
    border-radius: 8px !important; transition: background var(--tr), color var(--tr) !important;
    cursor: pointer !important; border: none !important; background: transparent !important;
    width: 100% !important; text-align: left !important; line-height: 1 !important;
}
.eerp-app .eerp-nav-item i {
    width: 16px !important; text-align: center !important; font-size: 13px !important;
    flex-shrink: 0 !important; opacity: .7 !important;
}
.eerp-app .eerp-nav-item:hover {
    background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.9) !important;
}
.eerp-app .eerp-nav-item:hover i { opacity: 1 !important; }
.eerp-app .eerp-nav-item.active {
    background: var(--p) !important; color: #fff !important; font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(26,86,219,.35) !important;
}
.eerp-app .eerp-nav-item.active i { opacity: 1 !important; }
.eerp-app .eerp-nav-item.eerp-logout:hover {
    background: rgba(220,38,38,.2) !important; color: #fca5a5 !important;
}
.eerp-app .eerp-sidebar-footer {
    padding: 8px 8px 12px !important;
    border-top: 1px solid rgba(255,255,255,.07) !important; flex-shrink: 0 !important;
}

/* ================================================================
   MAIN AREA
   ================================================================ */
.eerp-app .eerp-main {
    flex: 1 !important; display: flex !important; flex-direction: column !important;
    overflow: hidden !important; min-width: 0 !important;
}

/* Topbar */
.eerp-app .eerp-topbar {
    height: var(--tb-h) !important; min-height: var(--tb-h) !important;
    background: #fff !important; border-bottom: 1px solid var(--border) !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 0 20px !important; flex-shrink: 0 !important; z-index: 100 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
}
.eerp-app .eerp-menu-toggle {
    width: 36px !important; height: 36px !important; border: none !important;
    background: #f3f4f6 !important; border-radius: 8px !important; color: var(--muted) !important;
    font-size: 15px !important; display: none !important; align-items: center !important;
    justify-content: center !important; flex-shrink: 0 !important; cursor: pointer !important;
    transition: background var(--tr) !important;
}
.eerp-app .eerp-menu-toggle:hover { background: var(--p-l) !important; color: var(--p) !important; }
.eerp-app .eerp-topbar-center { flex: 1 !important; min-width: 0 !important; }
.eerp-app .eerp-page-title {
    font-size: 16px !important; font-weight: 700 !important; color: var(--text) !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.eerp-app .eerp-topbar-right {
    display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important;
}

/* Notification bell */
.eerp-app .eerp-notif-btn {
    position: relative !important; width: 36px !important; height: 36px !important;
    border: none !important; background: #f3f4f6 !important; border-radius: 9px !important;
    color: var(--muted) !important; font-size: 14px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background var(--tr), color var(--tr) !important; cursor: pointer !important;
}
.eerp-app .eerp-notif-btn:hover { background: var(--p-l) !important; color: var(--p) !important; }
.eerp-app .eerp-notif-badge {
    position: absolute !important; top: 3px !important; right: 3px !important;
    background: var(--r) !important; color: #fff !important; font-size: 9px !important;
    font-weight: 800 !important; min-width: 15px !important; height: 15px !important;
    border-radius: 8px !important; display: flex !important; align-items: center !important;
    justify-content: center !important; padding: 0 3px !important; border: 1.5px solid #fff !important;
}
.eerp-app .eerp-badge-pulse { animation: eerp-pulse .5s ease 2 !important; }
@keyframes eerp-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.35)} }

/* User pill */
.eerp-app .eerp-user-pill {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 4px 12px 4px 4px !important; background: #f8fafc !important;
    border: 1px solid var(--border) !important; border-radius: 40px !important;
}
.eerp-app .eerp-user-pill > span { font-size: 13px !important; font-weight: 600 !important; color: var(--text) !important; }
.eerp-app .eerp-user-pill > div { display: flex !important; flex-direction: column !important; gap: 1px !important; }
.eerp-app .eerp-user-pill > div span  { font-size: 13px !important; font-weight: 600 !important; color: var(--text) !important; line-height: 1 !important; }
.eerp-app .eerp-user-pill > div small { font-size: 10px !important; color: var(--muted) !important; }

/* Live indicator */
.eerp-live-indicator {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 3px 10px !important; background: #f0fdf4 !important;
    border: 1px solid #a7f3d0 !important; border-radius: 20px !important;
    font-size: 11px !important; font-weight: 700 !important; color: #065f46 !important;
}
.eerp-live-dot {
    width: 6px !important; height: 6px !important; border-radius: 50% !important;
    background: #22c55e !important; animation: eerp-blink 1.4s infinite !important;
}
@keyframes eerp-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.eerp-live-label { line-height: 1 !important; }

/* Mini dot / live chip (used in templates) */
.eerp-mini-dot {
    display: inline-block !important; width: 6px !important; height: 6px !important;
    border-radius: 50% !important; background: #22c55e !important;
    animation: eerp-blink 1.4s infinite !important; margin-right: 4px !important;
}
.eerp-live-chip {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    font-size: 10.5px !important; font-weight: 700 !important; color: #065f46 !important;
    background: #f0fdf4 !important; border: 1px solid #a7f3d0 !important;
    border-radius: 20px !important; padding: 2px 8px !important;
}

/* Notification drawer */
.eerp-app .eerp-notif-drawer {
    position: absolute !important; top: var(--tb-h) !important; right: 16px !important;
    width: 330px !important; max-height: 480px !important;
    background: #fff !important; border: 1px solid var(--border) !important;
    border-radius: var(--rad) !important; box-shadow: var(--sh-md) !important;
    z-index: 500 !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
    transform: translateY(-8px) scale(.97) !important; opacity: 0 !important;
    pointer-events: none !important; transition: transform .2s ease, opacity .2s ease !important;
}
.eerp-app .eerp-notif-drawer.open {
    transform: translateY(0) scale(1) !important; opacity: 1 !important;
    pointer-events: all !important;
}
.eerp-app .eerp-notif-header {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 16px !important; border-bottom: 1px solid #f3f4f6 !important; flex-shrink: 0 !important;
}
.eerp-app .eerp-notif-header h3 { font-size: 14px !important; font-weight: 700 !important; }
.eerp-app .eerp-notif-read-all {
    font-size: 12px !important; color: var(--p) !important; background: none !important;
    border: none !important; font-weight: 600 !important; cursor: pointer !important; padding: 0 !important;
    font-family: var(--font) !important;
}
.eerp-app .eerp-notif-list { overflow-y: auto !important; max-height: 400px !important; padding: 6px !important; }

/* Notification items */
.eerp-notif-item {
    padding: 10px 12px !important; border-radius: 8px !important; cursor: pointer !important;
    transition: background var(--tr) !important; border-bottom: 1px solid #f8fafc !important;
    display: flex !important; align-items: flex-start !important; gap: 8px !important;
    font-family: var(--font) !important;
}
.eerp-notif-item:hover { background: #f8fafc !important; }
.eerp-notif-item.unread { background: #eff6ff !important; }
.eerp-notif-dot {
    width: 7px !important; height: 7px !important; border-radius: 50% !important;
    background: var(--p) !important; flex-shrink: 0 !important; margin-top: 5px !important;
}
.eerp-notif-content { flex: 1 !important; min-width: 0 !important; }
.eerp-notif-content strong { display: block !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--text) !important; margin-bottom: 2px !important; }
.eerp-notif-content span  { font-size: 12px !important; color: var(--muted) !important; display: block !important; }
.eerp-notif-time { font-size: 10.5px !important; color: var(--subtle) !important; margin-top: 2px !important; }

/* Overlay */
.eerp-app .eerp-overlay {
    display: none !important; position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,.45) !important; z-index: 150 !important;
    backdrop-filter: blur(2px) !important;
}
.eerp-app .eerp-overlay.show { display: block !important; }

/* Content area */
.eerp-app .eerp-content {
    flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important;
    padding: 22px 24px !important; background: #f3f6fb !important; scroll-behavior: smooth !important;
}
.eerp-app .eerp-content::-webkit-scrollbar { width: 5px !important; }
.eerp-app .eerp-content::-webkit-scrollbar-track { background: transparent !important; }
.eerp-app .eerp-content::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 8px !important; }

/* Tabs */
.eerp-app .eerp-tab-content { display: none !important; animation: eerp-fadeup .2s ease !important; }
.eerp-app .eerp-tab-content.active { display: block !important; }
@keyframes eerp-fadeup { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.eerp-fade-in { animation: eerp-fadeup .28s ease !important; }

/* ================================================================
   WELCOME BANNER
   ================================================================ */
.eerp-app .eerp-welcome-banner {
    background: linear-gradient(125deg, #1e3a5f 0%, var(--p) 55%, #1d4ed8 100%) !important;
    border-radius: var(--rad-lg) !important; padding: 20px 24px !important;
    display: flex !important; align-items: center !important; gap: 16px !important;
    margin-bottom: 20px !important; flex-wrap: wrap !important;
    position: relative !important; overflow: hidden !important;
    box-shadow: 0 6px 24px rgba(26,86,219,.28) !important;
}
.eerp-app .eerp-welcome-banner::after {
    content: '' !important; position: absolute !important;
    right: -60px !important; top: -60px !important;
    width: 220px !important; height: 220px !important;
    border-radius: 50% !important; background: rgba(255,255,255,.05) !important;
    pointer-events: none !important;
}
.eerp-app .eerp-welcome-avatar {
    width: 52px !important; height: 52px !important; border-radius: 14px !important;
    background: rgba(255,255,255,.18) !important; border: 2px solid rgba(255,255,255,.3) !important;
    color: #fff !important; font-size: 18px !important; font-weight: 800 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
}
.eerp-app .eerp-welcome-banner h2 { color: #fff !important; font-size: 19px !important; margin-bottom: 3px !important; }
.eerp-app .eerp-welcome-banner p  { color: rgba(255,255,255,.72) !important; font-size: 13px !important; }
.eerp-app .eerp-welcome-clock { margin-left: auto !important; text-align: right !important; }
.eerp-app .eerp-big-clock { font-size: 26px !important; font-weight: 800 !important; color: #fff !important; font-variant-numeric: tabular-nums !important; }
.eerp-app .eerp-clock-date { font-size: 12px !important; color: rgba(255,255,255,.68) !important; margin-top: 2px !important; }

/* ================================================================
   CARDS
   ================================================================ */
.eerp-app .eerp-card {
    background: #fff !important; border-radius: var(--rad) !important;
    border: 1px solid var(--border) !important; box-shadow: var(--sh-sm) !important;
    overflow: hidden !important; margin-bottom: 18px !important;
}
.eerp-app .eerp-card > h3, .eerp-app .eerp-card > h4 {
    padding: 14px 18px 12px !important; font-size: 14px !important; font-weight: 700 !important;
    color: var(--text) !important; border-bottom: 1px solid #f3f4f6 !important;
}
.eerp-card-header-simple {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 14px 18px 12px !important; font-size: 14px !important; font-weight: 700 !important;
    color: var(--text) !important; border-bottom: 1px solid #f3f4f6 !important;
    font-family: var(--font) !important;
}
.eerp-activity-card { padding: 0 !important; }
.eerp-activity-feed { padding: 4px 16px 16px !important; }

/* ================================================================
   KPI ROW  (owner home)
   ================================================================ */
.eerp-kpi-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr)) !important;
    gap: 14px !important; margin-bottom: 20px !important;
}
.eerp-kpi-card {
    display: flex !important; align-items: center !important; gap: 14px !important;
    background: #fff !important; border: 1px solid var(--border) !important;
    border-radius: var(--rad) !important; padding: 16px 18px !important;
    box-shadow: var(--sh-sm) !important; font-family: var(--font) !important;
    transition: transform var(--tr), box-shadow var(--tr) !important;
}
.eerp-kpi-card:hover { transform: translateY(-2px) !important; box-shadow: var(--sh) !important; }
.eerp-kpi-icon {
    width: 42px !important; height: 42px !important; border-radius: 10px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 17px !important; flex-shrink: 0 !important;
}
.eerp-kpi-blue   .eerp-kpi-icon { background: #dbeafe !important; color: #1d4ed8 !important; }
.eerp-kpi-green  .eerp-kpi-icon { background: #d1fae5 !important; color: #059669 !important; }
.eerp-kpi-orange .eerp-kpi-icon { background: #fef3c7 !important; color: #d97706 !important; }
.eerp-kpi-purple .eerp-kpi-icon { background: #ede9fe !important; color: #7c3aed !important; }
.eerp-kpi-num   { font-size: 22px !important; font-weight: 800 !important; color: var(--text) !important; line-height: 1.1 !important; }
.eerp-kpi-label { font-size: 11px !important; font-weight: 600 !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .5px !important; margin-top: 2px !important; }

/* ================================================================
   TWO-COLUMN LAYOUT  (used across all dashboards)
   ================================================================ */
.eerp-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
    align-items: start !important;
}
.eerp-feed-row { align-items: start !important; }

/* ================================================================
   STATS ROW
   ================================================================ */
.eerp-app .eerp-stats-row,
.eerp-admin-stats-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px,1fr)) !important;
    gap: 12px !important; margin-bottom: 18px !important;
}
.eerp-app .eerp-stat-card {
    background: #fff !important; border: 1px solid var(--border) !important;
    border-radius: var(--rad) !important; padding: 16px !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
    box-shadow: var(--sh-sm) !important; transition: transform var(--tr), box-shadow var(--tr) !important;
}
.eerp-app .eerp-stat-card:hover { transform: translateY(-2px) !important; box-shadow: var(--sh) !important; }
.eerp-app .eerp-stat-icon {
    width: 42px !important; height: 42px !important; border-radius: 10px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 17px !important; flex-shrink: 0 !important;
}
.eerp-app .eerp-stat-icon.blue   { background: #dbeafe !important; color: #1d4ed8 !important; }
.eerp-app .eerp-stat-icon.green  { background: #d1fae5 !important; color: #059669 !important; }
.eerp-app .eerp-stat-icon.red    { background: #fee2e2 !important; color: #dc2626 !important; }
.eerp-app .eerp-stat-icon.yellow { background: #fef3c7 !important; color: #d97706 !important; }
.eerp-app .eerp-stat-icon.purple { background: #ede9fe !important; color: #7c3aed !important; }
.eerp-app .eerp-stat-icon.indigo { background: #e0e7ff !important; color: #4338ca !important; }
.eerp-app .eerp-stat-meta { flex: 1 !important; min-width: 0 !important; }
.eerp-app .eerp-stat-num {
    font-size: 22px !important; font-weight: 800 !important; color: var(--text) !important;
    line-height: 1.1 !important; display: block !important;
}
.eerp-app .eerp-stat-label {
    font-size: 11px !important; font-weight: 600 !important; color: var(--muted) !important;
    text-transform: uppercase !important; letter-spacing: .5px !important;
    display: block !important; margin-top: 2px !important;
}

/* Stat KPI (manager home stats box) */
.eerp-stat-kpi { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 14px !important; gap: 4px !important; }
.eerp-stat-kpi-num   { font-size: 26px !important; font-weight: 800 !important; color: var(--text) !important; line-height: 1 !important; font-family: var(--font) !important; }
.eerp-stat-kpi-label { font-size: 11px !important; font-weight: 600 !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .5px !important; text-align: center !important; font-family: var(--font) !important; }

/* ================================================================
   SECTION HEADER
   ================================================================ */
.eerp-app .eerp-section-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    margin-bottom: 12px !important; gap: 12px !important; flex-wrap: wrap !important;
}
.eerp-app .eerp-section-header h3 { font-size: 15px !important; font-weight: 700 !important; color: var(--text) !important; }
.eerp-app .eerp-section-header h2 { font-size: 17px !important; font-weight: 700 !important; color: var(--text) !important; }

/* ================================================================
   AVATARS
   ================================================================ */
.eerp-app .eerp-avatar,
.eerp-team-avatar {
    width: 36px !important; height: 36px !important; border-radius: 10px !important;
    background: linear-gradient(135deg, var(--p), #7c3aed) !important;
    color: #fff !important; font-size: 13px !important; font-weight: 800 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important; text-transform: uppercase !important;
}
.eerp-app .eerp-avatar-manager { background: linear-gradient(135deg, #0891b2, #0e7490) !important; }
.eerp-app .eerp-avatar-owner   { background: linear-gradient(135deg, #d97706, #b45309) !important; }

.eerp-app .eerp-profile-card {
    display: flex !important; align-items: flex-start !important; gap: 20px !important;
    padding: 22px !important; flex-wrap: wrap !important;
}
.eerp-app .eerp-profile-avatar {
    width: 72px !important; height: 72px !important; border-radius: 18px !important;
    background: linear-gradient(135deg, var(--p), #7c3aed) !important;
    color: #fff !important; font-size: 24px !important; font-weight: 800 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important; box-shadow: 0 6px 20px rgba(26,86,219,.3) !important;
}
.eerp-app .eerp-profile-info { flex: 1 !important; min-width: 200px !important; }
.eerp-app .eerp-profile-info h2 { font-size: 18px !important; color: var(--text) !important; }
.eerp-app .eerp-profile-role { font-size: 13px !important; color: var(--p) !important; font-weight: 600 !important; margin-top: 3px !important; }
.eerp-app .eerp-profile-meta { display: flex !important; flex-wrap: wrap !important; gap: 8px 18px !important; margin-top: 10px !important; }
.eerp-app .eerp-profile-meta > div { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; color: var(--muted) !important; }
.eerp-app .eerp-profile-meta > div i { color: var(--p) !important; font-size: 11px !important; width: 14px !important; }

/* ================================================================
   TEAM GRID (manager)
   ================================================================ */
.eerp-app .eerp-team-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px,1fr)) !important;
    gap: 14px !important;
}
.eerp-app .eerp-team-card {
    background: #fff !important; border: 1px solid var(--border) !important;
    border-radius: var(--rad) !important; padding: 16px !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
    box-shadow: var(--sh-sm) !important; transition: transform var(--tr), box-shadow var(--tr) !important;
}
.eerp-app .eerp-team-card:hover { transform: translateY(-2px) !important; box-shadow: var(--sh) !important; }
.eerp-app .eerp-team-info { flex: 1 !important; min-width: 0 !important; }
.eerp-app .eerp-team-info h4 { font-size: 13.5px !important; font-weight: 700 !important; color: var(--text) !important; }
.eerp-app .eerp-team-info p  { font-size: 12px !important; color: var(--muted) !important; margin-top: 2px !important; }
.eerp-app .eerp-emp-code { font-size: 10.5px !important; color: var(--subtle) !important; font-family: monospace !important; }
.eerp-app .eerp-team-right { display: flex !important; flex-direction: column !important; gap: 6px !important; align-items: flex-end !important; flex-shrink: 0 !important; }

/* ================================================================
   BUTTONS — global (needed everywhere including modals)
   ================================================================ */
.eerp-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 7px !important; padding: 9px 18px !important; border-radius: var(--rad-sm) !important;
    font-size: 13.5px !important; font-weight: 600 !important; font-family: var(--font) !important;
    cursor: pointer !important; border: none !important; transition: all var(--tr) !important;
    white-space: nowrap !important; text-decoration: none !important; line-height: 1.2 !important;
    box-sizing: border-box !important;
}
.eerp-btn:disabled { opacity: .55 !important; cursor: not-allowed !important; transform: none !important; }
.eerp-btn:not(:disabled):active { transform: scale(.97) !important; }
.eerp-btn-primary {
    background: var(--p) !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(26,86,219,.28) !important;
}
.eerp-btn-primary:hover:not(:disabled) {
    background: var(--p-d) !important; transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(26,86,219,.38) !important;
}
.eerp-btn-success { background: var(--g) !important; color: #fff !important; }
.eerp-btn-success:hover:not(:disabled) { background: #047857 !important; transform: translateY(-1px) !important; }
.eerp-btn-danger  { background: var(--r) !important; color: #fff !important; }
.eerp-btn-danger:hover:not(:disabled)  { background: #b91c1c !important; transform: translateY(-1px) !important; }
.eerp-btn-secondary {
    background: #f9fafb !important; color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.eerp-btn-secondary:hover:not(:disabled) { background: #f3f4f6 !important; }
.eerp-btn-outline {
    background: transparent !important; color: var(--p) !important;
    border: 1.5px solid var(--p) !important;
}
.eerp-btn-outline:hover:not(:disabled) { background: var(--p-l) !important; }
.eerp-btn-ghost {
    background: transparent !important; color: var(--muted) !important;
    border: 1.5px solid var(--border) !important;
}
.eerp-btn-ghost:hover:not(:disabled) { background: #f8fafc !important; color: var(--text) !important; }
.eerp-btn-warning { background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fde68a !important; }
.eerp-btn-warning:hover:not(:disabled) { background: #fde68a !important; }
.eerp-btn-xs  { padding: 5px 10px !important; font-size: 11.5px !important; border-radius: 6px !important; gap: 4px !important; }
.eerp-btn-sm  { padding: 7px 14px !important; font-size: 12.5px !important; }
.eerp-btn-full{ width: 100% !important; }
.eerp-btn-icon{ width: 32px !important; height: 32px !important; padding: 0 !important; justify-content: center !important; border-radius: 8px !important; }
.eerp-btn-confirm-warn { background: #d97706 !important; color: #fff !important; border: none !important; }

.eerp-icon-btn {
    width: 30px !important; height: 30px !important; background: #f3f4f6 !important;
    border: 1px solid var(--border) !important; border-radius: 7px !important;
    color: var(--muted) !important; font-size: 12px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; transition: all var(--tr) !important; flex-shrink: 0 !important;
    font-family: var(--font) !important;
}
.eerp-icon-btn:hover { background: var(--p-l) !important; color: var(--p) !important; border-color: var(--p) !important; }
.eerp-link-btn {
    background: none !important; border: none !important; color: var(--p) !important;
    font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important;
    padding: 0 !important; font-family: var(--font) !important; transition: color var(--tr) !important;
}
.eerp-link-btn:hover { color: var(--p-d) !important; text-decoration: underline !important; }

/* ================================================================
   FORMS (global — needed in modals too)
   ================================================================ */
.eerp-app .eerp-form, .eerp-app .eerp-form-inline {
    display: flex !important; flex-wrap: wrap !important; gap: 14px !important; padding: 18px !important;
}
/* 2-col grid form (assign task, add employee, leave form sections) */
.eerp-form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    padding: 18px !important;
}
.eerp-field {
    display: flex !important; flex-direction: column !important; gap: 5px !important;
}
.eerp-field-full { grid-column: 1 / -1 !important; }
.eerp-label {
    font-size: 12.5px !important; font-weight: 600 !important; color: #374151 !important;
    display: flex !important; align-items: center !important; gap: 5px !important;
    font-family: var(--font) !important;
}
.eerp-label i { color: var(--p) !important; font-size: 11px !important; }
.eerp-input, .eerp-select, .eerp-textarea, .eerp-date-input {
    width: 100% !important; padding: 9px 12px !important;
    border: 1.5px solid #d1d5db !important; border-radius: var(--rad-sm) !important;
    font-size: 13.5px !important; font-family: var(--font) !important; color: var(--text) !important;
    background: #fff !important; outline: none !important;
    transition: border-color var(--tr), box-shadow var(--tr) !important;
    -webkit-appearance: none !important; appearance: none !important;
    box-sizing: border-box !important;
}
.eerp-input:focus, .eerp-select:focus, .eerp-textarea:focus, .eerp-date-input:focus {
    border-color: var(--p) !important; box-shadow: 0 0 0 3px var(--p-glow) !important;
}
.eerp-input::placeholder, .eerp-textarea::placeholder { color: #9ca3af !important; }
.eerp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 10px center !important;
    background-size: 16px !important; padding-right: 34px !important; cursor: pointer !important;
}
.eerp-textarea { resize: vertical !important; min-height: 78px !important; line-height: 1.5 !important; }

/* Input with icon */
.eerp-input-icon-wrap { position: relative !important; display: flex !important; align-items: center !important; }
.eerp-input-icon { position: absolute !important; left: 12px !important; color: #9ca3af !important; font-size: 14px !important; pointer-events: none !important; }
.eerp-input-with-icon { padding-left: 38px !important; }
.eerp-pw-toggle {
    position: absolute !important; right: 10px !important; background: none !important;
    border: none !important; color: #9ca3af !important; cursor: pointer !important;
    padding: 4px !important; font-size: 14px !important; line-height: 1 !important;
    transition: color var(--tr) !important;
}
.eerp-pw-toggle:hover { color: var(--muted) !important; }

/* ================================================================
   CARDS ROW (clock card + mini stats + salary teaser)
   ================================================================ */
.eerp-app .eerp-cards-row {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)) !important;
    gap: 14px !important; margin-bottom: 20px !important;
}
.eerp-app .eerp-clock-card { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 18px !important; }
.eerp-app .eerp-clock-status { display: flex !important; align-items: center !important; gap: 11px !important; }
.eerp-app .eerp-clock-status-dot {
    width: 11px !important; height: 11px !important; border-radius: 50% !important;
    background: #d1d5db !important; flex-shrink: 0 !important;
    transition: background var(--tr), box-shadow var(--tr) !important;
}
.eerp-app .eerp-clock-status-dot.clocked-in {
    background: var(--g) !important; box-shadow: 0 0 0 3px rgba(5,150,105,.2) !important;
    animation: eerp-pulse-dot 2s infinite !important;
}
.eerp-app .eerp-clock-status-dot.clocked-out { background: var(--r) !important; }
@keyframes eerp-pulse-dot {
    0%,100%{box-shadow:0 0 0 3px rgba(5,150,105,.2)}
    50%{box-shadow:0 0 0 6px rgba(5,150,105,.08)}
}
.eerp-app #eerp-status-text { font-size: 13.5px !important; font-weight: 700 !important; color: var(--text) !important; display: block !important; }
.eerp-app .eerp-elapsed-timer { font-size: 12px !important; color: var(--muted) !important; font-variant-numeric: tabular-nums !important; }
.eerp-app .eerp-clock-times { display: flex !important; gap: 14px !important; }
.eerp-app .eerp-time-item { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.eerp-app .eerp-time-item label { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .5px !important; color: var(--subtle) !important; }
.eerp-app .eerp-time-item span  { font-size: 14px !important; font-weight: 700 !important; color: var(--text) !important; font-variant-numeric: tabular-nums !important; }
.eerp-app .eerp-clock-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.eerp-app .eerp-clock-btn { flex: 1 !important; min-width: 0 !important; justify-content: center !important; }
.eerp-app .eerp-last-updated { font-size: 10px !important; color: var(--subtle) !important; text-align: center !important; }

.eerp-app .eerp-mini-stats { display: flex !important; flex-direction: column !important; justify-content: space-around !important; padding: 16px !important; gap: 10px !important; }
.eerp-app .eerp-mini-stat { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.eerp-app .eerp-mini-num { font-size: 24px !important; font-weight: 800 !important; color: var(--text) !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; }
.eerp-app .eerp-mini-stat > label { font-size: 11px !important; font-weight: 600 !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .5px !important; }

.eerp-app .eerp-salary-teaser {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; justify-content: center !important;
    padding: 18px !important; gap: 5px !important;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    border-color: #6ee7b7 !important;
}
.eerp-app .eerp-salary-label { font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .6px !important; color: #065f46 !important; }
.eerp-app .eerp-salary-amount { font-size: 28px !important; font-weight: 800 !important; color: #064e3b !important; font-variant-numeric: tabular-nums !important; line-height: 1.1 !important; }
.eerp-app .eerp-salary-status { font-size: 12px !important; color: #065f46 !important; font-weight: 600 !important; }
.eerp-app .eerp-deduction-note { font-size: 11.5px !important; color: var(--r) !important; }

/* ================================================================
   TABLES
   ================================================================ */
.eerp-table {
    width: 100% !important; border-collapse: collapse !important; font-size: 13.5px !important;
    font-family: var(--font) !important;
}
.eerp-table thead th {
    background: #f8fafc !important; color: var(--muted) !important; font-weight: 700 !important;
    font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .5px !important;
    padding: 10px 14px !important; border-bottom: 1px solid var(--border) !important;
    white-space: nowrap !important; text-align: left !important;
}
.eerp-table tbody td {
    padding: 11px 14px !important; border-bottom: 1px solid #f3f4f6 !important;
    color: var(--text) !important; vertical-align: middle !important;
}
.eerp-table tbody tr:last-child td { border-bottom: none !important; }
.eerp-table tbody tr:hover td { background: #fafafa !important; }
.eerp-table-empty { text-align: center !important; padding: 36px !important; color: var(--subtle) !important; font-style: italic !important; }

/* ================================================================
   BADGES
   ================================================================ */
.eerp-badge {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    padding: 3px 9px !important; border-radius: 20px !important; font-size: 11px !important;
    font-weight: 700 !important; letter-spacing: .3px !important; white-space: nowrap !important;
    border: 1px solid transparent !important; font-family: var(--font) !important;
}
.eerp-badge-present,.eerp-badge-active,.eerp-badge-approved,.eerp-badge-paid
    { background:#d1fae5 !important; color:#065f46 !important; border-color:#6ee7b7 !important; }
.eerp-badge-late,.eerp-badge-pending,.eerp-badge-in-progress,.eerp-badge-in_progress
    { background:#fef3c7 !important; color:#92400e !important; border-color:#fde68a !important; }
.eerp-badge-absent,.eerp-badge-rejected,.eerp-badge-overdue,.eerp-badge-suspended
    { background:#fee2e2 !important; color:#991b1b !important; border-color:#fca5a5 !important; }
.eerp-badge-leave,.eerp-badge-half-day,.eerp-badge-submitted,.eerp-badge-inactive
    { background:#ede9fe !important; color:#5b21b6 !important; border-color:#c4b5fd !important; }
.eerp-badge-hold    { background:#f3f4f6 !important; color:#4b5563 !important; border-color:#d1d5db !important; }
.eerp-badge-unpaid  { background:#fff7ed !important; color:#9a3412 !important; border-color:#fed7aa !important; }
.eerp-badge-pl      { background:#d1fae5 !important; color:#065f46 !important; border-color:#6ee7b7 !important; }
.eerp-badge-upl     { background:#fef3c7 !important; color:#92400e !important; border-color:#fde68a !important; }
.eerp-badge-casual  { background:#dbeafe !important; color:#1e40af !important; border-color:#93c5fd !important; }
.eerp-badge-sick    { background:#fee2e2 !important; color:#991b1b !important; border-color:#fca5a5 !important; }
.eerp-badge-earned  { background:#ede9fe !important; color:#5b21b6 !important; border-color:#c4b5fd !important; }
.eerp-badge-maternity{ background:#fce7f3 !important; color:#9d174d !important; border-color:#f9a8d4 !important; }
.eerp-badge-other   { background:#f3f4f6 !important; color:#4b5563 !important; border-color:#d1d5db !important; }
.eerp-badge-priority-urgent { background:#fee2e2 !important; color:#991b1b !important; }
.eerp-badge-priority-high   { background:#fff7ed !important; color:#9a3412 !important; }
.eerp-badge-priority-medium { background:#fef3c7 !important; color:#92400e !important; }
.eerp-badge-priority-low    { background:#d1fae5 !important; color:#065f46 !important; }
.eerp-badge-pulse { animation: eerp-pulse .5s ease 2 !important; }

/* ================================================================
   FILTER PILLS
   ================================================================ */
.eerp-filter-pills { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.eerp-pill {
    padding: 5px 14px !important; border-radius: 20px !important;
    border: 1.5px solid var(--border) !important; background: #fff !important;
    color: var(--muted) !important; font-size: 12.5px !important; font-weight: 600 !important;
    cursor: pointer !important; transition: all var(--tr) !important;
    white-space: nowrap !important; font-family: var(--font) !important;
}
.eerp-pill:hover  { border-color: var(--p) !important; color: var(--p) !important; background: var(--p-l) !important; }
.eerp-pill.active { background: var(--p) !important; color: #fff !important; border-color: var(--p) !important; }
.eerp-pill-today  { background: var(--p-l) !important; color: var(--p) !important; border-color: var(--p) !important; }

.eerp-month-nav { display: flex !important; align-items: center !important; gap: 10px !important; }
.eerp-month-nav > span { font-size: 14px !important; font-weight: 700 !important; color: var(--text) !important; min-width: 128px !important; text-align: center !important; }
.eerp-task-date-nav { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 14px !important; flex-wrap: wrap !important; }

/* ================================================================
   TASK CARDS
   ================================================================ */
.eerp-tasks-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.eerp-task-card, .eerp-task-item {
    background: #fff !important; border: 1px solid var(--border) !important;
    border-radius: var(--rad) !important; padding: 14px 16px !important;
    display: flex !important; align-items: flex-start !important; gap: 12px !important;
    box-shadow: var(--sh-sm) !important; transition: box-shadow var(--tr), transform var(--tr) !important;
    position: relative !important; overflow: hidden !important; font-family: var(--font) !important;
}
.eerp-task-card::before, .eerp-task-item::before {
    content: '' !important; position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 3px !important; background: #d1d5db !important;
}
.eerp-task-card:hover, .eerp-task-item:hover { box-shadow: var(--sh) !important; transform: translateY(-1px) !important; }
.eerp-priority-urgent::before { background: #dc2626 !important; }
.eerp-priority-high::before   { background: #f97316 !important; }
.eerp-priority-medium::before { background: #d97706 !important; }
.eerp-priority-low::before    { background: #059669 !important; }
.eerp-task-info   { flex: 1 !important; min-width: 0 !important; }
.eerp-task-title  { font-size: 13.5px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 4px !important; }
.eerp-task-desc   { font-size: 12.5px !important; color: var(--muted) !important; line-height: 1.5 !important; margin-bottom: 8px !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; }
.eerp-task-meta   { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.eerp-task-meta span { font-size: 11.5px !important; color: var(--subtle) !important; display: flex !important; align-items: center !important; gap: 4px !important; font-family: var(--font) !important; }
.eerp-task-actions { display: flex !important; gap: 6px !important; flex-shrink: 0 !important; align-items: flex-start !important; }
.eerp-task-desc-text {
    font-size: 13px !important; color: var(--muted) !important; line-height: 1.6 !important;
    background: #f8fafc !important; padding: 10px 12px !important;
    border-radius: 8px !important; border: 1px solid var(--border) !important;
    font-family: var(--font) !important;
}

/* ================================================================
   SUBMISSIONS
   ================================================================ */
.eerp-submissions-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.eerp-submission-item {
    background: #fff !important; border: 1px solid var(--border) !important;
    border-radius: var(--rad) !important; overflow: hidden !important;
    box-shadow: var(--sh-sm) !important; font-family: var(--font) !important;
}
.eerp-submission-item.pending { border-left: 4px solid #d97706 !important; }
.eerp-submission-header {
    display: flex !important; align-items: flex-start !important;
    justify-content: space-between !important; gap: 12px !important; padding: 14px 16px !important;
}
.eerp-submission-actions { display: flex !important; gap: 6px !important; flex-shrink: 0 !important; }

/* ================================================================
   ACTIVITY FEED
   ================================================================ */
.eerp-feed-item {
    display: flex !important; gap: 11px !important; padding: 10px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important; align-items: flex-start !important;
    font-family: var(--font) !important;
}
.eerp-feed-item:last-child { border-bottom: none !important; }
.eerp-feed-dot {
    width: 30px !important; height: 30px !important; border-radius: 8px !important;
    background: #dbeafe !important; color: #1d4ed8 !important;
    font-size: 12px !important; display: flex !important; align-items: center !important;
    justify-content: center !important; flex-shrink: 0 !important;
}
.eerp-feed-dot.clock_in      { background: #d1fae5 !important; color: #059669 !important; }
.eerp-feed-dot.task_submit   { background: #dbeafe !important; color: #1d4ed8 !important; }
.eerp-feed-dot.leave_request { background: #ede9fe !important; color: #7c3aed !important; }
.eerp-feed-body  { flex: 1 !important; min-width: 0 !important; padding-top: 5px !important; }
.eerp-feed-label { font-size: 13px !important; color: var(--text) !important; line-height: 1.5 !important; }
.eerp-feed-when  { font-size: 11px !important; color: var(--subtle) !important; white-space: nowrap !important; padding-top: 6px !important; }

/* ================================================================
   EMPLOYEES GRID (owner)
   ================================================================ */
.eerp-employees-grid {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)) !important;
    gap: 14px !important; font-family: var(--font) !important;
}
.eerp-employee-row {
    background: #fff !important; border: 1px solid var(--border) !important;
    border-radius: var(--rad) !important; padding: 14px !important;
    display: flex !important; align-items: center !important; gap: 11px !important;
    box-shadow: var(--sh-sm) !important; transition: box-shadow var(--tr), transform var(--tr) !important;
    font-family: var(--font) !important;
}
.eerp-employee-row:hover { box-shadow: var(--sh) !important; transform: translateY(-1px) !important; }

/* ================================================================
   ANNOUNCEMENTS
   ================================================================ */
.eerp-app .eerp-announcements { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 18px !important; }
.eerp-announcement-item {
    background: #fff !important; border: 1px solid var(--border) !important;
    border-radius: var(--rad) !important; padding: 14px 16px !important;
    position: relative !important; overflow: hidden !important;
    box-shadow: var(--sh-sm) !important; font-family: var(--font) !important;
}
.eerp-announcement-item::before {
    content: '' !important; position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 3px !important; background: var(--p) !important;
}

/* ================================================================
   MODALS — UNSCOPED  (all modals sit outside #eerp-app in HTML)
   ================================================================ */
.eerp-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 999999;
    align-items: center; justify-content: center;
    padding: 20px; backdrop-filter: blur(3px);
    font-family: var(--font);
}
/* JS uses .open (task/review modal), .active (add-employee), .show (fallback) */
.eerp-modal-overlay.open,
.eerp-modal-overlay.active,
.eerp-modal-overlay.show { display: flex; }

.eerp-modal {
    background: #fff; border-radius: 16px;
    width: 100%; max-width: 520px;
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
    overflow: hidden;
    animation: eerp-modal-in .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes eerp-modal-in {
    from{transform:scale(.88) translateY(18px);opacity:0}
    to{transform:scale(1) translateY(0);opacity:1}
}
.eerp-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #f3f4f6;
    background: #f8fafc;
}
.eerp-modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: #111827; font-family: var(--font); }
.eerp-modal-close {
    width: 30px; height: 30px; border-radius: 7px; border: none;
    background: #f3f4f6; color: #6b7280; font-size: 13px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s; font-family: var(--font);
}
.eerp-modal-close:hover { background: #fee2e2; color: #dc2626; }
.eerp-modal-body {
    padding: 20px; display: flex; flex-direction: column; gap: 14px;
    max-height: 68vh; overflow-y: auto;
}
.eerp-modal-footer {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 20px; border-top: 1px solid #f3f4f6; background: #f8fafc;
}
/* Add-employee form uses 2-col grid inside modal — override modal-body flex */
#eerp-add-emp-overlay .eerp-modal { max-width: 640px; }
#eerp-add-emp-overlay .eerp-modal-body { gap: 0; padding: 0; }
#eerp-add-emp-overlay .eerp-form-grid-2 { padding: 20px; }

/* ================================================================
   SKELETON LOADERS
   ================================================================ */
.eerp-skel-row {
    display: flex !important; align-items: center !important; gap: 11px !important;
    padding: 10px 0 !important; border-bottom: 1px solid #f3f4f6 !important;
    animation: eerp-skel-pulse 1.5s ease infinite !important;
}
.eerp-skel-av   { width: 34px !important; height: 34px !important; border-radius: 9px !important; background: #e5e7eb !important; flex-shrink: 0 !important; }
.eerp-skel-lines{ flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.eerp-skel-line { height: 11px !important; background: #e5e7eb !important; border-radius: 6px !important; width: 80% !important; }
.eerp-skel-sm   { width: 50% !important; height: 10px !important; background: #f3f4f6 !important; }
@keyframes eerp-skel-pulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ================================================================
   CONNECTION BANNER
   ================================================================ */
.eerp-conn-banner {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 9999999 !important; padding: 10px 20px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 8px !important; font-size: 13px !important; font-weight: 600 !important;
    font-family: var(--font) !important; animation: eerp-slidedown .3s ease !important;
}
.eerp-conn-offline { background: #dc2626 !important; color: #fff !important; }
.eerp-conn-online  { background: #059669 !important; color: #fff !important; }
@keyframes eerp-slidedown { from{transform:translateY(-100%)} to{transform:translateY(0)} }

/* ================================================================
   TOAST
   ================================================================ */
.eerp-toast-container {
    position: fixed !important; bottom: 22px !important; right: 22px !important;
    z-index: 9999999 !important; display: flex !important;
    flex-direction: column !important; gap: 9px !important; pointer-events: none !important;
}
.eerp-toast {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 12px 16px !important; border-radius: 11px !important;
    background: #1e293b !important; color: #fff !important;
    font-size: 13.5px !important; font-weight: 500 !important; font-family: var(--font) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.18) !important; min-width: 260px !important;
    max-width: 380px !important; pointer-events: all !important;
    animation: eerp-toast-in .22s ease !important;
}
.eerp-toast.success { background: #064e3b !important; }
.eerp-toast.error   { background: #7f1d1d !important; }
.eerp-toast i { font-size: 14px !important; flex-shrink: 0 !important; }
@keyframes eerp-toast-in { from{transform:translateX(16px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ================================================================
   LOADER / EMPTY STATE
   ================================================================ */
.eerp-loader-center {
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 36px !important; color: var(--subtle) !important; font-size: 20px !important;
    font-family: var(--font) !important;
}
.eerp-empty-state {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    justify-content: center !important; padding: 44px 20px !important;
    color: var(--subtle) !important; text-align: center !important; gap: 10px !important;
    font-family: var(--font) !important;
}
.eerp-empty-sm { padding: 22px 14px !important; }
.eerp-empty-state i { font-size: 32px !important; opacity: .38 !important; }
.eerp-empty-state p { font-size: 13.5px !important; color: var(--subtle) !important; }

/* ================================================================
   ATTENDANCE CALENDAR
   ================================================================ */
.eerp-app .eerp-att-summary-row { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; margin-bottom: 14px !important; }
.eerp-att-chip {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    padding: 8px 14px !important; border-radius: 9px !important;
    font-size: 13px !important; font-weight: 700 !important; border: 1px solid transparent !important;
    font-family: var(--font) !important;
}
.eerp-att-chip.present { background: #d1fae5 !important; color: #065f46 !important; border-color: #6ee7b7 !important; }
.eerp-att-chip.absent  { background: #fee2e2 !important; color: #991b1b !important; border-color: #fca5a5 !important; }
.eerp-att-chip.late    { background: #fef3c7 !important; color: #92400e !important; border-color: #fde68a !important; }
.eerp-att-chip.leave   { background: #ede9fe !important; color: #5b21b6 !important; border-color: #c4b5fd !important; }
.eerp-att-chip span    { font-size: 17px !important; font-weight: 800 !important; }

.eerp-att-calendar {
    display: grid !important; grid-template-columns: repeat(7,1fr) !important;
    gap: 4px !important; padding: 14px !important;
}
.eerp-cal-header {
    text-align: center !important; font-size: 10px !important; font-weight: 700 !important;
    color: var(--subtle) !important; padding: 5px 2px !important;
    text-transform: uppercase !important; letter-spacing: .5px !important; font-family: var(--font) !important;
}
.eerp-cal-day {
    aspect-ratio: 1 !important; display: flex !important; align-items: center !important;
    justify-content: center !important; border-radius: 9px !important;
    font-size: 12px !important; font-weight: 600 !important; color: var(--text) !important;
    font-family: var(--font) !important;
}
.eerp-cal-day.empty   { background: transparent !important; }
.eerp-cal-day.present { background: #d1fae5 !important; color: #065f46 !important; border: 1px solid #a7f3d0 !important; }
.eerp-cal-day.absent  { background: #fee2e2 !important; color: #991b1b !important; border: 1px solid #fca5a5 !important; }
.eerp-cal-day.late    { background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fde68a !important; }
.eerp-cal-day.leave   { background: #ede9fe !important; color: #5b21b6 !important; border: 1px solid #c4b5fd !important; }
.eerp-cal-day.today   { outline: 2px solid var(--p) !important; outline-offset: 1px !important; font-weight: 800 !important; }
.eerp-cal-day.weekend { opacity: .45 !important; }
.eerp-cal-day-label   { font-size: 10px !important; color: var(--subtle) !important; text-align: center !important; font-family: var(--font) !important; }

/* ================================================================
   SALARY / PAYSLIP
   ================================================================ */
.eerp-salary-history { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.eerp-payslip { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--rad) !important; overflow: hidden !important; box-shadow: var(--sh-sm) !important; font-family: var(--font) !important; }
.eerp-payslip:hover { box-shadow: var(--sh) !important; }
.eerp-payslip-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 13px 18px !important; background: #f8fafc !important;
    border-bottom: 1px solid var(--border) !important; flex-wrap: wrap !important; gap: 10px !important;
}
.eerp-payslip-month { font-size: 13.5px !important; font-weight: 700 !important; color: var(--text) !important; }
.eerp-payslip-body  { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)) !important; }
.eerp-payslip-row   { padding: 12px 16px !important; border-right: 1px solid #f3f4f6 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
.eerp-payslip-row:last-child { border-right: none !important; }
.eerp-payslip-row label { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .5px !important; color: var(--subtle) !important; }
.eerp-payslip-row span  { font-size: 14px !important; font-weight: 700 !important; color: var(--text) !important; font-variant-numeric: tabular-nums !important; }
.eerp-payslip-row.net span       { color: #059669 !important; font-size: 17px !important; }
.eerp-payslip-row.deduction span { color: #dc2626 !important; }
.eerp-upl-tag {
    display: inline-block !important; background: #fef3c7 !important; color: #92400e !important;
    border: 1px solid #fde68a !important; border-radius: 5px !important;
    font-size: 10px !important; font-weight: 700 !important; padding: 1px 6px !important;
    margin: 2px 2px 0 0 !important; white-space: nowrap !important; font-family: var(--font) !important;
}

/* ================================================================
   LEAVE BALANCE
   ================================================================ */
.eerp-leave-balance-strip {
    display: flex !important; gap: 12px !important; flex-wrap: wrap !important; margin-bottom: 18px !important;
}
.eerp-lb-card {
    flex: 1 !important; min-width: 170px !important; background: #fff !important;
    border-radius: var(--rad) !important; border: 1px solid var(--border) !important;
    padding: 14px !important; display: flex !important; align-items: center !important;
    gap: 11px !important; box-shadow: var(--sh-sm) !important;
    transition: transform var(--tr), box-shadow var(--tr) !important; font-family: var(--font) !important;
}
.eerp-lb-card:hover { transform: translateY(-2px) !important; box-shadow: var(--sh) !important; }
.eerp-lb-icon {
    width: 38px !important; height: 38px !important; border-radius: 10px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 16px !important; flex-shrink: 0 !important;
}
.eerp-lb-pl     .eerp-lb-icon { background: #d1fae5 !important; color: #059669 !important; }
.eerp-lb-upl    .eerp-lb-icon { background: #fef3c7 !important; color: #d97706 !important; }
.eerp-lb-casual .eerp-lb-icon { background: #dbeafe !important; color: #1d4ed8 !important; }
.eerp-lb-info   { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.eerp-lb-label  { font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .5px !important; color: var(--subtle) !important; }
.eerp-lb-bar-wrap { height: 5px !important; background: #f1f5f9 !important; border-radius: 6px !important; overflow: hidden !important; }
.eerp-lb-bar    { height: 100% !important; border-radius: 6px !important; transition: width .5s ease !important; }
.eerp-lb-pl  .eerp-lb-bar { background: linear-gradient(90deg,#34d399,#059669) !important; }
.eerp-lb-upl .eerp-lb-bar { background: linear-gradient(90deg,#fbbf24,#d97706) !important; }
.eerp-lb-casual .eerp-lb-bar { background: linear-gradient(90deg,#60a5fa,#1d4ed8) !important; }
.eerp-lb-count  { font-size: 12px !important; color: #374151 !important; font-weight: 500 !important; }
.eerp-lb-count strong { font-size: 14px !important; font-weight: 800 !important; color: var(--text) !important; }
.eerp-lb-note   { font-size: 10px !important; color: var(--subtle) !important; }

/* Team balance grid */
.eerp-team-balance-grid { display: grid !important; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)) !important; gap: 12px !important; margin-bottom: 8px !important; }
.eerp-tb-card { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--rad) !important; padding: 14px !important; box-shadow: var(--sh-sm) !important; transition: transform var(--tr) !important; font-family: var(--font) !important; }
.eerp-tb-card:hover { transform: translateY(-2px) !important; }
.eerp-tb-header { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 10px !important; }
.eerp-tb-av {
    width: 34px !important; height: 34px !important; border-radius: 50% !important;
    background: linear-gradient(135deg, var(--p), #7c3aed) !important; color: #fff !important;
    font-size: 12px !important; font-weight: 800 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
}
.eerp-tb-meta { flex: 1 !important; min-width: 0 !important; }
.eerp-tb-meta strong { font-size: 12.5px !important; font-weight: 700 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.eerp-tb-meta small  { font-size: 10px !important; color: var(--subtle) !important; }
.eerp-tb-row         { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 5px !important; }
.eerp-tb-lbl         { font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; color: var(--subtle) !important; width: 26px !important; flex-shrink: 0 !important; }
.eerp-tb-bar-wrap    { flex: 1 !important; height: 5px !important; background: #f1f5f9 !important; border-radius: 6px !important; overflow: hidden !important; }
.eerp-tb-bar         { height: 100% !important; border-radius: 6px !important; transition: width .5s ease !important; }
.eerp-tb-bar-pl      { background: linear-gradient(90deg,#34d399,#059669) !important; }
.eerp-tb-bar-upl     { background: linear-gradient(90deg,#fbbf24,#d97706) !important; }
.eerp-tb-stat        { font-size: 11.5px !important; font-weight: 700 !important; color: var(--text) !important; min-width: 32px !important; text-align: right !important; }
.eerp-tb-stat small  { font-size: 10px !important; font-weight: 500 !important; color: var(--subtle) !important; }

/* Leave hints */
.eerp-pl-balance-hint { margin-bottom: 4px !important; }
.eerp-hint-ok   { display: block !important; padding: 7px 12px !important; border-radius: 7px !important; font-size: 12.5px !important; color: #065f46 !important; background: #f0fdf4 !important; border: 1px solid #a7f3d0 !important; font-family: var(--font) !important; }
.eerp-hint-warn { display: block !important; padding: 7px 12px !important; border-radius: 7px !important; font-size: 12.5px !important; color: #92400e !important; background: #fffbeb !important; border: 1px solid #fde68a !important; font-family: var(--font) !important; }

/* ================================================================
   CHARTS
   ================================================================ */
.eerp-chart-wrap { padding: 14px !important; height: 260px !important; position: relative !important; }

/* ================================================================
   ALERT / MISC
   ================================================================ */
.eerp-alert { padding: 11px 14px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; border: 1px solid transparent !important; font-family: var(--font) !important; }
.eerp-alert-error   { background: #fee2e2 !important; color: #991b1b !important; border-color: #fca5a5 !important; }
.eerp-alert-success { background: #d1fae5 !important; color: #065f46 !important; border-color: #6ee7b7 !important; }

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.eerp-app .eerp-login-wrap { display: flex !important; width: 100% !important; height: 100% !important; overflow: hidden !important; }
.eerp-app .eerp-login-left {
    width: 42% !important;
    background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 40%, #1a56db 100%) !important;
    display: flex !important; flex-direction: column !important;
    padding: 44px 38px !important; position: relative !important; overflow: hidden !important; flex-shrink: 0 !important;
}
.eerp-app .eerp-login-left::before {
    content: '' !important; position: absolute !important;
    width: 360px !important; height: 360px !important; border-radius: 50% !important;
    background: rgba(255,255,255,.04) !important; top: -100px !important; right: -100px !important;
}
.eerp-app .eerp-login-left-inner { flex: 1 !important; position: relative !important; z-index: 1 !important; }
.eerp-app .eerp-login-left-logo  { height: 48px !important; width: auto !important; object-fit: contain !important; border-radius: 10px !important; margin-bottom: 28px !important; background: rgba(255,255,255,.1) !important; padding: 5px !important; }
.eerp-app .eerp-login-left-initials {
    width: 62px !important; height: 62px !important; border-radius: 16px !important;
    background: rgba(255,255,255,.15) !important; border: 2px solid rgba(255,255,255,.28) !important;
    color: #fff !important; font-size: 22px !important; font-weight: 800 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 24px !important;
}
.eerp-app .eerp-login-left-initials-sm { width: 44px !important; height: 44px !important; font-size: 17px !important; margin: 0 !important; border-radius: 11px !important; }
.eerp-app .eerp-login-left-name    { font-size: 26px !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -.02em !important; margin-bottom: 5px !important; }
.eerp-app .eerp-login-left-tagline { font-size: 13.5px !important; color: rgba(255,255,255,.62) !important; margin-bottom: 36px !important; }
.eerp-app .eerp-login-features     { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.eerp-app .eerp-login-features li  { display: flex !important; align-items: center !important; gap: 11px !important; color: rgba(255,255,255,.82) !important; font-size: 13.5px !important; font-weight: 500 !important; }
.eerp-app .eerp-login-features li i{ width: 32px !important; height: 32px !important; background: rgba(255,255,255,.1) !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; color: #93c5fd !important; flex-shrink: 0 !important; }
.eerp-app .eerp-login-left-footer  { position: relative !important; z-index: 1 !important; border-top: 1px solid rgba(255,255,255,.1) !important; padding-top: 18px !important; }
.eerp-app .eerp-login-site-link    { display: inline-flex !important; align-items: center !important; gap: 7px !important; color: rgba(255,255,255,.55) !important; font-size: 12px !important; font-weight: 500 !important; transition: color var(--tr) !important; }
.eerp-app .eerp-login-site-link:hover { color: rgba(255,255,255,.85) !important; }

.eerp-app .eerp-login-right {
    flex: 1 !important; background: #fff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 40px !important; overflow-y: auto !important;
}
.eerp-app .eerp-login-card { width: 100% !important; max-width: 390px !important; }
.eerp-app .eerp-login-mobile-brand { display: none !important; align-items: center !important; gap: 12px !important; margin-bottom: 26px !important; }
.eerp-app .eerp-login-mobile-logo  { height: 38px !important; border-radius: 9px !important; }
.eerp-app .eerp-login-mobile-name  { font-size: 19px !important; font-weight: 800 !important; color: var(--text) !important; }
.eerp-app .eerp-login-card-header  { margin-bottom: 26px !important; }
.eerp-app .eerp-login-card-header h2 { font-size: 24px !important; font-weight: 800 !important; color: var(--text) !important; letter-spacing: -.02em !important; margin-bottom: 5px !important; }
.eerp-app .eerp-login-card-header p  { font-size: 13.5px !important; color: var(--muted) !important; }
.eerp-app .eerp-login-form  { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.eerp-app .eerp-login-row   { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
.eerp-app .eerp-checkbox-label { display: flex !important; align-items: center !important; gap: 7px !important; font-size: 13px !important; color: var(--muted) !important; cursor: pointer !important; }
.eerp-app .eerp-checkbox-label input { width: 14px !important; height: 14px !important; cursor: pointer !important; accent-color: var(--p) !important; }
.eerp-app .eerp-link { font-size: 13px !important; color: var(--p) !important; font-weight: 600 !important; }
.eerp-app .eerp-link:hover { color: var(--p-d) !important; }
.eerp-app .eerp-login-footer { margin-top: 26px !important; padding-top: 18px !important; border-top: 1px solid var(--border) !important; text-align: center !important; }
.eerp-app .eerp-login-footer p { font-size: 12px !important; color: var(--subtle) !important; margin-bottom: 7px !important; }
.eerp-app .eerp-login-footer-link { font-size: 12px !important; color: var(--p) !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; }

/* ================================================================
   PROFILE PICTURE UPLOAD
   ================================================================ */

/* Wrapper is the clickable avatar zone */
.eerp-avatar-upload-wrap {
    position: relative !important;
    display: inline-block !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    border-radius: 18px !important;
    line-height: 0 !important;
}
/* The hover overlay — camera icon + "Change Photo" */
.eerp-avatar-upload-overlay {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: rgba(15,23,42,.58) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: var(--font) !important;
    opacity: 0 !important;
    transition: opacity var(--tr) !important;
    pointer-events: none !important;
}
.eerp-avatar-upload-overlay i {
    font-size: 20px !important;
    color: #fff !important;
    opacity: .95 !important;
}
.eerp-avatar-upload-wrap:hover .eerp-avatar-upload-overlay {
    opacity: 1 !important;
}
/* Profile card avatar is larger — keep the radius correct */
.eerp-profile-card .eerp-profile-avatar {
    border-radius: 18px !important;
}
.eerp-profile-card .eerp-avatar-upload-wrap {
    border-radius: 18px !important;
}
/* Spin when uploading */
.eerp-avatar-upload-overlay .fa-spin {
    font-size: 22px !important;
}

/* Topbar + welcome avatars — keep line-height normal */
.eerp-user-pill .eerp-avatar,
.eerp-welcome-avatar {
    line-height: 1 !important;
    overflow: hidden !important;
}
/* Make img inside any avatar div fill it correctly */
.eerp-avatar img,
.eerp-welcome-avatar img,
.eerp-profile-avatar img,
.eerp-team-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    display: block !important;
}

/* ================================================================
   POWERED BY EDUNOLOGY BRANDING
   ================================================================ */

/* Sidebar "ERP powered by Edunology" strip */
.eerp-powered-by {
    margin-top: 10px !important;
    padding: 8px 10px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    text-align: center !important;
    font-size: 10.5px !important;
    font-family: var(--font) !important;
    color: rgba(255,255,255,.32) !important;
    line-height: 1.5 !important;
}
.eerp-powered-by span {
    display: block !important;
    letter-spacing: .3px !important;
}
.eerp-powered-by a {
    color: rgba(255,255,255,.55) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: .2px !important;
    transition: color var(--tr) !important;
}
.eerp-powered-by a:hover { color: #93c5fd !important; }

/* Login page left panel "ERP powered by" */
.eerp-login-powered-by {
    margin-top: 10px !important;
    font-size: 11px !important;
    font-family: var(--font) !important;
    color: rgba(255,255,255,.38) !important;
    line-height: 1.6 !important;
}
.eerp-login-powered-by a {
    color: rgba(255,255,255,.58) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color var(--tr) !important;
}
.eerp-login-powered-by a:hover { color: #93c5fd !important; }

/* Login page right panel "ERP powered by" */
.eerp-login-powered-by-right {
    margin-top: 10px !important;
    font-size: 11.5px !important;
    font-family: var(--font) !important;
    color: var(--subtle) !important;
    text-align: center !important;
}
.eerp-login-powered-by-right a {
    color: var(--p) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color var(--tr) !important;
}
.eerp-login-powered-by-right a:hover { color: var(--p-d) !important; text-decoration: underline !important; }

/* ================================================================
   MOBILE BOTTOM NAV
   ================================================================ */
.eerp-app .eerp-bottom-nav {
    display: none !important; position: fixed !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important; height: 60px !important;
    background: #fff !important; border-top: 1px solid var(--border) !important;
    z-index: 300 !important; align-items: center !important; justify-content: space-around !important;
    box-shadow: 0 -4px 14px rgba(0,0,0,.06) !important;
}
.eerp-app .eerp-bnav-item {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    gap: 3px !important; padding: 5px 14px !important; border: none !important;
    background: none !important; color: var(--subtle) !important; font-size: 9px !important;
    font-weight: 700 !important; font-family: var(--font) !important; cursor: pointer !important;
    transition: color var(--tr) !important; border-radius: 9px !important;
    min-width: 55px !important; text-transform: uppercase !important; letter-spacing: .3px !important;
}
.eerp-app .eerp-bnav-item i { font-size: 17px !important; }
.eerp-app .eerp-bnav-item.active { color: var(--p) !important; }
.eerp-app .eerp-bnav-item:hover  { color: var(--p) !important; }

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    .eerp-app .eerp-menu-toggle { display: flex !important; }
    .eerp-app .eerp-sidebar {
        position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
        transform: translateX(-100%) !important; z-index: 250 !important; box-shadow: var(--sh-lg) !important;
    }
    .eerp-app .eerp-sidebar.mobile-open { transform: translateX(0) !important; }
    .eerp-app .eerp-bottom-nav   { display: flex !important; }
    .eerp-app .eerp-content      { padding: 14px 14px 76px !important; }
    .eerp-two-col { grid-template-columns: 1fr !important; }
    .eerp-kpi-row { grid-template-columns: repeat(2,1fr) !important; }
    .eerp-app .eerp-login-left   { display: none !important; }
    .eerp-app .eerp-login-right  { padding: 26px 20px !important; }
    .eerp-app .eerp-login-mobile-brand { display: flex !important; }
    .eerp-app .eerp-welcome-banner { padding: 14px 16px !important; }
    .eerp-app .eerp-big-clock { font-size: 18px !important; }
    .eerp-app .eerp-welcome-clock { display: none !important; }
    .eerp-form-grid-2 { grid-template-columns: 1fr !important; }
    .eerp-kpi-card { padding: 12px !important; }
}
@media (max-width: 480px) {
    .eerp-app .eerp-stats-row, .eerp-admin-stats-row { grid-template-columns: repeat(2,1fr) !important; }
    .eerp-app .eerp-cards-row   { grid-template-columns: 1fr !important; }
    .eerp-employees-grid        { grid-template-columns: 1fr !important; }
    .eerp-kpi-row               { grid-template-columns: 1fr 1fr !important; }
}
@media print {
    .eerp-app .eerp-sidebar, .eerp-app .eerp-topbar, .eerp-app .eerp-bottom-nav { display: none !important; }
    #eerp-app { position: static !important; overflow: visible !important; height: auto !important; }
    .eerp-app .eerp-content { overflow: visible !important; padding: 0 !important; }
    .eerp-app .eerp-tab-content { display: block !important; }
}