/* EduJunior CRM v2 — Full CSS */
:root {
  --accent:       #1D9E75;
  --accent-dark:  #0F6E56;
  --accent-light: #E1F5EE;
  --sidebar-bg:   #0D1117;
  --sidebar-w:    240px;
  --bg1:          #ffffff;
  --bg2:          #f8f9fa;
  --bg3:          #f1f3f5;
  --border:       #e9ecef;
  --border2:      #dee2e6;
  --text1:        #1a1d23;
  --text2:        #495057;
  --muted:        #868e96;
  --topbar-h:     60px;
  --teal-100:#E1F5EE; --teal-700:#0F6E56;
  --blue-100:#E6F1FB; --blue-700:#185FA5;
  --green-100:#EAF3DE;--green-700:#3B6D11;
  --red-100:#FCEBEB;  --red-700:#A32D2D;
  --amber-100:#FAEEDA;--amber-700:#854F0B;
  --purple-100:#EEEDFE;--purple-700:#534AB7;
  --orange-100:#FEF3EC;--orange-700:#8B3A0F;
}

*{box-sizing:border-box;margin:0;padding:0}
body.ej-crm-page{background:var(--bg2);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text1);font-size:14px;line-height:1.5}

/* LAYOUT */
.ej-app{display:flex;min-height:100vh}

