/* * Mission Control Layout System * * Main application layout with sidebar navigation * Supports light and dark modes via data-theme="dark" attribute on */ @layer components { /* ======================================== * PREVENT DUAL SCROLLING * ======================================== */ html { overflow: hidden; block-size: 100%; } /* ======================================== * BASE BODY STYLES * ======================================== */ .app-body { font-family: var(--font-family-display); background-color: var(--color-bg-primary); color: var(--color-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; min-block-size: 100vh; /* fallback for browsers without dvh support */ min-block-size: 100dvh; overflow: hidden; } /* ======================================== * APP LAYOUT (Sidebar + Main) * ======================================== */ /* position: fixed with inset: 0 anchors to the Layout Viewport, which iOS * never resizes during keyboard interactions. This avoids the 100dvh bug * where iOS reports stale viewport values after keyboard dismiss, leaving * blank space. [MC-290] */ .app-layout { display: flex; position: fixed; inset: 0; overflow: hidden; } /* ======================================== * SIDEBAR * ======================================== */ .sidebar { inline-size: var(--sidebar-width); flex-shrink: 0; display: flex; flex-direction: column; background-color: var(--color-bg-primary); border-inline-end: 1px solid var(--color-border-primary); block-size: 100%; overflow: hidden; overflow-x: hidden; } @media (width <= 768px) { .sidebar { position: fixed; left: 0; inset-block-start: 0; inset-block-end: 0; z-index: 100; transform: translateX(-100%); transition: transform 0.3s ease; /* Add left padding for rounded-edge/notch devices (requires viewport-fit=cover in meta tag) */ padding-inline-start: max(var(--space-2), env(safe-area-inset-left, 0px)); } .sidebar.sidebar--open { transform: translateX(0); } } /* Brand section */ .sidebar-brand { padding: var(--space-6); display: flex; align-items: center; gap: var(--space-3); } @media (width <= 768px) { .sidebar-brand { padding: var(--space-4) var(--space-6); } } .sidebar-logo { inline-size: 2rem; block-size: 2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-text-emphasis); } .sidebar-logo .logo-stars { inline-size: 100%; block-size: 100%; } .sidebar-brand-text { display: flex; flex-direction: column; min-inline-size: 0; } .sidebar-title { font-size: var(--text-sm); font-weight: 600; line-height: 1; margin: 0; color: var(--color-text-primary); } .sidebar-subtitle { font-size: 10px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-block-start: var(--space-1); font-weight: 700; } /* Navigation */ .sidebar-nav { flex: 1; padding: 0 var(--space-3); overflow-y: auto; overflow-x: hidden; } .sidebar-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; margin-block-end: var(--space-1); border: none; background: none; cursor: pointer; inline-size: 100%; text-align: start; /* Prevent underline on icons in nav items */ } .sidebar-nav-item:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); text-decoration: none; } .sidebar-nav-item .heroicon, .sidebar-nav-item .sidebar-nav-icon { text-decoration: none; inline-size: 20px; block-size: 20px; flex-shrink: 0; } .sidebar-nav-item--active { background-color: var(--color-primary-alpha-10); color: var(--color-text-link); } .sidebar-nav-item--active:hover { background-color: var(--color-primary-alpha-15); color: var(--color-text-link); } .sidebar-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Section headers */ .sidebar-section-header { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; padding: var(--space-4) var(--space-3) var(--space-2); margin-block-start: var(--space-2); } /* Theme toggle icons */ .theme-icon-light, .theme-icon-dark { display: none; } /* Explicit light: show sun icon */ html[data-theme="light"] .theme-icon-light { display: inline; } /* Default (no explicit theme, no dark preference): show sun icon */ html:not([data-theme]) .theme-icon-light { display: inline; } /* System dark: hide sun icon */ @media (prefers-color-scheme: dark) { html:not([data-theme]) .theme-icon-light { display: none; } } /* Explicit dark: show moon icon */ html[data-theme="dark"] .theme-icon-dark { display: inline; } /* System dark: show moon icon */ @media (prefers-color-scheme: dark) { html:not([data-theme]) .theme-icon-dark { display: inline; } } /* Feedback button */ .sidebar-feedback { padding: 0 var(--space-3) var(--space-3); } .sidebar-feedback-btn { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); text-decoration: none; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-default); cursor: pointer; transition: all 0.15s ease; } .sidebar-feedback-btn:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-border-secondary); } .sidebar-feedback-icon { inline-size: 18px; block-size: 18px; flex-shrink: 0; } .sidebar-feedback-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* User section */ .sidebar-user { padding: var(--space-4); border-block-start: 1px solid var(--color-border-primary); position: relative; } .sidebar-user-main { display: flex; align-items: center; gap: var(--space-3); } .sidebar-user-avatar { inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-full); background-color: var(--color-bg-elevated); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-user-avatar-img { inline-size: 100%; block-size: 100%; object-fit: cover; } .sidebar-user-avatar-initials { font-size: 10px; font-weight: 700; color: var(--color-text-secondary); } .sidebar-user-info { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; } .sidebar-user-name { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 10px; color: var(--color-text-tertiary); } /* Expand button to open user menu */ .sidebar-user-expand { display: flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; padding: 0; background: none; border: none; border-radius: var(--radius-default); color: var(--color-text-tertiary); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; flex-shrink: 0; } .sidebar-user-expand:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); } .sidebar-user-expand-icon { inline-size: 20px; block-size: 20px; } /* User menu popup */ .user-menu-popup { position: absolute; inset-block-end: 100%; left: var(--space-2); right: var(--space-2); margin-block-end: var(--space-2); background-color: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-dropdown); z-index: 100; overflow: hidden; } .user-menu-popup-content { padding: var(--space-2); } /* User menu items */ .user-menu-item { display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; padding: var(--space-2) var(--space-3); background: none; border: none; border-radius: var(--radius-default); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .user-menu-item:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); } .user-menu-item--danger:hover { background-color: var(--color-error-alpha-10); color: var(--color-red-500); } .user-menu-item-icon { inline-size: 20px; block-size: 20px; flex-shrink: 0; } /* User menu sections */ .user-menu-section { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-block-start: 1px solid var(--color-border-primary); border-block-end: 1px solid var(--color-border-primary); margin: var(--space-1) 0; } .user-menu-section-label { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } /* Theme toggle buttons */ .user-menu-theme-buttons { display: flex; gap: var(--space-1); } .user-menu-theme-btn { display: flex; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; padding: 0; background: none; border: 1px solid var(--color-border-primary); border-radius: var(--radius-default); color: var(--color-text-tertiary); cursor: pointer; transition: all 0.15s ease; } .user-menu-theme-btn:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-text-tertiary); } .user-menu-theme-btn--active { background-color: var(--color-primary-500); border-color: var(--color-primary-500); color: white; } .user-menu-theme-btn--active:hover { background-color: var(--color-primary-600); border-color: var(--color-primary-600); color: white; } .user-menu-theme-btn .heroicon { inline-size: 18px; block-size: 18px; } /* ======================================== * MAIN CONTENT AREA * ======================================== */ .app-main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; background-color: var(--color-bg-primary); overflow: hidden; } @media (width <= 768px) { .app-main { inline-size: 100% } } /* ======================================== * HEADER * ======================================== */ .app-header { display: none; } .header-left { display: flex; align-items: center; gap: var(--space-4); flex: 1; min-inline-size: 0; } .header-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* Breadcrumb */ .header-breadcrumb { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-tertiary); font-size: var(--text-sm); min-inline-size: 0; } .breadcrumb-item { font-weight: 500; } .breadcrumb-item a { color: var(--color-text-tertiary); text-decoration: none; transition: color 0.15s ease; } .breadcrumb-item a:hover { color: var(--color-text-link); } .breadcrumb-item--current { font-weight: 600; color: var(--color-text-primary); } .breadcrumb-separator { font-size: 14px; color: var(--color-text-muted); } /* Search */ .header-search { max-inline-size: 24rem; inline-size: 100%; } @media (width <= 768px) { .header-search { display: none } } .header-search-form { position: relative; } .header-search-form:focus-within .header-search-icon { color: var(--color-primary-500); } /* stylelint-disable-next-line no-descending-specificity */ .header-search-icon { position: absolute; left: var(--space-3); inset-block-start: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 18px; pointer-events: none; transition: color 0.15s ease; } .mobile-header { display: none; position: fixed; inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; block-size: 56px; z-index: 98; padding: 0 var(--space-3); background-color: var(--color-bg-primary); border-block-end: 1px solid var(--color-border-primary); align-items: center; justify-content: space-between; } .mobile-header__brand { display: flex; align-items: center; gap: var(--space-2); } .mobile-header__brand .logo-stars { inline-size: 24px; block-size: 24px; color: var(--color-text-emphasis); } .mobile-header__title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); } .mobile-header__actions { display: flex; align-items: center; gap: var(--space-1); } @media (width <= 768px) { .mobile-header { display: flex; } } @media (width >= 769px) { .mobile-header { display: none; } } /* ======================================== * MOBILE MENU TOGGLE * ======================================== */ .mobile-menu-toggle { display: none; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0; background: none; border: none; color: var(--color-text-secondary); cursor: pointer; border-radius: var(--radius-lg); transition: background-color 0.15s ease, color 0.15s ease; } .mobile-menu-toggle:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); } .mobile-menu-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-300); } .mobile-menu-toggle .heroicon, .mobile-menu-toggle .mobile-menu-icon { inline-size: 24px; block-size: 24px; } @media (width <= 768px) { .mobile-menu-toggle { display: flex; } } @media (width >= 769px) { .mobile-menu-toggle { display: none; } } /* ======================================== * CONTENT AREA * ======================================== */ .app-content { flex: 1; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .app-content::-webkit-scrollbar { display: none; } /* Add padding to app-content to account for mobile header */ @media (width <= 768px) { .app-content { padding-block-start: 56px } } /* ======================================== * AUTH LAYOUT (Login/Register pages) * ======================================== */ .auth-layout { min-block-size: 100vh; min-block-size: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background-color: var(--color-bg-primary); } /* ======================================== * HEROICON SVG CONFIGURATION * ======================================== */ /* stylelint-disable-next-line no-descending-specificity */ .heroicon { vertical-align: middle; flex-shrink: 0; } .heroicon-outline { stroke-width: 1.5; } .heroicon-solid { fill: currentcolor; } /* ======================================== * MOBILE OVERLAY * ======================================== */ .sidebar-overlay { display: none; position: fixed; inset: 0; background-color: var(--color-overlay); z-index: 99; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .sidebar-overlay--visible { opacity: 1; visibility: visible; } @media (width <= 768px) { .sidebar-overlay { display: block } } @media (width >= 769px) { .sidebar-overlay { display: none } } } /* @layer components */