/* ============================================================
   PAHMC Faculty Directory — styles
   Scoped under .pahmc-faculty-app / .mfc-w so this cannot leak
   into (or be affected by) the rest of the site's theme CSS.
   Mobile-first: base rules target phones; min-width queries at
   the bottom widen the layout for tablets/desktops.
   ============================================================ */
/* ---------- Reset (scoped) ---------- */
.mfc-w,.mfc-w *,.mfc-w *::before,.mfc-w *::after{box-sizing:border-box;margin:0;padding:0}
.mfc-w{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1e293b;line-height:1.6;-webkit-font-smoothing:antialiased}
.mfc-w button{font-family:inherit}
.mfc-w :focus-visible{outline:2.5px solid #0a5c8a;outline-offset:2px}

/* ---------- Visually-hidden helper (for screen-reader-only labels) ---------- */
.mfc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Header ---------- */
.mfc-phdr{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:3px solid #0a5c8a}
.mfc-phdr-left{display:flex;align-items:center;gap:12px}
.mfc-phdr-ico{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#0a5c8a,#1b8fca);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mfc-phdr-ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mfc-phdr-t{font-size:20px;font-weight:800;color:#0f172a;letter-spacing:-.02em}
.mfc-phdr-sts{display:flex;gap:16px}
.mfc-phdr-st{text-align:center}
.mfc-phdr-st-n{font-size:20px;font-weight:800;color:#0a5c8a;line-height:1;min-width:28px}
.mfc-phdr-st-l{font-size:9px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.8px;margin-top:2px}

/* ---------- Toolbar: search / filters / view toggle ---------- */
.mfc-tb{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.mfc-sb{position:relative;width:100%}
.mfc-sb input{width:100%;padding:12px 14px 12px 40px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;font-family:inherit;background:#fff;color:#1e293b;transition:all .25s;outline:none}
.mfc-sb input:focus{border-color:#0a5c8a;box-shadow:0 0 0 3px rgba(10,92,138,.08)}
.mfc-sb input::placeholder{color:#94a3b8}
.mfc-sb svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:#94a3b8;fill:none;stroke-width:2;pointer-events:none}
.mfc-row2{display:flex;gap:8px;align-items:center}
.mfc-fw{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;flex:1;min-width:0}
.mfc-fw::-webkit-scrollbar{height:0}
.mfc-ft{padding:8px 14px;min-height:36px;border-radius:50px;border:1.5px solid #e2e8f0;background:#fff;font-size:11px;font-weight:600;color:#64748b;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.mfc-ft:hover{border-color:#0a5c8a;color:#0a5c8a}
.mfc-ft[aria-pressed="true"]{background:#0a5c8a;border-color:#0a5c8a;color:#fff;box-shadow:0 3px 10px rgba(10,92,138,.25)}
.mfc-vt{display:flex;border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;flex-shrink:0}
.mfc-vb{padding:9px 11px;min-width:40px;min-height:38px;background:#fff;border:none;cursor:pointer;color:#94a3b8;transition:all .2s;display:flex;align-items:center;justify-content:center}
.mfc-vb[aria-pressed="true"]{background:#f1f5f9;color:#0a5c8a}
.mfc-vb:hover:not([aria-pressed="true"]){background:#f8fafc}
.mfc-vb svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- No-results message (live region) ---------- */
.mfc-nores{display:none;color:#64748b;font-size:13px;font-weight:500;text-align:center;padding:40px 20px;background:#f8fafc;border-radius:14px;margin:0 0 16px;border:2px dashed #e2e8f0}
.mfc-nores.mfc-show{display:flex;flex-direction:column;align-items:center;gap:6px}

/* ---------- Intro strip ---------- */
.mfc-intro{background:#f8fafc;border-left:4px solid #0a5c8a;border-radius:0 10px 10px 0;padding:16px 18px;margin-bottom:22px;font-size:13px;color:#475569;line-height:1.8}
.mfc-intro strong{color:#0a5c8a}

/* ---------- Section headers (department + administration) ---------- */
.mfc-dhdr{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:#0f172a;padding:0 0 10px;margin:24px 0 12px;border-bottom:2px solid #f1f5f9}
.mfc-dhdr:first-child{margin-top:0}
.mfc-dhdr::before{content:'';width:5px;height:22px;border-radius:3px;background:linear-gradient(to bottom,#0a5c8a,#1b8fca);flex-shrink:0}
.mfc-dcnt{font-size:10px;font-weight:700;color:#0a5c8a;background:rgba(10,92,138,.08);padding:2px 8px;border-radius:50px;margin-left:2px;white-space:nowrap}

/* ---------- Table view ---------- */
.mfc-w table{width:100%;border-collapse:separate;border-spacing:0;border:1.5px solid #e2e8f0;border-radius:12px;overflow:hidden;margin-bottom:6px;background:#fff}
.mfc-w table th{background:linear-gradient(135deg,#0a5c8a,#0d6ea0);color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;padding:10px 14px;text-align:left;border:none}
.mfc-w table th:first-child{width:48px;text-align:center}
.mfc-w table td{padding:10px 14px;font-size:12.5px;color:#334155;border:none;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.mfc-w table td:first-child{text-align:center;color:#94a3b8;font-weight:600;font-size:11px}
.mfc-w table tr:last-child td{border-bottom:none}
.mfc-w table tbody tr{cursor:pointer;transition:background .15s}
.mfc-w table tbody tr:hover td,.mfc-w table tbody tr:focus-within td{background:rgba(10,92,138,.03)}
.mfc-w table tbody tr:hover td:first-child,.mfc-w table tbody tr:focus-within td:first-child{color:#0a5c8a}
.mfc-w table tbody tr:nth-child(even) td{background:#fafbfc}
.mfc-w table tbody tr:nth-child(even):hover td{background:rgba(10,92,138,.03)}
.mfc-w table tbody tr[hidden]{display:none}
.mfc-rowbtn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left;width:100%}

/* ---------- Card view ---------- */
.mfc-cv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mfc-cv[hidden]{display:none}
.mfc-cd{background:#fff;border:1.5px solid #f1f5f9;border-radius:14px;padding:18px 14px;text-align:center;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.mfc-cd::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#0a5c8a,#1b8fca);transform:scaleX(0);transition:transform .25s;transform-origin:left}
.mfc-cd:hover{transform:translateY(-3px);border-color:rgba(10,92,138,.18);box-shadow:0 10px 24px rgba(10,92,138,.08)}
.mfc-cd:hover::before,.mfc-cd:focus-visible::before{transform:scaleX(1)}
.mfc-cd[hidden]{display:none}
.mfc-cd-av{width:52px;height:52px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(135deg,#e8f0f8,#f1f5f9);display:flex;align-items:center;justify-content:center;border:2.5px solid #e8f0f8;transition:border-color .25s;font-size:17px;font-weight:800;color:#0a5c8a;text-transform:uppercase}
.mfc-cd:hover .mfc-cd-av{border-color:#0a5c8a}
.mfc-cd-n{font-size:12.5px;font-weight:600;color:#0f172a;margin-bottom:2px;line-height:1.35}
.mfc-cd-d{font-size:11px;color:#0a5c8a;font-weight:500;margin-bottom:3px}
.mfc-cd-e{font-size:10.5px;color:#94a3b8;line-height:1.4}
.mfc-cv-dh{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:6px 0 4px;margin-top:8px}
.mfc-cv-dh:first-child{margin-top:0}
.mfc-cv-dh::before{content:'';width:4px;height:18px;border-radius:2px;background:linear-gradient(to bottom,#0a5c8a,#1b8fca)}
.mfc-cv-dh span:first-child{font-size:14px;font-weight:700;color:#0f172a}
.mfc-cv-dh[hidden]{display:none}

/* ---------- Oxford / special badge (kept from source data) ---------- */
.mfc-oxford{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:4px 12px;border-radius:50px;background:linear-gradient(135deg,#fef9e7,#fdf2d1);border:1px solid #e8c84a;font-size:10px;font-weight:700;color:#7d6608;letter-spacing:.2px;white-space:nowrap;line-height:1.4}
.mfc-oxford::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#d4ac0d,#f1c40f);flex-shrink:0}

/* ---------- Detail modal ---------- */
.mfc-mo{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(6px);z-index:999999;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.mfc-mo.mfc-op{opacity:1;visibility:visible}
.mfc-mo-b{background:#fff;border-radius:18px;max-width:440px;width:100%;max-height:85vh;overflow-y:auto;transform:scale(.95) translateY(10px);transition:transform .3s cubic-bezier(.175,.885,.32,1.275);position:relative}
.mfc-mo.mfc-op .mfc-mo-b{transform:scale(1) translateY(0)}
.mfc-mo-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:none;background:#f1f5f9;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#64748b;transition:background .2s;z-index:2}
.mfc-mo-x:hover{background:#e2e8f0}
.mfc-mo-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.mfc-mo-ban{height:72px;background:linear-gradient(135deg,#073d5c,#1b8fca);position:relative}
.mfc-mo-ban::after{content:'';position:absolute;bottom:0;left:0;right:0;height:28px;background:linear-gradient(to top,#fff,transparent)}
.mfc-mo-aw{display:flex;justify-content:center;margin-top:-36px;position:relative;z-index:1}
.mfc-mo-a{width:72px;height:72px;border-radius:50%;border:3.5px solid #fff;background:linear-gradient(135deg,#e8f0f8,#f1f5f9);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.07);font-size:22px;font-weight:800;color:#0a5c8a;text-transform:uppercase}
.mfc-mo-bd{padding:12px 26px 26px;text-align:center}
.mfc-mo-nm{font-size:17px;font-weight:700;color:#0f172a;margin-bottom:2px}
.mfc-mo-ds{font-size:12px;color:#0a5c8a;font-weight:500;margin-bottom:2px}
.mfc-mo-dp{font-size:11px;color:#94a3b8;margin-bottom:16px}
.mfc-mo-dt{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:16px;text-align:left}
.mfc-mo-di{padding:10px 12px;background:#f8fafc;border-radius:10px}
.mfc-mo-dl{font-size:9px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.mfc-mo-dv{font-size:12px;font-weight:500;color:#334155;word-break:break-word}
.mfc-mo-cb{display:inline-flex;align-items:center;gap:5px;padding:9px 22px;border-radius:10px;border:none;background:#f1f5f9;color:#475569;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s}
.mfc-mo-cb:hover{background:#e2e8f0}
.mfc-mo-cb svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){.mfc-w *{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- Mobile-first breakpoints: widen up from the base (phone) layout above ---------- */
@media(min-width:560px){
  .mfc-cv{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .mfc-mo-dt{grid-template-columns:1fr 1fr}
}
@media(min-width:700px){
  .mfc-tb{flex-direction:row;flex-wrap:wrap;align-items:center}
  .mfc-sb{flex:1;min-width:200px;width:auto}
  .mfc-row2{flex:1;min-width:0}
  .mfc-phdr-t{font-size:22px}
  .mfc-w table th,.mfc-w table td{padding:10px 14px;font-size:12.5px}
}