/* TESTDD-067: semantic states outrank legacy/theme !important rules. */
/* 119: small mobile disclosure, full card course state and readable dialogs. */
@layer attendance-polish {
  html body #attendanceTextPreviewBody { white-space:pre-wrap !important; overflow-wrap:anywhere !important; line-height:1.65 !important; font-size:16px !important; text-align:left !important; }
  html body .rosterActionChoices { display:grid; gap:10px; }
  html body .rosterActionChoices button { display:flex; align-items:center; gap:10px; min-height:44px; text-align:left; }
  html body #rosterActionsDialog { width:min(420px,calc(100vw - 24px)); padding:16px; }
  @media (max-width:920px) {
    html body #workspace #attendanceView #attendanceRows tr.courseBundleStudent,
    html body #workspace #attendanceView #attendanceRows tr.courseBundleStudent > td,
    html body #workspace #attendanceView #attendanceRows tr.courseBundleStudent :is(.studentNameBox,.studentNameMain) { background:#fff7d6 !important; }
    html body :is(#studentDialog,#guardianDialog,#feedbackDialog,#attendanceTextPreviewDialog,#rosterActionsDialog,.rosterRemovalDialog,#assessmentDialog,#assessmentScoresDialog) { width:calc(100vw - 24px) !important; max-width:430px !important; max-height:88dvh !important; overflow:auto !important; box-sizing:border-box !important; background:#fff !important; color:#172b3d !important; filter:none !important; }
    html body :is(#studentDialog,#guardianDialog,#feedbackDialog,#attendanceTextPreviewDialog,#rosterActionsDialog,.rosterRemovalDialog,#assessmentDialog,#assessmentScoresDialog)::backdrop { backdrop-filter:none !important; background:rgb(15 23 42 / .35) !important; }
    html body :is(#studentDialog,#feedbackDialog,#assessmentDialog) form { max-height:calc(88dvh - 24px) !important; overflow:auto !important; padding:12px !important; gap:12px !important; }
    html body :is(#studentDialog,#feedbackDialog,#assessmentDialog) form > :is(header,footer) { position:sticky !important; background:#fff !important; z-index:2 !important; }
    html body :is(#studentDialog,#feedbackDialog,#assessmentDialog) form > header { top:0 !important; }
    html body :is(#studentDialog,#feedbackDialog,#assessmentDialog) form > footer { bottom:0 !important; flex-wrap:wrap !important; }
    html body #feedbackDialog :is(h3,strong,label) { font-size:16px !important; }
    html body #feedbackDialog textarea { min-height:160px !important; font-size:16px !important; }
  }
}
/* TESTDD148: mobile native date stays in a clipped, accessible picker;
   its visible label is DD/MM, independent of the iPhone's long locale format. */
@layer attendance-polish {
  @media (max-width:920px) {
    html body #statusDialog.mobileStatusOnly #statusForm #extraSessionsEditor .extraSessionRow {
      grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    }
    html body #statusDialog.mobileStatusOnly #extraSessionsEditor .extraSessionDateControl {
      grid-column:1 !important; grid-row:1 !important; position:relative; display:flex; align-items:center;
      min-width:0; width:100%; height:44px; box-sizing:border-box; overflow:hidden;
      padding:0 12px; margin:0; border:1px solid #94a3b8; border-radius:8px;
      background:#fff; color:#172033; font-size:16px;
    }
    html body #statusDialog.mobileStatusOnly #extraSessionsEditor .extraSessionDateControl input[type="date"] {
      position:absolute !important; inset:0 !important; opacity:0 !important;
      width:100% !important; min-width:0 !important; max-width:100% !important;
      height:44px !important; margin:0 !important; padding:0 !important;
      cursor:pointer; -webkit-appearance:none;
    }
    html body #statusDialog.mobileStatusOnly #extraSessionsEditor .extraSessionDateControl:focus-within {
      outline:2px solid #0794a4; outline-offset:2px;
    }
    html body #statusDialog.mobileStatusOnly #statusForm #extraSessionsEditor .extraSessionRow > [data-extra-field="status"] {
      grid-column:2 !important; grid-row:1 !important;
    }
    html body #statusDialog.mobileStatusOnly #statusForm #extraSessionsEditor .extraSessionRow > :is([data-extra-field="reason"],.learningProgressEditor) {
      grid-column:1/-1 !important;
    }
    html body #statusDialog.mobileStatusOnly::backdrop {
      backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    }
    html body #workspace[data-view="attendance"] .topbar {
      background:#f1f8fc !important; filter:none !important;
      backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    }
    html body #workspace[data-view="attendance"]::before { display:none !important; filter:none !important; }
  }
}
@layer testdd-typography {
  html body #attendanceView :is(.attendanceNicknameText,.attendanceNicknameInput) { font-weight:700 !important; }
  @media (max-width:920px) {
    html body #workspace #attendanceView #attendanceRows tr.courseBundleStudent .studentNameMain { background:#fff7d6 !important; border-radius:6px; }
  }
}
@layer attendance-polish {
  /* 118: direct roster controls, only rendered in Edit mode. */
  html body #workspace #attendanceView.editMode #attendanceRows .attendanceRosterIcons {
    display:flex !important; position:static !important; gap:2px !important; flex-wrap:nowrap !important;
    grid-column:3 !important; grid-row:1 !important; justify-self:end !important; align-self:center !important; margin:0 !important;
  }
  html body #workspace #attendanceView #attendanceRows .attendanceRosterIcons button {
    display:inline-grid !important; place-items:center !important; width:36px !important; height:36px !important;
    min-width:36px !important; min-height:36px !important; padding:0 !important;
  }
  html body #workspace #attendanceView #attendanceRows .attendanceRosterIcons button.danger { color:#b91c1c !important; border-color:#fca5a5 !important; margin-left:4px !important; }
  html body #workspace #attendanceView #attendanceRows .attendanceRosterIcons button:focus-visible,
  html body #workspace #attendanceView #attendanceRows .attendanceStudentNameLink:focus-visible { outline:2px solid var(--primary,#2563eb) !important; outline-offset:2px !important; }
  html body #workspace #attendanceView #attendanceRows .attendanceStudentNameLink { display:block !important; border:0 !important; padding:0 !important; background:transparent !important; text-align:left !important; font:inherit !important; min-height:44px !important; color:inherit !important; white-space:normal !important; }
  html body #workspace #attendanceView.editMode #attendanceRows .studentNameBox:has(.attendanceRosterIcons) { display:grid !important; grid-template-columns:44px minmax(0,1fr) auto !important; gap:6px !important; align-items:center !important; }
  html body #workspace #attendanceView.editMode #attendanceRows .studentNameBox:has(.attendanceRosterIcons) .studentNameMain { grid-column:2 !important; grid-row:1 !important; padding-right:0 !important; min-width:0 !important; }
  html body #workspace #attendanceView.editMode #attendanceRows .studentNameBox:has(.attendanceRosterIcons) .studentNameMain strong { padding-right:0 !important; }
  html body #workspace #attendanceView.editMode #attendanceRows .studentNameBox:has(.attendanceRosterIcons) .attendanceAvatar { width:44px !important; height:44px !important; min-width:44px !important; max-width:44px !important; grid-column:1 !important; grid-row:1 !important; }
  @media (max-width:920px) {
    html body #workspace #attendanceView.editMode #attendanceRows .studentNameBox:has(.attendanceRosterIcons) .studentNameMain { display:block !important; height:auto !important; max-height:none !important; }
    html body #workspace #attendanceView.editMode #attendanceRows .studentNameBox:has(.attendanceRosterIcons) .attendanceStudentNameLink { min-height:0 !important; line-height:1.4 !important; }
    html body #workspace #attendanceView.editMode #attendanceRows .studentNameBox:has(.attendanceRosterIcons) .mobileTuitionBadge { display:flex !important; position:static !important; width:fit-content !important; max-width:100% !important; height:auto !important; min-height:20px !important; margin:3px 0 0 !important; font-size:10px !important; white-space:normal !important; }
  }
  /* 108/109: preserve current controls; expose confirmed delivery and roster menu. */
  html body .rosterRemovalDialog { width:min(440px,calc(100vw - 32px)) !important; max-height:calc(100dvh - 32px) !important; overflow:auto !important; border:1px solid var(--line,#dce5ed) !important; border-radius:14px !important; padding:18px !important; }
  html body .rosterRemovalDialog label { display:grid !important; gap:8px !important; }
  html body .rosterRemovalDialog textarea { width:100% !important; min-height:96px !important; box-sizing:border-box !important; font:inherit !important; }
  html body .rosterRemovalDialog footer { display:flex !important; justify-content:flex-end !important; gap:8px !important; margin-top:16px !important; }
  html body .rosterRemovalDialog .dangerBtn { color:#b91c1c !important; border-color:#fca5a5 !important; }
  html body .pllHistoryHeader { display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:end !important; gap:8px !important; }
  html body .pllHistoryHeader > div { flex-basis:100% !important; }
  html body .pllHistoryHeader > label { display:grid !important; gap:4px !important; flex:1 1 150px !important; }
  html body .pllHistoryHeader > :is(input,select) { flex:1 1 200px !important; width:auto !important; }
  html body .pllHistoryHeader > div { flex-wrap:wrap !important; align-items:center !important; gap:8px !important; }
  html body .pllHistoryHeader :is(input,select) { max-width:100% !important; min-width:0 !important; height:36px !important; }
  html body .pllHistoryTable :is(th,td):nth-child(6), html body .pllHistoryTable :is(th,td):nth-child(7) { width:100px !important; text-align:center !important; }
  html body .pllHistoryTable :is(th,td):nth-child(8) { width:100px !important; text-align:center !important; }
  @media (min-width:921px) {
    html body #attendanceView .attendanceRowMoreBtn { display:inline-grid !important; place-items:center !important; width:36px !important; height:36px !important; min-width:36px !important; padding:0 !important; }
    html body #attendanceView .studentNameMain { padding-right:40px !important; }
  }
  @media (max-width:920px) {
    html body #workspace[data-view="pll"] .pllZaloIdCell { display:grid !important; font-family:inherit !important; }
    html body .pllHistoryHeader :is(input,select) { min-height:44px !important; }
    html body #workspace[data-view="pll"] .pllZaloIdCell::before { content:"Phân loại" !important; }
    html body #workspace[data-view="pll"] .pllHistoryTable td:nth-child(6)::before { content:"Đã gửi ảnh" !important; }
    html body #workspace[data-view="pll"] .pllHistoryTable td:nth-child(7)::before { content:"Đã gửi nội dung" !important; }
    html body #workspace[data-view="pll"] .pllHistoryTable td:nth-child(8)::before { content:"Thao tác" !important; }
  }
  html body #workspace #attendanceView.gradeOnlyView .trackerTable { display:table !important; table-layout:fixed !important; width:100% !important; max-width:none !important; min-width:var(--grade-table-min,620px) !important; }
  html body #workspace #attendanceView.gradeOnlyView #attendanceCols { display:table-column-group !important; }
  html body #workspace #attendanceView.gradeOnlyView #attendanceHead tr { display:table-row !important; width:auto !important; }
  html body #workspace #attendanceView.gradeOnlyView .assessmentColumn {display:table-column !important; width:auto !important;}
  html body #workspace #attendanceView.gradeOnlyView #attendanceHead { display:table-header-group !important; }
  html body #workspace #attendanceView.gradeOnlyView #attendanceRows { display:table-row-group !important; width:auto !important; max-width:none !important; overflow:visible !important; }
  html body #workspace #attendanceView.gradeOnlyView #attendanceRows tr { display:table-row !important; height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important; border-radius:0 !important; box-shadow:none !important; }
  html body #workspace #attendanceView.gradeOnlyView :is(th,td) { display:table-cell !important; position:static !important; padding:5px !important; width:auto !important; height:auto !important; min-height:0 !important; border-radius:0 !important; overflow-wrap:anywhere !important; }
  html body #workspace #attendanceView.gradeOnlyView .gradeName { width:23% !important; }
  html body #workspace #attendanceView.gradeOnlyView .gradeNickname { width:12% !important; }
  html body #workspace #attendanceView.gradeOnlyView .gradeOrdinal { width:32px !important; }
  html body #workspace #attendanceView.gradeOnlyView .assessmentScoreInput { border-radius:0 !important; background:transparent !important; width:100% !important; height:32px !important; min-height:32px !important; line-height:32px !important; }
  html body #workspace #attendanceView.gradeOnlyView [data-grade-average][data-score-band="good"] { color:#166534 !important; }
  html body #workspace #attendanceView.gradeOnlyView .assessmentHead small { display:block !important; white-space:normal !important; }
  html body #workspace #attendanceView.gradeOnlyView .gradeOnlyToolbar { text-align:left !important; }
  html body #workspace #attendanceView.gradeOnlyView .gradeOnlyToolbar label { display:inline-flex !important; align-items:center; gap:6px; margin:4px 8px; }
  html body #workspace #attendanceView.gradeOnlyView .gradeOnlyToolbar select { width:auto !important; max-width:200px; min-height:44px; }
  html body #workspace #attendanceView.gradeOnlyView .assessmentGroupTitle { cursor:pointer; }
  @media (max-width:760px) {
    html body #attendanceClassStrip #btnGradeOnly:not(.hidden) { display:inline-flex !important; min-height:44px !important; margin:6px 8px !important; }
    html body #workspace #attendanceView.gradeOnlyView .assessmentScoreInput { height:44px !important; min-height:44px !important; line-height:44px !important; }
  }
}
@layer attendance-polish {
  html body .academicSelect.ok { background: #ecfdf5 !important; color: #166534 !important; border-color: #86b99b !important; }
  html body .academicSelect.warn { background: #fff7ed !important; color: #9a3412 !important; border-color: #e9bd8e !important; }
  html body .academicSelect.danger { background: #fee2e2 !important; color: #991b1b !important; border-color: #e5a0a0 !important; }
  html body .academicSelect.pending { background: var(--account-surface, #fff) !important; color: var(--account-muted, #64748b) !important; }
  html body #attendanceView textarea[readonly],
  html body #attendanceView:not(.editMode) .studentNoteInput:not(:focus) {
    border-color: transparent !important; background: transparent !important;
    box-shadow: none !important; outline: none !important; resize: none !important;
  }
  html body #attendanceView textarea[readonly]:focus-visible { outline: 2px solid var(--account-link, #087f76) !important; outline-offset: 2px !important; }
  html body #workspace[data-view="attendance"] {
    height: var(--attendance-viewport-height,100dvh) !important; min-height: 0 !important; align-content: stretch !important; align-self: stretch !important;
    grid-template-rows: auto !important; overflow: hidden !important; box-sizing:border-box !important; padding-bottom:0 !important;
  }
  html body #workspace[data-view="attendance"] #attendanceView {
    height: 100% !important; min-height: 0 !important; display:flex !important; flex-direction:column !important;
    align-content: stretch !important;
  }
  html body #workspace[data-view="attendance"] #attendanceView > .tableWrap {
    height: auto !important; min-height: 0 !important; flex:1 1 0 !important;
    max-height: none !important; align-self: stretch !important; overflow:auto !important;
  }
  html body #attendanceClassStrip { flex-shrink:0 !important; }
  html body #attendanceView .courseBundleStudent > .nameCell { border-left-color:transparent !important; box-shadow:none !important; }
  html body #attendanceView .courseBundleStudent :is(.studentNameBox,.studentNameMain) { box-shadow:none !important; border-left:0 !important; }
  html body #attendanceView .assessmentScoreCell { text-align:center !important; vertical-align:middle !important; }
  html body #attendanceView .assessmentScoreCell { position:relative !important; }
  html body #attendanceView .assessmentScoreCell:has([data-score-band="good"]) { background:#f0f8ed !important; }
  html body #attendanceView .assessmentScoreCell:has([data-score-band="average"]) { background:#fff8db !important; }
  html body #attendanceView .assessmentScoreCell:has([data-score-band="low"]) { background:#fdf0f0 !important; }
  html body #attendanceView .feedbackPreviewHidden { display:none !important; }
  html body #attendanceView .feedbackInlineInput:not([readonly]) { max-height:none !important; }
  html body .attendanceTextPreview { display:block !important; width:100% !important; min-height:44px !important; padding:2px 4px !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:inherit !important; font:inherit !important; text-align:left !important; cursor:pointer !important; }
  html body .attendanceTextPreview[hidden] { display:none !important; }
  html body .attendanceTextClamp { display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; line-height:1.5 !important; overflow-wrap:anywhere !important; white-space:pre-wrap !important; }
  html body .attendanceTextPreview:focus-visible { outline:2px solid var(--account-link,#087f76) !important; outline-offset:2px !important; }
  /* Feedback previews are buttons for disclosure, not bold action labels. */
  html body :is(.attendanceTextPreview[data-read-field],.attendanceTextPreview[data-read-field] *,textarea.feedbackInlineInput,#feedbackPrimaryInput,#feedbackWeaknessInput,#attendanceTextPreviewBody) {
    font-weight:400 !important; text-align:justify !important; text-align-last:left !important;
  }
  html body .promotionPreview .paymentLine { display:inline !important; }
  html body .promotionPreview .paymentLine + .paymentLine::before { content:" · "; }
  html body #attendanceTextPreviewDialog { width:min(640px,calc(100vw - 24px)) !important; max-height:calc(100dvh - 24px) !important; }
  html body #attendanceTextPreviewBody { white-space:pre-wrap !important; overflow-wrap:anywhere !important; line-height:1.5 !important; }
  html body #attendanceView .assessmentScoreCell .assessmentSaveStatus { position:absolute !important; bottom:1px !important; left:0 !important; width:100% !important; font-size:11px !important; line-height:1.2 !important; }
  html body #attendanceHead :is(.sttCol,.nameCol) { background:var(--account-surface-soft,#edf4f8) !important; }
  html body :is(.assessmentScoreInput,.gradeScoreCircle) {
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    box-sizing:border-box !important; width:36px !important; height:36px !important; min-height:36px !important;
    padding:0 !important; border:0 !important; border-radius:50% !important;
    text-align:center !important; vertical-align:middle !important; font-size:14px !important; line-height:36px !important; font-variant-numeric:tabular-nums !important;
    box-shadow:none !important; color:var(--account-text,#172033) !important; background:var(--account-surface-soft,#f1f5f9) !important;
  }
  html body :is(.assessmentScoreInput,.gradeScoreCircle)[data-score-band="good"] { background:#d9ead3 !important; color:#166534 !important; }
  html body :is(.assessmentScoreInput,.gradeScoreCircle)[data-score-band="average"] { background:#ffe599 !important; color:#854d0e !important; }
  html body :is(.assessmentScoreInput,.gradeScoreCircle)[data-score-band="low"] { background:#ea9999 !important; color:#7f1d1d !important; }
  html body .assessmentScoreInput:disabled { opacity:1 !important; -webkit-text-fill-color:currentColor !important; }
  html body .assessmentScoreInput:focus-visible { outline:2px solid var(--account-link,#087f76) !important; outline-offset:2px !important; }
  html body .assessmentHead button { border:0 !important; background:transparent !important; color:inherit !important; padding:4px !important; min-height:44px !important; width:100% !important; }
  html body .assessmentHead button:disabled { opacity:1 !important; cursor:default !important; }
  html body .assessmentHead button:enabled { cursor:pointer !important; text-decoration:underline dotted !important; text-underline-offset:3px !important; }
  @media (min-width: 921px) {
    html body #attendanceView :is(.assessmentHead,.assessmentScoreCell) { min-width:0 !important; padding:4px !important; }
    html body #attendanceView .assessmentHead { width:auto !important; }
    html body #attendanceView .assessmentHead small { white-space:normal !important; overflow-wrap:anywhere !important; }
    html body #attendanceClassStripControls { flex-shrink:0 !important; }
    html body #attendanceTopControls { flex-wrap:wrap !important; }
    html body #attendanceTopControls :is(button,input) { font-size:14px !important; }
    html body #attendanceHead th { padding: 4px 6px !important; height: auto !important; }
    html body #attendanceHead .sessionHead button { gap: 2px !important; min-height: 40px !important; padding: 0 !important; }
  }
  @media (max-width: 920px) {
    html body :is(.assessmentScoreInput,.gradeScoreCircle) { width:44px !important; height:44px !important; min-height:44px !important; line-height:44px !important; }
    html body #workspace[data-view="attendance"] { grid-template-rows: auto minmax(0,1fr) !important; }
    html body #workspace[data-view="attendance"] :is(#workspaceTopbar,#attendanceView) {
      width: 100% !important; max-width: none !important; min-width: 0 !important; margin-inline: 0 !important;
    }
    /* One status trigger; existing quick-status dialog contains all choices. */
    html body #attendanceView .attendanceCompactRow:not(.expanded) { grid-template-rows:28px 44px !important; height:auto !important; min-height:78px !important; }
    html body #attendanceView .mobileAttendanceChoices { display: none !important; }
    html body #attendanceView .statusChip {
      display: grid !important; place-items: center !important;
      width: 44px !important; height: 44px !important; min-height: 44px !important;
      padding: 0 !important; border-radius: 10px !important;
    }
    html body #attendanceView :is(.activeSessionCell,.sessionEditor) { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; }
  }
}

/* TESTDD-079: scoped overrides, preserving the full-height workspace. */
@layer attendance-polish {
  html body #workspace[data-view="pll"] #pllView {
    overflow:auto !important; min-height:0 !important; overscroll-behavior:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  html body #pllView .pllShell { display:block !important; height:auto !important; min-height:0 !important; overflow:visible !important; }
  html body #pllView :is(.pllSendPanel,.pllSettingsPanel):not(.hidden) { height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; }
  html body #pllView :is(.pllTableWrap,.pllHistoryTableWrap) { height:auto !important; min-height:0 !important; max-height:none !important; overflow:auto !important; overscroll-behavior:auto !important; }
  html body #assessmentScoresDialog { width:min(620px,calc(100vw - 24px)) !important; max-height:calc(100dvh - 24px) !important; padding:16px !important; overflow:auto !important; }
  html body #assessmentScoresBody { display:grid !important; gap:8px !important; }
  html body #assessmentScoresBody .assessmentScoreCard { display:grid !important; grid-template-columns:minmax(0,1fr) 48px !important; grid-template-rows:auto auto !important; gap:4px 12px !important; margin:0 !important; padding:10px 0 !important; border-bottom:1px solid var(--account-border,#dbe5ef) !important; align-items:center !important; }
  html body #assessmentScoresBody .assessmentScoreCard > button { grid-column:1 !important; grid-row:1 !important; min-height:24px !important; padding:0 !important; background:transparent !important; border:0 !important; text-align:left !important; color:var(--account-text,#172033) !important; opacity:1 !important; font-size:14px !important; }
  html body #assessmentScoresBody .assessmentScoreCard > span { grid-column:1 !important; grid-row:2 !important; font-size:14px !important; line-height:1.4 !important; overflow-wrap:anywhere !important; }
  html body .assessmentClearButton { display:block; margin:4px auto 0; padding:4px; min-height:28px; font-size:11px; color:var(--text,#172033); background:transparent; }
  html body .assessmentClearButton:disabled { opacity:.45; }
  html body #assessmentScoresBody .assessmentScoreCard > button.assessmentClearButton { grid-column:1 !important; grid-row:3 !important; min-height:44px !important; font-size:12px !important; justify-self:start; color:var(--danger,#b91c1c) !important; }
  html body #assessmentScoresBody .assessmentScoreCard > button.assessmentClearButton:disabled { opacity:.45 !important; }
  html body #assessmentScoresBody .assessmentScoreCard > .assessmentScoreInput { grid-column:2 !important; grid-row:1 / 3 !important; justify-self:center !important; font-size:16px !important; }
  html body #assessmentScoresBody .assessmentSaveStatus:empty { display:none !important; }
  html body #assessmentScoresBody .assessmentSaveStatus:not(:empty) { grid-column:1 / -1 !important; font-size:12px !important; }
  @media (max-width:920px) {
    html body #workspace #attendanceView #attendanceRows :is(.attendanceCompactRow,.nameCell,.studentNameBox,.mobileDetailsToggle,.mobileAttendanceChoices,.mobileAttendanceStatus,.mobileAttendanceLatest) { max-height:none !important; max-width:none !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceCompactRow { display:grid !important; grid-template-columns:28px minmax(0,1fr) !important; grid-template-rows:auto !important; grid-auto-rows:auto !important; gap:6px 8px !important; height:auto !important; min-height:0 !important; padding:10px !important; align-items:start !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceCompactRow:not(.expanded) { grid-template-rows:auto !important; min-height:0 !important; }
    html body #workspace #attendanceView #attendanceRows .sttCell { grid-column:1 !important; grid-row:1 !important; position:static !important; width:28px !important; height:28px !important; padding:0 !important; font-size:13px !important; }
    html body #workspace #attendanceView #attendanceRows .nameCell { grid-column:2 !important; grid-row:1 !important; position:relative !important; padding:0 32px 0 0 !important; width:auto !important; min-width:0 !important; }
    html body #workspace #attendanceView #attendanceRows .studentNameBox { display:flex !important; align-items:flex-start !important; gap:8px !important; height:auto !important; min-height:44px !important; padding:0 !important; }
    html body #workspace #attendanceView #attendanceRows .studentNameMain { min-width:0 !important; padding:0 !important; }
    html body #workspace #attendanceView #attendanceRows .mobileTuitionBadge { font-size:12px !important; line-height:1.4 !important; padding:2px 6px !important; }
    html body #workspace #attendanceView #attendanceRows .studentNameMain strong { font-size:16px !important; line-height:1.35 !important; white-space:normal !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceStudentActions { position:absolute !important; top:0 !important; right:0 !important; }
    html body #workspace #attendanceView #attendanceRows .mobileDetailsToggle { position:static !important; display:inline-flex !important; align-items:center !important; gap:6px !important; min-height:32px !important; margin:4px 0 0 !important; padding:0 !important; width:auto !important; }
    html body #workspace #attendanceView #attendanceRows .mobileDetailsToggle span { display:inline !important; font-size:13px !important; }
    html body #workspace #attendanceView #attendanceRows .mobileDetailsToggle i { font-size:18px !important; }
    html body #workspace #attendanceView #attendanceRows .mobileDetailsToggle { color:var(--account-link,#087f76) !important; opacity:1 !important; font-weight:400 !important; }
    html body #workspace #attendanceView #attendanceRows .activeSessionCell { grid-column:2 !important; grid-row:2 !important; position:static !important; justify-self:stretch !important; width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; max-height:none !important; padding:0 !important; }
    html body #workspace #attendanceView #attendanceRows .activeSessionCell { display:block !important; grid-template-columns:none !important; }
    html body #workspace #attendanceView #attendanceRows .sessionEditor { width:100% !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; max-height:none !important; display:block !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceRecorded :is(.sessionEditor,.mobileAttendanceChoices) { width:100% !important; min-width:0 !important; max-width:none !important; justify-self:stretch !important; }
    html body #workspace #attendanceView #attendanceRows .statusChip { display:none !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceChoices { display:flex !important; flex-wrap:wrap !important; justify-content:flex-start !important; justify-self:stretch !important; gap:8px !important; width:100% !important; min-width:0 !important; height:auto !important; margin:0 !important; padding:0 !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceChoices { position:static !important; inset:auto !important; transform:none !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceLatest { position:static !important; inset:auto !important; transform:none !important; margin:0 !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; min-height:44px !important; min-width:44px !important; padding:0 !important; font-size:14px !important; border-radius:50% !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus { opacity:1 !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus.status-present { background:#dcfce7 !important; color:#166534 !important; border-color:#86efac !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus.status-late { background:#fff7d6 !important; color:#854d0e !important; border-color:#f5d56a !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus.status-approved { background:#dbeafe !important; color:#1d4ed8 !important; border-color:#93c5fd !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus:is(.status-void,.status-absent) { background:#fee2e2 !important; color:#991b1b !important; border-color:#fca5a5 !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceLatest { display:none !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled .mobileAttendanceStatus { display:none !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled .mobileAttendanceLatest { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:30px !important; min-width:30px !important; height:30px !important; min-height:30px !important; font-size:12px !important; border-radius:8px !important; }
    html body #workspace #attendanceView #attendanceRows :is(.feedbackCell,.noteCell,.nicknameCell) { grid-column:1 / -1 !important; grid-row:auto !important; position:static !important; width:100% !important; min-width:0 !important; max-width:none !important; height:auto !important; padding:0 !important; }
    html body #workspace #attendanceView #attendanceRows :is(.feedbackCell,.noteCell)::before { display:block !important; position:static !important; margin:4px 0 !important; font-size:12px !important; line-height:1.4 !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceTextPreview { padding:0 !important; }
    html body #workspace #attendanceView #attendanceRows .nicknameCell { display:block !important; font-size:14px !important; }
    html body #workspace #attendanceView #attendanceRows .nicknameCell::before { content:'Biệt danh: '; }
    html body #workspace #attendanceView #attendanceRows .studentNoteInput { font-size:16px !important; min-height:44px !important; }
  }
}

/* TESTDD-090 supersedes IMG_2619 geometry; its save/30-minute contracts remain. */
@layer attendance-polish {
  /* TESTDD-081: plain bold nickname; Edit keeps the existing attendance save path. */
  html body #attendanceView :is(.attendanceNicknameInput,.attendanceNicknameText) { font-family:Roboto,sans-serif !important; font-size:14px !important; font-weight:700 !important; }
  html body #attendanceView .attendanceNicknameInput { width:100%; min-width:0; max-width:100%; padding:6px 8px; border:0 !important; background:transparent !important; box-shadow:none !important; }
  html body #attendanceView .attendanceNicknameInput:focus-visible { outline:2px solid var(--primary,#2563eb) !important; outline-offset:2px; }
  html body :is(#attendanceMobileTabs,.mobileFeedbackSummary,.mobileFeedbackHeading) { display:none !important; }
  html body .attendanceMobileActionIcon { display:none !important; }
  @media(max-width:920px) {
    html body #workspace #attendanceView #attendanceRows .sttCell { z-index:3 !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileFeedbackSummary { height:auto !important; min-height:39px !important; max-height:40px !important; width:100% !important; max-width:none !important; white-space:normal !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsToggle { left:auto !important; transform:none !important; z-index:4 !important; }
    html body #workspace[data-view="attendance"] #workspaceTopbar { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-rows:auto auto !important; padding:8px 10px 8px 58px !important; gap:4px 8px !important; min-height:76px !important; background:#f1f8fc !important; }
    html body #workspace[data-view="attendance"] #viewTitle { font-size:16px !important; font-weight:500 !important; line-height:22px !important; }
    html body #attendanceMobileHeaderActions { grid-column:2 !important; grid-row:1 / 3 !important; align-self:center !important; display:flex !important; gap:4px !important; }
    html body #attendanceMobileHeaderActions button { min-height:36px !important; padding:6px !important; font-size:11px !important; }
    html body #workspace[data-view="attendance"] #attendanceMobileTabs { display:flex !important; gap:6px !important; grid-column:1 !important; grid-row:2 !important; }
    html body #attendanceMobileTabs button { position:relative; min-height:30px; padding:4px 10px; border:1px solid #172033; border-radius:22px; background:transparent; font-size:14px; font-weight:400; white-space:nowrap; }
    html body #attendanceMobileTabs button.active { background:#abc8f1; }
    html body #attendanceMobileTabs button.active::after { content:""; position:absolute; top:100%; left:calc(50% - 8px); border:8px solid transparent; border-top-color:#abc8f1; }
    html body #attendanceMobileTabs button[hidden] { display:none !important; }
    html body #workspace #attendanceView .tableWrap { background:#f1f6fb !important; padding:8px !important; }
    html body #workspace #attendanceView #attendanceRows { display:grid !important; gap:8px !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceCompactRow { display:grid !important; position:relative !important; grid-template-columns:68px minmax(0,1fr) !important; grid-template-rows:auto auto !important; gap:5px 8px !important; height:auto !important; min-height:100px !important; padding:10px !important; border:1px solid #e9eff5 !important; border-radius:16px !important; background:#fff !important; box-shadow:0 2px 6px #dbe5ef55 !important; overflow:visible !important; }
    html body #workspace #attendanceView #attendanceRows .sttCell { display:grid !important; place-items:center !important; position:absolute !important; left:10px !important; top:12px !important; width:23px !important; height:23px !important; min-width:23px !important; max-width:23px !important; min-height:23px !important; padding:0 !important; margin:0 !important; z-index:2; border:2px solid white !important; border-radius:50% !important; background:#38bdf8 !important; color:white !important; font-size:12px !important; }
    html body #workspace #attendanceView #attendanceRows tr:nth-child(3n+1) .sttCell { background:#fbbf24 !important; }
    html body #workspace #attendanceView #attendanceRows tr:nth-child(3n+2) .sttCell { background:#fb7185 !important; }
    html body #workspace #attendanceView #attendanceRows .nameCell { grid-column:1 / -1 !important; grid-row:1 !important; position:static !important; padding:0 !important; width:auto !important; height:auto !important; min-height:30px !important; background:transparent !important; }
    html body #workspace #attendanceView #attendanceRows .studentNameBox { display:grid !important; grid-template-columns:68px minmax(0,1fr) !important; gap:8px !important; min-height:0 !important; align-items:start !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceAvatar { position:absolute !important; left:10px !important; top:12px !important; width:62px !important; height:72px !important; min-width:62px !important; max-width:62px !important; min-height:0 !important; max-height:none !important; margin:0 !important; border-radius:12px !important; overflow:hidden !important; }
    html body #workspace #attendanceView #attendanceRows .studentNameMain { grid-column:2 !important; position:static !important; padding:0 !important; min-width:0 !important; min-height:0 !important; }
    html body #workspace #attendanceView #attendanceRows .studentNameMain strong { display:block !important; font-size:16px !important; font-weight:700 !important; line-height:1.3 !important; padding-right:20px !important; overflow-wrap:anywhere !important; white-space:normal !important; }
    html body #workspace #attendanceView #attendanceRows .mobileTuitionBadge { display:inline-flex !important; position:static !important; margin:3px 0 0 auto !important; float:right; padding:2px 8px !important; font-size:11px !important; max-width:none !important; white-space:normal !important; line-height:16px !important; border-radius:20px !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceStudentActions { top:2px !important; right:2px !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceRowMoreBtn { width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; padding:0 !important; }
    html body #workspace #attendanceView #attendanceRows .activeSessionCell { display:block !important; position:static !important; grid-column:2 !important; grid-row:2 !important; width:100% !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; padding:0 !important; background:transparent !important; }
    html body #workspace #attendanceView #attendanceRows .sessionEditor { width:100% !important; height:auto !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceChoices { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:4px !important; width:100% !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus { display:flex !important; flex-direction:column !important; gap:3px !important; width:100% !important; min-width:0 !important; height:44px !important; min-height:44px !important; padding:3px 0 !important; border:1px solid !important; border-radius:8px !important; font-size:10px !important; font-weight:500 !important; line-height:14px !important; touch-action:manipulation; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus i { font-size:16px !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus.status-present { color:#087c49 !important; background:#e9fff3 !important; border-color:#adf4ce !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus.status-late { color:#a85b00 !important; background:#fff7e3 !important; border-color:#ffe0a0 !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus.status-approved { color:#164ec7 !important; background:#eaf2ff !important; border-color:#bed5ff !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus.status-void { color:#dc264e !important; background:#fff0f4 !important; border-color:#ffb5c5 !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus.status-absent { color:#b91c1c !important; background:#fff1f2 !important; border-color:#fda4af !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceStatus.active { box-shadow:inset 0 0 0 2px currentColor !important; font-weight:700 !important; }
    html body #workspace #attendanceView #attendanceRows .mobileDetailsToggle { display:none !important; }
    html body #workspace #attendanceView #attendanceRows :is(.feedbackCell,.noteCell,.nicknameCell,.academicCell) { display:none !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .attendanceCompactRow { min-height:78px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .attendanceAvatar { height:56px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows :is(.activeSessionCell,.mobileTuitionBadge) { display:none !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .studentNameMain strong { padding-right:90px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .studentNameMain { display:block !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .studentNameMain strong { width:100% !important; box-sizing:border-box !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileFeedbackSummary { display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:14px; line-height:1.4; font-weight:400; color:#526177; margin-top:8px; padding-right:16px; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .academicCell { display:block !important; position:absolute !important; top:8px !important; right:26px !important; width:76px !important; padding:0 !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .academicCell::before { display:none !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .academicSelect { width:100% !important; height:24px !important; min-height:24px !important; padding:1px 4px !important; font-size:11px !important; border-radius:20px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsToggle { display:flex !important; position:absolute !important; top:30px !important; right:4px !important; width:26px !important; height:30px !important; min-height:30px !important; margin:0 !important; padding:0 !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsToggle span { display:none !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsToggle i::before { content:"⌄" !important; font-family:Arial,sans-serif; font-size:22px; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsExpanded .mobileDetailsToggle i { transform:rotate(180deg); }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsExpanded .mobileFeedbackSummary { display:none !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsExpanded :is(.feedbackCell,.noteCell,.nicknameCell) { display:block !important; grid-column:2 !important; grid-row:auto !important; padding:8px !important; border:1px solid #c6f8e3 !important; border-radius:8px !important; background:#f2fff9 !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsExpanded .feedbackWeaknessCell { border-color:#ffe8b8 !important; background:#fffcf2 !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows :is(.feedbackCell,.noteCell)::before { display:none !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileFeedbackHeading { display:flex !important; gap:6px; align-items:center; font-size:12px; font-weight:600; color:#087c49; margin-bottom:3px; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .feedbackWeaknessCell .mobileFeedbackHeading { color:#a85b00; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows :is(.feedbackInlineInput,.attendanceTextPreview) { font-size:14px !important; font-weight:400 !important; line-height:1.5 !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsExpanded .attendanceTextPreview:not([hidden]) { display:block !important; -webkit-line-clamp:unset !important; max-height:none !important; height:auto !important; white-space:pre-wrap !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceMobileSelectorRow { display:none !important; }
    /* 091: editor and preview are mutually exclusive; compact status is the menu entry. */
    html body #workspace #attendanceView #attendanceRows .nameCell { position:static !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceAvatar { grid-column:auto !important; grid-row:auto !important; }
    html body #workspace #attendanceView #attendanceRows .sttCell { grid-column:auto !important; grid-row:auto !important; left:10px !important; top:12px !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceDesktopMore { display:none !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceMobileActionIcon { display:grid !important; place-items:center; font-size:20px !important; width:32px; height:32px; border-radius:9px; border:0 !important; padding:0 !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceRowMoreBtn { width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceRowMoreBtn { border:0 !important; background:transparent !important; box-shadow:none !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceStudentActions { top:8px !important; right:8px !important; }
    html body #workspace #attendanceView #attendanceRows .studentNameMain strong { padding-right:40px !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled { min-height:90px !important; grid-template-rows:auto auto !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled .activeSessionCell { display:block !important; grid-column:2 !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled .attendanceAvatar { height:62px !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled .mobileTuitionBadge { margin-top:6px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .academicCell { right:48px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .studentNameMain strong { padding-right:125px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsToggle { top:40px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .attendanceTextPreview[hidden] { display:none !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows textarea.feedbackInlineInput:not([readonly]) { font-size:16px !important; text-align:left !important; text-align-last:left !important; padding:10px !important; max-height:none !important; line-height:1.5 !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceMobileActionIcon.status-present { color:#087c49; background:#e9fff3; }
    html body #workspace #attendanceView #attendanceRows .attendanceMobileActionIcon.status-late { color:#a85b00; background:#fff7e3; }
    html body #workspace #attendanceView #attendanceRows .attendanceMobileActionIcon.status-approved { color:#164ec7; background:#eaf2ff; }
    html body #workspace #attendanceView #attendanceRows .attendanceMobileActionIcon.status-void { color:#dc264e; background:#fff0f4; }
    html body #workspace #attendanceView #attendanceRows .attendanceMobileActionIcon.status-absent { color:#b91c1c; background:#fff1f2; }
    html body #attendanceTextPreviewDialog { padding:0 !important; border-radius:16px !important; overflow:hidden !important; }
    html body #attendanceTextPreviewDialog > header { position:static !important; display:flex !important; align-items:flex-start; gap:12px; padding:16px !important; }
    html body #attendanceTextPreviewTitle { font-size:17px !important; line-height:1.4 !important; margin:0 !important; flex:1; overflow-wrap:anywhere; }
    html body #attendanceTextPreviewDialog .iconBtn { flex:0 0 44px; width:44px !important; height:44px !important; min-height:44px !important; padding:0 !important; }
    html body #attendanceTextPreviewBody { padding:0 16px 16px !important; max-height:calc(100dvh - 200px); overflow:auto; font-size:16px !important; text-align:left !important; }
    html body #attendanceTextPreviewDialog > footer { display:none !important; }
  }
  @media(max-width:360px) {
    html body #workspace #attendanceView #attendanceRows .activeSessionCell { grid-column:1 / -1 !important; }
    html body #workspace #attendanceView #attendanceRows .attendanceCompactRow { min-height:120px !important; }
    html body #workspace #attendanceView #attendanceRows .nameCell { min-height:72px !important; }
    html body #workspace[data-view="attendance"] #workspaceTopbar { padding-left:46px !important; }
    html body #attendanceMobileTabs button { padding:4px 6px; font-size:12px; }
  }
}

/* 092: tuition on the right, attendance square beside the avatar; no mobile !/more icon. */
.attendanceMobileActionLabel { display:none; }
.mobileStatusStudentDetails { display:none; }
@layer attendance-polish {
  @media(max-width:920px) {
    html body #workspace #attendanceView #attendanceRows .attendanceStudentActions { display:none !important; }
    html body #workspace #attendanceView #attendanceRows .mobileAttendanceLatest { display:none !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled .mobileAttendanceChoices { display:flex !important; justify-content:flex-start !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled .mobileAttendanceLatest { display:flex !important; width:44px !important; flex:0 0 44px !important; height:44px !important; min-height:44px !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled .studentNameBox { position:static !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled .nameCell { min-height:0 !important; }
    html body #workspace #attendanceView:not(.editMode) #attendanceRows .mobileAttendanceSettled .mobileTuitionBadge { position:absolute !important; left:auto !important; top:auto !important; right:10px !important; bottom:12px !important; transform:none !important; margin:0 !important; }
    html body #workspace #attendanceView #attendanceRows .studentNameMain strong { padding-right:0 !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .academicCell { right:10px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"]:not(.editMode) #attendanceRows .mobileAttendanceSettled .activeSessionCell { display:none !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .studentNameMain strong { padding-right:86px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsExpanded { padding-bottom:60px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .mobileDetailsExpanded .attendanceStudentActions { display:block !important; top:auto !important; bottom:10px !important; right:10px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .attendanceMobileActionLabel { display:inline !important; font-size:12px !important; }
    html body #workspace #attendanceView[data-mobile-mode="feedback"] #attendanceRows .attendanceRowMoreBtn { width:auto !important; height:44px !important; padding:8px !important; }
    html body #statusDialog .mobileStatusStudentDetails { display:block; margin:12px 0; }
    html body #statusDialog .mobileStatusStudentDetails summary { min-height:44px; display:flex; align-items:center; cursor:pointer; }
    html body #statusDialogStudentActions { display:grid; gap:6px; }
    html body #statusDialogStudentActions button { min-height:44px; text-align:left; }
  }
}
.evidencePageViewer{width:min(1000px,calc(100vw - 24px));max-height:90dvh;overflow:auto;padding:16px}
.evidencePageViewer header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.evidencePageViewer nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.evidencePageViewer nav [aria-pressed=true]{background:#e1f5f6;border-color:#069bac}
.evidencePageStage{min-height:200px;text-align:center;background:#f1f5f9}
.evidencePageStage img{display:block;max-width:100%;height:auto;margin:auto}

/* TESTDD121: temporary view tools; primary edit/save controls remain visible. */
html body :is(#btnAddAssessment,#btnGradeOnly,#attendanceLearningModes,#attendanceLearningView){display:none!important}
#attendanceToolsButton{font-size:22px;font-weight:600;min-width:44px;min-height:44px}
.attendanceToolsDialog{width:min(390px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:16px;border:1px solid var(--border);border-radius:14px;background:white;color:#172338}
.attendanceToolsDialog header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.attendanceToolsDialog button{min-height:44px;min-width:44px;border:1px solid #dbe4ed;border-radius:8px;background:#fff;color:#172338;cursor:pointer}
.attendanceToolsDialog label{display:grid;gap:6px;margin-top:14px}
.attendanceToolsDialog select{min-height:44px;width:100%;font-size:16px}
.attendanceToolsDialog p{font-size:13px;color:#475569}
.attendanceToolsModes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.attendanceToolsDialog [aria-pressed=true]{background:#e1f5f6;border-color:#069bac}
.attendanceMonthGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#attendanceSheetMonth{cursor:pointer}
#attendanceView .studentSchoolClass,.studentAdminStudentCell .studentSchoolClass{display:block!important;font-size:13px!important;font-weight:400!important;line-height:1.4;color:#475569}
#attendanceView [data-grade-average]{background:transparent!important;color:inherit!important;border-radius:0!important;box-shadow:none!important}
#attendanceView .attendanceAvatar img:not([src]){visibility:hidden}
/* TESTDD122: anchored, non-modal menus; account errors stay in the modal top layer. */
.attendanceDropdown{position:fixed;inset:auto;margin:0;box-sizing:border-box;z-index:1100;width:min(300px,calc(100vw - 16px));padding:10px;font:14px/1.45 system-ui,sans-serif;box-shadow:0 8px 24px rgb(15 23 42 / .16)}
.attendanceDropdown[hidden]{display:none!important}
.attendanceDropdown::backdrop{background:transparent;backdrop-filter:none}
.attendanceDropdown .attendanceToolsModes{grid-template-columns:1fr;gap:4px}
.attendanceDropdown .attendanceToolsModes button,.attendanceDropdown .rosterActionChoices button{display:flex;align-items:center;gap:10px;padding:8px 10px;text-align:left;font:inherit}
.attendanceDropdown .attendanceToolsModes i,.attendanceDropdown .rosterActionChoices i{font-size:18px}
.attendanceDropdown button:disabled{opacity:.5;cursor:default}
.attendanceDropdown button.danger{color:#b91c1c;border-color:#fecaca}
.attendanceDropdown :is(button,select):focus-visible{outline:2px solid #078895;outline-offset:2px}
.attendanceDropdown .rosterActionChoices{gap:4px}
.attendanceMonthShortcut{display:none}
@media(max-width:920px){.attendanceDropdown .attendanceMonthShortcut{display:block;width:100%;margin-top:6px}}
@layer attendance-polish{
  html body #workspace #attendanceView #attendanceToolsButton{flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important}
  html body #workspace #attendanceView #attendanceToolsButton .attendanceToolsMark{display:inline-grid!important;place-items:center;width:23px;height:23px;border:1.5px solid currentColor;border-radius:50%;font:700 17px/1 system-ui}
  html body #workspace #attendanceView #attendanceRows .attendanceRosterIcons button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border:1px solid #dbe4ed!important;border-radius:8px!important;background:transparent!important;font:700 22px/1 system-ui!important}
  html body #rosterActionsDialog.attendanceDropdown{width:min(250px,calc(100vw - 16px))!important;max-width:250px!important;padding:8px!important;max-height:calc(100dvh - 16px);background:#fff!important}
  html body #workspace[data-view="config"] .accountAdminPanel{padding:12px!important}
  html body #workspace[data-view="config"] #configTabs:has([data-config-tab=accounts].active){padding-left:100px!important;min-height:54px!important;box-sizing:border-box!important}
  html body #workspace[data-view="config"] .accountAdminHeader{gap:10px!important;margin-bottom:12px!important;align-items:center!important}
  html body #workspace[data-view="config"] .accountAdminHeader h3{font-size:20px!important;margin:0 0 4px!important}
  html body #workspace[data-view="config"] .accountAdminHeader p{margin:0!important;font-size:14px!important;color:#475569!important}
  html body #workspace[data-view="config"] .accountListFilters{display:grid!important;grid-template-columns:minmax(200px,2fr) minmax(140px,1fr) minmax(140px,1fr) auto!important;align-items:end!important;gap:10px!important;margin:0 0 14px!important}
  html body #workspace[data-view="config"] .accountListFilters label{font-size:13px!important;font-weight:500!important;gap:4px!important}
  html body #workspace[data-view="config"] .accountListFilters :is(input,select){height:44px!important;min-height:44px!important;font-size:14px!important}
  html body #workspace[data-view="config"] .accountTable :is(th,td){text-align:left!important;padding:8px 12px!important;font-size:14px!important}
  html body #workspace[data-view="config"] .accountTable th{font-size:12px!important}
  html body #workspace[data-view="config"] .accountTable td:last-child{width:90px!important}
  html body #workspace[data-view="config"] .accountTable .ghostBtn{min-height:44px!important;padding:6px 12px!important;border-radius:8px!important;box-shadow:none!important}
  html body :is(#accountCreateDialog,#accountDialog) [hidden]{display:none!important}
  html body :is(#accountCreateDialog,#accountDialog) :is(header,footer){padding:12px 16px!important}
  html body #accountDialog form{height:auto!important;max-height:calc(100dvh - 24px)!important;grid-template-rows:auto minmax(0,1fr) auto!important}
  html body :is(#accountCreateDialog,#accountDialog) :is(.accountCreateDialogBody,.accountDialogBody){padding:14px 16px!important;gap:10px!important;max-height:calc(100dvh - 190px)!important;overflow:auto!important}
  html body :is(#accountCreateDialog,#accountDialog) :is(input:not([type=checkbox]),select){min-height:44px!important;font-size:16px!important;font-weight:400!important}
  html body :is(#accountCreateDialog,#accountDialog) footer{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important}
  html body :is(#accountCreateDialog,#accountDialog) footer button{min-height:44px!important;padding:8px 12px!important;border-radius:8px!important;flex:0 1 auto!important;font-size:14px!important;box-shadow:none!important}
  html body :is(#accountCreateDialog,#accountDialog) .accountFormError{flex-basis:100%!important;width:100%!important;box-sizing:border-box!important;margin:0 0 4px!important;padding:10px 12px!important;background:#fff1f2!important;border:1px solid #fecdd3!important;border-radius:8px!important;color:#9f1239!important;font-size:14px!important;line-height:1.5!important;overflow-wrap:anywhere}
  html body #accountDialog .accountPermissionTabs button{min-height:44px!important;padding:8px 12px!important;font-size:14px!important}
  @media(max-width:920px){html body #workspace[data-view="config"] .accountListFilters{grid-template-columns:1fr 1fr!important}html body #workspace[data-view="config"] .accountListFilters label:first-child{grid-column:1/-1!important}html body #workspace[data-view="config"] .accountTable :is(th,td){padding:8px!important}}
}
@layer attendance-polish {
  html body :is(#btnAddAssessment,#btnGradeOnly,#attendanceLearningModes,#attendanceLearningView){display:none!important}
  @media(max-width:920px){
    html body #workspace[data-view="attendance"] #attendanceMobileHeaderActions{flex-wrap:nowrap!important;gap:4px!important;min-width:0!important}
    html body #workspace[data-view="attendance"] #attendanceMobileHeaderActions > button{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:4px!important}
    html body #workspace[data-view="attendance"] #attendanceMobileHeaderActions > button span{display:none!important}
    html body #workspace[data-view="attendance"] #attendanceMobileTabs{min-width:0!important;flex-wrap:wrap!important}
  }
}
.mobileStatusOnly #statusDialogOriginalDate { font-weight:700; margin:8px 0; }
@media (max-width:920px) {
  html body #statusDialog.mobileStatusOnly { width:calc(100vw - 24px); max-width:430px; max-height:88dvh; overflow:auto; }
  html body #statusDialog.mobileStatusOnly .dialogStatusChoices { display:block; }
  html body #statusDialog.mobileStatusOnly .dialogStatusChoices .quickStatusBtn { width:100%; min-height:44px; pointer-events:none; }
  html body #statusDialog.mobileStatusOnly .extraSessionRow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  html body #statusDialog.mobileStatusOnly .extraSessionRow [data-extra-field="session"] { display:none; }
  html body #statusDialog.mobileStatusOnly .extraSessionRow [data-extra-field="reason"],
  html body #statusDialog.mobileStatusOnly .extraSessionRow .learningProgressEditor { grid-column:1/-1; }
  html body #statusDialog.mobileStatusOnly .extraSessionRow :is(input,select) { min-width:0; min-height:44px; width:100%; box-sizing:border-box; }
}

/* TESTDD242: distinguish base-session controls from an existing makeup date. */
#statusBaseLabel242 { margin:10px 0 6px; font-weight:700; color:#17354d; }
#statusDialogOriginalDate { margin:8px 0; line-height:1.5; color:#475569; }
#statusForm[data-has-makeup="true"] .extraSessionsPanel { border-top:1px solid #cbdde5; margin-top:16px; padding-top:12px; }
@media(max-width:920px) {
 html body #statusDialog.mobileStatusOnly #statusForm[data-has-makeup="true"] .extraSessionsPanel > header span { display:none; }
 html body #statusDialog #statusForm[data-has-makeup="true"] .extraSessionRow { min-width:0; }
}

/* TESTDD145: one date editor, separate rows for native iPhone controls.
   Hide add-day chrome only; existing entries and the desktop editor stay intact. */
@layer attendance-polish {
  @media (max-width:920px) {
    html body #statusDialog.mobileStatusOnly #statusForm[data-has-makeup="true"] .extraSessionsPanel > header { display:flex !important; flex-wrap:wrap; gap:8px; }
    html body #statusDialog.mobileStatusOnly .extraSessionsPanel > header,
    html body #statusDialog.mobileStatusOnly #statusDialogHint { display:none !important; }
    html body #statusDialog.mobileStatusOnly #statusDialogOriginalDate {
      margin:0 0 10px !important; padding:0 !important; border:0 !important;
      background:transparent !important; font-size:13px !important; line-height:1.4 !important;
      font-weight:500 !important; color:#475569 !important;
    }
    html body #statusDialog.mobileStatusOnly #extraSessionsEditor .extraSessionRow {
      grid-template-columns:minmax(0,1fr) !important; gap:10px !important;
    }
    html body #statusDialog.mobileStatusOnly #extraSessionsEditor .extraSessionRow > :is(input,select,.learningProgressEditor) {
      grid-column:1 !important; min-width:0 !important; max-width:100% !important;
      width:100% !important; box-sizing:border-box !important;
    }
    html body #statusDialog.mobileStatusOnly #extraSessionsEditor .extraSessionRow > :is(input,select) {
      height:44px !important; min-height:44px !important; font-size:16px !important;
    }
    html body #statusDialog.mobileStatusOnly #extraSessionsEditor input[type="date"] {
      display:block !important; min-height:44px !important; font-size:16px !important;
    }
  }
}