/* SCMS — School Counselling Management System
   A distinct theme layered on Bootstrap 5: deep teal + warm coral accent,
   soft neutrals, a fixed sidebar shell. Not the stock Bootstrap look. */

:root {
  --scms-ink: #12242b;
  --scms-teal-900: #0e2f38;
  --scms-teal-800: #163f4b;
  --scms-teal-700: #1f4e5f;
  --scms-teal-600: #2b6577;
  --scms-teal-100: #e4eef0;
  --scms-coral: #e0793e;
  --scms-coral-dark: #c25f28;
  --scms-gold: #e3b23c;
  --scms-red: #d64545;
  --scms-green: #2f9e6a;
  --scms-bg: #f5f7f8;
  --scms-card: #ffffff;
  --scms-border: #e3e8ea;
  --scms-muted: #6b7c82;

  --bs-primary: var(--scms-teal-700);
  --bs-primary-rgb: 31, 78, 95;
  --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--scms-ink);
  --bs-body-bg: var(--scms-bg);
  --bs-link-color: var(--scms-teal-700);
  --bs-link-hover-color: var(--scms-coral-dark);
}

body {
  background: var(--scms-bg);
}

/* ---------- Shell layout ---------- */
.scms-shell {
  display: flex;
  min-height: 100vh;
}

.scms-sidebar {
  width: 264px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--scms-teal-900) 0%, var(--scms-teal-800) 100%);
  color: #dce9ec;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.scms-brand {
  padding: 1.35rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.scms-brand .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--scms-coral);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin-right: 0.6rem;
}

.scms-brand .title {
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  line-height: 1.15;
}

.scms-brand .subtitle {
  font-size: 0.72rem;
  color: #9fb7bd;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scms-nav {
  flex: 1;
  padding: 1rem 0.75rem;
  overflow-y: auto;
}

.scms-nav .nav-section {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7fa0a8;
  padding: 0.9rem 0.6rem 0.35rem;
}

.scms-nav a.nav-link {
  color: #cfe3e7;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}

.scms-nav a.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.scms-nav a.nav-link.active {
  background: var(--scms-coral);
  color: #fff;
  font-weight: 600;
}

.scms-nav .nav-link .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.scms-user-box {
  padding: 0.9rem 1.1rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
}

.scms-user-box .role-pill {
  display: inline-block;
  font-size: 0.68rem;
  background: rgba(255, 255, 255, 0.12);
  color: #dcebee;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-top: 0.2rem;
}

.scms-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.scms-topbar {
  background: var(--scms-card);
  border-bottom: 1px solid var(--scms-border);
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.scms-topbar h1 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--scms-teal-900);
}

.scms-content {
  padding: 1.5rem;
  flex: 1;
}

/* ---------- Cards & components ---------- */
.scms-card {
  background: var(--scms-card);
  border: 1px solid var(--scms-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(18, 36, 43, 0.04);
}

.scms-card .scms-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--scms-border);
  font-weight: 700;
  color: var(--scms-teal-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scms-card .scms-card-body {
  padding: 1.25rem;
}

.stat-tile {
  background: var(--scms-card);
  border: 1px solid var(--scms-border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat-tile .value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--scms-teal-900);
}

.stat-tile .label {
  color: var(--scms-muted);
  font-size: 0.82rem;
}

.stat-tile.accent-coral .value { color: var(--scms-coral-dark); }
.stat-tile.accent-red .value { color: var(--scms-red); }
.stat-tile.accent-green .value { color: var(--scms-green); }

.btn-primary {
  background-color: var(--scms-teal-700);
  border-color: var(--scms-teal-700);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--scms-teal-600);
  border-color: var(--scms-teal-600);
}

.btn-coral {
  background-color: var(--scms-coral);
  border-color: var(--scms-coral);
  color: #fff;
}
.btn-coral:hover { background-color: var(--scms-coral-dark); color: #fff; }

a { text-decoration: none; }

.badge-status {
  font-size: 0.72rem;
  padding: 0.3em 0.65em;
  border-radius: 999px;
  font-weight: 600;
}
.badge-status.status-open { background: var(--scms-teal-100); color: var(--scms-teal-800); }
.badge-status.status-in_review { background: #fff1da; color: #8a5a12; }
.badge-status.status-ongoing { background: #e6f3ec; color: #1f6e4a; }
.badge-status.status-closed { background: #eceef0; color: #55636a; }

.flag-pill {
  font-size: 0.72rem;
  padding: 0.28em 0.6em;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.flag-pill.flag-none { display: none; }
.flag-pill.flag-concern { background: #fff2d9; color: #92660e; border: 1px solid #f0cc7a; }
.flag-pill.flag-urgent {
  background: #fbe4e4;
  color: #a52323;
  border: 1px solid #ecb0b0;
}

tr.row-flag-urgent { background: #fdf4f4; }
tr.row-flag-concern { background: #fffaf0; }

.scms-card-header .flag-pill.flag-urgent,
td .flag-pill.flag-urgent {
  animation: pulse-urgent 2.2s infinite;
}
@keyframes pulse-urgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 69, 0.25); }
  50% { box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.08); }
}

.notif-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--scms-coral);
  border: 2px solid var(--scms-card);
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 20%, var(--scms-teal-600), var(--scms-teal-900) 65%);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--scms-muted);
  font-weight: 700;
  margin: 1.5rem 0 0.6rem;
}
.section-title:first-child { margin-top: 0; }

.field-line {
  border-bottom: 1px solid var(--scms-border);
  padding: 0.4rem 0;
}

@media (max-width: 900px) {
  .scms-sidebar { position: fixed; left: -280px; z-index: 40; transition: left 0.2s ease; }
  .scms-sidebar.open { left: 0; }
  .scms-content { padding: 1rem; }
}