/* ============================================================ Layout-Flex.css - Modern Flexbox Layout System for V.E.T.S. Created: January 9, 2026 This file provides flexbox-based layout classes that can be applied incrementally to convert from table-based layouts. Usage: Add class="layout-flex" to to enable flexbox mode ============================================================ */ /* ===== CSS Custom Properties (Variables) ===== */ :root { /* Heights */ --header-height: 100px; --toolbar-height: 24px; --tab-bar-height: 45px; --footer-height: 40px; --lesson-toggle-height: 40px; /* Spacing */ --content-padding: 0; --sidebar-width: 60px; --main-max-width: 900px; /* Colors (inherit from existing) */ --toolbar-bg: #A0D0F6; --footer-bg: #828385; --tab-active-bg: #0099FF; --tab-inactive-bg: #f3f3f3; /* Dynamic viewport height - set by JavaScript */ --vh: 1vh; } /* ===== Base HTML/Body Setup ===== */ html.layout-flex { height: 100%; overflow: hidden; } body.layout-flex { height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; } /* The form element must also flex */ body.layout-flex > form { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* ===== Root Layout Container ===== */ .flex-layout-root { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* ===== Header Section ===== */ .flex-header { flex-shrink: 0; height: var(--header-height); width: 100%; display: flex; align-items: center; } .flex-header-content { flex: 1; height: 100%; } /* Allow header to collapse on mobile */ .flex-header.collapsed { height: 0; overflow: hidden; } /* ===== Toolbar Section ===== */ .flex-toolbar-wrapper { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .flex-toolbar-bar { flex-shrink: 0; height: var(--toolbar-height); background-color: var(--toolbar-bg); width: 100%; } .flex-toolbar-content { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* ===== Main Content Area ===== */ .flex-main { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .flex-main-wrapper { flex: 1; display: flex; flex-direction: row; min-height: 0; overflow: hidden; } /* ===== Sidebar (Icon strip on left) ===== */ .flex-sidebar { flex-shrink: 0; width: var(--sidebar-width); display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; } .flex-sidebar.hidden { width: 0; overflow: hidden; } /* ===== Main Content Column ===== */ .flex-main-content { flex: 1; display: flex; flex-direction: column; min-height: 0; max-width: var(--main-max-width); overflow: hidden; } /* ===== Tab Bar ===== */ .flex-tab-bar { flex-shrink: 0; display: flex; background-color: white; border: 1px solid #ACA899; border-radius: 5px; } .flex-tab-bar .tab-item { flex: 1; padding: 8px 12px; text-align: center; cursor: pointer; font-size: 15px; border-radius: 5px; border: 1px solid #ACA899; background-color: var(--tab-inactive-bg); transition: background-color 0.2s; } .flex-tab-bar .tab-item.active { background-color: var(--tab-active-bg); color: white; } /* ===== Content Panels (cDiv1, cDiv2, etc.) ===== */ .flex-content-area { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; } .flex-panel { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .flex-panel.active { display: flex; } /* Panel that contains scrollable content */ .flex-panel-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* Panel that contains an iframe */ .flex-panel-iframe { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* ===== Iframe Styles ===== */ .flex-iframe { flex: 1; width: 100%; min-height: 300px; border: none; } /* For iframes in tool areas */ .flex-tool-iframe { flex: 1; width: 100%; min-height: 300px; max-height: none; border: none; } /* ===== Footer Section ===== */ .flex-footer { flex-shrink: 0; height: var(--footer-height); background-color: var(--footer-bg); width: 100%; display: flex; align-items: center; } .flex-footer-content { flex: 1; padding: 2px 10px; color: white; font-size: 14pt; text-align: right; } /* ===== AI Tool Specific Layouts ===== */ /* Lesson overlay + tool area container */ .flex-ai-container { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* Lesson toggle button */ .flex-lesson-toggle { flex-shrink: 0; padding: 8px 16px; cursor: pointer; background-color: #c53030; color: white; border: none; font-weight: bold; display: flex; align-items: center; gap: 8px; } .flex-lesson-toggle.collapsed { background-color: #2b6cb0; } /* Lesson content area */ .flex-lesson-overlay { flex-shrink: 0; max-height: 50vh; overflow-y: auto; background-color: white; border: 2px solid #2b6cb0; border-radius: 8px; padding: 16px; margin-bottom: 8px; } .flex-lesson-overlay.collapsed { display: none; } /* Tool icons bar */ .flex-tool-icons { flex-shrink: 0; display: none; gap: 8px; padding: 4px 0; } .flex-tool-icons.visible { display: flex; } .flex-tool-icon { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer; font-size: 12px; } .flex-tool-icon:hover { background: #e8f4ff; border-color: #336699; } /* Tool area (iframe container) */ .flex-tool-area { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* ===== Right Navigation Pane (OZ sidebar) ===== */ .flex-right-nav { flex-shrink: 0; width: 80px; display: flex; flex-direction: column; padding: 8px; gap: 8px; } .flex-right-nav.sticky { position: sticky; top: 0; align-self: flex-start; } /* ===== Utility Classes ===== */ /* Force element to not shrink */ .flex-no-shrink { flex-shrink: 0; } /* Force element to grow and fill */ .flex-grow { flex: 1; min-height: 0; } /* Scrollable container */ .flex-scroll { overflow-y: auto; overflow-x: hidden; } /* Hidden */ .flex-hidden { display: none !important; } /* ===== Mobile Responsive ===== */ /* Tablet (landscape) */ @media (max-width: 1024px) { :root { --sidebar-width: 0; --main-max-width: 100%; } .flex-sidebar { display: none; } .flex-right-nav { width: 60px; padding: 4px; } .flex-main-content { max-width: 100%; } /* Smaller periodic table cells */ .oz-table-cell, .oz-card { width: 50px; height: 45px; } .oz-table-row-label { width: 80px; font-size: 10px; } } /* Tablet (portrait) and large phones */ @media (max-width: 768px) { :root { --header-height: 60px; --toolbar-height: 20px; --footer-height: 30px; --tab-bar-height: 35px; } .flex-right-nav { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; flex-direction: row; justify-content: center; background: white; border-top: 1px solid #ccc; z-index: 100; padding: 4px 8px; /* Safe area for notched phones */ padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); } /* Account for fixed bottom nav */ .flex-content-area { padding-bottom: 70px; } /* Smaller font sizes */ .oz-table-row-label { width: 60px; font-size: 9px; } .oz-ops-card { width: 140px; padding: 10px; } .oz-ops-card-title { font-size: 14px; } /* Hide column headers on mobile */ .oz-column-header { font-size: 7px; } /* Stack lesson and tools vertically */ .oz-lesson-content { max-height: 30vh; } } /* Mobile phones */ @media (max-width: 480px) { :root { --header-height: 50px; --footer-height: 25px; } /* Even smaller periodic table */ .oz-table-cell, .oz-card { width: 40px; height: 38px; } .oz-cell-symbol { font-size: 12px; } .oz-cell-name { font-size: 6px; } .oz-table-cells { gap: 3px; } .oz-table-row-label { width: 50px; font-size: 8px; } /* Stack operations cards */ .oz-ops-cards { flex-direction: column; align-items: center; } .oz-ops-card { width: 90%; max-width: 200px; } /* Simpler lesson toggle */ .oz-lesson-toggle, .flex-lesson-toggle { font-size: 11px; padding: 6px 10px; } /* Hide less essential UI on very small screens */ .oz-column-explore { display: none; } /* Reduce lesson height */ .oz-lesson-content { max-height: 25vh; padding: 10px; font-size: 13px; } /* Touch-friendly buttons */ .oz-tool-icon, .flex-tool-icon { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; } } /* ===== Dynamic Viewport Height Support ===== */ /* Modern browsers with dvh support */ @supports (height: 100dvh) { html.layout-flex, body.layout-flex { height: 100dvh; } .flex-layout-root { min-height: 100dvh; max-height: 100dvh; } body.layout-flex > form { height: 100dvh; } } /* Fallback using JS-set --vh variable for older browsers */ html.layout-flex, body.layout-flex { height: calc(var(--vh, 1vh) * 100); } .flex-layout-root { min-height: calc(var(--vh, 1vh) * 100); } /* Small viewport height (for when keyboard is open) */ @supports (height: 100svh) { /* When virtual keyboard is open, use small viewport */ .keyboard-open html.layout-flex, .keyboard-open body.layout-flex { height: 100svh; } } /* ===== Safe Area Insets (for notched devices) ===== */ @supports (padding: env(safe-area-inset-top)) { .flex-header { padding-top: env(safe-area-inset-top, 0px); } .flex-footer { padding-bottom: env(safe-area-inset-bottom, 0px); } .flex-sidebar { padding-left: env(safe-area-inset-left, 0px); } .flex-right-nav { padding-right: env(safe-area-inset-right, 0px); } } /* ===== Touch Device Optimizations ===== */ @media (hover: none) and (pointer: coarse) { /* Larger touch targets */ .oz-card, .oz-table-cell { min-height: 44px; min-width: 44px; } .flex-tab-bar .tab-item { min-height: 44px; padding: 12px 8px; } /* Remove hover effects that don't work well on touch */ .oz-table-cell:hover, .oz-card:hover { transform: none; } /* Add active state for touch feedback */ .oz-table-cell:active, .oz-card:active { transform: scale(0.95); opacity: 0.9; } .oz-explore-btn:active, .oz-column-explore:active { opacity: 0.7; } } /* ===== Landscape Mobile ===== */ @media (max-height: 500px) and (orientation: landscape) { :root { --header-height: 40px; --footer-height: 25px; } /* Hide header in landscape on small screens */ .flex-header { height: 40px; } /* Reduce lesson size drastically */ .oz-lesson-content { max-height: 20vh; } /* Side-by-side layout for OZ sidebar on landscape */ .oz-sidebar { width: 60px; } } /* ===== Transitions ===== */ .flex-lesson-overlay, .flex-tool-icons { transition: all 0.2s ease-in-out; } /* ===== OZ / AI Education Specific Styles ===== */ /* OZ Main Layout - replaces TABLE-based layout */ .oz-layout { display: flex; flex-direction: row; flex: 1; min-height: 0; width: 100%; background: #f5f5f5; } .oz-content { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; } .oz-sidebar { flex-shrink: 0; width: 80px; position: sticky; top: 0; align-self: flex-start; z-index: 100; order: 1; /* Move to right side in flexbox */ } /* OZ Sidebar Cards */ .oz-card { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 9px; border-radius: 6px; width: 60px; height: 55px; cursor: pointer; text-align: center; background-color: #fff; border: 1px solid #ccc; padding: 4px; margin: 2px auto; transition: all 0.2s; } .oz-card:hover { background-color: #e8f4ff; border-color: #336699; } .oz-card.active { background-color: #e8f4ff; border: 2px solid #336699; } .oz-card-symbol { font-size: 14px; font-weight: bold; line-height: 1; } .oz-card-label { font-size: 7px; color: #666; line-height: 1.2; } /* Periodic Table Grid */ .oz-table-container { max-width: 900px; margin: 0 auto; padding: 10px; } .oz-table-row { display: flex; align-items: center; margin-bottom: 6px; } .oz-table-row-label { width: 100px; font-size: 11px; font-weight: bold; } .oz-table-cells { display: flex; gap: 6px; } .oz-table-cell { cursor: pointer; width: 60px; height: 55px; border-radius: 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; box-shadow: 2px 2px 4px rgba(0,0,0,0.2); transition: transform 0.2s, box-shadow 0.2s; } .oz-table-cell:hover { transform: translateY(-2px); box-shadow: 3px 3px 8px rgba(0,0,0,0.3); } .oz-table-cell-empty { width: 60px; height: 55px; } .oz-cell-symbol { font-size: 16px; font-weight: bold; } .oz-cell-name { font-size: 7px; } /* Color schemes for rows */ .oz-primitives { background: linear-gradient(135deg, #0891b2, #06b6d4); } .oz-compositions { background: linear-gradient(135deg, #059669, #10b981); } .oz-deployment { background: linear-gradient(135deg, #7c3aed, #8b5cf6); } .oz-emerging { background: linear-gradient(135deg, #dc2626, #ef4444); } /* Explore buttons */ .oz-explore-btn { cursor: pointer; margin-left: auto; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 9px; transition: opacity 0.2s; } .oz-explore-btn:hover { opacity: 0.9; } /* Column headers */ .oz-column-header { width: 60px; text-align: center; font-size: 9px; font-weight: bold; } /* Column explore links */ .oz-column-explore { cursor: pointer; width: 60px; padding: 4px 0; color: #fff; border-radius: 4px; font-size: 8px; text-align: center; transition: opacity 0.2s; } .oz-column-explore:hover { opacity: 0.9; } /* Operations centers */ .oz-ops-container { border-top: 2px solid #ccc; padding-top: 15px; margin-top: 15px; } .oz-ops-title { text-align: center; font-size: 12px; color: #666; margin-bottom: 10px; } .oz-ops-cards { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .oz-ops-card { cursor: pointer; width: 180px; padding: 15px; border-radius: 8px; text-align: center; color: #fff; box-shadow: 2px 2px 6px rgba(0,0,0,0.3); transition: transform 0.2s; } .oz-ops-card:hover { transform: translateY(-2px); } .oz-ops-card.mission { background: linear-gradient(135deg, #1e3a5f, #336699); } .oz-ops-card.knowledge { background: linear-gradient(135deg, #065f46, #10b981); } .oz-ops-card-title { font-size: 18px; font-weight: bold; } .oz-ops-card-subtitle { font-size: 10px; opacity: 0.8; margin-top: 5px; } .oz-ops-card-features { font-size: 9px; margin-top: 8px; opacity: 0.7; } /* Video panel */ .oz-video-panel { margin: 10px auto; max-width: 900px; } .oz-video-toggle { cursor: pointer; padding: 12px 20px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 2px solid #e94560; border-radius: 8px; color: #fff; font-size: 14px; display: flex; align-items: center; gap: 12px; transition: all 0.3s; } .oz-video-toggle:hover { background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%); } .oz-video-container { display: none; margin-top: -2px; } .oz-video-container.visible { display: block; } .oz-video-wrapper { background: #1a1a2e; border: 2px solid #e94560; border-top: none; border-radius: 0 0 8px 8px; padding: 15px; text-align: center; } /* Lesson panel styles */ .oz-lesson-container { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .oz-lesson-header { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px; background: #f8f9fa; border-bottom: 1px solid #dee2e6; } .oz-lesson-toggle { cursor: pointer; padding: 6px 12px; background: #c53030; color: white; border: none; border-radius: 4px; font-weight: bold; font-size: 12px; } .oz-lesson-toggle.collapsed { background: #2b6cb0; } .oz-lesson-title { font-size: 14px; font-weight: bold; color: #333; } .oz-tool-icons { display: none; gap: 8px; margin-left: auto; } .oz-tool-icons.visible { display: flex; } .oz-tool-icon { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer; font-size: 11px; text-decoration: none; color: #333; } .oz-tool-icon:hover { background: #e8f4ff; border-color: #336699; } .oz-lesson-content { flex-shrink: 0; max-height: 40vh; overflow-y: auto; padding: 16px; background: white; border: 2px solid #2b6cb0; border-radius: 8px; margin: 8px; } .oz-lesson-content.collapsed { display: none; } .oz-tool-area { flex: 1; display: flex; flex-direction: column; min-height: 300px; overflow: hidden; } .oz-tool-iframe { flex: 1; width: 100%; border: none; min-height: 300px; } /* ===== Print Styles ===== */ @media print { .flex-sidebar, .flex-right-nav, .flex-footer, .flex-lesson-toggle { display: none !important; } .flex-main-content { max-width: 100%; } .flex-panel { display: block !important; overflow: visible !important; height: auto !important; } }