/* =============================================================
   SUMMER CAMP CALLING APP — CUSTOM STYLES
   ============================================================= */

/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Design Tokens ── */
:root {
  /* Brand palette */
  --ca-navy:          #0d2137;
  --ca-navy-mid:      #1a3a5c;
  --ca-navy-light:    #2a5080;
  --ca-accent:        #f5c842;     /* amber / gold */
  --ca-green:         #2d6a2d;     /* CTA button */
  --ca-green-light:   #3d8a3d;
  --ca-red:           #c62828;
  --ca-teal:          #00695c;
  --ca-orange:        #e65100;
  --ca-blue:          #1565c0;

  /* Backgrounds */
  --ca-bg:            #dce8f5;     /* soft sky-blue page bg */
  --ca-bg-card:       #ffffff;
  --ca-bg-section:    #dce8f5;

  /* Borders */
  --ca-border:        #1a3a5c;     /* bold navy border for form fields */
  --ca-border-light:  #b8cce4;

  /* Typography */
  --ca-text:          #0d2137;
  --ca-text-muted:    #5a7a99;
  --ca-label:         #0d2137;

  /* Sizing */
  --ca-header-height: 60px;
  --ca-bottom-nav-height: 68px;
  --ca-radius-card:   16px;
  --ca-radius-field:  10px;
  --ca-radius-btn:    50px;        /* pill buttons */
  --ca-shadow-card:   0 2px 12px rgba(13,33,55,0.10);
  --ca-shadow-hover:  0 6px 24px rgba(13,33,55,0.18);

  /* Phone frame */
  --ca-phone-width:   390px;
  --ca-phone-radius:  44px;
  --ca-phone-bezel:   10px;
  --ca-sidebar-width: 220px;

  /* Legacy DNC */
  --ca-dnc-bg:        #fff3e0;
  --ca-dnc-border:    #e65100;
}

/* =============================================================
   BASE
   ============================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  padding-top: var(--ca-header-height);
  padding-bottom: var(--ca-bottom-nav-height);
  -webkit-tap-highlight-color: transparent;
  background: var(--ca-bg);
  color: var(--ca-text);
}

/* Utility */
.text-orange { color: var(--ca-orange) !important; }
.text-navy   { color: var(--ca-navy)   !important; }
.text-accent { color: var(--ca-accent) !important; }

/* =============================================================
   HEADER
   ============================================================= */
#app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ca-header-height);
  z-index: 1030;
  background: var(--ca-navy) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}

/* Logo box */
.ca-logo-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--ca-navy-mid);
  border: 2px solid var(--ca-navy-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* App title block */
.ca-header-title {
  flex: 1;
  text-align: center;
  line-height: 1.15;
}
.ca-header-title .ca-title-main {
  display: block;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-transform: uppercase;
}
.ca-header-title .ca-title-sub {
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

/* Right controls cluster */
.ca-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* User avatar circle */
.ca-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ca-accent);
  color: var(--ca-navy);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
}

/* Minimise other header buttons */
#app-header .btn-outline-light {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  padding: 4px 8px;
  font-size: 0.8rem;
}
#app-header .btn-outline-light:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

#sync-badge {
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  border-radius: 20px;
  padding: 2px 7px;
}

/* =============================================================
   BOTTOM NAV
   ============================================================= */
#bottom-nav {
  height: var(--ca-bottom-nav-height);
  z-index: 1029;
  background: var(--ca-navy) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}

#bottom-nav .bottom-nav-btn {
  border-radius: 0;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.18s;
  background: none;
}

#bottom-nav .bottom-nav-btn i { line-height: 1; }

#bottom-nav .bottom-nav-btn.active {
  color: var(--ca-accent);
}

#bottom-nav .bottom-nav-btn:hover { color: rgba(255,255,255,0.75); }

/* =============================================================
   LOGIN SCREEN
   ============================================================= */
#login-screen {
  background: var(--ca-navy);
  color: white;
}

