* { box-sizing: border-box; }
body { margin:0; font-family: Inter, Arial, sans-serif; background:#f8fafc; color:#111827; }
.app-shell { margin-left:260px; transition:margin-left .25s ease; }
.app-shell.collapsed { margin-left:82px; }
.container { max-width:1180px; margin:0 auto; padding:28px; }
.sidebar { position:fixed; inset:0 auto 0 0; width:260px; background:#0f172a; color:white; padding:18px; z-index:999; transition:width .25s ease; overflow:hidden; }
.sidebar.collapsed { width:82px; }
.sidebar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.sidebar-header button { background:rgba(255,255,255,.12); border:none; color:white; border-radius:10px; padding:8px 10px; cursor:pointer; }
.sidebar a { display:flex; align-items:center; gap:12px; color:#e5e7eb; text-decoration:none; padding:12px; border-radius:12px; margin-bottom:8px; font-weight:700; }
.sidebar a:hover { background:rgba(255,255,255,.1); transform: translateX(2px); }
.sidebar i { width:22px; text-align:center; }
.sidebar.collapsed a span, .sidebar.collapsed .sidebar-header strong, .sidebar.collapsed .sidebar-logout { display:none; }
.sidebar-logout { width:100%; margin-top:20px; background:#dc2626; }
.topbar { background:white; border-radius:18px; padding:16px 20px; margin-bottom:24px; box-shadow:0 10px 30px rgba(15,23,42,.06); display:flex; justify-content:space-between; align-items:center; }
.card { background:white; border-radius:18px; padding:24px; margin-bottom:22px; box-shadow:0 12px 35px rgba(15,23,42,.07); animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.metric { background:#eef2ff; border-radius:16px; padding:20px; }
.metric i { font-size:24px; color:#4f46e5; margin-bottom:10px; }
.metric span { color:#475569; font-weight:700; display:block; }
.metric strong { font-size:34px; display:block; margin-top:6px; }
input, select, textarea { width:100%; padding:12px; margin:8px 0; border:1px solid #e5e7eb; border-radius:12px; font-size:15px; }
select[multiple] { min-height:160px; }
textarea { min-height:90px; resize:vertical; }
button, .button { display:inline-block; border:0; background:#4f46e5; color:white; padding:11px 16px; border-radius:12px; font-weight:800; cursor:pointer; text-decoration:none; margin:4px 4px 4px 0; transition:.18s ease; }
button:hover, .button:hover { transform: translateY(-1px); box-shadow:0 10px 20px rgba(79,70,229,.18); }
button.secondary, .button.secondary { background:#e5e7eb; color:#111827; }
button.danger { background:#dc2626; }
.mini-card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px; margin-top:14px; }
.row-between { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.badge { display:inline-block; background:#dcfce7; color:#166534; padding:6px 10px; border-radius:999px; font-size:13px; font-weight:800; }
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f172a,#312e81); }
.login-card { width:420px; background:white; padding:30px; border-radius:24px; box-shadow:0 30px 90px rgba(0,0,0,.28); }
.loading-overlay { position:fixed; inset:0; background:rgba(15,23,42,.35); display:none; align-items:center; justify-content:center; z-index:9999; }
.loading-box { background:white; padding:22px 28px; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.25); font-weight:800; }
.spinner { width:34px; height:34px; border:4px solid #e5e7eb; border-top:4px solid #4f46e5; border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 12px; }
@keyframes spin { to { transform:rotate(360deg); } }
.success-toast { position:fixed; right:24px; bottom:24px; background:#16a34a; color:white; padding:14px 18px; border-radius:14px; font-weight:800; display:none; z-index:10000; }
.import-preview-table { width:100%; border-collapse:collapse; margin-top:16px; }
.import-preview-table th, .import-preview-table td { border:1px solid #e5e7eb; padding:10px; text-align:left; }
.import-error { background:#fee2e2; color:#991b1b; padding:10px; border-radius:12px; margin-top:10px; }
@media(max-width:900px){ .grid{grid-template-columns:1fr;} .app-shell{margin-left:82px;} }


.demo-banner {
  position: sticky;
  top: 0;
  z-index: 10001;
  background: #fef3c7;
  color: #92400e;
  padding: 10px 18px;
  font-weight: 800;
  border-bottom: 1px solid #fde68a;
  text-align: center;
}

.demo-banner i {
  margin-right: 8px;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 12000;
}

.modal-content {
  background: white;
  width: min(680px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
  animation: modalPop .18s ease;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
  float: right;
  background: #e5e7eb;
  color: #111827;
}

.action-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.action-card i {
  font-size: 34px;
  color: #4f46e5;
  margin-bottom: 12px;
}


.student-life-hero {
  background: linear-gradient(135deg, #312e81, #4f46e5);
  color: white;
  border-radius: 24px;
  padding: 34px;
  margin-bottom: 24px;
  box-shadow: 0 24px 60px rgba(49, 46, 129, 0.25);
}

.student-life-hero h1 {
  font-size: 36px;
  margin: 0 0 10px;
}

.student-life-hero p {
  color: #e0e7ff;
  max-width: 760px;
}

.life-action-card {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  border: 1px solid #eef2ff;
  transition: transform .18s ease, box-shadow .18s ease;
}

.life-action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.life-action-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #eef2ff;
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}

.life-action-card.danger-card .life-action-icon {
  background: #fee2e2;
  color: #dc2626;
}

.life-action-card.success-card .life-action-icon {
  background: #dcfce7;
  color: #16a34a;
}

.quick-reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 14px 0 20px;
}

.quick-reward-btn {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  min-height: 74px;
  text-align: left;
}

.quick-reward-btn strong {
  display: block;
  font-size: 18px;
}

.quick-reward-btn span {
  font-size: 13px;
  color: #4338ca;
}

.life-timeline {
  position: relative;
}

.life-timeline-item {
  border-left: 4px solid #4f46e5;
  padding: 14px 16px;
  margin: 12px 0;
  background: #f8fafc;
  border-radius: 14px;
}

.life-timeline-item small {
  color: #64748b;
}

.modal-content h2 {
  margin-top: 0;
}

.modal-section-label {
  font-weight: 800;
  color: #475569;
  margin-top: 16px;
}

button {
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

button:active {
  transform: scale(0.96);
}


.calendar-hero { background: linear-gradient(135deg, #0f766e, #4f46e5); }
.calendar-filter-row { display:flex; justify-content:flex-end; margin-bottom:14px; }
.calendar-filter-row select { max-width:300px; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.calendar-weekdays { margin-bottom:10px; font-weight:900; color:#475569; text-align:center; }
.calendar-day { min-height:138px; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:10px; overflow:hidden; }
.calendar-day.empty { background:#f8fafc; border-style:dashed; }
.calendar-day-number { font-weight:900; color:#0f172a; margin-bottom:8px; }
.calendar-event { font-size:12px; font-weight:800; padding:7px 8px; border-radius:10px; margin-bottom:6px; cursor:pointer; background:#eef2ff; color:#3730a3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calendar-event:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,23,42,.1); }
.type-no_school, .type-holiday { background:#fee2e2; color:#991b1b; }
.type-half_day, .type-parent_conference { background:#fef3c7; color:#92400e; }
.type-professional_development { background:#dbeafe; color:#1d4ed8; }
.type-testing { background:#ede9fe; color:#6d28d9; }
.type-report_cards { background:#dcfce7; color:#166534; }
.type-school_event { background:#e0f2fe; color:#0369a1; }
.event-dot { width:12px; height:12px; border-radius:999px; display:inline-block; margin-right:8px; }
.legend-item { margin:10px 0; font-weight:800; }
.event-dot.type-no_school { background:#ef4444; }
.event-dot.type-half_day { background:#f59e0b; }
.event-dot.type-professional_development { background:#3b82f6; }
.event-dot.type-testing { background:#8b5cf6; }
.event-dot.type-school_event { background:#0ea5e9; }
@media(max-width:900px){ .calendar-grid{grid-template-columns:1fr;} .calendar-weekdays{display:none;} }

.tracker-hero{background:linear-gradient(135deg,#1e3a8a,#4f46e5)}.tracker-table-scroll{width:100%;overflow-x:auto}.tracker-table{width:100%;border-collapse:collapse;min-width:900px}.tracker-table th,.tracker-table td{border:1px solid #e5e7eb;padding:10px;text-align:left;vertical-align:top}.tracker-table th{background:#f8fafc;font-weight:900}.tracker-table input,.tracker-table select{min-width:130px;margin:0}

.tracker-controls {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.archived-row {
  opacity: .55;
  background: #f1f5f9;
}
@media(max-width:900px) {
  .tracker-controls { grid-template-columns: 1fr; }
}


/* V4.7 Premium UI refresh */
.student-hero {
  background: linear-gradient(135deg, #0f172a, #2563eb);
}
.pbis-hero {
  background: linear-gradient(135deg, #166534, #16a34a);
}
.incident-hero {
  background: linear-gradient(135deg, #7f1d1d, #dc2626);
}
.dashboard-grid-2 {
  grid-template-columns: 2fr 1fr;
}
.badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-weight: 800;
  font-size: 12px;
}
@media(max-width: 1000px) {
  .dashboard-grid-2 {
    grid-template-columns: 1fr;
  }
}

.pagination-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-weight: 800;
}

.pagination-controls button:disabled {
  opacity: .45;
  cursor: not-allowed;
}


/* V4.8 Student Overview / Groups / Row Actions */
.row-actions { display:flex; gap:8px; flex-wrap:wrap; }
.row-actions button { padding:8px 10px; font-size:13px; }
.student-overview-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.student-overview-header h2 { margin:0; }
.overview-stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; margin-bottom:18px; }
.quick-action-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.student-overview-modal { width:min(900px, 94vw); }
.group-card { cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.group-card:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(15, 23, 42, .1); }
.active-group { border:2px solid #4f46e5; background:#eef2ff; }


/* V4.8 Student Module Fixed */
.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.row-actions button {
  padding: 8px 10px;
  font-size: 13px;
}

.student-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.student-overview-header h2 {
  margin: 0;
}

.overview-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.quick-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.student-overview-modal {
  width: min(900px, 94vw);
}

.group-card {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.group-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .1);
}

.active-group {
  border: 2px solid #4f46e5;
  background: #eef2ff;
}

/* V4.8 IT Help Desk V2 */
.helpdesk-hero {
  background: linear-gradient(135deg, #1e3a8a, #0f766e);
}

/* V4.8 IT Help Desk V2.1 */
.tab-row {
  display: flex;
  gap: 10px;
  margin: 14px 0 16px;
  flex-wrap: wrap;
}

.tab-button {
  background: #e5e7eb;
  color: #111827;
}

.tab-button.active {
  background: #1e3a8a;
  color: #fff;
}



/* V4.8 Consolidated PBIS / Student Life */
.pbis-hero {
  background: linear-gradient(135deg, #166534, #16a34a);
}

#my-awards-list .mini-card,
#visible-stores-list .mini-card,
#my-store-panel .mini-card,
#store-items-list .mini-card,
#store-shares-list .mini-card {
  border-left: 5px solid #16a34a;
}

#store-manage-modal .modal-content {
  width: min(860px, 94vw);
}

.student-search-picker {
  margin: 12px 0;
}

.student-picker-results {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.student-result-pill {
  width: 100%;
  text-align: left;
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px 12px;
}

.student-result-pill small {
  display: block;
  margin-top: 3px;
  color: #64748b;
}

.selected-students {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.selected-student-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 800;
}

.selected-student-pill small {
  color: #4f46e5;
}

.selected-student-pill button {
  padding: 0 7px;
  border-radius: 999px;
  background: #c7d2fe;
  color: #312e81;
}

.pbis-group-picker {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 16px;
}

.pbis-group-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.pbis-submit-button {
  width: 100%;
  margin-top: 16px;
}

.quick-reward-btn.selected-reward {
  background: #dcfce7 !important;
  border: 2px solid #16a34a !important;
  color: #14532d !important;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, .14), 0 14px 30px rgba(22, 163, 74, .18);
  transform: translateY(-2px);
}

.pbis-selected-quick-reward-preview {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  font-weight: 800;
  border: 1px solid #e5e7eb;
}

.pbis-selected-quick-reward-preview.active {
  background: #ecfdf5;
  color: #166534;
  border-color: #bbf7d0;
}

.muted {
  color: #64748b;
}



/* PBIS scoreboard pagination */
.pagination-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.pagination-summary {
  color: #64748b;
  font-weight: 700;
}

.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-buttons button:disabled {
  opacity: .45;
  cursor: not-allowed;
}



/* V4.8 demo role switcher restore */
.demo-role-bar-v48 {
  position: sticky;
  top: 0;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}

.demo-role-message-v48 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.demo-role-controls-v48 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.demo-role-controls-v48 label {
  font-size: 13px;
  font-weight: 800;
  color: #dbeafe;
}

.demo-role-controls-v48 select {
  min-width: 190px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  padding: 7px 12px;
  background: #ffffff;
  color: #1e3a8a;
  font-weight: 800;
}

@media(max-width: 760px) {
  .demo-role-bar-v48 {
    align-items: stretch;
    flex-direction: column;
  }

  .demo-role-controls-v48 {
    justify-content: space-between;
  }

  .demo-role-controls-v48 select {
    width: 100%;
  }
}



/* PBIS Scoreboard compact rows */
#leaderboard-list .mini-card {
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 14px;
}

#leaderboard-list .mini-card strong {
  font-size: 14px;
  line-height: 1.15;
}

#leaderboard-list .mini-card p {
  font-size: 12px;
  line-height: 1.2;
  margin: 2px 0 0;
  color: #64748b;
}

#leaderboard-list .mini-card h2 {
  font-size: 18px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

#leaderboard-list .row-between {
  gap: 10px;
  align-items: center;
}

#leaderboard-list .mini-card div:first-child {
  min-width: 0;
}

#leaderboard-list .mini-card div:first-child strong,
#leaderboard-list .mini-card div:first-child p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leaderboard-list.compact-scoreboard {
  display: grid;
  gap: 6px;
}



/* PBIS Scoreboard tighter compact rows v2 */
#leaderboard-list.compact-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0 0;
  padding: 0;
}

#leaderboard-list .scoreboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  margin: 0 !important;
  min-height: 34px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #16a34a;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
}

#leaderboard-list .scoreboard-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#leaderboard-list .scoreboard-main strong {
  font-size: 12.5px;
  line-height: 1.1;
  margin: 0;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leaderboard-list .scoreboard-main span {
  font-size: 10.5px;
  line-height: 1.1;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leaderboard-list .scoreboard-points {
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  color: #166534;
  white-space: nowrap;
}

#leaderboard-list .mini-card {
  padding: 5px 8px !important;
  margin: 0 !important;
  min-height: 34px;
  box-shadow: none !important;
}

#leaderboard-list .mini-card strong {
  font-size: 12.5px !important;
  line-height: 1.1 !important;
}

#leaderboard-list .mini-card p {
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

#leaderboard-list .mini-card h2 {
  font-size: 13px !important;
  margin: 0 !important;
}

.pbis-scoreboard-controls {
  gap: 8px;
  margin-bottom: 6px;
}

.pagination-controls {
  margin-top: 8px;
  padding-top: 8px;
}



/* School Setup closed days */
.school-closed-days-card {
  border-left: 5px solid #dc2626;
}

.setup-form-grid {
  display: grid;
  grid-template-columns: 1.2fr .7fr 1.2fr auto;
  gap: 10px;
  align-items: center;
}

.closed-days-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.closed-day-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-left: 5px solid #dc2626;
  background: #fff7ed;
  border-radius: 14px;
}

.closed-day-row strong {
  display: block;
  color: #991b1b;
}

.closed-day-row span {
  display: block;
  font-size: 13px;
  color: #7f1d1d;
  font-weight: 800;
}

.closed-day-row small {
  display: block;
  color: #64748b;
}

.school-closed-calendar-event {
  border-left: 5px solid #dc2626 !important;
  background: #fef2f2 !important;
}

@media(max-width: 900px) {
  .setup-form-grid {
    grid-template-columns: 1fr;
  }

  .closed-day-row {
    grid-template-columns: 1fr;
  }
}



/* School Days + Closed Days side-by-side layout */
.school-days-closed-days-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 18px;
  align-items: start;
  margin: 18px 0;
}

.school-days-side-card,
.school-closed-days-card.school-days-side-card {
  height: 100%;
}

.school-closed-days-card.school-days-side-card {
  border-left: 5px solid #dc2626;
}

.closed-days-inline-form {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.closed-days-inline-form input[id="closed_day_reason"] {
  grid-column: 1 / 2;
}

.closed-days-inline-form button {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.compact-closed-days-list {
  max-height: 330px;
  overflow-y: auto;
  padding-right: 4px;
}

.compact-closed-day-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 10px;
  border-radius: 12px;
}

.compact-closed-day-row strong {
  font-size: 13px;
  line-height: 1.15;
}

.compact-closed-day-row span {
  font-size: 12px;
}

.compact-closed-day-row small {
  font-size: 11px;
  line-height: 1.15;
}

.compact-row-actions {
  gap: 6px;
}

.compact-action-btn {
  padding: 6px 8px;
  font-size: 12px;
}

@media(max-width: 980px) {
  .school-days-closed-days-grid {
    grid-template-columns: 1fr;
  }

  .closed-days-inline-form {
    grid-template-columns: 1fr;
  }

  .closed-days-inline-form input[id="closed_day_reason"],
  .closed-days-inline-form button {
    grid-column: auto;
    grid-row: auto;
  }
}



/* School Days + Closed Days integrated layout */
.school-days-integrated-section {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr);
  gap: 14px;
  align-items: stretch;
  margin: 14px 0;
}

.school-days-integrated-section > .card {
  margin: 0;
}

.school-closed-days-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  box-shadow: none;
  align-self: stretch;
}

.school-closed-days-panel h3 {
  font-size: 16px;
  margin: 0 0 4px 0;
  color: #0f172a;
}

.school-closed-days-panel p {
  font-size: 12.5px;
  line-height: 1.35;
  margin: 0 0 10px 0;
  color: #64748b;
}

.school-closed-days-panel .row-between {
  align-items: flex-start;
}

.school-closed-days-panel .closed-days-inline-form {
  display: grid;
  grid-template-columns: 1fr 135px;
  gap: 8px;
  margin-top: 10px;
}

.school-closed-days-panel .closed-days-inline-form input {
  min-height: 36px;
  font-size: 13px;
}

.school-closed-days-panel .closed-days-inline-form #closed_day_reason {
  grid-column: 1 / -1;
}

.school-closed-days-panel .closed-days-inline-form button {
  grid-column: 1 / -1;
  min-height: 36px;
  margin-top: 0;
}

.school-closed-days-panel .closed-days-list {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

.integrated-closed-day-row,
.school-closed-days-panel .closed-day-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #dc2626;
  background: #ffffff;
  border-radius: 10px;
}

.integrated-closed-day-row strong,
.school-closed-days-panel .closed-day-row strong {
  font-size: 12.5px;
  line-height: 1.15;
  color: #0f172a;
  margin: 0;
}

.integrated-closed-day-row span,
.school-closed-days-panel .closed-day-row span {
  font-size: 11.5px;
  line-height: 1.15;
  color: #991b1b;
  font-weight: 800;
}

.integrated-closed-day-row small,
.school-closed-days-panel .closed-day-row small {
  font-size: 11px;
  line-height: 1.15;
  color: #64748b;
}

.school-closed-days-panel .row-actions {
  gap: 4px;
}

.school-closed-days-panel .compact-action-btn,
.school-closed-days-panel .row-actions button {
  padding: 4px 7px;
  font-size: 11.5px;
  border-radius: 8px;
}

/* Neutralize previous side-card styling */
.school-days-side-card,
.school-closed-days-card.school-days-side-card {
  height: auto;
}

.school-closed-days-card.school-days-side-card {
  border-left: none;
}

@media(max-width: 980px) {
  .school-days-integrated-section {
    grid-template-columns: 1fr;
  }

  .school-closed-days-panel .closed-days-inline-form {
    grid-template-columns: 1fr;
  }

  .school-closed-days-panel .closed-days-inline-form #closed_day_reason,
  .school-closed-days-panel .closed-days-inline-form button {
    grid-column: auto;
  }
}



/* School Closed Days repositioned above School Year Terms */
.school-days-integrated-section {
  display: block;
  margin: 0;
}

.school-closed-days-before-terms {
  margin: 16px 0;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-left: 5px solid #dc2626;
  border-radius: 16px;
  padding: 14px;
  box-shadow: none;
}

.school-closed-days-before-terms .closed-days-inline-form {
  display: grid;
  grid-template-columns: 1.1fr 180px 1.2fr auto;
  gap: 8px;
  align-items: center;
}

.school-closed-days-before-terms .closed-days-inline-form button {
  min-height: 36px;
}

.school-closed-days-before-terms .closed-days-list {
  max-height: 240px;
  overflow-y: auto;
}

@media(max-width: 980px) {
  .school-closed-days-before-terms .closed-days-inline-form {
    grid-template-columns: 1fr;
  }
}



/* School Closed Days precise placement before terms */
.school-closed-days-before-terms {
  margin: 16px 0 18px;
  width: 100%;
}

.school-closed-days-before-terms h3 {
  margin-top: 0;
}

.school-closed-days-before-terms .closed-days-inline-form {
  display: grid;
  grid-template-columns: 1.2fr 180px 1.2fr auto;
  gap: 8px;
  align-items: center;
}

@media(max-width: 980px) {
  .school-closed-days-before-terms .closed-days-inline-form {
    grid-template-columns: 1fr;
  }
}



/* No school calendar sync */
.sync-no-school-days-btn {
  margin-left: 8px;
}

.no-school-sync-note {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 5px solid #dc2626;
  background: #fef2f2;
  color: #7f1d1d;
  border-radius: 12px;
  font-size: 13px;
}



/* Academic Calendar no-school sync note layout fix */
.calendar-full-width-note {
  width: 100%;
  max-width: none;
  display: block;
  clear: both;
  grid-column: 1 / -1;
  margin: 12px 0 16px;
  position: relative;
  z-index: 1;
}

.calendar-full-width-note .no-school-sync-note,
.no-school-sync-note {
  box-sizing: border-box;
}

.calendar-layout .calendar-full-width-note,
.academic-calendar-layout .calendar-full-width-note,
.calendar-grid .calendar-full-width-note {
  grid-column: 1 / -1;
}

.calendar-full-width-note + .calendar-layout,
.calendar-full-width-note + .academic-calendar-layout,
.calendar-full-width-note + .calendar-grid {
  margin-top: 8px;
}

@media (min-width: 900px) {
  .calendar-full-width-note {
    padding-right: 0;
  }
}



/* Academic Calendar no-school sync note bottom placement */
.calendar-bottom-note {
  width: 100%;
  clear: both;
  grid-column: 1 / -1;
  margin: 18px 0 0;
  position: relative;
  z-index: 1;
}

.calendar-bottom-note .no-school-sync-note {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Prevent old full-width note styles from pushing the note into the hero */
.student-life-hero .calendar-full-width-note,
.calendar-hero .calendar-full-width-note,
.student-life-hero .no-school-sync-note,
.calendar-hero .no-school-sync-note {
  display: none;
}



/* Academic Calendar no-school sync note main-column placement */
.calendar-main-column-note {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 12px 0 16px;
  clear: both;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

/* Keep note inside the left/main calendar column, away from right side panels */
.calendar-main-column-note .no-school-sync-note {
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/* If the page uses a fixed/sticky right panel, reserve space on wide screens */
@media (min-width: 1100px) {
  body:has(.side-panel) .calendar-main-column-note,
  body:has(.calendar-side-panel) .calendar-main-column-note,
  body:has(.calendar-sidebar) .calendar-main-column-note,
  body:has(.side-drawer) .calendar-main-column-note {
    max-width: calc(100% - 340px);
  }
}

/* For known calendar layouts, force the note into the main column */
.calendar-main .calendar-main-column-note,
.calendar-content .calendar-main-column-note,
.calendar-left .calendar-main-column-note,
.main-calendar .calendar-main-column-note,
.calendar-board .calendar-main-column-note {
  max-width: 100%;
}

/* Hide any old copies that are still inside the hero or floating bottom area */
.student-life-hero .no-school-sync-note,
.calendar-hero .no-school-sync-note,
.student-life-hero .calendar-main-column-note,
.calendar-hero .calendar-main-column-note,
.calendar-full-width-note,
.calendar-bottom-note {
  display: none !important;
}


/* V4.8.5 unified school closed sync */
.school-closed-calendar-event {
  border-left: 5px solid #dc2626 !important;
  background: #fef2f2 !important;
}


/* V4.8.6 no school same source */
.school-closed-calendar-event {
  border-left: 5px solid #dc2626 !important;
  background: #fef2f2 !important;
}


/* V4.9 production demo polish */
.demo-role-bar-v48,.demo-role-message-v48,.demo-role-controls-v48,#demo-role-bar-v48{display:none!important}
body{background:#f4f7fb}
.portal-entry-links{display:flex;justify-content:center;gap:10px;margin-top:16px}
.portal-entry-links a{text-decoration:none;font-weight:800;color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;padding:9px 12px;border-radius:999px}
.portal-login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,rgba(37,99,235,.18),transparent 32%),linear-gradient(135deg,#0f172a,#1e3a8a)}
.portal-login-shell{width:min(980px,94vw);display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:center}
.portal-login-brand{color:#fff}.brand-mark{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#fff;color:#1d4ed8;font-size:30px;font-weight:900;margin-bottom:18px}
.portal-login-brand h1{font-size:clamp(34px,5vw,56px);margin:0 0 10px}.portal-login-brand p{font-size:18px;color:#dbeafe;max-width:560px}
.portal-login-card{background:#fff;padding:28px;border-radius:24px;box-shadow:0 30px 90px rgba(15,23,42,.35)}
.portal-login-card h2{margin-top:0}.portal-login-card input{width:100%;margin-bottom:12px}.portal-login-card button{width:100%;margin-top:6px}.portal-login-card a{display:block;text-align:center;margin-top:14px;color:#2563eb;font-weight:800;text-decoration:none}
.portal-error{display:none;background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:12px;padding:9px 10px;margin-bottom:10px;font-weight:700}
.portal-body{min-height:100vh;background:#f4f7fb}.portal-nav{height:64px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.portal-dashboard{width:min(1180px,94vw);margin:26px auto}.portal-hero-card{display:grid;grid-template-columns:1fr auto auto;gap:22px;align-items:center;padding:24px;border-radius:24px;background:linear-gradient(135deg,#1d4ed8,#0f172a);color:#fff;box-shadow:0 20px 60px rgba(37,99,235,.22)}
.portal-hero-card h1{margin:0}.portal-hero-card p{margin:4px 0 0;color:#dbeafe}.portal-metric{min-width:140px;text-align:center;padding:16px;border-radius:20px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.portal-metric span{display:block;font-size:38px;font-weight:900;line-height:1}.portal-card-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:18px;margin-top:20px}
.portal-card{background:#fff;border-radius:22px;padding:22px;box-shadow:0 14px 40px rgba(15,23,42,.08);border:1px solid #e5e7eb}
.portal-activity-row{display:grid;grid-template-columns:86px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #e5e7eb}.portal-activity-row:last-child{border-bottom:0}
.portal-activity-type{height:fit-content;text-align:center;font-size:12px;font-weight:900;color:#1d4ed8;background:#eff6ff;border-radius:999px;padding:5px 8px}
.portal-activity-row p{margin:2px 0;color:#475569}.portal-activity-row small{color:#94a3b8}
@media(max-width:850px){.portal-login-shell,.portal-card-grid,.portal-hero-card{grid-template-columns:1fr}}



/* V4.9 Student Directory pagination */
.student-directory-pagination-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}

.student-directory-page-size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-directory-page-size label {
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.student-directory-page-size select {
  min-width: 90px;
  border-radius: 999px;
  padding: 7px 10px;
}

.student-directory-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  margin-bottom: 8px;
}

.student-directory-card p {
  margin: 2px 0;
  color: #64748b;
}

.student-directory-card small {
  color: #94a3b8;
}

#student-directory-pagination-controls {
  justify-content: flex-end;
}

#student-directory-pagination-controls button:disabled {
  opacity: .45;
  cursor: not-allowed;
}



/* V4.9 Student Directory visible pagination controls */
.student-directory-pagination-controls-visible {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 10px 0;
}

.student-directory-pagination-controls-visible .badge {
  white-space: nowrap;
}

.student-directory-pagination-controls-visible button:disabled {
  opacity: .45;
  cursor: not-allowed;
}



/* V4.9 Student Directory Actions column */
.student-actions-cell {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
}

td.student-actions-cell {
  min-width: 170px;
}

.student-actions-cell button {
  padding: 6px 10px;
  font-size: 12px;
}



/* V4.9 force Student Directory Actions alignment */
#students-table th:nth-child(7),
.students-table th:nth-child(7),
table th:nth-child(7) {
  text-align: right;
}

#students-table td:nth-child(7),
.students-table td:nth-child(7),
table td.student-actions-cell {
  text-align: right;
}

.student-actions-cell {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
}

td.student-actions-cell {
  min-width: 170px;
}

.student-actions-cell button {
  padding: 6px 10px;
  font-size: 12px;
}



/* V4.9 checkbox alignment polish */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  vertical-align: middle;
  accent-color: #2563eb;
}

label:has(input[type="checkbox"]),
label:has(input[type="radio"]),
.checkbox-row,
.check-row,
.permission-row,
.permission-item,
.permission-option,
.module-permission-row,
.form-check,
.form-checkbox,
.toggle-row,
.setting-row.checkbox,
.filter-checkbox,
.store-share-row,
.group-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.25;
}

label:has(input[type="checkbox"]) input[type="checkbox"],
label:has(input[type="radio"]) input[type="radio"],
.checkbox-row input[type="checkbox"],
.check-row input[type="checkbox"],
.permission-row input[type="checkbox"],
.permission-item input[type="checkbox"],
.permission-option input[type="checkbox"],
.module-permission-row input[type="checkbox"],
.form-check input[type="checkbox"],
.form-checkbox input[type="checkbox"],
.toggle-row input[type="checkbox"],
.setting-row.checkbox input[type="checkbox"],
.filter-checkbox input[type="checkbox"],
.store-share-row input[type="checkbox"],
.group-checkbox-row input[type="checkbox"] {
  flex: 0 0 16px;
  align-self: center;
}

label:has(input[type="checkbox"]) span,
label:has(input[type="radio"]) span,
.checkbox-row span,
.check-row span,
.permission-row span,
.permission-item span,
.permission-option span,
.module-permission-row span,
.form-check span,
.form-checkbox span,
.toggle-row span,
.setting-row.checkbox span,
.filter-checkbox span,
.store-share-row span,
.group-checkbox-row span {
  display: inline-block;
  line-height: 1.25;
}

.permissions-grid,
.permission-grid,
.checkbox-grid,
.checklist-grid {
  display: grid;
  gap: 8px;
}

.permissions-grid label,
.permission-grid label,
.checkbox-grid label,
.checklist-grid label {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 10px;
}

.permissions-grid label:hover,
.permission-grid label:hover,
.checkbox-grid label:hover,
.checklist-grid label:hover {
  background: #f8fafc;
}

td input[type="checkbox"],
th input[type="checkbox"] {
  display: block;
  margin: 0 auto;
}

td label:has(input[type="checkbox"]),
th label:has(input[type="checkbox"]) {
  justify-content: center;
}

/* Keep checkbox text from wrapping under the box */
.checkbox-row,
.check-row,
.permission-row,
.permission-item,
.permission-option,
.module-permission-row,
.form-check,
.form-checkbox,
.toggle-row,
.filter-checkbox,
.store-share-row,
.group-checkbox-row {
  flex-wrap: nowrap;
}

.checkbox-row .helper-text,
.check-row .helper-text,
.permission-row .helper-text,
.permission-item .helper-text,
.permission-option .helper-text,
.form-check .helper-text,
.form-checkbox .helper-text {
  margin-left: 26px;
}



/* =========================================================
   GoPBIS V4.9 Premium Purple Dashboard Theme
   Inspired by rounded SaaS dashboard reference
   ========================================================= */
:root {
  --schoolops-purple: #6d4aff;
  --schoolops-purple-dark: #4f28e8;
  --schoolops-purple-soft: #f1edff;
  --schoolops-blue: #2563eb;
  --schoolops-yellow: #ffd987;
  --schoolops-bg: #eef2f8;
  --schoolops-card: #ffffff;
  --schoolops-text: #11142d;
  --schoolops-muted: #7b8194;
  --schoolops-border: #e6eaf2;
  --schoolops-shadow: 0 18px 55px rgba(20, 23, 60, 0.10);
  --schoolops-shadow-soft: 0 10px 30px rgba(20, 23, 60, 0.08);
  --schoolops-radius-xl: 28px;
  --schoolops-radius-lg: 20px;
  --schoolops-radius-md: 14px;
}

html {
  background: linear-gradient(135deg, #6d4aff 0%, #4f28e8 48%, #1d4ed8 100%);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(135deg, #6d4aff 0%, #4f28e8 48%, #1d4ed8 100%) !important;
  color: var(--schoolops-text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Main app shell */
.app-shell,
.layout,
.main-layout,
.dashboard-layout,
.page-shell {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 34px;
  margin: 22px;
  min-height: calc(100vh - 44px);
  box-shadow: 0 28px 90px rgba(10, 12, 35, 0.22);
  overflow: hidden;
}

.main-content,
.content,
.page-content,
.dashboard-content,
main {
  background: var(--schoolops-bg);
}

/* Sidebar */
.sidebar,
.side-nav,
.app-sidebar,
nav.sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(230, 234, 242, 0.9);
  box-shadow: none;
}

.sidebar .logo,
.sidebar-brand,
.brand,
.app-brand {
  color: var(--schoolops-text);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.sidebar a,
.side-nav a,
.app-sidebar a,
.sidebar button,
.nav-item,
.sidebar-item {
  border-radius: 999px !important;
  min-height: 42px;
  color: #2a2d44 !important;
  font-weight: 800;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.sidebar a:hover,
.side-nav a:hover,
.app-sidebar a:hover,
.nav-item:hover,
.sidebar-item:hover {
  background: var(--schoolops-purple-soft) !important;
  color: var(--schoolops-purple-dark) !important;
  transform: translateX(2px);
}

.sidebar a.active,
.side-nav a.active,
.app-sidebar a.active,
.nav-item.active,
.sidebar-item.active,
.sidebar .active {
  background: var(--schoolops-yellow) !important;
  color: #14172f !important;
  box-shadow: 0 12px 24px rgba(255, 196, 87, 0.24);
}

/* Topbar / search */
.topbar,
.header,
.page-header,
.app-header,
.dashboard-header {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.search-bar,
.search-input,
input[type="search"],
.topbar input,
.header input {
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid var(--schoolops-border) !important;
  min-height: 42px;
  box-shadow: 0 8px 28px rgba(20, 23, 60, 0.05);
}

/* Cards */
.card,
.stat-card,
.metric-card,
.dashboard-card,
.module-card,
.quick-card,
.panel,
.form-card,
.table-card,
.school-card,
.portal-card {
  background: var(--schoolops-card) !important;
  border: 1px solid rgba(230, 234, 242, 0.95) !important;
  border-radius: var(--schoolops-radius-lg) !important;
  box-shadow: var(--schoolops-shadow-soft) !important;
}

.card:hover,
.dashboard-card:hover,
.stat-card:hover,
.metric-card:hover,
.module-card:hover {
  box-shadow: var(--schoolops-shadow) !important;
}

/* Dashboard grids */
.dashboard-grid,
.stats-grid,
.module-grid,
.quick-actions,
.kpi-grid,
.overview-grid,
.portal-card-grid {
  gap: 18px !important;
}

.stat-card,
.metric-card,
.dashboard-card {
  padding: 20px !important;
}

.stat-card h3,
.metric-card h3,
.dashboard-card h3,
.card h3 {
  color: var(--schoolops-text);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.stat-card p,
.metric-card p,
.dashboard-card p,
.card p,
.muted,
.helper-text {
  color: var(--schoolops-muted);
}

/* Buttons */
button,
.btn,
.primary,
button.primary,
.btn-primary {
  border-radius: 999px !important;
  font-weight: 900 !important;
  border: 0;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

button:not(.secondary):not(.danger):not(.success),
.btn-primary,
.primary,
button.primary {
  background: linear-gradient(135deg, var(--schoolops-purple), var(--schoolops-purple-dark)) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(109, 74, 255, .26);
}

button:not(.secondary):not(.danger):not(.success):hover,
.btn-primary:hover,
.primary:hover,
button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(109, 74, 255, .32);
}

button.secondary,
.btn-secondary,
.secondary {
  background: #ffffff !important;
  color: var(--schoolops-text) !important;
  border: 1px solid var(--schoolops-border) !important;
  box-shadow: 0 8px 20px rgba(20, 23, 60, 0.05);
}

button.danger,
.danger {
  background: #fff1f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecdd3 !important;
}

button.success,
.success {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #bbf7d0 !important;
}

/* Tables */
table {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}

thead th {
  color: #6b7280;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 0 !important;
}

tbody tr {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(20, 23, 60, 0.04);
}

tbody td {
  border-top: 1px solid #eef2f7;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}

tbody td:first-child {
  border-left: 1px solid #eef2f7;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

tbody td:last-child {
  border-right: 1px solid #eef2f7;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Forms */
input,
select,
textarea {
  border-radius: 14px !important;
  border: 1px solid var(--schoolops-border) !important;
  background: #ffffff !important;
  color: var(--schoolops-text);
  transition: border-color .16s ease, box-shadow .16s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--schoolops-purple) !important;
  box-shadow: 0 0 0 4px rgba(109, 74, 255, 0.12) !important;
}

label {
  font-weight: 800;
  color: #2a2d44;
}

/* Badges / pills */
.badge,
.pill,
.status,
.tag {
  border-radius: 999px !important;
  font-weight: 900;
  padding: 5px 10px;
}

.badge,
.pill {
  background: var(--schoolops-purple-soft);
  color: var(--schoolops-purple-dark);
}

/* Modals */
.modal-content,
.modal-card,
.dialog,
dialog {
  border-radius: 28px !important;
  box-shadow: 0 30px 90px rgba(10, 12, 35, 0.24) !important;
}

/* Reference-like welcome/CTA panel */
.welcome-card,
.hero-card,
.dashboard-hero,
.page-hero {
  background: linear-gradient(135deg, #ffffff, #f6f3ff) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(230, 234, 242, 0.95);
  box-shadow: var(--schoolops-shadow-soft);
}

/* Icon bubbles */
.icon-bubble,
.card-icon,
.stat-icon,
.module-icon {
  border-radius: 18px !important;
  background: var(--schoolops-purple-soft) !important;
  color: var(--schoolops-purple-dark) !important;
}

/* Portal screens keep same premium language */
.portal-login-body {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(135deg, #6d4aff, #4f28e8 52%, #1d4ed8) !important;
}

.portal-login-card,
.portal-card,
.portal-hero-card {
  border-radius: 28px !important;
}

/* Mobile shell */
@media (max-width: 900px) {
  .app-shell,
  .layout,
  .main-layout,
  .dashboard-layout,
  .page-shell {
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
  }
}



/* V4.9 Student/Parent portal credentials */
.portal-demo-credentials-note {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f1edff;
  border: 1px solid #ddd6fe;
  color: #4f28e8;
  font-weight: 800;
  font-size: 13px;
}



/* V4.9 Remove public demo wording */
.portal-demo-credentials-note {
  display: none !important;
}



/* V4.9 Checkbox alignment safe styles */
.schoolops-checkbox-align {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.schoolops-checkbox-align input[type="checkbox"],
.schoolops-checkbox-align input[type="radio"] {
  margin: 0;
}



/* V4.9 Reports Module Final Styles */
.reports-body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f4f6fb;
  color: #11142d;
}

.reports-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.reports-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #111827, #312e81);
  color: #fff;
}

.reports-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 1000;
}

.reports-brand span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #6d4aff;
}

.reports-sidebar nav {
  display: grid;
  gap: 8px;
  margin-top: 28px;
}

.reports-sidebar nav a {
  padding: 12px 14px;
  border-radius: 16px;
  color: rgba(255,255,255,.76);
  text-decoration: none;
  font-weight: 900;
}

.reports-sidebar nav a.active,
.reports-sidebar nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
}

.reports-main {
  padding: 26px;
  min-width: 0;
}

.reports-header,
.reports-filter-card,
.report-info-card,
.reports-preview-card {
  background: #fff;
  border: 1px solid #e8edf6;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
}

.reports-header {
  padding: 28px;
  border-radius: 32px;
}

.reports-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: #f1edff;
  color: #4f28e8;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.reports-header h1 {
  margin: 12px 0;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .95;
  letter-spacing: -.07em;
  font-weight: 1000;
}

.reports-header p,
.report-info-card p,
.reports-preview-heading p {
  color: #657086;
  line-height: 1.6;
  font-weight: 650;
}

.reports-filter-card {
  margin-top: 18px;
  padding: 22px;
  border-radius: 28px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.report-field {
  display: grid;
  gap: 7px;
}

.report-field label {
  color: #383b52;
  font-size: 13px;
  font-weight: 950;
}

.report-field input,
.report-field select {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #dfe5f2;
  background: #f8faff;
  color: #11142d;
  font: inherit;
  font-weight: 700;
  outline: none;
}

.reports-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.reports-actions button {
  border: 0;
  border-radius: 999px;
  min-height: 42px;
  padding: 0 16px;
  background: linear-gradient(135deg, #6d4aff, #4f28e8);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(109,74,255,.2);
}

.reports-actions button:nth-child(n+2) {
  background: #f1edff;
  color: #4f28e8;
  box-shadow: none;
}

.reports-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.report-info-card {
  padding: 20px;
  border-radius: 24px;
}

.report-info-card h2,
.reports-preview-heading h2 {
  margin: 0 0 8px;
  letter-spacing: -.04em;
}

.reports-preview-card {
  margin-top: 18px;
  padding: 22px;
  border-radius: 30px;
}

.reports-preview-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

#reportAccessBadge {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 950;
  font-size: 12px;
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.report-summary article {
  padding: 14px;
  border-radius: 18px;
  background: #f8faff;
  border: 1px solid #edf1f7;
}

.report-summary span {
  display: block;
  color: #657086;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.report-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  letter-spacing: -.04em;
}

.report-table-wrap {
  overflow-x: auto;
}

.report-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.report-table th {
  padding: 10px;
  background: #111827;
  color: #fff;
  text-align: left;
  text-transform: capitalize;
}

.report-table th:first-child {
  border-radius: 14px 0 0 14px;
}

.report-table th:last-child {
  border-radius: 0 14px 14px 0;
}

.report-table td {
  padding: 11px 10px;
  border-bottom: 1px solid #edf1f7;
  color: #383b52;
  font-weight: 700;
  vertical-align: top;
}

.report-table tr:nth-child(even) td {
  background: #f8faff;
}

@media (max-width: 1200px) {
  .reports-filter-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reports-grid,
  .report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .reports-shell {
    grid-template-columns: 1fr;
  }

  .reports-sidebar {
    position: static;
    height: auto;
  }

  .reports-filter-card,
  .reports-grid,
  .report-summary {
    grid-template-columns: 1fr;
  }
}



/* V5 Core Focus PBIS Behavior Hall Pass Styles */
.sidebar-section-label{margin:16px 14px 7px;font-size:11px;font-weight:950;text-transform:uppercase;color:rgba(255,255,255,.48);letter-spacing:.08em}.sidebar a.active{background:rgba(255,255,255,.14);color:#fff}.core-hero{padding:30px;border-radius:34px;background:radial-gradient(circle at top left,#eef2ff,#fff 42%,#f8faff);border:1px solid #e8edf6;box-shadow:0 18px 50px rgba(15,23,42,.07);margin-bottom:18px}.core-hero span,.storefront-hero span{display:inline-flex;padding:7px 11px;border-radius:999px;background:#f1edff;color:#4f28e8;font-size:12px;font-weight:950;text-transform:uppercase}.core-hero h1{margin:12px 0;font-size:clamp(36px,5vw,62px);line-height:.95;letter-spacing:-.07em}.core-hero p{max-width:850px;color:#667085;font-weight:700;line-height:1.65}.core-metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:18px 0}.core-metric-grid.small{grid-template-columns:repeat(4,minmax(0,1fr))}.core-metric-grid article{background:#fff;border:1px solid #e8edf6;border-radius:24px;padding:18px;box-shadow:0 14px 34px rgba(15,23,42,.055)}.core-metric-grid i{color:#4f28e8;font-size:22px}.core-metric-grid span{display:block;color:#667085;font-weight:850;font-size:12px;text-transform:uppercase;margin-top:10px}.core-metric-grid strong{display:block;font-size:30px;letter-spacing:-.05em;margin-top:4px}.core-flow-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:18px 0}.core-flow-grid a{display:block;text-decoration:none;color:#111827;background:#fff;border:1px solid #e8edf6;border-radius:24px;padding:18px;box-shadow:0 14px 34px rgba(15,23,42,.055)}.core-flow-grid i{color:#4f28e8;font-size:24px}.core-flow-grid strong{display:block;font-size:17px;margin:12px 0 6px}.core-flow-grid span{color:#667085;font-weight:700;line-height:1.45}.behavior-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.behavior-tabs button{border:0;border-radius:999px;padding:12px 16px;background:#eef2ff;color:#312e81;font-weight:950;cursor:pointer}.behavior-tabs button.active{background:#312e81;color:#fff}.core-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.core-form-grid textarea{grid-column:1/-1;min-height:90px}.core-form-grid input,.core-form-grid select,.core-form-grid textarea,.mini-card input,.mini-card select,.mini-card textarea{width:100%;box-sizing:border-box;padding:12px;border-radius:14px;border:1px solid #dfe5f2;background:#f8faff;font:inherit;font-weight:700;margin-bottom:8px}.core-card-list{display:grid;gap:12px}.success-panel{margin-top:12px;padding:14px;border-radius:16px;background:#dcfce7;color:#166534;font-weight:800}.danger-panel{margin-top:12px;padding:14px;border-radius:16px;background:#fee2e2;color:#991b1b;font-weight:800}.consequence-card .row-actions{flex-wrap:wrap;justify-content:flex-end}.storefront-hero{background:linear-gradient(135deg,#312e81,#6d4aff);color:#fff}.storefront-hero p,.storefront-hero small{color:rgba(255,255,255,.76)}.storefront-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.storefront-toolbar button{border:0;padding:11px 15px;border-radius:999px;background:#eef2ff;color:#312e81;font-weight:950;cursor:pointer}.storefront-toolbar button.active{background:#312e81;color:#fff}.storefront-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0}.reward-card{overflow:hidden;border-radius:28px;background:#fff;border:1px solid #e8edf6;box-shadow:0 18px 44px rgba(15,23,42,.08)}.reward-card.sold-out{opacity:.58}.reward-image{height:150px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#fef3c7,#ede9fe 50%,#dbeafe)}.reward-image i{font-size:58px;color:#4f28e8}.reward-body{padding:18px}.reward-body span{display:inline-flex;padding:6px 10px;border-radius:999px;background:#f1edff;color:#4f28e8;font-size:11px;font-weight:950;text-transform:uppercase}.reward-body h2{margin:10px 0 8px;letter-spacing:-.04em}.reward-body p{color:#667085;min-height:48px;font-weight:700}.reward-meta{display:flex;justify-content:space-between;align-items:center;margin:14px 0}.reward-meta strong{font-size:22px;color:#111827}.reward-meta small{color:#667085;font-weight:900}.reward-body button{width:100%;border:0;border-radius:999px;min-height:42px;background:#4f28e8;color:#fff;font-weight:950;cursor:pointer}.reward-body button:disabled{background:#98a2b3;cursor:not-allowed}@media(max-width:1200px){.core-metric-grid,.core-flow-grid,.storefront-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.core-metric-grid,.core-metric-grid.small,.core-flow-grid,.storefront-grid,.core-form-grid{grid-template-columns:1fr}.core-hero h1{font-size:34px}}

/* ---------- GoPBIS V5.1 UI ---------- */
:root {
  --gopbis-green: #17864b;
  --gopbis-green-dark: #116b3b;
  --gopbis-navy: #17365f;
  --gopbis-ink: #172033;
  --gopbis-muted: #667085;
  --gopbis-line: #dfe4ea;
  --gopbis-soft: #f6f8fa;
}
html { scroll-behavior: smooth; }

/* Unified login */
.gopbis-unified-login-body {
  margin:0;
  min-height:100vh;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--gopbis-ink);
  background:var(--gopbis-soft);
  display:grid;
  place-items:center;
  padding:32px;
  box-sizing:border-box;
}

.gopbis-unified-login-shell {
  width:min(1040px,100%);
  display:grid;
  grid-template-columns:1fr 460px;
  background:#fff;
  border:1px solid var(--gopbis-line);
  box-shadow:0 24px 70px rgba(23,54,95,.12);
}

.gopbis-login-brand-panel {
  padding:56px;
  background:linear-gradient(145deg,#f7fbf8,#edf4f0);
  border-right:1px solid var(--gopbis-line);
}

.gopbis-login-logo { width:210px; height:auto; display:block; margin-bottom:42px; }
.gopbis-login-logo-link { display:inline-block; }

.gopbis-login-brand-panel h1 {
  color:var(--gopbis-navy);
  font-size:52px;
  line-height:1;
  letter-spacing:-.06em;
  margin:12px 0 18px;
}

.gopbis-login-brand-panel > p {
  color:var(--gopbis-muted);
  font-size:17px;
  line-height:1.7;
}

.gopbis-login-account-status {
  margin-top:34px;
  border-top:1px solid #d8e2dc;
}

.gopbis-login-account-status > div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid #d8e2dc;
  color:var(--gopbis-navy);
}

.gopbis-login-account-status span {
  color:var(--gopbis-green);
  font-weight:850;
}

.gopbis-login-account-status .disabled span { color:#98a2b3; }

.gopbis-unified-login-card {
  padding:56px 48px;
}

.gopbis-login-heading h2 {
  margin:8px 0;
  color:var(--gopbis-navy);
  font-size:38px;
  letter-spacing:-.05em;
}

.gopbis-login-heading p {
  margin:0 0 28px;
  color:var(--gopbis-muted);
}

.gopbis-unified-login-card form {
  display:grid;
  gap:18px;
}

.gopbis-unified-login-card label {
  display:grid;
  gap:7px;
  color:#344054;
  font-weight:800;
  font-size:14px;
}

.gopbis-unified-login-card input {
  width:100%;
  box-sizing:border-box;
  min-height:48px;
  padding:0 13px;
  border:1px solid #cfd6df;
  border-radius:6px;
  background:#fff;
  font:inherit;
}

.gopbis-unified-login-card input:focus {
  outline:3px solid rgba(23,134,75,.12);
  border-color:var(--gopbis-green);
}

.gopbis-login-submit {
  min-height:48px;
  border:0;
  border-radius:6px;
  background:var(--gopbis-green);
  color:#fff;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
}

.gopbis-login-status {
  min-height:22px;
  margin:0;
  color:var(--gopbis-green);
  font-weight:750;
}
.gopbis-login-status.error { color:#b42318; }

.gopbis-parent-coming-soon {
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--gopbis-line);
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 16px;
  align-items:center;
}
.gopbis-parent-coming-soon strong { color:var(--gopbis-navy); }
.gopbis-parent-coming-soon span { color:#98a2b3; font-weight:800; }
.gopbis-parent-coming-soon button {
  grid-column:1 / -1;
  margin-top:10px;
  min-height:40px;
  border:1px solid var(--gopbis-line);
  border-radius:6px;
  color:#98a2b3;
  background:#f4f5f7;
  font-weight:800;
  cursor:not-allowed;
}

.gopbis-login-back {
  display:inline-block;
  margin-top:22px;
  color:var(--gopbis-navy);
  font-weight:800;
  text-decoration:none;
}

/* Parent coming soon */
.gopbis-coming-soon-body {
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  padding:30px;
  box-sizing:border-box;
  background:var(--gopbis-soft);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

.gopbis-coming-soon-card {
  width:min(620px,100%);
  padding:48px;
  border:1px solid var(--gopbis-line);
  background:#fff;
  text-align:center;
}
.gopbis-coming-soon-card img { width:210px; margin-bottom:30px; }
.gopbis-coming-soon-card h1 { color:var(--gopbis-navy); font-size:48px; letter-spacing:-.05em; margin:10px 0; }
.gopbis-coming-soon-card p { color:var(--gopbis-muted); line-height:1.7; }
.gopbis-coming-soon-card a { color:var(--gopbis-green); font-weight:850; }

/* Sidebar logo */
.sidebar-gopbis-brand {
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:inherit;
}
.sidebar-gopbis-brand img {
  width:30px;
  height:30px;
  object-fit:contain;
}

/* Student account management */
.student-directory-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.gopbis-student-account-modal,
.gopbis-student-import-modal { max-width:760px; }
.form-help { color:var(--gopbis-muted); line-height:1.55; }
.gopbis-form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:18px 0;
}
.gopbis-form-grid label {
  display:grid;
  gap:6px;
  font-size:13px;
  font-weight:800;
  color:#344054;
}
.gopbis-form-grid input,
.gopbis-form-grid select {
  min-height:42px;
  box-sizing:border-box;
  width:100%;
}
.student-import-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:14px 0;
}
.gopbis-inline-status { min-height:22px; color:var(--gopbis-muted); font-weight:700; }
.gopbis-csv-preview { margin:14px 0; }
.gopbis-csv-table-wrap { overflow:auto; margin-top:10px; border:1px solid var(--gopbis-line); }
.gopbis-csv-table-wrap table { width:100%; border-collapse:collapse; font-size:12px; }
.gopbis-csv-table-wrap th,
.gopbis-csv-table-wrap td { padding:8px 10px; border-bottom:1px solid var(--gopbis-line); text-align:left; }

/* Preserve reveal animations */
.reveal-section {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-section.is-visible {
  opacity:1;
  transform:none;
}

@media (max-width: 900px) {
  .gopbis-flat-nav { align-items:flex-start; flex-direction:column; gap:8px; }
  .gopbis-nav-links { gap:16px; overflow-x:auto; width:100%; flex-wrap:nowrap; }
  .gopbis-hero,
  .gopbis-split-section { grid-template-columns:1fr; }
  .gopbis-split-section.reverse > div,
  .gopbis-split-section.reverse > img { order:initial; }
  .gopbis-feature-band { grid-template-columns:1fr 1fr; }
  .gopbis-feature-band article:nth-child(2) { border-right:0; }
  .gopbis-feature-band article:nth-child(-n+2) { border-bottom:1px solid var(--gopbis-line); }
  .gopbis-access-section { align-items:flex-start; flex-direction:column; }
  .gopbis-unified-login-shell { grid-template-columns:1fr; }
  .gopbis-login-brand-panel { border-right:0; border-bottom:1px solid var(--gopbis-line); }
}

@media (max-width: 620px) {
  .gopbis-feature-band { grid-template-columns:1fr; }
  .gopbis-feature-band article { border-right:0; border-bottom:1px solid var(--gopbis-line); }
  .gopbis-check-grid,
  .gopbis-form-grid { grid-template-columns:1fr; }
  .gopbis-login-brand-panel,
  .gopbis-unified-login-card { padding:34px 24px; }
  .gopbis-login-brand-panel h1 { font-size:42px; }
}

/* ---------- GoPBIS V5.1.1 Theme + Visual Integrity ---------- */
:root {
  --gopbis-green: #17864b;
  --gopbis-green-dark: #0f6b3b;
  --gopbis-green-deep: #0d5130;
  --gopbis-green-soft: #eef8f2;
  --gopbis-green-soft-2: #f6fbf8;
  --gopbis-navy: #17365f;
  --gopbis-ink: #1d2939;
  --gopbis-muted: #667085;
  --gopbis-border: #dce5df;
  --gopbis-surface: #ffffff;
  --gopbis-page: #f7f9f8;
}

/* Login: reduce the old blue cast. */
.gopbis-unified-login-body {
  background:
    radial-gradient(circle at 12% 12%, rgba(23,134,75,.08), transparent 28%),
    var(--gopbis-page) !important;
}

.gopbis-login-brand-panel {
  background:
    linear-gradient(145deg, #f7fcf9 0%, #edf7f1 100%) !important;
  border-color: var(--gopbis-border) !important;
}

.gopbis-login-account-status {
  border-color: var(--gopbis-border) !important;
}

.gopbis-login-account-status > div {
  border-color: var(--gopbis-border) !important;
}

.gopbis-unified-login-card input:focus {
  outline-color: rgba(23,134,75,.13) !important;
  border-color: var(--gopbis-green) !important;
}

.gopbis-login-back {
  color: var(--gopbis-green-dark) !important;
}

/* Main application theme:
   Replace the former indigo/purple accent with GoPBIS green. */
body:not(.public-landing-body):not(.gopbis-unified-login-body):not(.gopbis-coming-soon-body) {
  background: var(--gopbis-page);
}

.sidebar {
  background: linear-gradient(180deg, #123f2a 0%, #0d3021 100%) !important;
}

.sidebar a {
  border-radius: 7px !important;
}

.sidebar a:hover {
  background: rgba(255,255,255,.10) !important;
}

.sidebar a.active,
.sidebar .active {
  background: rgba(255,255,255,.16) !important;
}

.topbar,
.card,
.mini-card {
  border-color: var(--gopbis-border) !important;
}

.topbar {
  border-radius: 10px !important;
}

.card {
  border-radius: 10px !important;
}

.mini-card {
  border-radius: 8px !important;
}

.metric {
  background: var(--gopbis-green-soft) !important;
  border-radius: 8px !important;
}

.metric i {
  color: var(--gopbis-green) !important;
}

button:not(.danger):not(.secondary),
.button:not(.danger):not(.secondary) {
  background: var(--gopbis-green) !important;
}

button:not(.danger):not(.secondary):hover,
.button:not(.danger):not(.secondary):hover {
  background: var(--gopbis-green-dark) !important;
  box-shadow: 0 8px 18px rgba(23,134,75,.16) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gopbis-green) !important;
  outline-color: rgba(23,134,75,.12) !important;
}

.active-group {
  border-color: var(--gopbis-green) !important;
  background: var(--gopbis-green-soft) !important;
}

/* Reports */
.reports-sidebar {
  background: linear-gradient(180deg, #123f2a 0%, #0d3021 100%) !important;
}

.reports-brand span,
.reports-actions button {
  background: var(--gopbis-green) !important;
}

.reports-kicker {
  background: var(--gopbis-green-soft) !important;
  color: var(--gopbis-green-dark) !important;
}

.reports-actions button:nth-child(n+2) {
  background: #edf7f1 !important;
  color: var(--gopbis-green-dark) !important;
}

.report-field input:focus,
.report-field select:focus {
  border-color: var(--gopbis-green) !important;
}

#reportAccessBadge {
  background: #e9f7ee !important;
  color: var(--gopbis-green-dark) !important;
}

/* PBIS storefront / common student-facing accents */
.storefront,
.student-storefront,
.pbis-storefront {
  --store-accent: var(--gopbis-green);
}

@media (max-width: 900px) {
  .gopbis-hero .landing-main-visual,
  .gopbis-hero .reveal-image {
    height: 390px !important;
  }
}

@media (max-width: 620px) {
  .gopbis-hero .landing-main-visual,
  .gopbis-hero .reveal-image {
    height: 300px !important;
  }

  .gopbis-split-section > img {
    min-height: 280px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gopbis-landing-page .reveal-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}