/** * Skyways shared theme - tokens from Dynamic-Container-Consolidation * Use: data-theme="light"|"dark" and/or class "light-mode" on */ :root, [data-theme='light'], :root.light-mode { color-scheme: light; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; --color-background-primary: #ffffff; --color-background-secondary: #f5f6f8; --color-background-tertiary: #eef1f5; --color-border-tertiary: #e2e5ea; --color-border-secondary: #c8cdd4; --color-text-primary: #111827; --color-text-secondary: #6b7280; --color-label: #6b7280; --color-surface-inset: #f8fafc; --color-input-bg: #ffffff; --color-input-border: #e2e5ea; --color-input-text: #111827; --color-fill-track: #f3f4f6; --color-fill-bar-bg: #e8ebf0; --surface-0: #eef1f5; --surface-1: #f5f6f8; --surface-2: #ffffff; --surface-row: #f4f6f9; --border: #e2e5ea; --border-strong: #c5cad3; --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 16px rgba(16, 24, 40, 0.07); --text-primary: #111827; --text-secondary: #6b7280; --text-muted: #6b7280; --bg-accent: #cce5f7; --border-accent: #378add; --text-accent: #0c447c; --fill-danger: #c94c4c; --on-danger: #ffffff; --bg-warning: #faeeda; --text-warning: #633806; --text-danger: #a32d2d; --text-success: #27500a; /* Logi shell aliases */ --bg-primary: #eef1f5; --bg-secondary: #f5f6f8; --bg-card: #ffffff; --border-color: #e2e5ea; --accent: #378add; --accent-hover: #1d4ed8; --input-bg: #ffffff; --input-border: #e2e5ea; --card-shadow: var(--shadow-card); --card-bg: #ffffff; --primary-accent: #378add; --primary-gradient: linear-gradient(135deg, #378add 0%, #1d4ed8 100%); --warn-color: #ef9f27; --nav-hover-bg: rgba(0, 0, 0, 0.04); --nav-active-bg: #cce5f7; --accent-hover-bg: rgba(55, 138, 221, 0.08); --secondary-btn-bg: #ffffff; --secondary-btn-hover-bg: #f5f6f8; --metric-bg: #f8fafc; --fill-bar-bg: #e8ebf0; --skeleton-bg: rgba(0, 0, 0, 0.06); --error-box-bg: rgba(226, 75, 74, 0.08); --error-box-text: #a32d2d; --color-blue: #378add; --color-amber: #ef9f27; --color-amber-bg: #faeeda; --color-amber-text: #633806; --color-green: #639922; --color-red: #e24b4a; --header-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); /* Semantic status / zone (theme-aware) */ --on-accent: #ffffff; --status-success-bg: #eaf3de; --status-success-text: #27500a; --status-warning-bg: #faeeda; --status-warning-text: #633806; --status-danger-bg: #fcebeb; --status-danger-text: #a32d2d; --status-info-bg: #e6f1fb; --status-info-text: #0c447c; --status-neutral-bg: #f3f4f6; --status-neutral-text: #374151; --zone-muted: #888780; --chat-user-bg: #378add; --chat-bot-bg: #f9fafb; } [data-theme='dark'] { color-scheme: dark; --color-background-primary: #1a1d27; --color-background-secondary: #111827; --color-background-tertiary: #0c1017; --color-border-tertiary: #2d3348; --color-border-secondary: #374151; --color-text-primary: #f3f4f6; --color-text-secondary: #9ca3af; --color-label: #9ca3af; --color-surface-inset: #111827; --color-input-bg: #111827; --color-input-border: #374151; --color-input-text: #e5e7eb; --color-fill-track: #2d3348; --color-fill-bar-bg: #2d3348; --surface-0: #0c1017; --surface-1: #111827; --surface-2: #1a1d27; --surface-row: #111827; --border: #2d3348; --border-strong: #374151; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.25); --text-primary: #f3f4f6; --text-secondary: #9ca3af; --text-muted: #9ca3af; --bg-accent: rgba(55, 138, 221, 0.22); --border-accent: #378add; --text-accent: #93c5fd; --fill-danger: #b54545; --on-danger: #ffffff; --bg-warning: rgba(239, 159, 39, 0.15); --text-warning: #fbbf24; --text-danger: #f87171; --text-success: #86efac; --bg-primary: #0c1017; --bg-secondary: #111827; --bg-card: #1a1d27; --border-color: #2d3348; --accent: #378add; --accent-hover: #5b9de8; --input-bg: #111827; --input-border: #374151; --card-shadow: var(--shadow-card); --card-bg: #1a1d27; --primary-accent: #378add; --primary-gradient: linear-gradient(135deg, #378add 0%, #2563eb 100%); --warn-color: #fbbf24; --nav-hover-bg: rgba(255, 255, 255, 0.05); --nav-active-bg: rgba(55, 138, 221, 0.22); --accent-hover-bg: rgba(55, 138, 221, 0.08); --secondary-btn-bg: rgba(255, 255, 255, 0.04); --secondary-btn-hover-bg: rgba(255, 255, 255, 0.08); --metric-bg: rgba(17, 24, 39, 0.4); --fill-bar-bg: #2d3348; --skeleton-bg: rgba(255, 255, 255, 0.05); --error-box-bg: rgba(226, 75, 74, 0.12); --error-box-text: #f87171; --color-blue: #378add; --color-amber: #ef9f27; --color-amber-bg: rgba(239, 159, 39, 0.15); --color-amber-text: #fbbf24; --color-green: #86efac; --color-red: #f87171; --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); --on-accent: #ffffff; --status-success-bg: rgba(134, 239, 172, 0.15); --status-success-text: #86efac; --status-warning-bg: rgba(239, 159, 39, 0.15); --status-warning-text: #fbbf24; --status-danger-bg: rgba(248, 113, 113, 0.15); --status-danger-text: #f87171; --status-info-bg: rgba(55, 138, 221, 0.22); --status-info-text: #93c5fd; --status-neutral-bg: #1a1d27; --status-neutral-text: #9ca3af; --zone-muted: #9ca3af; --chat-user-bg: #378add; --chat-bot-bg: #111827; } html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--surface-0); color: var(--text-primary); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .page-title { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; } .page-subtitle { margin: 0.25rem 0 0; font-size: 13px; color: var(--text-muted); } /* Unified Sidebar Layout & Navigation */ .sidebar { width: 220px; min-width: 220px; height: 100vh; position: sticky; top: 0; align-self: flex-start; flex-shrink: 0; background: var(--surface-1); border-right: 0.5px solid var(--border); display: flex; flex-direction: column; z-index: 100; box-sizing: border-box; overflow: hidden; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; transition: width 0.2s ease, left 0.25s ease; } .sidebar-logo { text-align: center; font-size: 14px; font-weight: 500; color: var(--text-primary); padding: 1.25rem 1.25rem 1.5rem; border-bottom: 0.5px solid var(--border); flex-shrink: 0; } .sidebar-nav { padding: 0.5rem 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--border, #CBD5E1) transparent; } /* Slim custom scrollbar for sidebar nav */ .sidebar-nav::-webkit-scrollbar { width: 4px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--border, #CBD5E1); border-radius: 4px; } .sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #94A3B8); } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 1.25rem; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--text-secondary); cursor: pointer; text-decoration: none; border-left: 3.5px solid transparent; border-radius: 0; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; white-space: nowrap; box-sizing: border-box; } .nav-item:hover { background: var(--surface-2); color: var(--text-primary); } .nav-item.active { background: var(--bg-accent); color: var(--text-accent); border-left: 3.5px solid var(--border-accent); font-weight: 500; } .nav-icon { font-size: 16px; width: 20px; text-align: center; line-height: 1; flex-shrink: 0; } .sidebar-divider { height: 1px; background: var(--border); margin: 8px 16px; flex-shrink: 0; } .sidebar-bottom { margin-top: auto; padding: 1rem 1.25rem 1.25rem; border-top: 0.5px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; background: var(--surface-1); } .theme-toggle-btn { display: flex; align-items: center; gap: 8px; justify-content: center; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-primary); width: 100%; transition: all 0.15s ease; font-family: inherit; } .theme-toggle-btn:hover { background: var(--bg-accent); border-color: var(--border-accent); } .currency-select { width: 100%; padding: 6px 8px; font-size: 12px; font-weight: 500; border: 0.5px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-primary); cursor: pointer; font-family: inherit; } .settings-item { width: 100%; padding: 8px 4px; border-left: none; border-radius: 6px; box-sizing: border-box; color: var(--text-secondary); font-weight: 500; } .settings-item:hover { background: var(--bg-accent); color: var(--text-accent); } .mobile-header-bar { display: none; } /* Responsive Media Queries */ @media (max-width: 768px) { .app-layout-wrapper { flex-direction: column !important; } .mobile-header-bar { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--surface-1); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 900; width: 100%; box-sizing: border-box; } .sidebar { position: fixed !important; top: 0 !important; left: -260px !important; width: 250px !important; min-width: 250px !important; height: 100vh !important; z-index: 1000 !important; transition: left 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important; box-shadow: 4px 0 25px rgba(0, 0, 0, 0.25) !important; } .sidebar.mobile-open { left: 0 !important; } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); z-index: 999; } } /* Avoid double sidebars: HTML shell + React AppLayout */ body:has(#root .sidebar) > aside.sidebar { display: none !important; } body:has(#root .sidebar) > .main-content { margin-left: 0 !important; padding: 0 !important; min-height: 100vh; background: transparent; }