@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper: #EFE8D8;
  --ink: #1B2A4A;
  --ink-soft: #55628a;
  --red: #B23A34;
  --gold: #C9A227;
  --green: #2F4B3C;
  --fail: #8c2a26;
  --card: #FBF8EF;
  --line: #ddd3b6;
  --boy: #2b4c7e;
  --girl: #b23a34;
  font-family: 'IBM Plex Sans', sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background: var(--paper); color: var(--ink); }
.hidden{ display:none !important; }

/* ---------- LOGIN ---------- */
#loginScreen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(var(--paper) 0%, #e8dfc4 100%);
  padding:20px;
}
.login-box{
  width: 380px; background: var(--card); border:1px solid var(--ink);
  border-radius: 6px; padding: 34px 30px; box-shadow: 0 4px 0 rgba(27,42,74,0.1);
}
.login-box h1{
  font-family:'Fraunces', serif; font-size: 28px; margin:0 0 2px; text-align:center;
}
.login-box .tag{
  text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:26px;
}
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); margin-bottom:5px; }
.field input, .field select{
  width:100%; padding:10px 12px; border:1px solid #b9ae8e; border-radius:4px; background:#fffdf6; font-size:14px; font-family:'IBM Plex Sans',sans-serif;
}
.btn-block{ width:100%; margin-top:8px; }
.login-note{ margin-top:18px; font-size:11.5px; color:var(--ink-soft); background:#efe8d8; border:1px dashed var(--line); padding:10px 12px; border-radius:4px; line-height:1.5; }
.login-error{ color:var(--red); font-size:12.5px; margin-top:8px; display:none; }

/* ---------- APP SHELL ---------- */
#appShell{ display:flex; min-height:100vh; }
.sidebar{
  width: 232px; background: var(--ink); color: var(--paper);
  padding: 22px 0; flex-shrink:0;
}
.sidebar .brand{
  font-family:'Fraunces', serif; font-size:20px; padding: 0 20px 18px; border-bottom:1px solid rgba(239,232,216,0.15); margin-bottom: 10px;
}
.sidebar .brand .tag{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color: #b9c2df; margin-top:3px;}
.nav-section-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:#8391bb; padding: 14px 20px 6px; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 20px; cursor:pointer; font-size:13.5px; color:#dfe3ee; border-left:3px solid transparent;
}
.nav-item:hover{ background: rgba(239,232,216,0.06); }
.nav-item.active{ background: rgba(239,232,216,0.1); border-left-color: var(--gold); color:#fff; font-weight:600; }
.nav-icon{ width:16px; text-align:center; opacity:.85; font-family:'IBM Plex Mono',monospace; }

.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding: 14px 26px; border-bottom:1px solid var(--line); background: var(--card);
}
.topbar h2{ font-family:'Fraunces', serif; margin:0; font-size:21px; }
.user-chip{ display:flex; align-items:center; gap:10px; }
.user-chip .who{ text-align:right; font-size:12.5px; line-height:1.3;}
.user-chip .who b{ display:block; }
.user-chip .who span{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.5px;}
.content{ padding: 26px; flex:1; overflow-y:auto; }

/* buttons */
button{ font-family:'IBM Plex Sans',sans-serif; cursor:pointer; }
.primary{ background: var(--ink); color: var(--paper); border:none; border-radius:4px; padding:9px 16px; font-weight:600; font-size:13px; }
.primary:hover{ background: var(--ink-soft); }
.ghost{ background:transparent; border:1px solid var(--ink-soft); color:var(--ink-soft); border-radius:4px; padding:7px 12px; font-size:12.5px; }
.ghost:hover{ background: rgba(27,42,74,0.05); }
.link-del{ background:none;border:none;color:var(--red);font-size:16px;cursor:pointer; }

/* cards / dashboard */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom: 26px; }
.stat-card{ background: var(--card); border:1px solid var(--line); border-left:4px solid var(--ink); border-radius:4px; padding:16px 18px; }
.stat-card .num{ font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:600; }
.stat-card .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); margin-top:2px;}
.stat-card.boys{ border-left-color: var(--boy); }
.stat-card.girls{ border-left-color: var(--girl); }