/* SIDEBAR */
.ej-sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:transform 0.25s ease}
.ej-sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,0.06)}
.ej-logo-mark{width:34px;height:34px;background:var(--accent);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.ej-logo-text{font-size:17px;font-weight:700;color:#fff}
.ej-logo-main{color:#fff}
.ej-logo-accent{color:var(--accent)}

/* NAV */
.ej-nav{flex:1;padding:12px 10px;overflow-y:auto}
.ej-nav-section{font-size:10px;font-weight:600;color:rgba(255,255,255,0.3);letter-spacing:0.08em;text-transform:uppercase;padding:12px 8px 6px}
.ej-nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:none;border-radius:8px;font-size:13px;color:rgba(255,255,255,0.6);cursor:pointer;text-align:left;transition:all 0.15s}
.ej-nav-item svg{flex-shrink:0;opacity:0.7;transition:opacity 0.15s}
.ej-nav-item:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9)}
.ej-nav-item:hover svg{opacity:1}
.ej-nav-item.active{background:rgba(29,158,117,0.18);color:#4ade9e}
.ej-nav-item.active svg{opacity:1;color:#4ade9e}

/* SIDEBAR USER */
.ej-sidebar-user{padding:14px 14px 18px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;gap:10px}
.ej-sidebar-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ej-sidebar-info{flex:1;min-width:0}
.ej-sidebar-name{font-size:13px;font-weight:500;color:rgba(255,255,255,0.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ej-sidebar-role{font-size:11px;color:rgba(255,255,255,0.4)}
.ej-logout-btn{color:rgba(255,255,255,0.4);transition:color 0.15s;text-decoration:none;flex-shrink:0}
.ej-logout-btn:hover{color:#ef4444}

/* MAIN */
.ej-main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}

/* TOPBAR */
.ej-topbar{height:var(--topbar-h);background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:16px;position:sticky;top:0;z-index:50}
.ej-menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--text2);padding:4px}
.ej-topbar-title{font-size:16px;font-weight:600;color:var(--text1);flex:1}
.ej-topbar-right{display:flex;align-items:center;gap:10px}
.ej-notif{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:600;cursor:default}
.ej-notif-red{background:var(--red-100);color:var(--red-700)}
.ej-notif-amber{background:var(--amber-100);color:var(--amber-700)}

/* BODY */
.ej-body{padding:24px;flex:1}
.ej-view{display:none}
.ej-view.active{display:block}
.ej-view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.ej-page-title{font-size:20px;font-weight:600;color:var(--text1)}

/* STAT CARDS */
.ej-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.ej-stat-card{background:var(--bg1);border-radius:14px;padding:18px 16px;border:1px solid var(--border);display:flex;flex-direction:column;gap:6px;transition:transform 0.15s,box-shadow 0.15s}
.ej-stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.07)}
.ej-stat-icon{display:flex;margin-bottom:4px}
.ej-stat-val{font-size:26px;font-weight:700;line-height:1}
.ej-stat-label{font-size:12px;color:var(--muted);font-weight:500}
.ej-stat-teal .ej-stat-icon,.ej-stat-teal .ej-stat-val{color:var(--teal-700)}.ej-stat-teal{border-top:3px solid var(--accent)}
.ej-stat-blue .ej-stat-icon,.ej-stat-blue .ej-stat-val{color:var(--blue-700)}.ej-stat-blue{border-top:3px solid #378ADD}
.ej-stat-green .ej-stat-icon,.ej-stat-green .ej-stat-val{color:var(--green-700)}.ej-stat-green{border-top:3px solid #639922}
.ej-stat-red .ej-stat-icon,.ej-stat-red .ej-stat-val{color:var(--red-700)}.ej-stat-red{border-top:3px solid #E24B4A}
.ej-stat-amber .ej-stat-icon,.ej-stat-amber .ej-stat-val{color:var(--amber-700)}.ej-stat-amber{border-top:3px solid #EF9F27}
.ej-stat-purple .ej-stat-icon,.ej-stat-purple .ej-stat-val{color:var(--purple-700)}.ej-stat-purple{border-top:3px solid #7F77DD}
.ej-stat-orange .ej-stat-icon,.ej-stat-orange .ej-stat-val{color:var(--orange-700)}.ej-stat-orange{border-top:3px solid #E87722}

/* CARD */
.ej-card{background:var(--bg1);border-radius:14px;border:1px solid var(--border);padding:18px;margin-bottom:16px}
.ej-card-full{padding:0;overflow:hidden}
.ej-card-full .ej-table-tools{padding:14px 18px}
.ej-card-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text1);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.ej-card-head svg{color:var(--accent)}
.ej-card-link{margin-left:auto;font-size:12px;color:var(--accent);background:none;border:none;cursor:pointer;font-weight:500;text-decoration:none}
.ej-card-link:hover{text-decoration:underline}

/* LIST ROWS */
.ej-list-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.ej-list-row:last-child{border-bottom:none}
.ej-list-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-light);color:var(--accent-dark);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ej-list-info{flex:1;min-width:0}
.ej-list-name{font-size:13px;font-weight:500;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ej-list-sub{font-size:12px;color:var(--muted);margin-top:1px}

/* TABLE */
.ej-table-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ej-table-wrap{overflow-x:auto}
.ej-table{width:100%;border-collapse:collapse;font-size:13px}
.ej-table thead{background:var(--bg2)}
.ej-table th{text-align:left;padding:11px 16px;font-size:11px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--border);letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap}
.ej-table td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}
.ej-table tbody tr:last-child td{border-bottom:none}
.ej-table tbody tr:hover td{background:var(--bg2)}
.ej-empty{text-align:center;color:var(--muted);padding:32px!important;font-size:13px}
.ej-user-cell{display:flex;align-items:center;gap:10px}
.ej-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-light);color:var(--accent-dark);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ej-av-blue{background:var(--blue-100);color:var(--blue-700)}
.ej-av-purple{background:var(--purple-100);color:var(--purple-700)}
.ej-av-amber{background:var(--amber-100);color:var(--amber-700)}
.ej-av-teal{background:var(--teal-100);color:var(--teal-700)}
.ej-cell-name{font-size:13px;font-weight:500;color:var(--text1)}
.ej-cell-sub{font-size:11px;color:var(--muted);margin-top:1px}
.ej-role-tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;background:var(--bg3);color:var(--text2)}
.ej-salary-val{color:var(--teal-700);font-size:14px}
.ej-date{font-weight:500;color:var(--text1)}
.ej-time{color:var(--muted);font-size:12px;margin-left:4px}
.ej-na{color:var(--muted)}

/* SEARCH */
.ej-search-wrap{position:relative;flex:1;min-width:180px;max-width:300px}
.ej-search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.ej-search{width:100%;padding:8px 10px 8px 32px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--bg2);color:var(--text1);outline:none;transition:border 0.2s}
.ej-search:focus{border-color:var(--accent);background:var(--bg1)}
.ej-filter-select{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--bg2);color:var(--text2);cursor:pointer;outline:none}

