:root{
  --brand: #4f46e5;
  --brand-dark: #3730a3;
  --brand-light: #eef2ff;
  --ink: #1e2233;
  --muted: #6b7280;
  --bg: #f5f6fb;
  --card-bg: #ffffff;
  --border: #edeef4;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0891b2;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(20,20,43,.04), 0 1px 8px rgba(20,20,43,.04);
  --shadow-md: 0 8px 24px rgba(31,41,55,.08);
  --sidebar-w: 264px;
}

*{ box-sizing:border-box; }

body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ============ APP SHELL ============ */
.app-shell{ display:flex; min-height:100vh; }

/* ---- Sidebar ---- */
.sidebar{
  width: var(--sidebar-w);
  background: linear-gradient(180deg,#1a1c2e 0%, #14151f 100%);
  color:#c9cbe0;
  position: fixed;
  top:0; left:0; bottom:0;
  display:flex; flex-direction:column;
  z-index: 1040;
  transition: transform .28s ease;
  padding: 20px 14px;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding: 8px 10px 22px;
}
.brand-mark{
  width:38px; height:38px; border-radius:12px;
  background: linear-gradient(135deg, var(--brand), #818cf8);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; flex-shrink:0;
  box-shadow: 0 6px 14px rgba(79,70,229,.4);
}
.brand-text{ font-weight:800; font-size:1.05rem; color:#fff; letter-spacing:.2px; }
.sidebar-close{ margin-left:auto; background:none; border:none; color:#c9cbe0; font-size:1.1rem; }

.sidebar-nav{ display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1; padding-right:2px; }
.sidebar-nav .nav-link{
  display:flex; align-items:center; gap:12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color:#b8bad2;
  font-weight:500; font-size:.93rem;
  transition: all .15s ease;
}
.sidebar-nav .nav-link i{ font-size:1.05rem; width:20px; text-align:center; }
.sidebar-nav .nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.sidebar-nav .nav-link.active{
  background: linear-gradient(135deg, var(--brand), #6366f1);
  color:#fff;
  box-shadow: 0 6px 16px rgba(79,70,229,.35);
}
.sidebar-footer{ padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); margin-top:10px; }
.logout-link{ color:#fca5a5 !important; }
.logout-link:hover{ background: rgba(220,38,38,.12) !important; color:#fecaca !important; }

.sidebar-overlay{
  display:none; position:fixed; inset:0; background: rgba(15,15,25,.5);
  z-index:1030; backdrop-filter: blur(2px);
}

/* ---- Main area ---- */
.main-area{ margin-left: var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-width:0; }

.topbar{
  height:70px; background: var(--card-bg); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px; padding: 0 24px;
  position: sticky; top:0; z-index:1020;
}
.icon-btn{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--border);
  background:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--ink);
}
.topbar-search{
  position:relative; align-items:center; gap:8px;
  background: var(--bg); border:1px solid var(--border);
  border-radius: 12px; padding: 9px 14px; flex:1; max-width:420px; color:var(--muted);
}
.topbar-search input{ border:none; background:transparent; outline:none; width:100%; font-size:.9rem; }
.search-results{
  display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  border:1px solid var(--border); max-height:300px; overflow:auto; z-index:1050;
}
.search-results.show{ display:block; }
.search-results a{ display:block; padding:10px 14px; color:var(--ink); text-decoration:none; font-size:.87rem; border-bottom:1px solid var(--border); }
.search-results a:hover{ background: var(--brand-light); }
.search-results .type-tag{ font-size:.7rem; color:var(--brand); font-weight:700; text-transform:uppercase; margin-right:6px; }

.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.badge-pill{
  background: var(--brand-light); color: var(--brand-dark); font-weight:700; font-size:.72rem;
  padding:6px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px;
}
.user-chip{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border);
  border-radius:30px; padding:6px 12px 6px 6px; font-weight:600; font-size:.87rem; color:var(--ink);
}
.avatar-sm{
  width:30px; height:30px; border-radius:50%; background: linear-gradient(135deg, var(--brand), #818cf8);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem;
}

.content{ padding: 24px; flex:1; }
.app-footer{ text-align:center; padding:16px; color: var(--muted); font-size:.8rem; }

/* ============ CARDS ============ */
.card, .stat-card, .panel{
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.panel{ padding: 22px; }
.panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel-title{ font-weight:800; font-size:1.02rem; margin:0; }
.panel-title small{ display:block; color:var(--muted); font-weight:500; font-size:.78rem; margin-top:2px; }

.stat-card{ padding:20px; display:flex; align-items:center; gap:14px; transition: transform .15s ease, box-shadow .15s ease; }
.stat-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-icon{
  width:52px; height:52px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; flex-shrink:0;
}
.stat-value{ font-size:1.5rem; font-weight:800; line-height:1.1; }
.stat-label{ color:var(--muted); font-size:.82rem; font-weight:600; }

.bg-soft-indigo{ background:#eef2ff; color:#4f46e5; }
.bg-soft-green{ background:#ecfdf5; color:#16a34a; }
.bg-soft-orange{ background:#fff7ed; color:#ea580c; }
.bg-soft-red{ background:#fef2f2; color:#dc2626; }
.bg-soft-blue{ background:#eff6ff; color:#2563eb; }
.bg-soft-purple{ background:#f5f3ff; color:#7c3aed; }

/* ============ TABLES ============ */
.table-card{ background:#fff; border-radius: var(--radius-lg); border:1px solid var(--border); overflow:hidden; box-shadow: var(--shadow-sm); }
.table{ margin-bottom:0; }
.table thead th{
  background: #fafafe; border-bottom:1px solid var(--border); color:var(--muted);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; font-weight:700; padding:14px 18px; white-space:nowrap;
}
.table tbody td{ padding:14px 18px; vertical-align:middle; font-size:.88rem; border-bottom:1px solid var(--border); }
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background: #fbfbfe; }

.avatar-table{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--brand-light); }
.avatar-table-fallback{
  width:38px; height:38px; border-radius:50%; background: var(--brand-light); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}

/* ============ BADGES / CHIPS ============ */
.status-chip{ padding:5px 12px; border-radius:20px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.status-active, .status-paid{ background:#ecfdf5; color:#16a34a; }
.status-inactive, .status-unpaid{ background:#fef2f2; color:#dc2626; }
.status-partial{ background:#fff7ed; color:#ea580c; }

/* ============ FORMS ============ */
.form-label{ font-weight:600; font-size:.85rem; color:var(--ink); }
.form-control, .form-select{
  border-radius: var(--radius-sm); border:1px solid var(--border); padding:10px 14px; font-size:.9rem;
  background:#fbfbfe;
}
.form-control:focus, .form-select:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); background:#fff; }

/* ============ BUTTONS ============ */
.btn{ border-radius: 12px; font-weight:600; font-size:.88rem; padding:9px 18px; }
.btn-primary{ background: var(--brand); border-color: var(--brand); }
.btn-primary:hover{ background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-sm{ padding:6px 12px; font-size:.8rem; border-radius:9px; }
.btn-soft{ background: var(--brand-light); color: var(--brand-dark); border:none; }
.btn-soft:hover{ background:#e0e4ff; color:var(--brand-dark); }
.btn-outline-secondary{ border-color: var(--border); color: var(--muted); }

/* ============ QUICK LINK TILES ============ */
.quick-tile{
  display:flex; align-items:center; gap:12px; padding:16px; border-radius: var(--radius-md);
  text-decoration:none; font-weight:700; font-size:.87rem; transition: transform .15s ease;
}
.quick-tile:hover{ transform: translateY(-2px); }
.quick-tile i{ font-size:1.3rem; }

/* ============ AUTH PAGE ============ */
.auth-body{ background: linear-gradient(135deg, #1a1c2e 0%, #4f46e5 100%); min-height:100vh; }
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{
  width:100%; max-width:420px; background:#fff; border-radius:24px; padding:40px 34px;
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
}
.auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.auth-brand .brand-mark{ width:46px; height:46px; font-size:22px; }
.auth-brand h1{ font-size:1.2rem; font-weight:800; margin:0; }
.auth-card h2{ font-size:1.4rem; font-weight:800; margin-bottom:6px; }
.auth-card p.subtitle{ color:var(--muted); margin-bottom:26px; font-size:.9rem; }
.demo-box{ background: var(--brand-light); border-radius:12px; padding:12px 14px; font-size:.78rem; color:var(--brand-dark); margin-top:20px; }

/* ============ TIMETABLE ============ */
.tt-grid{ width:100%; border-collapse:separate; border-spacing:0; }
.tt-grid th, .tt-grid td{ border:1px solid var(--border); padding:10px; text-align:center; font-size:.82rem; }
.tt-grid th{ background:#fafafe; font-weight:700; }
.tt-cell{ min-width:120px; border-radius:8px; }
.tt-slot{ background: var(--brand-light); border-radius:10px; padding:8px; font-size:.78rem; }
.tt-slot .subject{ font-weight:700; color:var(--brand-dark); display:block; }

/* ============ MISC ============ */
.flash-stack{ margin-bottom: 18px; }
.section-title{ font-weight:800; font-size:1.25rem; margin-bottom:4px; }
.section-subtitle{ color:var(--muted); font-size:.88rem; margin-bottom:22px; }
.empty-state{ text-align:center; padding:50px 20px; color:var(--muted); }
.empty-state i{ font-size:2.4rem; opacity:.35; margin-bottom:10px; display:block; }
.credential-box{ background:#fffbeb; border:1px dashed #f59e0b; border-radius:12px; padding:14px 16px; font-size:.85rem; }

.page-toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:20px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 991.98px){
  .sidebar{ transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .sidebar.show{ transform: translateX(0); }
  .sidebar-overlay.show{ display:block; }
  .main-area{ margin-left:0; }
  .content{ padding:16px; }
  .topbar{ padding:0 14px; }
}
@media (max-width: 575.98px){
  .auth-card{ padding:30px 22px; border-radius:18px; }
  .stat-value{ font-size:1.25rem; }
}

/* Smooth transitions */
a, button{ transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }

/* ============ MONTH CALENDAR GRID ============ */
.cal-grid{ background:#fff; border-radius: var(--radius-lg); border:1px solid var(--border); box-shadow: var(--shadow-sm); padding:16px; }
.cal-grid-header{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; margin-bottom:8px; }
.cal-header-cell{ text-align:center; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; padding:4px 0; }
.cal-grid-body{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
.cal-cell{
  position:relative; min-height:64px; border-radius: var(--radius-sm); border:1px solid var(--border);
  padding:6px 6px 8px; background:#fbfbfe; display:flex; flex-direction:column;
}
.cal-cell-blank{ background:transparent; border:none; }
.cal-cell-num{ font-size:.8rem; font-weight:700; color:var(--ink); }
.cal-cell-today{ border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79,70,229,.15) inset; }
.cal-cell-today .cal-cell-num{ color: var(--brand); }
.cal-cell-clickable{ cursor:pointer; }
.cal-cell-clickable:hover{ border-color: var(--brand); background:#f5f5ff; }
.cal-cell-selected{ background: var(--brand-light); border-color: var(--brand); }
.cal-cell-selected .cal-cell-num{ color: var(--brand-dark); }
.cal-cell-badge{
  margin-top:auto; font-size:.66rem; font-weight:700; line-height:1.25;
  background: var(--brand-light); color: var(--brand-dark); border-radius:6px; padding:2px 5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal-cell-badge-booked{ background:#ecfdf5; color:#16a34a; }
.cal-cell-badge-full{ background:#fef2f2; color:#dc2626; }

.weekday-chip{
  border:1px solid var(--border); background:#fff; border-radius:20px; padding:6px 14px;
  font-size:.8rem; font-weight:700; color: var(--ink); cursor:pointer;
}
.weekday-chip.active{ background: var(--brand); border-color: var(--brand); color:#fff; }

@media (max-width: 575.98px){
  .cal-cell{ min-height:48px; padding:4px; }
  .cal-cell-num{ font-size:.72rem; }
  .cal-cell-badge{ font-size:.58rem; padding:1px 3px; }
  .cal-header-cell{ font-size:.62rem; }
}

.cal-cell-past { opacity: .45; cursor: not-allowed !important; }