/* TESTDD-042: consolidated mobile guard for admin, audit and PLL screens. */
@media (max-width: 920px), (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  html,
  body,
  #appView,
  #workspace,
  #workspaceBody,
  #auditView,
  #pllView,
  #configView {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* One predictable, swipeable tab rail. Active tabs never resize siblings. */
  #workspace .auditHeaderActions:not(.hidden),
  #workspace #pllTabs.topbarPllTabs:not(.hidden),
  #workspace #configTabs.configTabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #workspace .auditHeaderActions::-webkit-scrollbar,
  #workspace #pllTabs.topbarPllTabs:not(.hidden)::-webkit-scrollbar,
  #workspace #configTabs.configTabs::-webkit-scrollbar {
    display: none;
  }

  #workspace .auditHeaderActions > *,
  #workspace .auditHeaderActions .auditScopeTabs,
  #workspace .auditHeaderActions .auditScopeTabs button,
  #workspace #pllTabs.topbarPllTabs:not(.hidden) button,
  #workspace #configTabs.configTabs button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  #workspace .auditHeaderActions .auditScopeTabs {
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #workspace[data-view="audit"] .auditPanel,
  #workspace[data-view="pll"] .pllShell,
  #workspace[data-view="config"] .configPanel {
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 8px 12px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  /* Audit: compact cards and do not paint off-screen cards until needed. */
  #workspace[data-view="audit"] .auditToolbar {
    gap: 8px !important;
  }

  html body #workspace[data-view="audit"] #auditView .auditTableWrap,
  html body #workspace[data-view="audit"] #auditView .auditTable,
  html body #workspace[data-view="audit"] #auditView .auditTable tbody,
  html body #workspace[data-view="audit"] #auditView .auditTable tr,
  html body #workspace[data-view="pll"] #pllView .pllTableWrap,
  html body #workspace[data-view="pll"] #pllView .pllHistoryTableWrap,
  html body #workspace[data-view="pll"] #pllView .pllTable,
  html body #workspace[data-view="pll"] #pllView .pllHistoryTable,
  html body #workspace[data-view="pll"] #pllView .pllTable tbody,
  html body #workspace[data-view="pll"] #pllView .pllHistoryTable tbody,
  html body #workspace[data-view="pll"] #pllView .pllTable tr,
  html body #workspace[data-view="pll"] #pllView .pllHistoryTable tr,
  html body #workspace[data-view="config"] #configView .accountTableWrap,
  html body #workspace[data-view="config"] #configView .accountTable,
  html body #workspace[data-view="config"] #configView .accountTable tbody,
  html body #workspace[data-view="config"] #configView .accountTable tr {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #workspace[data-view="audit"] #auditView .auditTable tr,
  html body #workspace[data-view="pll"] #pllView .pllTable tr,
  html body #workspace[data-view="pll"] #pllView .pllHistoryTable tr,
  html body #workspace[data-view="config"] #configView .accountTable tr {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #workspace[data-view="audit"] #auditView .auditTable,
  html body #workspace[data-view="pll"] #pllView .pllTable,
  html body #workspace[data-view="pll"] #pllView .pllHistoryTable,
  html body #workspace[data-view="config"] #configView .accountTable {
    display: block !important;
    table-layout: auto !important;
  }

  #workspace[data-view="audit"] .auditTable tbody,
  #workspace[data-view="audit"] .tuitionReminderReportTable tbody,
  #workspace[data-view="pll"] .pllTable tbody,
  #workspace[data-view="pll"] .pllHistoryTable tbody,
  #workspace[data-view="config"] .accountTable tbody {
    gap: 8px !important;
  }

  #workspace[data-view="audit"] .auditTable tbody > tr,
  #workspace[data-view="audit"] .tuitionReminderReportTable tbody > tr,
  #workspace[data-view="pll"] .pllTable tbody > tr,
  #workspace[data-view="pll"] .pllHistoryTable tbody > tr,
  #workspace[data-view="config"] .accountTable tbody > tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 170px;
  }

  html body #workspace[data-view="audit"] #auditView .auditTable tr {
    padding: 10px !important;
    gap: 5px !important;
  }

  html body #workspace[data-view="audit"] #auditView .auditTable td {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 4px 0 !important;
  }

  #workspace[data-view="audit"] .auditTable td:nth-child(2):empty,
  #workspace[data-view="audit"] .auditTable td:nth-child(4):empty {
    display: none !important;
  }

  #workspace[data-view="audit"] .auditDetails,
  #workspace[data-view="audit"] .auditAttendanceSummary,
  #workspace[data-view="audit"] .auditPill {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #workspace[data-view="audit"] .auditPager {
    padding: 10px 0 0 !important;
  }

  #workspace[data-view="audit"] .auditPagerNav {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 2px;
  }

  /* Tuition reminder report becomes readable cards instead of a squeezed table. */
  #workspace[data-view="audit"] .tuitionReminderReportWrap,
  #workspace[data-view="audit"] .tuitionReminderReportTable,
  #workspace[data-view="audit"] .tuitionReminderReportTable tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #workspace[data-view="audit"] .tuitionReminderReportTable thead {
    display: none !important;
  }

  #workspace[data-view="audit"] .tuitionReminderReportTable tbody {
    display: grid !important;
  }

  #workspace[data-view="audit"] .tuitionReminderReportTable tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #dbe6ee !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  #workspace[data-view="audit"] .tuitionReminderReportTable td {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 5px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #workspace[data-view="audit"] .tuitionReminderReportTable td::before {
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  #workspace[data-view="audit"] .tuitionReminderReportTable td:nth-child(1)::before { content: "Ngày"; }
  #workspace[data-view="audit"] .tuitionReminderReportTable td:nth-child(2)::before { content: "Ca trực"; }
  #workspace[data-view="audit"] .tuitionReminderReportTable td:nth-child(3)::before { content: "Học viên"; }
  #workspace[data-view="audit"] .tuitionReminderReportTable td:nth-child(4)::before { content: "Lớp"; }
  #workspace[data-view="audit"] .tuitionReminderReportTable td:nth-child(5)::before { content: "Nội dung"; }

  /* PLL: compact cards, wrap long tokens, stable controls. */
  #workspace[data-view="pll"] .pllToolbar,
  #workspace[data-view="pll"] .pllSettingsPanel,
  #workspace[data-view="pll"] .pllHistoryPanel,
  #workspace[data-view="pll"] .pllSendPanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #workspace[data-view="pll"] .pllTable tr,
  #workspace[data-view="pll"] .pllHistoryTable tr {
    padding: 10px !important;
  }

  #workspace[data-view="pll"] .pllTable td,
  #workspace[data-view="pll"] .pllHistoryTable td {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    overflow-wrap: anywhere !important;
  }

  #workspace[data-view="pll"] .pllZaloIdCell {
    display: none !important;
  }

  #workspace[data-view="pll"] .pllActions,
  #workspace[data-view="pll"] .pllTemplateActions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #workspace[data-view="pll"] .pllActions button,
  #workspace[data-view="pll"] .pllTemplateActions button,
  #workspace[data-view="pll"] .pllHistoryTable button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #workspace[data-view="pll"] .pllSettingsGrid,
  #workspace[data-view="pll"] .pllDesignerTop,
  #workspace[data-view="pll"] .pllDesignerActions,
  #workspace[data-view="pll"] .pllTemplate,
  #workspace[data-view="pll"] .pllTemplateMain,
  #workspace[data-view="pll"] .pllSendConfig,
  #workspace[data-view="pll"] .pllReminderTemplateGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  #workspace[data-view="pll"] .pllSettingsGrid input,
  #workspace[data-view="pll"] .pllSettingsGrid select,
  #workspace[data-view="pll"] .pllSettingsGrid textarea,
  #workspace[data-view="pll"] .pllCompletionDeadline,
  #workspace[data-view="pll"] input[type="date"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  #workspace[data-view="pll"] .pllVarCards,
  #workspace[data-view="pll"] .pllEditorToolbar {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #workspace[data-view="pll"] .pllVarCard,
  #workspace[data-view="pll"] .pllEditorToolbar > * {
    flex: 0 0 auto !important;
  }

  #workspace[data-view="pll"] .pllMessageEditor,
  #workspace[data-view="pll"] .pllTemplateMeta,
  #workspace[data-view="pll"] .pllHistoryTable small {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #workspace[data-view="pll"] .pllHistoryTable small {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden !important;
  }

  #workspace[data-view="pll"] .pllTemplate img {
    align-self: start !important;
  }

  /* Config/account: restore visible action text and remove stretched empty blocks. */
  #workspace[data-view="config"] .accountAdminPanel,
  #workspace[data-view="config"] .networkAccessPanel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 12px !important;
  }

  #workspace[data-view="config"] .accountTable tr {
    padding: 12px !important;
  }

  #workspace[data-view="config"] .accountTable td {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    padding: 5px 0 !important;
  }

  #workspace[data-view="config"] .accountTable td:last-child {
    min-height: 44px !important;
    align-items: center !important;
  }

  #workspace[data-view="config"] .accountTable .compactPrimary {
    display: inline-flex !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 132px !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    color: #fff !important;
  }

  #workspace[data-view="config"] .accountTable .compactPrimary span,
  #workspace[data-view="config"] .accountTable .compactPrimary i {
    display: inline !important;
    color: inherit !important;
    opacity: 1 !important;
  }

  #workspace[data-view="config"] .networkAccessActions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 12px !important;
    align-items: start !important;
  }

  #workspace[data-view="config"] .networkAccessActions > *,
  #workspace[data-view="config"] .networkAccessActions .primaryBtn {
    flex: none !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
  }

  #workspace[data-view="config"] .networkCurrentInfo,
  #workspace[data-view="config"] .networkCurrentInfo strong,
  #workspace[data-view="config"] .networkCurrentInfo small {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

