* {
  box-sizing: border-box;
}

.pricing-policy-settings{display:grid;gap:20px}.profit-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.profit-summary>div{padding:16px;border:1px solid #d8e1ef;border-radius:14px;background:#f8fafc}.profit-summary small,.profit-summary strong{display:block}.profit-summary strong{font-size:1.35rem;margin-top:5px}.pricing-scope{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}.pricing-scope label{display:flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid #cfd9e8;border-radius:12px}.pricing-policy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pricing-policy-grid label{display:grid;gap:6px;font-weight:700}.pricing-policy-grid input{width:100%}.setup-fee-note{padding:14px 16px;border:1px solid #f5c56b;border-radius:12px;background:#fff9e8}.usage-formula-picker{margin-top:12px}@media(max-width:900px){.profit-summary,.pricing-policy-grid{grid-template-columns:1fr}.pricing-scope{display:grid}}

.exam-status{display:inline-flex;align-items:flex-start;flex-direction:column;gap:2px;padding:8px 12px;border-radius:10px;background:#eef2f6;color:#475467;text-transform:capitalize}.exam-status small{font-size:11px;text-transform:none}.exam-status-ready,.exam-status-exam-ready{color:#166534;background:#dcfce7}.exam-status-submitted{color:#92400e;background:#fef3c7}.exam-status-checking{color:#1d4ed8;background:#dbeafe}.exam-status-checked{color:#166534;background:#bbf7d0}.exam-status-exam-over{color:#991b1b;background:#fee2e2}.exam-status-summary{color:#475467;font-weight:750;white-space:nowrap}
.submission-list{display:grid;gap:10px}.submission-list>button{width:100%;margin:0;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #dbe3ee;border-radius:12px;background:#fff;text-align:left}.submission-list>button:hover{border-color:#84adff;background:#f8fbff;transform:none}.submission-list>button>span{display:grid;gap:4px}.submission-list small{color:#64748b}.submission-row-action{display:flex!important;align-items:flex-end!important;justify-items:end;gap:8px!important;text-align:right}.submission-row-action em{color:#175cd3;font-size:13px;font-style:normal;font-weight:800}.submission-back{width:auto;margin:0 0 18px;padding:8px 12px;background:#fff;color:#475467}.submission-review-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.manual-grade-list{margin-top:18px;display:grid;gap:12px}.manual-grade-list>label{padding:15px;display:flex;align-items:flex-start;gap:14px;border:1px solid #dbe3ee;border-radius:12px;cursor:pointer}.manual-grade-list>label:hover{border-color:#84adff;background:#f8fbff}.manual-grade-list>label>span{display:grid;gap:5px;flex:1}.manual-grade-list small{color:#475467}.manual-grade-list em{color:#166534;font-style:normal;font-weight:750}.manual-grade-list input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:0 0 24px;width:24px!important;height:24px!important;min-width:24px;margin:1px 0 0;padding:0;border:2px solid #98a2b3;border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer}.manual-grade-list input[type="checkbox"]::before{content:"✓";color:#fff;font-size:16px;font-weight:900;line-height:1;transform:scale(0)}.manual-grade-list input[type="checkbox"]:checked{border-color:#2e68e6;background:#2e68e6}.manual-grade-list input[type="checkbox"]:checked::before{transform:scale(1)}.manual-grade-list input[type="checkbox"]:focus-visible{outline:3px solid #bfd4ff;outline-offset:2px}
.questionnaire-title-link{display:block;width:max-content;max-width:100%;min-height:0;margin:0;padding:0;border:0;background:transparent;color:#101828;text-align:left;box-shadow:none}.questionnaire-title-link:hover{background:transparent;color:#175cd3;text-decoration:underline;transform:none}
.submission-workspace{display:grid;gap:22px;width:100%;max-width:1500px;margin:0 auto}.submission-workspace .page-topbar{margin:0}.submission-workspace-panel{padding:24px;overflow:visible}.submission-workspace .submission-list>button{min-height:112px;padding:20px 22px}.submission-workspace .submission-row-action{min-width:240px}.submission-workspace .exam-status{display:inline-flex;align-items:center;width:max-content;padding:7px 12px;border-radius:999px;border:1px solid transparent;text-transform:capitalize}.submission-workspace .exam-status-submitted{color:#92400e;background:#fffbeb;border-color:#fde68a}.submission-workspace .exam-status-checking{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.submission-workspace .exam-status-checked{color:#166534;background:#f0fdf4;border-color:#bbf7d0}.submission-workspace .manual-grade-list{margin-block:24px}.submission-workspace .form-actions{position:sticky;bottom:0;margin-inline:-24px;margin-bottom:-24px;padding:18px 24px;background:#fff;border-top:1px solid #e4e7ec;z-index:5}
.submission-workspace-panel.panel:has(.data-table),.submission-workspace-panel .data-table-wrap{overflow:visible}.submission-workspace-panel .questionnaire-action-menu{justify-content:center}.submission-workspace-panel .data-table td:last-child,.submission-workspace-panel .data-table th:last-child{text-align:center}.submission-workspace-panel .data-table td>span{display:grid;gap:4px}.submission-workspace-panel .data-table td small{display:block;color:#667085}.submission-workspace-panel .questionnaire-action-popover{z-index:100}
.submission-workspace-panel .questionnaire-action-menu{position:relative!important;width:34px!important;height:32px!important;margin-inline:auto!important;display:block!important}.submission-workspace-panel button.questionnaire-action-trigger{position:static!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid #d0d5dd!important;border-radius:6px!important;color:#344054!important;background:#fff!important;box-shadow:none!important;font-size:13px!important;line-height:1!important;transform:none!important}.submission-workspace-panel button.questionnaire-action-trigger[aria-expanded="true"]{border-color:#2e7de9!important;color:#175cd3!important;box-shadow:0 0 0 2px rgba(46,125,233,.12)!important}.submission-workspace-panel .questionnaire-action-popover{position:absolute!important;z-index:200!important;top:38px!important;right:0!important;left:auto!important;width:220px!important;height:auto!important;margin:0!important;padding:8px!important;display:block!important;border:1px solid #e4e7ec!important;border-radius:12px!important;color:#344054!important;background:#fff!important;box-shadow:0 10px 28px rgba(16,24,40,.14)!important}.submission-workspace-panel .questionnaire-action-popover>button[role="menuitem"]{position:static!important;width:100%!important;min-width:0!important;max-width:none!important;height:38px!important;min-height:38px!important;margin:0!important;padding:0 9px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;border:0!important;border-radius:7px!important;color:#344054!important;background:transparent!important;box-shadow:none!important;font-size:12px!important;text-align:left!important;transform:none!important}.submission-workspace-panel .questionnaire-action-popover>button[role="menuitem"]:hover{background:#f2f4f7!important}.submission-workspace-panel .questionnaire-action-popover>button[role="menuitem"]::after{display:none!important}.submission-workspace-panel .questionnaire-action-popover strong{color:#344054!important;font-size:12px!important;font-weight:600!important}.submission-workspace-panel .action-menu-icon{display:grid!important;place-items:center!important;flex:0 0 20px!important;width:20px!important;height:20px!important;color:#475467!important;font-size:16px!important;font-weight:500!important}
.submission-workspace-panel .listing-table,.submission-workspace-panel .data-table-wrap,.submission-workspace-panel .data-table,.submission-workspace-panel .data-table tbody,.submission-workspace-panel .data-table tr,.submission-workspace-panel .data-table td{overflow:visible!important}.submission-workspace-panel .data-table tbody tr:has(.questionnaire-action-trigger[aria-expanded="true"]){position:relative!important;z-index:80!important}.submission-workspace-panel .data-table td:last-child{position:relative!important;z-index:2!important}.submission-workspace-panel .data-table tbody tr:has(.questionnaire-action-trigger[aria-expanded="true"]) td:last-child{z-index:90!important}.submission-workspace-panel .table-pagination{position:relative!important;z-index:1!important}.submission-workspace-panel .listing-toolbar{position:relative!important;z-index:1!important}
@media(max-width:600px){.submission-list>button,.submission-review-heading{align-items:flex-start;flex-direction:column}.submission-row-action{align-items:flex-start!important;text-align:left}.exam-status-summary{white-space:normal}}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f3f4f6;
  color: #111827;
}

.app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.header h1 {
  margin: 0;
  font-size: 28px;
}

.header p {
  margin: 6px 0 0;
  color: #6b7280;
}

button {
  border: 1px solid transparent;
  background: #2563eb;
  color: white;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 30px;
}

.summary div {
  background: white;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.summary span {
  font-size: 32px;
  font-weight: bold;
}

.summary p {
  margin: 8px 0 0;
  color: #6b7280;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.card {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: #ddd;
}

.card-content {
  padding: 16px;
}

.card-content h3 {
  margin: 12px 0;
  text-transform: capitalize;
}

.badge {
  display: inline-block;
  padding: 6px 12px;
  color: white;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
}

.known {
  background: #16a34a;
}

.unknown {
  background: #dc2626;
}

.empty {
  color: #6b7280;
}

@media (max-width: 640px) {
  .app {
    padding: 16px;
  }

  .header {
    align-items: flex-start;
    flex-direction: column;
  }

  .summary {
    grid-template-columns: 1fr;
  }

  button {
    width: 100%;
  }
}

/* Application navigation and notification groups workspace */
.page-with-sidebar,
.dashboard-layout {
  grid-template-columns: 272px minmax(0, 1fr);
  transition: grid-template-columns .2s ease;
}

body.sidebar-collapsed .page-with-sidebar,
body.sidebar-collapsed .dashboard-layout { grid-template-columns: 82px minmax(0, 1fr); }
.sidebar-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dash-sidebar { width: 100%; padding: 20px 14px; background: linear-gradient(180deg, #0b1220 0%, #111c30 100%); transition: width .2s ease; z-index: 20; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 22px; }
.dash-brand { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 0 4px; white-space: normal; }
.dash-brand .sidebar-label { min-width: 0; overflow: hidden; overflow-wrap: anywhere; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.dash-brand.is-long { font-size: 17px; }
.dash-brand.is-very-long { font-size: 14px; }
.dash-brand-mark { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); font-size: 13px; letter-spacing: .04em; }
.dash-brand-logo { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; object-fit: cover; background: #fff; }
.school-logo-preview { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid #dbe4f0; border-radius: 14px; background: #f8fafc; }
.school-logo-preview img, .school-logo-preview > span { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 14px; object-fit: cover; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); font-weight: 800; }
.school-logo-preview div { display: grid; gap: 3px; }
.school-logo-preview small, .form-field > small { color: #64748b; }
.sidebar-collapse-button { width: 34px; height: 34px; min-width: 34px; padding: 0; display: grid; place-items: center; border-radius: 9px; color: #94a3b8; background: #1e293b; }
.sidebar-collapse-button svg, .dash-nav svg, .dash-sidebar-user button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dash-nav { gap: 5px; }
.dash-nav a { min-height: 44px; display: flex; align-items: center; gap: 13px; padding: 10px 12px; white-space: nowrap; }
.dash-nav a svg { flex: 0 0 20px; }
.nav-notification-envelope { position: relative; width: 20px; height: 20px; display: inline-grid; place-items: center; overflow: visible; }
.nav-notification-envelope svg { width: 20px; height: 20px; }
.nav-notification-envelope small { position: absolute; top: -8px; right: -8px; min-width: 15px; height: 15px; padding: 0 3px; display: grid; place-items: center; border: 2px solid #101a2c; border-radius: 999px; color: #fff; background: #ef4444; font-size: 8px; font-weight: 900; line-height: 1; }
.dash-nav a.active .nav-notification-envelope small { border-color: #4338ca; }
.dash-nav a:hover { background: rgba(51, 65, 85, .75); }
.dash-nav a.active { color: #fff; background: linear-gradient(90deg, #2563eb, #4f46e5); box-shadow: 0 8px 22px rgba(37, 99, 235, .24); }
.sidebar-label { overflow: hidden; opacity: 1; transition: opacity .15s ease, width .2s ease; }
.dash-sidebar-user { grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; padding: 16px 4px 0; }
.sidebar-user-avatar, .mini-avatar { display: grid; place-items: center; border-radius: 50%; color: #dbeafe; background: #334155; font-weight: 800; }
.sidebar-user-avatar { width: 38px; height: 38px; }
.sidebar-user-copy { display: grid; gap: 3px; min-width: 0; }
.sidebar-user-copy strong { overflow: hidden; text-overflow: ellipsis; }
.dash-sidebar-user form { grid-column: 1 / -1; }
.dash-sidebar-user button { display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 10px; color: #cbd5e1; background: #1e293b; }
body.sidebar-collapsed .sidebar-label { width: 0; opacity: 0; pointer-events: none; }
body.sidebar-collapsed .sidebar-header { justify-content: center; flex-wrap: wrap; gap: 10px; }
body.sidebar-collapsed .dash-brand { padding: 0; }
body.sidebar-collapsed .sidebar-collapse-button svg { transform: rotate(180deg); }
body.sidebar-collapsed .dash-nav a { justify-content: center; padding-inline: 10px; }
body.sidebar-collapsed .dash-sidebar-user { grid-template-columns: 1fr; justify-items: center; }
body.sidebar-collapsed .dash-sidebar-user form { grid-column: 1; }
body.sidebar-collapsed .dash-sidebar-user button { width: 42px; padding-inline: 0; }
@media (min-width: 641px) {
  body.sidebar-collapsed .dash-sidebar { padding-inline: 0; }
  body.sidebar-collapsed .sidebar-header { width:100%; min-height: 44px; margin-bottom: 14px; display:grid; place-items:center; }
  body.sidebar-collapsed .sidebar-collapse-button { display:none; }
  body.sidebar-collapsed .dash-brand { width:44px; height:44px; margin:0 auto; display:grid; place-items:center; }
  body.sidebar-collapsed .dash-nav { width:100%; display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; padding-right:0; }
  body.sidebar-collapsed .dash-nav > a,
  body.sidebar-collapsed .dash-nav-group-title { width: 44px; max-width: 44px; height: 44px; min-height: 44px; margin-inline: auto; padding: 0; box-sizing: border-box; justify-content: center; border-radius: 11px; }
  body.sidebar-collapsed .dash-nav a > span:first-child,
  body.sidebar-collapsed .dash-nav-group-title > span:first-child { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; }
  body.sidebar-collapsed .dash-subnav { display: none; }
  body.sidebar-collapsed .dash-nav a.active { box-shadow: 0 5px 14px rgba(37,99,235,.22); }
  body.sidebar-collapsed .dash-sidebar-user { width:44px; margin-inline:auto; padding:12px 0; justify-items:center; }
  body.sidebar-collapsed .sidebar-user-avatar { margin-inline:auto; }
}

.groups-page { padding: 30px clamp(18px, 4vw, 48px) 60px; }
.page-topbar { max-width: 1320px; margin: 0 auto 22px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #e2e8f0; border-radius: 20px; background: rgba(255, 255, 255, .92); box-shadow: 0 12px 35px rgba(15, 23, 42, .06); }
.page-topbar h1 { margin: 4px 0; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.03em; }
.page-topbar p:not(.dash-eyebrow) { margin: 0; color: #64748b; }
.primary-action { white-space: nowrap; border-radius: 12px; background: #2563eb; box-shadow: 0 8px 20px rgba(37, 99, 235, .2); }
.groups-alert, .groups-table-panel { max-width: 1320px; margin-left: auto; margin-right: auto; }
.groups-table-panel { padding: 0; overflow: visible; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 12px 35px rgba(15, 23, 42, .06); }
.table-toolbar { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e2e8f0; }
.table-toolbar h2, .table-toolbar p { margin: 0; }
.table-toolbar p { margin-top: 4px; color: #64748b; font-size: 13px; }
.table-search { width: min(300px, 100%); }
.table-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table-search input { border-radius: 10px; background: #f8fafc; }
.table-toolbar-controls { width:min(560px,100%); display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:end; gap:12px; }
.table-toolbar-controls.has-group-filter { width:min(760px,100%); grid-template-columns:minmax(220px,1fr) minmax(150px,190px) 140px; }
.table-toolbar-controls .table-search { width:100%; }
.table-toolbar-controls input,.table-toolbar-controls select { width:100%; }
.table-role-filter { display:grid; gap:5px; color:#475569; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.05em; }
.table-role-filter select { min-height:44px; padding:10px 34px 10px 12px; border:1px solid #cbd5e1; border-radius:10px; color:#172033; background:#fff; font-size:14px; font-weight:700; text-transform:none; letter-spacing:0; }
.directory-role-segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: min(520px, 100%); margin: 0 0 18px; padding: 5px; border: 1px solid #dbe3ef; border-radius: 14px; background: #f1f5f9; }
.directory-role-segments button { padding: 9px 12px; border-radius: 10px; background: transparent; color: #475569; font-size: 13px; }
.directory-role-segments button.is-active { background: #fff; color: #1d4ed8; box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }
.groups-table { min-width: 930px; }
.groups-table th { padding: 0; background: #f8fafc; }
.groups-table td { padding: 16px; }
.groups-table td:first-child { display: grid; gap: 4px; }
.groups-table td:first-child small { color: #64748b; font-size: 12px; font-weight: 400; }
.sort-button { width: 100%; padding: 14px 16px; display: flex; align-items: center; justify-content: flex-start; gap: 7px; border-radius: 0; color: #475569; background: transparent; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.sort-button:hover { color: #1d4ed8; background: #eff6ff; }
.sort-button span { color: #94a3b8; }
.manager-cell { display: inline-flex; align-items: center; gap: 8px; }
.mini-avatar { width: 28px; height: 28px; font-size: 11px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 99px; font-size: 12px; font-weight: 800; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active { color: #15803d; background: #dcfce7; }
.status-inactive { color: #64748b; background: #e2e8f0; }
.status-warning { color: #b45309; font-size: 12px; font-weight: 800; }
.row-actions { display: flex; gap: 7px; }
.action-button { padding: 8px 11px; border: 1px solid #cbd5e1; border-radius: 8px; color: #334155; background: #fff; font-size: 12px; }
.action-button:hover { border-color: #2563eb; color: #1d4ed8; }
.action-button.danger-text { color: #b91c1c; }
.action-button.danger-text:hover { border-color: #ef4444; background: #fef2f2; }
.table-pagination { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #64748b; font-size: 13px; border-top: 1px solid #e2e8f0; }
.table-pagination > div { display: flex; align-items: center; gap: 12px; }
.table-pagination button, .secondary-action { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 9px; color: #334155; background: #fff; }
.table-pagination button:disabled { cursor: not-allowed; opacity: .45; }

body.modal-open { overflow: hidden; }
.app-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .62); backdrop-filter: blur(3px); }
.modal-card { position: relative; width: min(100%, 760px); max-height: calc(100vh - 40px); overflow: auto; padding: 26px; border-radius: 20px; background: #fff; box-shadow: 0 30px 80px rgba(15, 23, 42, .3); }
.modal-card-small { width: min(100%, 470px); text-align: center; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.modal-header h2, .modal-card-small h2 { margin: 4px 0; }
.modal-close { width: 36px; height: 36px; padding: 0; border-radius: 9px; color: #475569; background: #f1f5f9; font-size: 24px; }
.modal-actions { grid-column: 1 / -1; margin-top: 8px; display: flex; justify-content: flex-end; gap: 10px; }
.delete-modal-icon { width: 52px; height: 52px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: #b91c1c; background: #fee2e2; font-size: 24px; font-weight: 900; }
.modal-card-small p { color: #64748b; line-height: 1.6; }
.modal-card-small .modal-actions { justify-content: center; }

/* Shared modern form system */
.modern-form { width:min(820px,100%); padding:0; border:1px solid rgba(203,213,225,.75); border-radius:24px; overflow:auto; background:#fff; }
.modern-form-compact { width:min(600px,100%); }
.modern-form-header { padding:26px 30px 22px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; border-bottom:1px solid #e2e8f0; }
.modern-form-header div { min-width:0; }
.modern-form-header p { margin:0 0 6px; color:#2563eb; font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.modern-form-header h2 { margin:0; color:#0f172a; font-size:clamp(25px,4vw,34px); line-height:1.15; }
.modern-form-header span { margin-top:7px; display:block; color:#64748b; font-size:14px; line-height:1.5; }
.modern-form-close { width:40px!important; min-width:40px!important; height:40px; min-height:40px!important; padding:0!important; display:grid; place-items:center; border:0; border-radius:11px; color:#475569; background:#f1f5f9; box-shadow:none; font-size:25px; line-height:1; }
.modern-form-close:hover { color:#0f172a; background:#e2e8f0; transform:none; }
.modern-form-section { margin:0; padding:22px 30px; display:grid; gap:17px; border-bottom:1px solid #e2e8f0; background:#fff; }
.modern-form-section-heading h3 { margin:0; color:#172033; font-size:17px; }
.modern-form-section-heading p { margin:5px 0 0; color:#64748b; font-size:13px; line-height:1.45; }
.modern-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.modern-form-grid.columns-1 { grid-template-columns:1fr; }
.modern-form-field { min-width:0; display:grid; align-content:start; gap:7px; color:#334155; font-size:13px; font-weight:800; }
.modern-form-field.form-field-full { grid-column:1/-1; }
.modern-form-field>span b { color:#ef4444; }
.modern-form-field input,.modern-form-field select,.modern-form-field textarea { width:100%; min-height:48px; padding:11px 14px; border:1px solid #cbd5e1; border-radius:11px; color:#172033; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); font:inherit; font-weight:500; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.modern-form-field select { padding-right:42px; appearance:none; background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%); background-position:calc(100% - 18px) 51%,calc(100% - 13px) 51%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.modern-form-field input::placeholder,.modern-form-field textarea::placeholder { color:#94a3b8; }
.modern-form-field input:hover,.modern-form-field select:hover,.modern-form-field textarea:hover { border-color:#94a3b8; }
.modern-form-field input:focus,.modern-form-field select:focus,.modern-form-field textarea:focus { border-color:#2563eb; outline:0; box-shadow:0 0 0 3px rgba(37,99,235,.13); }
.modern-form-field small { color:#64748b; font-size:11px; font-weight:600; line-height:1.4; }
.modern-form-field .form-field-error { color:#dc2626; }
.modern-form-field .password-field { width:100%; }
.modern-form-field .password-field input { padding-right:50px; }
.trial-duration-field { position:relative; }
.trial-duration-field input { padding-right:58px; }
.trial-duration-field>span { position:absolute; top:50%; right:14px; color:#64748b; font-size:12px; font-weight:800; transform:translateY(-50%); pointer-events:none; }
.free-trial-notice { padding:13px 15px; display:flex; align-items:flex-start; gap:10px; border:1px solid #bfdbfe; border-radius:11px; color:#1e3a8a; background:#eff6ff; font-size:12px; line-height:1.45; }
.free-trial-notice strong { flex:0 0 auto; }
.modern-form-actions { padding:20px 30px 26px; display:flex; align-items:center; justify-content:flex-end; gap:10px; background:#f8fafc; }
.modern-form-actions .app-button { width:auto; min-width:142px; }
@media(max-width:640px){.app-modal{padding:10px}.modern-form{max-height:calc(100dvh - 20px);border-radius:18px}.modern-form-header,.modern-form-section{padding:19px 18px}.modern-form-grid{grid-template-columns:1fr}.modern-form-actions{padding:16px 18px;align-items:stretch;flex-direction:column-reverse}.modern-form-actions .app-button{width:100%}}
:root[data-theme="dark"] .modern-form,:root[data-theme="dark"] .modern-form-section { border-color:#334155; background:#111827; }
:root[data-theme="dark"] .modern-form-header,:root[data-theme="dark"] .modern-form-section { border-color:#334155; }
:root[data-theme="dark"] .modern-form-header h2,:root[data-theme="dark"] .modern-form-section-heading h3,:root[data-theme="dark"] .modern-form-field { color:#f8fafc; }
:root[data-theme="dark"] .modern-form-header span,:root[data-theme="dark"] .modern-form-section-heading p,:root[data-theme="dark"] .modern-form-field small { color:#94a3b8; }
:root[data-theme="dark"] .modern-form-close,:root[data-theme="dark"] .modern-form-actions { color:#cbd5e1; background:#0f172a; }
:root[data-theme="dark"] .modern-form-field input,:root[data-theme="dark"] .modern-form-field select,:root[data-theme="dark"] .modern-form-field textarea { color:#f8fafc; border-color:#475569; background-color:#0f172a; }
:root[data-theme="dark"] .free-trial-notice { color:#bfdbfe; border-color:#1d4ed8; background:#172554; }

@media (max-width: 760px) {
  body.sidebar-collapsed .page-with-sidebar, body.sidebar-collapsed .dashboard-layout,
  .page-with-sidebar, .dashboard-layout { display: block; }
  .dash-sidebar { position: relative; height: auto; }
  .sidebar-collapse-button { display: none; }
  .dash-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-sidebar-user { margin-top: 16px; }
  .groups-page { padding: 18px 12px 40px; }
  .page-topbar, .table-toolbar, .table-pagination { align-items: stretch; flex-direction: column; }
  .page-topbar .primary-action, .table-search { width: 100%; }
  .table-pagination > div { justify-content: space-between; }
  .modal-card { padding: 20px; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions button { width: 100%; }
}

.attendance-current-person { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #dbe4f0; border-radius: 12px; background: #f8fafc; }
.attendance-current-person > div { display: grid; gap: 2px; }
.attendance-current-person small, .attendance-current-person span { color: #64748b; }
.attendance-filter-bar { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 280px) auto auto; align-items: end; gap: 12px; margin: 16px 0; }
.attendance-filter-bar label { display: grid; gap: 6px; }
.attendance-filter-bar label > span { color: #475569; font-size: 12px; font-weight: 700; }
.attendance-filter-bar .secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; }
.attendance-source { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #334155; background: #e2e8f0; font-size: 11px; font-weight: 800; }
.attendance-source.source-manual { color: #1d4ed8; background: #dbeafe; }
.attendance-source.source-qr { color: #047857; background: #d1fae5; }
.attendance-source.source-barcode { color: #7c3aed; background: #ede9fe; }
.attendance-source.source-face { color: #b45309; background: #fef3c7; }
@media (max-width: 760px) { .attendance-filter-bar { grid-template-columns: 1fr; } }

.member-group-assignment { grid-column: 1 / -1; margin-top: 8px; padding: 20px; border: 1px solid #dbe4f0; border-radius: 16px; background: #f8fafc; }
.member-group-assignment-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.member-group-assignment-header h2, .member-group-assignment-header p { margin: 0; }
.member-group-assignment-header h2 { margin: 3px 0 5px; }
.member-group-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; }
.member-group-option .group-member-chip { border: 0; background: transparent; }
.member-group-option .group-member-chip span { display: grid; gap: 2px; }
.member-group-option .group-member-chip small { color: #64748b; font-weight: 500; }
.member-group-option > a { padding: 8px 10px; font-size: 12px; font-weight: 700; }
.manager-list { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.manager-picker { max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid #dbe4f0; border-radius: 12px; }
.notify-user-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.notify-user-column { min-width: 0; padding: 14px; border: 1px solid #dbe4f0; border-radius: 14px; background: #fff; }
.notify-user-column h3 { margin: 0 0 12px; color: #334155; font-size: 15px; }
.notify-user-column .notify-user-chip { width: 100%; margin-top: 8px; border-radius: 12px; align-items: flex-start; }
.notify-user-chip > span { min-width: 0; display: grid; gap: 3px; }
.notify-user-chip strong, .notify-user-chip small { display: block; overflow-wrap: anywhere; }
.notify-user-chip small { color: #64748b; font-weight: 500; line-height: 1.35; }
@media (max-width: 680px) { .member-group-assignment-header { align-items: stretch; flex-direction: column; } .member-group-option { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .notify-user-columns { grid-template-columns: 1fr; } }

.auth-box {
  max-width: 420px;
  margin: 80px auto;
  background: white;
  padding: 28px;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.auth-box form,
.panel form {
  display: grid;
  gap: 12px;
}

.login-page {
  min-height: 100dvh;
  padding: clamp(18px, 4vw, 54px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 18%, rgba(125, 211, 252, .28), transparent 28%),
    linear-gradient(145deg, #1d4f9b 0%, #266fc0 48%, #2d8bd4 100%);
}

.login-shell {
  position: relative;
  width: min(1180px, 100%);
  min-height: min(680px, calc(100dvh - clamp(36px, 8vw, 108px)));
  padding: clamp(32px, 6vw, 78px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  align-items: center;
  gap: clamp(34px, 6vw, 86px);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: clamp(30px, 5vw, 58px);
  color: #fff;
  background: linear-gradient(145deg, rgba(116, 207, 239, .96), rgba(73, 169, 225, .97));
  box-shadow: 0 30px 90px rgba(8, 47, 107, .35), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.login-shell::after {
  content: "";
  position: absolute;
  inset: auto 5% 0;
  height: 20%;
  border-radius: 50%;
  background: rgba(17, 92, 173, .2);
  filter: blur(34px);
  pointer-events: none;
}

.login-illustration,
.login-panel {
  position: relative;
  z-index: 1;
}

.login-illustration svg {
  width: 100%;
  max-height: 500px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 18px 18px rgba(17, 71, 137, .17));
}

.login-art-orbit { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 5; }
.login-art-signal,
.login-art-bulb,
.login-art-tablet,
.login-art-chart,
.login-art-student,
.login-art-person,
.login-art-ground,
.login-art-plant { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.login-art-bulb { fill: rgba(255, 235, 139, .2); }
.login-art-bulb path:nth-child(n+2) { fill: none; }
.login-art-tablet > rect:first-child { fill: #35aa91; stroke: #23977d; }
.login-art-tablet > rect:nth-child(2) { stroke: #fff; }
.login-art-tablet > circle { fill: #e8fbff; stroke: #e8fbff; }
.login-art-tablet > rect:nth-of-type(3) { fill: rgba(255, 255, 255, .44); stroke: rgba(255, 255, 255, .7); }
.login-art-chart > path:first-child { fill: #fff4cb; stroke: #fff; }
.login-art-chart > path:last-child,
.login-art-chart > path:nth-child(2) { stroke: #246ba9; stroke-width: 4; }
.login-art-books path:nth-child(2) { fill: #f37575; }
.login-art-books path:nth-child(3) { fill: #ffe28b; }
.login-art-student circle,
.login-art-person circle { fill: #ffd2a6; }
.login-art-student path:nth-child(2),
.login-art-person path:nth-child(2) { fill: #173a72; stroke: #173a72; }
.login-art-student path:nth-child(3) { fill: #f36d88; }
.login-art-person path:nth-child(3) { fill: #ffcf69; }
.login-art-student path:last-child { fill: #e6f4ff; stroke: #e6f4ff; }
.login-art-person path:last-child { fill: #f4fbff; stroke: #f4fbff; }
.login-art-ground { stroke: #194f91; stroke-width: 10; }
.login-art-plant { fill: rgba(255, 255, 255, .12); }

.login-panel {
  width: 100%;
  max-width: 410px;
  justify-self: center;
}

.login-kicker {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.login-panel h1 {
  margin: 0;
  color: #0f355c;
  font-size: clamp(40px, 6vw, 66px);
  line-height: 1;
  letter-spacing: -.045em;
  text-shadow: 0 4px 14px rgba(17, 76, 145, .2);
}

.login-intro {
  max-width: 360px;
  margin: 20px 0 22px;
  color: #123b61;
  font-size: 17px;
  line-height: 1.55;
}

.login-tenant {
  width: max-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 7px 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 101, 174, .2);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-error {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 12px;
  color: #7f1d1d;
  background: rgba(254, 226, 226, .94);
}

.login-form {
  display: grid;
  gap: 10px;
}

.login-form label {
  margin-top: 3px;
  color: #0f355c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .045em;
}

.login-form input {
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 13px;
  color: #12345b;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 7px 18px rgba(26, 89, 151, .1);
  font-size: 15px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.login-form input::placeholder { color: #7690a9; }
.login-form input:focus { border-color: #155fae; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .24), 0 8px 22px rgba(21, 95, 174, .15); }
.login-form .password-visibility-toggle { color: #51789e; }
.login-form .password-visibility-toggle:hover { color: #155fae; background: #e8f4ff !important; }

.login-form > button {
  min-height: 50px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: linear-gradient(135deg, #1765bc, #257fce);
  box-shadow: 0 12px 24px rgba(16, 83, 155, .26);
  font-size: 15px;
  letter-spacing: .02em;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.login-form > button:hover { background: linear-gradient(135deg, #1159aa, #1d73c4); box-shadow: 0 15px 28px rgba(16, 83, 155, .32); transform: translateY(-1px); }
.login-form > button:focus-visible { outline: 3px solid rgba(255, 255, 255, .72); outline-offset: 3px; }

@media (max-width: 820px) {
  .login-page { align-items: start; padding: 14px; overflow: auto; }
  .login-shell { min-height: calc(100dvh - 28px); padding: 36px 26px 42px; grid-template-columns: 1fr; gap: 18px; border-radius: 32px; }
  .login-illustration { width: min(430px, 88%); margin: 0 auto; }
  .login-illustration svg { max-height: 310px; }
  .login-panel { max-width: 460px; }
  .login-panel h1 { font-size: clamp(40px, 12vw, 56px); }
  .login-intro { margin-block: 14px 18px; }
}

@media (max-width: 480px) {
  .login-shell { padding: 26px 20px 32px; border-radius: 26px; }
  .login-illustration { width: 92%; }
  .login-illustration svg { max-height: 235px; }
  .login-intro { font-size: 15px; }
}

input,
select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
}

textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font: inherit;
  resize: vertical;
}

[hidden] {
  display: none !important;
}

.member-form-box {
  max-width: 920px;
  padding: 34px;
}

.member-role-segments {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: 24px 0;
  padding: 5px;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  background: #f1f5f9;
}

.member-role-segment {
  padding: 11px 8px;
  border-radius: 11px;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.member-role-segment:hover,
.member-role-segment:focus-visible {
  color: #1d4ed8;
  outline: none;
}

.member-role-segment.is-active {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.member-role-segment.is-disabled {
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.72;
}

.family-group-create-form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #dbe3ef;
}

.member-group-option.is-unavailable {
  background: #f8fafc;
  opacity: 0.68;
}

.member-group-option.is-unavailable a {
  opacity: 1;
}

.member-group-option.is-admin-override {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.family-group-create-form button {
  min-height: 48px;
}

.password-reset-result code {
  display: inline-block;
  margin: 10px 0;
  padding: 14px 18px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.admin-reset-password {
  margin-top: 5px;
  padding: 4px 8px;
  background: transparent;
  color: #1d4ed8;
  font-size: 12px;
}

.member-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
}
.member-form-dependent-fields { display:contents; }
.member-form-dependent-fields[hidden] { display:none; }
.member-field { min-width:0; display:grid; gap:6px; align-content:start; }
.member-field-label { color:#334155; font-size:14px; font-weight:800; line-height:1.35; }
.required-marker { color:#dc2626; font-weight:900; }
.member-field > input, .member-field > select, .member-field > .password-field { width:100%; }
.member-field-full { grid-column:1 / -1; }
.member-field-error { margin:0; color:#dc2626; font-size:13px; font-weight:750; }
.member-field.has-error input, .member-field.has-error select { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
.student-parent-gateway { padding:18px; display:grid; gap:8px; border:1px solid #bfdbfe; border-radius:14px; background:#eff6ff; }
.student-parent-gateway > label { color:#1e3a8a; font-size:16px; font-weight:850; }
.student-parent-gateway > p { margin:0; }

.member-form > label:not(.group-member-chip),
.member-form > p,
.member-form > .group-member-chip,
.member-form > .group-member-grid,
.member-form > #student-parent-field,
.member-form > button,
.member-form > #member-role {
  grid-column: 1 / -1;
}

.member-form > label:not(.group-member-chip) {
  margin: 8px 0 -8px;
  color: #334155;
  font-weight: 700;
}

.member-form input,
.member-form select,
.notification-form-grid input,
.notification-form-grid select,
.notification-form-grid textarea {
  min-height: 48px;
  border-color: #cbd5e1;
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.member-form input[type="checkbox"],
.member-form input[type="radio"],
.notification-form-grid input[type="checkbox"],
.notification-form-grid input[type="radio"] { width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0; margin: 0; flex: 0 0 20px; accent-color: #2563eb; }
.choice-card { display:flex; align-items:center; gap:12px; min-height:64px; padding:14px 16px; border:1px solid #dbe4f0; border-radius:12px; background:#f8fafc; cursor:pointer; }
.choice-card:has(input:checked) { border-color:#2563eb; background:#eff6ff; box-shadow:0 0 0 1px #2563eb; }
.choice-card > span { display:grid; gap:3px; }
.choice-card small { color:#64748b; font-weight:500; }
.profile-telegram-settings { display:grid; gap:16px; margin-top:8px; padding:20px; border:1px solid #dbe4f0; border-radius:16px; background:#f8fafc; }
.profile-telegram-settings h2 { margin:2px 0 4px; }
.profile-telegram-settings .telegram-connect-action { width: fit-content; margin: 4px 0 0; padding: 10px 14px; }
.profile-telegram-settings .telegram-id-lookup { width:fit-content; color:#2563eb; font-size:12px; font-weight:700; }
.profile-telegram-settings .telegram-test-action { width:fit-content; margin:0; }
.profile-face-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:16px; border:1px solid #dbe4f0; border-radius:14px; }
.profile-face-grid legend { padding:0 7px; color:#334155; font-weight:850; }
.profile-face-grid label { display:grid; gap:6px; color:#475569; font-size:12px; font-weight:800; }
.profile-face-grid input { min-width:0; width:100%; }
.dashboard-analytics-panel { display:grid; gap:22px; margin-bottom:22px; padding:24px; overflow:hidden; }
.analytics-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.analytics-heading h2 { margin:3px 0 5px; }
.analytics-heading p { margin:0; color:#64748b; }
.analytics-filters { display:flex; align-items:end; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.analytics-filters label { min-width:150px; display:grid; gap:5px; }
.analytics-filters label>span { color:#475569; font-size:11px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.analytics-filters select,.analytics-filters input { min-height:44px; padding:10px 36px 10px 12px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; }
.analytics-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.analytics-metric { min-width:0; display:grid; gap:3px; padding:17px; border:1px solid #dbe4f0; border-radius:13px; background:#f8fafc; }
.analytics-metric strong { color:#172033; font-size:26px; }
.analytics-metric span { color:#475569; font-size:13px; font-weight:750; }
.analytics-metric small { color:#64748b; }
.attendance-bar-chart { height:190px; display:flex; align-items:end; gap:10px; padding:18px 12px 0; border:1px solid #e2e8f0; border-radius:13px; background:linear-gradient(180deg,#f8fafc,#fff); overflow-x:auto; }
.attendance-bar-item { min-width:44px; height:100%; display:grid; grid-template-rows:18px minmax(0,1fr) 28px; align-items:end; justify-items:center; flex:1; color:#475569; font-size:11px; font-weight:700; }
.attendance-bar-item i { width:min(34px,75%); min-height:8px; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,#2563eb,#4f46e5); box-shadow:0 4px 12px rgba(37,99,235,.2); }
.analytics-empty { width:100%; align-self:center; color:#64748b; text-align:center; }
.analytics-mini-bars { min-height:190px; display:flex; align-items:end; gap:9px; padding:18px 12px 0; border:1px solid #e2e8f0; border-radius:13px; background:linear-gradient(180deg,#f8fafc,#fff); overflow-x:auto; }
.analytics-mini-bars>div { min-width:38px; height:160px; display:grid; grid-template-rows:18px minmax(0,1fr) 28px; align-items:end; justify-items:center; flex:1; color:#475569; font-size:10px; font-weight:750; }
.analytics-mini-bars i { width:min(30px,72%); min-height:8px; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,#0ea5e9,#2563eb); }
.analytics-graph-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(210px,1fr); gap:14px; }
.analytics-donut-wrap { min-height:190px; display:flex; align-items:center; justify-content:center; gap:18px; padding:20px; border:1px solid #e2e8f0; border-radius:13px; background:#f8fafc; }
.analytics-donut { width:116px; height:116px; flex:0 0 116px; display:grid; place-items:center; border-radius:50%; position:relative; }
.analytics-donut::after { content:""; position:absolute; inset:18px; border-radius:50%; background:#f8fafc; }
.analytics-donut>span { position:relative; z-index:1; color:#172033; font-size:20px; font-weight:900; }
.analytics-donut-wrap>div:last-child { display:grid; gap:3px; }
.analytics-donut-wrap>div:last-child strong { font-size:24px; }
.analytics-donut-wrap small { color:#64748b; }
.free-trial-panel { display:flex; align-items:center; justify-content:space-between; gap:24px; border-color:#bfdbfe; background:linear-gradient(135deg,#eff6ff,#fff); }
.free-trial-panel form { width:min(600px,100%); display:grid; grid-template-columns:minmax(130px,1fr) minmax(130px,1fr) auto; align-items:end; gap:12px; }
.free-trial-panel label { display:grid; gap:6px; color:#475569; font-size:12px; font-weight:800; }
.free-trial-panel label small { color:#64748b; font-size:10px; font-weight:650; }
.custom-subscription-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.custom-subscription-heading h2{margin:3px 0 7px}.custom-subscription-heading p{margin:0;color:#64748b}.custom-subscription-total{min-width:190px;padding:16px;display:grid;border-radius:14px;color:#fff;background:linear-gradient(135deg,#1d4ed8,#7c3aed);text-align:center}.custom-subscription-total span,.custom-subscription-total small{font-size:11px}.custom-subscription-total strong{font-size:30px}.custom-feature-grid{margin:20px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.custom-feature-card{padding:14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px;border:1px solid #dbe3ee;border-radius:12px;background:#fff;cursor:pointer}.custom-feature-card:has(input:checked){border-color:#60a5fa;background:#eff6ff}.custom-feature-card span{display:grid;gap:4px}.custom-feature-card small{color:#64748b}.custom-feature-card em{margin-left:7px;padding:2px 6px;border-radius:99px;color:#166534;background:#dcfce7;font-size:9px;font-style:normal}.custom-feature-card b{color:#1d4ed8;white-space:nowrap}.custom-subscription-builder form>button{width:auto}@media(max-width:620px){.custom-subscription-heading{flex-direction:column}.custom-subscription-total,.custom-subscription-builder form>button{width:100%}}
.custom-billing-mode{margin:20px 0 12px;padding:0;border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.custom-billing-mode legend{margin-bottom:8px;font-weight:850}.custom-billing-mode label{padding:13px;display:flex;gap:10px;border:1px solid #dbe3ee;border-radius:12px;cursor:pointer}.custom-billing-mode label.selected{border-color:#2563eb;background:#eff6ff}.custom-billing-mode span{display:grid;gap:3px}.custom-billing-mode small{color:#64748b}.payg-usage-grid{margin:12px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.payg-usage-grid label{display:grid;gap:6px;color:#334155;font-size:12px;font-weight:800}.payg-usage-grid input{width:100%}@media(max-width:720px){.custom-billing-mode,.payg-usage-grid{grid-template-columns:1fr}}
.custom-feature-card{display:block;padding:0;overflow:hidden;cursor:default}.custom-feature-card.selected-feature{border-color:#60a5fa;background:#eff6ff}.custom-feature-card-main{min-height:100%;padding:14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px;cursor:pointer}.custom-feature-card-main>input{margin-top:3px}.custom-feature-card-main>b{color:#1d4ed8;white-space:nowrap}.recording-feature-card{grid-column:span 1}.recording-card-options{margin:0 14px 14px;padding:12px;border:1px solid #bfdbfe;border-radius:11px;background:rgba(255,255,255,.82)}.recording-billing-picker{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.recording-billing-picker legend{grid-column:1/-1;margin-bottom:1px;color:#334155;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.recording-billing-picker label{min-width:0;padding:9px 10px;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:8px;border:1px solid #dbe3ee;border-radius:9px;background:#fff;cursor:pointer}.recording-billing-picker label.selected{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 1px rgba(37,99,235,.08)}.recording-billing-picker input{position:absolute;opacity:0;pointer-events:none}.recording-billing-picker i{width:19px;height:19px;display:grid;place-items:center;border:1.5px solid #94a3b8;border-radius:5px;color:#fff;background:#fff;font-size:12px;font-style:normal;font-weight:900}.recording-billing-picker label.selected i{border-color:#2563eb;background:#2563eb}.recording-billing-picker span{min-width:0;display:grid;gap:1px}.recording-billing-picker strong{font-size:12px}.recording-billing-picker small{color:#64748b;font-size:10px}.recording-usage-grid{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.recording-usage-input{min-width:0;display:grid;gap:5px}.recording-usage-input span{color:#475569;font-size:10px;font-weight:800}.recording-usage-input input{width:100%;min-width:0;height:38px;padding:7px 9px;border-color:#cbd5e1;border-radius:8px;background:#fff;font-size:14px}@media(min-width:1200px){.recording-feature-card{grid-column:span 1}}@media(max-width:720px){.recording-billing-picker,.recording-usage-grid{grid-template-columns:1fr}.custom-feature-card-main{grid-template-columns:auto minmax(0,1fr)}.custom-feature-card-main>b{grid-column:2;text-align:left}}
.custom-member-count{margin-top:20px;padding:14px;display:grid;grid-template-columns:minmax(0,1fr) 150px auto;align-items:center;gap:14px;border:1px solid #c7d2fe;border-radius:12px;background:#f5f7ff}.custom-member-count span{display:grid}.custom-member-count small{color:#64748b}.custom-member-count input{width:100%;font-size:16px}.custom-member-count>b{color:#1d4ed8}.custom-price-breakdown{margin:-4px 0 16px;padding:12px 14px;display:grid;gap:7px;border-radius:11px;background:#f8fafc}.custom-price-breakdown span,.custom-price-breakdown strong{display:flex;justify-content:space-between;gap:16px}.custom-price-breakdown strong{padding-top:7px;border-top:1px solid #dbe3ee}@media(max-width:620px){.custom-member-count{grid-template-columns:1fr}.custom-member-count>b{text-align:right}}
.platform-filter-panel { margin-bottom:16px; padding:18px; }
.platform-analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.category-bars { min-height:190px; display:grid; align-content:center; gap:14px; padding:12px; }
.category-bars>div { display:grid; grid-template-columns:minmax(110px,150px) minmax(80px,1fr) 42px; align-items:center; gap:10px; }
.category-bars>div>span { overflow:hidden; color:#475569; font-size:12px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.category-bars i { height:12px; overflow:hidden; border-radius:999px; background:#e2e8f0; }
.category-bars b { height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#2563eb,#0ea5e9); }
.category-bars strong { text-align:right; }
.tenant-page-header .primary-action { width:auto; min-width:150px; }
.tenant-table-panel { padding:0; overflow:hidden; }
.tenant-table td { vertical-align:middle; }
.tenant-table td>small,.tenant-table td>strong+small { display:block; margin-top:3px; color:#64748b; }
.tenant-subdomain { display:inline-flex; padding:6px 10px; border-radius:8px; background:#f1f5f9; color:#334155; font-weight:700; }
.tenant-admin-list,.tenant-admin-list>span,.tenant-row-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.tenant-admin-list { display:grid; }
.tenant-row-actions form { margin:0; }
.tenant-row-actions .button-link,.tenant-row-actions button,.tenant-admin-list button { width:auto; min-width:92px; min-height:40px; padding:9px 13px; }
@media(max-width:960px){.platform-analytics-grid{grid-template-columns:1fr}.tenant-table{min-width:980px}}
@media(max-width:720px){.free-trial-panel{align-items:stretch;flex-direction:column}.free-trial-panel form{grid-template-columns:1fr}}
@media(max-width:900px){.analytics-heading{display:grid}.analytics-filters{justify-content:start}.analytics-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.analytics-graph-grid{grid-template-columns:1fr}}
@media(max-width:560px){.dashboard-analytics-panel{padding:16px}.analytics-filters,.analytics-filters label{width:100%}.analytics-metrics{grid-template-columns:1fr}.attendance-bar-chart,.analytics-mini-bars{height:165px}.analytics-donut-wrap{flex-direction:column}.analytics-donut{width:100px;height:100px;flex-basis:100px}}

.member-form input:focus,
.member-form select:focus,
.notification-form-grid input:focus,
.notification-form-grid select:focus,
.notification-form-grid textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
  outline: none;
}

.notification-groups-box {
  max-width: 1120px;
  padding: 34px;
}

.notification-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

.notification-form-grid > label,
.notification-form-grid > .group-member-grid,
.notification-form-grid > .form-span-2,
.notification-form-grid > button,
.notification-form-grid > .dash-inline-links {
  grid-column: 1 / -1;
}

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

.form-field label,
.notification-form-grid > label {
  color: #334155;
  font-weight: 700;
}

.notification-form-grid .group-member-grid {
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
}

.notification-form-grid .group-member-chip {
  background: #fff;
  border-radius: 12px;
}

.notification-form-grid > button,
.member-form > button {
  margin-top: 8px;
  min-height: 50px;
}

.panel {
  background: white;
  padding: 20px;
  border-radius: 18px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.error {
  color: #dc2626;
  font-weight: bold;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: white;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  margin: 8px 8px 16px 0;
}

.panel ul {
  padding-left: 18px;
}

.panel li {
  margin-bottom: 12px;
}

.member-group {
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  margin-top: 12px;
}

.member-group h3 {
  margin-bottom: 8px;
}

.dash-section-title-row,
.saas-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.dash-review-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.dash-review-actions form {
  margin: 0;
}

.badge.review {
  background: #334155;
}

.badge.review.pending {
  background: #f59e0b;
}

.badge.review.confirmed {
  background: #0f766e;
}

.badge.review.denied {
  background: #b91c1c;
}

.group-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}

.group-member-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 10px 12px;
}

.group-member-chip input {
  width: auto;
}

.assignment-success {
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.assignment-group-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.assignment-group-fields label,
.member-picker-heading {
  display: grid;
  gap: 6px;
}

.assignment-group-fields label > span,
.member-picker-heading label {
  color: #334155;
  font-weight: 700;
}

.member-picker-heading {
  grid-template-columns: 1fr minmax(180px, 280px);
  align-items: end;
}
.member-picker-heading.member-picker-filters { grid-template-columns:minmax(220px,1fr) minmax(150px,220px) minmax(130px,180px); gap:10px; }
.member-picker-filters label { display:grid; gap:5px; }
.member-picker-filters label>span { color:#475569; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.05em; }

.assignment-member-picker {
  max-height: 320px;
  padding: 4px;
  overflow-y: auto;
  align-content: start;
}

.assignment-member-picker .group-member-chip {
  border-radius: 12px;
}
.member-role-section { grid-column:1 / -1; min-width:0; }
.member-role-section h3 { margin:10px 2px 8px; color:#334155; font-size:13px; }
.member-role-section>div { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
.app-modal .group-member-chip { min-width:0; padding:10px 12px; display:flex; align-items:center; gap:9px; border:1px solid #dbe3ee; border-radius:9px; background:#fff; cursor:pointer; transition:border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.app-modal .group-member-chip:hover { border-color:#93c5fd; }
.app-modal .group-member-chip:has(input:checked) { border-color:#2563eb; background:#eff6ff; box-shadow:0 0 0 1px #2563eb; }
.app-modal .group-member-chip input[type="checkbox"] { width:16px!important; height:16px; margin:0; flex:0 0 16px; accent-color:#2563eb; }
.app-modal .group-member-chip>span { min-width:0; display:grid; gap:2px; }
.app-modal .group-member-chip strong { color:#172033; font-size:13px; overflow-wrap:anywhere; }
.app-modal .group-member-chip small { color:#64748b; font-size:11px; font-weight:600; }
.app-modal select { width:100%; min-height:44px!important; padding:10px 40px 10px 12px!important; border:1px solid #cbd5e1!important; border-radius:10px!important; color:#172033; background-color:#fff!important; background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%)!important; background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%!important; background-size:5px 5px,5px 5px!important; background-repeat:no-repeat!important; box-shadow:0 1px 2px rgba(15,23,42,.04); font-size:14px!important; appearance:none; }
.app-modal select:focus { border-color:#2563eb!important; outline:3px solid rgba(37,99,235,.14); }

.managed-group-selector { padding: 0 20px 4px; }
.managed-group-selector > span { display: block; margin-bottom: 8px; color: #475569; font-size: 12px; font-weight: 700; }
.managed-group-selector .directory-role-segments { width: 100%; margin: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.directory-role-segments a { min-width: 0; padding: 9px 14px; border-radius: 9px; color: #475569; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.directory-role-segments a.is-active, .directory-role-segments a:hover { color: #fff; background: #0f172a; }

.reference-table .actions-column { width: 104px; min-width: 104px; white-space: nowrap; }
.assignment-edit-action { display: inline-flex; min-width: 64px; justify-content: center; margin: 0; }
.merge-modal-icon { width: 52px; height: 52px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; color: #1d4ed8; background: #dbeafe; font-size: 28px; font-weight: 800; }
.merge-continue-option { margin: 18px 0 12px; text-align: left; }

.page-header-actions { flex-wrap: wrap; justify-content: flex-end; }
.page-header-actions > * { flex: 0 1 auto; white-space: normal; }

@media (max-width: 980px) {
  .page-topbar { align-items: stretch; flex-direction: column; }
  .page-header-actions { justify-content: flex-start; }
  .managed-group-selector .directory-role-segments { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

@media (max-width: 560px) {
  .managed-group-selector { padding-inline: 12px; }
  .managed-group-selector .directory-role-segments { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .assignment-group-fields,
  .member-picker-heading { grid-template-columns: 1fr; }
}

.group-card {
  display: grid;
  gap: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  background: #fff;
}

.group-edit-form {
  display: grid;
  gap: 12px;
}

.saas-shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: 30px 22px 56px;
}

.saas-header {
  margin-bottom: 24px;
}

.saas-header h1 {
  margin: 10px 0 8px;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.02em;
}

.saas-header p {
  margin: 0;
  max-width: 760px;
  color: #4b5563;
}

.saas-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 8px 14px;
  background: #fff;
}

.saas-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
  padding: 22px;
  margin-bottom: 20px;
}

.saas-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.saas-section-head h2 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -0.01em;
}

.saas-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #ecfeff;
  color: #155e75;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
}

.saas-chip-accent {
  background: #ecfdf5;
  color: #166534;
}

.saas-muted {
  color: #6b7280;
  margin: 0;
}

.saas-url {
  margin: 7px 0 16px;
  font-weight: 700;
  word-break: break-word;
}

.saas-inline-form {
  display: grid;
  gap: 10px;
}

.saas-inline-row {
  display: flex;
  gap: 10px;
}

.saas-inline-row input {
  flex: 1;
}

.saas-current-plan-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.saas-current-plan-price {
  margin: 8px 0 16px;
  font-size: 20px;
  font-weight: 700;
}

.saas-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.saas-usage-grid article {
  background: linear-gradient(160deg, #f8fafc 0%, #eef2ff 100%);
  border-radius: 16px;
  padding: 14px;
  border: 1px solid #dbeafe;
}

.saas-usage-grid span {
  display: block;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  margin-bottom: 6px;
}

.saas-usage-grid small {
  color: #475569;
}

.saas-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.saas-plan-card {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px;
  background: radial-gradient(circle at top right, #f0f9ff, #ffffff 52%);
  display: grid;
  gap: 12px;
}

.saas-plan-card-active {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
}

.saas-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.saas-plan-top h3 {
  margin: 0;
  font-size: 22px;
}

.saas-plan-price {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.saas-plan-price small {
  font-size: 14px;
  color: #6b7280;
  margin-left: 2px;
}

.saas-plan-features {
  margin: 0;
  padding-left: 18px;
  color: #1f2937;
  display: grid;
  gap: 6px;
}
.detailed-plan-grid{align-items:stretch}.detailed-plan-grid .saas-plan-card{grid-template-rows:auto auto auto 1fr auto}.saas-plan-top>span{padding:4px 8px;border-radius:999px;color:#075985;background:#e0f2fe;font-size:11px;font-weight:850}.saas-plan-card dl{margin:0;padding:11px;display:grid;grid-template-columns:1fr 1fr;gap:9px;border-radius:11px;background:#f8fafc}.saas-plan-card dl div{display:grid;gap:2px}.saas-plan-card dt{color:#64748b;font-size:10px;font-weight:800;text-transform:uppercase}.saas-plan-card dd{margin:0;font-weight:800}.saas-plan-features{padding:0}.saas-plan-features>strong{margin-bottom:2px}.saas-plan-features>span{font-size:13px}.saas-plan-features .included{color:#15803d;font-weight:750}.saas-plan-features .not-included{color:#dc2626;font-weight:750}.saas-plan-features>span>b{display:inline-block;min-width:14px;color:inherit}.feature-price-detail{color:#1d4ed8!important;font-weight:750}

.saas-full-btn {
  width: 100%;
}

.saas-code-block {
  white-space: pre-wrap;
  word-break: break-word;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  margin: 10px 0;
  font-size: 13px;
}

.saas-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.saas-form-stack {
  display: grid;
  gap: 10px;
}

.saas-device-list,
.saas-camera-list {
  display: grid;
  gap: 14px;
}

.saas-device-card,
.saas-camera-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

.saas-device-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.saas-device-title-row h3,
.saas-camera-card h3 {
  margin: 0;
}

.saas-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.saas-action-row form {
  margin: 0;
}

.saas-btn-danger {
  background: #991b1b;
}

.saas-device-settings {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed #d1d5db;
}

.saas-device-settings h4 {
  margin: 0 0 6px;
}

.saas-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.saas-toggle-row input[type="checkbox"] {
  width: auto;
}

.saas-advanced > summary {
  cursor: pointer;
  margin-bottom: 10px;
}

.saas-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.saas-form-grid > .saas-toggle-row,
.saas-form-grid-btn {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .saas-grid-2,
  .saas-form-grid,
  .saas-usage-grid {
    grid-template-columns: 1fr;
  }

  .saas-shell {
    padding: 20px 14px 44px;
  }
}

@media (max-width: 680px) {
  .saas-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .saas-inline-row {
    flex-direction: column;
  }

  .saas-action-row form,
  .saas-action-row button {
    width: 100%;
  }
}

/* Dashboard refresh */
body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  background: radial-gradient(
    circle at top,
    #eff6ff 0%,
    #f8fafc 40%,
    #f1f5f9 100%
  );
}

.dashboard-layout { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.page-with-sidebar { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar-page-content { min-width: 0; width: 100%; }
.dash-sidebar { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: 26px 18px; background: #0f172a; color: #fff; display: flex; flex-direction: column; }
.dash-brand { color: #fff; font-size: 20px; font-weight: 800; text-decoration: none; padding: 4px 10px 24px; }
.dash-nav { display: grid; gap: 6px; }
.dash-nav a { color: #cbd5e1; text-decoration: none; padding: 11px 12px; border-radius: 10px; font-weight: 700; }
.dash-nav a:hover, .dash-nav a.active { color: #fff; background: #1e293b; }
.dash-sidebar-user { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid #334155; display: grid; gap: 6px; }
.dash-sidebar-user span { color: #94a3b8; font-size: 12px; }
.dash-sidebar-user form, .dash-sidebar-user button { width: 100%; margin: 4px 0 0; }
.dash-eyebrow { margin: 0; color: #64748b; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; }

.dash-shell {
  width: min(1160px, calc(100% - 44px));
  margin: 0 auto;
  padding: 22px;
}

.data-table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.data-table th { text-align: left; padding: 12px; color: #475569; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #cbd5e1; }
.data-table td { padding: 14px 12px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.data-table tbody tr:hover { background: #f8fafc; }
.table-chip { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #e0f2fe; color: #075985; font-size: 12px; font-weight: 800; }
.table-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.table-actions form { margin: 0; }
.attendance-page { max-width: 1280px; margin: 0 auto; padding: 28px 20px; }
.onboarding-banner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px; margin-bottom: 20px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #1d4ed8, #4338ca); box-shadow: 0 18px 35px rgba(37, 99, 235, .2); }
.onboarding-banner h2, .onboarding-banner p { margin: 5px 0; }
.onboarding-banner .dash-eyebrow { color: #bfdbfe; }
.onboarding-banner-action { display: grid; justify-items: end; gap: 9px; }
.onboarding-banner-action strong { font-size: 28px; }
.onboarding-banner-action .button-link { background: #fff; color: #1e3a8a; }
.onboarding-banner .onboarding-banner-continue { margin: 0; border-color: #fff; color: #1e3a8a; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, .2); }
.onboarding-banner .onboarding-banner-continue:visited { color: #1e3a8a; }
.onboarding-shell { max-width: 1040px; margin: 0 auto; padding: 40px 20px 70px; }
.onboarding-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.onboarding-header h1 { margin: 6px 0; font-size: clamp(32px, 5vw, 48px); }
.onboarding-header p { color: #64748b; max-width: 680px; }
.onboarding-progress-card { padding: 20px; border: 1px solid #dbeafe; border-radius: 18px; background: #fff; margin-bottom: 22px; }
.onboarding-progress-copy { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; color: #475569; }
.onboarding-progress-copy strong { color: #1d4ed8; font-size: 28px; }
.onboarding-progress-track { height: 10px; overflow: hidden; border-radius: 99px; background: #e2e8f0; }
.onboarding-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #4f46e5); }
.onboarding-steps { display: grid; gap: 14px; }
.onboarding-step { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; }
.onboarding-step.complete { border-color: #bbf7d0; background: #f0fdf4; }
.onboarding-step.disabled { opacity: .62; }
.onboarding-step.disabled .onboarding-step-action { cursor: not-allowed; color: #64748b; background: #e2e8f0; box-shadow: none; }
.onboarding-step-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2563eb; font-weight: 800; }
.onboarding-step.complete .onboarding-step-number { background: #16a34a; }
.onboarding-step-copy h2, .onboarding-step-copy p { margin: 0; }
.onboarding-step-copy p { margin-top: 6px; color: #64748b; }
.onboarding-staff-form { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: end; gap: 12px; margin-top: 16px; }
.onboarding-staff-form label { display: grid; gap: 6px; color: #475569; font-size: 13px; font-weight: 700; }
.onboarding-staff-form select, .onboarding-staff-form button, .onboarding-add-admin { min-height: 46px; }
.onboarding-add-admin { align-self: end; display: inline-flex; align-items: center; justify-content: center; height: 46px; margin: 0; white-space: nowrap; }
.onboarding-step-copy > .onboarding-add-admin { width: max-content; margin-top: 16px; }
.group-add-members-action { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.group-add-members-action .inline-link-button { width:max-content; padding:0; }
.group-add-members-action small { color:#64748b; }
.onboarding-step-action { min-width: 150px; text-align: center; }
.onboarding-step-heading { display: flex; align-items: center; gap: 10px; }
.onboarding-step-heading span { padding: 4px 8px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.inline-link-button { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; color: #2563eb; background: transparent; box-shadow: none; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.modal-field-help { grid-column: 1 / -1; margin: -4px 0 4px; }
.onboarding-step.complete .onboarding-step-heading span { color: #166534; background: #dcfce7; }
.onboarding-finished { margin-top: 24px; padding: 28px; text-align: center; border-radius: 20px; background: #052e16; color: #fff; }

.dash-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
}

.dash-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #f8fafc;
  text-decoration: none;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 700;
}

.dash-hero {
  background: linear-gradient(145deg, #ffffff 0%, #eef2ff 100%);
  border: 1px solid #dbeafe;
  border-radius: 24px;
  padding: 26px;
  margin-bottom: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.dash-hero h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 50px);
  letter-spacing: -0.03em;
}

.dash-hero p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 15px;
}

.dash-meta-row {
  margin-top: 14px;
}

.dash-role-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  background: #cffafe;
  color: #155e75;
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}

.dash-stat-grid {
  margin-bottom: 20px;
}

.dash-stat-card {
  border: 1px solid #e5e7eb;
  background: linear-gradient(160deg, #ffffff 0%, #eff6ff 100%);
}

.dash-panel {
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 22px;
}

.dash-panel-admin {
  background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%);
}

.dash-action-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-telegram-form {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.dash-telegram-form button {
  min-width: 220px;
}

.dash-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  gap: 10px;
}

.dash-list-item {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fafafa;
}

.dash-inline-links {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-inline-links form {
  margin: 0;
}

.dash-btn-danger {
  background: #b91c1c;
}

.dash-logs h2 {
  margin-bottom: 14px;
}

.dash-log-card {
  border: 1px solid #e5e7eb;
}

@media (max-width: 640px) {
  .family-group-create-form {
    grid-template-columns: 1fr;
  }
  .member-role-segments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-form,
  .notification-form-grid {
    grid-template-columns: 1fr !important;
  }

  .member-form-box,
  .notification-groups-box {
    margin: 20px 12px;
    padding: 20px;
  }

  .dashboard-layout { display: block; }
  .page-with-sidebar { display: block; }
  .dash-sidebar { position: static; height: auto; padding: 16px; }
  .dash-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-sidebar-user { margin-top: 16px; }
  .onboarding-banner, .onboarding-header { flex-direction: column; align-items: stretch; }
  .onboarding-banner-action { justify-items: start; }
  .onboarding-step { grid-template-columns: 42px 1fr; }
  .onboarding-step > .button-link { grid-column: 1 / -1; text-align: center; }
  .onboarding-staff-form { grid-template-columns: 1fr; }
  .dash-shell {
    padding: 16px;
  }

  .dash-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .dash-telegram-form {
    grid-template-columns: 1fr;
  }

  .dash-telegram-form button {
    min-width: 0;
  }

  .dash-link-pill,
  .dash-topbar form,
  .dash-topbar button {
    width: 100%;
  }
}

@media (min-width: 641px) {
  .page-with-sidebar, .dashboard-layout { grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr); grid-template-areas: "sidebar navbar" "sidebar content"; transition: grid-template-columns .2s ease; }
  body.sidebar-collapsed .page-with-sidebar, body.sidebar-collapsed .dashboard-layout { grid-template-columns: 72px minmax(0, 1fr); }
  .dash-sidebar { position: sticky; top: 0; width: 100%; height: 100vh; padding: 20px 14px; background: linear-gradient(180deg, #0b1220 0%, #111c30 100%); }
  .dash-brand { display: flex; align-items: center; gap: 11px; padding: 0 4px; }
  .dash-nav a { display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 10px 12px; }
  .dash-nav a:hover { background: rgba(51, 65, 85, .75); }
  .dash-nav a.active { background: linear-gradient(90deg, #2563eb, #4f46e5); }
  .dash-sidebar-user { grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; padding: 16px 4px 0; }
  body.sidebar-collapsed .dash-sidebar-user { grid-template-columns: 1fr; }
  body.sidebar-collapsed .dash-sidebar-user form { width: auto; grid-column: 1; }
  body.sidebar-collapsed .dash-sidebar-user button { width: 42px; padding-inline: 0; }
}

.dash-sidebar { grid-area: sidebar; }
#navigation-root { display: contents; }
.mobile-sidebar-backdrop { display: none; }

/* Keep expanded menus scrollable within the available sidebar height. */
.dash-sidebar { overflow: hidden; padding-bottom: 0; }
.sidebar-header { flex: 0 0 auto; }
.dash-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  grid-auto-rows: max-content;
  padding-right: 2px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #64748b transparent;
}
.dash-nav::-webkit-scrollbar { width: 6px; }
.dash-nav::-webkit-scrollbar-thumb { background: #64748b; border-radius: 3px; }
.dash-nav::-webkit-scrollbar-track { background: transparent; }
.dash-nav a { min-width: 0; max-width: 100%; overflow: hidden; }
.dash-nav a > span:first-child { flex: 0 0 20px; text-align: center; }
.dash-nav a .sidebar-label {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.dash-nav-group { display: grid; grid-auto-rows: max-content; gap: 4px; }
.dash-nav-group-title { width:100%; min-height: 44px; padding: 9px 12px; display: flex; align-items: center; gap: 13px; border:0; border-radius:10px; color: #cbd5e1; background:transparent; font-weight: 850; text-align:left; cursor:pointer; }
.dash-nav-group-title:hover { color:#fff; background:rgba(51,65,85,.75); }
.dash-nav-group-title > span:first-child { flex: 0 0 20px; text-align: center; }
.submenu-arrow { margin-left:auto; font-size:22px; line-height:1; transition:transform .2s ease; }
.dash-nav-group.is-open .submenu-arrow { transform:rotate(90deg); }
.dash-subnav { display: grid; grid-auto-rows: max-content; gap: 4px; padding-left: 20px; }
.dash-subnav a { min-height: 42px; font-size: 13px; }
body.sidebar-collapsed .dash-nav-group-title { justify-content: center; padding-inline: 10px; }
body.sidebar-collapsed .dash-subnav { padding-left: 0; }
.sidebar-theme-toggle { width:100%; min-height:44px; margin:8px 0; padding:10px 12px; display:flex; align-items:center; gap:13px; border:1px solid #334155; border-radius:10px; color:#cbd5e1; background:#1e293b; font-weight:800; cursor:pointer; }
.sidebar-theme-toggle > span:first-child { flex:0 0 20px; font-size:18px; text-align:center; }
body.sidebar-collapsed .sidebar-theme-toggle { justify-content:center; padding-inline:10px; }
.dash-sidebar-user {
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex: 0 0 auto;
  margin-top: 0;
  padding-bottom: 12px;
  background: #111c30;
}

/* Keep the desktop rail visually continuous on long pages while the menu scrolls. */
@media (min-width: 641px) {
  .page-with-sidebar, .dashboard-layout { background: #0b1220; }
  .sidebar-page-content, .dash-shell { min-height: calc(100vh - 72px); background: #f4f7fb; }
  .dash-sidebar { height: 100dvh; max-height: 100dvh; }
}
.app-navbar { grid-area: navbar; position: sticky; top: 0; z-index: 18; min-width: 0; height: 72px; padding: 0 clamp(18px, 3vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e5e7eb; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); }
.sidebar-page-content, .dash-shell { grid-area: content; }
.app-navbar-left, .app-navbar-actions, .navbar-profile { display: flex; align-items: center; }
.app-navbar-left { gap: 13px; }
.navbar-menu-button, .navbar-icon-button { position: relative; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 1px solid #e5e7eb; border-radius: 10px; color: #475569; background: #fff; }
.navbar-menu-button svg, .navbar-icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navbar-context { color: #64748b; font-size: 13px; font-weight: 700; }
.app-navbar-actions { gap: 14px; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #ef4444; }
.navbar-notification-menu { position: relative; }
.notification-count { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #ef4444; font-size: 10px; font-weight: 900; }
.notification-dropdown { position: absolute; z-index: 45; top: calc(100% + 10px); right: 0; width: min(390px, calc(100vw - 24px)); max-height: min(540px, calc(100vh - 90px)); overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px rgba(15,23,42,.2); }
.notification-dropdown > header { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e2e8f0; }
.notification-dropdown > header button { padding: 7px 9px; font-size: 11px; }
.notification-dropdown > p { padding: 22px 16px; color: #64748b; text-align: center; }
.notification-list { max-height: 450px; overflow-y: auto; }
.notification-item { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: start; border-bottom: 1px solid #eef2f7; }
.notification-item.is-unread { background: #eff6ff; }
.notification-item > a { padding: 13px 8px 13px 16px; display: grid; gap: 4px; color: #334155; text-decoration: none; }
.notification-item > button { width: 28px; height: 28px; margin: 9px 6px 0 0; padding: 0; color: #64748b; background: transparent; }
.notification-list a span { color: #64748b; font-size: 12px; line-height: 1.4; }
.notification-list a small { color: #94a3b8; font-size: 10px; }
.app-toast { position: fixed; z-index: 100; top: 18px; right: 18px; width: min(420px, calc(100vw - 28px)); padding: 14px; display: grid; grid-template-columns: 30px minmax(0,1fr) 28px; align-items: center; gap: 10px; border: 1px solid; border-radius: 14px; color: #fff; box-shadow: 0 20px 55px rgba(15,23,42,.25); animation: toast-in .2s ease-out; }
.app-toast.success { border-color: #15803d; background: #166534; }
.app-toast.error { border-color: #b91c1c; background: #991b1b; }
.app-toast > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); font-weight: 900; }
.app-toast p { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.45; }
.app-toast button { width: 28px; height: 28px; margin: 0; padding: 0; color: #fff; background: transparent; font-size: 20px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.navbar-divider { width: 1px; height: 34px; background: #e5e7eb; }
.navbar-profile { gap: 10px; }
.navbar-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #111827, #475569); font-weight: 800; }
.navbar-profile-copy { display: grid; gap: 2px; }
.navbar-profile-copy strong { font-size: 13px; }
.navbar-profile-copy small { color: #94a3b8; font-size: 11px; }
.navbar-profile-menu { position: relative; }
.navbar-profile { padding: 4px; border: 0; color: inherit; background: transparent; cursor: pointer; }
.navbar-profile-dropdown { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: 190px; padding: 7px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 18px 45px rgba(15, 23, 42, .18); }
.navbar-profile-dropdown a, .navbar-profile-dropdown button { width: 100%; min-height: 40px; margin: 0; padding: 9px 11px; display: flex; align-items: center; border: 0; border-radius: 8px; color: #334155; background: transparent; text-decoration: none; font: inherit; font-size: 13px; font-weight: 700; }
.navbar-profile-dropdown .profile-theme-toggle { justify-content:flex-start; gap:9px; }
.navbar-profile-dropdown .profile-theme-toggle span { width:18px; color:#64748b; font-size:16px; text-align:center; }
.navbar-profile-dropdown .profile-theme-toggle:hover { color:#1d4ed8; background:#eff6ff; transform:none; }
.navbar-profile-dropdown form { margin-top:4px; padding-top:4px; border-top:1px solid #e2e8f0; }
:root[data-theme="dark"] .navbar-profile-dropdown { border-color:#334155; background:#111827; }
:root[data-theme="dark"] .navbar-profile-dropdown a,:root[data-theme="dark"] .navbar-profile-dropdown button { color:#e2e8f0; }
:root[data-theme="dark"] .navbar-profile-dropdown .profile-theme-toggle:hover { color:#bfdbfe; background:#1e293b; }
:root[data-theme="dark"] .navbar-profile-dropdown form { border-color:#334155; }
.navbar-profile-dropdown a:hover, .navbar-profile-dropdown button:hover { background: #f1f5f9; }
.navbar-profile-dropdown form { margin: 0; }
.impersonation-banner { position:fixed; z-index:90; right:22px; bottom:22px; max-width:min(480px,calc(100vw - 44px)); padding:11px 12px 11px 15px; display:flex; align-items:center; gap:16px; border:1px solid #f59e0b; border-radius:14px; color:#78350f; background:#fffbeb; box-shadow:0 16px 38px rgba(120,53,15,.22); }
.impersonation-banner>span { min-width:0; display:grid; gap:2px; }
.impersonation-banner strong { font-size:13px; }
.impersonation-banner small { overflow:hidden; color:#92400e; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.impersonation-banner form { margin:0; }
.impersonation-banner button { width:auto; min-height:38px; margin:0; padding:8px 13px; border-color:#b45309; color:#fff; background:#b45309; white-space:nowrap; }
.impersonation-filters { display:flex; align-items:end; flex-wrap:wrap; gap:10px; }
.impersonation-filters label { min-width:190px; display:grid; gap:5px; color:#475569; font-size:12px; font-weight:800; }
.impersonation-filters select { min-height:42px; padding:9px 34px 9px 11px; border:1px solid #cbd5e1; border-radius:10px; color:#172033; background:#fff; }
.impersonation-table form { margin:0; }
.impersonation-table .app-button { width:auto; min-width:118px; }
@media(max-width:760px){.impersonation-banner{right:12px;bottom:12px;left:12px;max-width:none;justify-content:space-between}.impersonation-filters,.impersonation-filters label{width:100%}.impersonation-table .app-button{width:100%}}
:root[data-theme="dark"] .impersonation-banner { color:#fde68a; border-color:#d97706; background:#451a03; }
:root[data-theme="dark"] .impersonation-banner small { color:#fcd34d; }
:root[data-theme="dark"] .impersonation-filters label { color:#cbd5e1; }
:root[data-theme="dark"] .impersonation-filters select { color:#f8fafc; border-color:#475569; background:#0f172a; }
.settings-section-heading { padding: 22px 22px 0; }
.settings-section-heading h2, .settings-section-heading p { margin: 0 0 7px; }
.settings-section-heading p { color: #64748b; }
.method-toggle-card.is-locked { opacity: .68; background: #f1f5f9; }
.method-toggle-card em { color: #b45309; font-size: 11px; font-style: normal; font-weight: 700; }
.settings-school-picker, .settings-notice { max-width: 760px; margin: 0 auto 22px; }
.settings-school-picker form { display: grid; gap: 12px; }
.attendance-method-settings { padding: 20px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.attendance-method-card { padding: 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; }
.attendance-method-card.is-locked { opacity: .68; }
.attendance-method-switch { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.attendance-method-switch > span { display: grid; gap: 4px; }
.attendance-method-switch small { color: #64748b; }
.attendance-method-switch em { color: #b45309; font-size: 11px; font-style: normal; font-weight: 700; }
.attendance-method-switch > input { width: 20px; height: 20px; flex: 0 0 auto; }
.attendance-method-card fieldset { margin: 15px 0 0; padding: 12px; border: 1px solid #dbe2ea; border-radius: 10px; }
.attendance-method-card legend { padding: 0 5px; color: #475569; font-size: 12px; font-weight: 800; }
.attendance-role-checkboxes { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.attendance-role-checkboxes label { display: inline-flex; align-items: center; gap: 6px; color: #334155; font-size: 12px; font-weight: 700; }
.feature-request-button { width: fit-content; margin-top: 7px; padding: 8px 10px; font-size: 12px; }
.self-attendance-actions { display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 10px !important; }
.self-attendance-actions button { width: auto; min-width: 108px; min-height: 38px; margin: 0; padding: 9px 16px; font-size: 13px; }
.messages-page { display: grid; gap: 20px; }
.messages-page > .panel, .messages-page > .page-topbar { width: 100%; max-width: 1100px; margin: 0 auto; }
.message-audience-panel > div { display: flex; flex-wrap: wrap; gap: 10px; }
.message-contact-section { width: 100%; max-width: 1100px; margin: 0 auto; }
.message-contact-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 10px; }
.message-contact-grid article { padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.message-contact-grid article > div { display: grid; gap: 3px; }
.message-contact-grid small { color: #64748b; text-transform: capitalize; }
.message-contact-grid button { width: auto; min-height: 34px; padding: 7px 11px; font-size: 12px; }
.message-compose textarea { min-height: 130px; }
.message-compose fieldset { max-height: 260px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
.message-member-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.message-member-picker label { display: flex; align-items: center; gap: 8px; }
.message-member-picker label > span { display: grid; }
.message-member-picker small { color: #64748b; text-transform: capitalize; }
.message-history { display: grid; gap: 8px; }
.message-history article { padding: 11px 0; display: grid; gap: 3px; border-bottom: 1px solid #e2e8f0; }
.message-history small { color: #64748b; }
.message-directory { padding: 0; overflow: hidden; }
.message-directory .table-toolbar input { width: min(420px,100%); }
.message-role-segments { grid-template-columns: repeat(5,minmax(0,1fr)); width: min(720px,calc(100% - 40px)); margin: 16px 20px; }
.message-directory-table { min-width: 760px; }
.message-directory-table .role-badge { text-transform: capitalize; }
.message-row-action { width: auto; min-height: 34px; padding: 7px 12px; font-size: 12px; }
.message-empty { margin: 0; padding: 26px; color: #64748b; text-align: center; }

@media (max-width: 640px) {
  .page-with-sidebar, .dashboard-layout { display: grid; grid-template-columns: 1fr; grid-template-rows: 64px minmax(0, 1fr); grid-template-areas: "navbar" "content"; }
  .app-navbar { height: 64px; }
  .dash-sidebar { position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); height: 100vh; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 20px 0 50px rgba(15, 23, 42, .25); }
  body.mobile-sidebar-open .dash-sidebar { transform: translateX(0); }
  .navbar-context, .navbar-profile-copy, .navbar-divider { display: none; }
}

.crud-page { padding: 30px clamp(18px, 4vw, 48px) 60px; }
.crud-page-header, .crud-table-shell, .crud-alert { max-width: 1320px; margin-left: auto; margin-right: auto; }
.page-header-actions { display: flex; align-items: center; gap: 10px; }
.page-header-actions .button-link { margin: 0; text-align: center; text-decoration: none; }
.secondary-action.button-link { color: #334155; background: #fff; }
.crud-table-shell { padding: 0; overflow: visible; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 12px 35px rgba(15, 23, 42, .06); }
.crud-table-shell > .data-table-wrap { overflow: visible; }
.reference-table { min-width: 960px; }
.reference-table th { padding: 0; background: #f8fafc; }
.reference-table td { padding: 15px 16px; }
.entity-cell { display: inline-flex; align-items: center; gap: 11px; }
.entity-cell > span:last-child { display: grid; gap: 3px; }
.entity-cell small { color: #94a3b8; font-size: 11px; }
.actions-column { width: 70px; text-align: center !important; }
.crud-row-actions { position: relative; display: inline-flex; }
.crud-row-menu-toggle { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 9px; color: #475569; background: transparent; font-size: 21px; line-height: 1; }
.crud-row-menu-toggle:hover { background: #f1f5f9; }
.crud-row-menu { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; width: 190px; padding: 7px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 16px 35px rgba(15, 23, 42, .16); text-align: left; }
.crud-row-menu a, .crud-row-menu button { width: 100%; min-height: 36px; margin: 0; padding: 8px 10px; display: flex; align-items: center; border-radius: 7px; color: #334155; background: transparent; text-decoration: none; font: inherit; font-size: 13px; font-weight: 600; }
.crud-row-menu a:hover, .crud-row-menu button:hover { background: #f1f5f9; }
.crud-row-menu form { display: block; margin: 0; }
.crud-row-menu .danger-menu-item { color: #b91c1c; }
.crud-form-card { max-width: 960px; margin: 0 auto; padding: clamp(22px, 4vw, 36px); border: 1px solid #e2e8f0; border-radius: 20px; background: #fff; box-shadow: 0 12px 35px rgba(15, 23, 42, .06); }
.crud-form-header { margin-bottom: 24px; }
.crud-form-header h1 { margin: 4px 0; }
.crud-form-header p { margin: 0; color: #64748b; }
.crud-form-card > form { display: grid; gap: 14px; }
.crud-form-card > form > label:not(.group-member-chip) { color: #334155; font-weight: 700; }
.sidebar-collapse-button { display: none; }
.crud-page > .dash-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-line { display: grid; gap: 2px; margin-bottom: 6px; }
.admin-line small { color: #94a3b8; font-size: 11px; }
.method-settings-card, .assignments-panel { max-width: 1320px; margin: 0 auto 22px; padding: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 12px 35px rgba(15, 23, 42, .06); }
.method-toggle-grid { padding: 20px 22px; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
.method-toggle-card { min-height: 76px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #e2e8f0; border-radius: 13px; background: #f8fafc; }
.method-toggle-card > span { display: grid; gap: 4px; text-align: left; }
.method-toggle-card small { color: #64748b; line-height: 1.4; }
.method-toggle-card input[type="checkbox"] { width: 20px; min-width: 20px; height: 20px; }
.method-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.student-visitor-access { padding: 20px 22px; display: grid; gap: 12px; }
.access-master-toggle { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #e2e8f0; border-radius: 13px; background: #f8fafc; }
.access-master-toggle > span { display: grid; gap: 4px; }
.access-master-toggle small { color: #64748b; }
.access-master-toggle input { width: 20px; height: 20px; }
.student-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.student-access-grid fieldset { max-height: 280px; margin: 0; padding: 14px; overflow-y: auto; display: grid; align-content: start; gap: 8px; border: 1px solid #e2e8f0; border-radius: 13px; }
.student-access-grid fieldset:disabled { opacity: .55; }
.student-access-grid legend { padding: 0 7px; font-weight: 800; }
.student-access-grid label { padding: 8px 10px; display: flex; align-items: center; gap: 9px; border-radius: 9px; background: #f8fafc; }
.assignments-panel { padding: 22px; }
.assignment-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.assignment-list > span { padding: 12px 14px; display: grid; gap: 4px; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; }
.assignment-list small { color: #64748b; }
.flag-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #4338ca; background: #eef2ff; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.settings-grid .saas-panel { margin: 0; }
.classroom-media-archive { padding:18px 22px 22px; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.classroom-media-archive article { padding:12px; display:grid; gap:10px; border:1px solid #dbe3ee; border-radius:14px; background:#f8fafc; }
.classroom-media-archive article div { display:grid; gap:3px; }
.classroom-media-archive article small { color:#64748b; }
.classroom-media-archive video,.classroom-media-archive img { width:100%; max-height:220px; border-radius:10px; background:#0f172a; object-fit:cover; }
.api-key-notice { max-width: 1320px; margin: 0 auto 22px; display: grid; grid-template-columns: minmax(220px, .55fr) 1fr; align-items: center; gap: 20px; border-color: #bfdbfe; background: #eff6ff; }
.api-key-notice h2, .api-key-notice p { margin: 4px 0; }
.device-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #1d4ed8; background: #dbeafe; }

@media (max-width: 760px) {
  .mobile-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 19; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(15, 23, 42, .45); }
  .crud-page { padding: 18px 12px 40px; }
  .page-header-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .page-header-actions .button-link { width: 100%; }
  .method-toggle-grid { grid-template-columns: 1fr; }
  .attendance-method-settings { grid-template-columns: 1fr; }
  .message-member-picker { grid-template-columns: 1fr; }
  .message-role-segments { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-grid, .api-key-notice { grid-template-columns: 1fr; }
  .student-access-grid { grid-template-columns: 1fr; }
  .crud-page > .dash-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) { .crud-table-shell > .data-table-wrap { overflow-x: auto; overflow-y: hidden; } }

@media (max-width: 480px) { .crud-page > .dash-stat-grid { grid-template-columns: 1fr; } }

/* Keep wide CRUD tables inside their own scroller on narrow screens. */
html, body { max-width: 100%; overflow-x: hidden; }
.page-topbar > div, .crud-page-header > div, .table-toolbar > div,
.groups-table-panel, .crud-table-shell, .data-table-wrap { min-width: 0; }
.page-topbar p, .crud-page-header p { overflow-wrap: anywhere; }
.classroom-body { margin: 0; min-height: 100vh; background: #eef2f7; color: #0f172a; overscroll-behavior-y:none; }
.classroom-body.whiteboard-drawing { overflow:hidden!important; overscroll-behavior:none!important; touch-action:none!important; }
.classroom-startup-error { margin:16px; padding:18px; display:grid; gap:8px; border:2px solid #fca5a5; border-radius:16px; color:#7f1d1d; background:#fff7f7; }
.classroom-startup-error > div { display:flex; flex-wrap:wrap; gap:10px; }
.classroom-startup-error button,.classroom-startup-error a { padding:9px 14px; border:0; border-radius:10px; color:#fff; background:#b91c1c; font-weight:800; text-decoration:none; }
.classroom-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.mobile-classroom-tabs { display: none; }
.classroom-header { min-height:54px; padding: 6px 18px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; background:#fff; border-bottom:1px solid #dbe3ee; }
.classroom-title-block { text-align:center; }
.classroom-header h1 { margin:0; font-size:clamp(17px,1.8vw,23px); line-height:1.05; }
.classroom-header a { justify-self:start; font-size:11px; }
.classroom-header .dash-eyebrow { margin:0 0 2px; font-size:8px; line-height:1; }
.classroom-back { color: #475569; font-weight: 700; text-decoration: none; }
.classroom-status { display:flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid #dbe3ee; border-radius:999px; background:#f8fafc; font-size:11px; }
.classroom-header-actions { justify-self:end; display:flex; align-items:center; gap:7px; }
.classroom-header-actions form { margin:0; }
.classroom-end-button { padding:7px 10px; border:1px solid #991b1b; border-radius:999px; background:#dc2626; color:#fff; font-size:11px; font-weight:850; }
.classroom-end-button:hover { background:#b91c1c; }
#connection-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; }
#connection-dot.online { background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
.classroom-workspace { min-height: 0; padding: 18px; display: grid; grid-template-columns: 82px 1fr; gap: 14px; }
.whiteboard-toolbar { padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px solid #dbe3ee; border-radius: 18px; background: #fffdf2; box-shadow: 0 10px 35px rgba(15,23,42,.07); }
.classroom-main { min-width: 0; display: grid; grid-template-rows: auto auto minmax(500px, 1fr); gap: 12px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 260px)); gap: 10px; }
.video-tile { position: relative; min-height: 146px; overflow: hidden; border-radius: 16px; background: #111827; box-shadow: 0 8px 24px rgba(15,23,42,.14); }
.video-tile video { width: 100%; height: 100%; min-height: 146px; display: block; object-fit: cover; transform: scaleX(-1); }
.video-tile:not(.local-video) video { transform: none; }
.video-tile > span { position: absolute; left: 10px; bottom: 9px; padding: 4px 8px; border-radius: 8px; color: #fff; background: rgba(15,23,42,.72); font-size: 12px; font-weight: 700; }
.participant-controls { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 5px; }.participant-controls button { width: 32px; height: 30px; padding: 0; border-radius: 8px; background: rgba(15,23,42,.82); font-size: 13px; }.participant-controls button.off { background: #b91c1c; }
.inline-form { display: inline-block; margin-left: 6px; }.danger-action { padding: 9px 12px; border: 0; border-radius: 9px; color: #fff; background: #b91c1c; font-weight: 700; cursor: pointer; }
.schedule-fields { padding: 12px; display: grid; gap: 8px; border: 1px solid #dbe3ee; border-radius: 12px; background: #f8fafc; }.schedule-fields[hidden] { display: none; }.classroom-status-upcoming { color: #92400e; background: #fef3c7; }.classroom-status-live { color: #166534; background: #dcfce7; }.classroom-status-ended { color: #475569; background: #e2e8f0; }.data-table td > small { margin-top: 4px; display: block; color: #64748b; }
.active-classrooms-table [class^="classroom-status-"] { display:inline-flex; padding:4px 9px; border-radius:999px; font-size:12px; font-weight:800; text-transform:capitalize; }
.active-classrooms-panel,
.active-classrooms-panel .listing-table,
.active-classrooms-panel .data-table-wrap,
.active-classrooms-panel .data-table,
.active-classrooms-panel .data-table tbody,
.active-classrooms-panel .data-table tr,
.active-classrooms-panel .data-table td { overflow:visible!important; }
.active-classrooms-panel .data-table tbody tr:has(.table-action-trigger[aria-expanded="true"]) { position:relative; z-index:80; }
.active-classrooms-panel .data-table td:last-child { position:relative; z-index:2; }
.active-classrooms-panel .data-table tbody tr:has(.table-action-trigger[aria-expanded="true"]) td:last-child { z-index:90; }
.active-classrooms-panel .listing-toolbar,
.active-classrooms-panel .table-pagination { position:relative; z-index:1; }
.classroom-manage-actions { display:flex; align-items:center; gap:8px; }
.checkbox-card-fieldset { margin:2px 0 0; padding:12px 14px 14px; border:1px solid #dbe3ee; border-radius:14px; background:#f8fafc; }
.checkbox-card-fieldset legend { padding:0 6px; color:#172033; font-size:14px; font-weight:850; }
.checkbox-card-fieldset > small { display:block; margin:0 0 10px; color:#64748b; font-size:11px; line-height:1.35; }
.checkbox-card-fieldset > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.checkbox-card-fieldset label { min-width:0; padding:8px 9px; display:flex !important; grid-template-columns:none !important; align-items:center; justify-content:flex-start; gap:7px; border:1px solid #dbe3ee; border-radius:9px; background:#fff; cursor:pointer; }
.checkbox-card-fieldset label:has(input:checked) { border-color:#2563eb; background:#eff6ff; box-shadow:0 0 0 1px #2563eb; }
.checkbox-card-fieldset input { width:16px !important; height:16px; margin:0; flex:0 0 16px; accent-color:#2563eb; }
.checkbox-card-fieldset span { overflow:hidden; color:#334155; font-size:12px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:700px){
  .active-classrooms-panel { padding:14px; }
  .active-classrooms-panel > .data-table-wrap { overflow:visible; }
  .active-classrooms-table { min-width:0; }
  .active-classrooms-table tbody, .active-classrooms-table tr, .active-classrooms-table td { display:block; width:100%; }
  .active-classrooms-table tr { margin-top:12px; padding:14px; border:1px solid #dbe3ee; border-radius:14px; background:#fff; }
  .active-classrooms-table td { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border:0; }
  .active-classrooms-table td[data-label]::before { content:attr(data-label); color:#64748b; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
  .active-classrooms-table .classroom-entry-action { margin-top:8px; padding-top:12px; border-top:1px solid #e2e8f0; }
  .active-classrooms-table .classroom-entry-action .button-link { width:100%; padding:11px 14px; text-align:center; }
  .active-classrooms-table .classroom-manage-actions { justify-content:flex-end; }
}

.chat-attachment-policy{display:grid;gap:12px}
.chat-attachment-policy fieldset{margin:0;padding:12px;border:1px solid #dbe3ee;border-radius:12px;background:#f8fafc}
.chat-attachment-policy legend{padding:0 6px;color:#334155;font-weight:850}
.chat-attachment-policy fieldset>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:7px}
.chat-attachment-policy fieldset label{padding:8px 9px;display:flex;align-items:center;gap:7px;border:1px solid #dbe3ee;border-radius:8px;background:#fff;font-weight:750}
.chat-attachment-policy .chat-attachment-select-all{margin-bottom:9px;border-color:#93c5fd;background:#eff6ff}
.chat-attachment-policy input[type="checkbox"]{width:18px;height:18px}

@media(min-width:701px){
  .host-whiteboard-toolbar{width:70px;min-width:70px;padding:9px 7px;gap:9px}
  .host-whiteboard-toolbar .tool-button{width:44px;min-width:44px;height:44px;font-size:24px;line-height:1}
  .host-whiteboard-toolbar .whiteboard-shapes-toggle svg{width:32px;height:32px}
  .host-whiteboard-toolbar>.whiteboard-color-picker{width:46px;min-width:46px}
  .host-whiteboard-toolbar>.whiteboard-color-picker input{width:42px;height:38px}
}

.classroom-body.manual-presentation-open .classroom-shell>.classroom-header{display:none}
.classroom-body.manual-presentation-open .shared-class-manual{inset:4px}
@media(max-width:700px){
  .classroom-body.manual-presentation-open .shared-class-manual{inset:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
}

.classroom-body.manual-presentation-open .student-request-controls{position:fixed;left:50%;bottom:12px;z-index:80;width:auto;display:flex;gap:7px;transform:translateX(-50%)}
.classroom-body.manual-presentation-open .student-request-controls button{width:auto;min-height:40px;padding:8px 12px;white-space:nowrap}
.classroom-body.manual-presentation-open #whiteboard-pointer-tool{position:fixed;right:12px;bottom:12px;z-index:81;width:auto;min-width:44px;height:40px;margin:0;padding:7px 10px;background:#fff;box-shadow:0 3px 14px rgba(15,23,42,.28)}
.classroom-body.manual-presentation-open .student-manual-view .shared-class-manual-pages{padding-bottom:64px}
.manual-page-stage[data-manual-tool="hand"]{touch-action:none;cursor:grab}
.manual-page-stage[data-manual-tool="hand"].is-panning{cursor:grabbing}
.manual-teacher-pointer{width:5px;height:34px;transform:translate(-50%,0) rotate(-38deg);transform-origin:50% 0}
.manual-teacher-pointer::after{top:-6px}
@media(max-width:700px){
  .classroom-body.manual-presentation-open .student-request-controls{left:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 7px);max-width:calc(100vw - 68px);transform:none}
  .classroom-body.manual-presentation-open .student-request-controls button{min-height:36px;padding:6px 8px;font-size:10px}
  .classroom-body.manual-presentation-open #whiteboard-pointer-tool{right:7px;bottom:calc(env(safe-area-inset-bottom,0px) + 7px);height:36px;min-width:42px;padding:5px}
}

/* Center the marker itself on the shared document coordinate. */
.manual-teacher-pointer{width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:#ef4444;transform:translate(-50%,-50%);box-shadow:0 1px 7px rgba(0,0,0,.65)}
.manual-teacher-pointer::after{display:none}

#manual-pointer-request{display:none}
.classroom-body.manual-presentation-open #whiteboard-pointer-tool{display:none!important}
.classroom-body.manual-presentation-open #manual-pointer-request{position:fixed;right:12px;bottom:12px;z-index:82;width:44px;min-width:44px;height:40px;margin:0;padding:5px;display:grid;place-items:center;border-radius:10px;background:#fff;box-shadow:0 3px 14px rgba(15,23,42,.28);font-size:22px}
#manual-pointer-request.pointer-locked{filter:grayscale(1);color:#94a3b8;background:#e2e8f0}
#manual-pointer-request.pointer-locked::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:3px;border-radius:3px;background:#dc2626;transform:rotate(-45deg);box-shadow:0 0 0 1px rgba(255,255,255,.8)}
#manual-pointer-request.request-pending{animation:pointer-request-pulse 1s ease-in-out infinite}
.classroom-body.manual-presentation-open .classroom-requests{position:fixed;top:48px;right:10px;z-index:83;width:min(520px,calc(100vw - 20px));max-height:calc(100dvh - 60px);overflow:auto;box-shadow:0 8px 28px rgba(15,23,42,.3)}
@media(max-width:700px){
  .classroom-body.manual-presentation-open #manual-pointer-request{right:7px;bottom:calc(env(safe-area-inset-bottom,0px) + 7px);height:36px;min-width:42px;font-size:19px}
  .classroom-body.manual-presentation-open .classroom-requests{top:7px;right:7px;width:calc(100vw - 14px);max-height:45dvh}
}

/* Keep all three student manual actions together, clear of the chat button. */
.classroom-body.manual-presentation-open .student-request-controls{display:grid;grid-template-columns:repeat(3,minmax(0,auto));align-items:center}
.classroom-body.manual-presentation-open #manual-pointer-request{position:relative;inset:auto;z-index:auto;width:auto;min-width:42px;height:auto;min-height:40px;margin:0;padding:8px 12px;box-shadow:none;font-size:inherit}

/* A slash means the teacher's global student-pointer access is disabled. */
#toggle-student-manual-pointers{position:relative;min-width:34px!important;width:34px!important;padding:0!important;font-size:17px!important}
#toggle-student-manual-pointers.pointer-locked::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:3px;border-radius:3px;background:#dc2626;transform:rotate(-45deg);box-shadow:0 0 0 1px rgba(255,255,255,.85)}

/* Compact, readable request cards over a shared manual. */
.classroom-body.manual-presentation-open .classroom-requests{top:42px;width:min(390px,calc(100vw - 14px));max-height:190px;padding:5px 7px;border-radius:10px}
.classroom-body.manual-presentation-open .classroom-requests>strong{margin-bottom:3px;font-size:12px}
.classroom-body.manual-presentation-open .classroom-request-grid{grid-template-columns:1fr;gap:4px}
.classroom-body.manual-presentation-open .classroom-request-tile{padding:5px 7px;display:grid;grid-template-columns:minmax(90px,140px) minmax(0,1fr);align-items:center;gap:7px}
.classroom-body.manual-presentation-open .classroom-request-tile>strong{margin:0;font-size:11px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.classroom-body.manual-presentation-open .classroom-request-tile>div{gap:3px}
.classroom-body.manual-presentation-open .classroom-request-tile button{width:24px;height:24px}
@media(max-width:700px){
  .classroom-body.manual-presentation-open .student-request-controls{left:7px;right:7px;width:calc(100vw - 14px);max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));transform:none}
  .classroom-body.manual-presentation-open #manual-pointer-request{width:100%;min-height:36px;padding:6px 8px;font-size:10px}
  .classroom-body.manual-presentation-open .classroom-requests{top:5px;right:5px;width:calc(100vw - 10px);max-height:155px}
}

@media(max-width:700px){
  .classroom-body.manual-presentation-open .student-request-controls{top:calc(env(safe-area-inset-top,0px) + 8px);right:8px;bottom:auto;left:8px;width:auto;max-width:none;padding:5px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;gap:5px;transform:none;box-shadow:0 4px 16px rgba(15,23,42,.2)}
  .classroom-body.manual-presentation-open .student-request-controls button{width:100%;min-width:0;max-width:none;min-height:42px;padding:7px 5px;overflow:hidden;font-size:clamp(10px,3vw,13px);line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
  .classroom-body.manual-presentation-open #manual-pointer-request{grid-column:auto;grid-row:auto;width:100%;min-width:0;min-height:42px;padding:7px 5px;justify-self:stretch;font-size:clamp(10px,3vw,13px)}
  .classroom-body.manual-presentation-open .student-manual-view .shared-class-manual-pages{padding-top:64px;padding-bottom:8px}
}

.chat-image-size-limit{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #dbe3ee;border-radius:12px;background:#f8fafc}
.chat-image-size-limit>span:first-child{display:grid;gap:3px}
.chat-image-size-limit small{color:#64748b}
.chat-image-size-limit>span:last-child{display:flex;align-items:center;gap:7px;font-weight:850;white-space:nowrap}
.chat-image-size-limit input{width:86px;padding:9px;border:1px solid #cbd5e1;border-radius:8px}
.school-name-settings>label{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,320px) minmax(360px,1fr);align-items:center;gap:24px;padding:16px 18px;border:1px solid #dbe3ee;border-radius:12px;background:#f8fafc}
.school-name-settings>label>span{display:grid;gap:3px}
.school-name-settings>label small{color:#64748b}
.school-name-settings>label input{width:100%;min-width:0;padding:12px 14px;border:1px solid #cbd5e1;border-radius:9px;background:#fff}
@media(max-width:700px){.school-name-settings>label{grid-template-columns:1fr;gap:12px}}

@media(min-width:701px){
  .classroom-command-bar{justify-content:flex-end}
  .classroom-command-left{margin-left:auto;justify-content:flex-end}
  .classroom-command-right{margin-left:0}
  .classroom-command-bar button,
  .classroom-command-bar .classroom-recording-control button{height:44px!important;min-height:44px!important;padding:0 13px;box-sizing:border-box}
  #clear-board{border-color:#64748b;color:#fff;background:#64748b}
  #clear-board:hover{border-color:#475569;background:#475569}
  #toggle-mute-all,#manual-toggle-mute-all{border-color:#dc2626;color:#fff;background:#dc2626}
  #toggle-mute-all:hover,#manual-toggle-mute-all:hover{border-color:#b91c1c;background:#b91c1c}
  #toggle-mute-all.active,#manual-toggle-mute-all.active{border-color:#15803d;color:#fff;background:#16a34a}
  #toggle-mute-all.active:hover,#manual-toggle-mute-all.active:hover{border-color:#166534;background:#15803d}
}

.classroom-header-actions{align-items:center}
.classroom-header-actions #leave-classroom-form{height:44px}
.classroom-status,.classroom-end-button{height:44px!important;min-height:44px!important;box-sizing:border-box}
.classroom-status{padding-block:0}
.classroom-end-button{padding:0 16px}

.classroom-command-bar{width:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.classroom-command-left{justify-content:flex-start}
.classroom-command-right{justify-content:flex-end;margin-left:auto}
.classroom-command-right>.classroom-recording-control{flex:0 0 auto}
.classroom-command-left,
.classroom-command-right{padding:6px;border:1px solid #d7e0ea;border-radius:14px;box-sizing:border-box}
.classroom-command-left{background:#fffdf2}
.classroom-command-right{background:#fffdf2}
.classroom-command-left:empty,.classroom-command-right:empty{display:none}

@media(min-width:701px){
  .classroom-layout-controls{display:block}
  .classroom-command-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .classroom-command-left,.classroom-command-right{flex-wrap:nowrap}
  .classroom-command-bar button{min-height:38px;padding:7px 9px;font-size:11px;white-space:nowrap}
}

@media(max-width:700px){
  .classroom-command-bar{display:grid;grid-template-columns:1fr;gap:6px}
  .classroom-command-left,.classroom-command-right{width:100%;margin:0}
  .classroom-command-right{justify-content:stretch}
}
@media(max-width:760px){
  body.mobile-sidebar-open .dash-sidebar{width:min(340px,90vw);height:100dvh;padding:20px 16px;display:flex;flex-direction:column}
  body.mobile-sidebar-open .dash-nav{width:100%;display:grid;grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row;gap:6px}
  body.mobile-sidebar-open .dash-nav a{width:100%;min-height:48px;padding:11px 12px;display:flex;align-items:center;justify-content:flex-start;gap:13px}
  body.mobile-sidebar-open .dash-nav a .sidebar-label{width:auto;opacity:1;white-space:normal;overflow-wrap:normal;word-break:normal}
  body.mobile-sidebar-open .dash-sidebar-user{width:100%;margin-top:auto}
}

#camera-message { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; color: #e2e8f0; text-align: center; }
.call-controls { display: flex; justify-content: center; gap: 10px; }.call-controls button { padding: 9px 14px; border-radius: 999px; background: #172033; }.call-controls button.off { background: #b91c1c; }
.student-request-controls { width:min(100%,420px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:center; align-items:center; gap:10px; }
.student-request-controls button { width:100%; white-space:nowrap; }
.student-request-controls button { padding:9px 14px; border:1px solid #cbd5e1; border-radius:999px; color:#172033; background:#fff; font-weight:800; }
.student-request-controls button.active { color:#fff; border-color:#d97706; background:#d97706; }
.student-request-controls label { display:flex; align-items:center; gap:7px; color:#475569; font-size:13px; font-weight:700; }
.classroom-requests { padding:7px 10px; border:1px solid #fde68a; border-radius:14px; background:#fffbeb; }
.classroom-requests[hidden] { display:none; }
.classroom-requests > strong { display:block; margin-bottom:4px; color:#92400e; font-size:14px; line-height:1.1; }
.classroom-request-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; }
.classroom-request-tile { min-width:0; padding:6px; border:1px solid #fde68a; border-radius:10px; background:#fff; }
.classroom-request-tile > strong { display:block; margin-bottom:4px; overflow:hidden; color:#451a03; font-size:12px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.classroom-request-tile > div { display:grid; gap:4px; }
.classroom-request-tile > div > div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px; }
.classroom-request-tile span { overflow:hidden; color:#451a03; font-size:9px; line-height:1.15; font-weight:750; }
.classroom-request-decisions { display:flex; gap:2px; }
.classroom-request-tile button { width:22px; height:22px; padding:0; border-radius:6px; font-size:12px; line-height:1; }
.classroom-request-tile button.approve { background:#15803d; }
.classroom-request-tile button.deny { background:#b91c1c; }
.tool-button, .color-button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 2px solid transparent; border-radius: 12px; background: #f1f5f9; color: #0f172a; }
.tool-button.active, .color-button.active { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
.color-button { width: 28px; height: 28px; border-radius: 50%; }.color-button.blue{background:#2563eb}.color-button.red{background:#dc2626}.color-button.green{background:#16a34a}
.whiteboard-color-picker { display:grid; justify-items:center; gap:4px; color:#475569; font-size:11px; font-weight:800; }
.whiteboard-color-picker > span { font-size:22px; line-height:1; }
.whiteboard-color-picker input { width:42px; height:36px; padding:2px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; cursor:pointer; }
.tool-button.danger { margin-top: auto; width: 58px; color: #b91c1c; font-size: 12px; }
.brush-control { display: grid; justify-items: center; gap: 5px; color: #64748b; font-size: 11px; }.brush-control input{width:62px}
.whiteboard-stage { position: relative; min-height: 620px; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 18px; background: #fff; box-shadow: 0 10px 35px rgba(15,23,42,.07); }
.whiteboard-live-cursor { position:absolute; z-index:8; display:flex; align-items:center; gap:5px; pointer-events:none; transform:translate(8px,8px); opacity:0; transition:opacity .15s; }
.whiteboard-live-cursor[data-visible="true"] { opacity:1; }
.whiteboard-live-cursor span { width:28px; height:28px; display:grid; place-items:center; border:2px solid #fff; border-radius:9px; background:#2563eb; color:#fff; box-shadow:0 4px 12px rgba(15,23,42,.25); font-weight:900; }
.whiteboard-live-cursor strong { padding:5px 8px; border-radius:8px; background:#172033; color:#fff; box-shadow:0 4px 12px rgba(15,23,42,.2); font-size:12px; white-space:nowrap; }
.whiteboard-author-attribution{position:absolute;z-index:12;display:flex;align-items:center;gap:6px;pointer-events:none;transform:translate(12px,12px)}.whiteboard-author-attribution[hidden]{display:none}.whiteboard-author-attribution span{width:28px;height:28px;display:grid;place-items:center;border:2px solid #fff;border-radius:9px;color:#fff;background:#7c3aed;box-shadow:0 4px 12px rgba(15,23,42,.25);font-weight:900}.whiteboard-author-attribution strong{padding:6px 9px;border-radius:8px;color:#fff;background:#172033;box-shadow:0 4px 12px rgba(15,23,42,.2);font-size:12px;white-space:nowrap}
#whiteboard { width: 100%; height: 100%; display: block; touch-action: none; background-color:#fff; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 22px 22px; }
body.tablet-classroom-layout #whiteboard { touch-action:none; -ms-touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#whiteboard[data-tool="draw"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 25l2-7L21 4l7 7-14 14-9 2z' fill='%23facc15' stroke='%23111827' stroke-width='2'/%3E%3Cpath d='M7 18l7 7' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E") 5 27,crosshair; }
#whiteboard[data-tool="text"] { cursor:text; }
#whiteboard[data-tool="erase"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 21L17 7l10 9-9 11H9z' fill='%23fda4af' stroke='%23111827' stroke-width='2'/%3E%3Cpath d='M14 26l8-9' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 6 26,pointer; }
#whiteboard[data-tool="image-transform"] { cursor:grab; }
#whiteboard[data-tool="image-transform"]:active { cursor:grabbing; }
#whiteboard[data-tool="pointer"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M16 34c-2-3-6-8-8-11-1-2 2-4 4-2l3 3V8c0-3 5-3 5 0v10-4c0-3 5-3 5 0v5-3c0-3 5-3 5 0v5-2c0-3 5-3 5 0v7c0 7-5 11-11 11-3 0-6-1-8-3z' fill='%23ffffff' stroke='%230f172a' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M15 24v-5m5 0v4m5-4v4m5-2v3' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 16 7,pointer; }
.whiteboard-pointer-tool{position:relative}
.whiteboard-pointer-tool.pointer-locked{filter:grayscale(1);color:#94a3b8;background:#e2e8f0}
.whiteboard-pointer-tool.pointer-locked::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:3px;border-radius:3px;background:#dc2626;transform:rotate(-45deg);box-shadow:0 0 0 1px rgba(255,255,255,.8)}
.whiteboard-pointer-tool.request-pending{animation:pointer-request-pulse 1s ease-in-out infinite}
@keyframes pointer-request-pulse{50%{box-shadow:0 0 0 4px rgba(245,158,11,.35)}}
@media(max-width:700px){.classroom-shell{grid-template-rows:auto auto 1fr}.classroom-header{padding:12px 14px;align-items:flex-start}.classroom-header h1{font-size:24px}.classroom-status strong{display:none}.mobile-classroom-tabs{padding:8px 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#fff;border-bottom:1px solid #dbe3ee}.mobile-classroom-tabs button{padding:10px;border:0;border-radius:10px;background:#e2e8f0;color:#334155;font-weight:800}.mobile-classroom-tabs button.active{color:#fff;background:#2563eb}.classroom-workspace{min-height:0;padding:8px;grid-template-columns:1fr;grid-template-rows:auto 1fr}.whiteboard-toolbar{flex-direction:row;overflow-x:auto}.tool-button.danger{margin:0 0 0 auto}.classroom-main{min-height:0;grid-template-rows:auto auto 1fr}.whiteboard-stage{min-height:calc(100dvh - 245px)}.video-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}.video-tile,.video-tile video{min-height:110px}.mobile-whiteboard-view .video-grid,.mobile-whiteboard-view .call-controls{display:none}.mobile-whiteboard-view .classroom-main{grid-template-rows:1fr}.mobile-video-view .whiteboard-toolbar,.mobile-video-view .whiteboard-stage{display:none}.mobile-video-view .classroom-workspace{grid-template-rows:1fr}.mobile-video-view .classroom-main{grid-template-rows:auto auto}.mobile-video-view .video-grid{grid-template-columns:1fr 1fr}}
.mobile-student-whiteboard-focus{overflow:hidden}
.mobile-student-whiteboard-focus .classroom-chat-button,.mobile-student-whiteboard-focus .classroom-chat,.mobile-student-whiteboard-focus .classroom-disconnected{display:none!important}
.mobile-student-whiteboard-focus .classroom-workspace,.classroom-workspace:fullscreen{
  --mobile-camera-size:clamp(64px,22dvh,104px);
  position:fixed;inset:0;z-index:1400;width:100vw;height:100dvh;min-height:100dvh;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  display:grid;grid-template-columns:calc(var(--mobile-camera-size) * 2 + 6px) minmax(0,1fr);grid-template-rows:var(--mobile-camera-size) minmax(0,1fr);gap:6px;overflow:hidden;background:#eaf0f7;
}
.mobile-student-whiteboard-focus .classroom-workspace>.whiteboard-toolbar,.classroom-workspace:fullscreen>.whiteboard-toolbar{
  grid-column:2;grid-row:1;width:100%;height:var(--mobile-camera-size);max-width:none;padding:6px;display:flex!important;flex-flow:row nowrap;align-items:center;justify-content:flex-start;gap:6px;overflow-x:auto;overflow-y:hidden;border-radius:11px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.mobile-student-whiteboard-focus .classroom-workspace>.whiteboard-toolbar>*,.classroom-workspace:fullscreen>.whiteboard-toolbar>*{width:auto!important;min-width:max-content!important;max-width:none!important;margin:0!important;flex:0 0 auto;justify-self:auto!important}
.mobile-student-whiteboard-focus .classroom-workspace>.whiteboard-toolbar .tool-button,.classroom-workspace:fullscreen>.whiteboard-toolbar .tool-button{width:40px!important;height:40px;min-width:40px!important;padding:0}
.mobile-student-whiteboard-focus .classroom-workspace>.whiteboard-toolbar .whiteboard-color-picker,.classroom-workspace:fullscreen>.whiteboard-toolbar .whiteboard-color-picker{width:44px!important;min-width:44px!important}
.whiteboard-toolbar [data-whiteboard-panel][hidden]{display:none!important}
.whiteboard-shapes-toggle{position:relative}
.whiteboard-shapes-toggle svg{width:30px;height:30px;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round}
@media(min-width:701px){
  .host-toolbar-workspace{grid-template-columns:max-content minmax(0,1fr)}
  .host-whiteboard-toolbar{width:max-content;height:auto;max-height:none;min-height:0;flex-flow:column nowrap;align-content:center;justify-content:flex-start;overflow:visible}
  .host-whiteboard-toolbar>*{flex:0 0 auto}
}
.mobile-student-whiteboard-focus .classroom-main,.mobile-student-whiteboard-focus .classroom-content,.classroom-workspace:fullscreen .classroom-main,.classroom-workspace:fullscreen .classroom-content{display:contents}
.mobile-student-whiteboard-focus .classroom-layout-controls,.mobile-student-whiteboard-focus .student-request-controls,.mobile-student-whiteboard-focus .classroom-requests,.mobile-student-whiteboard-focus .shared-video-panel,.mobile-student-whiteboard-focus .classroom-video-library,.mobile-student-whiteboard-focus .shared-class-manual,.classroom-workspace:fullscreen .classroom-layout-controls,.classroom-workspace:fullscreen .student-request-controls,.classroom-workspace:fullscreen .classroom-requests,.classroom-workspace:fullscreen .shared-video-panel,.classroom-workspace:fullscreen .classroom-video-library,.classroom-workspace:fullscreen .shared-class-manual{display:none!important}
.mobile-student-whiteboard-focus .video-grid,.classroom-workspace:fullscreen .video-grid{
  grid-column:1;grid-row:1;width:calc(var(--mobile-camera-size) * 2 + 6px);height:var(--mobile-camera-size);max-height:none;padding:0;display:grid!important;grid-template-columns:repeat(2,var(--mobile-camera-size));grid-template-rows:var(--mobile-camera-size);gap:6px;overflow:hidden;
}
.mobile-student-whiteboard-focus .video-grid .video-tile,.classroom-workspace:fullscreen .video-grid .video-tile{display:none}
.mobile-student-whiteboard-focus .video-grid .local-video,.mobile-student-whiteboard-focus .video-grid .video-tile[data-host="true"],.classroom-workspace:fullscreen .video-grid .local-video,.classroom-workspace:fullscreen .video-grid .video-tile[data-host="true"]{width:var(--mobile-camera-size);height:var(--mobile-camera-size);min-width:0;min-height:0;display:block;aspect-ratio:1 / 1;border-radius:10px}
.mobile-student-whiteboard-focus .video-grid .local-video,.classroom-workspace:fullscreen .video-grid .local-video{order:1}
.mobile-student-whiteboard-focus .video-grid .video-tile[data-host="true"],.classroom-workspace:fullscreen .video-grid .video-tile[data-host="true"]{order:2}
.mobile-student-whiteboard-focus .video-grid .video-tile video,.classroom-workspace:fullscreen .video-grid .video-tile video{width:100%;height:100%;min-height:0;object-fit:cover}
.mobile-student-whiteboard-focus .whiteboard-stage,.classroom-workspace:fullscreen .whiteboard-stage{grid-column:1 / -1;grid-row:2;position:relative;width:100%;height:100%;min-height:0;display:block!important;border:0;border-radius:11px}
.groups-table-panel > .data-table-wrap { width: 100%; overflow: visible; }
@media (max-width: 1100px) { .groups-table-panel > .data-table-wrap { overflow-x: auto; overflow-y: visible; } }

/* Online classroom layouts */
.classroom-main { grid-template-rows:auto auto minmax(0,1fr); }
.classroom-layout-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.classroom-layout-controls button { padding:8px 12px; border:1px solid #cbd5e1; border-radius:10px; color:#334155; background:#fff; font-weight:800; }
.classroom-layout-controls button.active { color:#fff; border-color:#2563eb; background:#2563eb; }
#toggle-classroom-whiteboard { margin-right:auto; white-space:nowrap; }
.classroom-content { min-width:0; min-height:0; display:grid; gap:12px; }
.classroom-whiteboard-layout .classroom-content { grid-template-columns:clamp(120px,13vw,155px) minmax(0,1fr); }
.classroom-whiteboard-layout .video-grid { min-height:0; max-height:calc(100vh - 245px); padding-right:5px; display:flex; flex-direction:column; flex-wrap:nowrap; overflow-y:auto; overflow-x:hidden; }
.classroom-whiteboard-layout .video-tile { width:100%; min-height:0; flex:0 0 auto; aspect-ratio:1 / 1; }
.classroom-whiteboard-layout .video-tile video { width:100%; height:100%; min-height:0; object-fit:cover; }
.classroom-whiteboard-layout .whiteboard-stage { min-height:calc(100vh - 245px); }
.classroom-tile-layout .classroom-workspace { grid-template-columns:1fr; }
.classroom-tile-layout .whiteboard-toolbar, .classroom-tile-layout .whiteboard-stage { display:none; }
.classroom-tile-layout .classroom-content { display:block; }
.classroom-tile-layout { overflow-y:auto; }
.classroom-tile-layout .classroom-shell { min-height:100vh; height:auto; }
.classroom-tile-layout .classroom-workspace { min-height:auto; }
.classroom-tile-layout .video-grid { height:auto; padding:4px 4px 24px; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,360px)); grid-auto-flow:row; grid-auto-rows:auto; justify-content:center; align-items:start; overflow:visible; }
.classroom-tile-layout .video-tile { width:100%; min-height:0; aspect-ratio:1 / 1; }
.classroom-tile-layout .video-tile video { width:100%; height:100%; min-height:0; object-fit:cover; }
.own-media-controls { z-index:2; }
.video-star-counter { position:absolute; top:9px; right:9px; z-index:2; padding:5px 9px; border-radius:999px; color:#713f12; background:#fef3c7; box-shadow:0 3px 12px rgba(15,23,42,.2); font-size:13px; line-height:1; }
.classroom-live-stars{padding:8px 10px;display:flex;align-items:center;gap:10px;border:1px solid #fde68a;border-radius:11px;background:#fffbeb;overflow-x:auto}.classroom-live-stars>strong{color:#92400e;white-space:nowrap}.classroom-live-stars>div{display:flex;gap:7px}.classroom-live-stars span{padding:5px 8px;display:flex;gap:8px;border-radius:999px;background:#fff;white-space:nowrap}.classroom-live-stars b{color:#a16207}
.shared-video-teacher-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.shared-video-teacher-controls button{width:auto;margin:0;padding:7px 10px}
@media(max-width:700px){.classroom-live-stars>div>span:nth-child(n+3){display:none}}
.video-mic-status{position:absolute;top:8px;left:50%;z-index:4;width:28px;height:28px;display:grid;place-items:center;transform:translateX(-50%);border-radius:999px;color:#fff;background:rgba(15,23,42,.78);box-shadow:0 3px 12px rgba(15,23,42,.25);font-size:15px;font-style:normal;line-height:1}
.video-mic-status.muted{background:#dc2626}
.video-mic-status.muted::after,#toggle-mic.off::after,.participant-controls [data-action="mute"].off::after{content:'';position:absolute;left:50%;top:50%;width:2px;height:72%;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(220,38,38,.35);transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
#toggle-mic,#toggle-camera,.participant-controls [data-action="mute"]{position:relative}
#toggle-mic.off,.participant-controls [data-action="mute"].off{color:#fff;background:#dc2626}
#toggle-camera.off{color:#fff;background:#dc2626}
#toggle-camera.off::after{content:'';position:absolute;left:50%;top:50%;width:2px;height:72%;border-radius:2px;background:#fff;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
.classroom-star-celebration { position:fixed; inset:0; z-index:1000; display:grid; place-content:center; justify-items:center; pointer-events:none; color:#fff; background:rgba(15,23,42,.34); opacity:0; transition:opacity .2s ease; }
.classroom-star-celebration[hidden] { display:none; }
.classroom-star-celebration.show { opacity:1; }
.classroom-star-celebration span { color:#facc15; font-size:clamp(90px,18vw,180px); line-height:1; filter:drop-shadow(0 12px 28px rgba(113,63,18,.4)); animation:classroom-star-pop .75s cubic-bezier(.2,.9,.25,1.25); }
.classroom-star-celebration strong { margin-top:10px; font-size:clamp(24px,4vw,44px); text-shadow:0 3px 12px rgba(15,23,42,.5); }
.classroom-star-celebration small { margin-top:5px; font-size:18px; font-weight:800; }
.classroom-disconnected { position:fixed; left:50%; top:50%; z-index:1100; width:min(520px,calc(100% - 32px)); padding:32px; display:grid; justify-items:center; gap:10px; border:2px solid #fca5a5; border-radius:24px; color:#7f1d1d; background:#fff7f7; box-shadow:0 24px 70px rgba(15,23,42,.35); transform:translate(-50%,-50%); }
.classroom-disconnected[hidden] { display:none; }
.classroom-disconnected span { font-size:48px; line-height:1; }
.classroom-disconnected strong { font-size:28px; text-align:center; }
.classroom-disconnected small { color:#991b1b; font-size:15px; font-weight:800; text-align:center; }
.classroom-disconnected { box-shadow:0 0 0 100vmax rgba(15,23,42,.38),0 24px 70px rgba(15,23,42,.4); }
.classroom-disconnected.local-disconnect { box-shadow:0 0 0 100vmax rgba(15,23,42,.52),0 24px 70px rgba(15,23,42,.4); }
.classroom-disconnected.remote-disconnect { top:8px; width:min(390px,calc(100% - 24px)); padding:13px 18px; grid-template-columns:auto 1fr; justify-items:start; gap:10px; border-width:1px; border-radius:14px; box-shadow:0 10px 30px rgba(15,23,42,.2); transform:translateX(-50%); }
.classroom-disconnected.remote-disconnect span { font-size:24px; }
.classroom-disconnected.remote-disconnect strong { font-size:16px; text-align:left; }
.classroom-disconnected.remote-disconnect small { display:none; }
.classroom-disconnected.remote-disconnect.joined-notice { top:8px; border-color:#86efac; color:#166534; background:#f0fdf4; }
.classroom-disconnected.remote-disconnect.joined-notice span { color:#16a34a; }
@keyframes classroom-star-pop { 0%{transform:scale(.15) rotate(-35deg);opacity:0}65%{transform:scale(1.2) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)} }
.whiteboard-text-editor { position:absolute; z-index:5; width:min(320px,55%); min-height:44px; padding:8px 10px; border:2px solid #2563eb; border-radius:8px; background:#fff; color:#111827; font:700 20px/1.3 sans-serif; box-shadow:0 8px 22px rgba(15,23,42,.2); resize:both; }
.shared-video-panel { position:fixed; inset:70px 24px 24px; z-index:50; padding:14px; border-radius:18px; background:#0f172a; box-shadow:0 20px 60px rgba(15,23,42,.45); }
.shared-video-panel[hidden] { display:none; }
.shared-video-panel header { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; color:#fff; }
.shared-video-panel video, .shared-video-panel iframe { width:100%; height:calc(100% - 42px); display:block; border:0; object-fit:contain; background:#000; border-radius:12px; }
.shared-video-panel video[hidden], .shared-video-panel iframe[hidden] { display:none; }
.shared-video-panel header button { padding:7px 10px; border-radius:8px; background:#b91c1c; }
.shared-video-panel.watch-only video, .shared-video-panel.watch-only iframe { pointer-events:none; }
#enable-class-video-sound { position:absolute; left:50%; bottom:32px; z-index:2; padding:10px 16px; border:1px solid rgba(255,255,255,.55); border-radius:999px; color:#fff; background:rgba(15,23,42,.86); font-weight:800; transform:translateX(-50%); }
#enable-class-video-sound[hidden] { display:none; }
.classroom-video-library { position:fixed; inset:10vh max(18px,12vw); z-index:55; max-height:80vh; padding:18px; overflow:auto; border:1px solid #dbe3ee; border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.35); }
.classroom-video-library[hidden] { display:none; }
.classroom-video-library > header { margin-bottom:14px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.classroom-video-library > header div { display:grid; gap:3px; }
.classroom-video-library > header small { color:#64748b; }
#classroom-video-library-list { display:grid; gap:8px; }
#classroom-video-library-list article { padding:11px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #e2e8f0; border-radius:12px; }
#classroom-video-library-list article span { min-width:0; display:grid; gap:3px; }
#classroom-video-library-list article strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#classroom-video-library-list article small { color:#64748b; }
.whiteboard-history { inset:70px 0 0 auto; z-index:56; width:min(420px,100%); max-height:none; padding:18px; border-radius:20px 0 0 20px; box-shadow:-18px 0 48px rgba(15,23,42,.24); }
#whiteboard-history-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
#whiteboard-history-list > a { padding:8px; display:grid; gap:7px; border:1px solid #dbe3ee; border-radius:12px; color:#334155; background:#f8fafc; text-decoration:none; }
#whiteboard-history-list img { width:100%; aspect-ratio:16/10; display:block; border-radius:8px; background:#fff; object-fit:contain; }
#whiteboard-history-list strong { font-size:13px; }
#whiteboard-history-list { grid-template-columns:1fr; }
.whiteboard-history-session { display:grid; gap:10px; }
.whiteboard-history-session > header { padding-bottom:8px; display:grid; gap:3px; border-bottom:1px solid #dbe3ee; }
.whiteboard-history-session > header small { color:#64748b; }
.whiteboard-history-session-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.whiteboard-history-session-grid > a { padding:7px; display:grid; gap:5px; border:1px solid #dbe3ee; border-radius:10px; color:#334155; text-decoration:none; }
.whiteboard-history-session-grid img { width:100%; aspect-ratio:16/10; object-fit:contain; }
.whiteboard-archive { width:min(1000px,calc(100% - 28px)); max-height:88vh; overflow:auto; }
.whiteboard-archive > header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.whiteboard-archive > label { margin:14px 0; max-width:340px; display:grid; gap:6px; font-weight:800; }
.whiteboard-archive-grid { margin-top:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.whiteboard-archive-grid a { padding:9px; display:grid; gap:5px; border:1px solid #dbe3ee; border-radius:12px; color:#334155; background:#f8fafc; text-decoration:none; }
.whiteboard-archive-grid img { width:100%; aspect-ratio:16/10; border-radius:8px; background:#fff; object-fit:contain; }
.whiteboard-archive-grid small { color:#64748b; }
.whiteboard-history-page > label { max-width:360px; display:grid; gap:7px; font-weight:800; }
.whiteboard-history-page .whiteboard-archive-grid { margin-top:20px; }
.whiteboard-session-groups { display:grid; gap:20px; }
.whiteboard-session-group { padding:18px; border:1px solid #dbe3ee; border-radius:16px; background:#fff; }
.whiteboard-session-group > header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.whiteboard-session-group > header p { color:#64748b; }
.whiteboard-session-group dl { margin:0; display:flex; gap:20px; }
.whiteboard-session-group dl div { display:grid; gap:2px; }
.whiteboard-session-group dt { color:#64748b; font-size:12px; font-weight:800; text-transform:uppercase; }
.whiteboard-session-group dd { margin:0; font-weight:800; }
.whiteboard-session-recordings { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.classroom-star-summary { margin:14px 0; padding:12px; border:1px solid #fde68a; border-radius:12px; background:#fffbeb; }
.classroom-star-summary h3 { margin:0 0 8px; color:#92400e; font-size:14px; }
.classroom-star-summary > div { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:7px; }
.classroom-star-summary article { padding:7px 9px; display:flex; justify-content:space-between; gap:8px; border-radius:9px; background:#fff; }
.classroom-star-summary article span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.classroom-star-summary article strong { color:#a16207; white-space:nowrap; }
.classroom-session-choice { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; background:rgba(15,23,42,.55); }
.classroom-session-choice[hidden] { display:none; }
.classroom-session-choice > div { width:min(540px,100%); padding:26px; border-radius:20px; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.4); }
.classroom-session-choice h2 { margin:4px 0 8px; }
.classroom-session-choice > div > div { margin-top:20px; display:flex; justify-content:flex-end; gap:10px; }

@media(max-width:700px){
  .whiteboard-toolbar { padding:10px; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; overflow:visible; }
  .whiteboard-toolbar .tool-button { width:48px; height:48px; flex:0 0 48px; font-size:18px; }
  .whiteboard-toolbar .color-button { width:36px; height:36px; flex:0 0 36px; }
  .whiteboard-toolbar > label:not(.whiteboard-color-picker) { min-width:120px; display:flex; align-items:center; justify-content:center; gap:7px; }
  .whiteboard-toolbar > label:not(.whiteboard-color-picker) input { width:82px; }
  .whiteboard-toolbar > .whiteboard-color-picker { min-width:58px; display:grid; }
  .whiteboard-toolbar > .whiteboard-color-picker input { width:48px; height:42px; }
  .whiteboard-toolbar > #open-whiteboard-history, .whiteboard-toolbar > #clear-board { min-height:42px; padding:8px 12px; }
  .whiteboard-stage { min-height:calc(100dvh - 330px); }
  .whiteboard-text-editor { width:min(300px,78%); min-height:54px; font-size:18px; }
}

/* Four-column compact participant grid beside the open whiteboard. */
@media(min-width:701px){
  .classroom-whiteboard-layout .classroom-content{grid-template-columns:clamp(260px,20vw,340px) minmax(0,1fr)}
  .classroom-whiteboard-layout .video-grid{max-height:calc(100vh - 245px);padding:0 3px 4px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:7px;overflow-y:auto;overflow-x:hidden}
  .classroom-whiteboard-layout .video-tile{width:100%;aspect-ratio:1 / 1}
  .classroom-whiteboard-layout .video-tile>span{max-width:48%;padding:2px 4px;font-size:8px}
  .classroom-whiteboard-layout .video-star-counter{padding:2px 4px;font-size:8px}
  .classroom-whiteboard-layout .participant-controls{right:3px;bottom:3px;gap:2px}
  .classroom-whiteboard-layout .participant-controls button{width:19px;height:19px;font-size:8px}
}
.video-tile.is-speaking{outline:3px solid #22c55e;outline-offset:-3px;box-shadow:0 0 0 3px rgba(34,197,94,.2),0 8px 20px rgba(15,23,42,.16)}
.video-tile.is-speaking::after{content:'Speaking';position:absolute;top:5px;left:5px;z-index:3;padding:2px 5px;border-radius:999px;color:#fff;background:#16a34a;font-size:8px;font-weight:900}
.classroom-session-attendance{margin:14px 0;padding:12px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff}.classroom-session-attendance h3{margin:0;color:#1e3a8a;font-size:14px}.classroom-session-attendance>p{margin:3px 0 9px;color:#64748b;font-size:12px}.classroom-session-attendance .data-table{font-size:12px}.classroom-session-attendance .data-table th,.classroom-session-attendance .data-table td{padding:7px 8px}

/* Mobile classroom: participant cameras above, whiteboard below. */
@media(max-width:700px){
  .classroom-whiteboard-layout .classroom-content{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(420px,1fr);gap:8px}
  .classroom-whiteboard-layout .video-grid{width:100%;max-height:28dvh;padding:2px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;gap:5px;overflow-x:hidden;overflow-y:auto}
  .classroom-whiteboard-layout .video-tile{width:100%;min-width:0;aspect-ratio:1 / 1;border-radius:9px}
  .classroom-whiteboard-layout .video-tile video{width:100%;height:100%;min-height:0;object-fit:cover}
  .classroom-whiteboard-layout .whiteboard-stage{width:100%;min-height:420px;height:calc(100dvh - 300px)}
  .classroom-whiteboard-layout .video-tile>span{left:3px;bottom:3px;max-width:46%;padding:2px 3px;font-size:7px}
  .classroom-whiteboard-layout .video-star-counter{top:3px;right:3px;padding:2px 3px;font-size:7px}
  .classroom-whiteboard-layout .participant-controls{right:2px;bottom:2px;gap:1px}
  .classroom-whiteboard-layout .participant-controls button{width:17px;height:17px;font-size:7px}
}
@media(max-width:700px){.classroom-video-library{inset:5vh 10px;max-height:90vh;padding:14px}.whiteboard-history{inset:64px 0 0 auto;width:min(360px,100%);max-height:none;border-radius:16px 0 0 16px}}
.student-request-controls { gap:7px; }
.student-request-controls button { padding:6px 10px; font-size:12px; }
.student-request-controls label { font-size:11px; }

@media(max-width:700px){
  .classroom-workspace { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .classroom-layout-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; }
  .classroom-layout-controls > form { display:contents; }
  .classroom-layout-controls button { width:100%; min-height:42px; padding:8px; font-size:12px; }
  #toggle-classroom-whiteboard { grid-column:1 / -1; margin-right:0; font-size:14px; }
  .classroom-whiteboard-layout .classroom-content { grid-template-columns:minmax(82px,24%) minmax(0,1fr); }
  .classroom-whiteboard-layout .video-grid { display:flex; max-height:calc(100dvh - 275px); }
  .classroom-whiteboard-layout .video-tile { min-height:0; flex-basis:auto; aspect-ratio:1 / 1; }
  .classroom-whiteboard-layout .video-tile video { height:100%; min-height:0; }
  .classroom-whiteboard-layout .whiteboard-stage { display:block; min-height:calc(100dvh - 275px); }
  .classroom-tile-layout .video-grid { height:auto; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; align-items:start; overflow:visible; }
  .student-request-controls { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .classroom-request-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .checkbox-card-fieldset > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .table-pagination > div { width: 100%; }
  .table-pagination > div > button { flex: 1; }
  #page-buttons { flex: 0 0 auto; text-align: center; }
}
.classroom-recording-control{display:flex;align-items:center;gap:.55rem}.classroom-recording-control small{max-width:12rem;color:#64748b;font-size:.72rem;line-height:1.2}.classroom-recording-control .recording-required{border-color:#dc2626;background:#fff1f2;color:#b91c1c;box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.classroom-recording-control .recording-active{border-color:#16a34a;background:#16a34a;color:#fff}.classroom-recording-control .recording-active::before{content:'●';margin-right:.38rem;display:inline-block;animation:recording-blink 1s steps(1,end) infinite}.classroom-recording-gate>div{border:3px solid #16a34a}.classroom-recording-gate button{background:#16a34a}.classroom-recording-gate-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}.classroom-recording-gate-actions a{min-height:44px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #cbd5e1;border-radius:10px;color:#334155;background:#fff;font-weight:800;text-decoration:none}.classroom-recording-error{margin:16px 0 0;padding:11px 13px;border:1px solid #fecaca;border-radius:10px;color:#991b1b;background:#fef2f2;font-size:14px;font-weight:700}.classroom-recording-error[hidden]{display:none}@keyframes recording-blink{50%{opacity:.2}}

/* Tablets keep the desktop classroom composition; only native page gestures are suppressed. */
body.tablet-classroom-layout.classroom-whiteboard-layout { position:fixed; inset:0; width:100%; height:100vh; height:100svh; min-height:0; margin:0; overflow:hidden!important; overscroll-behavior:none; touch-action:none; }
body.tablet-classroom-layout.classroom-whiteboard-layout .classroom-shell { position:absolute; inset:0; width:100%; height:100%; min-height:0; max-height:100%; grid-template-rows:auto minmax(0,1fr); overflow:hidden!important; overscroll-behavior:none; }
body.tablet-classroom-layout.classroom-whiteboard-layout .whiteboard-stage { overflow:hidden; overscroll-behavior:none; touch-action:none; contain:layout paint; }
body.tablet-classroom-layout .video-tile.is-reconnecting .participant-disconnected { color:#92400e; background:rgba(254,243,199,.94); }

/* Tablet student classroom: requests and tools above stacked cameras and the board. */
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom {
  --tablet-camera-size:clamp(78px,12vw,118px);
  --tablet-video-width:clamp(78px,12vw,118px);
  --tablet-top-row:52px;
  width:100%;
  height:auto;
  max-height:100%;
  min-height:0;
  padding:8px;
  display:grid;
  grid-template-columns:var(--tablet-video-width) minmax(0,1fr);
  grid-template-rows:var(--tablet-top-row) minmax(0,1fr);
  gap:7px 9px;
  overflow:hidden;
  box-sizing:border-box;
  touch-action:none;
}
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom>.classroom-main,
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .classroom-content { display:contents; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .classroom-layout-controls,
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .classroom-requests { display:none!important; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom>.whiteboard-toolbar {
  grid-column:2;
  grid-row:1;
  width:calc(100% - 36px);
  max-width:calc(100% - 36px);
  height:100%;
  min-width:0;
  min-height:0;
  justify-self:center;
  padding:7px;
  display:flex!important;
  flex-flow:row nowrap;
  justify-content:flex-start;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  touch-action:pan-x;
  border-radius:13px;
}
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom>.whiteboard-toolbar>* { flex:0 0 auto; margin:0; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom>.whiteboard-toolbar .tool-button { width:38px; min-width:38px; height:38px; padding:0; font-size:17px; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom>.whiteboard-toolbar .whiteboard-shapes-toggle svg { width:23px; height:23px; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom>.whiteboard-toolbar .whiteboard-color-picker { width:38px; min-width:38px; height:38px; display:grid; place-items:center; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom>.whiteboard-toolbar .whiteboard-color-picker input { width:32px; height:30px; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom>.whiteboard-toolbar>label:not(.whiteboard-color-picker) { min-width:100px; display:grid; grid-template-columns:auto 68px; align-items:center; gap:5px; font-size:10px; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom>.whiteboard-toolbar>label:not(.whiteboard-color-picker) input { width:68px; min-width:0; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid {
  grid-column:1;
  grid-row:2;
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  padding:0;
  display:grid!important;
  grid-template-columns:var(--tablet-camera-size);
  grid-template-rows:repeat(2,var(--tablet-camera-size));
  align-content:start;
  gap:6px;
  overflow:hidden;
}
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid .video-tile { display:none; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid .local-video,
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid .video-tile[data-host="true"] { width:var(--tablet-camera-size)!important; height:var(--tablet-camera-size)!important; min-width:var(--tablet-camera-size)!important; min-height:var(--tablet-camera-size)!important; max-width:var(--tablet-camera-size)!important; max-height:var(--tablet-camera-size)!important; display:block; aspect-ratio:1 / 1; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid .video-tile video { width:100%!important; height:100%!important; min-height:0!important; max-height:100%!important; object-fit:cover; aspect-ratio:1 / 1; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid .video-tile>span { left:2px; bottom:2px; max-width:45%; padding:1px 2px; font-size:6px; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid .video-star-counter { top:2px; right:2px; padding:1px 2px; font-size:6px; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid .local-video .own-media-controls { position:absolute!important; z-index:20!important; right:4px!important; bottom:4px!important; display:flex!important; visibility:visible!important; opacity:1!important; gap:4px!important; pointer-events:auto!important; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid .local-video .own-media-controls button { width:30px!important; height:30px!important; min-width:30px!important; min-height:30px!important; padding:4px!important; display:grid!important; place-items:center!important; border:1px solid #fff!important; border-radius:999px!important; color:#fff!important; background:rgba(15,23,42,.88)!important; visibility:visible!important; opacity:1!important; box-shadow:0 2px 7px rgba(0,0,0,.45)!important; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid .local-video .own-media-controls button.off { background:#dc2626!important; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .video-grid .local-video .own-media-controls button svg { width:19px!important; height:19px!important; display:block!important; stroke-width:2.4!important; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .student-request-controls {
  grid-column:1;
  grid-row:1;
  align-self:center;
  justify-self:stretch;
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
}
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .student-request-controls button { min-width:0; min-height:40px; padding:6px 4px; overflow:hidden; font-size:10px; line-height:1.1; white-space:normal; }
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom .whiteboard-stage {
  grid-column:2;
  grid-row:2;
  position:relative;
  width:calc(100% - 36px);
  height:calc(100% - 36px);
  max-width:calc(100% - 36px);
  max-height:calc(100% - 36px);
  min-width:0;
  min-height:0;
  align-self:start;
  justify-self:center;
  margin-top:0;
  display:block!important;
  transform:none;
  border-radius:13px;
}
body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom #whiteboard { position:absolute; inset:0; width:100%; height:100%; min-height:0; }

@media (orientation:portrait) {
  body.tablet-classroom-layout.classroom-whiteboard-layout .mobile-student-classroom {
    --tablet-camera-size:clamp(72px,13vw,100px);
    --tablet-video-width:clamp(72px,13vw,100px);
  }
}

/* High-density classroom video layouts (up to 50 participants). */
.classroom-whiteboard-layout .classroom-content{grid-template-columns:clamp(78px,6.5vw,104px) minmax(0,1fr);gap:9px}
.classroom-whiteboard-layout .video-grid{gap:7px;padding-right:3px}
.classroom-whiteboard-layout .video-tile{border-radius:11px}
.classroom-whiteboard-layout .video-tile>span{left:5px;bottom:5px;padding:3px 5px;max-width:calc(100% - 10px);overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.classroom-whiteboard-layout .video-star-counter{top:4px;right:4px;padding:3px 5px;font-size:9px}
.classroom-whiteboard-layout .participant-controls{right:4px;bottom:4px;gap:3px}
.classroom-whiteboard-layout .participant-controls button{width:24px;height:24px;padding:0;font-size:10px}
.classroom-tile-layout .video-grid{padding:4px 8px 20px;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;justify-content:stretch}
.classroom-tile-layout .video-tile{border-radius:12px}
.classroom-tile-layout .video-tile>span{left:6px;bottom:6px;padding:3px 6px;max-width:55%;overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.classroom-tile-layout .video-star-counter{top:5px;right:5px;padding:3px 6px;font-size:10px}
.classroom-tile-layout .participant-controls{right:5px;bottom:5px;gap:3px}
.classroom-tile-layout .participant-controls button{width:26px;height:26px;padding:0;font-size:11px}
@media(max-width:1700px) and (min-width:1201px){.classroom-tile-layout .video-grid{grid-template-columns:repeat(10,minmax(0,1fr))}}
@media(max-width:1200px) and (min-width:901px){.classroom-tile-layout .video-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:900px) and (min-width:701px){.classroom-tile-layout .video-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:700px){
  .classroom-whiteboard-layout .classroom-content{grid-template-columns:72px minmax(0,1fr);gap:7px}
  .classroom-whiteboard-layout .video-grid{max-height:calc(100dvh - 275px);gap:6px}
  .classroom-tile-layout .video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px 5px 16px}
  .classroom-tile-layout .video-tile>span{font-size:9px}
  .classroom-tile-layout .participant-controls button{width:23px;height:23px;font-size:9px}
}

@media(min-width:701px){
  .classroom-whiteboard-layout .classroom-content{grid-template-columns:clamp(280px,22vw,380px) minmax(0,1fr);gap:9px}
  .classroom-whiteboard-layout .video-grid{max-height:calc(100vh - 245px);padding:0 3px 4px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:7px;overflow-y:auto;overflow-x:hidden}
  .classroom-whiteboard-layout .video-tile{width:100%;aspect-ratio:1 / 1;border-radius:10px}
  .classroom-whiteboard-layout .video-tile>span{max-width:48%;padding:2px 4px;font-size:8px}
  .classroom-whiteboard-layout .video-star-counter{padding:2px 4px;font-size:8px}
  .classroom-whiteboard-layout .participant-controls{right:3px;bottom:3px;gap:2px}
  .classroom-whiteboard-layout .participant-controls button{width:19px;height:19px;font-size:8px}
}

/* Final mobile override: cameras first, landscape whiteboard second. */
@media(max-width:700px){
  .classroom-whiteboard-layout .classroom-content{width:100%;display:flex;flex-direction:column;gap:8px}
  .classroom-whiteboard-layout .video-grid{order:1;width:100%;height:auto;max-height:30dvh;padding:2px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;gap:5px;overflow-x:hidden;overflow-y:auto}
  .classroom-whiteboard-layout .video-tile{width:100%;min-width:0;min-height:0;aspect-ratio:1 / 1;flex:none;border-radius:9px}
  .classroom-whiteboard-layout .video-tile video{width:100%;height:100%;min-height:0;object-fit:cover}
  .classroom-whiteboard-layout .whiteboard-stage{order:2;width:100%;height:auto;min-height:0;aspect-ratio:16 / 9;display:block}
  .classroom-whiteboard-layout #whiteboard{width:100%;height:100%}
}
.classroom-chat-button{position:fixed;right:22px;bottom:22px;z-index:70;padding:13px 18px;border:0;border-radius:999px;color:#fff;background:#2563eb;box-shadow:0 10px 28px rgba(15,23,42,.28);font-weight:800}.classroom-chat{position:fixed;right:22px;bottom:78px;z-index:70;width:min(360px,calc(100vw - 28px));height:min(500px,calc(100dvh - 120px));display:grid;grid-template-rows:auto 1fr auto;border:1px solid #cbd5e1;border-radius:18px;background:#fff;box-shadow:0 18px 55px rgba(15,23,42,.3);overflow:hidden}.classroom-chat[hidden]{display:none}.classroom-chat>header{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;color:#fff;background:#1e3a8a}.classroom-chat>header div{display:flex;align-items:center;gap:10px}.classroom-chat>header a{color:#dbeafe;font-size:12px}.classroom-chat>header button{padding:0;border:0;color:#fff;background:transparent;font-size:24px}.classroom-chat-messages,#classroom-chat-messages{padding:12px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;background:#f8fafc}.classroom-chat article{max-width:85%;padding:8px 10px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.12)}.classroom-chat article.mine{align-self:flex-end;background:#dbeafe}.classroom-chat article header{display:flex;justify-content:space-between;gap:12px;font-size:11px}.classroom-chat article time{color:#64748b}.classroom-chat article p{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.classroom-chat form{padding:10px;display:grid;grid-template-columns:1fr auto;gap:8px;border-top:1px solid #e2e8f0}.classroom-chat form input{min-width:0;padding:10px;border:1px solid #cbd5e1;border-radius:10px}.classroom-chat-history-page{max-width:900px;margin:0 auto;padding:30px 18px}.classroom-chat-history-page>header{margin-bottom:20px}.classroom-chat-history-page>section{padding:22px;border:1px solid #e2e8f0;border-radius:18px;background:#fff}.classroom-chat-history-page>section>div{display:grid;gap:10px}.classroom-chat-history-page article{padding:12px;border-bottom:1px solid #e2e8f0}.classroom-chat-history-page article header{display:flex;justify-content:space-between;gap:16px}.classroom-chat-history-page article time{color:#64748b;font-size:12px}.classroom-chat-history-page article p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:700px){.classroom-chat-button{right:12px;bottom:12px}.classroom-chat{right:7px;bottom:66px;height:min(480px,calc(100dvh - 90px))}}
.classroom-chat-button,.classroom-chat{z-index:1300}@media(max-width:700px){.classroom-chat-button{right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));min-width:104px;min-height:52px;display:flex;align-items:center;justify-content:center;font-size:15px}.classroom-chat{right:7px;bottom:calc(78px + env(safe-area-inset-bottom,0px));width:calc(100vw - 14px);height:min(480px,calc(100dvh - 110px - env(safe-area-inset-bottom,0px)))}.classroom-chat form input,.classroom-chat form button{min-height:44px}}
.classroom-chat-button{isolation:isolate;gap:6px;overflow:visible}.classroom-chat-button b{position:absolute;right:-5px;top:-7px;min-width:23px;height:23px;padding:0 5px;display:grid;place-items:center;border:2px solid #fff;border-radius:999px;color:#fff;background:#dc2626;box-shadow:0 3px 9px rgba(127,29,29,.35);font-size:11px;line-height:1}.classroom-chat-button b[hidden]{display:none}@media(max-width:700px){.classroom-chat-button{position:fixed!important;visibility:visible!important;opacity:1!important;color:#fff!important;background:#2563eb!important}.classroom-chat-button b{right:-4px;top:-6px}}
@media(max-width:700px){.classroom-chat{right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:min(330px,calc(100vw - 24px));height:min(410px,calc(100dvh - 145px - env(safe-area-inset-bottom,0px)))}.classroom-chat>header{padding:10px 12px}.classroom-chat-messages,#classroom-chat-messages{padding:9px}.classroom-chat form{padding:8px}}
.class-manual-upload{max-width:560px}.class-manual-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.class-manual-grid>a{padding:16px;display:grid;gap:5px;border:1px solid #dbe3ee;border-radius:14px;color:#0f172a;background:#fff;text-decoration:none}.class-manual-grid span,.class-manual-grid small{color:#64748b}.classroom-manual-picker{display:grid;gap:7px}.classroom-manual-picker label{display:flex;align-items:center;gap:8px}.classroom-manual-list{display:grid;gap:8px}.classroom-manual-list article{padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e2e8f0;border-radius:12px}.classroom-manual-list article div,.shared-class-manual header div{display:flex;align-items:center;gap:8px}.shared-class-manual{position:fixed;inset:58px 18px 18px;z-index:65;display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:18px;background:#fff;box-shadow:0 20px 70px rgba(15,23,42,.45);overflow:hidden}.shared-class-manual.student-manual-view{grid-template-rows:minmax(0,1fr)}.shared-class-manual[hidden]{display:none}.shared-class-manual header{padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#fff;background:#1e3a8a}.manual-page-controls{flex-wrap:wrap;justify-content:flex-end}.manual-page-controls label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:800}.manual-page-controls select{padding:7px;border:1px solid #bfdbfe;border-radius:8px;background:#fff}.shared-class-manual iframe{display:block;width:100%;height:100%;border:0;background:#f8fafc}.shared-class-manual iframe[hidden]{display:none}.shared-class-manual-pages{min-width:0;min-height:0;padding:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;overflow:hidden;background:#e5e7eb}.student-manual-view .shared-class-manual-pages{pointer-events:none}.shared-class-manual-pages[hidden]{display:none}.shared-class-manual-pages img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.18)}.manual-render-error{margin:auto;padding:18px;text-align:center}.manual-render-error button{margin-left:6px}@media(max-width:700px){.shared-class-manual{inset:calc(env(safe-area-inset-top,0px) + 50px) 5px calc(env(safe-area-inset-bottom,0px) + 6px)}.shared-class-manual.student-manual-view{inset:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);width:100vw;height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border-radius:0}.student-manual-view .shared-class-manual-pages{width:100%;height:100%;padding:8px}.shared-class-manual header{padding:8px;align-items:flex-start}.shared-class-manual header>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shared-class-manual header div{flex-wrap:wrap;justify-content:flex-end}.shared-class-manual header button{padding:7px 9px;font-size:12px}.classroom-manual-list article{align-items:flex-start;flex-direction:column}.classroom-manual-list article div{width:100%;justify-content:flex-end}}
.classroom-chat,.classroom-chat *{box-sizing:border-box}.classroom-chat form{min-width:0}.classroom-chat form input{width:100%;min-width:0;max-width:100%;font-size:16px!important;line-height:1.35;touch-action:manipulation}.classroom-chat form button{width:auto!important;min-width:62px;flex:none}.classroom-chat-button.has-unread{box-shadow:0 0 0 3px rgba(254,226,226,.95),0 10px 28px rgba(15,23,42,.3)}@media(max-width:700px){.classroom-chat{max-width:calc(100vw - 16px);max-height:calc(100dvh - 24px);border-radius:14px}.classroom-chat-button{width:auto!important;max-width:130px!important}.classroom-chat-messages,#classroom-chat-messages{min-width:0}.classroom-chat article{font-size:14px}.classroom-chat form{grid-template-columns:minmax(0,1fr) auto}}
.classroom-manual-inline-upload{margin-top:14px;padding:16px;display:grid;gap:10px;border:1px dashed #93c5fd;border-radius:14px;background:#eff6ff}.classroom-manual-inline-upload p{margin:0}.classroom-manual-inline-upload input{padding:10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff}.classroom-manual-history{margin:14px 0;padding:12px;border:1px solid #c4b5fd;border-radius:12px;background:#f5f3ff}.classroom-manual-history h3{margin:0 0 8px;color:#5b21b6;font-size:14px}.classroom-manual-history>div{display:grid;gap:7px}.classroom-manual-history a{padding:9px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;border-radius:9px;color:#1e1b4b;background:#fff;text-decoration:none}.classroom-manual-history a strong{grid-row:1 / 3}.classroom-manual-history a span,.classroom-manual-history a small{color:#64748b;font-size:12px;text-align:right}
.manual-history-pagination{margin-top:10px;display:flex;align-items:center;justify-content:flex-end;gap:9px}.manual-history-pagination button{width:auto;margin:0;padding:7px 11px}.manual-history-pagination span{color:#5b21b6;font-size:12px;font-weight:800}@media(max-width:480px){.manual-history-pagination{justify-content:space-between}.classroom-manual-history a{grid-template-columns:minmax(0,1fr)}.classroom-manual-history a strong{grid-row:auto}.classroom-manual-history a span,.classroom-manual-history a small{text-align:left}}
.classroom-history-filters{margin-bottom:16px;display:flex;align-items:end;flex-wrap:wrap;gap:10px}.classroom-history-filters label{min-width:190px;display:grid;gap:5px;color:#334155;font-size:12px;font-weight:800}.classroom-history-filters select,.classroom-history-filters input{width:100%;min-height:39px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff}.classroom-history-filters button{width:auto;min-height:39px;margin:0;padding:8px 12px}.classroom-session-pagination{margin-top:18px;padding-top:14px;display:flex;align-items:center;justify-content:center;gap:12px;border-top:1px solid #dbe3ee}.classroom-session-pagination button{width:auto;margin:0;padding:8px 14px}.classroom-session-pagination span{color:#334155;font-size:13px;font-weight:850}@media(max-width:600px){.classroom-history-filters{display:grid;grid-template-columns:1fr 1fr}.classroom-history-filters label{min-width:0}.classroom-history-filters label:first-child{grid-column:1 / -1}.classroom-history-filters button{width:100%}.classroom-session-pagination{justify-content:space-between}}

/* Classroom history keeps dense session data readable without stretching it edge to edge. */
.whiteboard-history-page{width:min(100%,1440px);margin:0 auto;padding:clamp(16px,2vw,28px);box-sizing:border-box}
.whiteboard-history-page .classroom-history-filters{margin:0 0 24px;padding:16px;display:grid;grid-template-columns:repeat(3,minmax(180px,1fr)) auto;align-items:end;gap:14px;border:1px solid #dbe3ee;border-radius:14px;background:#f8fafc}
.whiteboard-history-page .classroom-history-filters label{min-width:0;gap:7px;font-size:13px}
.whiteboard-history-page .classroom-history-filters select,.whiteboard-history-page .classroom-history-filters input,.whiteboard-history-page .classroom-history-filters button{min-height:44px;border-radius:10px}
.whiteboard-session-groups{gap:24px}
.whiteboard-session-group{padding:clamp(16px,2vw,24px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border-color:#cbd5e1;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.whiteboard-session-group>header{grid-column:1/-1;padding:0 0 18px;align-items:center;border-bottom:1px solid #e2e8f0}
.whiteboard-session-group>header h2{margin:0 0 5px;color:#0f172a;font-size:clamp(22px,2vw,30px);line-height:1.15}
.whiteboard-session-group>header p{margin:0;font-size:14px}
.whiteboard-session-group dl{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:14px 24px}
.whiteboard-session-group dd{font-size:14px;line-height:1.35}
.whiteboard-session-group>.classroom-star-summary{grid-column:1/-1;margin:0;padding:16px}
.whiteboard-session-group>.classroom-session-attendance,.whiteboard-session-group>.classroom-chat-history-page,.whiteboard-session-group>.classroom-manual-history{margin:0;padding:16px;min-width:0;border-radius:12px;box-sizing:border-box}
.whiteboard-session-group>.classroom-chat-history-page{max-width:none;background:#f8fafc;border:1px solid #dbe3ee}
.whiteboard-session-group>.classroom-chat-history-page h3{margin:0 0 10px;color:#1e3a8a;font-size:14px}
.classroom-chat-history-list{display:grid;gap:8px}
.classroom-chat-history-page .classroom-chat-history-list article{padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;background:#fff}
.classroom-chat-history-page .classroom-chat-history-list article:last-child{border-bottom:1px solid #e2e8f0}
.classroom-chat-history-page>.table-pagination{margin-top:12px;padding-top:12px}
.whiteboard-session-group>.classroom-manual-history,.whiteboard-session-group>.whiteboard-archive-grid,.whiteboard-session-group>.whiteboard-session-recordings{grid-column:1/-1}
.whiteboard-session-group>.whiteboard-archive-grid{margin-top:0}
.whiteboard-session-group>.whiteboard-archive-grid:empty{display:none}
.whiteboard-session-recordings{margin-top:0;display:block}
@media(max-width:1050px){
  .whiteboard-history-page .classroom-history-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .whiteboard-history-page .classroom-history-filters button{width:100%}
  .whiteboard-session-group{grid-template-columns:1fr}
  .whiteboard-session-group>*{grid-column:1!important}
}
@media(max-width:700px){
  .whiteboard-history-page{padding:12px}
  .whiteboard-history-page .classroom-history-filters{padding:12px;grid-template-columns:1fr;gap:10px}
  .whiteboard-session-group{padding:14px;gap:12px;border-radius:14px}
  .whiteboard-session-group>header{align-items:stretch;flex-direction:column}
  .whiteboard-session-group dl{width:100%;grid-template-columns:1fr 1fr}
  .whiteboard-session-group>.classroom-session-attendance,.whiteboard-session-group>.classroom-chat-history-page,.whiteboard-session-group>.classroom-manual-history{padding:12px}
  .classroom-chat-history-page article header{align-items:flex-start;flex-direction:column;gap:3px}
}
@media(max-width:420px){.whiteboard-session-group dl{grid-template-columns:1fr}}
:root[data-theme="dark"] .whiteboard-history-page .classroom-history-filters,:root[data-theme="dark"] .whiteboard-session-group>.classroom-chat-history-page{border-color:#334155;background:#111827}
:root[data-theme="dark"] .whiteboard-session-group>header h2{color:#f8fafc}
:root[data-theme="dark"] .classroom-chat-history-page .classroom-chat-history-list article{border-color:#334155;background:#0f172a}
.session-recording-browser{padding:12px;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc}.session-recording-browser>header{margin-bottom:10px;display:flex;align-items:end;justify-content:space-between;gap:12px}.session-recording-browser>header label{display:grid;gap:4px;color:#475569;font-size:11px;font-weight:800}.session-recording-browser select{min-width:150px;padding:8px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}.session-recording-links{display:flex;flex-wrap:wrap;gap:8px}.recording-segment-list{margin:0;padding:0;display:grid;gap:7px;list-style:none}.recording-segment-list a{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #dbe3ee;border-radius:9px;color:#172033;background:#fff;text-decoration:none}.recording-segment-list a span{font-weight:850}.recording-segment-list a small{color:#64748b;text-align:right}@media(max-width:480px){.session-recording-browser>header{align-items:stretch;flex-direction:column}.session-recording-browser>header label,.session-recording-browser select{width:100%}.recording-segment-list a{align-items:flex-start;flex-direction:column}.recording-segment-list a small{text-align:left}}
.classroom-tile-layout .whiteboard-toolbar{display:none!important}.classroom-tile-layout .classroom-workspace{grid-template-columns:1fr!important}.classroom-tile-layout .classroom-main{grid-column:1 / -1}
.video-mic-status{display:none!important}.video-device-indicator{position:absolute;left:4px;top:4px;z-index:5;width:21px;height:21px;padding:0;display:grid;place-items:center;border:1px solid #cbd5e1;border-radius:6px;color:#0f172a;background:#fff;box-shadow:0 2px 7px rgba(15,23,42,.3);font-size:11px;font-weight:800;line-height:1;pointer-events:none}
.enable-participant-audio{position:absolute;left:50%;top:50%;z-index:12;width:max-content;max-width:calc(100% - 12px);padding:6px 8px;border:1px solid rgba(255,255,255,.8);border-radius:999px;color:#fff;background:rgba(37,99,235,.94);box-shadow:0 4px 14px rgba(15,23,42,.35);font-size:9px;font-weight:850;line-height:1.1;transform:translate(-50%,-50%)}
.remote-participant-audio{display:none}
.participant-audio-unavailable{position:absolute;left:50%;top:50%;z-index:12;width:max-content;max-width:calc(100% - 12px);padding:5px 7px;border-radius:8px;color:#fff;background:rgba(185,28,28,.92);font-size:8px;font-weight:850;line-height:1.15;text-align:center;transform:translate(-50%,-50%)}
.participant-disconnected{position:absolute;inset:0;z-index:11;padding:8px;display:grid;place-items:center;color:#fff;background:rgba(15,23,42,.86);font-size:11px;font-weight:900;text-align:center}
.video-tile.is-disconnected video{visibility:hidden}
.mobile-student-whiteboard-focus .video-grid .video-tile[data-host="true"] .video-mic-status{top:5px;left:5px;width:22px;height:22px;display:grid!important;transform:none;font-size:11px}
.mobile-student-whiteboard-focus .video-grid .video-tile[data-host="true"]>span{z-index:13}
.manual-page-stage{position:relative;width:auto;max-width:100%;height:auto;max-height:100%;display:grid;place-items:center;touch-action:none}.manual-page-stage img,.manual-page-stage canvas{grid-area:1 / 1;width:100%;height:100%;object-fit:contain}.manual-page-stage canvas{z-index:2}.manual-teacher-pointer{position:absolute;z-index:3;width:6px;height:38px;border:2px solid #fff;border-radius:999px;background:#ef4444;box-shadow:0 2px 8px rgba(0,0,0,.55);transform:translate(-50%,-8%) rotate(-38deg);transform-origin:50% 8%;pointer-events:none}.manual-teacher-pointer::after{content:'';position:absolute;left:50%;top:-7px;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#ef4444;transform:translateX(-50%);box-shadow:0 1px 4px rgba(0,0,0,.4)}.manual-teacher-pointer[hidden]{display:none}
.manual-switcher{min-width:220px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800}.manual-switcher select{min-width:180px;max-width:320px;padding:9px 34px 9px 11px;border:1px solid #bfdbfe;border-radius:9px;background:#fff;color:#0f172a;font-weight:800}@media(max-width:700px){.manual-switcher{width:100%;min-width:0}.manual-switcher select{min-width:0;max-width:none;flex:1}.shared-class-manual header{flex-wrap:wrap}.manual-page-controls{width:100%}}
.manual-annotation-tools{padding:4px;display:flex;flex-wrap:wrap;gap:4px;border:1px solid rgba(191,219,254,.55);border-radius:10px;background:rgba(15,23,42,.18)}.manual-annotation-tools button{width:34px;height:34px;padding:0;display:grid;place-items:center;border:1px solid transparent;border-radius:7px;color:#0f172a;background:#fff;font-size:17px;line-height:1}.manual-annotation-tools button.active{border-color:#fca5a5;color:#fff;background:#dc2626;box-shadow:0 0 0 2px rgba(254,202,202,.4)}.manual-page-stage[data-manual-tool="hand"] canvas{cursor:grab}.manual-page-stage[data-manual-tool="hand"] canvas:active{cursor:grabbing}.manual-page-stage[data-manual-tool="erase"] canvas{cursor:crosshair}@media(max-width:700px){.manual-annotation-tools{width:100%;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))}.manual-annotation-tools button{width:100%;height:36px}.manual-page-controls{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.manual-page-controls>*{min-width:0;width:100%;margin:0}.manual-page-controls button{white-space:normal}}
#toggle-student-manual-pointers{width:auto;min-width:96px;padding:0 8px;font-size:11px;white-space:nowrap}#toggle-student-manual-pointers.enabled{border-color:#86efac;color:#166534;background:#dcfce7}.student-manual-view .shared-class-manual-pages{pointer-events:auto}.student-manual-view .manual-page-stage{cursor:crosshair;touch-action:none}.student-manual-pointer{position:absolute;z-index:5;display:flex;align-items:flex-start;gap:3px;pointer-events:none;transform:translate(1px,1px)}.student-manual-pointer[hidden]{display:none}.student-manual-pointer i{color:#2563eb;font-size:24px;line-height:1;filter:drop-shadow(0 1px 1px #fff)}.student-manual-pointer strong{margin-top:17px;padding:3px 6px;border:1px solid #fff;border-radius:6px;color:#fff;background:#1d4ed8;box-shadow:0 2px 7px rgba(15,23,42,.3);font-size:10px;line-height:1;white-space:nowrap}@media(max-width:700px){#toggle-student-manual-pointers{grid-column:span 2;min-width:0;width:100%}}

/* Application themes and responsive sidebar navigation. */
:root { color-scheme:light; }
:root[data-theme="dark"] { color-scheme:dark; }
:root[data-theme="dark"] body { color:#e2e8f0; background:#0b1120; }
:root[data-theme="dark"] .sidebar-page-content,
:root[data-theme="dark"] .crud-page,
:root[data-theme="dark"] .dash-shell { background:#0b1120; }
:root[data-theme="dark"] .app-navbar,
:root[data-theme="dark"] .page-topbar,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .checkbox-card-fieldset,
:root[data-theme="dark"] .checkbox-card-fieldset label,
:root[data-theme="dark"] .class-manual-grid>a { color:#e2e8f0; border-color:#334155; background:#111827; }
:root[data-theme="dark"] .page-topbar h1,
:root[data-theme="dark"] .panel h2,
:root[data-theme="dark"] .checkbox-card-fieldset legend,
:root[data-theme="dark"] .checkbox-card-fieldset span { color:#f8fafc; }
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .page-topbar p:not(.dash-eyebrow),
:root[data-theme="dark"] .data-table th { color:#94a3b8; }
:root[data-theme="dark"] .data-table td { border-color:#334155; }
:root[data-theme="dark"] .data-table tbody tr:hover { background:#1e293b; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select { color:#e2e8f0; border-color:#475569; background:#0f172a; }
:root[data-theme="dark"] .checkbox-card-fieldset label:has(input:checked) { border-color:#60a5fa; background:#172554; box-shadow:0 0 0 1px #60a5fa; }

@media(max-width:760px){
  .dash-nav-group-title{min-height:48px;padding:11px 12px}
  .dash-subnav{padding-left:18px}
  .dash-subnav a{min-height:46px}
  .sidebar-theme-toggle{flex:0 0 auto;min-height:48px}
}
@media(max-width:520px){
  .page-topbar{align-items:stretch;flex-direction:column}
  .page-topbar>div:last-child,.page-topbar>button{width:100%}
  .page-topbar>div:last-child button{width:100%}
  .questionnaires-panel{padding:14px}
.questionnaire-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.questionnaire-reader-modal .modal-backdrop{position:fixed}
.questionnaire-reader{width:min(1680px,calc(100vw - 24px));max-width:1680px;max-height:96vh;overflow:auto;padding:0}
.questionnaire-source-pages{padding:20px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.questionnaire-source-pages>p{margin:4px 0 16px;color:#64748b}
.questionnaire-source-pages>div{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.questionnaire-source-pages figure{flex:0 0 min(1400px,96%);margin:0;scroll-snap-align:start;display:grid;gap:7px}
.questionnaire-source-pages img{display:block;width:100%;max-height:78vh;object-fit:contain;border:1px solid #cbd5e1;border-radius:12px;background:#fff}
.questionnaire-source-pages figcaption{text-align:center;color:#64748b;font-size:13px}
.drawable-worksheet{align-content:start}
.worksheet-drawing-toolbar{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #cbd5e1;border-bottom:0;border-radius:12px 12px 0 0;background:#fff;position:sticky;top:0;z-index:3}
.worksheet-drawing-toolbar button{padding:8px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;color:#334155}
.worksheet-drawing-toolbar button.active{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}
.worksheet-canvas-stage{position:relative;width:100%;line-height:0;background:#fff}
.worksheet-canvas-stage img{max-height:none;border-radius:0 0 12px 12px}
.worksheet-canvas-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none;border-radius:0 0 12px 12px}
.questionnaire-question-list,.questionnaire-review-list{display:grid;gap:14px;padding:22px 24px}
.questionnaire-question-list>article,.questionnaire-review-list>article{padding:18px;border:1px solid #dbe3ee;border-radius:14px;background:#fff}
.questionnaire-question-list article>header{display:flex;align-items:flex-start;gap:12px}
.questionnaire-question-list article>header>span{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#2563eb;color:#fff;font-weight:800}
.questionnaire-question-list article form{display:grid;gap:12px;margin:14px 0 0 42px}
.questionnaire-question-list fieldset{display:grid;gap:8px;border:0;padding:0}
.questionnaire-question-list fieldset label{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #dbe3ee;border-radius:10px}
.questionnaire-question-list textarea{width:100%;min-height:84px;padding:11px;border:1px solid #cbd5e1;border-radius:9px}
.questionnaire-question-list article form>button{justify-self:start}
.questionnaire-answer-reference{margin:12px 0 0 42px;padding:10px 12px;border-radius:9px;background:#eff6ff;color:#1d4ed8}
.answer-result{font-weight:800}.answer-result.correct{color:#15803d}.answer-result.incorrect{color:#b91c1c}
.exam-media-gate{margin:28px auto;padding:34px;width:min(620px,calc(100% - 32px));display:grid;justify-items:center;gap:12px;text-align:center;border:1px solid #cbd5e1;border-radius:18px;background:#f8fafc}
.exam-media-gate h3,.exam-media-gate p{margin:0}.exam-media-gate p{color:#64748b}.exam-media-gate .error{color:#b91c1c}
.exam-media-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#dbeafe;font-size:30px}
.exam-proctor-status{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 24px;background:#0f172a;color:#fff;box-shadow:0 5px 15px #0f172a33}
.exam-proctor-status span{display:flex;align-items:center;gap:8px}.exam-proctor-status i{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #22c55e33}
.exam-proctor-status strong{margin-left:auto;font-variant-numeric:tabular-nums}
.exam-proctor-status video{width:86px;height:52px;border-radius:8px;object-fit:cover;background:#000}
.questionnaire-availability{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;justify-content:start;gap:7px 10px;min-width:230px}
.questionnaire-availability .availability-badge{display:inline-flex;align-items:center;gap:7px;width:max-content;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;font-style:normal;background:#eff6ff;color:#1d4ed8}
.questionnaire-availability .availability-badge i{width:7px;height:7px;border-radius:50%;background:currentColor}.questionnaire-availability .availability-badge.is-open{background:#ecfdf5;color:#047857}.questionnaire-availability .availability-badge.is-scheduled{background:#fff7ed;color:#c2410c}
.questionnaire-availability>small{grid-column:1/2;display:flex;align-items:center;gap:5px;color:#64748b;font-size:11px;white-space:nowrap}.questionnaire-availability>small b{color:#94a3b8;font-weight:500}.questionnaire-availability>em{grid-column:2;grid-row:1/3;align-self:center;padding:5px 8px;border-radius:8px;background:#f1f5f9;color:#475569;font-size:12px;font-weight:800;font-style:normal}
.questionnaires-panel,.questionnaires-panel .data-table-wrap{overflow:visible}.questionnaire-action-menu{position:relative;display:flex;justify-content:center}.listing-actions .questionnaire-action-trigger,.questionnaire-action-trigger{width:34px;height:32px;min-height:32px;padding:0;border:1px solid #dfe3e8;border-radius:5px;background:#fff;color:#344054;font-size:14px;font-weight:900;line-height:1;letter-spacing:1px;overflow:visible;box-shadow:none}.questionnaire-action-trigger:hover{border-color:#98a2b3;background:#f9fafb;color:#101828;transform:none}.questionnaire-action-trigger[aria-expanded="true"]{border-color:#2e7de9;background:#fff;color:#175cd3;box-shadow:0 0 0 2px #2e7de91f}
.questionnaire-action-popover{position:absolute;z-index:30;top:38px;right:0;width:190px;padding:8px;border:1px solid #e4e7ec;border-radius:12px;background:#fff;box-shadow:0 10px 28px #10182824}.questionnaire-action-popover>p{margin:2px 8px 7px;color:#667085;font-size:10px;font-weight:700;letter-spacing:.06em}.questionnaire-action-popover>button{position:relative;z-index:1;width:100%;height:38px;min-height:38px;padding:0 9px;display:flex;align-items:center;gap:9px;border:0;border-radius:7px;background:transparent;color:#344054;text-align:left;box-shadow:none;overflow:visible}.questionnaire-action-popover>button:hover{background:#f2f4f7;transform:none}.questionnaire-action-popover>button:disabled{cursor:not-allowed;opacity:.45}.questionnaire-action-popover strong{color:#344054;font-size:12px;font-weight:600}.action-menu-icon{display:grid;place-items:center;flex:0 0 20px;height:20px;color:#475467;font-size:16px;font-weight:500}
:root[data-theme="dark"] .questionnaire-action-trigger{border-color:#475569;background:#111827;color:#cbd5e1}:root[data-theme="dark"] .questionnaire-action-trigger:hover{border-color:#64748b;background:#1e293b;color:#fff}:root[data-theme="dark"] .questionnaire-action-popover{border-color:#334155;background:#111827}:root[data-theme="dark"] .questionnaire-action-popover>p{color:#94a3b8}:root[data-theme="dark"] .questionnaire-action-popover>button:hover{background:#1e293b}:root[data-theme="dark"] .questionnaire-action-popover strong,:root[data-theme="dark"] .action-menu-icon{color:#f8fafc}
.questionnaire-schedule-modal .modern-form{width:min(760px,calc(100vw - 28px))}.questionnaire-schedule-modal .modern-form-section{padding-top:22px}
.schedule-mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.schedule-mode-picker>label{position:relative;display:flex;gap:12px;padding:16px;border:1.5px solid #dbe3ee;border-radius:14px;background:#fff;cursor:pointer;transition:.16s ease}.schedule-mode-picker>label:hover{border-color:#93c5fd;background:#f8fbff}.schedule-mode-picker>label.selected{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 3px #2563eb12}.schedule-mode-picker input{width:18px;height:18px;margin:2px 0 0;accent-color:#2563eb}.schedule-mode-picker span{display:grid;gap:4px}.schedule-mode-picker strong{color:#172033;font-size:14px}.schedule-mode-picker small{color:#64748b;font-size:12px;line-height:1.4}
.schedule-fields{display:grid;gap:16px;margin-top:18px;padding:18px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}.duration-input{display:flex;align-items:stretch}.duration-input input{border-radius:9px 0 0 9px!important}.duration-input span{display:flex;align-items:center;padding:0 14px;border:1px solid #cbd5e1;border-left:0;border-radius:0 9px 9px 0;background:#eef2f7;color:#475569;font-size:13px;font-weight:700}.schedule-date-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.schedule-arrow{margin-top:24px;color:#94a3b8;font-size:22px}
.schedule-security-note{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 14px;border-radius:11px;background:#f0fdf4;color:#166534}.schedule-security-note>span{font-size:11px;line-height:20px}.schedule-security-note p{display:grid;gap:2px;margin:0;font-size:12px;line-height:1.4}.schedule-security-note strong{font-size:13px}
.exam-media-gate{position:relative;overflow:hidden;border:0;background:linear-gradient(145deg,#f8fbff,#eef5ff);box-shadow:inset 0 0 0 1px #dbeafe,0 18px 45px #1e3a8a14}.exam-media-gate:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#2563eb,#7c3aed)}.exam-media-gate .app-button{margin-top:6px;min-width:285px}.exam-media-icon{box-shadow:0 8px 24px #2563eb26}
:root[data-theme="dark"] .schedule-mode-picker>label{border-color:#334155;background:#111827}:root[data-theme="dark"] .schedule-mode-picker>label.selected{border-color:#60a5fa;background:#172554}:root[data-theme="dark"] .schedule-mode-picker strong{color:#f8fafc}:root[data-theme="dark"] .schedule-fields{border-color:#334155;background:#111827}:root[data-theme="dark"] .duration-input span{border-color:#475569;background:#1e293b;color:#cbd5e1}
.questionnaire-review-list>article{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:12px}
.questionnaire-review-list>article>small{grid-column:1/-1;color:#64748b}
@media(max-width:700px){.questionnaire-header-actions{width:100%}.questionnaire-header-actions>*{flex:1}.questionnaire-reader{width:calc(100vw - 16px)}.questionnaire-source-pages,.questionnaire-question-list,.questionnaire-review-list{padding:16px}.questionnaire-review-list>article{grid-template-columns:1fr}.questionnaire-question-list article form,.questionnaire-answer-reference{margin-left:0}.exam-proctor-status{padding:8px 12px;flex-wrap:wrap}.exam-proctor-status video{width:64px;height:42px}.schedule-mode-picker{grid-template-columns:1fr}.schedule-date-grid{grid-template-columns:1fr}.schedule-arrow{display:none}.exam-media-gate{padding:28px 20px}.exam-media-gate .app-button{min-width:0;width:100%}.questionnaire-availability>small{display:grid;white-space:normal}.questionnaire-availability>small b{display:none}.questionnaire-action-menu{justify-content:flex-start}.questionnaire-action-popover{right:auto;left:0}.questionnaire-action-popover:before{right:auto;left:14px}}
}

/* Shared listing system: used by TanStack tables and legacy data-table screens. */
.panel:has(.data-table){padding:0;overflow:hidden;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.07)}
.panel:has(.data-table)>h2{margin:0;padding:20px 24px 8px}
.listing-table{min-width:0}
.listing-toolbar{padding:14px 24px 20px;display:flex;align-items:end;flex-wrap:wrap;gap:14px;background:#f8fafc}
.listing-toolbar label{display:grid;gap:6px;color:#475569;font-size:12px;font-weight:800}
.listing-toolbar label:first-child{width:min(420px,100%)}
.listing-toolbar input,.listing-toolbar select,.table-toolbar input,.table-toolbar select{min-height:44px;padding:10px 13px;border:1px solid #cbd5e1;border-radius:9px;color:#172033;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04);font-size:14px}
.listing-toolbar select{min-width:90px}
.data-table-wrap{background:#fff}
.data-table{min-width:720px;background:#fff}
.data-table thead{background:#f8fafc}
.data-table th{padding:14px 20px;color:#64748b;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;font-size:11px;font-weight:850;letter-spacing:.07em}
.data-table td{padding:18px 20px;color:#64748b;border-bottom:1px solid #e5e7eb;font-size:14px}
.data-table td strong{color:#172033}
.data-table tbody tr{transition:background .15s ease}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:#f8fafc}
.listing-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.listing-actions form{margin:0}
.attendance-action-in{color:#047857;background:#d1fae5}
.attendance-action-out{color:#9a3412;background:#ffedd5}
.attendance-page .panel>form[method="get"]{padding:12px 24px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid #e2e8f0;background:#f8fafc}
.attendance-page .panel>form[method="get"] input,.attendance-page .panel>form[method="get"] select{min-height:42px;padding:9px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff}
.listing-empty{margin:0;padding:36px 20px;color:#64748b;text-align:center}
.table-pagination{min-height:64px;padding:12px 20px;background:#f8fafc}
.table-pagination>div{gap:0}
.table-pagination>div button{min-width:40px;height:40px;padding:0;border-radius:0}
.table-pagination>div button:first-child{border-radius:9px 0 0 9px}
.table-pagination>div button:last-child{border-radius:0 9px 9px 0}
.table-pagination>div button+button{margin-left:-1px}
.table-pagination>div span{padding:0 12px;white-space:nowrap}
:root[data-theme="dark"] .panel:has(.data-table),:root[data-theme="dark"] .listing-toolbar,:root[data-theme="dark"] .data-table-wrap,:root[data-theme="dark"] .data-table,:root[data-theme="dark"] .data-table thead,:root[data-theme="dark"] .table-pagination{background:#111827}
:root[data-theme="dark"] .listing-toolbar{border-color:#334155;background:#0f172a}
:root[data-theme="dark"] .attendance-page .panel>form[method="get"]{border-color:#334155;background:#0f172a}
:root[data-theme="dark"] .listing-toolbar label,:root[data-theme="dark"] .data-table td{color:#94a3b8}
:root[data-theme="dark"] .table-role-filter{color:#94a3b8}
:root[data-theme="dark"] .app-modal .group-member-chip{border-color:#334155;background:#111827}
:root[data-theme="dark"] .app-modal .group-member-chip:has(input:checked){border-color:#60a5fa;background:#172554;box-shadow:0 0 0 1px #60a5fa}
:root[data-theme="dark"] .app-modal .group-member-chip strong{color:#f8fafc}
:root[data-theme="dark"] .member-role-section h3,:root[data-theme="dark"] .member-picker-filters label>span{color:#cbd5e1}
:root[data-theme="dark"] .app-modal select{color:#e2e8f0!important;border-color:#475569!important;background-color:#0f172a!important}
:root[data-theme="dark"] .data-table td strong{color:#f8fafc}
@media(max-width:700px){
  .panel:has(.data-table){border-radius:14px}
  .panel:has(.data-table)>h2{padding:17px 16px 8px}
  .listing-toolbar{padding:12px 16px 16px;display:grid;grid-template-columns:minmax(0,1fr) 92px}
  .listing-toolbar label:first-child{width:auto}
  .listing-toolbar input,.listing-toolbar select{width:100%;min-width:0}
  .table-toolbar-controls{width:100%;grid-template-columns:minmax(0,1fr) 125px}
  .table-toolbar-controls.has-group-filter{grid-template-columns:minmax(0,1fr) minmax(125px,160px)}
  .table-toolbar-controls.has-group-filter .table-search{grid-column:1 / -1}
  .listing-table .data-table{min-width:0}
  .listing-table .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .listing-table .data-table tbody,.listing-table .data-table tr,.listing-table .data-table td{display:block;width:100%}
  .listing-table .data-table tr{padding:10px 16px;border-bottom:1px solid #e2e8f0}
  .listing-table .data-table td{padding:8px 0;display:grid;grid-template-columns:minmax(100px,34%) minmax(0,1fr);gap:12px;border:0}
  .listing-table .data-table td::before{content:attr(data-label);color:#64748b;font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
  .table-pagination{align-items:stretch;gap:10px}
  .table-pagination>div{width:100%;justify-content:center}
  .table-pagination>div button{flex:0 1 48px}
}
@media(max-width:390px){.table-toolbar-controls{grid-template-columns:minmax(0,1fr) 112px;gap:8px}.table-role-filter select{padding-inline:9px}}
@media(max-width:700px){.member-picker-heading.member-picker-filters{grid-template-columns:1fr 1fr}.member-picker-heading.member-picker-filters label:first-child{grid-column:1 / -1}.member-role-section>div{grid-template-columns:1fr}}
@media(orientation:landscape) and (max-height:560px){.listing-toolbar{padding-block:10px}.data-table td{padding-block:12px}.table-pagination{min-height:52px;padding-block:7px}}

/* Standard reactive button system. */
.app-button,.primary-action,.secondary-action,.tertiary-action,.button-link,.modal-actions button,.listing-actions button,.crud-row-actions>button{position:relative;isolation:isolate;height:44px;min-height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;box-sizing:border-box;font:inherit;font-size:13px;font-weight:850;line-height:1.15;text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease}
.page-header-actions{display:flex!important;align-items:center;justify-content:flex-end;flex-wrap:nowrap!important;gap:10px}
.page-header-actions .app-button,.page-header-actions .button-link,.page-header-actions button{width:auto!important;min-width:max-content;margin:0!important;flex:0 0 auto}
.crud-page-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:28px;row-gap:18px}
.crud-page-header>div:first-child{min-width:0;max-width:100%}
.crud-page-header>div:first-child p{max-width:100%}
@media(max-width:1450px){.crud-page-header{grid-template-columns:minmax(0,1fr)}.crud-page-header .page-header-actions{justify-content:flex-start}}
@media(max-width:760px){.page-header-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr;align-items:stretch}.page-header-actions .app-button,.page-header-actions .button-link,.page-header-actions button{width:100%!important;min-width:0}.page-header-actions>*:last-child:nth-child(odd){grid-column:1 / -1}}
.app-button::after,.primary-action::after,.secondary-action::after,.tertiary-action::after,.button-link::after,.modal-actions button::after,.listing-actions button::after,.crud-row-actions>button::after{content:"";position:absolute;inset:50% auto auto 50%;z-index:-1;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.26);transform:translate(-50%,-50%);transition:width .28s ease,height .28s ease}
.app-button:hover,.primary-action:hover,.secondary-action:hover,.tertiary-action:hover,.button-link:hover,.modal-actions button:hover,.listing-actions button:hover,.crud-row-actions>button:hover{transform:translateY(-2px)}
.app-button:hover::after,.primary-action:hover::after,.secondary-action:hover::after,.tertiary-action:hover::after,.button-link:hover::after,.modal-actions button:hover::after,.listing-actions button:hover::after,.crud-row-actions>button:hover::after{width:240%;height:400%}
.app-button:active,.primary-action:active,.secondary-action:active,.tertiary-action:active,.button-link:active,.modal-actions button:active,.listing-actions button:active,.crud-row-actions>button:active{transform:translateY(1px) scale(.98);box-shadow:none}
.app-button:focus-visible,.primary-action:focus-visible,.secondary-action:focus-visible,.tertiary-action:focus-visible,.button-link:focus-visible,.modal-actions button:focus-visible,.listing-actions button:focus-visible,.crud-row-actions>button:focus-visible{outline:3px solid rgba(37,99,235,.25);outline-offset:2px}
.button-primary,.primary-action,.button-link:not(.secondary-action):not(.tertiary-action),.modal-actions button[type="submit"]{border:1px solid #2563eb;color:#fff;background:#2563eb;box-shadow:0 7px 16px rgba(37,99,235,.24)}
.button-primary:hover,.primary-action:hover,.button-link:not(.secondary-action):not(.tertiary-action):hover,.modal-actions button[type="submit"]:hover{border-color:#1d4ed8;background:#1d4ed8;box-shadow:0 10px 22px rgba(37,99,235,.3)}
.button-secondary,.secondary-action{border:1px solid #cbd5e1;color:#334155;background:#fff;box-shadow:0 4px 10px rgba(15,23,42,.07)}
.button-secondary::after,.secondary-action::after,.button-tertiary::after,.tertiary-action::after{background:rgba(37,99,235,.1)}
.button-secondary:hover,.secondary-action:hover{border-color:#94a3b8;color:#172033;background:#f8fafc;box-shadow:0 8px 18px rgba(15,23,42,.11)}
.button-tertiary,.tertiary-action{border:1px solid transparent;color:#2563eb;background:transparent;box-shadow:none}
.button-tertiary:hover,.tertiary-action:hover{color:#1d4ed8;background:#eff6ff}
.app-button:disabled,.primary-action:disabled,.secondary-action:disabled,.tertiary-action:disabled,button:disabled{cursor:not-allowed;opacity:.5;transform:none!important;box-shadow:none!important}
.app-button[aria-busy="true"]{color:transparent!important;pointer-events:none}
.app-button[aria-busy="true"]::before{content:"";position:absolute;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;color:#fff;animation:button-spin .7s linear infinite}
.button-secondary[aria-busy="true"]::before,.button-tertiary[aria-busy="true"]::before{color:#2563eb}
@keyframes button-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.app-button,.primary-action,.secondary-action,.tertiary-action,.button-link,.modal-actions button,.listing-actions button,.crud-row-actions>button{transition:none}.app-button::after,.primary-action::after,.secondary-action::after,.tertiary-action::after,.button-link::after,.modal-actions button::after,.listing-actions button::after,.crud-row-actions>button::after{display:none}}
:root[data-theme="dark"] .button-secondary,:root[data-theme="dark"] .secondary-action{border-color:#475569;color:#e2e8f0;background:#1e293b}
:root[data-theme="dark"] .button-secondary:hover,:root[data-theme="dark"] .secondary-action:hover{border-color:#64748b;color:#fff;background:#334155}
:root[data-theme="dark"] .button-tertiary,:root[data-theme="dark"] .tertiary-action{color:#93c5fd}

/* Keep every form footer action on one visual baseline. Cancel is frequently an
   anchor while Save is a button, so normalize both elements at the container. */
.modal-actions,
.modern-form-actions {
  align-items: center;
  flex-wrap: wrap;
}

.modal-actions > .app-button,
.modal-actions > .button-link,
.modal-actions > button,
.modern-form-actions > .app-button,
.modern-form-actions > .button-link,
.modern-form-actions > button {
  align-self: center;
  width: auto;
  min-width: 142px;
  height: 44px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 18px;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .modal-actions,
  .modern-form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
  }

  .modal-actions > .app-button,
  .modal-actions > .button-link,
  .modal-actions > button,
  .modern-form-actions > .app-button,
  .modern-form-actions > .button-link,
  .modern-form-actions > button {
    align-self: stretch;
    width: 100%;
    min-width: 0;
  }
}
.password-field{position:relative;min-width:0;width:100%;display:block}
.password-field>input{width:100%;padding-right:48px!important;box-sizing:border-box}
.password-field>.password-visibility-toggle{position:absolute;top:50%;right:6px;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;margin:0!important;padding:0!important;display:grid;place-items:center;border:0!important;border-radius:8px;color:#64748b;background:transparent!important;box-shadow:none!important;transform:translateY(-50%)!important;z-index:2}
.password-field>.password-visibility-toggle:hover{color:#2563eb;background:#eff6ff!important}
.password-field>.password-visibility-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .password-field>.password-visibility-toggle{color:#94a3b8}
:root[data-theme="dark"] .password-field>.password-visibility-toggle:hover{color:#bfdbfe;background:#1e293b!important}
@media(max-width:700px){
  .classroom-workspace>.whiteboard-toolbar{width:100%;max-width:100vw;padding:7px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:7px;overflow-x:auto;overflow-y:hidden;border-radius:12px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .classroom-workspace>.whiteboard-toolbar>*{flex:0 0 auto}
  .classroom-workspace>.whiteboard-toolbar .tool-button{width:42px;height:42px;flex-basis:42px}
  .local-video{isolation:isolate}
  .local-video .own-media-controls{position:absolute!important;right:5px!important;bottom:5px!important;z-index:50!important;display:flex!important;visibility:visible!important;opacity:1!important;gap:5px!important;pointer-events:auto!important;transform:none!important}
  .local-video .own-media-controls button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;display:grid!important;place-items:center!important;border:2px solid #fff!important;border-radius:999px!important;color:#fff!important;background:#0f172a!important;font-size:0!important;line-height:1!important;visibility:visible!important;opacity:1!important;box-shadow:0 2px 8px rgba(0,0,0,.55)!important}
  .local-video .own-media-controls button svg{width:17px!important;height:17px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;pointer-events:none!important}
  .local-video .own-media-controls button.off{background:#dc2626!important}
}

/* Keep the classroom inside Android Chrome's layout viewport. */
.classroom-body,
.classroom-body *,
.classroom-body *::before,
.classroom-body *::after{box-sizing:border-box}
.classroom-body{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
.classroom-shell,.classroom-header,.classroom-workspace,.classroom-main,.classroom-content,.video-grid{min-width:0;max-width:100%}
@media(max-width:700px){
  .classroom-shell,.classroom-header,.mobile-classroom-tabs,.classroom-workspace,.classroom-main,.classroom-content{width:100%;max-width:100%}
  .classroom-header{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:9px 10px;align-items:center}
  .classroom-title-block{grid-column:1 / -1;grid-row:1;text-align:center}
  .classroom-back{grid-column:1;grid-row:2;min-width:0;max-width:100%;overflow:hidden;font-size:10px!important;text-overflow:ellipsis;white-space:nowrap}
  .classroom-header-actions{grid-column:2;grid-row:2;min-width:0;max-width:100%;gap:5px}
  .classroom-header h1{font-size:21px}
  .classroom-status{min-width:0;padding:5px 7px;font-size:10px}
  .classroom-status #connection-label{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .classroom-end-button{padding:6px 8px;font-size:10px}
  .classroom-workspace>.whiteboard-toolbar{max-width:100%;min-width:0;padding:7px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:center;gap:7px;overflow:visible}
  .classroom-workspace>.whiteboard-toolbar>*{width:100%;min-width:0;max-width:100%;margin:0;justify-self:stretch}
  .classroom-workspace>.whiteboard-toolbar .tool-button{width:100%;height:42px;min-width:0}
  .classroom-workspace>.whiteboard-toolbar .whiteboard-color-picker{height:42px;display:grid;place-items:center}
  .classroom-workspace>.whiteboard-toolbar .whiteboard-color-picker>span{font-size:20px}
  .classroom-workspace>.whiteboard-toolbar .whiteboard-color-picker>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .classroom-workspace>.whiteboard-toolbar>label:not(.whiteboard-color-picker){grid-column:span 3;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;font-size:11px}
  .classroom-workspace>.whiteboard-toolbar>label:not(.whiteboard-color-picker) input{width:100%;min-width:0}
  .classroom-workspace>.whiteboard-toolbar>#open-whiteboard-history,
  .classroom-workspace>.whiteboard-toolbar>#clear-board{grid-column:span 1;height:42px;padding:5px;font-size:10px}
  .classroom-layout-controls,.call-controls,.student-request-controls{min-width:0;max-width:100%}
  .classroom-layout-controls>*{min-width:0;max-width:100%}
  .classroom-tile-layout .video-grid,.classroom-whiteboard-layout .video-grid{width:100%;max-width:100%}
  .shared-class-manual.student-manual-view{right:0;width:auto;max-width:100%}
}

/* Android phones range from compact 320px screens to wide/landscape devices. */
@media(max-width:480px){
  .classroom-workspace{padding:6px;gap:7px}
  .classroom-main{gap:8px}
  .classroom-layout-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:6px}
  .classroom-layout-controls>button,.classroom-layout-controls>div{width:100%;min-width:0;margin:0;white-space:normal}
  .classroom-layout-controls>button{padding:8px 6px;font-size:11px;line-height:1.2}
  #toggle-classroom-whiteboard{grid-column:1 / -1}
  .student-request-controls{gap:6px}
  .student-request-controls button{min-width:0;padding:9px 5px;font-size:clamp(10px,3.2vw,13px);line-height:1.15;white-space:normal}
  .classroom-tile-layout .video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:2px 2px 14px}
  .video-tile>span{left:4px;bottom:4px;max-width:48%;padding:2px 4px;font-size:9px}
  .video-star-counter{top:4px;right:4px;padding:3px 5px;font-size:9px}
  .local-video .own-media-controls{right:4px!important;bottom:4px!important;gap:3px!important}
  .local-video .own-media-controls button{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
  .local-video .own-media-controls button svg{width:15px!important;height:15px!important}
  .classroom-chat{left:8px;right:8px;width:auto;max-width:none}
  .classroom-video-library{inset:58px 6px 8px;padding:12px}
  .shared-class-manual:not(.student-manual-view){inset:50px 3px 4px}
}
@media(max-width:380px){
  .classroom-header{padding:7px 8px}
  .classroom-header h1{font-size:19px}
  .classroom-header .dash-eyebrow{font-size:7px}
  .classroom-status #connection-label{max-width:54px}
  .classroom-workspace>.whiteboard-toolbar{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:6px}
  .classroom-workspace>.whiteboard-toolbar>label:not(.whiteboard-color-picker){grid-column:span 2}
  .classroom-layout-controls{grid-template-columns:1fr 1fr}
  .classroom-tile-layout .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .classroom-whiteboard-layout .video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:330px){
  .classroom-back{max-width:120px}
  .classroom-status #connection-label{display:none}
  .classroom-workspace>.whiteboard-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .classroom-layout-controls{grid-template-columns:1fr}
  .classroom-layout-controls>*{grid-column:1!important}
}
@media(max-height:500px) and (orientation:landscape){
  .classroom-header{min-height:44px;padding:5px 10px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .classroom-title-block{grid-column:2;grid-row:1}
  .classroom-back{grid-column:1;grid-row:1}
  .classroom-header-actions{grid-column:3;grid-row:1}
  .classroom-workspace{padding:5px}
  .classroom-whiteboard-layout .video-grid{max-height:38dvh}
  .classroom-whiteboard-layout .whiteboard-stage{min-height:0}
  .classroom-chat{height:calc(100dvh - 80px);bottom:62px}
}

/* Wide phones cross the normal mobile width breakpoint in landscape. Keep
   camera tiles in independent square tracks so their mobile minimum heights
   cannot spill into or overlap adjacent videos. */
@media (orientation:landscape) and (max-height:500px) and (max-width:950px) and (hover:none) and (pointer:coarse){
  body:not(.tablet-classroom-layout) .classroom-tile-layout .video-grid{
    padding:3px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
    grid-auto-rows:auto;
    align-items:start;
    gap:6px;
  }
  body:not(.tablet-classroom-layout) .video-grid .video-tile,
  body:not(.tablet-classroom-layout) .video-grid .video-tile video{
    width:100%;
    min-width:0;
    min-height:0;
    max-width:100%;
    aspect-ratio:1 / 1;
  }
  body:not(.tablet-classroom-layout) .video-grid .video-tile video{height:100%;object-fit:cover}
}

/* Touch phones, including iPhone landscape: keep the primary tools in two rows. */
@media(max-width:950px) and (hover:none) and (pointer:coarse){
  .classroom-workspace>.whiteboard-toolbar{width:100%;max-width:100%;min-width:0;padding:7px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:center;gap:6px;overflow:visible}
  .classroom-workspace>.whiteboard-toolbar>*{width:100%;min-width:0;max-width:100%;margin:0;justify-self:stretch}
  .classroom-workspace>.whiteboard-toolbar .tool-button{width:100%;height:42px;min-width:0;flex-basis:auto}
  .classroom-workspace>.whiteboard-toolbar .whiteboard-color-picker{height:42px;display:grid;place-items:center}
}

/* Questionnaire row menu must remain isolated from the legacy global button rules above. */
.questionnaires-panel .questionnaire-action-menu{
  position:relative!important;
  width:34px!important;
  height:32px!important;
  display:block!important;
}
.questionnaires-panel button.questionnaire-action-trigger{
  position:static!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #d0d5dd!important;
  border-radius:6px!important;
  color:#344054!important;
  background:#fff!important;
  box-shadow:none!important;
  font-size:13px!important;
  line-height:1!important;
  transform:none!important;
}
.questionnaires-panel button.questionnaire-action-trigger[aria-expanded="true"]{
  border-color:#2e7de9!important;
  color:#175cd3!important;
  box-shadow:0 0 0 2px rgba(46,125,233,.12)!important;
}
.questionnaires-panel .questionnaire-action-popover{
  position:absolute!important;
  z-index:100!important;
  top:38px!important;
  right:0!important;
  left:auto!important;
  width:190px!important;
  height:auto!important;
  margin:0!important;
  padding:8px!important;
  display:block!important;
  border:1px solid #e4e7ec!important;
  border-radius:12px!important;
  color:#344054!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(16,24,40,.14)!important;
}
.questionnaires-panel .questionnaire-action-popover>p{
  margin:2px 8px 7px!important;
  color:#667085!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
}
.questionnaires-panel .questionnaire-action-popover>button[role="menuitem"]{
  position:static!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  border:0!important;
  border-radius:7px!important;
  color:#344054!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:12px!important;
  text-align:left!important;
  transform:none!important;
}
.questionnaires-panel .questionnaire-action-popover>button[role="menuitem"]:hover{background:#f2f4f7!important}
.questionnaires-panel .questionnaire-action-popover>button[role="menuitem"]::after{display:none!important}
.questionnaires-panel .data-table{table-layout:fixed!important;min-width:900px!important}
.questionnaires-panel .data-table th:nth-child(1){width:19%}.questionnaires-panel .data-table th:nth-child(2){width:14%}.questionnaires-panel .data-table th:nth-child(3){width:24%}.questionnaires-panel .data-table th:nth-child(4){width:14%}.questionnaires-panel .data-table th:nth-child(5){width:120px}
.questionnaires-panel .data-table td{height:72px!important;padding-top:14px!important;padding-bottom:14px!important;overflow:visible!important}
.questionnaires-panel .data-table td:first-child>span{display:grid!important;gap:4px!important}.questionnaires-panel .data-table td:first-child small{margin:0!important;display:block!important;max-width:190px!important;color:#667085!important;font-size:11px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.questionnaires-panel .questionnaire-availability{min-width:0!important;grid-template-columns:minmax(0,1fr) auto!important}.questionnaires-panel .questionnaire-availability>small{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}.questionnaires-panel .questionnaire-availability>em{white-space:nowrap!important}

/* Balanced questionnaire table columns and unclipped overflow menu. */
.panel.questionnaires-panel,.questionnaires-panel .listing-table,.questionnaires-panel .data-table-wrap{overflow:visible!important}
.panel.questionnaires-panel{position:relative!important;z-index:2!important}
.questionnaires-panel .data-table{width:100%!important;table-layout:fixed!important}
.questionnaires-panel .data-table th:nth-child(1){width:20%!important}.questionnaires-panel .data-table th:nth-child(2){width:15%!important}.questionnaires-panel .data-table th:nth-child(3){width:25%!important}.questionnaires-panel .data-table th:nth-child(4){width:15%!important}.questionnaires-panel .data-table th:nth-child(5){width:25%!important}
.questionnaires-panel .data-table th,.questionnaires-panel .data-table td{box-sizing:border-box!important;text-align:left!important;vertical-align:middle!important}
.questionnaires-panel .data-table th:last-child,.questionnaires-panel .data-table td:last-child{text-align:center!important}
.questionnaires-panel .data-table tbody tr:has(.questionnaire-action-trigger[aria-expanded="true"]){position:relative!important;z-index:50!important}
.questionnaires-panel .questionnaire-action-menu{margin-inline:auto!important}
.questionnaires-panel .questionnaire-action-popover{z-index:200!important}
.questionnaires-panel .questionnaire-availability{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:10px!important;row-gap:5px!important;align-items:center!important;width:100%!important}
.questionnaires-panel .questionnaire-availability .availability-badge{grid-column:1!important;display:inline-flex!important;align-items:center!important;gap:7px!important;width:max-content!important;max-width:100%!important;padding:5px 9px!important;border-radius:999px!important;color:#047857!important;background:#ecfdf5!important;font-size:12px!important;font-weight:800!important;white-space:nowrap!important}
.questionnaires-panel .questionnaire-availability .availability-badge.is-scheduled{color:#c2410c!important;background:#fff7ed!important}
.questionnaires-panel .questionnaire-availability .availability-badge i{display:block!important;flex:0 0 7px!important;width:7px!important;height:7px!important;border-radius:50%!important;background:currentColor!important}
.questionnaires-panel .questionnaire-availability>small{grid-column:1!important;display:block!important;width:100%!important;margin:0!important;color:#667085!important;font-size:11px!important;line-height:1.35!important;white-space:normal!important}
.questionnaires-panel .questionnaire-availability>em{grid-column:2!important;grid-row:1/3!important;padding:5px 8px!important;border-radius:7px!important;color:#475467!important;background:#f2f4f7!important;font-size:12px!important;font-weight:700!important;font-style:normal!important}
.questionnaires-panel .table-pagination{position:relative!important;z-index:1!important}
.questionnaires-panel .questionnaire-action-popover .action-menu-icon{
  width:20px!important;
  min-width:20px!important;
  height:20px!important;
  display:grid!important;
  place-items:center!important;
  color:#475467!important;
  background:transparent!important;
  font-size:16px!important;
}
.questionnaires-panel .questionnaire-action-popover strong{
  color:#344054!important;
  font-size:12px!important;
  font-weight:600!important;
}
@media(max-width:700px){
  .questionnaires-panel .questionnaire-action-popover{right:auto!important;left:0!important}
}

.classroom-header-actions #leave-classroom-form{margin:0}
.classroom-status,.classroom-end-button{height:32px;min-height:32px}
.classroom-end-button{padding:0 12px;display:inline-flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap}
.classroom-layout-controls{width:100%;display:grid;gap:8px;justify-items:end}
.classroom-control-row{max-width:100%;display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:nowrap}
.classroom-control-row[hidden]{display:none!important}
.classroom-control-row button{min-height:38px;padding:7px 10px;white-space:nowrap}
.whiteboard-control-row{order:-2}
.classroom-recording-control{justify-self:end}
.student-request-controls{
  padding:5px;
  border:1px solid #d7e0ea;
  border-radius:14px;
  background:#fffdf2;
  box-sizing:border-box;
}
.video-grid{
  border-radius:14px;
  background:#fffdf2;
  box-shadow:inset 0 0 0 1px #d7e0ea;
  box-sizing:border-box;
}
.classroom-disconnected.is-reconnecting>span{display:inline-block;animation:classroom-reconnect-spin 1s linear infinite}
.classroom-disconnected.is-reconnecting>strong::after{content:'...';display:inline-block;width:1.4em;overflow:hidden;vertical-align:bottom;animation:classroom-reconnect-dots 1.2s steps(4,end) infinite}
@keyframes classroom-reconnect-spin{to{transform:rotate(360deg)}}
@keyframes classroom-reconnect-dots{from{width:0}to{width:1.4em}}

@media(min-width:701px){
  .host-whiteboard-toolbar{width:66px;min-width:66px;padding:7px 6px;gap:7px}
  .host-whiteboard-toolbar .tool-button{width:42px;min-width:42px;height:42px;padding:0;font-size:22px}
  .host-whiteboard-toolbar .whiteboard-shapes-toggle svg{width:29px;height:29px}
  .host-whiteboard-toolbar>.whiteboard-color-picker{width:44px;min-width:44px}
  .host-whiteboard-toolbar>.whiteboard-color-picker input{width:40px;height:36px}
  .host-whiteboard-toolbar>label:not(.whiteboard-color-picker){width:54px;min-width:54px;display:grid;justify-items:center;gap:3px;font-size:10px}
  .host-whiteboard-toolbar>label:not(.whiteboard-color-picker) input{width:50px;max-width:50px}
}

@media(max-width:700px){
  .classroom-layout-controls{display:grid;grid-template-columns:1fr!important;gap:6px}
  .classroom-control-row{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .classroom-control-row button{width:100%;min-width:0;padding:7px 4px;white-space:normal}
  .classroom-recording-control{width:100%;justify-self:stretch}
  .classroom-recording-gate-actions{align-items:stretch;flex-direction:column-reverse}
  .classroom-recording-gate-actions>*{width:100%;box-sizing:border-box}
}

/* Compact single-row navbar for mobile online classrooms. */
@media(max-width:700px){
  .classroom-header{min-height:48px;padding:5px 7px;display:grid;grid-template-columns:minmax(70px,1fr) minmax(86px,1.15fr) minmax(76px,1fr);align-items:center;gap:4px}
  .classroom-back{grid-column:1;grid-row:1;max-width:100%;font-size:8.5px!important;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
  .classroom-title-block{grid-column:2;grid-row:1;min-width:0;text-align:center}
  .classroom-header .dash-eyebrow{margin-bottom:1px;font-size:6px;line-height:1;white-space:nowrap}
  .classroom-header h1{font-size:16px;line-height:1}
  .classroom-header-actions{grid-column:3;grid-row:1;min-width:0;max-width:100%;justify-self:end;gap:3px}
  .classroom-status{min-width:0;padding:4px 5px;gap:4px;font-size:8px;line-height:1}
  .classroom-status #connection-label{max-width:38px;font-size:8px}
  #connection-dot{width:7px;height:7px;flex:0 0 7px}
  .classroom-end-button{padding:5px 6px;font-size:8px;line-height:1.05;white-space:nowrap}
}
@media(max-width:360px){
  .classroom-header{grid-template-columns:minmax(62px,.9fr) minmax(78px,1fr) minmax(70px,1fr);padding-inline:5px}
  .classroom-back{font-size:7.5px!important}
  .classroom-header h1{font-size:14px}
  .classroom-header .dash-eyebrow{font-size:5.5px}
  .classroom-status #connection-label{max-width:28px}
  .classroom-end-button{padding:4px;font-size:7px}
}

.classroom-chat form{grid-template-columns:auto minmax(0,1fr) auto}
.classroom-chat-attachment-button{width:42px;height:42px;padding:0;display:grid;place-items:center;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;cursor:pointer;font-size:20px}
.classroom-chat-attachment-button input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;opacity:0;pointer-events:none}
#classroom-chat-attachment-name{grid-column:1 / -1;padding:4px 7px;border-radius:7px;color:#334155;background:#e2e8f0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.classroom-chat-attachment{margin-top:7px;display:inline-flex;align-items:center;gap:6px;color:#1d4ed8;font-weight:800;text-decoration:none}
.classroom-chat-attachment img{width:min(220px,100%);max-height:160px;display:block;border-radius:8px;object-fit:cover}
.classroom-chat-history-page .classroom-chat-attachment img{width:min(360px,100%);max-height:260px}

@media(max-width:950px) and (hover:none) and (pointer:coarse){
  .classroom-workspace>.whiteboard-toolbar .tool-button{font-size:24px!important}
  .classroom-workspace>.whiteboard-toolbar .whiteboard-shapes-toggle svg{width:33px;height:33px}
  .classroom-workspace>.whiteboard-toolbar>label:not(.whiteboard-color-picker){grid-column:span 2!important;font-size:10px;gap:4px}
  .classroom-workspace>.whiteboard-toolbar>label:not(.whiteboard-color-picker) input{width:58px!important;max-width:58px!important}
}

/* Keep the native color control usable on touch phones in both orientations. */
@media(max-width:950px) and (hover:none) and (pointer:coarse){
  .classroom-workspace>.whiteboard-toolbar .whiteboard-color-picker>span{display:none}
  .classroom-workspace>.whiteboard-toolbar .whiteboard-color-picker>input{
    position:static!important;
    width:36px!important;
    height:36px!important;
    padding:2px!important;
    opacity:1!important;
    pointer-events:auto!important;
    border-radius:10px;
  }
}

/* Final cascade guard for the questionnaire overflow menu. */
.questionnaires-panel .questionnaire-action-menu{position:relative!important;width:34px!important;height:32px!important;display:block!important}
.questionnaires-panel button.questionnaire-action-trigger{position:static!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid #d0d5dd!important;border-radius:6px!important;color:#344054!important;background:#fff!important;box-shadow:none!important;font-size:13px!important;line-height:1!important;transform:none!important}
.questionnaires-panel .questionnaire-action-popover{position:absolute!important;z-index:100!important;top:50%!important;right:44px!important;left:auto!important;width:190px!important;height:auto!important;margin:0!important;padding:7px!important;display:block!important;border:1px solid #e4e7ec!important;border-radius:12px!important;color:#344054!important;background:#fff!important;box-shadow:0 10px 28px rgba(16,24,40,.14)!important;transform:translateY(-50%)!important}
.questionnaires-panel .questionnaire-action-popover>button[role="menuitem"]{position:static!important;width:100%!important;min-width:0!important;max-width:none!important;height:38px!important;min-height:38px!important;margin:0!important;padding:0 9px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;border:0!important;border-radius:7px!important;color:#344054!important;background:transparent!important;box-shadow:none!important;font-size:12px!important;text-align:left!important;transform:none!important}
.questionnaires-panel .questionnaire-action-popover>button[role="menuitem"]:hover{background:#f2f4f7!important}
.questionnaires-panel .questionnaire-action-popover>button[role="menuitem"]::after{display:none!important}
@media(max-width:900px){.questionnaires-panel .questionnaire-action-popover{top:38px!important;right:0!important;left:auto!important;transform:none!important}}

/* Keep schedule choices card-based and use the application's checkbox visual. */
.modern-form .schedule-mode-picker{
  width:100%!important;
  margin-top:18px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.modern-form .schedule-mode-picker>label{
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:16px!important;
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  border:1.5px solid #dbe3ee!important;
  border-radius:14px!important;
  color:#172033!important;
  background:#fff!important;
  cursor:pointer!important;
}
.modern-form .schedule-mode-picker>label.selected{
  border-color:#2563eb!important;
  background:#eff6ff!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}
.modern-form .schedule-mode-picker input[type="radio"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  position:relative!important;
  width:20px!important;
  min-width:20px!important;
  height:20px!important;
  min-height:20px!important;
  margin:1px 0 0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1.5px solid #98a2b3!important;
  border-radius:5px!important;
  background:#fff!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.modern-form .schedule-mode-picker input[type="radio"]:checked{
  border-color:#2563eb!important;
  background:#2563eb!important;
}
.modern-form .schedule-mode-picker input[type="radio"]:checked::after{
  content:"✓"!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
}
.modern-form .schedule-mode-picker>label>span{
  min-width:0!important;
  display:grid!important;
  gap:4px!important;
}
.modern-form .schedule-mode-picker>label strong{display:block!important;color:#172033!important;font-size:14px!important;line-height:1.3!important}
.modern-form .schedule-mode-picker>label small{display:block!important;margin:0!important;color:#64748b!important;font-size:12px!important;line-height:1.45!important}
@media(max-width:700px){.modern-form .schedule-mode-picker{grid-template-columns:1fr!important}}

/* Final schedule form layout guard. */
.modern-form .schedule-fields{
  width:100%!important;
  margin-top:18px!important;
  padding:18px!important;
  display:grid!important;
  gap:16px!important;
  border:1px solid #e2e8f0!important;
  border-radius:14px!important;
  background:#f8fafc!important;
  box-sizing:border-box!important;
}
.modern-form .schedule-fields>.modern-form-field{width:100%!important;margin:0!important;display:grid!important;gap:7px!important}
.modern-form .duration-input{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:stretch!important;
}
.modern-form .duration-input>input{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:9px 12px!important;
  border:1px solid #cbd5e1!important;
  border-right:0!important;
  border-radius:9px 0 0 9px!important;
  box-sizing:border-box!important;
  font-size:14px!important;
}
.modern-form .duration-input>span{
  position:static!important;
  width:auto!important;
  min-width:76px!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #cbd5e1!important;
  border-left:0!important;
  border-radius:0 9px 9px 0!important;
  color:#475569!important;
  background:#eef2f7!important;
  box-sizing:border-box!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1!important;
}
.modern-form .schedule-fields>.modern-form-field>small{margin:0!important;color:#64748b!important;font-size:11px!important;line-height:1.4!important}
.modern-form .schedule-security-note{
  width:100%!important;
  margin:16px 0 0!important;
  padding:13px 14px!important;
  display:grid!important;
  grid-template-columns:10px minmax(0,1fr)!important;
  align-items:start!important;
  gap:10px!important;
  border:1px solid #bbf7d0!important;
  border-radius:11px!important;
  color:#166534!important;
  background:#f0fdf4!important;
  box-sizing:border-box!important;
}
.modern-form .schedule-security-note>span{width:8px!important;height:8px!important;margin-top:5px!important;display:block!important;border-radius:50%!important;color:transparent!important;background:#22c55e!important;font-size:0!important}
.modern-form .schedule-security-note>p{margin:0!important;display:grid!important;gap:2px!important;color:#166534!important;font-size:12px!important;line-height:1.4!important}
.modern-form .schedule-security-note strong{display:block!important;color:#14532d!important;font-size:13px!important;font-weight:800!important}

/* Unified application tables and reusable three-dot row actions. */
.crud-page .panel:has(.data-table){overflow:visible!important;border:1px solid #e2e8f0!important;border-radius:18px!important;background:#fff!important;box-shadow:0 8px 28px rgba(15,23,42,.06)!important}
.crud-page .data-table-wrap{overflow-x:auto;overflow-y:visible;background:#fff}
.crud-page .data-table{width:100%;border-collapse:separate!important;border-spacing:0!important;color:#344054;background:#fff}
.crud-page .data-table thead{background:#f8fafc!important}
.crud-page .data-table th{height:52px;padding:12px 18px!important;border-top:1px solid #e4e7ec!important;border-bottom:1px solid #e4e7ec!important;color:#667085!important;font-size:11px!important;font-weight:800!important;letter-spacing:.06em!important;text-align:left!important;vertical-align:middle!important;white-space:nowrap!important}
.crud-page .data-table td{min-height:64px;padding:14px 18px!important;border:0!important;border-bottom:1px solid #eaecf0!important;color:#475467!important;font-size:13px!important;line-height:1.4!important;text-align:left!important;vertical-align:middle!important}
.crud-page .data-table tbody tr{position:relative;background:#fff;transition:background .14s ease}.crud-page .data-table tbody tr:hover{background:#f9fafb!important}.crud-page .data-table tbody tr:last-child td{border-bottom:0!important}
.crud-page .data-table td strong{color:#101828;font-weight:700}.crud-page .data-table td small{margin-top:3px;display:block;color:#667085;font-size:11px;line-height:1.35}
.crud-page .data-table th:last-child,.crud-page .data-table td:last-child{text-align:center!important}.crud-page .data-table tbody tr:has(.table-action-trigger[aria-expanded="true"]){z-index:80}
.table-action-menu{position:relative!important;width:34px!important;height:32px!important;margin-inline:auto!important;display:block!important}
.table-action-trigger{position:static!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid #d0d5dd!important;border-radius:6px!important;color:#344054!important;background:#fff!important;box-shadow:none!important;font-size:13px!important;font-weight:900!important;line-height:1!important;transform:none!important}
.table-action-trigger:hover{border-color:#98a2b3!important;background:#f9fafb!important}.table-action-trigger[aria-expanded="true"]{border-color:#2e7de9!important;color:#175cd3!important;box-shadow:0 0 0 2px rgba(46,125,233,.12)!important}
.table-action-popover{position:absolute!important;z-index:200!important;top:50%!important;right:44px!important;left:auto!important;width:190px!important;height:auto!important;margin:0!important;padding:7px!important;display:grid!important;gap:1px!important;border:1px solid #e4e7ec!important;border-radius:12px!important;background:#fff!important;box-shadow:0 10px 28px rgba(16,24,40,.14)!important;transform:translateY(-50%)!important}
.table-action-popover>button,.table-action-popover>a,.table-action-popover>form>button{position:static!important;width:100%!important;min-width:0!important;max-width:none!important;height:38px!important;min-height:38px!important;margin:0!important;padding:0 9px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;border:0!important;border-radius:7px!important;color:#344054!important;background:transparent!important;box-shadow:none!important;font:inherit!important;font-size:12px!important;text-align:left!important;text-decoration:none!important;transform:none!important}
.table-action-popover>button:hover,.table-action-popover>a:hover,.table-action-popover>form>button:hover{background:#f2f4f7!important}.table-action-popover button::after{display:none!important}.table-action-popover>form{width:100%;margin:0}.table-action-popover strong{color:#344054!important;font-size:12px!important;font-weight:600!important}.table-action-icon{width:20px;min-width:20px;height:20px;display:grid;place-items:center;color:#475467;font-size:15px}.table-action-popover .danger-action,.table-action-popover .danger-action strong{color:#b42318!important}
@media(max-width:760px){.table-action-popover{top:38px!important;right:0!important;transform:none!important}.crud-page .data-table th:last-child,.crud-page .data-table td:last-child{text-align:left!important}.table-action-menu{margin-inline:0!important}}

/* Bring the pre-existing member overflow menu into the same table system. */
.crud-page .crud-row-actions:has(.crud-row-menu-toggle){position:relative!important;width:34px!important;height:32px!important;margin-inline:auto!important;display:block!important}
.crud-page .crud-row-menu-toggle{width:34px!important;min-width:34px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid #d0d5dd!important;border-radius:6px!important;color:#344054!important;background:#fff!important;box-shadow:none!important;font-size:17px!important;line-height:1!important;transform:none!important}
.crud-page .crud-row-menu-toggle:hover{border-color:#98a2b3!important;background:#f9fafb!important}
.crud-page .crud-row-menu{position:absolute!important;z-index:200!important;top:50%!important;right:44px!important;left:auto!important;width:190px!important;margin:0!important;padding:7px!important;display:grid!important;gap:1px!important;border:1px solid #e4e7ec!important;border-radius:12px!important;background:#fff!important;box-shadow:0 10px 28px rgba(16,24,40,.14)!important;transform:translateY(-50%)!important}
.crud-page .crud-row-menu[hidden]{display:none!important}.crud-page .crud-row-menu>a,.crud-page .crud-row-menu>button{width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;margin:0!important;padding:0 10px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;border:0!important;border-radius:7px!important;color:#344054!important;background:transparent!important;box-shadow:none!important;font-size:12px!important;font-weight:600!important;text-align:left!important;text-decoration:none!important;transform:none!important}.crud-page .crud-row-menu>a:hover,.crud-page .crud-row-menu>button:hover{background:#f2f4f7!important}.crud-page .crud-row-menu>.danger-menu-item{color:#b42318!important}
@media(max-width:760px){.crud-page .crud-row-menu{top:38px!important;right:0!important;transform:none!important}}

/* Phone, tablet, and iPad table layout: show every field as a labeled row card. */
@media(max-width:1100px){
  .crud-page .panel:has(.data-table){width:100%!important;max-width:100%!important;overflow:visible!important}
  .crud-page .listing-table,.crud-page .data-table-wrap{width:100%!important;max-width:100%!important;overflow:visible!important}
  .crud-page .data-table,.questionnaires-panel .data-table{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:auto!important;
    display:block!important;
  }
  .crud-page .data-table thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
  .crud-page .data-table tbody{width:100%!important;display:grid!important;gap:12px!important;padding:14px!important;box-sizing:border-box!important}
  .crud-page .data-table tbody tr{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    padding:6px 16px!important;
    border:1px solid #e4e7ec!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(15,23,42,.04)!important;
    box-sizing:border-box!important;
  }
  .crud-page .data-table tbody td{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:52px!important;
    padding:12px 0!important;
    display:grid!important;
    grid-template-columns:minmax(112px,30%) minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
    border:0!important;
    border-bottom:1px solid #f0f2f5!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  .crud-page .data-table tbody td:last-child{border-bottom:0!important;text-align:left!important}
  .crud-page .data-table tbody td::before{
    content:attr(data-label)!important;
    display:block!important;
    color:#667085!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.06em!important;
    line-height:1.3!important;
    text-transform:uppercase!important;
  }
  .crud-page .data-table:not(:has(td[data-label])) tbody td::before{display:none!important}
  .crud-page .data-table td>*{min-width:0!important;max-width:100%!important}
  .crud-page .entity-cell{min-width:0!important}.crud-page .entity-cell>span:last-child{min-width:0!important}.crud-page .entity-cell strong,.crud-page .entity-cell small{overflow-wrap:anywhere!important}
  .crud-page .questionnaire-availability{width:100%!important;min-width:0!important}.crud-page .questionnaire-availability>small{overflow-wrap:anywhere!important}.crud-page .questionnaire-availability .availability-badge{max-width:100%!important;white-space:normal!important}
  .crud-page .table-action-menu,.crud-page .crud-row-actions:has(.crud-row-menu-toggle){margin:0!important;justify-self:start!important}
  .crud-page .table-action-popover,.crud-page .crud-row-menu,.questionnaires-panel .questionnaire-action-popover{top:38px!important;right:auto!important;left:0!important;transform:none!important}
  .crud-page .table-pagination{width:100%!important;padding:14px 16px!important;display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;gap:12px!important;box-sizing:border-box!important;text-align:center!important}
  .crud-page .table-pagination>div{width:100%!important;max-width:420px!important;display:grid!important;grid-template-columns:40px 40px minmax(100px,1fr) 40px 40px!important;gap:0!important}
  .crud-page .table-pagination>div button{width:40px!important;min-width:40px!important}.crud-page .table-pagination>div>span{display:grid!important;place-items:center!important;white-space:nowrap!important}
  .crud-page .listing-toolbar{width:100%!important;padding:16px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 120px!important;gap:12px!important;box-sizing:border-box!important}
  .crud-page .listing-toolbar label{width:100%!important;min-width:0!important}.crud-page .listing-toolbar input,.crud-page .listing-toolbar select{width:100%!important;min-width:0!important;box-sizing:border-box!important}
}
@media(max-width:600px){
  .crud-page .data-table tbody{padding:10px!important}.crud-page .data-table tbody tr{padding:4px 12px!important}
  .crud-page .data-table tbody td{grid-template-columns:100px minmax(0,1fr)!important;gap:10px!important}
  .crud-page .listing-toolbar{grid-template-columns:minmax(0,1fr) 92px!important;padding:14px!important}
  .crud-page .table-pagination>div{max-width:100%!important;grid-template-columns:38px 38px minmax(90px,1fr) 38px 38px!important}.crud-page .table-pagination>div button{width:38px!important;min-width:38px!important}
}

/* Legacy/complex tables keep headers and scroll horizontally instead of losing context. */
@media(max-width:1100px){
  .crud-page .data-table-wrap:has(>.data-table:not(.responsive-card-table)){overflow-x:auto!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch!important;scrollbar-gutter:stable!important}
  .crud-page .data-table:not(.responsive-card-table){width:100%!important;min-width:760px!important;max-width:none!important;table-layout:auto!important;display:table!important}
  .crud-page .data-table:not(.responsive-card-table) thead{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;white-space:normal!important;display:table-header-group!important}
  .crud-page .data-table:not(.responsive-card-table) tbody{width:auto!important;padding:0!important;display:table-row-group!important}
  .crud-page .data-table:not(.responsive-card-table) tbody tr{width:auto!important;display:table-row!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  .crud-page .data-table:not(.responsive-card-table) tbody td{width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;padding:14px 18px!important;display:table-cell!important;border-bottom:1px solid #eaecf0!important;text-align:left!important;white-space:normal!important}
  .crud-page .data-table:not(.responsive-card-table) tbody td::before{display:none!important;content:none!important}
}

/* Responsive Messages workspace. */
@media(max-width:1100px){
  .messages-page{width:100%!important;max-width:100%!important;min-width:0!important;display:grid!important;gap:16px!important}
  .messages-page .page-topbar{width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(180px,260px)!important;align-items:end!important;gap:18px!important;box-sizing:border-box!important}
  .messages-page .page-topbar>div{min-width:0!important}.messages-page .page-topbar>select{width:100%!important;min-width:0!important;height:44px!important;box-sizing:border-box!important}
  .message-audience-panel{width:100%!important;min-width:0!important;box-sizing:border-box!important}.message-audience-panel>div{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.message-audience-panel>div>button{width:100%!important;min-width:0!important;margin:0!important}
  .message-directory{width:100%!important;min-width:0!important;overflow:visible!important}.message-directory>.table-toolbar{width:100%!important;padding:18px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(240px,420px)!important;align-items:end!important;gap:16px!important;box-sizing:border-box!important}.message-directory .table-toolbar>div{min-width:0!important}.message-directory .table-toolbar>input{width:100%!important;min-width:0!important;box-sizing:border-box!important}
  .message-role-segments{width:auto!important;max-width:none!important;margin:0 18px 14px!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}.message-role-segments button{width:100%!important;min-width:0!important;margin:0!important;padding:9px 7px!important;font-size:11px!important}
  .message-directory-table{min-width:0!important}.message-directory .data-table-wrap{overflow:visible!important}
  .messages-page>.panel:has(.message-history){width:100%!important;min-width:0!important;box-sizing:border-box!important}.message-history article{min-width:0!important}.message-history span,.message-history strong,.message-history small{max-width:100%!important;overflow-wrap:anywhere!important}
  .message-compose{width:min(620px,calc(100vw - 28px))!important;max-height:calc(100dvh - 28px)!important;padding:22px!important;box-sizing:border-box!important}.message-compose textarea{width:100%!important;box-sizing:border-box!important}.message-member-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}.message-member-picker label{min-width:0!important}.message-member-picker label>span{min-width:0!important;overflow-wrap:anywhere!important}
}

.message-role-detail{display:inline-grid;gap:4px}.message-role-detail>small{color:#64748b;font-size:11px;font-weight:700}
.manual-questionnaire-form{width:min(1100px,calc(100vw - 30px))}.manual-question-builder{display:grid;gap:18px}.manual-question-builder>article{padding:20px;display:grid;gap:14px;border:1px solid #dbe3ee;border-radius:16px;background:#f8fafc}.manual-question-builder>article>header{display:flex;align-items:center;justify-content:space-between}.manual-question-builder>article>header button{width:auto;margin:0;padding:7px 10px;color:#b42318;background:#fff;border:1px solid #fda29b}.exam-status-cell{display:grid;gap:8px}.attempt-history{min-width:220px}.attempt-history summary{color:#2f66ed;font-size:12px;font-weight:800;cursor:pointer}.attempt-history article{margin-top:8px;padding:10px;border:1px solid #dbe3ee;border-radius:9px;background:#fff}.attempt-history article>small{display:block;color:#64748b}.attempt-history ul{margin:7px 0 0;padding-left:17px;max-height:120px;overflow:auto;font-size:11px;color:#475467}
@media(max-width:700px){
  .messages-page .page-topbar{grid-template-columns:1fr!important;align-items:stretch!important}.messages-page .page-topbar>select{width:100%!important}
  .message-audience-panel>div{grid-template-columns:1fr!important}.message-directory>.table-toolbar{grid-template-columns:1fr!important;padding:16px!important}.message-role-segments{margin:0 14px 12px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.message-role-segments button:last-child:nth-child(odd){grid-column:1/-1!important}
  .message-compose{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;padding:18px!important;border-radius:16px!important}.message-member-picker{grid-template-columns:1fr!important}.message-compose .modal-actions{display:grid!important;grid-template-columns:1fr!important}.message-compose .modal-actions button{width:100%!important}
}

/* Flexible mobile pagination supports both Previous/Next and first/last variants. */
@media(max-width:760px){
  .crud-page .table-pagination>div{
    width:100%!important;
    max-width:440px!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:0!important;
  }
  .crud-page .table-pagination>div>button{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:42px!important;
    max-width:none!important;
    height:42px!important;
    margin:0!important;
    padding:0 12px!important;
    white-space:nowrap!important;
  }
  .crud-page .table-pagination>div>span{
    flex:1 1 auto!important;
    min-width:92px!important;
    padding:0 10px!important;
    display:grid!important;
    place-items:center!important;
    white-space:nowrap!important;
  }
}
@media(max-width:420px){
  .crud-page .table-pagination>div>button{min-width:38px!important;height:40px!important;padding:0 8px!important}
  .crud-page .table-pagination>div>span{min-width:86px!important;padding:0 6px!important;font-size:12px!important}
}

/* Pricing policy workspace and compact custom-subscription controls. */
.pricing-policy-school-picker form{display:flex;align-items:end;gap:12px}.pricing-policy-school-picker label{display:grid;gap:7px;min-width:min(440px,100%);font-weight:800}.pricing-scope-summary{margin:14px 0;padding:14px 16px;display:flex;align-items:center;gap:12px;border:1px solid #93c5fd;border-radius:12px;background:#eff6ff}.pricing-scope-summary>span{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;color:#fff;background:#2563eb;font-weight:900}.pricing-scope-summary div{display:grid;gap:2px}.pricing-scope-summary small{color:#64748b}.custom-feature-grid{align-items:start}.custom-feature-card-main{min-height:0}.recording-card-options{display:block}.recording-billing-picker label{display:grid!important;grid-template-columns:20px minmax(0,1fr)!important;min-height:58px!important;text-align:left!important}.recording-billing-picker input[type="radio"]{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important}.recording-billing-picker i{display:grid!important}
@media(max-width:900px){.pricing-policy-school-picker form{display:grid}.pricing-policy-school-picker label{min-width:0}}
.setup-fee-note{display:grid;gap:4px}.setup-fee-note small{display:block;color:#7c5a12}.manual-attendance-location-status{display:block;color:#64748b;font-size:.78rem}

/* Questionnaire desktop table: six columns must remain inside the panel. */
@media(min-width:1101px){
  .questionnaires-panel .listing-table,
  .questionnaires-panel .data-table-wrap{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  .questionnaires-panel .data-table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important}
  .questionnaires-panel .data-table th:nth-child(1){width:19%!important}
  .questionnaires-panel .data-table th:nth-child(2){width:14%!important}
  .questionnaires-panel .data-table th:nth-child(3){width:25%!important}
  .questionnaires-panel .data-table th:nth-child(4){width:13%!important}
  .questionnaires-panel .data-table th:nth-child(5){width:21%!important}
  .questionnaires-panel .data-table th:nth-child(6){width:8%!important}
  .questionnaires-panel .data-table th:nth-child(6),
  .questionnaires-panel .data-table td:nth-child(6){text-align:center!important;overflow:visible!important}
  .questionnaires-panel .exam-status-summary{display:block;max-width:100%;overflow-wrap:anywhere;white-space:normal!important}
}
.questionnaire-header-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:16px!important}
.questionnaire-header-actions>.app-button{width:auto!important;margin:0!important;flex:0 0 auto!important}
@media(max-width:700px){.questionnaire-header-actions{gap:10px!important}}

/* Dedicated, non-modal student exam workspace. */
.exam-attempt-page{width:min(1540px,100%);margin:0 auto;padding:24px;box-sizing:border-box;color:#101828}
.exam-attempt-header{margin-bottom:22px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #dce4ee;border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.07)}
.exam-attempt-header h1{margin:4px 0 6px;font-size:clamp(30px,4vw,50px);line-height:1.05}.exam-attempt-header p{margin:0;color:#64748b}.exam-attempt-header button{width:auto;margin:0}
.exam-attempt-layout{display:grid;grid-template-columns:minmax(360px,.85fr) minmax(480px,1.15fr);gap:22px;align-items:start}
.exam-attempt-layout>.panel{margin:0;min-width:0;border-radius:20px;overflow:hidden}
.exam-reference-panel{position:sticky;top:20px;max-height:calc(100vh - 40px);padding:20px;overflow:auto}
.exam-camera-card{margin-bottom:18px;display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px}.exam-camera-card video{width:150px;height:104px;border-radius:14px;background:#111827;object-fit:cover;transform:scaleX(-1)}
.exam-camera-card span{display:flex;align-items:center;gap:8px;color:#166534;font-weight:800}.exam-camera-card i{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px #dcfce7}
.exam-reference-panel .questionnaire-source-pages{margin:0;padding:0;border:0}.exam-reference-panel .questionnaire-source-pages>div{display:block}.exam-reference-panel .drawable-worksheet,.exam-reference-panel .questionnaire-source-pages figure{margin:14px 0 0;max-height:none;overflow:visible}
.exam-question-panel{min-height:560px;padding:28px}.exam-progress{margin:-28px -28px 28px;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e4e7ec;background:#f8fafc;color:#475467;font-weight:800}
.exam-progress strong{padding:10px 14px;border-radius:10px;color:#fff;background:#101828;font-variant-numeric:tabular-nums;font-size:20px;letter-spacing:.04em}
.exam-single-question>header{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:start;gap:14px}.exam-single-question>header>span{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;color:#fff;background:#2f66ed;font-weight:900}.exam-single-question h2{margin:4px 0 26px;font-size:clamp(22px,2.2vw,32px);line-height:1.3}
.exam-single-question fieldset{padding:0;display:grid;gap:12px;border:0}.exam-single-question fieldset label{padding:15px 16px;display:flex;align-items:flex-start;gap:12px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;cursor:pointer}.exam-single-question fieldset label:has(input:checked){border-color:#2f66ed;background:#eff6ff;box-shadow:0 0 0 2px rgba(47,102,237,.12)}
.exam-single-question textarea{width:100%;min-height:190px;padding:16px;border:1px solid #cbd5e1;border-radius:12px;box-sizing:border-box;resize:vertical;font:inherit}.exam-single-question textarea:focus{outline:3px solid rgba(47,102,237,.14);border-color:#2f66ed}
.exam-submit-row{margin-top:28px;padding-top:20px;display:flex;align-items:center;justify-content:flex-end;gap:14px;border-top:1px solid #e4e7ec}.exam-submit-row small{margin-right:auto;max-width:430px;color:#667085}.exam-submit-row button{width:auto;min-width:160px;margin:0}
.exam-media-gate,.exam-finished{width:min(720px,100%);margin:50px auto!important;padding:44px!important;text-align:center;box-sizing:border-box}.exam-media-gate>div:last-child{margin-top:24px;display:flex;justify-content:center;gap:12px}.exam-media-gate button,.exam-finished button{width:auto;margin:0}.exam-finished>span{width:72px;height:72px;margin:auto;display:grid;place-items:center;border-radius:50%;color:#166534;background:#dcfce7;font-size:34px;font-weight:900}
@media(max-width:1000px){.exam-attempt-layout{grid-template-columns:1fr}.exam-reference-panel{position:static;max-height:none}.exam-camera-card{grid-template-columns:120px 1fr}.exam-camera-card video{width:120px;height:84px}}
@media(max-width:600px){.exam-attempt-page{padding:12px}.exam-attempt-header{padding:20px;align-items:flex-start}.exam-attempt-header h1{font-size:30px}.exam-attempt-header button{min-width:auto;padding-inline:14px}.exam-question-panel{min-height:0;padding:20px}.exam-progress{margin:-20px -20px 22px;padding:14px 20px}.exam-progress strong{font-size:16px}.exam-single-question>header{grid-template-columns:38px minmax(0,1fr)}.exam-single-question>header>span{width:38px;height:38px}.exam-submit-row{align-items:stretch;flex-direction:column}.exam-submit-row small{margin:0}.exam-submit-row button{width:100%}.exam-camera-card{grid-template-columns:96px 1fr}.exam-camera-card video{width:96px;height:72px}.exam-media-gate,.exam-finished{margin:20px auto!important;padding:26px 20px!important}.exam-media-gate>div:last-child{flex-direction:column}.exam-media-gate button{width:100%}}

/* One pagination design for every table, archive, and history browser. */
.crud-page :is(.table-pagination,.manual-history-pagination,.classroom-session-pagination){
  width:100%!important;
  min-height:68px!important;
  margin:0!important;
  padding:14px 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  border:0!important;
  border-top:1px solid #e4e7ec!important;
  border-radius:0!important;
  color:#667085!important;
  background:#f8fafc!important;
  box-sizing:border-box!important;
  font-size:13px!important;
  font-weight:500!important;
}
.crud-page .manual-history-pagination,.crud-page .classroom-session-pagination{justify-content:center!important;border:1px solid #e4e7ec!important;border-radius:12px!important}
.crud-page .table-pagination>div{
  width:auto!important;
  max-width:none!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:0!important;
}
.crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:46px!important;
  max-width:none!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0 14px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #d0d5dd!important;
  border-radius:0!important;
  color:#475467!important;
  background:#fff!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1!important;
  white-space:nowrap!important;
  transform:none!important;
}
.crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>button:first-of-type{border-radius:9px 0 0 9px!important}
.crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>button:last-of-type{border-radius:0 9px 9px 0!important}
.crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>button:has(+span){border-radius:0 9px 9px 0!important}
.crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>span+button{border-radius:9px 0 0 9px!important}
.crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>button+button{margin-left:-1px!important}
.crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>button:hover:not(:disabled){position:relative!important;z-index:1!important;border-color:#98a2b3!important;color:#101828!important;background:#f9fafb!important}
.crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>button:disabled{color:#98a2b3!important;background:#f9fafb!important;opacity:1!important;cursor:not-allowed!important}
.crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>span{
  flex:0 0 auto!important;
  min-width:112px!important;
  margin:0 14px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  color:#475467!important;
  font-size:13px!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
.crud-page .table-pagination>span{margin:0!important;color:#667085!important;font-size:13px!important;font-weight:500!important}
@media(max-width:1100px){
  .crud-page :is(.table-pagination,.manual-history-pagination,.classroom-session-pagination){min-height:0!important;padding:16px!important;display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;gap:14px!important;text-align:center!important}
  .crud-page .table-pagination>div{width:100%!important;max-width:460px!important;display:flex!important}
  .crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>button{min-width:46px!important;height:44px!important;min-height:44px!important;padding:0 13px!important}
  .crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>span{flex:1 1 auto!important;min-width:104px!important;margin:0 8px!important}
  .crud-page .table-pagination>span{font-size:13px!important}
}
@media(max-width:480px){
  .crud-page :is(.table-pagination,.manual-history-pagination,.classroom-session-pagination){padding:14px 12px!important}
  .crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>button{min-width:40px!important;height:42px!important;min-height:42px!important;padding:0 10px!important;font-size:12px!important}
  .crud-page :is(.table-pagination>div,.manual-history-pagination,.classroom-session-pagination)>span{min-width:94px!important;margin:0 5px!important;font-size:12px!important}
}

/* Every React listing uses the same questionnaire pagination geometry. */
.table-pagination>div>button{
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  padding:0!important;
}
.table-pagination>div>span{
  flex:0 0 auto!important;
  min-width:116px!important;
  display:grid!important;
  place-items:center!important;
}
@media(max-width:1100px){
  .table-pagination>div{
    width:100%!important;
    max-width:460px!important;
    display:grid!important;
    grid-template-columns:44px 44px minmax(112px,1fr) 44px 44px!important;
    justify-content:center!important;
    gap:0!important;
  }
  .table-pagination>div>button{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
  }
  .table-pagination>div>span{
    min-width:0!important;
    margin:0!important;
  }
}
@media(max-width:420px){
  .table-pagination>div{
    grid-template-columns:40px 40px minmax(96px,1fr) 40px 40px!important;
  }
  .table-pagination>div>button{
    width:40px!important;
    min-width:40px!important;
    height:42px!important;
  }
}

/* The teacher's synchronized manual zoom must be scrollable on every device. */
.shared-class-manual-pages{align-items:flex-start;justify-content:flex-start;overflow:auto}

@media(min-width:701px){
  .shared-class-manual header{min-height:0;padding:5px 8px;gap:6px;flex-wrap:nowrap}
  .shared-class-manual #shared-class-manual-title{display:none}
  .shared-class-manual .manual-switcher{min-width:160px;gap:5px;font-size:11px}
  .shared-class-manual .manual-switcher select{min-width:120px;max-width:180px;height:32px;padding:4px 26px 4px 8px;font-size:11px}
  .shared-class-manual .manual-annotation-tools{flex:0 0 auto;flex-wrap:nowrap;padding:2px;gap:2px}
  .shared-class-manual .manual-annotation-tools button{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;font-size:15px!important}
  .shared-class-manual .manual-page-controls{min-width:0;flex:1;flex-wrap:nowrap!important;gap:4px!important}
  .shared-class-manual .manual-page-controls button{width:auto!important;min-width:0!important;height:32px!important;min-height:32px!important;padding:4px 7px!important;font-size:10px!important;white-space:nowrap}
  .shared-class-manual .manual-page-controls label{gap:3px;font-size:10px;white-space:nowrap}
  .shared-class-manual .manual-page-controls select{height:32px;padding:3px 22px 3px 6px;font-size:10px}
  .shared-class-manual:not(.student-manual-view) .shared-class-manual-pages{width:min(420px,100%);justify-self:center;box-sizing:border-box;border-inline:1px solid #cbd5e1;box-shadow:0 0 0 100vmax #dbe1e8;clip-path:inset(0 -100vmax)}
}
 .skip-link {
  position: fixed;
  z-index: 10000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #fff;
  color: #0b1730;
  font-weight: 700;
  transform: translateY(-200%);
 }

.skip-link:focus {
  transform: translateY(0);
 }

/* Unified light navigation shell. Keep this final so legacy page styles cannot
   change sidebar type scale, colors, or responsive behavior. */
.page-with-sidebar,
.dashboard-layout { background: #f7f8fa; }
.dash-sidebar {
  color: #4b5563;
  border-right: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.sidebar-header {
  min-height: 72px;
  margin: 0 -14px 20px;
  padding: 0 18px;
  border-bottom: 1px solid #e5e7eb;
}
.dash-brand { color: #111827; font-size: 15px; font-weight: 750; text-decoration: none; }
.dash-brand.is-long,
.dash-brand.is-very-long { font-size: 15px; }
.dash-brand-mark {
  color: #fff;
  background: #292d32;
  box-shadow: 0 0 0 4px #f3f4f6;
}
.sidebar-collapse-button {
  position: absolute;
  z-index: 4;
  top: 77px;
  right: -16px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: grid;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  color: #4b5563;
  background: #fff;
  box-shadow: 0 4px 12px rgba(17, 24, 39, .08);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}
.dash-nav { gap: 4px; padding: 0 2px 24px; scrollbar-width: none; -ms-overflow-style: none; }
.dash-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sidebar-section-label {
  min-height: 18px;
  margin: 12px 12px 5px;
  display: block;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  line-height: 18px;
  text-transform: uppercase;
}
.dash-nav a,
.dash-nav-group-title,
.dash-subnav a {
  box-sizing: border-box;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  color: #4b5563;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}
.dash-nav a,
.dash-nav-group-title { padding: 10px 12px; gap: 13px; }
.dash-nav a:hover,
.dash-nav-group-title:hover { color: #111827; background: #f6f7f8; }
.dash-nav a:focus-visible,
.dash-nav-group-title:focus-visible,
.sidebar-collapse-button:focus-visible { outline: 3px solid rgba(37, 99, 235, .3); outline-offset: 2px; }
.dash-nav a.active,
.dash-nav a.active:hover {
  color: #111827;
  background: #f0f1f2;
  box-shadow: none;
  font-weight: 700;
}
.dash-nav svg,
.dash-nav-group-title svg {
  width: 20px;
  height: 20px;
  color: #555b64;
  stroke-width: 1.75;
}
.dash-nav a.active svg { color: #20242a; stroke-width: 2; }
.nav-notification-envelope small {
  border-color: #fff;
  color: #fff;
  background: #ef4444;
}
.dash-nav a.active .nav-notification-envelope small { border-color: #f0f1f2; }
.submenu-arrow { color: #717780; font-size: 19px; }
.dash-subnav {
  margin: 2px 0 6px 29px;
  padding: 0 0 0 12px;
  gap: 2px;
  border-left: 2px solid #e5e7eb;
}
.dash-subnav a { min-height: 40px; padding: 9px 12px; font-size: 14px; }
.dash-subnav a > span:first-child { display: none; }
.dash-subnav a .sidebar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 1024px) {
  .page-with-sidebar,
  .dashboard-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: 72px minmax(0, 1fr) 44px;
    grid-template-areas: "sidebar navbar" "sidebar content" "sidebar footer";
  }
  body.sidebar-collapsed .page-with-sidebar,
  body.sidebar-collapsed .dashboard-layout { grid-template-columns: 76px minmax(0, 1fr); }
  .dash-sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; height: 100dvh; max-height: 100dvh; padding: 0 14px; overflow: visible; }
  .dash-nav { overflow-x: hidden; overflow-y: auto; }
  body.sidebar-collapsed .dash-sidebar { width: 76px; padding-inline: 0; }
  body.sidebar-collapsed .sidebar-header { width: 100%; margin: 0 0 20px; padding: 0; border-bottom-color: #e5e7eb; }
  body.sidebar-collapsed .dash-brand { width: 44px; height: 72px; }
  body.sidebar-collapsed .dash-brand-mark,
  body.sidebar-collapsed .dash-brand-logo { width: 36px; height: 36px; flex-basis: 36px; }
  body.sidebar-collapsed .sidebar-collapse-button { display: grid; right: -16px; }
  body.sidebar-collapsed .dash-nav { overflow: visible; }
  body.sidebar-collapsed .sidebar-section-label { height: 15px; min-height: 15px; margin: 8px 0 4px; font-size: 0; opacity: 1; }
  body.sidebar-collapsed .sidebar-section-label::after { content: ""; display: block; width: 24px; margin: 7px auto 0; border-top: 1px solid #e5e7eb; }
  body.sidebar-collapsed .dash-nav-group { position: relative; }
  body.sidebar-collapsed .dash-nav > a,
  body.sidebar-collapsed .dash-nav-group-title { width: 44px; height: 44px; margin-inline: auto; padding: 0; justify-content: center; }
  body.sidebar-collapsed .dash-nav-group:not(.is-flyout-open) .dash-subnav { display: none; }
  body.sidebar-collapsed .dash-nav-group.is-flyout-open .dash-subnav {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 68px;
    width: 238px;
    margin: 0;
    padding: 9px;
    display: grid;
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(17, 24, 39, .16);
  }
  body.sidebar-collapsed .dash-nav-group.is-flyout-open .dash-subnav .sidebar-label {
    width: auto;
    opacity: 1;
    pointer-events: auto;
  }
  body.sidebar-collapsed .dash-nav-group.is-flyout-open .dash-subnav a { width: 100%; justify-content: flex-start; padding: 10px 12px; }
}

@media (max-width: 1023px) {
  .page-with-sidebar,
  .dashboard-layout,
  body.sidebar-collapsed .page-with-sidebar,
  body.sidebar-collapsed .dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 64px minmax(0, 1fr) 44px;
    grid-template-areas: "navbar" "content" "footer";
  }
  .app-navbar { height: 64px; }
  .dash-sidebar,
  body.sidebar-collapsed .dash-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(320px, calc(100vw - 24px));
    height: 100dvh;
    max-height: 100dvh;
    padding: 0 14px max(12px, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 20px 0 55px rgba(17, 24, 39, .18);
  }
  body.mobile-sidebar-open .dash-sidebar { transform: translateX(0); }
  .sidebar-collapse-button,
  body.sidebar-collapsed .sidebar-collapse-button { display: none; }
  .sidebar-header,
  body.sidebar-collapsed .sidebar-header { min-height: 72px; margin: 0 -14px 14px; padding: 0 18px; justify-content: flex-start; flex-wrap: nowrap; }
  body.sidebar-collapsed .dash-brand { width: auto; height: auto; margin: 0; display: flex; }
  body.sidebar-collapsed .sidebar-label,
  body.mobile-sidebar-open .sidebar-label { width: auto; opacity: 1; pointer-events: auto; }
  .dash-nav,
  body.sidebar-collapsed .dash-nav,
  body.mobile-sidebar-open .dash-nav { width: 100%; overflow-x: hidden; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
  body.sidebar-collapsed .sidebar-section-label { margin: 12px 12px 5px; }
  body.sidebar-collapsed .dash-nav > a,
  body.sidebar-collapsed .dash-nav-group-title,
  body.mobile-sidebar-open .dash-nav a { width: 100%; max-width: none; min-height: 48px; height: auto; margin: 0; padding: 12px; justify-content: flex-start; }
  body.sidebar-collapsed .dash-subnav,
  body.mobile-sidebar-open .dash-subnav { margin-left: 29px; padding-left: 12px; display: grid; }
  .mobile-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 29; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(17, 24, 39, .38); }
}

@media (max-width: 480px) {
  .dash-sidebar,
  body.sidebar-collapsed .dash-sidebar { width: min(300px, calc(100vw - 18px)); }
  .dash-nav a,
  .dash-nav-group-title,
  .dash-subnav a { font-size: 14px; }
  .app-navbar { padding-inline: 12px; }
}

.app-footer {
  grid-area: footer;
  min-width: 0;
  min-height: 44px;
  padding: 10px clamp(18px, 3vw, 34px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  border-top: 1px solid #e5e7eb;
  color: #64748b;
  background: #fff;
  font-size: 12px;
}
.app-footer strong { color: #334155; font-weight: 700; }
:root[data-theme="dark"] .app-footer { border-color: #334155; color: #94a3b8; background: #111827; }
:root[data-theme="dark"] .app-footer strong { color: #e2e8f0; }
.table-action-popover.table-action-popover--portal {
  position: fixed !important;
  z-index: 10000 !important;
  top: var(--table-action-top) !important;
  right: auto !important;
  left: var(--table-action-left) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow-y: auto !important;
  transform: none !important;
  visibility: visible;
}
.table-action-popover.table-action-popover--portal[data-positioned="false"] { visibility: hidden; }
@media (max-width: 480px) {
  .app-footer { padding-inline: 12px; justify-content: center; text-align: center; }
}
@media (max-width: 640px) {
  .notification-dropdown {
    position: fixed;
    top: 72px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 84px);
    border-radius: 16px;
  }
  .notification-dropdown > header { padding: 12px 14px; flex-wrap: wrap; }
  .notification-dropdown > header button { width: auto !important; min-height: 34px; margin: 0; padding: 7px 10px; flex: 0 0 auto; }
  .notification-list { max-height: calc(100dvh - 150px); }
  .notification-item > a { min-width: 0; padding: 12px 8px 12px 14px; overflow-wrap: anywhere; }
  .profile-telegram-settings { padding: 16px; }
  .profile-telegram-settings .telegram-connect-action,
  .profile-telegram-settings .telegram-test-action { width: 100%; justify-content: center; }
}