/* ================================================================
   E-RECORDS SYSTEM (ERS) — DESIGN SYSTEM
   Brand: #06142f (Navy) | #8e8e8e (Silver) | #b08d3c (Gold accent)
   Fonts: Cormorant Garamond (display) + Montserrat (body)
================================================================ */
:root{
  --blue:#06142f; --blue-dark:#020817; --blue-mid:#0b2555; --blue-glow:rgba(6,20,47,.10);
  --silver:#8e8e8e; --silver-lt:#c4c4c4; --silver-pale:#f2f2f6;
  --white:#ffffff; --off-white:#f7f8fb; --text:#0f172a; --text-muted:#596579;
  --border:#e2e6ee; --border-dark:#c8cfdb;
  --shadow-sm:0 2px 12px rgba(6,20,47,.07); --shadow-md:0 8px 28px rgba(6,20,47,.11); --shadow-lg:0 20px 56px rgba(6,20,47,.18);
  --radius:10px; --radius-lg:16px; --radius-xl:22px; --nav-h:64px; --sidebar-w:236px;
  --gold:#b08d3c;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;}
body{font-family:'Montserrat',sans-serif; background:var(--off-white); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased;}
a{color:var(--blue); text-decoration:none}

/* ===== NAVBAR ===== */
.navbar{background:var(--white); border-bottom:1px solid var(--border); box-shadow:0 1px 20px rgba(6,20,47,.06); position:sticky; top:0; z-index:200;}
.nav-inner{max-width:1500px; margin:0 auto; padding:0 1.5rem; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.nav-left{display:flex; align-items:center; gap:.8rem;}
.nav-brand{display:flex; align-items:center; gap:.7rem; cursor:pointer;}
.brand-mark{width:38px; height:38px; border-radius:9px; background:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); flex-shrink:0; overflow:hidden; border:1px solid var(--border);}
.brand-mark img{width:100%; height:100%; object-fit:contain; display:block;}
.brand-text{display:flex; flex-direction:column; line-height:1.05;}
.brand-name{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.32rem; letter-spacing:.02em; color:var(--blue); white-space:nowrap;}
.brand-sub{font-size:.56rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--silver);}
.nav-mid{flex:1; display:flex; justify-content:center; max-width:420px; margin:0 auto;}
.nav-search{display:flex; align-items:center; gap:.55rem; background:var(--silver-pale); border:1.5px solid var(--border); border-radius:999px; padding:.5rem 1rem; width:100%; transition:all .2s;}
.nav-search:focus-within{border-color:var(--blue); background:var(--white); box-shadow:0 0 0 3px var(--blue-glow);}
.nav-search input{border:none; background:none; outline:none; font-size:.82rem; flex:1; font-family:inherit; color:var(--text);}
.nav-search .ic{color:var(--silver); font-size:.85rem;}
.nav-right{display:flex; align-items:center; gap:.85rem;}
.icon-btn{width:38px; height:38px; border-radius:50%; background:var(--silver-pale); border:1.5px solid var(--border); color:var(--silver); display:flex; align-items:center; justify-content:center; font-size:.95rem; cursor:pointer; position:relative; transition:all .18s;}
.icon-btn:hover{background:var(--blue-glow); color:var(--blue); border-color:var(--blue);}
.badge{position:absolute; top:-3px; right:-3px; background:#c0392b; color:#fff; font-size:.55rem; font-weight:800; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; border:2px solid var(--white);}
.panel{position:absolute; top:calc(100% + 12px); right:0; width:320px; max-width:86vw; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:500; overflow:hidden; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:all .18s ease;}
.panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.1rem; border-bottom:1px solid var(--border);}
.panel-head span{font-weight:700; font-size:.8rem;}
.panel-action{font-size:.68rem; color:var(--gold); cursor:pointer;}
.panel-list{max-height:340px; overflow-y:auto;}
.panel-item{display:flex; gap:.65rem; padding:.75rem 1.1rem; border-bottom:1px solid var(--border); font-size:.78rem;}
.panel-item:last-child{border-bottom:none;}
.panel-item .dot{width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; margin-top:.35rem;}
.panel-item .t{color:var(--text-muted); font-size:.68rem; margin-top:.15rem;}
.nav-user{display:flex; align-items:center; gap:.65rem; padding-left:.85rem; border-left:1px solid var(--border); position:relative; cursor:pointer;}
.avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(145deg,var(--blue-mid),var(--blue)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem;}
.nav-user-meta{display:flex; flex-direction:column; line-height:1.15;}
.nav-user-name{font-size:.78rem; font-weight:700;}
.role-pill{font-size:.55rem; font-weight:800; letter-spacing:.1em; color:var(--gold); text-transform:uppercase;}
.user-menu{right:0; width:190px;}
.user-menu a{display:block; padding:.7rem 1rem; font-size:.78rem; color:var(--text); border-bottom:1px solid var(--border);}
.user-menu a:last-child{border:none; color:#c0392b;}
.user-menu a:hover{background:var(--silver-pale);}
.nav-accent{height:3px; background:linear-gradient(90deg,var(--blue) 0%,var(--blue-mid) 45%,var(--gold) 100%);}
.burger{display:none; width:38px; height:38px; border-radius:9px; background:var(--silver-pale); border:1.5px solid var(--border); align-items:center; justify-content:center; cursor:pointer; color:var(--blue); font-size:1rem;}

/* ===== LAYOUT ===== */
.shell{max-width:1500px; margin:0 auto; display:flex;}
.sidebar{width:var(--sidebar-w); flex-shrink:0; background:var(--white); border-right:1px solid var(--border); padding:1.5rem 0 2rem; min-height:calc(100vh - var(--nav-h)); transition:transform .25s ease;}
.side-label{font-size:.58rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--silver-lt); padding:0 1.4rem; margin:1.1rem 0 .5rem;}
.side-link{display:flex; align-items:center; gap:.7rem; padding:.65rem 1.4rem; font-size:.82rem; font-weight:600; color:var(--text-muted); border-left:3px solid transparent; cursor:pointer; transition:all .15s;}
.side-link:hover{background:var(--silver-pale); color:var(--blue);}
.side-link.active{background:var(--blue-glow); color:var(--blue); border-left-color:var(--gold); font-weight:700;}
.side-link .n{margin-left:auto; font-size:.62rem; background:var(--silver-pale); color:var(--text-muted); padding:.1rem .45rem; border-radius:8px; font-weight:700;}
.side-link.active .n{background:var(--blue); color:#fff;}

main{flex:1; padding:2rem 1.75rem 3rem; min-width:0;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem;}
.eyebrow{font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.3rem;}
.page-title{font-family:'Cormorant Garamond',serif; font-size:2.1rem; font-weight:700; color:var(--blue);}
.page-sub{font-size:.82rem; color:var(--text-muted); margin-top:.25rem;}
.btn{font-family:inherit; font-size:.8rem; font-weight:700; padding:.75rem 1.3rem; border-radius:var(--radius); cursor:pointer; border:1.5px solid transparent; transition:all .18s; display:inline-flex; align-items:center; gap:.5rem;}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-mid); transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-ghost{background:var(--white); color:var(--blue); border-color:var(--border-dark);}
.btn-ghost:hover{border-color:var(--blue);}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.8rem;}
.stat-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;}
.stat-card::after{content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--gold);}
.stat-num{font-family:'Cormorant Garamond',serif; font-size:2.1rem; font-weight:700; color:var(--blue);}
.stat-label{font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-top:.2rem;}