/* BADGES */
.ej-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.ej-green{background:var(--teal-100);color:var(--teal-700)}
.ej-blue{background:var(--blue-100);color:var(--blue-700)}
.ej-red{background:var(--red-100);color:var(--red-700)}
.ej-amber{background:var(--amber-100);color:var(--amber-700)}
.ej-purple{background:var(--purple-100);color:var(--purple-700)}
.ej-gray{background:var(--bg3);color:var(--muted)}

/* BUTTONS */
.ej-btn-primary{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:var(--accent);color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:background 0.15s;text-decoration:none}
.ej-btn-primary:hover{background:var(--accent-dark)}
.ej-btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s}
.ej-btn-ghost:hover{background:var(--bg3)}
.ej-act-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--border);border-radius:7px;cursor:pointer;color:var(--text2);transition:all 0.15s;padding:0}
.ej-act-btn:hover{background:var(--accent-light);color:var(--accent-dark);border-color:var(--accent)}
.ej-act-del:hover{background:var(--red-100);color:var(--red-700);border-color:#fca5a5}
.ej-wa-btn:hover{background:#dcfce7;color:#15803d;border-color:#86efac}
.ej-actions{display:flex;gap:6px;align-items:center}
.ej-wa-act{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:#dcfce7;color:#15803d;border:1px solid #86efac;border-radius:7px;font-size:12px;font-weight:500;text-decoration:none;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.ej-wa-act:hover{background:#bbf7d0}
.ej-wa-urgent{background:var(--red-100);color:var(--red-700);border-color:#fca5a5}
.ej-wa-urgent:hover{background:#fee2e2}
.ej-link-btn{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-size:12px;font-weight:500;text-decoration:none}
.ej-link-btn:hover{text-decoration:underline}
.ej-inline-select{padding:4px 8px;border:1px solid var(--border);border-radius:6px;font-size:12px;background:var(--bg2);color:var(--text2);cursor:pointer;outline:none}

/* MODAL */
.ej-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;align-items:center;justify-content:center;padding:16px}
.ej-overlay.open{display:flex}
.ej-modal{background:var(--bg1);border-radius:16px;width:500px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,0.18)}
.ej-modal-wide{width:600px}
.ej-modal-head{display:flex;align-items:center;gap:10px;padding:18px 22px 16px;border-bottom:1px solid var(--border)}
.ej-modal-head h2{font-size:16px;font-weight:600;flex:1;display:flex;align-items:center;gap:8px;color:var(--text1)}
.ej-modal-head h2 svg{color:var(--accent)}
.ej-modal-close{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all 0.15s}
.ej-modal-close:hover{background:var(--red-100);color:var(--red-700);border-color:#fca5a5}
.ej-modal-body{padding:20px 22px;overflow-y:auto;flex:1}
.ej-modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.ej-field{margin-bottom:16px}
.ej-field label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;letter-spacing:0.02em}
.ej-field input,.ej-field select,.ej-field textarea{width:100%;padding:9px 12px;border:1.5px solid var(--border2);border-radius:9px;font-size:13px;color:var(--text1);background:var(--bg1);outline:none;transition:border 0.2s;font-family:inherit}
.ej-field input:focus,.ej-field select:focus,.ej-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,158,117,0.08)}
.ej-field textarea{height:76px;resize:none}
.ej-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ATTENDANCE MODAL */
.ej-att-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.ej-att-key{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}
.ej-att-present{background:var(--teal-100);color:var(--teal-700)}
.ej-att-absent{background:var(--red-100);color:var(--red-700)}
.ej-att-leave{background:var(--amber-100);color:var(--amber-700)}
.ej-att-hint{font-size:12px;color:var(--muted);margin-left:auto}
.ej-att-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.ej-att-day{width:44px;height:48px;border-radius:10px;border:1.5px solid var(--border2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all 0.12s;background:var(--bg2)}
.ej-att-day:hover{border-color:var(--accent);background:var(--accent-light)}
.ej-att-day .dn{font-size:14px;font-weight:600;color:var(--text2)}
.ej-att-day .dl{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:0.05em}
.ej-att-day.p{background:var(--teal-100);border-color:var(--accent)}.ej-att-day.p .dn,.ej-att-day.p .dl{color:var(--teal-700)}
.ej-att-day.a{background:var(--red-100);border-color:#fca5a5}.ej-att-day.a .dn,.ej-att-day.a .dl{color:var(--red-700)}
.ej-att-day.l{background:var(--amber-100);border-color:#fcd34d}.ej-att-day.l .dn,.ej-att-day.l .dl{color:var(--amber-700)}
.ej-att-summary{padding:12px 16px;background:var(--bg2);border-radius:10px;font-size:13px;color:var(--text2);display:flex;gap:18px;flex-wrap:wrap}
.ej-att-summary strong{color:var(--text1)}

/* MONTH GRID (teacher/intern view) */
.ej-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:8px 0 12px}
.ej-month-day{border-radius:9px;border:1.5px solid var(--border2);padding:8px 4px;text-align:center;background:var(--bg2);cursor:pointer;transition:all 0.12s;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ej-month-day:hover:not(.ej-day-readonly){border-color:var(--accent);background:var(--accent-light)}
.ej-day-readonly{cursor:default}
.ej-day-num{font-size:13px;font-weight:600;color:var(--text2)}
.ej-day-label{font-size:10px;font-weight:700;color:var(--muted)}
.ej-day-p{background:var(--teal-100);border-color:var(--accent)}.ej-day-p .ej-day-num,.ej-day-p .ej-day-label{color:var(--teal-700)}
.ej-day-a{background:var(--red-100);border-color:#fca5a5}.ej-day-a .ej-day-num,.ej-day-a .ej-day-label{color:var(--red-700)}
.ej-day-l{background:var(--amber-100);border-color:#fcd34d}.ej-day-l .ej-day-num,.ej-day-l .ej-day-label{color:var(--amber-700)}
.ej-legend-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ej-leg{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600}
.ej-leg-l{background:var(--amber-100);color:var(--amber-700)}

/* PROGRESS */
.ej-progress-wrap{height:6px;background:var(--bg3);border-radius:3px;margin:10px 0 4px;overflow:hidden}
.ej-progress-bar{height:6px;background:linear-gradient(90deg,var(--accent),var(--accent-dark));border-radius:3px;transition:width 0.6s ease}
.ej-progress-label{font-size:12px;color:var(--muted);margin-bottom:14px}

/* WELCOME BANNER */
.ej-welcome-banner{background:var(--sidebar-bg);border-radius:16px;padding:24px 28px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;color:#fff;overflow:hidden;position:relative}
.ej-welcome-banner svg{color:rgba(255,255,255,0.12);flex-shrink:0}
.ej-welcome-name{font-size:22px;font-weight:700;margin-bottom:4px}
.ej-welcome-sub{font-size:13px;color:rgba(255,255,255,0.5)}

/* TWO COL */
.ej-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* SALARY TABLE */
.ej-salary-table{display:flex;flex-direction:column;gap:0}
.ej-sal-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text2)}
.ej-sal-row:last-child{border-bottom:none}
.ej-sal-row strong{color:var(--text1)}
.ej-sal-total{font-size:16px;font-weight:600;padding-top:14px;margin-top:4px}
.ej-sal-total strong{color:var(--teal-700);font-size:18px}
.ej-text-green{color:var(--green-700)}
.ej-text-red{color:var(--red-700)}
.ej-text-amber{color:var(--amber-700)}

/* RESPONSIVE */
@media(max-width:768px){
  .ej-sidebar{transform:translateX(-100%)}
  .ej-sidebar.open{transform:translateX(0)}
  .ej-main{margin-left:0}
  .ej-menu-toggle{display:flex}
  .ej-two-col{grid-template-columns:1fr}
  .ej-row2{grid-template-columns:1fr}
  .ej-stats-grid{grid-template-columns:repeat(2,1fr)}
  .ej-month-grid{grid-template-columns:repeat(7,1fr)}
  .ej-body{padding:14px}
}
@media(max-width:480px){
  .ej-stats-grid{grid-template-columns:1fr 1fr}
  .ej-month-grid{grid-template-columns:repeat(5,1fr)}
}

/* TOAST */
.ej-toast{position:fixed;bottom:24px;right:24px;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:500;z-index:9999;opacity:0;transform:translateY(8px);transition:all 0.25s;pointer-events:none}
.ej-toast.show{opacity:1;transform:translateY(0)}
.ej-toast-success{background:#052e16;color:#4ade80;border:1px solid #166534}
.ej-toast-error{background:#450a0a;color:#fca5a5;border:1px solid #991b1b}