/* ================================================================
   Faculty Dashboard CSS — VGU Design System
   Full responsive rewrite — mobile-first
   ================================================================ */

/* ── Variables ───────────────────────────────────────────────── */
:root {
  --red:#C04036; --red-d:#a32e25; --gold:#FFA412;
  --dark:#1a0a0a; --dark2:#262626;
  --grey:#555; --light:#F7F6F4; --border:#e8e4e0; --white:#ffffff;
  --font-head:'Nunito Sans','Segoe UI',sans-serif;
  --font-body:'Nunito','Segoe UI',sans-serif;
  --radius:12px;
  --shadow:0 4px 20px rgba(0,0,0,0.08);
  --shadow-h:0 12px 36px rgba(0,0,0,0.14);
  --green:#1a8a4a; --green-bg:#e8f5ee;
  --amber:#b45309; --amber-bg:#fef3c7;
}

/* ── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font-body); background:var(--light); color:var(--dark2); font-size:14px; line-height:1.6; -webkit-text-size-adjust:100%; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
input,button,select,textarea { font-family:inherit; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ── Topbar ──────────────────────────────────────────────────── */
.fac-topbar {
  background:var(--dark2); height:52px; display:flex; align-items:center;
  position:sticky; top:0; z-index:200; box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.fac-topbar .container { display:flex; align-items:center; justify-content:space-between; }
.fac-topbar-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.fac-topbar-logo { height:30px; flex-shrink:0; }
.fac-topbar-title { font-family:var(--font-head); font-weight:800; font-size:15px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fac-topbar-title span { color:var(--gold); }
.fac-topbar-nav { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.fac-topbar-nav a { color:rgba(255,255,255,.7); font-size:12px; font-family:var(--font-head); font-weight:600; padding:5px 10px; border-radius:6px; transition:all .15s; white-space:nowrap; }
.fac-topbar-nav a:hover, .fac-topbar-nav a.active { background:rgba(255,255,255,.1); color:#fff; }
.fac-topbar-nav a.btn-logout { background:rgba(192,64,54,.2); color:#ff8a80; border:1px solid rgba(192,64,54,.3); }
.fac-topbar-nav a.btn-logout:hover { background:var(--red); color:#fff; }

/* ── Page Header (Dashboard) ─────────────────────────────────── */
.dash-header { background:linear-gradient(135deg,var(--dark2) 0%,#3a1a1a 100%); padding:24px 0 20px; border-bottom:3px solid var(--red); }
.dash-header-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.dash-header-title { font-family:var(--font-head); font-weight:900; font-size:20px; color:#fff; }
.dash-header-sub { font-size:13px; color:rgba(255,255,255,.55); margin-top:3px; }
.dash-header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dash-main { padding:24px 0 48px; }

/* ── Cards ───────────────────────────────────────────────────── */
.dash-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:20px; }
.dash-card-head { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dash-card-title { font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--dark2); }
.dash-card-body { padding:20px; }

/* ── Stats Grid ──────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:24px; }
.stat-card { background:var(--white); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); border-left:4px solid var(--red); display:flex; align-items:center; gap:14px; }
.stat-card.green { border-left-color:var(--green); }
.stat-card.gold  { border-left-color:var(--gold); }
.stat-card.grey  { border-left-color:#aaa; }
.stat-icon { width:42px; height:42px; border-radius:10px; background:rgba(192,64,54,.1); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.stat-card.green .stat-icon { background:var(--green-bg); }
.stat-card.gold  .stat-icon { background:#fef3c7; }
.stat-card.grey  .stat-icon { background:#f0f0f0; }
.stat-val { font-family:var(--font-head); font-weight:900; font-size:24px; color:var(--dark2); line-height:1; }
.stat-lbl { font-size:12px; color:var(--grey); font-weight:600; margin-top:3px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:8px; font-family:var(--font-head); font-weight:700; font-size:13px; cursor:pointer; border:none; transition:all .15s; text-decoration:none; white-space:nowrap; line-height:1.2; }
.btn-primary   { background:var(--red);   color:#fff; }
.btn-primary:hover   { background:var(--red-d); color:#fff; }
.btn-secondary { background:var(--dark2); color:#fff; }
.btn-secondary:hover { background:#444; color:#fff; }
.btn-success   { background:var(--green); color:#fff; }
.btn-success:hover   { background:#156a38; color:#fff; }
.btn-warning   { background:var(--gold);  color:var(--dark); }
.btn-warning:hover   { background:#e8940f; color:var(--dark); }
.btn-outline   { background:transparent; color:var(--dark2); border:1.5px solid var(--border); }
.btn-outline:hover   { border-color:var(--red); color:var(--red); }
.btn-danger    { background:#fee2e2; color:#b91c1c; border:1px solid #fca5a5; }
.btn-danger:hover    { background:#b91c1c; color:#fff; }
.btn-back      { background:var(--light); color:var(--grey); border:1.5px solid var(--border); }
.btn-back:hover      { color:var(--dark2); }
.btn-sm  { padding:5px 11px; font-size:12px; border-radius:6px; }
.btn-lg  { padding:12px 26px; font-size:15px; }
.btn-icon { padding:7px 9px; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-wrap { display:flex; flex-direction:column; gap:0; }
.form-section { margin-bottom:28px; }
.form-section-title { font-family:var(--font-head); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--red); border-bottom:2px solid var(--border); padding-bottom:10px; margin-bottom:18px; }
.form-group { margin-bottom:14px; }
.form-label { display:block; font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--dark2); margin-bottom:6px; }
.form-label span { color:var(--red); }
.form-control { width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:8px; font-family:var(--font-body); font-size:14px; color:var(--dark2); background:var(--white); transition:border-color .15s,box-shadow .15s; outline:none; }
.form-control:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(192,64,54,.1); }
.form-control::placeholder { color:#b0aba6; }
textarea.form-control { resize:vertical; min-height:100px; }
select.form-control { cursor:pointer; }
.form-hint { font-size:12px; color:var(--grey); margin-top:5px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.form-check { display:flex; align-items:center; gap:10px; }
.form-check-input { width:18px; height:18px; accent-color:var(--red); cursor:pointer; flex-shrink:0; }
.form-check-label { font-size:14px; color:var(--dark2); cursor:pointer; }

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dash-table { width:100%; border-collapse:collapse; min-width:500px; }
.dash-table th { background:var(--light); padding:10px 12px; text-align:left; font-family:var(--font-head); font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--grey); border-bottom:2px solid var(--border); white-space:nowrap; }
.dash-table td { padding:11px 12px; border-bottom:1px solid var(--border); font-size:13px; color:var(--dark2); vertical-align:middle; }
.dash-table tr:last-child td { border-bottom:none; }
.dash-table tr:hover td { background:rgba(192,64,54,.02); }
.dash-table .actions { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px; font-size:11px; font-family:var(--font-head); font-weight:700; white-space:nowrap; }
.badge-green  { background:var(--green-bg); color:var(--green); }
.badge-red    { background:#fee2e2; color:#b91c1c; }
.badge-amber  { background:var(--amber-bg); color:var(--amber); }
.badge-grey   { background:#f0f0f0; color:#666; }
.badge-blue   { background:#dbeafe; color:#1d4ed8; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:8px; font-size:13.5px; margin-bottom:16px; display:flex; align-items:flex-start; gap:10px; }
.alert-success { background:var(--green-bg); color:var(--green); border:1px solid #bbf7d0; }
.alert-error   { background:#fee2e2; color:#b91c1c; border:1px solid #fca5a5; }
.alert-info    { background:#dbeafe; color:#1d4ed8; border:1px solid #93c5fd; }
.alert-warning { background:var(--amber-bg); color:var(--amber); border:1px solid #fde68a; }

/* ── Login Page ──────────────────────────────────────────────── */
.login-page { min-height:100vh; background:linear-gradient(135deg,var(--dark2) 0%,#3a1a1a 60%,#1a0a0a 100%); display:flex; align-items:center; justify-content:center; padding:16px; }
.login-card { background:var(--white); border-radius:16px; padding:36px 32px 32px; width:100%; max-width:420px; box-shadow:var(--shadow-h); }
.login-logo { text-align:center; margin-bottom:24px; }
.login-logo img { height:44px; margin-bottom:10px; display:block; margin-left:auto; margin-right:auto; }
.login-logo-title { font-family:var(--font-head); font-weight:900; font-size:20px; color:var(--dark2); }
.login-logo-sub { font-size:12px; color:var(--grey); margin-top:3px; }
.login-divider { height:3px; background:linear-gradient(90deg,var(--red),var(--gold)); border-radius:2px; margin-bottom:24px; }

/* ── Public Faculty Directory ────────────────────────────────── */
.faculty-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.faculty-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; }
.faculty-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-h); }
.faculty-card-img { width:100%; aspect-ratio:1; object-fit:cover; background:var(--light); }
.faculty-card-img-placeholder { width:100%; aspect-ratio:1; background:linear-gradient(135deg,var(--light),#ede9e4); display:flex; align-items:center; justify-content:center; font-size:44px; color:#c8c0b8; }
.faculty-card-body { padding:14px; flex:1; display:flex; flex-direction:column; }
.faculty-card-name  { font-family:var(--font-head); font-weight:800; font-size:14px; color:var(--dark2); margin-bottom:4px; }
.faculty-card-desig { font-size:12px; color:var(--red); font-weight:700; font-family:var(--font-head); margin-bottom:5px; }
.faculty-card-dept  { font-size:11.5px; color:var(--grey); margin-bottom:10px; flex:1; }
.faculty-card-footer { border-top:1px solid var(--border); padding-top:10px; margin-top:auto; }

/* ── Filters Bar ─────────────────────────────────────────────── */
.filters-bar { background:var(--white); border-bottom:1px solid var(--border); padding:12px 0; position:sticky; top:52px; z-index:90; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.filters-inner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filter-select { padding:8px 12px; border:1.5px solid var(--border); border-radius:8px; font-family:var(--font-body); font-size:13px; background:var(--white); cursor:pointer; outline:none; min-width:140px; max-width:100%; }
.filter-select:focus { border-color:var(--red); }
.filter-search { flex:1; min-width:160px; padding:8px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; outline:none; }
.filter-search:focus { border-color:var(--red); }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { display:flex; align-items:center; gap:5px; justify-content:center; padding:20px 0 0; flex-wrap:wrap; }
.page-btn { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1.5px solid var(--border); font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--dark2); cursor:pointer; text-decoration:none; transition:all .15s; }
.page-btn:hover { border-color:var(--red); color:var(--red); }
.page-btn.active { background:var(--red); color:#fff; border-color:var(--red); }
.page-btn.disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.fac-breadcrumb { background:var(--white); border-bottom:1px solid var(--border); padding:10px 0; font-size:12px; color:var(--grey); overflow-x:auto; white-space:nowrap; }
.fac-bc-inner { display:flex; align-items:center; gap:6px; }
.fac-bc-inner a { color:var(--red); font-weight:600; }
.fac-bc-sep { color:#ccc; }

/* ── Profile Hero ────────────────────────────────────────────── */
.profile-hero { background:linear-gradient(135deg,var(--dark2) 0%,#3a1a1a 100%); padding:32px 0; border-bottom:3px solid var(--red); }
.profile-hero-inner { display:flex; align-items:flex-start; gap:24px; }
.profile-photo { width:130px; height:160px; border-radius:12px; object-fit:cover; border:3px solid rgba(255,255,255,.2); flex-shrink:0; }
.profile-photo-placeholder { width:130px; height:160px; border-radius:12px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:56px; color:rgba(255,255,255,.3); flex-shrink:0; }
.profile-hero-name  { font-family:var(--font-head); font-weight:900; font-size:24px; color:#fff; margin-bottom:5px; }
.profile-hero-desig { font-size:15px; color:var(--gold); font-weight:700; font-family:var(--font-head); margin-bottom:7px; }
.profile-hero-dept  { font-size:13px; color:rgba(255,255,255,.6); margin-bottom:14px; }
.profile-meta { display:flex; flex-wrap:wrap; gap:8px; }
.profile-meta-item { display:flex; align-items:center; gap:5px; font-size:12px; color:rgba(255,255,255,.8); background:rgba(255,255,255,.1); padding:5px 11px; border-radius:20px; }

/* ── Profile Tabs ────────────────────────────────────────────── */
.profile-tabs-bar { background:var(--white); border-bottom:2px solid var(--border); position:sticky; top:52px; z-index:90; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.profile-tabs-inner { display:flex; overflow-x:auto; scrollbar-width:none; }
.profile-tabs-inner::-webkit-scrollbar { display:none; }
.profile-tab { padding:13px 18px; font-family:var(--font-head); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--grey); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all .15s; user-select:none; }
.profile-tab:hover { color:var(--dark2); }
.profile-tab.active { color:var(--red); border-bottom-color:var(--red); }
.profile-tab.empty { opacity:.35; cursor:default; pointer-events:none; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.profile-layout { display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start; }
.empty-tab-msg { text-align:center; padding:48px 20px; color:var(--grey); font-size:14px; }
.empty-tab-msg .icon { font-size:34px; margin-bottom:10px; }

/* ── Profile Content ─────────────────────────────────────────── */
.profile-content { font-size:14.5px; line-height:1.85; color:var(--dark2); }
.profile-content h2 { font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--dark2); margin:26px 0 10px; padding-bottom:8px; border-bottom:2px solid var(--border); }
.profile-content h2:first-child { margin-top:0; }
.profile-content h3 { font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--dark2); margin:16px 0 8px; }
.profile-content p  { margin-bottom:10px; }
.profile-content ul, .profile-content ol { padding-left:22px; margin-bottom:12px; }
.profile-content li { margin-bottom:5px; }
.profile-content table { width:100%; border-collapse:collapse; margin:14px 0; overflow-x:auto; display:block; }
.profile-content table th { background:var(--light); padding:9px 11px; font-family:var(--font-head); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.4px; border:1px solid var(--border); }
.profile-content table td { padding:9px 11px; border:1px solid var(--border); font-size:13px; }

/* ── Upload Zone ─────────────────────────────────────────────── */
.upload-zone { border:2px dashed var(--border); border-radius:12px; padding:32px 20px; text-align:center; cursor:pointer; transition:all .2s; background:var(--light); }
.upload-zone:hover, .upload-zone.drag-over { border-color:var(--red); background:rgba(192,64,54,.04); }
.upload-zone-icon { font-size:38px; margin-bottom:10px; }
.upload-zone-text { font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--dark2); margin-bottom:5px; }
.upload-zone-sub  { font-size:12px; color:var(--grey); }

/* ── OTP Inputs ──────────────────────────────────────────────── */
.otp-inputs { display:flex; gap:8px; justify-content:center; margin:16px 0; flex-wrap:wrap; }
.otp-input { width:46px; height:54px; text-align:center; font-size:22px; font-weight:800; border:2px solid var(--border); border-radius:8px; outline:none; font-family:var(--font-head); color:var(--dark2); transition:border-color .15s; }
.otp-input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(192,64,54,.1); }

/* ── Avatars ─────────────────────────────────────────────────── */
.avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--border); flex-shrink:0; }
.avatar-lg { width:68px; height:68px; }
.avatar-placeholder { width:38px; height:38px; border-radius:50%; background:var(--light); display:flex; align-items:center; justify-content:center; font-size:15px; color:#aaa; border:2px solid var(--border); flex-shrink:0; }

/* ── Dept Tabs ───────────────────────────────────────────────── */
.dept-tabs { display:flex; gap:0; overflow-x:auto; border-bottom:2px solid var(--border); background:var(--white); padding:0 20px; scrollbar-width:none; }
.dept-tabs::-webkit-scrollbar { display:none; }
.dept-tab { padding:11px 18px; font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--grey); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all .15s; }
.dept-tab:hover { color:var(--dark2); }
.dept-tab.active { color:var(--red); border-bottom-color:var(--red); }

/* ── Toggle ──────────────────────────────────────────────────── */
.fd-toggle input { accent-color:var(--red); cursor:pointer; }

/* ================================================================
   RESPONSIVE — Tablet  (≤ 900px)
   ================================================================ */
@media (max-width:900px) {
  /* Profile layout: stack sidebar below content */
  .profile-layout { grid-template-columns:1fr; }
  /* Profile hero: smaller photo */
  .profile-photo, .profile-photo-placeholder { width:100px; height:120px; }
  .profile-hero-name { font-size:20px; }
  .profile-hero-desig { font-size:14px; }
}

/* ================================================================
   RESPONSIVE — Mobile  (≤ 768px)
   ================================================================ */
@media (max-width:768px) {
  .container { padding:0 14px; }

  /* Topbar */
  .fac-topbar-title { font-size:13px; }
  .fac-topbar-nav a { padding:5px 8px; font-size:11px; }
  .fac-topbar-nav a span { display:none; } /* hide text labels if needed */

  /* Dashboard header */
  .dash-header { padding:18px 0 14px; }
  .dash-header-inner { flex-direction:column; align-items:flex-start; gap:10px; }
  .dash-header-title { font-size:18px; }
  .dash-header-actions { width:100%; }
  .dash-header-actions .btn { flex:1; justify-content:center; }
  .dash-main { padding:16px 0 40px; }

  /* Stats */
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .stat-val { font-size:22px; }

  /* Cards */
  .dash-card-body { padding:14px; }
  .dash-card-head { padding:13px 16px; }

  /* Forms */
  .form-grid-2, .form-grid-3 { grid-template-columns:1fr; }
  .form-section { margin-bottom:20px; }

  /* Buttons */
  .btn-lg { padding:11px 20px; font-size:14px; }

  /* Tables: horizontal scroll with readable sizing */
  .dash-table th, .dash-table td { padding:9px 10px; font-size:12px; }
  .dash-table .actions { gap:4px; }
  .dash-table .actions .btn-sm { padding:4px 8px; font-size:11px; }

  /* Login */
  .login-card { padding:28px 20px 24px; border-radius:12px; }
  .login-logo-title { font-size:18px; }

  /* Public directory */
  .faculty-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .faculty-card-body { padding:11px; }
  .faculty-card-name { font-size:13px; }

  /* Filters bar */
  .filters-bar { padding:10px 0; position:relative; top:auto; }
  .filters-inner { gap:8px; }
  .filter-select, .filter-search { min-width:0; width:100%; }
  .filters-inner .btn { width:100%; justify-content:center; }

  /* Profile hero */
  .profile-hero { padding:20px 0; }
  .profile-hero-inner { gap:16px; }
  .profile-photo, .profile-photo-placeholder { width:80px; height:100px; border-radius:8px; font-size:40px; }
  .profile-hero-name  { font-size:17px; }
  .profile-hero-desig { font-size:13px; }
  .profile-hero-dept  { font-size:12px; margin-bottom:10px; }
  .profile-meta { gap:6px; }
  .profile-meta-item { font-size:11px; padding:4px 9px; }

  /* Profile tabs */
  .profile-tabs-bar { top:52px; }
  .profile-tab { padding:11px 13px; font-size:10.5px; letter-spacing:.3px; }

  /* Profile content */
  .profile-content { font-size:13.5px; }
  .profile-content h2 { font-size:14px; }

  /* Breadcrumb */
  .fac-breadcrumb { font-size:11px; }

  /* Dash table action buttons stack */
  .dash-table .actions { flex-direction:row; flex-wrap:wrap; }
}

/* ================================================================
   RESPONSIVE — Small Mobile  (≤ 480px)
   ================================================================ */
@media (max-width:480px) {
  .container { padding:0 12px; }

  /* Stats: single column */
  .stats-grid { grid-template-columns:1fr; }

  /* Topbar: tighter */
  .fac-topbar { height:48px; }
  .fac-topbar-logo { height:26px; }
  .fac-topbar-title { font-size:12px; }
  .fac-topbar-nav { gap:2px; }
  .fac-topbar-nav a { padding:4px 7px; font-size:10.5px; }

  /* Profile tabs bar top offset */
  .profile-tabs-bar { top:48px; }
  .filters-bar { top:48px; }

  /* Profile hero: portrait layout */
  .profile-hero-inner { flex-direction:column; align-items:center; text-align:center; gap:14px; }
  .profile-photo, .profile-photo-placeholder { width:100px; height:120px; }
  .profile-meta { justify-content:center; }
  .profile-hero-dept { margin-bottom:8px; }

  /* Faculty cards: 2 col */
  .faculty-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .faculty-card-img-placeholder { font-size:32px; }
  .faculty-card-name { font-size:12.5px; }
  .faculty-card-footer .btn { font-size:11px; padding:5px 8px; }

  /* Login */
  .login-card { padding:24px 16px; }
  .otp-input { width:40px; height:48px; font-size:20px; }

  /* Dash table: make actions column wrap nicely */
  .dash-table td { font-size:11.5px; padding:8px 8px; }
  .dash-table th { font-size:10px; padding:8px 8px; }

  /* Dash header actions full width buttons */
  .dash-header-actions { flex-direction:column; width:100%; }
  .dash-header-actions .btn { width:100%; justify-content:center; }

  /* Upload zone */
  .upload-zone { padding:24px 16px; }
  .upload-zone-icon { font-size:32px; }

  /* Forms */
  .form-control { font-size:13px; padding:9px 11px; }
  .btn { font-size:12px; padding:8px 13px; }
  .btn-lg { font-size:13px; padding:10px 18px; }
}

/* ================================================================
   UTILITY
   ================================================================ */
.text-center { text-align:center; }
.text-grey   { color:var(--grey); }
.mt-0 { margin-top:0 !important; }

/* ================================================================
   HAMBURGER MENU & MOBILE NAV
   ================================================================ */
.fac-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background .15s;
}
.fac-hamburger:hover { background: rgba(255,255,255,.1); }
.fac-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: all .2s;
}

.fac-mobile-menu {
  display: none;
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  background: var(--dark2);
  border-top: 1px solid rgba(255,255,255,.1);
  z-index: 199;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  flex-direction: column;
}
.fac-mobile-menu.open { display: flex; }
.fac-mobile-menu a {
  color: rgba(255,255,255,.75);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .15s;
}
.fac-mobile-menu a:hover, .fac-mobile-menu a.active {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.fac-mobile-menu-dept {
  padding: 10px 20px;
  font-size: 11px;
  color: rgba(255,255,255,.3);
  font-family: var(--font-head);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.fac-mobile-logout {
  color: #ff8a80 !important;
  padding: 14px 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
}

/* Desktop nav label helper */
.fac-topbar-deptname {
  color: rgba(255,255,255,.35);
  font-size: 11px;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* Quick actions grid */
.quick-actions-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.quick-actions-grid .btn { flex: 1 1 auto; justify-content: center; min-width: 140px; }

/* Quick Info sidebar — prevent email overflow */
.quick-info-val {
  color: var(--dark2);
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: 13px;
}

/* ================================================================
   MOBILE — Show hamburger, hide desktop nav
   ================================================================ */
@media (max-width: 700px) {
  .fac-nav-desktop { display: none; }
  .fac-hamburger { display: flex; }

  /* Quick actions: 2 column grid on mobile */
  .quick-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick-actions-grid .btn { min-width: 0; font-size: 12px; padding: 9px 10px; }

  /* Dash header Upload DOCX button: keep label */
  .btn-label { display: inline; }
}

@media (max-width: 400px) {
  .quick-actions-grid { grid-template-columns: 1fr; }
}