.grid-2{display:grid; grid-template-columns:1.6fr 1fr; gap:1.4rem; align-items:start;}
.card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden;}
.card-head{display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid var(--border);}
.card-head h3{font-size:.92rem; font-weight:700; color:var(--blue);}
.card-head .link{font-size:.72rem; font-weight:700; color:var(--gold); cursor:pointer;}
table{width:100%; border-collapse:collapse; font-size:.8rem;}
th{text-align:left; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--silver); padding:.8rem 1.3rem; border-bottom:1px solid var(--border);}
td{padding:.85rem 1.3rem; border-bottom:1px solid var(--border); color:var(--text);}
tr:last-child td{border-bottom:none;}
tr.row:hover{background:var(--silver-pale); cursor:pointer;}
.reg{font-weight:700; color:var(--blue); font-family:monospace; font-size:.76rem;}
.status{font-size:.62rem; font-weight:800; padding:.28rem .65rem; border-radius:20px; text-transform:uppercase; letter-spacing:.05em;}
.status-active{background:#e6f4ea; color:#1b5e20;}
.status-pending{background:#fdf3e2; color:#8a5a00;}
.status-alumni{background:#eef0f6; color:#4a4a6a;}

.verify-box{padding:1.3rem;}
.verify-box label{font-size:.68rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:.4rem;}
.verify-box input{width:100%; padding:.7rem .9rem; border:1.5px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:.82rem; outline:none; transition:all .18s;}
.verify-box input:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow);}
.verify-hint{font-size:.68rem; color:var(--silver); margin-top:.5rem;}
.verify-result{margin-top:1rem; border:1.5px dashed var(--border-dark); border-radius:var(--radius); padding:1rem; display:none;}
.verify-result.show{display:block; animation:fadein .25s ease;}
.vr-name{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.15rem; color:var(--blue);}
.vr-meta{font-size:.74rem; color:var(--text-muted); margin-top:.15rem;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

/* ===== MODAL ===== */
.overlay{position:fixed; inset:0; background:rgba(6,20,47,.5); display:none; align-items:center; justify-content:center; z-index:900; padding:1rem;}
.overlay.open{display:flex;}
.modal{background:var(--white); border-radius:var(--radius-xl); width:480px; max-width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:fadein .2s ease;}
.modal-head{padding:1.2rem 1.4rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;}
.modal-head h3{font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--blue);}
.modal-head .x{cursor:pointer; color:var(--silver); font-size:1.1rem; background:none; border:none;}
.modal-body{padding:1.3rem 1.4rem;}
.field{margin-bottom:1rem;}
.field label{display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:.35rem;}
.field input,.field select{width:100%; padding:.65rem .8rem; border:1.5px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:.82rem; outline:none;}
.field input:focus,.field select:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow);}
.field-hint{display:block; font-size:.66rem; color:var(--silver); margin-top:.3rem;}
.field input.is-valid{border-color:#1b5e20;}
.field input.is-invalid{border-color:#c0392b;}
.field-hint.is-valid{color:#1b5e20;}
.field-hint.is-invalid{color:#c0392b;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem;}
.modal-foot{padding:1rem 1.4rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.7rem;}
.toast{position:fixed; bottom:24px; right:24px; background:var(--blue); color:#fff; padding:.85rem 1.3rem; border-radius:var(--radius); font-size:.8rem; font-weight:600; box-shadow:var(--shadow-lg); transform:translateY(20px); opacity:0; pointer-events:none; transition:all .3s ease; z-index:1000;}
.toast.show{transform:translateY(0); opacity:1;}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){ .grid-2{grid-template-columns:1fr;} .stats{grid-template-columns:repeat(2,1fr);} .nav-mid{display:none;} }
@media(max-width:860px){
  .burger{display:flex;} .brand-sub{display:none;}
  .sidebar{position:fixed; top:var(--nav-h); left:0; bottom:0; z-index:150; transform:translateX(-100%); box-shadow:var(--shadow-lg);}
  .sidebar.open{transform:translateX(0);}
  main{padding:1.4rem 1rem 2.5rem;}
  .stats{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){ .stats{grid-template-columns:1fr;} .row2{grid-template-columns:1fr;} .page-title{font-size:1.6rem;} }