/* ===================================================== D2L Tools Platform - Responsive System Mobile-first breakpoints using em units. Breakpoints: Mobile: base (< 40em / 640px) Tablet: 40em+ (640px+) Desktop: 64em+ (1024px+) Wide: 90em+ (1440px+) ===================================================== */ /* ------------------------------------------------- MOBILE SIDEBAR OVERLAY INFRASTRUCTURE The sidebar is fixed-position off-screen by default on mobile/tablet and slides in via .sidebar-open on . ------------------------------------------------- */ /* Hamburger menu button - hidden on desktop, visible on mobile/tablet */ .mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; background: transparent; color: var(--color-text); cursor: pointer; border-radius: var(--radius-md); flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .mobile-menu-btn:hover { background: var(--color-bg-subtle); } .mobile-menu-btn svg { width: 24px; height: 24px; } /* Sidebar overlay backdrop */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: calc(var(--z-sidebar) - 1); opacity: 0; transition: opacity var(--transition-base); -webkit-tap-highlight-color: transparent; } /* Mobile header bar (shown only on mobile/tablet) */ .mobile-header { display: none; position: sticky; top: 0; z-index: calc(var(--z-sidebar) - 2); align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); min-height: var(--header-height); } .mobile-header .logo { display: flex; align-items: center; gap: var(--space-2); } .mobile-header .logo-icon { width: 28px; height: 28px; color: var(--color-primary); } .mobile-header .logo-text h1 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-tight); color: var(--color-text); } /* ======================================================= TABLET & BELOW ( < 64em / 1024px ) ======================================================= */ @media (max-width: 63.9375em) { /* Show mobile header and hamburger */ .mobile-header { display: flex; } .mobile-menu-btn { display: flex; } /* Sidebar: off-screen by default, slides in when body has .sidebar-open */ .sidebar { transform: translateX(-100%); transition: transform var(--transition-slow); z-index: var(--z-sidebar); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sidebar-overlay { display: block; opacity: 1; } /* Main content: full width, no sidebar margin */ .main-content { margin-left: 0; padding: var(--space-4); } /* View header: stack on mobile */ .view-header { flex-direction: column; gap: var(--space-4); } .view-title h2 { font-size: var(--font-size-2xl); } .view-actions { width: 100%; flex-wrap: wrap; } .view-actions .btn { flex: 1; min-width: 0; } /* ------- GRID LAYOUTS -> SINGLE COLUMN ------- */ .copy-layout, .clear-gradebook-layout { grid-template-columns: 1fr; } .direct-copy-layout { grid-template-columns: 1fr; } .direct-copy-layout .copy-arrow { transform: rotate(90deg); justify-self: center; padding: var(--space-2); } .direct-copy-layout .copy-arrow svg { width: 24px; height: 24px; } /* Source / destination panels no longer need min-height */ .source-panel, .destination-panel { min-height: auto; } /* Copy panel: un-sticky */ .copy-panel { position: static; } /* ------- TABLES -> HORIZONTAL SCROLL ------- */ .jobs-table-container, .analytics-table-container, .config-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4); } .jobs-table, .analytics-table, .config-table { min-width: 600px; } /* ------- MODALS -> NEAR-FULL-SCREEN ------- */ .modal { max-width: calc(100vw - var(--space-4)); max-height: calc(100vh - var(--space-8)); border-radius: var(--radius-lg); margin: var(--space-4); } .modal-large { max-width: calc(100vw - var(--space-4)); width: calc(100vw - var(--space-4)); max-height: calc(100vh - var(--space-8)); } .modal-large .modal-body { max-height: calc(100vh - 180px); } .modal-footer { flex-direction: column; } .modal-footer .btn { width: 100%; } /* ------- FORMS ------- */ .settings-row { flex-direction: column; gap: var(--space-4); } .checkbox-group { flex-direction: column; } .search-input-group { flex-direction: column; } .search-input-group .btn { width: 100%; } /* Shell form rows -> single column */ .shell-form-row, .shell-form-row.three-col { grid-template-columns: 1fr; } /* ------- FILTER BARS ------- */ .history-filters { flex-direction: column; } .history-filters .select-input { width: 100%; min-width: 0; } .checker-controls { flex-direction: column; align-items: stretch; } .checker-control-group { min-width: 0; } .checker-filter-bar { flex-direction: column; align-items: stretch; } .checker-status-filters { flex-wrap: wrap; } /* ------- STATS / CARDS ------- */ .users-stats, .analytics-stats, .shell-mgmt-stats { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } /* History items -> stack */ .history-item { grid-template-columns: auto 1fr; gap: var(--space-3); } .history-stats { grid-column: 1 / -1; justify-content: flex-start; gap: var(--space-4); } /* User management rows -> reflow */ .user-item { grid-template-columns: auto 1fr; gap: var(--space-2); } .user-item-role { grid-column: 2; } .user-item-actions { grid-column: 1 / -1; justify-content: flex-end; } /* Shell management items */ .shell-mgmt-item { grid-template-columns: 1fr; gap: var(--space-1); } .shell-mgmt-filters { flex-direction: column; } .shell-mgmt-filters .select-input, .shell-mgmt-filters .search-input { max-width: 100%; } /* Shell detail grid */ .shell-detail-grid { grid-template-columns: 1fr; } /* Import preview stats */ .import-preview-stats { grid-template-columns: 1fr 1fr; } /* Panel header: stack actions below title */ .panel-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .panel-actions { width: 100%; flex-wrap: wrap; } .panel-actions .search-input { flex: 1 1 100%; min-width: 0; } /* Filter controls wrap better */ .filter-controls { flex-direction: column; align-items: flex-start; } .shell-count-display { margin-left: 0; } /* Clear stats row */ .clear-stats-row { flex-direction: column; gap: var(--space-3); } .clear-stats-inline { flex-wrap: wrap; justify-content: center; } /* Progress grid */ .shell-progress-grid, .shell-progress-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } /* Execution info grid */ .execution-info-grid { grid-template-columns: 1fr; } /* Master shells grid */ .master-shells-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .selected-master-shells-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* Category rows */ .category-row { grid-template-columns: 100px 1fr 50px 60px; gap: var(--space-1); } /* Toast: bottom center, full width */ .toast-container { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); } .toast { max-width: 100%; } /* Search controls stack */ .search-controls { flex-direction: column; align-items: flex-start; } .selection-controls { width: 100%; flex-wrap: wrap; } /* Job info grid */ .job-info-grid { grid-template-columns: repeat(2, 1fr); } /* Execution stats */ .execution-stats { grid-template-columns: repeat(2, 1fr); } /* Checker summary cards */ .checker-summary { flex-wrap: wrap; } .checker-stat-card { min-width: calc(50% - var(--space-2)); } /* Operations grid */ .operations-grid { grid-template-columns: 1fr; } /* Select all results: stack on small screens */ .select-all-results { flex-direction: column; gap: var(--space-2); text-align: center; } } /* ======================================================= MOBILE ONLY ( < 40em / 640px ) ======================================================= */ @media (max-width: 39.9375em) { /* Tighter padding on mobile */ .main-content { padding: var(--space-3); } /* Smaller headings */ .view-title h2 { font-size: var(--font-size-xl); } /* Stats grids: 2 columns minimum */ .users-stats, .analytics-stats, .shell-mgmt-stats { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .users-stats .stat-card, .analytics-stats .stat-card, .shell-mgmt-stats .stat-card { padding: var(--space-3); } .users-stats .stat-value, .analytics-stats .stat-value, .shell-mgmt-stats .stat-value { font-size: var(--font-size-2xl); } /* Modals -> true full screen on phones */ .modal { max-width: 100vw; max-height: 100vh; margin: 0; border-radius: 0; height: 100vh; } .modal-large { max-width: 100vw; width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; margin: 0; } .modal-large .modal-body { max-height: calc(100vh - 120px); } /* Stacked buttons on forms */ .action-buttons .btn { width: 100%; } .token-actions { flex-direction: column; } .token-actions .btn { width: 100%; } /* Panel body tighter padding */ .panel-body { padding: var(--space-3); } .config-section { padding: var(--space-3); } /* History meta wrap */ .history-meta { gap: var(--space-2); } /* Progress tree: reduce nesting indent */ .parent-node { margin-left: var(--space-2); } .child-node { margin-left: var(--space-4); } /* Checker badge compactness */ .checker-college-badges, .checker-master-badges { display: none; } /* Shell progress grid: minimum 1 column */ .shell-progress-grid, .shell-progress-cards { grid-template-columns: 1fr 1fr; } /* Checker stat cards: fill row */ .checker-stat-card { min-width: calc(50% - var(--space-2)); flex: 1 1 calc(50% - var(--space-2)); } /* Category row: stack label */ .category-row { grid-template-columns: 1fr; gap: var(--space-1); } .category-label { font-weight: 600; } /* Bar chart: constrain height */ .bar-chart { height: 150px; } /* Import preview stats: single column on very small */ .import-preview-stats, .import-results-grid { grid-template-columns: 1fr 1fr; } /* Destination list items: stack */ .destination-item { flex-direction: column; align-items: flex-start; gap: var(--space-1); } /* Selected shells chips */ .selected-master-shells-grid { grid-template-columns: 1fr; } /* Make OTP inputs slightly smaller */ .otp-input { width: 44px; height: 54px; font-size: 1.25rem; } /* Logs container: smaller on mobile */ .logs-container { max-height: 150px; } /* Job info grid: single column */ .job-info-grid { grid-template-columns: 1fr; } /* Sidebar width: full screen width on phones */ .sidebar { width: min(var(--sidebar-width), calc(100vw - 60px)); } } /* ======================================================= DESKTOP ( >= 64em / 1024px ) Desktop is the "normal" state - most desktop styles are already in styles.css. These are enhancements. ======================================================= */ @media (min-width: 64em) { /* Ensure sidebar is visible and in-flow */ .sidebar { transform: none; } .mobile-header { display: none; } .mobile-menu-btn { display: none; } .sidebar-overlay { display: none !important; } } /* ======================================================= WIDE ( >= 90em / 1440px ) ======================================================= */ @media (min-width: 90em) { .shell-progress-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .master-shells-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* Wider max-content for large displays */ .view { max-width: 1600px; } /* Analytics: allow more columns */ .analytics-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } /* ======================================================= TOUCH-FRIENDLY TAP TARGETS Ensure minimum 44x44px interactive area. ======================================================= */ @media (pointer: coarse) { .btn-sm { min-height: 44px; min-width: 44px; padding: var(--space-2) var(--space-3); } .btn-icon { min-height: 44px; min-width: 44px; } .nav-item { min-height: 44px; padding: var(--space-3) var(--space-4); } .checkbox-label { min-height: 44px; padding: var(--space-1) 0; } .checkbox-label input[type="checkbox"] { width: 20px; height: 20px; } .college-header { min-height: 48px; } .shell-item { min-height: 44px; } .checker-section-item { min-height: 44px; padding: var(--space-2) var(--space-3); } .checker-filter-btn { min-height: 44px; padding: var(--space-2) var(--space-3); } .search-result-item { min-height: 48px; } .execution-history-item { min-height: 48px; } .logout-btn { min-height: 44px; min-width: 44px; } .modal-close { min-height: 44px; min-width: 44px; } .btn-remove { min-height: 36px; min-width: 36px; padding: var(--space-1); } .select-input, .search-input, .form-input { min-height: 44px; } .checker-export-inline { opacity: 1; min-height: 36px; min-width: 36px; } .shell-mgmt-item { padding: var(--space-3) var(--space-4); } } /* ======================================================= REDUCED MOTION Respect prefers-reduced-motion for accessibility. ======================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .sidebar { transition: none; } } /* ======================================================= PRINT ======================================================= */ @media print { .sidebar, .mobile-header, .mobile-menu-btn, .sidebar-overlay, .toast-container { display: none !important; } .main-content { margin-left: 0 !important; padding: 0 !important; } .modal-overlay { display: none !important; } }