/* ═══════════════════════════════════════════════════════════
   APLUS CRM — COMPREHENSIVE CUSTOM CSS
   Covers: Layout, Cards, Class Items, Regular/Extra badges,
           Tables, Modals, Attendance, Sidebar, Responsive
═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  --clr-primary:    #5B4AE8;
  --clr-primary-lt: #eef0ff;
  --clr-primary-bd: #c4bcf8;
  --clr-success:    #0EA574;
  --clr-success-lt: #edfcf4;
  --clr-success-bd: #A7F3D0;
  --clr-danger:     #E53E3E;
  --clr-danger-lt:  #fef2f2;
  --clr-danger-bd:  #FBBFBF;
  --clr-amber:      #D97706;
  --clr-amber-lt:   #fffbeb;
  --clr-amber-bd:   #FDE68A;
  --clr-extra:      #F59E0B;
  --clr-extra-lt:   #FEF3C7;
  --clr-extra-dk:   #B45309;
  --clr-muted:      #9B99BB;
  --clr-text:       #1C1835;
  --clr-border:     #f0eeff;
  --clr-border-sm:  #E8E4F2;
  --radius-card:    16px;
  --radius-pill:    20px;
  --radius-btn:     9px;
  --shadow-card:    0 2px 16px rgba(91,74,232,.06);
}

/* ── Layout media query fix ─────────────────────────────── */
/* Sidebar width is owned by --app-menubar-tabs (sidebar-redesign.css).
   These must follow the variable, not a stale fixed width, otherwise the
   main column desyncs from the 240px sidebar and overflows. */
@media (min-width: 1200px) and (max-width: 1460px) {
  .app-menubar-tabs .app-tab-content { left: 0; }
  :has(.app-menubar-tabs) .app-header { padding-left: var(--app-menubar-tabs); }
  :has(.app-menubar-tabs) .app-wrapper { margin-left: var(--app-menubar-tabs); }
  [data-app-sidebar=mini] :has(.app-menubar-tabs) .app-header { padding-left: var(--app-menubar-tabs); }
  [data-app-sidebar=mini] :has(.app-menubar-tabs) .app-toggler::after { background-color: transparent; }
}

/* ── Global card reset ───────────────────────────────────── */
.card {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--clr-border-sm);
}
.card:hover {
  transform: translateY(-1px);
  transition: transform .18s, box-shadow .18s;
  box-shadow: var(--shadow-card);
}
.card h3 { font-size: 22px; }
.card .small { font-size: 12px; letter-spacing: .05em; }
.card-header { padding: 16px 20px; }
.btn { border-radius: var(--radius-pill); }
.badge { font-size: 12px; line-height: 1.5 !important; block-size: 31px !important; }

/* ── Sidebar nav ─────────────────────────────────────────── */
.app-menubar-tabs .app-tab-content .app-navbar { width: 100%; height: auto !important; }
.app-navbar { max-height: calc(100vh - 120px) !important; }

/* ══════════════════════════════════════════════════════════
   CLASS ITEMS — universal treatment (index.php, teacher, student)
══════════════════════════════════════════════════════════ */

