/* ==========================================================
   Student Residential & Emergency Information Dashboard
   Design tokens
   Palette: institutional ink + calm teal, with a reserved
   red-orange used ONLY for emergency / call actions so it
   keeps real signal value.
   ========================================================== */
:root{
  --ink:        #142433;
  --ink-soft:   #3D5164;
  --surface:    #F5F7F8;
  --surface-2:  #EDF1F2;
  --card:       #FFFFFF;
  --border:     #E1E7EA;
  --teal:       #1F6F6B;
  --teal-dark:  #164F4C;
  --teal-tint:  #E3F1EF;
  --amber:      #C9861F;
  --amber-tint: #FBF1DE;
  --sos:        #C63C23;
  --sos-dark:   #9E2E1A;
  --sos-tint:   #FBEAE5;
  --green:      #2E7D46;
  --green-tint: #E5F3E8;
  --grey:       #6B7A85;
  --radius-sm:  6px;
  --radius-md:  10px;
  --shadow-1:   0 1px 2px rgba(20,36,51,.06), 0 1px 1px rgba(20,36,51,.04);
  --shadow-2:   0 8px 24px rgba(20,36,51,.14);
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }

html, body{
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body{ padding-bottom: env(safe-area-inset-bottom); }

a{ color: var(--teal); text-decoration: none; }
a:hover{ color: var(--teal-dark); }

h1,h2,h3,h4,h5,h6{ color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }

.text-muted-2{ color: var(--grey) !important; }

/* ---------------- App bar (top) ---------------- */
.app-bar{
  background: var(--ink);
  color: #fff;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: var(--shadow-1);
}
.app-bar .brand{
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.app-bar .brand .bi{ color: var(--teal-tint); }
.app-bar .app-bar-actions{ margin-left: auto; display:flex; align-items:center; gap: .35rem; }
.app-bar .btn-bar{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.app-bar .btn-bar:hover{ background: rgba(255,255,255,.16); color:#fff; }

/* ---------------- Sidebar (admin, desktop) ---------------- */
.app-shell{ display:flex; min-height: 100vh; }
.sidebar{
  width: 240px;
  flex-shrink: 0;
  background: var(--ink);
  color: #cfe0e0;
  min-height: 100vh;
  position: sticky;
  top:0;
  align-self: flex-start;
}
.sidebar .side-brand{
  padding: 1rem 1.1rem;
  font-weight: 700;
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:.5rem;
}
.sidebar nav{ padding: .6rem; }
.sidebar .side-label{
  font-size: .72rem;
  color: #7f9797;
  padding: .8rem .6rem .3rem;
  font-weight: 600;
}
.sidebar a.side-link{
  display:flex; align-items:center; gap:.65rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  color: #cfe0e0;
  font-size: .92rem;
  margin-bottom: 2px;
}
.sidebar a.side-link .bi{ font-size: 1.05rem; width: 1.2rem; text-align:center; }
.sidebar a.side-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.sidebar a.side-link.active{ background: var(--teal); color:#fff; }
.main-content{ flex: 1; min-width: 0; }
.content-wrap{ padding: 1rem 1rem 5.5rem; max-width: 1180px; }
@media (min-width: 992px){
  .content-wrap{ padding: 1.4rem 1.6rem 2rem; }
}

/* offcanvas sidebar on mobile reuses same classes via Bootstrap offcanvas */

/* ---------------- Bottom nav (student, mobile) ---------------- */
.bottom-nav{
  position: fixed;
  left:0; right:0; bottom:0;
  background: #fff;
  border-top: 1px solid var(--border);
  display:flex;
  z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a{
  flex:1;
  text-align:center;
  padding: .5rem 0 .4rem;
  color: var(--grey);
  font-size: .68rem;
  font-weight: 600;
}
.bottom-nav a .bi{ display:block; font-size: 1.25rem; margin-bottom: 2px; }
.bottom-nav a.active{ color: var(--teal); }
@media (min-width: 992px){ .bottom-nav{ display:none; } }

/* ---------------- Cards ---------------- */
.card{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.card.elevated{ box-shadow: var(--shadow-1); }

/* KPI stat cards — flat with a left accent bar (encodes category, not decoration) */
.kpi-row{
  display:flex;
  gap:.75rem;
  overflow-x:auto;
  padding-bottom:.35rem;
  scrollbar-width:none;
}
.kpi-row::-webkit-scrollbar{ display:none; }
@media (min-width: 768px){
  .kpi-row{ display:grid; grid-template-columns: repeat(4,1fr); overflow:visible; }
}
.kpi-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: .85rem .95rem;
  min-width: 158px;
  flex: 0 0 auto;
}
@media (min-width: 768px){ .kpi-card{ min-width: 0; } }
.kpi-card .kpi-value{ font-size: 1.55rem; font-weight: 700; line-height:1.1; }
.kpi-card .kpi-label{ font-size: .76rem; color: var(--grey); margin-top:.15rem; }
.kpi-card.accent-amber{ border-left-color: var(--amber); }
.kpi-card.accent-sos{ border-left-color: var(--sos); }
.kpi-card.accent-green{ border-left-color: var(--green); }
.kpi-card.accent-ink{ border-left-color: var(--ink-soft); }

/* Section headers within content */
.section-title{
  font-size: .95rem;
  font-weight: 700;
  margin: 1.3rem 0 .6rem;
  color: var(--ink);
}

/* ---------------- Buttons ---------------- */
.btn-teal{ background: var(--teal); border-color: var(--teal); color:#fff; }
.btn-teal:hover{ background: var(--teal-dark); border-color: var(--teal-dark); color:#fff; }
.btn-outline-teal{ border-color: var(--teal); color: var(--teal); }
.btn-outline-teal:hover{ background: var(--teal); color:#fff; }

/* Emergency actions — the ONE place the sos color is used, so it keeps meaning */
.btn-call{
  background: var(--sos);
  border-color: var(--sos);
  color:#fff;
  font-weight:600;
}
.btn-call:hover{ background: var(--sos-dark); border-color: var(--sos-dark); color:#fff; }
.btn-whatsapp{ background:#25946b; border-color:#25946b; color:#fff; font-weight:600; }
.btn-whatsapp:hover{ background:#1f7d5a; border-color:#1f7d5a; color:#fff; }

/* Large tap-target call buttons on emergency screens */
.tap-action{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

/* ---------------- Badges ---------------- */
.badge{ font-weight: 600; letter-spacing: 0; }

/* ---------------- Residence type toggle ---------------- */
.residence-choice{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .8rem;
  text-align:center;
  cursor:pointer;
  background:#fff;
}
.residence-choice.selected{
  border-color: var(--teal);
  background: var(--teal-tint);
}
.residence-choice .bi{ font-size:1.4rem; color: var(--teal); }

/* ---------------- Progress (profile completion) ---------------- */
.progress{ height: 8px; border-radius: 999px; background: var(--surface-2); }
.progress-bar{ background: var(--teal); }

/* ---------------- Login screens ---------------- */
.auth-wrap{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 220px, var(--surface) 220px);
  padding: 1rem;
}
.auth-card{
  width: 100%; max-width: 420px;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: 1.75rem 1.5rem;
}
.auth-logo{
  width:52px; height:52px; border-radius: 12px;
  background: var(--teal);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem; margin: 0 auto .9rem;
}

/* ---------------- Emergency search result ---------------- */
.contact-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 0; border-bottom: 1px solid var(--border);
}
.contact-row:last-child{ border-bottom:0; }
.contact-row .who .name{ font-weight:600; }
.contact-row .who .rel{ font-size:.78rem; color:var(--grey); }
.contact-actions{ display:flex; gap:.4rem; }
.contact-actions .btn{ padding:.35rem .55rem; }

/* Primary-contact marker */
.primary-star{ color: var(--amber); }

/* Table density tweaks for DataTables */
table.dataTable td, table.dataTable th{ vertical-align: middle; }

/* Stepper (registration wizard) */
.step-indicator{ display:flex; gap:.4rem; margin-bottom:1.1rem; }
.step-indicator .dot{ flex:1; height:4px; border-radius:2px; background: var(--surface-2); }
.step-indicator .dot.done{ background: var(--teal); }

/* Print view (student/PG profile print) */
@media print{
  .app-bar, .bottom-nav, .sidebar, .no-print{ display:none !important; }
  .content-wrap{ padding:0; }
}