/* ============================================================
   Faculty Connect Portal — Main Stylesheet  v3
   Single source of truth for all pages
   ============================================================ */

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ── CSS VARIABLES ── */
:root {
  --primary:          #2563EB;
  --primary-light:    #EFF6FF;
  --primary-dark:     #1D4ED8;
  --accent:           #7C3AED;
  --accent-light:     #F5F3FF;
  --success:          #059669;
  --success-light:    #ECFDF5;
  --success-border:   #A7F3D0;
  --warning:          #D97706;
  --warning-light:    #FFFBEB;
  --warning-border:   #FDE68A;
  --danger:           #DC2626;
  --danger-light:     #FEF2F2;
  --danger-border:    #FECACA;
  --closed:           #6B7280;
  --closed-light:     #F3F4F6;
  --closed-border:    #D1D5DB;
  --bg:               #F1F5F9;
  --surface:          #FFFFFF;
  --text-primary:     #0F172A;
  --text-secondary:   #475569;
  --text-muted:       #94A3B8;
  --border:           #E2E8F0;
  --border-strong:    #CBD5E1;
  --sidebar-w:        260px;
  --header-h:         64px;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        14px;
  --radius-xl:        20px;
  --shadow-sm:        0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:        0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:        0 10px 25px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.04);
  --font:             'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ── BASE ── */
body {
  font-family: var(--font);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }

/* ============================================================
   AUTH PAGES
   ============================================================ */

body.auth-page {
  min-height: 100vh;
  background: url("/assets/flame-university-background.jpg") center/cover no-repeat fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

body.auth-page.landing { height: 100vh; }

.auth-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Portal landing */
.portal-container {
  position: relative; z-index: 2;
  text-align: center; color: #fff;
}
.portal-container h1 { font-weight:600; margin-bottom:40px; letter-spacing:1px; }

.portal-buttons { display:flex; gap:40px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

.portal-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width:230px; height:210px; border-radius:22px;
  color:#fff; font-size:22px; font-weight:700; letter-spacing:.5px;
  transition:.35s ease;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 15px 35px rgba(0,0,0,.35);
}
.portal-btn span { font-size:64px; margin-bottom:18px; }
.portal-btn:hover { transform:translateY(-10px) scale(1.05); background:rgba(255,255,255,0.20); box-shadow:0 25px 55px rgba(0,0,0,.55); }

/* Logo glow */
.logo-wrap { position:relative; display:inline-block; margin-bottom:28px; }
.logo-wrap::before {
  content:""; position:absolute; left:-20%; right:-20%; top:-50%; bottom:-50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.80) 0%, rgba(255,255,255,.28) 38%, rgba(255,255,255,.10) 58%, transparent 72%);
  filter: blur(22px); z-index:-1;
}
.logo-wrap img { height:72px; display:block; }

/* Login card */
.auth-card {
  position:relative; z-index:2;
  width:100%; max-width:440px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius:20px; padding:44px 40px 40px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.45);
  text-align:center; color:#fff;
}
.auth-card .portal-label { font-size:11.5px; font-weight:600; letter-spacing:.20em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:6px; }
.auth-card h1 { font-size:26px; font-weight:700; margin-bottom:6px; color:#fff; }
.auth-card .subtitle { font-size:14px; color:rgba(255,255,255,.60); margin-bottom:32px; line-height:1.5; }

.auth-divider { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.auth-divider hr { flex:1; border:none; border-top:1px solid rgba(255,255,255,.18); }
.auth-divider span { font-size:12px; color:rgba(255,255,255,.45); white-space:nowrap; }

/* Google button */
.google-btn {
  display:flex; align-items:center; justify-content:center; gap:13px;
  width:100%; padding:14px 20px;
  background:#fff; color:#1a1a1a; border:none; border-radius:10px;
  font-size:15px; font-weight:600; cursor:pointer;
  transition:all .22s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,.30); margin-bottom:24px;
}
.google-btn:hover { background:#f1f1f1; transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.38); }
.google-btn:active { transform:translateY(0); }
.google-icon { width:20px; height:20px; flex-shrink:0; }

/* Auth form */
.auth-form { display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.auth-form input {
  width:100%; padding:13px 16px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  border-radius:10px; font-size:14px; color:#fff; outline:none;
  transition: border .18s, background .18s;
}
.auth-form input::placeholder { color:rgba(255,255,255,.45); }
.auth-form input:focus { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.50); }
.auth-form button {
  width:100%; padding:13px;
  background:rgba(255,255,255,.92); color:#1a1a1a; border:none; border-radius:10px;
  font-size:15px; font-weight:700; cursor:pointer;
  transition:all .22s ease; box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.auth-form button:hover { background:#fff; transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.35); }

.auth-error   { background:rgba(211,47,47,.20); border:1px solid rgba(211,47,47,.45); color:#ffcdd2; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; text-align:center; }
.auth-success { background:rgba(46,125,50,.20);  border:1px solid rgba(46,125,50,.45);  color:#c8e6c9; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; text-align:center; }

.auth-info-box {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:13px 16px; font-size:13px; color:rgba(255,255,255,.70);
  line-height:1.6; margin-bottom:28px; text-align:left; display:flex; gap:11px; align-items:flex-start;
}
.auth-back { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:rgba(255,255,255,.55); transition:color .18s; }
.auth-back:hover { color:rgba(255,255,255,.90); }
.auth-back svg { width:14px; height:14px; }
.auth-card-footer { margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-size:12px; color:rgba(255,255,255,.35); line-height:1.6; }

/* Reset password */
body.reset-page { display:flex; justify-content:center; align-items:center; height:100vh; background:var(--bg); }
.reset-box { background:#fff; padding:30px; width:400px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,.1); }
.reset-box h2 { margin-top:0; text-align:center; color:var(--primary); }
.reset-box input { width:100%; padding:10px; margin-bottom:15px; border-radius:6px; border:1px solid #ccc; font-size:14px; }
.reset-box button { width:100%; padding:10px; background:var(--primary); color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:15px; font-weight:600; }

/* Alert boxes */
.alert-error   { background:#ffebee; color:#c62828; padding:10px; border-radius:6px; margin-bottom:15px; text-align:center; font-size:13px; }
.alert-success { background:#e8f5e9; color:#2e7d32; padding:10px; border-radius:6px; margin-bottom:15px; text-align:center; font-size:13px; }
.alert-info    { background:#e3f2fd; color:#1565c0; padding:10px; border-radius:6px; margin-bottom:15px; font-size:13px; }
.alert-warning { background:#fff3e0; border-left:5px solid #fb8c00; padding:15px; margin-bottom:20px; border-radius:8px; font-size:13px; }
.text-link { text-align:center; margin-top:10px; font-size:13px; }

/* ============================================================
   LAYOUT — SIDEBAR + MAIN  (Faculty & Student dashboards)
   ============================================================ */

.layout { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh; z-index:100;
}

.sidebar-brand { padding:20px 20px 16px; border-bottom:1px solid var(--border); }
.brand-logo { display:flex; align-items:center; gap:10px; }
.brand-icon {
  width:36px; height:36px; background:var(--primary); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; flex-shrink:0;
}
.brand-text h1 { font-size:15px; font-weight:700; color:var(--text-primary); letter-spacing:-.3px; }
.brand-text p  { font-size:11px; color:var(--text-muted); margin-top:1px; }

.sidebar-profile { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }

.avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--primary-light); border:2px solid var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; color:var(--primary); flex-shrink:0; overflow:hidden;
}
.avatar img { width:100%; height:100%; object-fit:cover; }
.profile-info h3 { font-size:13px; font-weight:600; color:var(--text-primary); }
.profile-info p  { font-size:11px; color:var(--text-muted); }

.sidebar-nav { padding:12px; flex:1; overflow-y:auto; }

.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-sm);
  font-size:13.5px; color:var(--text-secondary);
  cursor:pointer; transition:background .15s, color .15s; margin-bottom:2px;
}
.nav-item:hover { background:var(--bg); color:var(--text-primary); }
.nav-item.active { background:var(--primary-light); color:var(--primary); font-weight:600; }
.nav-item .nav-icon { font-size:17px; width:20px; text-align:center; flex-shrink:0; }
.nav-item .nav-badge {
  margin-left:auto; background:var(--danger); color:#fff;
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:20px; min-width:18px; text-align:center;
}

.sidebar-footer { padding:12px; border-top:1px solid var(--border); }
.sidebar-footer a {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-sm);
  font-size:13.5px; color:var(--text-secondary); transition:background .15s;
}
.sidebar-footer a:hover { background:var(--danger-light); color:var(--danger); }

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

/* Top bar */
.topbar {
  height:var(--header-h); background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; position:sticky; top:0; z-index:50;
}
.topbar-left h2 { font-size:17px; font-weight:700; color:var(--text-primary); }
.topbar-left p  { font-size:12px; color:var(--text-muted); margin-top:1px; }
.topbar-actions { display:flex; align-items:center; gap:10px; }

.icon-btn {
  width:36px; height:36px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; font-size:17px; color:var(--text-secondary);
  transition:background .15s, border-color .15s;
}
.icon-btn:hover { background:var(--bg); border-color:var(--border-strong); }

.notif-dot {
  position:absolute; top:-4px; right:-4px;
  background:var(--danger); color:#fff; font-size:9px; font-weight:700;
  min-width:16px; height:16px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px; border:2px solid var(--surface);
}

.page-body { padding:28px; flex:1; }

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* Badges */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.2px;
}
.badge-pending  { background:var(--warning-light);  color:var(--warning);  border:1px solid var(--warning-border); }
.badge-answered { background:var(--success-light);  color:var(--success);  border:1px solid var(--success-border); }
.badge-closed   { background:var(--closed-light);   color:var(--closed);   border:1px solid var(--closed-border);  }
/* Admin legacy badge names */
.badge-active, .badge-shortlisted { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.badge-inactive,.badge-withdrawn  { background:#ffebee; color:#c62828; border:1px solid #ef9a9a; }

/* SLA time chip */
.time-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; border:1px solid transparent; }
.time-green  { background:var(--success-light); color:var(--success); border-color:var(--success-border); }
.time-orange { background:var(--warning-light); color:var(--warning); border-color:var(--warning-border); }
.time-red    { background:var(--danger-light);  color:var(--danger);  border-color:var(--danger-border);  }
.overdue-tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--danger); background:var(--danger-light); border:1px solid var(--danger-border); padding:3px 10px; border-radius:20px; }

/* Generic card */
.card { background:var(--surface); padding:15px 20px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); margin-bottom:16px; border:1px solid var(--border); }

/* Buttons */
.btn { display:inline-block; padding:5px 10px; border-radius:var(--radius-sm); color:#fff; font-size:12px; margin-right:4px; cursor:pointer; border:none; font-family:var(--font); }
.btn-orange { background:#ef6c00; }
.btn-blue   { background:#1565c0; }
.btn-red    { background:#c62828; }
.btn-green  { background:#2e7d32; }
.btn-gray   { background:#455a64; }

.btn-primary { width:100%; padding:10px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s; font-family:var(--font); }
.btn-primary:hover { background:var(--primary-dark); }

.btn-profile { display:flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:13px; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:background .15s; font-family:var(--font); }
.btn-profile:hover { background:var(--bg); border-color:var(--border-strong); color:var(--text-primary); }

/* Nav links (admin pages) */
.nav-link { display:inline-block; padding:8px 14px; border-radius:var(--radius-sm); margin-left:8px; color:#fff; font-size:14px; font-weight:500; }
.nav-blue   { background:var(--primary); }
.nav-green  { background:#2e7d32; }
.nav-red    { background:#d32f2f; }
.nav-gray   { background:#455a64; }
.nav-orange { background:#ef6c00; }

/* KPI grid (admin) */
.kpi-grid  { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:28px; }
.kpi-card  { background:var(--surface); padding:20px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); cursor:pointer; border:1px solid var(--border); }
.kpi-card .label { font-size:13px; color:#666; margin-bottom:6px; }
.kpi-card .value { font-size:26px; font-weight:700; color:var(--text-primary); }

/* Stats grid (faculty dashboard) */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px 20px; display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s,transform .2s;
}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.stat-icon { width:44px; height:44px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.stat-icon.pending  { background:var(--warning-light);  color:var(--warning);  }
.stat-icon.answered { background:var(--success-light);  color:var(--success);  }
.stat-icon.closed   { background:var(--closed-light);   color:var(--closed);   }
.stat-icon.overdue  { background:var(--danger-light);   color:var(--danger);   }
.stat-info p  { font-size:12px; color:var(--text-muted); margin-bottom:2px; }
.stat-info h3 { font-size:26px; font-weight:700; color:var(--text-primary); letter-spacing:-.5px; line-height:1; }

/* Data tables (admin) */
.data-table { width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); margin-top:16px; }
.data-table th { padding:12px 14px; background:#fafafa; font-size:13px; font-weight:600; color:#555; border-bottom:1px solid var(--border); text-align:left; }
.data-table td { padding:12px 14px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:#f9fafb; }

/* Filter panel */
.filter-panel { background:var(--surface); padding:16px 20px; border-radius:var(--radius-md); margin-bottom:22px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.filter-panel input, .filter-panel select { padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:var(--font); }
.filter-panel button { padding:8px 16px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:14px; font-weight:500; }

/* Search bar */
.search-bar { display:flex; gap:8px; margin-bottom:16px; }
.search-bar input { padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; width:260px; }
.search-bar button { padding:8px 16px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:14px; }

/* Bulk bar */
.bulk-bar { display:flex; gap:10px; align-items:center; margin:14px 0; flex-wrap:wrap; }
.bulk-bar select { padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; }
.bulk-bar button { padding:8px 14px; background:#333; color:#fff; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:14px; font-family:var(--font); }

/* Pagination */
.pagination { margin-top:16px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.pagination a { padding:5px 10px; border-radius:var(--radius-sm); font-size:13px; background:var(--surface); border:1px solid var(--border); color:#333; }
.pagination a.active-page { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }

/* Chart wrap */
.chart-wrap { width:550px; max-width:100%; margin:20px auto; }

/* Tooltip */
.tooltip-box { position:absolute; background:#222; color:#fff; padding:6px 10px; border-radius:var(--radius-sm); font-size:12px; display:none; pointer-events:none; white-space:pre; z-index:999; }

/* Section header row */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.section-header h3 { font-size:15px; font-weight:600; color:var(--text-primary); }

/* ============================================================
   TABS BAR
   ============================================================ */
.tabs-bar {
  display:flex; align-items:center; gap:4px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:4px;
  box-shadow:var(--shadow-sm); margin-bottom:20px; flex-wrap:wrap;
}
.tab-link { padding:7px 16px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:background .15s,color .15s; white-space:nowrap; }
.tab-link:hover { background:var(--bg); color:var(--text-primary); }
.tab-link.active-pending  { background:var(--warning-light);  color:var(--warning);  }
.tab-link.active-answered { background:var(--success-light);  color:var(--success);  }
.tab-link.active-closed   { background:var(--closed-light);   color:var(--closed);   }
.tab-link.active-overdue  { background:var(--danger-light);   color:var(--danger);   }
.tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:18px; border-radius:10px; font-size:10px; font-weight:700; padding:0 5px; margin-left:5px; background:rgba(0,0,0,.07); }

/* ============================================================
   CONVERSATION CARDS (faculty dashboard list)
   ============================================================ */
.conv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.conv-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px 20px; box-shadow:var(--shadow-sm);
  transition:box-shadow .2s,transform .2s,border-color .2s;
  display:flex; flex-direction:column; gap:12px;
}
.conv-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--border-strong); }
.conv-card.is-overdue { border-left:3px solid var(--danger); }
.conv-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.conv-student { display:flex; align-items:center; gap:10px; }
.student-avatar { width:36px; height:36px; border-radius:50%; background:var(--accent-light); color:var(--accent); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.student-name  { font-size:14px; font-weight:600; color:var(--text-primary); }
.student-label { font-size:11px; color:var(--text-muted); }
.conv-subject  { font-size:13.5px; color:var(--text-secondary); line-height:1.5; border-top:1px solid var(--border); padding-top:10px; }
.conv-meta     { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.conv-action   { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.btn-open { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:var(--primary); color:#fff; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600; transition:background .15s,transform .1s; }
.btn-open:hover { background:var(--primary-dark); transform:translateX(2px); }

/* Empty state */
.empty-state { grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-muted); }
.empty-state .empty-icon { font-size:48px; margin-bottom:12px; opacity:.4; }
.empty-state p { font-size:14px; }

/* ============================================================
   STUDENT DASHBOARD
   ============================================================ */
.thread-card { background:var(--surface); padding:12px 16px; margin:8px 0; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); display:block; color:var(--text-primary); transition:box-shadow .15s; border:1px solid var(--border); }
.thread-card:hover { box-shadow:var(--shadow-md); }
.thread-card.closed { opacity:.6; }

.faculty-card { background:var(--surface); padding:16px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); text-align:center; width:210px; display:inline-block; margin:10px; vertical-align:top; border:1px solid var(--border); }
.faculty-card img { width:100px; height:100px; border-radius:50%; object-fit:cover; margin-bottom:10px; }

.bell-wrap { font-size:20px; position:relative; display:inline-block; }
/* notif-dot already defined above */

/* ============================================================
   MODAL
   ============================================================ */
.modal { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:999; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal.open { display:flex; }
.modal-box { background:var(--surface); border-radius:var(--radius-xl); padding:28px 32px; width:100%; max-width:460px; position:relative; box-shadow:var(--shadow-lg); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.modal-header h3 { font-size:17px; font-weight:700; color:var(--text-primary); }
.modal-close { width:30px; height:30px; border-radius:50%; background:var(--bg); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); font-size:15px; transition:background .15s; }
.modal-close:hover { background:var(--border); }

/* Form groups inside modal */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.form-group input { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:var(--font); color:var(--text-primary); background:var(--surface); transition:border-color .15s,box-shadow .15s; }
.form-group input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.form-group input:disabled { background:var(--bg); color:var(--text-muted); cursor:not-allowed; }
.form-group input[type="file"] { padding:7px 12px; cursor:pointer; }

/* Avatar upload widget */
.avatar-upload { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding:14px; background:var(--bg); border-radius:var(--radius-md); border:1px dashed var(--border-strong); }
.avatar-upload .preview-avatar { width:52px; height:52px; border-radius:50%; background:var(--primary-light); border:2px solid var(--primary); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--primary); overflow:hidden; flex-shrink:0; }
.avatar-upload .preview-avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-upload-text p    { font-size:13px; font-weight:600; color:var(--text-primary); }
.avatar-upload-text span { font-size:11px; color:var(--text-muted); }

/* ============================================================
   CONVERSATION PAGE
   ============================================================ */
body.conv-page { overflow:hidden; }
body.conv-page .layout { height:100vh; overflow:hidden; }
.conv-main { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* Header bar */
.conv-header-bar { display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:68px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; gap:12px; }
.conv-header-left { display:flex; align-items:center; gap:16px; min-width:0; }
.back-link { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:500; color:var(--text-muted); white-space:nowrap; flex-shrink:0; transition:color .15s; }
.back-link:hover { color:var(--primary); }
.conv-header-student { display:flex; align-items:center; gap:12px; min-width:0; }
.student-avatar-lg { width:40px; height:40px; border-radius:50%; background:var(--accent-light); color:var(--accent); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:2px solid var(--accent); }
.conv-header-name    { font-size:15px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-header-subject { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; }
.conv-header-right   { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.btn-close-conv { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--danger-border); border-radius:var(--radius-sm); background:var(--danger-light); color:var(--danger); font-size:12.5px; font-weight:600; cursor:pointer; transition:background .15s; }
.btn-close-conv:hover { background:#fecaca; }

/* Chat area */
.chat-area { flex:1; overflow-y:auto; padding:24px 32px; display:flex; flex-direction:column; gap:6px; background:var(--bg); scroll-behavior:smooth; }
.chat-area::-webkit-scrollbar { width:5px; }
.chat-area::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:10px; }

/* Date separator */
.date-sep { display:flex; align-items:center; gap:12px; margin:12px 0 8px; }
.date-sep::before,.date-sep::after { content:''; flex:1; height:1px; background:var(--border); }
.date-sep span { font-size:11px; font-weight:600; color:var(--text-muted); padding:0 10px; white-space:nowrap; }

/* Message rows */
.msg-row { display:flex; gap:10px; align-items:flex-start; max-width:760px; width:100%; margin-bottom:10px; }
.msg-faculty { flex-direction:row-reverse; margin-left:auto; }

.msg-av-img  { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--border); display:block; }
.msg-av-init { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.av-faculty  { background:var(--primary-light); color:var(--primary); border:2px solid var(--primary); }
.av-student  { background:var(--accent-light);  color:var(--accent);  border:2px solid var(--accent);  }

.msg-bubble-wrap { display:flex; flex-direction:column; gap:4px; max-width:calc(100% - 46px); }
.msg-faculty .msg-bubble-wrap { align-items:flex-end; }
.msg-student .msg-bubble-wrap { align-items:flex-start; }

.msg-name-row { display:flex; align-items:center; gap:7px; padding:0 4px; }
.msg-faculty .msg-name-row { flex-direction:row-reverse; }
.msg-name { font-size:12.5px; font-weight:600; color:var(--text-primary); }
.msg-role-pill { font-size:10px; font-weight:600; padding:2px 7px; border-radius:20px; }
.pill-faculty { background:var(--primary-light); color:var(--primary); }
.pill-student { background:var(--accent-light);  color:var(--accent);  }
.msg-time     { font-size:10.5px; color:var(--text-muted); }

.msg-bubble { padding:12px 16px; border-radius:16px; border:1px solid var(--border); word-break:break-word; line-height:1.65; }
.bubble-student { background:var(--surface); border-radius:4px 16px 16px 16px; }
.bubble-faculty { background:#EFF6FF; border-color:#BFDBFE; border-radius:16px 4px 16px 16px; }
.msg-text { font-size:13.5px; color:var(--text-primary); }

/* Attachments */
.msg-attachment  { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.attach-img      { max-width:240px; border-radius:var(--radius-md); display:block; margin-bottom:8px; border:1px solid var(--border); }
.attach-file-card{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); font-size:12.5px; font-weight:500; color:var(--text-secondary); margin-bottom:8px; }
.attach-file-card i { font-size:18px; color:var(--primary); }
.attach-actions  { display:flex; gap:8px; flex-wrap:wrap; }
.btn-attach { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:12px; font-weight:500; color:var(--text-secondary); cursor:pointer; font-family:var(--font); transition:background .15s; }
.btn-attach:hover { background:var(--bg); border-color:var(--border-strong); color:var(--text-primary); }

/* Composer */
.composer { flex-shrink:0; background:var(--surface); border-top:1px solid var(--border); padding:14px 24px 16px; }
.composer-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.composer-av { width:28px; height:28px; border-radius:50%; background:var(--primary-light); color:var(--primary); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; border:2px solid var(--primary); }
.composer-av img { width:100%; height:100%; object-fit:cover; }
.composer-label { font-size:12px; color:var(--text-muted); }
.composer-label strong { color:var(--text-primary); font-weight:600; }

/* Editor toolbar */
.editor-toolbar { display:flex; align-items:center; gap:2px; padding:5px 8px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm) var(--radius-sm) 0 0; border-bottom:none; flex-wrap:wrap; }
.tb-btn { width:30px; height:28px; border:none; background:transparent; border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); font-size:15px; transition:background .12s,color .12s; }
.tb-btn:hover { background:var(--border); color:var(--text-primary); }
.tb-divider { width:1px; height:18px; background:var(--border); margin:0 4px; }

/* Editable area */
.editor-area { min-height:90px; max-height:200px; overflow-y:auto; padding:12px 14px; border:1px solid var(--border); border-radius:0 0 var(--radius-sm) var(--radius-sm); font-size:14px; font-family:var(--font); color:var(--text-primary); background:var(--surface); outline:none; line-height:1.65; transition:border-color .15s,box-shadow .15s; }
.editor-area:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.editor-area:empty::before { content:attr(data-placeholder); color:var(--text-muted); pointer-events:none; }
.editor-area blockquote { border-left:3px solid var(--primary); padding-left:12px; margin:6px 0; color:var(--text-secondary); }
.editor-area a { color:var(--primary); text-decoration:underline; }

/* Composer footer */
.composer-footer { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.attach-label { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; color:var(--text-secondary); font-size:17px; transition:background .15s,color .15s; }
.attach-label:hover { background:var(--bg); color:var(--primary); border-color:var(--primary); }
.file-input  { display:none; }
.attach-name { font-size:12px; color:var(--text-muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-discard { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:13px; font-weight:500; color:var(--text-secondary); cursor:pointer; font-family:var(--font); transition:background .15s; }
.btn-discard:hover { background:var(--bg); color:var(--text-primary); }
.btn-send { display:inline-flex; align-items:center; gap:7px; padding:8px 20px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; cursor:pointer; font-family:var(--font); transition:background .15s; }
.btn-send:hover { background:var(--primary-dark); }
.closed-notice { flex-shrink:0; display:flex; align-items:center; gap:10px; padding:14px 24px; background:var(--closed-light); border-top:1px solid var(--closed-border); font-size:13.5px; color:var(--closed); font-weight:500; }

/* PDF preview modal */
.preview-modal-box { background:var(--surface); border-radius:var(--radius-xl); width:90vw; max-width:860px; height:82vh; position:relative; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); }
.preview-close { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:var(--bg); border:1px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); font-size:16px; z-index:10; transition:background .15s; }
.preview-close:hover { background:var(--border); }
#previewFrame { width:100%; height:100%; border:none; border-radius:var(--radius-xl); }

/* Performance bar (admin) */
.perf-bar-bg   { background:#eee; width:120px; height:10px; border-radius:5px; display:inline-block; vertical-align:middle; }
.perf-bar-fill { background:#4caf50; height:10px; border-radius:5px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px) { .stats-grid { grid-template-columns:repeat(2,1fr); } }

@media (max-width:900px) {
  .sidebar { transform:translateX(-100%); transition:transform .25s; }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
}

@media (max-width:700px) {
  .chat-area { padding:16px; }
  .composer { padding:12px 16px; }
  .conv-header-bar { padding:0 16px; height:auto; min-height:64px; flex-wrap:wrap; padding-top:10px; padding-bottom:10px; }
  .conv-header-subject { max-width:180px; }
  .msg-row { max-width:100%; }
}

@media (max-width:600px) {
  .portal-btn { width:160px; height:155px; font-size:18px; }
  .portal-btn span { font-size:42px; }
  .logo-wrap img { height:58px; }
  .auth-card { padding:34px 22px 30px; }
  .auth-card h1 { font-size:22px; }
  .modal-box { width:92%; margin:12% auto; }
  .kpi-grid, .stats-grid { grid-template-columns:1fr 1fr; }
  .data-table { font-size:13px; }
  .filter-panel { flex-direction:column; align-items:flex-start; }
  .page-body { padding:16px; }
  .topbar { padding:0 16px; }
  .tabs-bar { overflow-x:auto; }
  .conv-grid { grid-template-columns:1fr; }
}






/* ============================================================
   student.css  —  Student portal page styles
   All classes use the  stu-  prefix so they NEVER conflict
   with the existing style.css rules.
   Place this file at:  /assets/student.css
   Load it AFTER style.css on every student page.
   ============================================================ */

/* ── HERO BANNER ── */
.stu-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #7c3aed 100%);
  padding: 28px 28px 64px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.stu-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.stu-hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 40%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.stu-hero-greeting { font-size: 13px; font-weight: 500; opacity: .7; letter-spacing: .5px; margin-bottom: 4px; }
.stu-hero-name     { font-size: 26px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 4px; }
.stu-hero-sub      { font-size: 13px; opacity: .65; }

/* ── STATS ROW (pulled up over hero) ── */
.stu-stats-row {
  margin: -40px 28px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
  z-index: 10;
}
.stu-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
  transition: box-shadow .2s, transform .2s;
}
.stu-stat-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.14); transform: translateY(-2px); }

.stu-stat-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.stu-icon-all      { background: var(--primary-light); color: var(--primary); }
.stu-icon-unread   { background: var(--danger-light);  color: var(--danger);  }
.stu-icon-answered { background: var(--success-light); color: var(--success); }

.stu-stat-info p  {
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 2px;
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
.stu-stat-info h3 {
  font-size: 28px; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.5px; line-height: 1;
}

/* ── TWO-COLUMN BODY ── */
.stu-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  padding: 0 28px 28px;
}

/* ── SECTION TOPBAR ── */
.stu-section-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.stu-section-topbar h3 { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.stu-count-label {
  font-size: 12px; font-weight: 500;
  color: var(--text-muted); margin-left: 6px;
}

/* Search input */
.stu-conv-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 7px 12px;
  font-size: 13px; color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.stu-conv-search input {
  border: none; outline: none;
  font-size: 13px; color: var(--text-primary);
  font-family: var(--font); width: 160px;
  background: transparent;
}
.stu-conv-search input::placeholder { color: var(--text-muted); }

/* ── CONVERSATION CARDS ── */
.stu-conv-list { display: flex; flex-direction: column; gap: 12px; }

.stu-conv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .15s, border-color .15s;
  display: flex; flex-direction: column; gap: 10px;
}
.stu-conv-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.stu-conv-card.has-unread { border-left: 3px solid var(--danger); }

.stu-conv-card-top {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.stu-conv-card-who { display: flex; align-items: center; gap: 10px; }

/* Faculty initials avatar */
.stu-fac-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  color: var(--primary); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 2px solid #bfdbfe;
}
.stu-fac-name  { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.stu-fac-label { font-size: 11px; color: var(--text-muted); }

.stu-conv-subject {
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.5;
}

.stu-conv-card-foot {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.stu-conv-time { font-size: 12px; color: var(--text-muted); }

/* ── RIGHT SIDEBAR WIDGETS ── */
.stu-right-col { display: flex; flex-direction: column; gap: 20px; }

.stu-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.stu-widget-title {
  font-size: 12px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 14px;
}

/* Faculty list in sidebar */
.stu-fac-grid  { display: flex; flex-direction: column; gap: 10px; }
.stu-fac-item  { display: flex; align-items: center; gap: 10px; }
.stu-fac-item-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe, #dbeafe);
  color: var(--primary); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stu-fac-item-info { flex: 1; min-width: 0; }
.stu-fac-item-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stu-fac-item-sub { font-size: 11px; color: var(--text-muted); }

.stu-btn-ask-sm {
  padding: 5px 12px;
  background: var(--primary-light); color: var(--primary);
  border: 1px solid #bfdbfe; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap; font-family: var(--font);
  transition: background .15s;
}
.stu-btn-ask-sm:hover { background: #dbeafe; }

/* Quick tips */
.stu-tip-list { display: flex; flex-direction: column; gap: 8px; }
.stu-tip-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
}
.stu-tip-item i { color: var(--primary); flex-shrink: 0; margin-top: 2px; }

/* ── TOPBAR BUTTONS ── */
.stu-btn-new {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font); transition: background .15s;
}
.stu-btn-new:hover { background: var(--primary-dark); }

/* ── ASK MODAL EXTRAS ── */
.stu-ask-modal-box { max-width: 480px; }

.stu-ask-fac-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary-light); border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm); padding: 6px 12px;
  font-size: 13px; font-weight: 600; color: var(--primary);
  margin-bottom: 18px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .stu-stats-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .stu-body { grid-template-columns: 1fr; }
  .stu-right-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .stu-stats-row { grid-template-columns: 1fr 1fr; margin: -36px 16px 20px; }
  .stu-body { padding: 0 16px 24px; }
  .stu-right-col { grid-template-columns: 1fr; }
  .stu-ask-modal-box { width: 94vw; }
}