/** * SoCrates - Shared Styles * * This file contains all common styles used across the application. * Import this file in all HTML pages for consistent styling. */ /* ============================================ CSS VARIABLES - Design Tokens ============================================ */ :root { /* Background Colors */ --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #21262d; --bg-card: #21262d; /* Border Colors */ --border-primary: #30363d; --border-secondary: rgba(48, 54, 61, 0.6); --border-accent: rgba(88, 166, 255, 0.4); /* Text Colors */ --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #6e7681; --text-placeholder: #484f58; /* Accent Colors */ --accent-blue: #58a6ff; --accent-blue-hover: #79c0ff; --accent-blue-bg: rgba(88, 166, 255, 0.1); /* Status Colors */ --color-success: #7ee787; --color-success-dark: #238636; --color-success-bg: rgba(126, 231, 135, 0.1); --color-warning: #d29922; --color-warning-bg: rgba(210, 153, 34, 0.1); --color-danger: #f85149; --color-danger-bg: rgba(248, 81, 73, 0.1); --color-info: #58a6ff; --color-info-bg: rgba(88, 166, 255, 0.1); /* Additional Colors */ --color-purple: #a371f7; --color-orange: #f0883e; --color-yellow: #ffd43b; /* Gradients */ --gradient-primary: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%); --gradient-success: linear-gradient(135deg, #238636, #1a7f37); --gradient-accent: linear-gradient(135deg, #1f6feb, #388bfd); --gradient-card: linear-gradient(145deg, rgba(33, 38, 45, 0.9), rgba(22, 27, 34, 0.95)); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.4); /* Border Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 24px; --space-3xl: 32px; /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; --font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-md: 13px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 22px; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; /* Z-Index Scale */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-nav: 10000; /* Semantic overlay / surface helpers */ --bg-overlay: rgba(0, 0, 0, 0.2); /* dark header/panel tint */ --bg-input: rgba(13, 17, 23, 0.6); /* input field background */ --bg-terminal: #010409; /* code / output console bg */ --color-terminal-text: #7ee787; /* text inside terminal panels */ } /* Legacy variable aliases for backward compatibility */ :root { --bg: var(--bg-primary); --bg2: var(--bg-secondary); --bg3: var(--bg-tertiary); --border: var(--border-primary); --text: var(--text-primary); --muted: var(--text-secondary); --accent: var(--accent-blue); --success: var(--color-success-dark); --danger: var(--color-danger); } /* ============================================ LIGHT THEME OVERRIDES Applied when is set by the user via the profile dropdown toggle. Dark (default) requires no attribute. ============================================ */ [data-theme="light"] { /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f6f8fa; --bg-tertiary: #eaeef2; --bg-card: #ffffff; /* Borders */ --border-primary: #d0d7de; --border-secondary: rgba(208, 215, 222, 0.6); --border-accent: rgba(9, 105, 218, 0.4); /* Text */ --text-primary: #1f2328; --text-secondary: #57606a; --text-muted: #6e7781; --text-placeholder: #9ba1a8; /* Accent */ --accent-blue: #0969da; --accent-blue-hover: #0550ae; --accent-blue-bg: rgba(9, 105, 218, 0.1); /* Status */ --color-success: #1a7f37; --color-success-dark: #1a7f37; --color-success-bg: rgba(26, 127, 55, 0.1); --color-warning: #9a6700; --color-warning-bg: rgba(154, 103, 0, 0.1); --color-danger: #d1242f; --color-danger-bg: rgba(209, 36, 47, 0.1); --color-info: #0969da; --color-info-bg: rgba(9, 105, 218, 0.1); /* Additional */ --color-purple: #8250df; --color-orange: #bc4c00; --color-yellow: #9a6700; /* Gradients */ --gradient-primary: linear-gradient(135deg, #ffffff 0%, #f6f8fa 50%, #ffffff 100%); --gradient-success: linear-gradient(135deg, #1a7f37, #2da44e); --gradient-accent: linear-gradient(135deg, #0969da, #218bff); --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 248, 250, 0.95)); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.18); /* Semantic helpers */ --bg-overlay: rgba(0, 0, 0, 0.04); --bg-input: #f6f8fa; --bg-terminal: #f0f3f6; --color-terminal-text: #1f2328; /* Improved gradients for light */ --gradient-card: linear-gradient(145deg, #ffffff, #f9fafb); } /* ────────────────────────────────────────────── LIGHT-ONLY component overrides These fix elements that use hardcoded dark-mode rgba() backgrounds which can't be tokenised in :root vars alone. ────────────────────────────────────────────── */ [data-theme="light"] .nav-main { background: rgba(255, 255, 255, 0.92); border-bottom-color: #d0d7de; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); } [data-theme="light"] .nav-link { background: #f0f3f6; border-color: #d0d7de; color: #424a53; } [data-theme="light"] .nav-link:hover { background: #e2e6ea; border-color: #0969da; color: #0969da; } [data-theme="light"] .nav-link.active { background: #0969da; color: #fff; border-color: #0969da; box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12); } [data-theme="light"] .user-dropdown { background: #ffffff; border: 1px solid #d0d7de; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); } [data-theme="light"] .user-dropdown-header { border-bottom-color: #d8dee4; } [data-theme="light"] .user-dropdown-item:hover { background: #f3f4f6; } [data-theme="light"] .user-dropdown-item.danger:hover { background: rgba(209, 36, 47, 0.08); } [data-theme="light"] .user-dropdown-item.sign-out:hover { background: #f3f4f6; } [data-theme="light"] .user-dropdown-separator { border-top-color: #d8dee4; } [data-theme="light"] .card { background: #ffffff; border-color: #d0d7de; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); } [data-theme="light"] .card:hover { border-color: #0969da; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } [data-theme="light"] .card-header { background: #f6f8fa; border-bottom: 1px solid #e2e6ea; } [data-theme="light"] .card-footer { background: #f6f8fa; border-top: 1px solid #e2e6ea; } [data-theme="light"] .section-card { background: #ffffff; border-color: #d0d7de; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } [data-theme="light"] .input, [data-theme="light"] textarea.input, [data-theme="light"] select.input { background: #f6f8fa; border-color: #d0d7de; } [data-theme="light"] .input:focus, [data-theme="light"] textarea.input:focus, [data-theme="light"] select.input:focus { background: #ffffff; border-color: #0969da; box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12); } [data-theme="light"] .btn { background: linear-gradient(180deg, #f0f4f8 0%, #e4eaf0 100%); border-color: #8c9aab; color: #1f2328; box-shadow: 0 1px 3px rgba(31, 35, 40, 0.14), inset 0 1px 0 rgba(255,255,255,0.7); } [data-theme="light"] .btn:hover:not(:disabled) { background: linear-gradient(180deg, #e4ecf5 0%, #d5e2ef 100%); border-color: #0969da; color: #0550ae; box-shadow: 0 3px 10px rgba(9, 105, 218, 0.18), inset 0 1px 0 rgba(255,255,255,0.6); transform: translateY(-1px); } [data-theme="light"] .btn:active:not(:disabled) { background: linear-gradient(180deg, #d5e2ef 0%, #cad8e8 100%); border-color: #0969da; box-shadow: inset 0 2px 4px rgba(9, 105, 218, 0.12); transform: translateY(0); } [data-theme="light"] .btn-secondary { background: linear-gradient(180deg, #f0f4f8 0%, #e4eaf0 100%); border-color: #8c9aab; color: #1f2328; box-shadow: 0 1px 3px rgba(31, 35, 40, 0.14), inset 0 1px 0 rgba(255,255,255,0.7); } [data-theme="light"] .btn-secondary:hover:not(:disabled) { background: linear-gradient(180deg, #e4ecf5 0%, #d5e2ef 100%); border-color: #0969da; color: #0550ae; box-shadow: 0 3px 10px rgba(9, 105, 218, 0.18), inset 0 1px 0 rgba(255,255,255,0.6); } /* Danger variant shadow treatment */ [data-theme="light"] .btn-danger { box-shadow: 0 1px 3px rgba(31, 35, 40, 0.14); } [data-theme="light"] .btn-danger:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(209, 36, 47, 0.20); } [data-theme="light"] .stats-grid .stat-item, [data-theme="light"] .stat-card { background: #ffffff; border: 1px solid #e2e6ea; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } /* Info / status banners */ [data-theme="light"] .info-banner, [data-theme="light"] .status-banner { background: #f6f8fa; border-color: #d0d7de; color: var(--text-secondary); } /* FAQ items */ [data-theme="light"] .faq-item { background: #f6f8fa; border-color: #e2e6ea; } [data-theme="light"] .faq-question:hover { background: #eaeef2; } /* API metrics footer */ [data-theme="light"] .api-metrics-footer { background: rgba(255, 255, 255, 0.92); border-color: #d0d7de; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } /* Scrollbar */ [data-theme="light"] ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(9, 105, 218, 0.25); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(9, 105, 218, 0.4); } /* Spinner */ [data-theme="light"] .spinner { border-color: rgba(0, 0, 0, 0.15); border-top-color: #0969da; } /* Nav toggle (hamburger) */ [data-theme="light"] .nav-toggle { background: #f0f3f6; border-color: #d0d7de; } [data-theme="light"] .nav-toggle:hover { background: #e2e6ea; border-color: #0969da; } /* User avatar border */ [data-theme="light"] .user-avatar { border-color: rgba(0, 0, 0, 0.1); } /* Badge overrides for better contrast */ [data-theme="light"] .badge-sync { background: rgba(9, 105, 218, 0.12); } [data-theme="light"] .badge-modified { background: rgba(154, 103, 0, 0.12); } /* Dropdown item hover */ [data-theme="light"] .user-dropdown-item:hover { background: #f0f3f6; } [data-theme="light"] .user-dropdown-item.sign-out:hover { background: #f0f3f6; } /* Tabs / toggle buttons common pattern */ [data-theme="light"] .btn-group .btn, [data-theme="light"] .toggle-btn, [data-theme="light"] .tab-btn { background: linear-gradient(180deg, #f0f4f8 0%, #e4eaf0 100%); border-color: #8c9aab; color: #424a53; box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.7); } [data-theme="light"] .btn-group .btn:hover, [data-theme="light"] .toggle-btn:hover, [data-theme="light"] .tab-btn:hover { background: linear-gradient(180deg, #e4ecf5 0%, #d5e2ef 100%); border-color: #0969da; color: #0550ae; box-shadow: 0 3px 10px rgba(9, 105, 218, 0.16), inset 0 1px 0 rgba(255,255,255,0.6); } [data-theme="light"] .btn-group .btn.active, [data-theme="light"] .toggle-btn.active, [data-theme="light"] .tab-btn.active { background: #0969da; color: #fff; border-color: #0969da; box-shadow: 0 2px 8px rgba(9, 105, 218, 0.35), inset 0 1px 0 rgba(255,255,255,0.15); } /* ============================================ RESET & BASE STYLES ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; max-width: 100%; overflow-x: hidden; } body { font-family: var(--font-family); background: var(--gradient-primary); min-height: 100dvh; color: var(--text-primary); line-height: 1.6; } body.has-fixed-nav { padding-top: 64px; } @media (max-width: 900px) { body.has-fixed-nav { padding-top: 64px; } } /* ============================================ NAVIGATION ============================================ */ .nav-main { background: rgba(22, 27, 34, 0.95); border-bottom: 1px solid var(--border-secondary); padding: 10px 20px; display: flex; gap: 10px; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); } .nav-links { display: flex; gap: 10px; align-items: center; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--border-primary); background: var(--bg-tertiary); color: var(--text-primary); font-size: 18px; cursor: pointer; line-height: 1; } .nav-toggle:hover { border-color: var(--border-accent); background: var(--border-primary); } .nav-link { order: 1; /* Default order, will be overridden by specific orders */ background: var(--bg-tertiary); border: 1px solid var(--border-primary); color: var(--accent-blue); padding: 8px 14px; border-radius: var(--radius-md); text-decoration: none; font-size: var(--font-size-md); font-weight: 500; transition: all var(--transition-normal); white-space: nowrap; } .nav-link:hover { background: var(--border-primary); border-color: var(--border-accent); } .nav-link.active { background: #1f6feb; color: #fff; border-color: #1f6feb; font-weight: 600; box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.1); } /* Nav link order - ensures consistent positioning */ .nav-link[href="/"], .nav-link[href="/app.html"] { order: 1 !important; } .nav-link[href="/roi.html"] { order: 2 !important; } .nav-link[href="/test.html"] { order: 3 !important; } .nav-link[href="/history.html"] { order: 4 !important; } .nav-link[href="/control.html"] { order: 5 !important; } .nav-link[href="/settings.html"] { order: 6 !important; } .nav-link[href="/curtailment-discovery.html"] { order: 7 !important; } /* Admin panel link - always last */ .nav-link[href="/admin.html"] { order: 9999 !important; } .nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; /* always push to far right, even when siblings are hidden */ } .nav-info, .nav-subtitle { font-size: var(--font-size-sm); color: var(--text-secondary); padding: 8px; } .user-menu { position: relative; display: flex; align-items: center; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-md); font-weight: 600; color: #fff; cursor: pointer; transition: transform var(--transition-normal); border: 1px solid rgba(255, 255, 255, 0.15); overflow: hidden; } .user-avatar:hover { transform: scale(1.05); } .user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .user-dropdown { position: absolute; top: 110%; right: 0; width: 220px; background: rgba(33, 38, 45, 0.98); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; display: none; z-index: var(--z-dropdown); } .user-dropdown.show { display: block; } .user-dropdown-header { padding: 14px 16px; border-bottom: 1px solid var(--border-secondary); } .user-dropdown-header .user-name { font-weight: 600; color: var(--text-primary); } .user-dropdown-header .user-email { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 2px; } .user-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px; border: none; background: transparent; color: var(--text-primary); font-size: var(--font-size-md); cursor: pointer; text-align: left; transition: background var(--transition-normal); } .user-dropdown-item:hover { background: rgba(88, 166, 255, 0.12); } .user-dropdown-item.danger { color: var(--color-danger); } .user-dropdown-item.danger:hover { background: rgba(248, 81, 73, 0.12); } .user-dropdown-separator { border: none; border-top: 1px solid rgba(48, 54, 61, 0.8); margin: 6px 0; } .user-dropdown-item.sign-out { color: var(--text-secondary, #8b949e); } .user-dropdown-item.sign-out:hover { background: rgba(139, 148, 158, 0.1); color: var(--text-primary); } /* Page shell layout */ .page-shell { width: min(1400px, calc(100% - 32px)); margin: 0 auto; padding: var(--space-3xl) 0 var(--space-3xl); display: flex; flex-direction: column; gap: var(--space-2xl); } .page-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-xl); } .page-title { font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-sm); } .page-subtitle { color: var(--text-secondary); font-size: var(--font-size-md); margin-top: var(--space-xs); } .page-actions { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; } .info-banner, .status-banner { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-lg); border: 1px solid var(--border-secondary); background: rgba(13, 17, 23, 0.6); color: var(--text-secondary); font-size: var(--font-size-md); } .status-banner.success { border-color: rgba(126, 231, 135, 0.3); background: var(--color-success-bg); color: var(--color-success); } .status-banner.warning { border-color: rgba(210, 153, 34, 0.3); background: var(--color-warning-bg); color: var(--color-warning); } .status-banner.danger { border-color: rgba(248, 81, 73, 0.3); background: var(--color-danger-bg); color: var(--color-danger); } .surface-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-xl); } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-lg); } .section-card { background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); padding: var(--space-xl); } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); color: var(--text-primary); font-size: var(--font-size-md); font-weight: 500; cursor: pointer; transition: all var(--transition-normal); text-decoration: none; font-family: inherit; white-space: nowrap; } /* Ensure primary/secondary button classes render correctly even when the base `btn` class is omitted in markup. Some templates use only `btn-primary` / `btn-secondary` on