#login-screen .login-card {
  background: var(--ca-bg-card);
  border-radius: 24px;
  padding: 40px 28px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 16px 60px rgba(0,0,0,0.35);
}

#login-screen .login-card h1 {
  color: var(--ca-navy);
  font-size: 1.5rem;
  font-weight: 800;
}

#login-screen .login-card p  { color: var(--ca-text-muted); }

/* =============================================================
   FORM FIELDS  (the key look from the reference image)
   ============================================================= */
.form-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ca-label);
  margin-bottom: 6px;
}

.form-control,
.form-select {
  border: 2px solid var(--ca-border) !important;
  border-radius: var(--ca-radius-field) !important;
  background: var(--ca-bg-card) !important;
  color: var(--ca-text) !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 14px;
  box-shadow: none !important;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ca-accent) !important;
  box-shadow: 0 0 0 3px rgba(245,200,66,0.18) !important;
}

.form-control::placeholder { color: #9fb8d0; font-weight: 400; }

.input-group .form-control { border-radius: var(--ca-radius-field) !important; }
.input-group .input-group-text {
  border: 2px solid var(--ca-border) !important;
  border-right: none !important;
  border-radius: var(--ca-radius-field) 0 0 var(--ca-radius-field) !important;
  background: var(--ca-bg-card) !important;
  color: var(--ca-navy-mid);
}
.input-group .form-control:not(:first-child) {
  border-left: none !important;
  border-radius: 0 var(--ca-radius-field) var(--ca-radius-field) 0 !important;
}

/* =============================================================
   BUTTONS
   ============================================================= */
/* Primary CTA — green pill with amber text */
.btn-primary {
  background: var(--ca-green) !important;
  border-color: var(--ca-green) !important;
  color: var(--ca-accent) !important;
  border-radius: var(--ca-radius-btn);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 28px;
  transition: background 0.18s, box-shadow 0.18s;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--ca-green-light) !important;
  border-color: var(--ca-green-light) !important;
  color: var(--ca-accent) !important;
  box-shadow: 0 4px 16px rgba(45,106,45,0.35) !important;
}

/* Secondary — dashed navy outline */
.btn-outline-secondary {
  border: 2px dashed var(--ca-border) !important;
  color: var(--ca-navy-mid) !important;
  border-radius: var(--ca-radius-btn);
  font-weight: 600;
  background: rgba(255,255,255,0.7) !important;
  transition: background 0.18s;
}
.btn-outline-secondary:hover {
  background: rgba(255,255,255,1) !important;
  color: var(--ca-navy) !important;
}

/* Outline primary (toggle, filters) */
.btn-outline-primary {
  border: 2px solid var(--ca-navy-mid) !important;
  color: var(--ca-navy-mid) !important;
  border-radius: 8px;
  font-weight: 600;
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
  background: var(--ca-navy-mid) !important;
  color: white !important;
}

/* Danger */
.btn-danger { border-radius: 8px; font-weight: 600; }

/* Small utility buttons */
.btn-sm { font-size: 0.78rem; }

/* =============================================================
   SEARCH / FILTER BAR
   ============================================================= */
#section-students > .bg-white {
  background: #c8dbee !important;
  box-shadow: 0 1px 0 rgba(13,33,55,0.08);
}

#filter-panel {
  background: #b8cde4;
  border-radius: 12px;
  padding: 10px;
  margin-top: 4px;
}

/* =============================================================
   STUDENT CARDS
   ============================================================= */
.student-card {
  border-radius: var(--ca-radius-card);
  border: 2px solid var(--ca-border-light);
  border-left: 4px solid var(--ca-navy-mid);
  background: var(--ca-bg-card);
  margin-bottom: 12px;
  transition: box-shadow 0.2s, transform 0.15s;
  overflow: hidden;
  box-shadow: var(--ca-shadow-card);
}

.student-card:hover  { box-shadow: var(--ca-shadow-hover); }
.student-card:active { transform: scale(0.99); }

