:root{
  --ink:#1B2A44; --ink-soft:#3C4B66; --paper:#F1EFE4; --cream:#FAF8F1;
  --navy-deep:#0F1930; --navy-deep-2:#182543; --brass:#B8863B; --brass-light:#D8AE68;
  --burgundy:#7A2331; --burgundy-light:#96303F; --line:rgba(27,42,68,0.14);
  --serif:'Fraunces', serif; --sans:'Libre Franklin', sans-serif;
  --good:#2E7D4F; --warn:#B8863B; --bad:#96303F; --bad-light:#FF9494;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.5; min-height:100vh; }
a{ color:var(--burgundy); }

.topbar{
  background:var(--navy-deep); color:var(--cream); padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:3px solid var(--brass); box-shadow:0 2px 12px rgba(15,25,48,0.25);
}
.topbar .brand{ display:flex; align-items:center; gap:12px; font-family:var(--serif); font-weight:600; font-size:1.2rem; }
.topbar .brand img{ height:38px; width:auto; display:block; }
.topbar .brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.topbar .brand-text span{ color:var(--brass-light); font-size:.72rem; font-weight:600; display:block; letter-spacing:.1em; text-transform:uppercase; margin-top:2px; }
.topbar .who{ display:flex; align-items:center; gap:16px; font-size:.9rem; }
.topbar button{
  background:transparent; border:1px solid rgba(216,220,230,0.35); color:var(--cream);
  padding:8px 16px; border-radius:2px; cursor:pointer; font-size:.85rem; transition:background .18s ease, border-color .18s ease;
}
.topbar button:hover{ background:rgba(216,174,104,0.12); border-color:var(--brass-light); }

.wrap{ max-width:1100px; margin:0 auto; padding:36px 28px 80px; }

h1{ font-family:var(--serif); font-size:2rem; font-weight:600; margin-bottom:8px; letter-spacing:-.01em; }
h2{ font-family:var(--serif); font-size:1.32rem; font-weight:600; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--line); position:relative; }
h2::after{ content:''; position:absolute; left:0; bottom:-2px; width:46px; height:2px; background:var(--brass); }
.subtext{ color:var(--ink-soft); margin-bottom:28px; }

.card{
  background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:28px;
  margin-bottom:24px; box-shadow:0 3px 14px rgba(15,25,48,0.05);
}

.tabs{ display:flex; gap:6px; margin-bottom:24px; flex-wrap:wrap; }
.tab{
  padding:10px 20px; border-radius:2px; cursor:pointer; font-size:.86rem; font-weight:600;
  background:var(--cream); border:1px solid var(--line); color:var(--ink-soft);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.tab:hover{ border-color:var(--brass); color:var(--ink); }
.tab.active{ background:var(--navy-deep); color:var(--cream); border-color:var(--navy-deep); }
.tab.active:hover{ color:var(--cream); }

label{ display:block; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:6px; }
input, select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:2px;
  font-family:var(--sans); font-size:.95rem; background:#fff; color:var(--ink);
  transition:border-color .15s ease; box-sizing:border-box;
}
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233C4B66' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px;
  padding-right:34px; cursor:pointer;
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass); }
textarea{ font-family:var(--sans); resize:vertical; }
.field{ margin-bottom:16px; }
.row{ display:flex; gap:16px; flex-wrap:wrap; }
.row .field{ flex:1; min-width:160px; }

button.primary{
  background:var(--burgundy); color:var(--cream); border:1px solid var(--burgundy-light);
  padding:11px 22px; border-radius:2px; font-weight:600; cursor:pointer; font-size:.9rem;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
button.primary:hover{ background:var(--burgundy-light); transform:translateY(-1px); box-shadow:0 4px 12px rgba(122,35,49,0.25); }
button.ghost{
  background:transparent; border:1px solid var(--line); color:var(--ink);
  padding:9px 16px; border-radius:2px; cursor:pointer; font-size:.85rem;
  transition:background .18s ease, border-color .18s ease;
}
button.ghost:hover{ background:rgba(184,134,59,0.08); border-color:var(--brass); }

table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th{
  text-align:left; padding:11px 12px; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--brass-light); background:var(--navy-deep); font-weight:700;
}
th:first-child{ border-top-left-radius:4px; }
th:last-child{ border-top-right-radius:4px; }
td{ padding:10px 12px; border-bottom:1px solid var(--line); }
tbody tr:nth-child(even) td{ background:rgba(184,134,59,0.045); }
tr:hover td{ background:rgba(184,134,59,0.1); }

