/* v8.1.153: shared screen layouts for every account and Attendance's shadow root.
   Printed forms, PDF generation, records, and role permissions are unchanged. */
@media screen {
  .shell { grid-template-columns:260px minmax(0,1fr); }
  .main, #view, #attendanceModuleHost, #attendanceModuleRoot,
  .card, .grid > *, .form-grid > *, .profile-grid > *,
  .feature-hub-grid > *, .scanner-grid > *, .chat-shell > * {
    min-width:0;
    max-width:100%;
  }
  #view { container-type:inline-size; container-name:schoolmeld-content; }
  .topbar, .section-title, .top-actions, .actions, .file-row,
  .chat-head, .privacy-actions { flex-wrap:wrap; }
  .topbar > *, .section-title > *, .file-row > *, .toolbar > *,
  .field, .auth-card label, .brand > div, .side-user,
  .chat-contact > *, .chat-compose > * { min-width:0; max-width:100%; }
  .topbar h2, .section-title h3, .card h3, .field, .sub,
  .nav-label, .feature-hub-copy, .file-row .meta, .status-chip,
  .side-user, .brand > div, .chat-head, .chat-bubble,
  .chat-audience, .faq-assistant-answer, .metric-label, .metric-value {
    overflow-wrap:anywhere;
  }
  .sidebar nav .nav-btn { white-space:normal; }
  .sidebar nav .nav-btn .nav-label { line-height:1.4; }
  .btn, .tab, .status-btn { white-space:normal; max-width:100%; height:auto; }
  .field input, .field select, .field textarea, .input,
  .auth-card input, .toolbar input, .toolbar select {
    min-width:0; max-width:100%;
  }
  .toolbar .grow { min-width:0; flex:1 1 180px; }
  .account-filter-toolbar #accountSectionFilter { min-width:0; }
  #schoolFormSearch { min-width:0 !important; flex:1 1 240px; }
  .table-wrap {
    width:100%; max-width:100%; min-width:0;
    overflow:auto; overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .table-wrap th, .table-wrap td { overflow-wrap:anywhere; }
  .table-wrap table { margin:0; }
  /* Fluid tracks respond to the space inside the panel, including the sidebar. */
  .metrics, .cards, .teacher-performance-metrics, .insights-overview,
  .reward-metrics, .school-reward-metrics, .insights-attendance-metrics {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  }
  .feature-hub-grid, .dll-teacher-boxes, .qr-grid {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  }
  .feature-hub-tile { flex-wrap:nowrap; }
  .feature-hub-copy { min-width:0; }
  .grade-entry-controls, .teacher-performance-filters,
  .teacher-assignment-row, .att-controls, .individual-qr-row,
  .qr-status-card {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  }
  .grade-entry-controls .grow { grid-column:auto; }
  .guardian-activity-grid, .insights-subject-grid, .insights-status-grid,
  .insights-scope-grid, .insights-term-grid, .saas-ads-dashboard {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  }
  .scanner-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
  .att-learner-row { grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,.8fr); }
  .att-learner-row > *, .att-status-buttons, .att-row > * { min-width:0; }
  .att-status-buttons { display:flex; flex-wrap:wrap; }
  .att-status-buttons .btn { flex:1 1 105px; }
  .att-row { grid-template-columns:minmax(0,1fr) repeat(5,auto); }
  .att-row .btn { min-width:0; }
  .chat-compose { grid-template-columns:minmax(0,1fr) auto; }
  .chat-compose textarea { min-width:0; max-width:100%; }
  .file-row .meta { flex:1 1 180px; }
  .file-row .actions { margin-top:0; }
  .report-file-preview, .report-file-preview iframe { max-width:100%; }
  .report-file-preview img { max-width:100%; height:auto; object-fit:contain; }
  dialog { max-width:calc(100vw - 24px); max-height:90vh; max-height:90dvh; }
}

/* Keep feature names available on tablets instead of switching to icons only. */
@media screen and (min-width:661px) and (max-width:1000px) {
  .shell { grid-template-columns:200px minmax(0,1fr); }
  .brand { display:flex; justify-content:flex-start; }
  .brand div, .nav-label, .side-user #sideName, .side-user #sideRole,
  .side-user > div, .side-user > small { display:block; }
  .sidebar nav .nav-btn { text-align:left; font-size:14px; }
  .sidebar nav .nav-btn .nav-label { display:inline; font-size:13px; }
  .sidebar .side-user { display:block; text-align:left; }
  .main { padding:18px; }
}