/* Base class item */
.class-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--clr-border);
  gap: 10px;
  transition: background .15s;
  position: relative;
}
.class-item:last-child { border-bottom: none; }
.class-item:hover { background: #fafafe; }

/* ── REGULAR class item — purple left accent ── */
.class-item-regular {
  border-left: 4px solid var(--clr-primary) !important;
  background: #ffffff;
}
.class-item-regular:hover { background: #f5f3ff !important; }

/* ── EXTRA class item — amber left accent + warm tint ── */
.class-item-extra {
  border-left: 4px solid var(--clr-extra) !important;
  background: #fffcf3;
}
.class-item-extra:hover { background: #fff8e1 !important; }

/* Teacher home class row */
.cls-row-t {
  display: flex; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--clr-border);
  gap: 12px; transition: background .15s; position: relative;
}
.cls-row-t:hover { background: #fafafe; }
.cls-row-t:last-child { border-bottom: none; }
.cls-row-t-regular {
  border-left: 4px solid var(--clr-primary) !important;
  background: #ffffff;
}
.cls-row-t-regular:hover { background: #f5f3ff !important; }
.cls-row-t-extra {
  border-left: 4px solid var(--clr-extra) !important;
  background: #fffcf3;
}
.cls-row-t-extra:hover { background: #fff8e1 !important; }

/* Student home class row */
.sh-cls-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--clr-border);
  gap: 10px; transition: background .15s; position: relative;
}
.sh-cls-row:last-child { border-bottom: none; }
.sh-cls-row:hover { background: #fafafe; }
.sh-cls-row-regular {
  border-left: 4px solid var(--clr-primary) !important;
  background: #ffffff;
}
.sh-cls-row-regular:hover { background: #f5f3ff !important; }
.sh-cls-row-extra {
  border-left: 4px solid var(--clr-extra) !important;
  background: #fffcf3;
}
.sh-cls-row-extra:hover { background: #fff8e1 !important; }

/* Teacher classroom row */
.cls-row-regular {
  border-left: 4px solid var(--clr-primary) !important;
  background: #ffffff;
}
.cls-row-regular:hover { background: #f5f3ff !important; }
.cls-row-extra {
  border-left: 4px solid var(--clr-extra) !important;
  background: #fffcf3;
}
.cls-row-extra:hover { background: #fff8e1 !important; }

/* ══════════════════════════════════════════════════════════
   UNIVERSAL BADGES
══════════════════════════════════════════════════════════ */
.badge-regular {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--clr-primary-lt); color: var(--clr-primary);
  border: 1px solid var(--clr-primary-bd);
  border-radius: var(--radius-pill); padding: 2px 10px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.badge-extra {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--clr-extra-lt); color: var(--clr-extra-dk);
  border: 1px solid var(--clr-amber-bd);
  border-radius: var(--radius-pill); padding: 2px 10px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.badge-completed  { background:var(--clr-success-lt); color:var(--clr-success); border:1px solid var(--clr-success-bd); border-radius:var(--radius-pill); padding:3px 10px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-cancelled  { background:var(--clr-danger-lt);  color:var(--clr-danger);  border:1px solid var(--clr-danger-bd);  border-radius:var(--radius-pill); padding:3px 10px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-reschedule { background:var(--clr-amber-lt);   color:var(--clr-amber);   border:1px solid var(--clr-amber-bd);   border-radius:var(--radius-pill); padding:3px 10px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-upcoming   { background:var(--clr-primary-lt); color:var(--clr-primary); border:1px solid var(--clr-primary-bd); border-radius:var(--radius-pill); padding:3px 10px; font-size:11px; font-weight:700; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════════════════════ */
.stat-card {
  background: #f8f9ff; padding: 20px;
  border-radius: 14px; text-align: center;
}

/* ══════════════════════════════════════════════════════════
   TIMELINE BAR (left colored bar in class items)
══════════════════════════════════════════════════════════ */
.timeline { width: 4px; height: 40px; border-radius: 4px; }
.timeline.success  { background: #22c55e; }
.timeline.warning  { background: #f59e0b; }
.timeline.danger   { background: #ef4444; }
.timeline.primary  { background: #6366f1; }
.time-text { width: 95px; font-size: 14px; color: #6c757d; }

/* ══════════════════════════════════════════════════════════
   TABLE IMPROVEMENTS
══════════════════════════════════════════════════════════ */
.classroom-row { transition: background .12s; }
.classroom-row:hover { background: #f9f8ff !important; }
.cls-code { font-size: 11px; font-weight: 800; color: var(--clr-primary); font-family: monospace; letter-spacing: .05em; }
.cls-type { font-size: 10px; color: var(--clr-muted); margin-top: 1px; }
.sub-badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.hrs-badge { font-size: 14px; font-weight: 800; color: var(--clr-success); }
.rate-green { color: var(--clr-success); font-weight: 700; font-size: 13px; }
.rate-amber { color: var(--clr-amber); font-weight: 700; font-size: 13px; }
.status-active   { background:var(--clr-success-lt); color:var(--clr-success); border:1px solid var(--clr-success-bd); border-radius:var(--radius-pill); padding:3px 10px; font-size:11px; font-weight:700; white-space:nowrap; }
.status-inactive { background:var(--clr-danger-lt); color:var(--clr-danger); border:1px solid var(--clr-danger-bd); border-radius:var(--radius-pill); padding:3px 10px; font-size:11px; font-weight:700; white-space:nowrap; }
.sch-pill { display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;background:var(--clr-primary-lt);color:var(--clr-primary);margin:2px;white-space:nowrap; }

/* ══════════════════════════════════════════════════════════
   SEARCH BOX
══════════════════════════════════════════════════════════ */
.search-box { border: 1.5px solid var(--clr-border-sm); border-radius: var(--radius-btn); padding: 7px 12px 7px 36px; font-size: 13px; width: 220px; outline: none; transition: border-color .14s; }
.search-box:focus { border-color: var(--clr-primary); }
.search-wrap { position: relative; }
.search-wrap::before { content: '🔍'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; }

/* ══════════════════════════════════════════════════════════
   ALERT / ANNOUNCEMENT CARDS
══════════════════════════════════════════════════════════ */
.alert-card { background: #edeaf5; border: 1px solid #edeaf5; border-radius: 12px; transition: .2s ease; }
.alert-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.05); transform: translateY(-2px); }
.alert-card.danger  { background: #ffecec; }
.alert-card.success { background: #eaf7f0; }
.alert-card.academic { background: #fff4e5; }
.alert-card.holiday  { background: #eaf3ff; }
.alert-card.platform { background: #eaf7f0; }
.alert-modern { border-radius: 16px; padding: 15px; }
.alert-modern.danger  { background: #ffecec; border: 1px solid #f5c2c2; }
.alert-modern.success { background: #eaf7f0; border: 1px solid #b7ebc6; }
.icon-box { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* ══════════════════════════════════════════════════════════
   STEPPER (enrollment form)
══════════════════════════════════════════════════════════ */
.stepper { display: flex; align-items: center; }
.step { display: flex; align-items: center; gap: 8px; color: #999; }
.step.active { color: var(--clr-primary); font-weight: 600; }
.circle { width: 32px; height: 32px; border-radius: 50%; background: #ddd; display: flex; align-items: center; justify-content: center; }
.step.active .circle { background: var(--clr-primary); color: #fff; }
.line { flex: 1; height: 2px; background: #ddd; margin: 0 10px; }
.step-content { display: none; }
.step-content.active { display: block; }

/* ══════════════════════════════════════════════════════════
   CARDS — class, session, announce, etc.
══════════════════════════════════════════════════════════ */
.modern-card { border-radius: 18px; border: 1px solid #eee; background: #fff; }
.date-pill { background: var(--clr-primary-lt); padding: 5px 12px; border-radius: var(--radius-pill); font-size: 12px; color: var(--clr-primary); }
.class-highlight { border: 2px solid var(--clr-primary); border-radius: 14px; padding: 15px; display: flex; justify-content: space-between; align-items: center; background: #f8f9ff; }
.class-normal { border: 1px solid #e5e7eb; border-radius: 14px; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.class-box { border: 1px solid #e5e7eb; padding: 15px; border-radius: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; }
.announce { padding: 12px; border-radius: 12px; margin-bottom: 10px; }
.announce.academic { background: #fff4e5; }
.announce.holiday { background: #eaf3ff; }
.session-item { padding: 10px; border-left: 4px solid var(--clr-primary); margin-bottom: 10px; display: flex; justify-content: space-between; }
.upcoming-badge { background: var(--clr-primary-lt); color: var(--clr-primary); padding: 6px 12px; border-radius: var(--radius-pill); }
.join-btn { background: var(--clr-primary); color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: background .13s; }
.join-btn:hover { background: #4232C8; color: #fff; }
.rep-btn { background: #fff; color: #5C5A7A; border: 1.5px solid var(--clr-border-sm); border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .13s; }
.rep-btn:hover { border-color: var(--clr-primary); color: var(--clr-primary); }

/* ══════════════════════════════════════════════════════════
   CALENDAR GRID
══════════════════════════════════════════════════════════ */
.calendar-head { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.day { height: 100px; border-radius: 12px; border: 1px dashed #ddd; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.day.empty   { color: #bbb; }
.day.present { background: #dff5ea; color: #198754; }
.day.late    { background: #fff3cd; color: #856404; }
.day.reschedule { background: #e7f1ff; color: #0d6efd; }
.day.latecancel { background: #fde2e4; color: #dc3545; }
.legend { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 5px; }
.legend.p { background: #dff5ea; }
.legend.a { background: #fde2e4; }
.legend.l { background: #fff3cd; }
.legend.r { background: #e7f1ff; }
.legend.lc{ background: #fde2e4; }

/* ══════════════════════════════════════════════════════════
   SCHEDULE TABLE / SLOTS
══════════════════════════════════════════════════════════ */
.schedule-table th { font-size: 13px; color: #7a7a9d; font-weight: 600; }
.slot { padding: 10px; border-radius: 10px; font-size: 13px; line-height: 1.3; min-width: 120px; }
.slot.physics   { background: var(--clr-primary-lt); border-left: 3px solid var(--clr-primary); }
.slot.chemistry { background: #e6f4ef; border-left: 3px solid #20a67a; }
.slot.active    { border: 2px solid var(--clr-primary); }
.slot.empty     { border: 1px dashed #ddd; height: 60px; }

/* ══════════════════════════════════════════════════════════
   IMPROVE CARDS (referral, etc.)
══════════════════════════════════════════════════════════ */
.improve-card { border-radius: 16px; border: 1px solid #e5e7eb; background: #fff; transition: .3s; }
.improve-card.active   { border: 1px solid #fca5a5; background: #fff5f5; }
.improve-card.disabled { background: #f3f4f6; opacity: .6; }
.improve-card:hover    { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.05); }

/* ══════════════════════════════════════════════════════════
   MISC UTILS
══════════════════════════════════════════════════════════ */
.star { cursor: pointer; transition: .2s; }
.star:hover { transform: scale(1.2); }
.hover-shadow:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transition: .2s; }
.cursor-pointer { cursor: pointer; }
.purple { background: #6c63ff; }
.green  { background: #16a085; }
.orange { background: #f39c12; }
.col-7.referal { height: fit-content; }
.card-body > div { transition: .2s; }

/* ══════════════════════════════════════════════════════════
   TEACHER HOME — specific classes
══════════════════════════════════════════════════════════ */
.cls-time-t { font-family: monospace; font-size: 12px; font-weight: 600; color: #5C5A7A; min-width: 120px; flex-shrink: 0; white-space: nowrap; }
.cls-bar-t  { width: 3.5px; min-height: 38px; border-radius: 3px; flex-shrink: 0; align-self: stretch; }
.cls-body-t { flex: 1; min-width: 0; }
.cls-subj-t { font-size: 13.5px; font-weight: 700; color: var(--clr-text); margin-bottom: 2px; }
.cls-meta-t { font-size: 11.5px; color: var(--clr-muted); }
.cls-act-t  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ass-type-btn { padding: 7px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--clr-border-sm); background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .14s; color: #5C5A7A; }
.ass-type-btn.on { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }

/* ══════════════════════════════════════════════════════════
   STUDENT HOME — specific classes
══════════════════════════════════════════════════════════ */
.sh-cls-time { font-family: monospace; font-size: 11.5px; font-weight: 600; color: var(--clr-muted); min-width: 110px; flex-shrink: 0; white-space: nowrap; }
.sh-cls-name { font-size: 13.5px; font-weight: 700; color: var(--clr-text); margin-bottom: 2px; }
.sh-cls-meta { font-size: 11.5px; color: var(--clr-muted); }
.sh-tag { display: inline-block; background: var(--clr-primary-lt); color: var(--clr-primary); border-radius: 5px; padding: 0px 7px; font-size: 10px; font-weight: 700; }
.sh-tag-blue { background: var(--clr-primary-lt); color: var(--clr-primary); }
.sh-live { color: #dc2626; font-size: 10px; font-weight: 700; }
.sh-att-tag { border-radius: 20px; padding: 4px 12px; font-size: 11.5px; font-weight: 700; }
.btn-gmeet { background: #1a73e8; color: #fff; border-radius: 8px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background .13s; white-space: nowrap; }
.btn-gmeet:hover { background: #1557b0; color: #fff; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cls-row-t { flex-wrap: wrap; padding: 12px 14px; }
  .cls-time-t { min-width: auto; width: 100%; font-size: 11px; color: var(--clr-muted); }
  .cls-act-t  { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .calendar-head { display: none; }
  .calendar-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .day { height: 80px; font-size: 14px; }
  .day { position: relative; }
  .day::before { content: attr(data-day); position: absolute; top: 6px; left: 8px; font-size: 10px; color: #888; }
  .d-flex.flex-wrap.gap-3 { gap: 10px !important; font-size: 12px; }
  .schedule-table th, .schedule-table td { font-size: 12px; padding: 6px; }
  .slot { font-size: 11px; padding: 6px; }
  .search-box { width: 100%; }
  .card h1 { font-size: 40px !important; }
  .class-item { padding: 12px 14px; }
  .sh-cls-row { flex-wrap: wrap; padding: 12px 14px; }
  .sh-cls-time { min-width: auto; width: 100%; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .calendar-grid { grid-template-columns: repeat(4, 1fr); }
  .day { height: 90px; }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .calendar-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 576px) {
  .improve-card { padding: 18px 10px; }
  .improve-card h6 { font-size: 14px; }
  .improve-card small { font-size: 12px; }
}

/* ── Minimal Scrollbar ──────────────────────────────────────
   Replaces the bulky native Windows scrollbar with a 6px pill so the
   app reads as a modern SaaS dashboard. Only the thumb is visible;
   the track is transparent so it stays invisible over both the light
   content areas and the dark sidebar.

   styles.css styles .dt-scroll-body (DataTables) with a grey 4px bar.
   That selector is more specific than a bare ::-webkit-scrollbar, so it
   is re-stated here at matching specificity to keep every scroll area
   on the same purple. */
* {
  scrollbar-width: thin;
  scrollbar-color: #4F46D8 transparent;
}
html {
  scrollbar-width: thin;
  scrollbar-color: #4F46D8 transparent;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner,
::-webkit-scrollbar-resizer {
  background: transparent;
  border: none;
  box-shadow: none;
}
::-webkit-scrollbar-thumb {
  background: #4F46D8;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
::-webkit-scrollbar-thumb:hover {
  background: #35258F;
}
::-webkit-scrollbar-thumb:active {
  background: #2C1C74;
}
/* strip the native up/down arrow buttons */
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
  border: none;
  background: transparent;
}
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
  width: 0;
  height: 0;
  border: none;
  background: transparent;
}

/* DataTables scroll container: same pill, overriding the grey bar in styles.css. */
.dt-scroll-body {
  scrollbar-width: thin;
  scrollbar-color: #4F46D8 transparent;
}
.dt-scroll-body::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
.dt-scroll-body::-webkit-scrollbar-track { background: transparent; border: none; box-shadow: none; }
.dt-scroll-body::-webkit-scrollbar-thumb {
  background: #4F46D8; border: none; border-radius: 999px; box-shadow: none;
}
.dt-scroll-body::-webkit-scrollbar-thumb:hover { background: #35258F; }