/* TESTDD-056: final mobile isolation for the standalone student directory. */
@media (max-width: 920px) {
  html body #workspace[data-view="students"] .studentDirectoryView {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    overflow-x: clip !important;
  }

  html body #workspace[data-view="students"] .studentDirectoryToolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  html body #workspace[data-view="students"] .studentDirectoryToolbar > [data-mobile-filter-shell] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #workspace[data-view="students"] .studentDirectoryToolbar .studentAdminSearch {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  html body #workspace[data-view="students"] .studentDirectoryToolbar .mobileFilterToggle {
    grid-column: 2 !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 92px !important;
    min-height: 44px !important;
  }

  html body #workspace[data-view="students"] .studentDirectoryToolbar [data-mobile-filter-shell]:not(.mobileFiltersExpanded) > :not(.studentAdminSearch):not(.mobileFilterToggle) {
    display: none !important;
  }

  html body #workspace[data-view="students"] .studentDirectoryToolbar [data-mobile-filter-shell].mobileFiltersExpanded > .studentAdminFilter {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 44px !important;
  }

  html body #workspace[data-view="students"] .studentDirectoryToolbar [data-mobile-filter-shell].mobileFiltersExpanded > button:not(.mobileFilterToggle) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 44px !important;
  }

  html body #workspace[data-view="students"] #btnExportStudentExcel {
    border-color: #85c99c !important;
    background: #fff !important;
    color: #147a3d !important;
  }

  html body #workspace[data-view="students"] #btnSyncZaloStudents {
    border-color: #cbd5e1 !important;
    background: #fff !important;
    color: #334155 !important;
  }

  html body #workspace[data-view="students"] #btnAddAdminStudent {
    border-color: #0798a8 !important;
    background: #0798a8 !important;
    color: #fff !important;
  }

  html body #workspace[data-view="students"] .studentDirectoryToolbar button > i,
  html body #workspace[data-view="students"] .studentDirectoryToolbar button > span {
    color: inherit !important;
  }

  html body #workspace[data-view="students"] .studentDirectoryToolbar [data-mobile-filter-shell].mobileFiltersExpanded .studentAdminFilter > span {
    min-width: 68px !important;
  }

  html body #workspace[data-view="students"] .studentAdminWrap {
    max-height: none !important;
    overflow: visible !important;
  }

  html body #workspace[data-view="students"] .studentAdminPager {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 12 !important;
    box-shadow: 0 -8px 18px rgba(15, 23, 42, .08) !important;
  }
}

@media (max-width: 370px) {
  #workspace[data-view="audit"] .auditTable td,
  #workspace[data-view="audit"] .tuitionReminderReportTable td,
  #workspace[data-view="pll"] .pllTable td,
  #workspace[data-view="pll"] .pllHistoryTable td,
  #workspace[data-view="config"] .accountTable td {
    grid-template-columns: 74px minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #workspace .auditHeaderActions,
  #workspace #pllTabs,
  #workspace #configTabs {
    scroll-behavior: auto !important;
  }
}