.student-card.dnc {
  border-left-color: var(--ca-orange);
  background: var(--ca-dnc-bg);
  border-color: #ffccbc;
}

.student-card .card-header-row {
  padding: 12px 14px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-card .student-name {
  font-weight: 700;
  font-size: 1rem;
  flex: 1;
  color: var(--ca-navy);
}

.student-card .card-actions {
  padding: 6px 10px 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.student-card .badge-class {
  font-size: 0.68rem;
  background: linear-gradient(135deg, #dce8f5, #c8daf0);
  color: var(--ca-navy-mid);
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 700;
}

.student-card .badge-dnc {
  font-size: 0.65rem;
  background: linear-gradient(135deg, #e65100, #bf360c);
  color: white;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 700;
}

.student-card .badge-status {
  font-size: 0.65rem;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 700;
}

.student-card .action-btn {
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 10px;
  flex: 1;
  min-width: 72px;
}

/* =============================================================
   PHONE CALL BUTTONS
   ============================================================= */
.btn-call { background: var(--ca-green); color: white; border: none; border-radius: 8px; }
.btn-call:hover { background: var(--ca-green-light); color: white; }

.btn-wa { background: #25d366; color: white; border: none; border-radius: 8px; }
.btn-wa:hover { background: #128c7e; color: white; }

.btn-mom-call { background: linear-gradient(135deg,#2d6a2d,#3d8a3d); color:white; border:none; border-radius:8px; }
.btn-mom-call:hover { background:linear-gradient(135deg,#1b4e1b,#2d6a2d); color:white; }
.btn-mom-wa   { background: linear-gradient(135deg,#66bb6a,#81c784); color:white; border:none; border-radius:8px; }
.btn-mom-wa:hover   { background:linear-gradient(135deg,#43a047,#66bb6a); color:white; }

.btn-dad-call { background: linear-gradient(135deg,#1565c0,#1976d2); color:white; border:none; border-radius:8px; }
.btn-dad-call:hover { background:linear-gradient(135deg,#0d47a1,#1565c0); color:white; }
.btn-dad-wa   { background: linear-gradient(135deg,#42a5f5,#64b5f6); color:white; border:none; border-radius:8px; }
.btn-dad-wa:hover   { background:linear-gradient(135deg,#1e88e5,#42a5f5); color:white; }

.btn-shared-call { background: linear-gradient(135deg,#e65100,#f4511e); color:white; border:none; border-radius:8px; }
.btn-shared-call:hover { background:linear-gradient(135deg,#bf360c,#e65100); color:white; }
.btn-shared-wa   { background: linear-gradient(135deg,#ff7043,#ff8a65); color:white; border:none; border-radius:8px; }
.btn-shared-wa:hover   { background:linear-gradient(135deg,#f4511e,#ff7043); color:white; }

/* =============================================================
   CALLING INTERFACE
   ============================================================= */
.calling-card {
  background: var(--ca-bg-card);
  border-radius: var(--ca-radius-card);
  border: 2px solid var(--ca-border-light);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--ca-shadow-card);
}

.calling-card .card-body { padding: 14px 16px; }

/* Outcome buttons — vertical stack, one per row */
.outcome-btn-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.outcome-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid #b8cce4;
  background: #f8fafd;
  transition: all 0.18s;
  cursor: pointer;
  text-align: left;
  color: var(--ca-navy-mid);
}

.outcome-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.18s;
}

.outcome-btn-label {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
}

.outcome-icon-sm {
  width: 26px;
  height: 26px;
  font-size: 0.78rem;
}

.outcome-btn:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  border-color: #8aafd4;
}

.outcome-btn.selected {
  border-color: #1a3a5c;
  background: #e8f0f8;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.10);
}

.outcome-btn.selected .outcome-icon-wrap {
  transform: scale(1.15);
}

/* =============================================================
   CALL LOG
   ============================================================= */
.call-log-entry {
  border-left: 4px solid #b8cce4;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #f0f5fb;
  border-radius: 0 10px 10px 0;
  font-size: 0.84rem;
  transition: background 0.15s;
}

.call-log-entry:hover { background: #e2eef9; }
.call-log-entry.outcome-answered  { border-left-color:#43a047; background:#f1f8e9; }
.call-log-entry.outcome-no-answer { border-left-color:#f57c00; background:#fff3e0; }
.call-log-entry.outcome-busy      { border-left-color:#e53935; background:#ffebee; }
.call-log-entry.outcome-voicemail { border-left-color:#8e24aa; background:#f3e5f5; }
.call-log-entry .log-time   { font-size: 0.72rem; color: #5a7a99; }
.call-log-entry .log-caller { font-size: 0.7rem; color: #7a9ab8; margin-top: 2px; }

/* =============================================================
   SETTINGS
   ============================================================= */
#settings-tabs {
  background: #c8dbee;
  border-radius: 12px;
  padding: 4px;
  gap: 2px !important;
}

#settings-tabs .nav-link {
  font-size: 0.68rem;
  padding: 5px 6px;
  border-radius: 9px;
  font-weight: 700;
  color: var(--ca-navy-mid);
  border: none;
  transition: all 0.18s;
  letter-spacing: 0.02em;
}

#settings-tabs .nav-link.active {
  background: var(--ca-navy);
  color: var(--ca-accent) !important;
  box-shadow: 0 2px 8px rgba(13,33,55,0.3);
}

#settings-tabs .nav-link:hover:not(.active) {
  background: #b0cde6;
  color: var(--ca-navy);
}

.settings-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f0f5fb;
  border-radius: 10px;
  margin-bottom: 6px;
  border: 2px solid var(--ca-border-light);
  transition: box-shadow 0.15s;
}

.settings-list-item:hover { box-shadow: 0 2px 8px rgba(13,33,55,0.12); }
.settings-list-item .item-text { flex: 1; font-size: 0.9rem; font-weight: 500; }

.settings-list-item .btn-remove { background:none; border:none; color:#ef5350; padding:2px 6px; line-height:1; transition:color 0.15s; }
.settings-list-item .btn-remove:hover { color:#b71c1c; }

/* =============================================================
   DASHBOARD COUNTER CARDS
   ============================================================= */
.counter-card {
  border-radius: var(--ca-radius-card);
  border: none;
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--ca-shadow-card);
  position: relative;
  overflow: hidden;
  color: white;
}

#dashboard-counters .col-6:nth-child(1) .counter-card { background:linear-gradient(135deg,#0d2137,#1a3a5c); }
#dashboard-counters .col-6:nth-child(2) .counter-card { background:linear-gradient(135deg,#0288d1,#0277bd); }
#dashboard-counters .col-6:nth-child(3) .counter-card { background:linear-gradient(135deg,#2d6a2d,#3d8a3d); }
#dashboard-counters .col-6:nth-child(4) .counter-card { background:linear-gradient(135deg,#e65100,#f4511e); }
#dashboard-counters .col-6:nth-child(5) .counter-card { background:linear-gradient(135deg,#c62828,#e53935); }
#dashboard-counters .col-6:nth-child(6) .counter-card { background:linear-gradient(135deg,#b8900a,#d4a818); }
#dashboard-counters .col-6:nth-child(7) .counter-card { background:linear-gradient(135deg,#00695c,#00897b); }
#dashboard-counters .col-6:nth-child(8) .counter-card { background:linear-gradient(135deg,#6a1b9a,#8e24aa); }

.counter-card::after {
  content:''; position:absolute; right:-16px; bottom:-16px;
  width:72px; height:72px; background:rgba(255,255,255,0.1); border-radius:50%;
}

.counter-card .counter-value  { font-size:2.2rem; font-weight:900; line-height:1; color:white; }
.counter-card .counter-label  { font-size:0.72rem; font-weight:700; margin-top:4px; color:rgba(255,255,255,0.82); letter-spacing:0.04em; text-transform:uppercase; }

/* =============================================================
   TABLE VIEW
   ============================================================= */
#students-table-wrap { overflow-x: auto; }

#students-table th {
  font-size: 0.78rem;
  white-space: nowrap;
  background: #c8dbee;
  color: var(--ca-navy);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#students-table td { font-size: 0.84rem; vertical-align: middle; }
#students-table .btn { font-size: 0.73rem; padding: 3px 8px; }
#students-table tbody tr:hover { background: #eef4fb; }

/* =============================================================
   SECTION TRANSITIONS
   ============================================================= */
.section-fade { animation: fadeIn 0.22s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   EMPTY STATE
   ============================================================= */
.empty-state { text-align:center; padding:60px 20px; color:#7a9ab8; }
.empty-state i { font-size:3.5rem; opacity:0.4; color:var(--ca-navy-mid); }

/* =============================================================
   SECTION BACKGROUNDS
   ============================================================= */
#section-students,
#section-dashboard,
#section-reports,
#section-settings,
#section-add-student,
#section-import { background: var(--ca-bg-section); min-height: 100%; }

/* =============================================================
   CARD HEADERS (Bootstrap .card)
   ============================================================= */
.card {
  border: 2px solid var(--ca-border-light) !important;
  border-radius: var(--ca-radius-card) !important;
  background: var(--ca-bg-card);
  box-shadow: var(--ca-shadow-card);
}

.card-header.fw-semibold {
  background: linear-gradient(135deg,#dce8f5,#c8daf0);
  color: var(--ca-navy);
  font-weight: 800 !important;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--ca-border-light);
  border-radius: calc(var(--ca-radius-card) - 2px) calc(var(--ca-radius-card) - 2px) 0 0 !important;
}

/* Student added confirmation */
#student-added-card .alert-success {
  background: linear-gradient(135deg,#e8f5e9,#c8e6c9);
  border-color: #43a047;
  color: #1b5e20;
  border-radius: 14px;
}

/* =============================================================
   STUDENT DETAIL VIEW NAV BAR
   ============================================================= */
#students-detail-wrap > .bg-white {
  background: var(--ca-navy) !important;
  color: white;
}

#students-detail-wrap > .bg-white #calling-student-name { color: white; font-weight: 700; }
#students-detail-wrap > .bg-white .btn-outline-secondary {
  border: 2px solid rgba(255,255,255,0.4) !important;
  color: white !important;
  background: transparent !important;
  border-radius: 8px;
}
#students-detail-wrap > .bg-white .btn-outline-secondary:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.7) !important;
}

/* =============================================================
   PRINT STYLES
   ============================================================= */
@media print {
  #app-header, #bottom-nav, #section-reports .d-grid, .btn, nav { display:none !important; }
  body { padding:0; background:white; }
  #print-preview { display:block !important; }
}

/* =============================================================
   MOBILE TWEAKS
   ============================================================= */
@media (max-width: 576px) {
  .student-card .action-btn { min-width: 68px; font-size: 0.72rem; }
  .outcome-btn { font-size: 0.8rem; padding: 8px 12px; }
  .outcome-icon-wrap { width: 30px; height: 30px; font-size: 0.9rem; }
}

/* =============================================================
   PHONE FRAME MODE  (desktop ≥ 992px)
   ============================================================= */
@media (min-width: 992px) {
  body.phone-frame {
    padding-top:0 !important; padding-bottom:0 !important;
    min-height:100vh;
    background: linear-gradient(145deg,#050f1d 0%,#0d2137 40%,#071c38 100%);
    display:flex; align-items:center; justify-content:center;
  }

  body.phone-frame #login-screen,
  body.phone-frame #access-denied {
    width:var(--ca-phone-width);
    height:min(844px,calc(100vh - 48px));
    min-height:unset;
    border-radius:var(--ca-phone-radius);
    overflow:hidden;
    box-shadow:0 0 0 var(--ca-phone-bezel) #111, 0 0 0 calc(var(--ca-phone-bezel) + 2px) #2a2a2a, 0 40px 120px rgba(0,0,0,0.8);
    flex-shrink:0; position:relative;
  }

  body.phone-frame #app {
    width:var(--ca-phone-width);
    height:min(844px,calc(100vh - 48px));
    border-radius:var(--ca-phone-radius);
    overflow:hidden;
    box-shadow:0 0 0 var(--ca-phone-bezel) #111, 0 0 0 calc(var(--ca-phone-bezel) + 2px) #2a2a2a, 0 40px 120px rgba(0,0,0,0.8);
    display:flex; flex-direction:column; flex-shrink:0;
    padding-top:12px;
    background:var(--ca-bg,#dce8f5);
  }

  body.phone-frame #app::before {
    content:''; display:block; position:absolute; top:14px; left:50%; transform:translateX(-50%);
    width:120px; height:6px; background:#111; border-radius:4px; z-index:2000; pointer-events:none;
  }

  body.phone-frame #app-header { position:relative; flex-shrink:0; }
  body.phone-frame #main-content { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
  body.phone-frame #bottom-nav  { position:relative; flex-shrink:0; }
}

/* =============================================================
   DESKTOP MODE  (sidebar layout)
   ============================================================= */
#desktop-nav {
  position:fixed; top:var(--ca-header-height); left:0; bottom:0;
  width:var(--ca-sidebar-width);
  background:var(--ca-navy);
  border-right:1px solid var(--ca-navy-mid);
  z-index:1025;
  display:flex; flex-direction:column;
  padding:12px 8px; overflow-y:auto;
  box-shadow:2px 0 16px rgba(0,0,0,0.2);
}

#desktop-nav .desktop-nav-brand { font-size:0.85rem; padding:6px 12px 14px; color:rgba(255,255,255,0.45); border-bottom:1px solid var(--ca-navy-mid); margin-bottom:8px; }

#desktop-nav .desktop-nav-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px; border:none; background:none;
  width:100%; text-align:left; font-size:0.88rem; font-weight:600; color:rgba(255,255,255,0.6);
  cursor:pointer; transition:background 0.15s, color 0.15s; margin-bottom:2px;
}

#desktop-nav .desktop-nav-link i { font-size:1.1rem; width:22px; flex-shrink:0; }
#desktop-nav .desktop-nav-link:hover { background:var(--ca-navy-mid); color:white; }
#desktop-nav .desktop-nav-link.active {
  background:var(--ca-navy-mid);
  color:var(--ca-accent);
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

#app.desktop-mode #main-content { margin-left:var(--ca-sidebar-width); padding-bottom:24px; }

#app.desktop-mode #students-content {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px;
}

#app.desktop-mode #students-content .student-card { margin-bottom:0; }
#app.desktop-mode #students-content .empty-state  { grid-column:1/-1; }
#app.desktop-mode #dashboard-counters .col-6 { flex:0 0 25%; max-width:25%; }

/* =============================================================
   DARK MODE
   ============================================================= */
[data-bs-theme="dark"] {
  --bs-body-bg: #060e18;
  --bs-body-color: #c8daf0;
  --ca-bg: #070f1c;
  --ca-bg-card: #0f1e2e;
  --ca-bg-section: #070f1c;
  --ca-border: #2a5080;
  --ca-border-light: #1e3a58;
  --ca-label: #c8daf0;
  --ca-text: #c8daf0;
  --ca-text-muted: #5a7a99;
}

[data-bs-theme="dark"] body { background: var(--ca-bg); color: var(--ca-text); }

[data-bs-theme="dark"] .student-card,
[data-bs-theme="dark"] .calling-card { background:var(--ca-bg-card); border-color:var(--ca-border-light); }

[data-bs-theme="dark"] .student-card { border-left-color: var(--ca-navy-light); }
[data-bs-theme="dark"] .student-card.dnc { background:#1c0f00; border-left-color:#e65100; }
[data-bs-theme="dark"] .student-card .student-name { color:#c8daf0; }
[data-bs-theme="dark"] .student-card .badge-class { background:linear-gradient(135deg,#0f1e2e,#1a3a5c); color:#7aafd4; }

[data-bs-theme="dark"] .call-log-entry { background:#0c1a28; border-left-color:#2a5080; }
[data-bs-theme="dark"] .call-log-entry:hover { background:#112236; }
[data-bs-theme="dark"] .call-log-entry.outcome-answered  { background:#0a1e0a; border-left-color:#43a047; }
[data-bs-theme="dark"] .call-log-entry.outcome-no-answer { background:#1c1000; border-left-color:#f57c00; }
[data-bs-theme="dark"] .call-log-entry.outcome-busy      { background:#1c0808; border-left-color:#e53935; }
[data-bs-theme="dark"] .call-log-entry.outcome-voicemail { background:#14082a; border-left-color:#8e24aa; }

[data-bs-theme="dark"] .settings-list-item { background:#0f1e2e; border-color:var(--ca-border-light); }
[data-bs-theme="dark"] .outcome-btn { background:#0f1e2e; border-color:#2a5080; color:#7aafd4; }

[data-bs-theme="dark"] #bottom-nav { background:var(--ca-navy) !important; box-shadow:0 -2px 16px rgba(0,0,0,0.5); }
[data-bs-theme="dark"] #bottom-nav .bottom-nav-btn { color:rgba(255,255,255,0.3); }
[data-bs-theme="dark"] #bottom-nav .bottom-nav-btn.active { color:var(--ca-accent); }

[data-bs-theme="dark"] .bg-white { background:#0f1e2e !important; }
[data-bs-theme="dark"] .border-bottom { border-color:#1e3a58 !important; }
[data-bs-theme="dark"] #filter-panel { background:#091526; }
[data-bs-theme="dark"] #section-students > .bg-white { background:#091526 !important; }

[data-bs-theme="dark"] #settings-tabs { background:#091526; }
[data-bs-theme="dark"] #settings-tabs .nav-link { color:#7aafd4; }
[data-bs-theme="dark"] #settings-tabs .nav-link.active { background:var(--ca-navy-mid); color:var(--ca-accent) !important; }
[data-bs-theme="dark"] #settings-tabs .nav-link:hover:not(.active) { background:#0f2030; color:#c8daf0; }

[data-bs-theme="dark"] .card { background:var(--ca-bg-card) !important; border-color:var(--ca-border-light) !important; }
[data-bs-theme="dark"] .card-header.fw-semibold { background:linear-gradient(135deg,#0f1e2e,#091526); color:#7aafd4; border-color:var(--ca-border-light); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background:#091526 !important; border-color:#2a5080 !important; color:#c8daf0 !important; }

[data-bs-theme="dark"] #students-table th { background:#091526; color:#7aafd4; }
[data-bs-theme="dark"] #students-table tbody tr:hover { background:#0f1e2e; }

[data-bs-theme="dark"] #students-detail-wrap > .bg-white { background:var(--ca-navy) !important; }

[data-bs-theme="dark"] body.phone-frame {
  background:linear-gradient(145deg,#020608 0%,#04111f 50%,#020a14 100%);
}

/* =============================================================
   IMPORT PAGE
   ============================================================= */
#section-import code { font-size:0.78rem; background:#dce8f5; color:var(--ca-navy-mid); padding:1px 5px; border-radius:4px; font-weight:600; }
[data-bs-theme="dark"] #section-import code { background:#0f1e2e; color:#7aafd4; }

#import-preview-table th { background:#dce8f5; color:var(--ca-navy); font-weight:700; }
#import-preview-table th,
#import-preview-table td { font-size:0.78rem; padding:4px 8px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }