:root {
  --iskolar-navy: #0b2447;
  --iskolar-navy-dark: #071a33;
  --iskolar-blue: #1b5299;
  --iskolar-gold: #f4b400;
  --iskolar-gold-dark: #d69c00;
  --iskolar-bg: #f4f6fb;
  --iskolar-card: #ffffff;
  --iskolar-text: #1c2733;
  --iskolar-muted: #6b7686;
  --iskolar-radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--iskolar-bg);
  color: var(--iskolar-text);
  font-family: 'Inter', system-ui, sans-serif;
}

/* Pages built on the sidebar app-shell (admin/applicant/notifications) get a
   fixed viewport: navbar, sidebar and footer stay put and only .app-content
   scrolls. Public/marketing pages (no .app-shell) keep normal page scroll. */
body:has(.app-shell) {
  height: 100vh;
  overflow: hidden;
}

h1, h2, h3, h4, h5, .brand-text, .display-font {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 600;
}

a { text-decoration: none; }

/* ---------------- Navbar ---------------- */
.iskolar-navbar {
  background: linear-gradient(90deg, var(--iskolar-navy) 0%, var(--iskolar-navy-dark) 100%);
  padding: 0.65rem 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--iskolar-gold);
  color: var(--iskolar-navy-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.brand-text { line-height: 1.1; color: #fff; }
.brand-text small { color: rgba(255,255,255,0.6); font-weight: 400; font-size: 0.7rem; }
.iskolar-navbar .nav-link { color: rgba(255,255,255,0.85); font-weight: 500; }
.iskolar-navbar .nav-link:hover { color: var(--iskolar-gold); }
.user-chip { color: #fff; font-size: 0.9rem; }
.notif-dot { position: absolute; top: 2px; right: -4px; font-size: 0.6rem; padding: 0.25em 0.4em; }
.notif-dropdown { width: 320px; max-height: 400px; overflow-y: auto; }
.role-badge { background: var(--iskolar-gold); color: var(--iskolar-navy-dark); text-transform: capitalize; }
.btn-gold {
  background: var(--iskolar-gold); border-color: var(--iskolar-gold); color: var(--iskolar-navy-dark); font-weight: 600;
}
.btn-gold:hover { background: var(--iskolar-gold-dark); border-color: var(--iskolar-gold-dark); color: var(--iskolar-navy-dark); }

/* ---------------- Layout: sidebar + content ---------------- */
.app-shell { display: flex; flex: 1; min-height: 0; }
.iskolar-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--iskolar-card);
  border-right: 1px solid #e6e9f0;
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}
.iskolar-sidebar .nav-link {
  color: var(--iskolar-text);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-weight: 500;
  font-size: 0.93rem;
}
.iskolar-sidebar .nav-link i { width: 20px; margin-right: 6px; color: var(--iskolar-blue); }
.iskolar-sidebar .nav-link:hover { background: #eef2fb; }
.iskolar-sidebar .nav-link.active { background: var(--iskolar-navy); color: #fff; }
.iskolar-sidebar .nav-link.active i { color: var(--iskolar-gold); }
.sidebar-footer { border-top: 1px solid #eef0f4; padding-top: 0.75rem; margin-top: 0.75rem; }

.nav-caret { font-size: 0.7rem; color: var(--iskolar-muted); transition: transform 0.2s ease; }
.iskolar-sidebar .nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.iskolar-sidebar .nav-link.active .nav-caret { color: inherit; }
.nav-submenu { padding-left: 1.65rem; margin-top: 2px; }
.nav-submenu .nav-sublink { font-size: 0.87rem; padding: 0.45rem 0.9rem; }
.nav-submenu .nav-sublink i { width: 20px; margin-right: 6px; color: var(--iskolar-blue); }
.nav-submenu .nav-sublink.active i { color: var(--iskolar-gold); }

.app-content {
  flex: 1;
  padding: 1.75rem;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .iskolar-sidebar { width: 100%; flex-direction: row; overflow-x: auto; }
  .iskolar-sidebar .nav { flex-direction: row !important; }
  .sidebar-footer { display: none; }
}

/* ---------------- Cards / stats ---------------- */
.card {
  border: none;
  border-radius: var(--iskolar-radius);
  box-shadow: 0 2px 14px rgba(20, 30, 60, 0.06);
}
.stat-card {
  border-radius: var(--iskolar-radius);
  padding: 1.25rem 1.4rem;
  background: var(--iskolar-card);
  box-shadow: 0 2px 14px rgba(20, 30, 60, 0.06);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.stat-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  flex-shrink: 0;
}
.stat-icon.navy { background: var(--iskolar-navy); }
.stat-icon.gold { background: var(--iskolar-gold); color: var(--iskolar-navy-dark); }
.stat-icon.green { background: #1e9e6a; }
.stat-icon.red { background: #d64550; }
.stat-value { font-size: 1.6rem; font-weight: 700; font-family: 'Poppins', sans-serif; line-height: 1; }
.stat-label { color: var(--iskolar-muted); font-size: 0.85rem; }

.section-title {
  font-weight: 700;
  color: var(--iskolar-navy);
  margin-bottom: 1rem;
}

/* ---------------- Hero (landing page) ---------------- */
.hero {
  background: radial-gradient(circle at top right, #163a6b 0%, var(--iskolar-navy-dark) 65%);
  color: #fff;
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.hero h1 { font-size: 2.6rem; }
.hero .lead { color: rgba(255,255,255,0.8); }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(244, 180, 0, 0.15);
  color: var(--iskolar-gold);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.feature-card {
  background: #fff;
  border-radius: var(--iskolar-radius);
  padding: 1.75rem;
  height: 100%;
  box-shadow: 0 2px 14px rgba(20,30,60,0.06);
}
.feature-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #eef2fb;
  color: var(--iskolar-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* ---------------- Auth pages ---------------- */
.auth-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  background: linear-gradient(135deg, #eef2fb 0%, var(--iskolar-bg) 100%);
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: var(--iskolar-radius);
  padding: 2.25rem;
  box-shadow: 0 8px 30px rgba(20,30,60,0.1);
}

/* ---------------- Tables ---------------- */
.table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--iskolar-muted);
  border-bottom-width: 1px;
}
.table td, .table th { vertical-align: middle; }
.table-hover tbody tr:hover { background: #f7f9fd; }

.progress-thin { height: 8px; border-radius: 999px; }

/* ---------------- Footer ---------------- */
.iskolar-footer {
  background: #fff;
  border-top: 1px solid #e6e9f0;
  flex-shrink: 0;
}

.badge { font-weight: 600; letter-spacing: 0.01em; }

.form-label { font-weight: 500; font-size: 0.9rem; }
.form-section-title {
  font-weight: 600;
  color: var(--iskolar-navy);
  border-bottom: 2px solid #eef2fb;
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  margin-top: 1.5rem;
}
.form-section-title:first-child { margin-top: 0; }

/* ---------------- Reports charts ---------------- */
.chart-box { position: relative; height: 240px; }
.chart-box-lg { position: relative; height: 280px; }

/* ---------------- Messages (chat) ---------------- */
.app-content.chat-page { display: flex; flex-direction: column; }
.app-content.chat-page > h3 { flex-shrink: 0; }
.app-content.chat-page > .messenger-shell { flex: 1; min-height: 0; }

.messenger-shell {
  display: flex;
  height: 100%;
  min-height: 0;
  background: var(--iskolar-card);
  border-radius: var(--iskolar-radius);
  box-shadow: 0 2px 14px rgba(20, 30, 60, 0.06);
  overflow: hidden;
}

.conversation-list-pane {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid #e6e9f0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.conversation-list-header {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #e6e9f0;
  font-weight: 700;
  color: var(--iskolar-navy);
}
.conversation-list-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.conversation-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid #f1f3f8;
  border-left: 3px solid transparent;
  color: inherit;
}
.conversation-item:hover { background: #f7f9fd; }
.conversation-item.active { background: #eef2fb; border-left-color: var(--iskolar-navy); }
.conv-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--iskolar-navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.conv-info { min-width: 0; flex: 1; }
.conv-name { font-size: 0.92rem; color: var(--iskolar-text); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.conversation-item.unread .conv-name { font-weight: 700; }
.conv-preview { font-size: 0.8rem; color: var(--iskolar-muted); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.conversation-item.unread .conv-preview { color: var(--iskolar-text); font-weight: 600; }
.conv-meta { flex-shrink: 0; text-align: right; }
.conv-time { font-size: 0.72rem; color: var(--iskolar-muted); display: block; margin-bottom: 3px; }
.conv-unread-badge {
  background: var(--iskolar-gold);
  color: var(--iskolar-navy-dark);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.conversation-empty { padding: 2rem 1.1rem; color: var(--iskolar-muted); font-size: 0.9rem; text-align: center; }

.chat-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-header {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid #e6e9f0;
  display: flex; align-items: center; gap: 0.75rem;
  flex-shrink: 0;
}
.chat-thread { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.chat-row { display: flex; flex-direction: column; max-width: 68%; }
.chat-row.me { align-self: flex-end; align-items: flex-end; }
.chat-row.them { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 0.55rem 0.9rem; border-radius: 16px; font-size: 0.92rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.chat-row.them .chat-bubble { background: #eef2fb; color: var(--iskolar-text); border-bottom-left-radius: 4px; }
.chat-row.me .chat-bubble { background: var(--iskolar-navy); color: #fff; border-bottom-right-radius: 4px; }
.chat-meta { font-size: 0.7rem; color: var(--iskolar-muted); margin: 3px 0.3rem 10px; }
.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--iskolar-muted); flex-direction: column; gap: 0.5rem; text-align: center; padding: 1.5rem; }
.chat-input-bar { border-top: 1px solid #e6e9f0; padding: 0.85rem 1rem; display: flex; gap: 0.6rem; flex-shrink: 0; }
.chat-input-bar textarea { resize: none; }

@media (max-width: 768px) {
  .messenger-shell:not(.has-selection) .chat-pane { display: none; }
  .messenger-shell.has-selection .conversation-list-pane { display: none; }
  .conversation-list-pane, .chat-pane { width: 100%; }
}