.panel-box{ background: var(--card); border:1px solid var(--line); border-radius:6px; padding:20px 22px; margin-bottom: 20px; }
.panel-box h3{ font-family:'Fraunces', serif; margin:0 0 4px; font-size:18px; }
.panel-box .hint{ font-size:12px; color:var(--ink-soft); margin-bottom:14px; }

/* form/table shared */
.row-form{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; padding-bottom:14px; border-bottom:1px dashed var(--line); align-items:center; }
.row-form input, .row-form select{ padding:8px 10px; border:1px solid #b9ae8e; border-radius:4px; background:#fffdf6; font-size:13px; font-family:'IBM Plex Sans',sans-serif; }
.row-form input[type=text], .row-form input[type=password]{ width:150px; }
.row-form input[type=number]{ width:90px; font-family:'IBM Plex Mono',monospace; }
table.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.data-table th{ text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); border-bottom:2px solid var(--ink); padding:8px; }
table.data-table td{ padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data-table tbody tr:hover{ background: rgba(27,42,74,0.04); }
.mono{ font-family:'IBM Plex Mono',monospace; }
.empty-msg{ padding:24px 10px; text-align:center; color:var(--ink-soft); font-size:13px; }
.badge{ display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-family:'IBM Plex Mono',monospace; border:1px solid currentColor; }
.perm-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin: 10px 0; }
.perm-grid label{ display:flex; align-items:center; gap:6px; font-size:12.5px; background:#fffdf6; border:1px solid var(--line); border-radius:4px; padding:6px 8px; }

/* student list filters */
.student-filter-bar{
  display:grid; grid-template-columns:150px minmax(160px,1fr) minmax(160px,1fr) minmax(190px,1.25fr) auto;
  gap:18px; align-items:end; margin:4px 0 18px; padding:18px;
  background:#f5f7fb; border:1px solid #e1e6ef; border-radius:6px;
}
.student-filter-bar label span{
  display:block; margin-bottom:6px; color:#263246; font-size:12px; font-weight:600;
}
.student-filter-bar select,.student-filter-bar input{
  width:100%; height:40px; padding:0 12px; border:1px solid #cbd3df; border-radius:5px;
  background:#fff; color:var(--ink); font:13px 'IBM Plex Sans',sans-serif;
}
.student-search-btn{
  height:40px; min-width:106px; padding:0 20px; border:0; border-radius:5px;
  background:#5b52cf; color:#fff; font-weight:600;
}
.student-search-btn:hover{background:#4941b8;}
@media(max-width:1050px){.student-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr));}.student-search-btn{width:100%;}}
@media(max-width:600px){.student-filter-bar{grid-template-columns:1fr;gap:12px;padding:14px;}}