/* Fallback for browsers without container queries. */
@media screen and (max-width:1100px) {
  .att-learner-row, .two, .guardian-action-grid, .coi-charts,
  .mandatory-unread-layout { grid-template-columns:minmax(0,1fr); }
  .chat-shell { grid-template-columns:minmax(0,1fr); }
  .chat-contacts { max-height:280px; }
  .att-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .att-row > :first-child { grid-column:1 / -1; }
}
@media screen {
  @container schoolmeld-content (max-width:820px) {
    .chat-shell, .two, .guardian-action-grid, .coi-charts,
    .mandatory-unread-layout { grid-template-columns:minmax(0,1fr); }
    .chat-contacts { max-height:280px; }
    .att-learner-row { grid-template-columns:minmax(0,1fr); }
    .att-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .att-row > :first-child { grid-column:1 / -1; }
    .cot-indicator-row { grid-template-columns:minmax(0,1fr); }
  }
  @container schoolmeld-content (max-width:480px) {
    .form-grid, .profile-grid, .forms-grid, .template-meta,
    .guardian-history-filters { grid-template-columns:minmax(0,1fr); }
    .coi-bar-row { grid-template-columns:minmax(0,1fr); gap:4px; }
    .chat-compose { grid-template-columns:minmax(0,1fr); }
  }
}

/* Phones and short landscape screens: horizontal tabs retain their full names. */
@media screen and (max-width:660px), screen and (max-width:1000px) and (max-height:500px) {
  .shell { display:block; }
  .shell > .sidebar {
    position:relative; top:auto; width:100%; max-width:100%;
    height:auto; min-height:0; padding:8px; display:block;
  }
  .sidebar .brand { display:none; }
  .sidebar nav {
    display:flex; flex:none; width:100%; max-width:100%; min-width:0;
    gap:5px; margin:0; padding:0 0 4px;
    overflow-x:auto; overflow-y:hidden; align-items:stretch;
    scroll-padding-inline:8px;
  }
  .sidebar nav .nav-btn {
    display:flex; flex:0 0 120px; width:120px; min-width:0; max-width:144px;
    flex-direction:column; align-items:center; justify-content:center;
    gap:4px; margin:0; padding:9px 8px; min-height:64px;
    font-size:18px; line-height:1.3; text-align:center; white-space:normal;
  }
  .sidebar nav .nav-btn .nav-label {
    display:block; font-size:12px; line-height:1.4; font-weight:650;
    text-align:center; width:100%;
  }
  .shell > .sidebar .side-user {
    position:static; inset:auto; display:flex; flex-wrap:wrap;
    align-items:center; justify-content:space-between; gap:6px 12px;
    margin:4px 0 0; padding:8px 4px 2px; width:100%; min-width:0;
  }
  .sidebar .side-user > div, .sidebar .side-user > small { display:block; }
  .sidebar .side-user #sideName { flex:1 1 160px; }
  .sidebar .side-user #sideRole { flex:1 1 120px; }
  .sidebar .side-user .platform-copyright { flex-basis:100%; text-align:left; }
  .sidebar .platform-about-link { margin:5px 4px; }
  .sidebar .platform-about-link .nav-label { display:inline; font-size:12px; }
  .main { padding:12px; }
  .topbar {
    position:static; margin:0 0 14px; padding:0;
    background:transparent; backdrop-filter:none; align-items:flex-start;
  }
  .topbar h2 { font-size:clamp(20px,5vw,25px); line-height:1.25; }
  .top-actions { flex-wrap:wrap; justify-content:flex-start; }
  .auth-screen { padding:16px; }
  .auth-card { padding:22px; }
  .form-grid, .profile-grid, .forms-grid, .template-meta,
  .guardian-history-filters { grid-template-columns:minmax(0,1fr); }
  .chat-compose { grid-template-columns:minmax(0,1fr); }
}

/* Students Grade: keep readable columns instead of shrinking to single letters.
   The surrounding panel stays fluid; the grade matrix scrolls within it. */
@media screen {
  .student-grades-wrap { overflow-x:auto; max-width:100%; }
  .student-grades-wrap:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
  .student-grades-wrap .student-grades-table {
    width:100%; min-width:var(--student-grades-min-width,760px); table-layout:fixed;
  }
  .student-grades-name-col { width:240px; }
  .student-grades-lrn-col { width:140px; }
  .student-grades-section-col { width:180px; }
  .student-grades-subject-col { width:200px; }
  .student-grades-wrap .student-grades-table th,
  .student-grades-wrap .student-grades-table td {
    padding:12px 14px; font-size:14px; line-height:1.5;
    white-space:normal; word-break:normal; overflow-wrap:break-word; hyphens:none;
  }
  .student-grades-wrap .student-grades-table th {
    text-transform:none; letter-spacing:normal; font-weight:700; vertical-align:middle;
    overflow-wrap:normal;
  }
  .student-grades-wrap .student-grades-table td { vertical-align:middle; }
  .student-grades-wrap .student-grades-table td:first-child { font-weight:600; }
  .student-grades-wrap .student-grades-table th:nth-child(2),
  .student-grades-wrap .student-grades-table td:nth-child(2) {
    white-space:nowrap; overflow-wrap:normal; font-variant-numeric:tabular-nums;
  }
  .student-grades-wrap .student-grades-table th:nth-child(n+4),
  .student-grades-wrap .student-grades-table td:nth-child(n+4) {
    text-align:center; font-variant-numeric:tabular-nums;
  }
  .student-grades-wrap .student-grades-table td:nth-child(n+4) { font-weight:600; }
  .student-grades-scroll-hint { margin:0 0 10px; line-height:1.5; }
}