*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#f7f7fb;color:#222}
header{background:#0ea5e9;border-bottom:1px solid #e6e6ef;position:sticky;top:0;z-index:10}
h1{margin:0;padding:16px 20px;font-size:20px}
nav#tabs{display:flex;gap:8px;padding:0 12px 12px 12px}
nav#tabs .tab{padding:10px 12px;border-radius:10px;text-decoration:none;color:#333;border:1px solid #ddd;background:#fff}
nav#tabs .tab.active{background:#222;color:#fff;border-color:#222}

/* Role-based UI gating */
nav#tabs .tab.disabled{opacity:.45;pointer-events:auto;filter:grayscale(1)}
button.ghost.disabled{opacity:.45;pointer-events:auto;filter:grayscale(1)}
main{padding:16px}
.panel{display:none}
.panel.active{display:block}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.form-grid label{display:flex;flex-direction:column;font-size:14px;gap:6px}
input[type=text],input[type=number],input[type=date],textarea{padding:8px;border:1px solid #ccc;border-radius:8px}
input[readonly]{background:#f3f3f7}
button{padding:10px 14px;border:none;border-radius:10px;background:#222;color:#fff;cursor:pointer}
button.ghost{background:#fff;color:#222;border:1px solid #ddd}


/* Same Tutor tools */
#sameTutorView{border:1px solid #e5e5e5;border-radius:10px;padding:10px;background:#fff}
#sameTutorView .tutorHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}
#sameTutorView .tutorList{margin:8px 0 0 0;padding:0 0 0 18px}
#sameTutorView details{border:1px solid #eee;border-radius:10px;padding:8px 10px;margin:8px 0}
#sameTutorView details summary{cursor:pointer;font-weight:600}
#sameTutorView .tutorNameBtn{background:transparent;border:0;color:#0b57d0;cursor:pointer;padding:4px 0;text-align:left}
#sameTutorView .tutorNameBtn:hover{text-decoration:underline}
button:disabled{opacity:.6;cursor:not-allowed}
.toolbar{display:flex;gap:10px;align-items:center;margin:8px 0;flex-wrap:wrap}
.table-wrap{overflow:auto;border:1px solid #e6e6ef;border-radius:10px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid #eee;text-align:left}
thead th{position:sticky;top:0;background:#fafafe;border-bottom:1px solid #e6e6ef}
tfoot td{background:#fafafe;font-weight:600}
.msg{margin-top:8px;font-size:13px}
.numlist{background:#fff;border:1px solid #e6e6ef;border-radius:10px;padding:10px 26px}
.muted{color:#666;font-size:13px}
#clientsList .row{display:flex;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid #eee;background:#fff}
#clientsList .row .idx{width:42px;text-align:right;color:#888}
#clientsList .row .name{flex:1}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:10px}
.dialog{background:#fff;border:1px solid #ddd;border-radius:12px;padding:12px;max-width:900px}
.dialog.hidden{display:none}
.dialog-actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
footer{padding:12px 16px;color:#666}
.small{font-size:12px;color:#666}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef;border:1px solid #dde;color:#334}
.right{display:flex;justify-content:flex-end;gap:12px;align-items:center}
.totalbar{display:flex;justify-content:flex-end;gap:16px;align-items:center;margin-top:8px}
.totalbar .box{background:#fff;border:1px solid #e6e6ef;border-radius:10px;padding:8px 12px;min-width:160px;text-align:right}

.platform-badge {
  margin-left: .5rem;
  padding: .2rem .5rem;
  border-radius: .5rem;
  background: #eef2ff;
  color: #1e293b;
  font-size: .9rem;
  font-weight: 600;
  vertical-align: middle;
}
.orgline { margin:.25rem 0 .5rem; color:#334155; font-size:.95rem; }


#platformTitle {
  margin-left:.5rem; padding:.2rem .5rem; border-radius:.5rem;
  background:#eef2ff; color:#1e293b; font-weight:600; font-size:.9rem;
}

#orgName { margin:.25rem 0 .5rem; color:#334155; font-weight:600; }








/* Edit Client dialog sizing */
#editClientForm {
  width: 567px;           /* make dialog wider */
  max-width: 96vw;        /* responsive on small screens */
}

/* Make inputs fill the row */
#editClientForm label {
  display: block;
  margin: 8px 0;
}

#editClientForm input[type="text"],
#editClientForm input[type="number"],
#editClientForm textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
}

/* If you want ONLY the New Name wider, keep others default and just do: */
#editClientNewName { width: 100%; box-sizing: border-box; }




/* === Clients export tabs: All / By ClientID === */

/* Base style */
#exportClientsWrap .tab {
  background-color: #2c6bed;   /* blue (adjust if needed) */
  color: #ffffff !important;   /* white text */
  border: none;
  padding: 4px 10px;
  margin-right: 6px;
  border-radius: 4px;
  cursor: pointer;
}

/* Active tab */
#exportClientsWrap .tab.active {
  background-color: #000000;   /* darker blue */
  color: #ffffff !important;
}

/* Hover */
#exportClientsWrap .tab:hover {
  background-color: #808080;
  color: #ffffff !important;
}





/* === Clients export tabs: All / By ClientID === */

/* Base style */
#exportClientsWrap .tab {
  background-color: #808080;   /* blue (adjust if needed) */
  color: #ffffff !important;   /* white text */
  border: none;
  padding: 4px 10px;
  margin-right: 6px;
  border-radius: 4px;
  cursor: pointer;
}

/* Active tab */
#exportClientsWrap .tab.active {
  background-color: #000000;   /* darker blue */
  color: #ffffff !important;
}

/* Hover */
#exportClientsWrap .tab:hover {
  background-color: #964B00;
  color: #ffffff !important;
}



/* ---------- Modal (Student Profile) ---------- */
.modal.hidden { display: none; }
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}
.modalCard{
  background: #fff;
  border-radius: 12px;
  width: min(900px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.modalTitle{ font-weight: 700; }
.grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.grid2 label{ display:block; font-size: 12px; color:#333; }
.grid2 input{ width: 100%; padding: 8px; }
.grid2 .col2{ grid-column: 1 / -1; }
.modalActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top: 14px;
}
@media (max-width: 720px){
  .grid2{ grid-template-columns: 1fr; }
}


/* SchoolYear selector */
.schoolyear-bar{display:flex;align-items:center;gap:8px;margin-top:6px;}
.schoolyear-bar select{padding:6px 8px;border:1px solid #ccc;border-radius:6px;}
#schoolYearLockBadge{padding:4px 8px;border-radius:999px;background:#f2f2f2;font-size:12px;}
#schoolYearLockBadge.locked{background:#ffe7e7;}

/* === Typeahead suggest dropdown (Invoice Entry + Group Statement) === */
.suggest{position:relative}
.suggest>div{
  position:absolute; left:0; right:0; top:4px;
  background:#fff; border:1px solid #ddd; border-radius:10px;
  max-height:240px; overflow:auto; z-index:1000;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.suggest button{
  display:block; width:100%;
  text-align:left;
  padding:8px 10px;
  background:#fff; color:#222;
  border:none; border-bottom:1px solid #eee;
  border-radius:0;
  cursor:pointer;
}
.suggest button:hover{background:#f3f4f6}
.suggest button:last-child{border-bottom:none}

/* SMS modal tweaks */
#smsModal textarea { width: 100%; resize: vertical; }




/* === SKU global popup readability fix === */
#skuSuggestPopup {
  background: #ffffff;
  color: #111111;
}

#skuSuggestPopup button {
  color: #111111 !important;
  background: transparent;
}

#skuSuggestPopup button strong {
  color: #000000;
}

#skuSuggestPopup button:hover {
  background: #f3f4f6;
}


#newClientSchoolYear
.client-schoolyear input
.new-client-row input