/* chart */
.chart-wrap{ overflow-x:auto; }
.legend{ display:flex; gap:16px; font-size:12px; margin-bottom:10px; }
.legend span{ display:flex; align-items:center; gap:6px; }
.legend i{ width:10px;height:10px;border-radius:2px;display:inline-block; }
/* ---------- REFERENCE DASHBOARD ---------- */
.content:has(.dashboard-layout){
  padding:24px;
  background:#f7f9fc;
}
.dashboard-layout{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(330px,.95fr);
  gap:24px;
  align-items:start;
  max-width:1600px;
  margin:0 auto;
}
.dashboard-main{min-width:0;}
.overview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:22px;
}
.overview-card{
  min-height:118px;
  padding:18px 16px 18px 20px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(20,45,75,.02);
  box-shadow:0 7px 18px rgba(23,54,87,.025);
}
.overview-card.blue,.overview-card.sky{background:#eaf7fd;}
.overview-card.yellow{background:#fff8dc;}
.overview-card.pink{background:#fff0f5;}
.overview-card.green,.overview-card.mint{background:#e9fff5;}
.overview-copy{display:flex;flex:1 1 auto;flex-direction:column;gap:4px;min-width:0;}
.overview-copy strong{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:24px;
  line-height:1;
  color:#101820;
  letter-spacing:-1px;
}
.overview-copy span{font-size:14px;line-height:1.25;color:#17202a;white-space:normal;}
.overview-icon{
  width:48px;height:48px;border-radius:9px;
  display:grid;place-items:center;color:#fff;flex:0 0 auto;
}
.overview-card.blue .overview-icon,.overview-card.sky .overview-icon{background:#0aa5e8;}
.overview-card.yellow .overview-icon{background:#ffc20a;}
.overview-card.pink .overview-icon{background:#ee3d6e;}
.overview-card.green .overview-icon,.overview-card.mint .overview-icon{background:#47cc8b;}
.overview-icon svg{
  width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.distribution-card,.birthday-card,.calendar-card{
  background:#fff;border:1px solid #edf1f6;border-radius:10px;
  box-shadow:0 8px 25px rgba(30,58,88,.035);
}
.distribution-card{overflow:hidden;}
.distribution-heading{padding:18px 22px 10px;}
.distribution-heading h3{
  margin:0 0 6px;font-family:'IBM Plex Sans',sans-serif;
  font-size:27px;letter-spacing:-.5px;color:#161b22;
}
.distribution-heading p{margin:0;color:#7b8490;font-size:16px;}
.dashboard-chart{overflow-x:auto;padding:0 14px 8px;scrollbar-color:#8ec8ee #edf7fd;}
.dashboard-chart svg{display:block;min-width:100%;}
.axis-text{font:12px 'IBM Plex Sans',sans-serif;fill:#657386;}
.axis-title{font:600 14px 'IBM Plex Sans',sans-serif;fill:#324458;}
.bar-value{
  font:700 13px 'IBM Plex Sans',sans-serif;fill:#1748d2;
  paint-order:stroke;stroke:#fff;stroke-width:3px;
}
.class-label{font:700 12px 'IBM Plex Sans',sans-serif;fill:#1647c7;}
.chart-bar{cursor:pointer;transition:opacity .2s;}
.chart-bar:hover{opacity:.76;}
.dashboard-side{display:flex;flex-direction:column;gap:22px;min-width:0;}
.birthday-card{min-height:315px;overflow:hidden;}
.birthday-header{
  padding:20px 18px 14px;display:flex;align-items:center;
  justify-content:space-between;gap:15px;border-bottom:1px solid #edf1f6;
}
.birthday-header h3{margin:0;font-size:18px;color:#161b22;}
.wish-controls{display:flex;gap:10px;flex:1;justify-content:flex-end;}
.wish-controls input{
  min-width:0;max-width:250px;width:100%;height:38px;
  border:1px solid #b9d8e8;background:#fbfdff;border-radius:6px;padding:0 10px;
}
.wish-controls button,#wishBtn{
  border:0;background:#367bd6;color:#fff;border-radius:4px;
  padding:0 16px;font-size:13px;white-space:nowrap;
}
.birthday-tabs{display:flex;gap:0;padding:10px 16px 0;border-bottom:1px solid #edf1f6;}
.birthday-tabs button{
  padding:9px 14px;background:transparent;border:0;border-bottom:2px solid transparent;
  color:#718096;font-size:13px;
}
.birthday-tabs button.active{color:#367bd6;border-bottom-color:#367bd6;background:#f9fbfd;}
.birthday-list{height:205px;overflow-y:auto;padding:8px 20px 16px;}
.birthday-today{font-size:12px;margin-bottom:10px;color:#4c5562;}
.birthday-person{display:flex;align-items:center;gap:13px;margin:13px 0;}
.birthday-avatar{
  width:50px;height:50px;border:2px solid #3d81d5;border-radius:50%;
  display:grid;place-items:center;font-weight:700;color:#233146;position:relative;flex:0 0 auto;
}
.birthday-avatar.tone-1{border-color:#46cd8a;}
.birthday-avatar.tone-2{border-color:#f3ac39;}
.birthday-avatar span{
  position:absolute;right:-3px;bottom:0;background:#fff;color:#4c86d6;
  width:19px;height:19px;border-radius:50%;font-size:10px;display:grid;place-items:center;
}
.birthday-person strong{display:block;font-size:13px;color:#252c38;text-transform:uppercase;}
.birthday-person small{display:block;margin-top:3px;color:#717b87;font-size:12px;}
.birthday-empty{height:170px;display:grid;place-items:center;color:#89929c;font-size:13px;}
.calendar-card{padding:17px 18px 20px;}
.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;}
.calendar-toolbar>div:first-child{display:flex;align-items:center;gap:28px;}
.calendar-toolbar strong{font-size:14px;font-weight:500;}
.calendar-toolbar span{font-size:14px;}
.calendar-actions{display:flex;gap:9px;}
.calendar-actions button{
  width:34px;height:34px;border:0;border-radius:5px;background:#f4f6f8;
  color:#626b75;font-size:21px;line-height:1;
}
.calendar-week,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.calendar-week span{text-align:center;padding:7px 0 10px;font-size:12px;font-weight:600;}
.calendar-grid{gap:2px;}
.calendar-day{
  min-height:61px;border:0;border-radius:6px;background:#f8f9fb;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#242a30;font-size:15px;
}
.calendar-day small{font-size:10px;margin-top:5px;color:#48515b;}
.calendar-day.muted{opacity:.25;}
.calendar-day.holiday:not(.muted){color:#e94d57;background:#fff1f2;}
.calendar-day.holiday:not(.muted) small{color:#e94d57;}
.calendar-day.today{background:#cfe1f7;color:#142a44;}
.calendar-day:hover{outline:1px solid #91b9e8;}

@media (max-width:1300px){
  .dashboard-layout{grid-template-columns:minmax(0,1.5fr) minmax(310px,.8fr);}
  .overview-card{min-height:104px;padding:16px;gap:10px;}
  .overview-icon{width:44px;height:44px;}
  .overview-icon svg{width:24px;height:24px;}
  .overview-copy strong{font-size:22px;}
  .overview-copy span{font-size:13px;}
}
@media (max-width:1050px){
  .dashboard-layout{grid-template-columns:1fr;}
  .dashboard-side{display:grid;grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .content:has(.dashboard-layout){padding:14px;}
  .overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .overview-card{min-height:92px;padding:13px;gap:10px;}
  .overview-icon{width:42px;height:42px;border-radius:8px;}
  .overview-icon svg{width:23px;height:23px;}
  .overview-copy strong{font-size:21px;}
  .overview-copy span{font-size:12px;}
  .dashboard-side{display:flex;}
  .distribution-heading h3{font-size:21px;}
  .birthday-header{align-items:flex-start;flex-direction:column;}
  .wish-controls{width:100%;}
  .calendar-card{padding:12px 8px;}
  .calendar-day{min-height:51px;}
}
@media (max-width:430px){
  .overview-grid{grid-template-columns:1fr;}
  .overview-card{min-height:92px;}
}

/* ---------- IEMIS IMPORT ---------- */
.student-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px;}
.student-heading h3,.student-heading .hint{margin:0;}
.student-heading .hint{margin-top:4px;}
#openIemis{white-space:nowrap;background:#1769aa;}
.iemis-importer{border:1px solid #bfd6e8;background:#f8fcff;border-radius:8px;margin:8px 0 22px;overflow:hidden;}
.iemis-import-header,.iemis-upload{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:18px 20px;border-bottom:1px solid #cfe2ef;}
.iemis-import-header{background:#eaf5fc;}.iemis-import-header h3{margin:0 0 4px;font-family:'IBM Plex Sans',sans-serif;}.iemis-import-header p{margin:0;color:#52687b;font-size:12px;}
.iemis-upload{align-items:center;}.iemis-upload strong,.iemis-upload small{display:block;}.iemis-upload small{margin-top:4px;color:var(--ink-soft);font-size:11px;}
.iemis-upload-actions{display:flex;gap:10px;align-items:center;}.file-button{display:inline-flex;align-items:center;cursor:pointer;}.file-button input{display:none;}
.iemis-placeholder{padding:38px 20px;text-align:center;color:#718296;font-size:13px;}.iemis-step{padding:18px 20px;border-bottom:1px solid #dce8f0;}
.iemis-step-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:13px;}.iemis-step-title span{font-size:11px;color:var(--ink-soft);}
.iemis-mapping{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:11px;}.iemis-mapping label span{display:block;font-size:10px;text-transform:uppercase;color:#52687b;margin-bottom:4px;}.iemis-mapping select{width:100%;padding:8px;border:1px solid #b9cbd8;border-radius:4px;background:white;}
.iemis-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 20px;background:#fff;}.iemis-summary>span{padding:12px;border-left:4px solid #5088b8;background:#f4f8fb;font:600 22px 'IBM Plex Mono',monospace;}.iemis-summary small{display:block;font:11px 'IBM Plex Sans',sans-serif;color:#617184;margin-top:3px;}.iemis-summary .ready{border-color:#259565}.iemis-summary .duplicate{border-color:#d49a1f}.iemis-summary .invalid{border-color:#bd3c3c}
.iemis-preview-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-top:1px solid #dce8f0;}.iemis-preview-head strong,.iemis-preview-head small{display:block;}.iemis-preview-head small{margin-top:3px;color:var(--ink-soft);}.iemis-preview-head button:disabled{opacity:.45;cursor:not-allowed;}
.table-scroll{overflow-x:auto;}.iemis-preview-table{min-width:850px;background:#fff;}.import-status{display:inline-block;padding:3px 7px;border-radius:10px;font-size:10px;font-weight:600;}.import-status.ready{color:#176c4a;background:#dcf6ea}.import-status.duplicate{color:#825d0a;background:#fff1c8}.import-status.error{color:#912d2d;background:#ffe1e1}
@media(max-width:800px){.student-heading,.iemis-upload,.iemis-import-header{flex-direction:column}.iemis-mapping{grid-template-columns:repeat(2,minmax(140px,1fr))}.iemis-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.iemis-mapping{grid-template-columns:1fr}.iemis-upload-actions{width:100%;flex-wrap:wrap}.iemis-preview-head{align-items:flex-start;flex-direction:column}}


/* ---------- STUDENT COLUMN VISIBILITY ---------- */
.student-table-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:4px 0 12px;padding:10px 0;
}
.student-table-toolbar>div:first-child{display:flex;flex-direction:column;gap:2px;}
.student-table-toolbar strong{font-family:'Fraunces',serif;font-size:17px;}
.student-table-toolbar small{color:var(--ink-soft);font-size:11px;}
.column-picker{position:relative;}
.column-picker-menu{
  position:absolute;right:0;top:calc(100% + 7px);z-index:30;width:290px;max-height:390px;
  overflow-y:auto;padding:10px;background:#fffdf6;border:1px solid #b9ae8e;border-radius:6px;
  box-shadow:0 14px 32px rgba(27,42,74,.18);
}
.column-picker-menu label{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:4px;
  color:var(--ink);font-size:12.5px;cursor:pointer;
}
.column-picker-menu label:hover{background:#f1ecdd;}
.column-picker-menu input{accent-color:var(--ink);}
.column-picker-actions{
  position:sticky;bottom:-10px;display:flex;justify-content:flex-end;gap:7px;
  margin:8px -2px -2px;padding:10px 2px 2px;background:#fffdf6;border-top:1px solid var(--line);
}
.column-picker-actions button{
  padding:6px 9px;border:1px solid var(--line);border-radius:4px;background:#f7f2e5;
  color:var(--ink);font-size:11.5px;
}
.student-table-scroll{max-height:58vh;overflow:auto;}
.student-table-scroll table{min-width:max-content;}
.student-table-scroll thead{position:sticky;top:0;z-index:2;background:var(--card);}
.student-table-scroll th,.student-table-scroll td{white-space:nowrap;}
@media(max-width:600px){
  .student-table-toolbar{align-items:stretch;flex-direction:column;}
  .column-picker .ghost{width:100%;}
  .column-picker-menu{left:0;right:auto;width:min(290px,calc(100vw - 56px));}
}

/* ---------- STUDENT RECORD MANAGEMENT ---------- */
.student-header-actions,.student-list-tabs{display:flex;gap:9px;flex-wrap:wrap}.student-add-card{border:1px solid #dbe6ef;border-radius:7px;margin:0 0 16px;background:#fbfdff}.student-add-card summary{padding:13px 16px;cursor:pointer;font-weight:600;color:#1e5e94}.student-form{padding:15px;display:grid;grid-template-columns:repeat(4,minmax(135px,1fr));gap:10px;align-items:center}.student-form input,.student-form select{width:100%;padding:9px;border:1px solid #b9cbd8;border-radius:4px;background:#fff}.photo-input{grid-row:span 2;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:12px}.photo-input input{max-width:180px}.student-list-tabs{margin:12px 0 0;border-bottom:1px solid #dbe6ef}.student-list-tabs button{border:0;background:transparent;padding:11px 15px;color:#687789}.student-list-tabs button.active{color:#1769aa;border-bottom:2px solid #1769aa;font-weight:700}.column-picker{position:relative;align-self:end}.column-picker>summary{list-style:none;cursor:pointer;padding:10px 12px;border:1px solid #9fb6c8;border-radius:4px;background:#fff;white-space:nowrap}.column-picker>div{position:absolute;right:0;top:44px;z-index:20;background:#fff;border:1px solid #c9d7e2;border-radius:6px;box-shadow:0 10px 30px rgba(20,45,70,.16);padding:10px;display:grid;grid-template-columns:repeat(2,minmax(170px,1fr));width:390px}.column-picker label{padding:6px;font-size:12px}.student-data-table{min-width:760px}.sort-heading{border:0;background:transparent;padding:0;color:inherit;font:inherit;font-weight:700;display:flex;gap:6px;align-items:center;white-space:nowrap}.sort-heading span{font-size:10px;color:#7390a8}.student-photo{width:36px;height:42px;display:inline-block;border:1px solid #aebdca;border-radius:3px;background:#fff;overflow:hidden;vertical-align:middle}.student-photo.large{width:92px;height:108px}.student-photo img{width:100%;height:100%;display:block;object-fit:cover}.action-menu{position:relative}.action-menu>summary{list-style:none;cursor:pointer;display:inline-block;padding:6px 10px;border:1px solid #a9bdcc;border-radius:4px;color:#1769aa;background:#fff}.action-menu>div{position:absolute;right:0;z-index:15;min-width:145px;background:#fff;border:1px solid #cad8e2;border-radius:5px;box-shadow:0 8px 24px rgba(20,45,70,.16);padding:5px}.action-menu button{display:block;width:100%;padding:8px 10px;text-align:left;border:0;background:#fff}.action-menu button:hover{background:#edf6fc}.student-modal{position:fixed;inset:0;z-index:100;background:rgba(15,28,40,.55);display:grid;place-items:center;padding:20px}.student-modal-card{position:relative;background:#fff;border-radius:9px;padding:25px;max-width:900px;width:100%;max-height:90vh;overflow:auto}.modal-close{position:absolute;right:12px;top:9px;border:0;background:transparent;font-size:27px}.student-profile{text-align:center}.student-profile>p{display:grid;grid-template-columns:190px 1fr;text-align:left;border-bottom:1px solid #edf1f4;padding:8px;margin:0}.student-profile>p strong{color:#52687b}.student-profile>p span{color:#172432}
@media(max-width:900px){.student-form{grid-template-columns:repeat(2,minmax(140px,1fr))}}
@media(max-width:600px){.student-heading{align-items:stretch}.student-header-actions{width:100%}.student-form{grid-template-columns:1fr}.column-picker>div{position:fixed;left:15px;right:15px;top:auto;width:auto;grid-template-columns:1fr 1fr}.student-profile>p{grid-template-columns:1fr;gap:3px}}


/* Compact student column visibility picker */
.column-picker > div,
.column-picker-menu{
  width:260px;
  max-height:320px;
  grid-template-columns:1fr;
  gap:2px;
  padding:8px;
}
.column-picker > div label,
.column-picker-menu label{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:4px 6px;
  line-height:1.2;
}
.column-picker input[type="checkbox"],
.column-picker-menu input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:checkbox;
  width:15px;
  height:15px;
  min-width:15px;
  margin:0;
  padding:0;
  flex:0 0 15px;
}
@media(max-width:600px){
  .column-picker > div,
  .column-picker-menu{
    grid-template-columns:1fr;
    width:min(260px,calc(100vw - 30px));
  }
}

/* Complete student detail and edit views */
.student-form-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:4px 15px 0}.student-form-heading h3{margin:0 0 4px}.student-form-heading p{margin:0;color:#718091;font-size:13px}.student-complete-form>label:not(.photo-input){display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#52687b}.student-complete-form .form-wide{grid-column:span 2}.student-form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:5px}.student-profile-sheet{background:#fff}.profile-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 0 16px;border-bottom:1px solid #dde5ec}.profile-toolbar>div:first-child{display:flex;flex-direction:column}.profile-toolbar span{font-size:18px;font-weight:800;color:#526b8c}.profile-toolbar small{color:#8a98a7;margin-top:3px}.profile-toolbar>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.profile-identity{display:flex;align-items:center;gap:20px;padding:22px 10px;background:#f7f9fc;border-bottom:1px solid #e2e8ef}.profile-identity .student-photo.large{width:120px;height:140px;background:#eef1f4}.profile-identity h2{margin:0 0 4px;font-size:28px;color:#111827;text-transform:uppercase}.profile-identity b{color:#4f55d8}.profile-identity p{margin:10px 0 0;color:#64748b}.profile-details{display:grid;grid-template-columns:1fr 1fr;column-gap:46px;padding:22px 10px}.profile-field{display:grid;grid-template-columns:minmax(145px,190px) 1fr;gap:14px;padding:9px 0;border-bottom:1px solid #edf1f5}.profile-field strong{color:#596a7c}.profile-field span{color:#26384a;overflow-wrap:anywhere}
@media(max-width:760px){.profile-toolbar,.profile-identity{align-items:flex-start;flex-direction:column}.profile-details{grid-template-columns:1fr;column-gap:0}.profile-field{grid-template-columns:135px 1fr}.student-complete-form .form-wide{grid-column:auto}.student-form-heading{align-items:flex-start;flex-direction:column}.profile-identity h2{font-size:22px}}
@media print{body *{visibility:hidden}.student-modal,.student-modal *{visibility:visible}.student-modal{position:absolute;inset:0;background:#fff;padding:0}.student-modal-card{box-shadow:none;max-width:none;max-height:none;padding:0}.modal-close,.profile-toolbar>div:last-child{display:none!important}}