.score-input{ width:64px; padding:6px 8px; text-align:center; border-radius:3px; }

/* ---------- Gradebook: spreadsheet-style scrolling table ---------- */
.gradebook-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:4px; }
#gradebookTable{ width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; font-size:.88rem; }
#gradebookTable th, #gradebookTable td{ padding:10px 14px; white-space:nowrap; border-bottom:1px solid var(--line); }
#gradebookTable thead th{
  background:var(--navy-deep); color:var(--cream); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.04em; font-weight:700; text-align:left; border-bottom:none;
}
#gradebookTable tbody tr:nth-child(odd) td{ background:#fff; }
#gradebookTable tbody tr:nth-child(even) td{ background:var(--paper); }
#gradebookTable tbody tr:hover td{ background:rgba(184,134,59,0.14); }
#gradebookTable th:first-child, #gradebookTable td:first-child{
  position:sticky; left:0; z-index:1; box-shadow:2px 0 5px rgba(0,0,0,0.08); font-weight:600;
}
#gradebookTable thead th:first-child{ z-index:2; }
.msg-icon-btn{ position:relative; display:inline-flex; align-items:center; gap:7px; background:transparent; border:1px solid rgba(216,220,230,0.35); color:var(--cream); padding:8px 14px; border-radius:2px; cursor:pointer; font-size:.85rem; font-weight:600; }
.msg-icon-btn svg{ width:18px; height:18px; flex-shrink:0; }
.msg-icon-btn:hover{ background:rgba(216,174,104,0.12); border-color:var(--brass-light); }
.msg-badge{ display:none; position:absolute; top:-6px; right:-6px; background:var(--burgundy); color:#fff; border-radius:50%; min-width:18px; height:18px; font-size:.65rem; align-items:center; justify-content:center; font-weight:700; padding:0 3px; }
.msg-overlay{ display:none; position:fixed; top:0; right:0; bottom:0; width:400px; max-width:100%; background:#fff; box-shadow:-4px 0 24px rgba(0,0,0,0.2); z-index:1000; flex-direction:column; }
.msg-overlay-header{ padding:16px 18px; border-bottom:3px solid var(--brass); display:flex; justify-content:space-between; align-items:center; background:var(--navy-deep); color:var(--cream); }
.msg-overlay-header h3{ font-family:var(--serif); font-size:1.1rem; margin:0; }
.msg-overlay-header button{ background:transparent; border:none; color:var(--cream); font-size:1.3rem; cursor:pointer; line-height:1; }
.msg-thread-item{ padding:12px 18px; border-bottom:1px solid var(--line); cursor:pointer; }
.msg-thread-item:hover{ background:var(--paper); }
.msg-thread-preview{ font-size:.8rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.msg-new-btn{ margin:14px 18px; }
.msg-messages{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg-bubble{ max-width:80%; padding:9px 12px; border-radius:12px; font-size:.88rem; line-height:1.4; }
.msg-bubble.mine{ align-self:flex-end; background:var(--navy-deep); color:var(--cream); border-bottom-right-radius:2px; }
.msg-bubble.theirs{ align-self:flex-start; background:var(--paper); border:1px solid var(--line); border-bottom-left-radius:2px; }
.msg-time{ font-size:.65rem; opacity:.65; margin-top:4px; }
.msg-reply-box{ padding:12px; border-top:1px solid var(--line); display:flex; gap:8px; }
.msg-reply-box textarea{ flex:1; resize:none; }
.msg-compose-overlay{ display:none; position:fixed; inset:0; background:rgba(15,25,48,0.5); z-index:1100; align-items:center; justify-content:center; }
.msg-compose-box{ background:#fff; border-radius:6px; padding:24px; width:90%; max-width:420px; }

.roster-photo{ width:36px; height:36px; border-radius:50%; object-fit:cover; display:none; vertical-align:middle; background:var(--line); }
.roster-photo-placeholder{ width:36px; height:36px; border-radius:50%; background:var(--navy-deep); color:var(--brass-light); display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; vertical-align:middle; }
.photo-upload-btn{ font-size:.7rem; cursor:pointer; color:var(--brass); text-decoration:underline; }

.letter-badge{
  display:inline-block; padding:3px 11px; border-radius:12px; font-weight:700; font-size:.85rem;
}
.letter-A{ background:rgba(46,125,79,0.12); color:var(--good); }
.letter-B{ background:rgba(184,134,59,0.14); color:#8a6423; }
.letter-C{ background:rgba(184,134,59,0.18); color:var(--warn); }
.letter-D, .letter-F{ background:rgba(150,48,63,0.12); color:var(--bad); }

.status-badge{ display:inline-block; padding:3px 11px; border-radius:12px; font-weight:700; font-size:.76rem; }
.status-active{ background:rgba(46,125,79,0.12); color:var(--good); }
.status-pending{ background:rgba(184,134,59,0.18); color:var(--warn); }
.status-none{ background:rgba(60,75,102,0.1); color:var(--ink-soft); }
.status-fee{ background:rgba(47,102,144,0.12); color:#2f6690; }
.status-declined{ background:rgba(150,48,63,0.12); color:var(--bad); }
.detail-section{ margin-bottom:10px; }
.detail-section dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-top:12px; }
.detail-section dd{ font-size:.92rem; margin:2px 0 0; }
.last-login{ display:block; font-size:.72rem; color:var(--ink-soft); margin-top:2px; }
.row-actions{ display:flex; gap:6px; }
.row-actions button{ font-size:.78rem; padding:6px 12px; }
.edit-input{ padding:6px 8px; font-size:.85rem; }

.grade-checkbox-group{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:10px 12px; border:1px solid var(--line); border-radius:2px; background:#fff; }
.grade-checkbox-group label{ display:flex; align-items:center; gap:4px; text-transform:none; font-weight:400; font-size:.88rem; margin-bottom:0; cursor:pointer; }
.grade-checkbox-group input[type=checkbox]{ width:auto; margin:0; }

.doc-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); gap:16px; flex-wrap:wrap; }
.doc-row:last-child{ border-bottom:none; }
.doc-name{ font-weight:600; flex:1; min-width:200px; }
.doc-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.bulk-grade-popover{
  background:#fff; border:1px solid var(--brass); border-radius:4px; padding:7px 12px;
  box-shadow:0 4px 14px rgba(0,0,0,0.18); z-index:500; animation:bulkPopIn .1s ease-out;
}
.bulk-grade-popover label{
  display:flex; align-items:center; gap:6px; font-size:.8rem; text-transform:none;
  font-weight:400; white-space:nowrap; color:var(--ink); cursor:pointer; margin:0;
}
.bulk-grade-popover input[type=checkbox]{ width:auto; margin:0; }
@keyframes bulkPopIn{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:translateY(0); } }

.att-btns{ display:flex; gap:6px; }
.att-btn{
  padding:6px 12px; border-radius:2px; border:1px solid var(--line); background:#fff;
  cursor:pointer; font-size:.8rem; font-weight:600; color:var(--ink-soft);
}
.att-btn.selected.present{ background:var(--good); border-color:var(--good); color:#fff; }
.att-btn.selected.absent{ background:var(--bad); border-color:var(--bad); color:#fff; }
.att-btn.selected.half_day{ background:#C2703D; border-color:#C2703D; color:#fff; }
.att-btn.selected.tardy{ background:var(--warn); border-color:var(--warn); color:#fff; }
.att-btn.selected.excused{ background:var(--ink-soft); border-color:var(--ink-soft); color:#fff; }

.msg{ padding:12px 16px; border-radius:2px; margin-bottom:16px; font-size:.9rem; }
.msg.error{ background:rgba(150,48,63,0.1); color:var(--burgundy); border:1px solid rgba(150,48,63,0.25); }
.msg.success{ background:rgba(46,125,79,0.1); color:var(--good); border:1px solid rgba(46,125,79,0.25); }

.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(184,134,59,0.16), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-deep-2) 100%);
  padding:20px;
}
.login-box{
  background:var(--cream); padding:46px 44px; width:100%; max-width:400px; border-radius:6px;
  box-shadow:0 24px 60px rgba(0,0,0,0.35); text-align:center;
}
.login-box img.crest{ height:56px; width:auto; margin:0 auto 20px; display:block; }
.login-box h1{ font-size:1.55rem; margin-bottom:4px; text-align:center; }
.login-box .tag{ color:var(--ink-soft); font-size:.82rem; margin-bottom:30px; letter-spacing:.03em; text-transform:uppercase; }
.login-box .field{ text-align:left; }

.empty{ color:var(--ink-soft); font-style:italic; padding:20px 0; text-align:center; }

/* ============================================================
   MOBILE (768px and narrower)
   ============================================================ */
@media (max-width: 768px) {
  body{ padding:0 12px; }

  /* Topbar: wrap instead of overflowing, shrink a bit to fit */
  .topbar{ flex-wrap:wrap; gap:8px 12px; padding:12px 16px; }
  .topbar .brand{ font-size:1rem; }
  .topbar .brand img{ height:30px; }
  .topbar .brand-text span{ font-size:.62rem; }
  .topbar .who{ gap:8px; font-size:.82rem; flex-wrap:wrap; }
  .msg-icon-btn span:not(.msg-badge){ display:none; } /* icon alone is enough once space is tight; badge still shows */

  /* Tabs: fit more comfortably without needing to shrink text unreadably */
  .tabs{ gap:4px; margin-bottom:16px; }
  .tab{ padding:7px 11px; font-size:.8rem; }

  .card{ padding:18px 16px; }

  /* Forms: every field goes full-width, single column — overrides the many inline
     max-width styles scattered across the app that were sized for desktop rows. */
  .field{ max-width:none !important; width:100%; }
  .row{ gap:10px; }
  .row-actions{ flex-wrap:wrap; }

  /* Tables: horizontal scroll instead of squishing every column unreadably thin.
     Pages that already wrap their table in a scroll container (like the gradebook's
     .gradebook-scroll) are unaffected by this — this is the safety net for the many
     tables (Students, Staff, Classes, Records, etc.) that don't have one. */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }

  /* Gradebook specifically: keep the student's name visible while scrolling sideways
     through assignment columns — this was the core "impossible to navigate" problem,
     not the scrolling itself (that already worked), but losing track of which row
     you were on once the name column scrolled out of view. */
  #gradebookTable th:first-child, #gradebookTable td:first-child{
    position:sticky; left:0; z-index:2; box-shadow:2px 0 5px rgba(0,0,0,0.12);
  }
  #gradebookTable td:first-child{ background:#fff; }
  #gradebookTable tbody tr:nth-child(even) td:first-child{ background:var(--paper); }
  #gradebookTable th:first-child{ background:var(--navy-deep); z-index:3; }

  /* Messaging panel: full width instead of a fixed 400px that would overflow a phone */
  .msg-overlay{ width:100%; }

  /* Checkbox/pill groups (grade selectors, status filters) wrap more tightly */
  .grade-checkbox-group{ gap:8px 10px; padding:8px 10px; }

  /* Attendance status buttons: daily-use touch targets were too small for comfortable tapping */
  .att-btn{ padding:10px 14px; font-size:.85rem; }
  .att-btns{ gap:8px; }
}