/* k13d Frontend Bundle - Generated at 2026-03-17T19:38:59+09:00 */ /* DO NOT EDIT - Modify source files in css/ or js/ directories */ /* === css/variables.css === */ /** * k13d CSS Variables * Light theme: Clean, professional (default) * Dark themes: Tokyo Night, Production, Staging, Development * * Theme is controlled by [data-theme="..."] on . * Default (no attribute) = light theme. * System preference respected via prefers-color-scheme. */ :root { /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Colors - Tokyo Night Light Theme (default) * Based on the official Tokyo Night Light VS Code palette * Cool, muted tones with navy/slate text and warm gray backgrounds */ --bg-primary: #d5d6db; --bg-secondary: #e9e9ec; --bg-tertiary: #c4c5ca; --text-primary: #343b58; --text-secondary: #565a6e; --accent-blue: #34548a; --accent-green: #485e30; --accent-red: #8c4351; --accent-yellow: #8f5e15; --accent-purple: #5a4a78; --accent-cyan: #166775; --bg-hover: rgba(52, 84, 138, 0.1); --text-muted: #9699a3; --border-color: #b4b5b9; /* Surface/Glass backgrounds */ --bg-deep: #cbccd1; --surface-primary: rgba(233, 233, 236, 0.95); --surface-secondary: rgba(213, 214, 219, 0.95); --surface-tertiary: rgba(196, 197, 202, 0.7); --surface-input: rgba(233, 233, 236, 0.8); --surface-input-solid: #e9e9ec; --surface-elevated: rgba(196, 197, 202, 0.8); --surface-code: rgba(196, 197, 202, 0.5); --text-on-accent: #ffffff; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Shadows - soft, cool-tinted for Tokyo Night Light */ --shadow-sm: 0 1px 3px rgba(52, 59, 88, 0.1); --shadow-md: 0 4px 8px rgba(52, 59, 88, 0.1); --shadow-lg: 0 10px 20px rgba(52, 59, 88, 0.12); --shadow-glow-blue: 0 0 15px rgba(52, 84, 138, 0.2); --shadow-glow-purple: 0 0 15px rgba(90, 74, 120, 0.2); --shadow-glow-green: 0 0 15px rgba(72, 94, 48, 0.2); /* Z-index layers */ --z-base: 1; --z-dropdown: 100; --z-modal: 1000; --z-toast: 2000; --z-tooltip: 3000; } /* Tokyo Night Theme — improved contrast (WCAG AA compliant) * Backgrounds lifted slightly, text brightened for readability. * Inspired by Grafana/Lens/Rancher dark palette conventions. */ [data-theme="tokyo-night"] { --bg-primary: #1e2030; --bg-secondary: #282d42; --bg-tertiary: #4a5272; --text-primary: #d5ddf8; --text-secondary: #b8c0de; --accent-blue: #7aa2f7; --accent-green: #9ece6a; --accent-red: #f7768e; --accent-yellow: #e0af68; --accent-purple: #bb9af7; --accent-cyan: #7dcfff; --bg-hover: rgba(122, 162, 247, 0.12); --text-muted: #9098be; --border-color: #4f5680; --bg-deep: #161722; --surface-primary: rgba(40, 45, 66, 0.95); --surface-secondary: rgba(30, 32, 48, 0.9); --surface-tertiary: rgba(74, 82, 114, 0.65); --surface-input: rgba(30, 32, 48, 0.8); --surface-input-solid: rgba(30, 32, 48, 1); --surface-elevated: rgba(74, 82, 114, 0.8); --surface-code: rgba(0, 0, 0, 0.25); --text-on-accent: #1e2030; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --shadow-glow-blue: 0 0 20px rgba(122, 162, 247, 0.3); --shadow-glow-purple: 0 0 20px rgba(187, 154, 247, 0.3); --shadow-glow-green: 0 0 20px rgba(158, 206, 106, 0.3); } /* Production Theme (Red accent - warns you're in production) */ [data-theme="production"] { --bg-primary: #211a1c; --bg-secondary: #2f2427; --bg-tertiary: #54363c; --text-primary: #f0dce0; --text-secondary: #c8a8ae; --accent-blue: #7aa2f7; --accent-green: #9ece6a; --accent-red: #ff6b81; --accent-yellow: #e0af68; --accent-purple: #bb9af7; --accent-cyan: #7dcfff; --bg-hover: rgba(255, 107, 129, 0.12); --text-muted: #a58890; --border-color: #644046; --bg-deep: #1a1416; --surface-primary: rgba(47, 36, 39, 0.95); --surface-secondary: rgba(33, 26, 28, 0.9); --surface-tertiary: rgba(84, 54, 60, 0.65); --surface-input: rgba(33, 26, 28, 0.8); --surface-input-solid: rgba(33, 26, 28, 1); --surface-elevated: rgba(84, 54, 60, 0.8); --surface-code: rgba(0, 0, 0, 0.25); --text-on-accent: #211a1c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --shadow-glow-blue: 0 0 20px rgba(122, 162, 247, 0.3); --shadow-glow-purple: 0 0 20px rgba(187, 154, 247, 0.3); --shadow-glow-green: 0 0 20px rgba(158, 206, 106, 0.3); } /* Staging Theme (Yellow accent) */ [data-theme="staging"] { --bg-primary: #21201a; --bg-secondary: #302e25; --bg-tertiary: #544f38; --text-primary: #f0e8d8; --text-secondary: #c8c0a8; --accent-blue: #7aa2f7; --accent-green: #9ece6a; --accent-red: #f7768e; --accent-yellow: #ffb86c; --accent-purple: #bb9af7; --accent-cyan: #7dcfff; --bg-hover: rgba(255, 184, 108, 0.12); --text-muted: #a59e78; --border-color: #645c38; --bg-deep: #1a1916; --surface-primary: rgba(48, 46, 37, 0.95); --surface-secondary: rgba(33, 32, 26, 0.9); --surface-tertiary: rgba(84, 79, 56, 0.65); --surface-input: rgba(33, 32, 26, 0.8); --surface-input-solid: rgba(33, 32, 26, 1); --surface-elevated: rgba(84, 79, 56, 0.8); --surface-code: rgba(0, 0, 0, 0.25); --text-on-accent: #21201a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --shadow-glow-blue: 0 0 20px rgba(122, 162, 247, 0.3); --shadow-glow-purple: 0 0 20px rgba(187, 154, 247, 0.3); --shadow-glow-green: 0 0 20px rgba(158, 206, 106, 0.3); } /* Development Theme (Green accent) */ [data-theme="dev"] { --bg-primary: #1c211c; --bg-secondary: #253025; --bg-tertiary: #385438; --text-primary: #d8f0d8; --text-secondary: #a8c8a8; --accent-blue: #7aa2f7; --accent-green: #73daca; --accent-red: #f7768e; --accent-yellow: #e0af68; --accent-purple: #bb9af7; --accent-cyan: #7dcfff; --bg-hover: rgba(115, 218, 202, 0.12); --text-muted: #85a585; --border-color: #3e643e; --bg-deep: #161a16; --surface-primary: rgba(37, 48, 37, 0.95); --surface-secondary: rgba(28, 33, 28, 0.9); --surface-tertiary: rgba(56, 84, 56, 0.65); --surface-input: rgba(28, 33, 28, 0.8); --surface-input-solid: rgba(28, 33, 28, 1); --surface-elevated: rgba(56, 84, 56, 0.8); --surface-code: rgba(0, 0, 0, 0.25); --text-on-accent: #1c211c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --shadow-glow-blue: 0 0 20px rgba(122, 162, 247, 0.3); --shadow-glow-purple: 0 0 20px rgba(187, 154, 247, 0.3); --shadow-glow-green: 0 0 20px rgba(158, 206, 106, 0.3); } /* Auto-detect system preference when no explicit theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg-primary: #1e2030; --bg-secondary: #282d42; --bg-tertiary: #4a5272; --text-primary: #d5ddf8; --text-secondary: #b8c0de; --accent-blue: #7aa2f7; --accent-green: #9ece6a; --accent-red: #f7768e; --accent-yellow: #e0af68; --accent-purple: #bb9af7; --accent-cyan: #7dcfff; --bg-hover: rgba(122, 162, 247, 0.12); --text-muted: #9098be; --border-color: #4f5680; --bg-deep: #161722; --surface-primary: rgba(40, 45, 66, 0.95); --surface-secondary: rgba(30, 32, 48, 0.9); --surface-tertiary: rgba(74, 82, 114, 0.65); --surface-input: rgba(30, 32, 48, 0.8); --surface-input-solid: rgba(30, 32, 48, 1); --surface-elevated: rgba(74, 82, 114, 0.8); --surface-code: rgba(0, 0, 0, 0.25); --text-on-accent: #1e2030; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --shadow-glow-blue: 0 0 20px rgba(122, 162, 247, 0.3); --shadow-glow-purple: 0 0 20px rgba(187, 154, 247, 0.3); --shadow-glow-green: 0 0 20px rgba(158, 206, 106, 0.3); } } /* === css/base.css === */ /** * k13d Base Styles * Reset and fundamental styling */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow: hidden; font-weight: var(--font-weight-normal); letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Monospace font for code/terminal elements */ code, pre, .terminal, .log-content, .yaml-content, .json-content { font-family: var(--font-mono); } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); } /* Selection styling */ ::selection { background: var(--accent-blue); color: var(--bg-primary); } /* Focus outline for accessibility */ :focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } /* Button reset */ button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* Input reset */ input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--spacing-sm) var(--spacing-md); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-blue); box-shadow: var(--shadow-glow-blue); } /* Link styling */ a { color: var(--accent-blue); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-cyan); text-decoration: underline; } /* Utility classes */ .hidden { display: none !important; } .visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .text-muted { color: var(--text-secondary); } .text-success { color: var(--accent-green); } .text-warning { color: var(--accent-yellow); } .text-danger { color: var(--accent-red); } .text-info { color: var(--accent-cyan); } /* Flex utilities */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-sm { gap: var(--spacing-sm); } .gap-md { gap: var(--spacing-md); } /* Loading animation */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { animation: spin 1s linear infinite; } /* Fade animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fade-in { animation: fadeIn var(--transition-normal); } .fade-out { animation: fadeOut var(--transition-normal); } /* Slide animations */ @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .slide-up { animation: slideUp var(--transition-normal); } .slide-down { animation: slideDown var(--transition-normal); } /* Skip-to-content link for keyboard navigation accessibility */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--accent-blue); color: var(--text-on-accent); padding: 8px 16px; z-index: 10000; transition: top 0.3s; } .skip-link:focus { top: 0; } /* Reduced motion support for users who prefer minimal animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* High contrast mode support */ @media (prefers-contrast: more) { :root { --border-color: #8a8b90; } [data-theme="tokyo-night"] { --border-color: #6a6f99; } } /* === css/components.css === */ /** * k13d Components * Reusable UI components: buttons, cards, badges, tables, modals, toggles, tabs, * tooltips, dropdowns, forms, loading indicators */ /* ========================================== * Buttons * ========================================== */ .btn { padding: 10px 20px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; transition: all 0.2s ease; } .btn-primary { background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%); color: white; border: none; box-shadow: 0 4px 15px rgba(122, 162, 247, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(122, 162, 247, 0.4); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid rgba(122, 162, 247, 0.3); } .btn-secondary:hover { background: rgba(122, 162, 247, 0.1); border-color: var(--accent-blue); } .btn-add { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px dashed var(--border-color); border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 13px; transition: all 0.2s; } .btn-add:hover { background: var(--accent-blue); color: var(--bg-primary); border-style: solid; border-color: var(--accent-blue); } .btn-add .plus-icon { font-size: 16px; font-weight: bold; line-height: 1; } .action-btn { padding: 4px 8px; background: var(--bg-tertiary); border: none; border-radius: 4px; color: var(--text-primary); cursor: pointer; font-size: 11px; } .action-btn:hover { background: var(--accent-blue); color: var(--bg-primary); } .action-btn.danger:hover { background: var(--accent-red); } .logout-btn { background: transparent; border: 1px solid rgba(247, 118, 142, 0.3); color: var(--accent-red); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 500; transition: all 0.2s ease; } .logout-btn:hover { background: rgba(247, 118, 142, 0.1); border-color: var(--accent-red); transform: translateY(-1px); } .refresh-btn { background: linear-gradient(135deg, rgba(122, 162, 247, 0.1) 0%, rgba(125, 207, 255, 0.1) 100%); border: 1px solid rgba(122, 162, 247, 0.2); padding: 8px 14px; border-radius: 8px; color: var(--accent-cyan); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; } .refresh-btn:hover { background: linear-gradient(135deg, rgba(122, 162, 247, 0.2) 0%, rgba(125, 207, 255, 0.2) 100%); border-color: var(--accent-cyan); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(125, 207, 255, 0.2); } .refresh-btn:active { transform: translateY(0); } .send-btn { background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%); color: white; border: none; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13px; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(187, 154, 247, 0.3); } .send-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(187, 154, 247, 0.4); } .send-btn:active:not(:disabled) { transform: translateY(0); } .send-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .ai-stop-btn { background: #ef4444 !important; color: white !important; border: none; width: 34px !important; height: 34px !important; border-radius: 8px; cursor: pointer; display: none; /* Hidden by default */ align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); padding: 0; flex-shrink: 0; } /* Show stop button only when Send button is disabled (during generation) */ .send-btn:disabled + .ai-stop-btn { display: flex !important; } .ai-stop-btn:hover { background: #dc2626 !important; transform: translateY(-2px); } .ai-stop-btn:active { transform: translateY(0); } .ai-stop-btn svg { width: 14px; height: 14px; fill: white; } /* AI Input Action Buttons */ .ai-actions-buttons { display: flex; align-items: center; gap: 8px; } .ai-clear-btn, .ai-expand-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.2s ease; } .ai-clear-btn:hover, .ai-expand-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent-blue); } /* AI Panel Expanded State */ .ai-panel.expanded { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; max-width: 100% !important; height: 100% !important; z-index: 999; /* Below --z-modal (1000) */ display: flex; flex-direction: column; } .ai-panel.expanded .ai-input-container { padding: 24px 40px; display: flex; flex-direction: column; width: 100% !important; max-width: none !important; } .ai-panel.expanded .ai-input { font-size: 16px; line-height: 1.6; padding: 16px; resize: none; } .ai-panel.expanded .ai-hint { font-size: 13px; opacity: 0.6; } .ai-panel.expanded .context-chips { padding: 16px 24px; min-height: 60px; } .ai-panel.expanded .context-chips span[style*="font-size: 11px"] { font-size: 14px !important; } .ai-panel.expanded .context-chip { font-size: 14px; padding: 8px 16px; border-radius: 16px; } /* ========================================== * Tables * ========================================== */ .table-container { flex: 1; overflow: auto; padding: 20px; } .table-container::-webkit-scrollbar { width: 8px; height: 8px; } .table-container::-webkit-scrollbar-track { background: var(--bg-primary); border-radius: 4px; } .table-container::-webkit-scrollbar-thumb { background: rgba(122, 162, 247, 0.3); border-radius: 4px; } .table-container::-webkit-scrollbar-thumb:hover { background: rgba(122, 162, 247, 0.5); } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-feature-settings: 'tnum' 1; background: var(--surface-tertiary); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } th { background: linear-gradient(180deg, var(--surface-tertiary) 0%, var(--surface-primary) 100%); padding: 14px 16px; text-align: left; font-weight: var(--font-weight-bold); color: var(--text-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; position: sticky; top: 0; cursor: pointer; user-select: none; transition: all 0.2s ease; border-bottom: 1px solid rgba(122, 162, 247, 0.1); } th:hover { background: linear-gradient(180deg, rgba(122, 162, 247, 0.2) 0%, var(--surface-primary) 100%); color: var(--accent-blue); } th .sort-icon { margin-left: 6px; opacity: 0.5; font-size: 10px; transition: opacity 0.2s ease; } th:hover .sort-icon { opacity: 0.8; } th.sort-asc .sort-icon::after { content: '▲'; opacity: 1; color: var(--accent-blue); } th.sort-desc .sort-icon::after { content: '▼'; opacity: 1; color: var(--accent-blue); } th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: '⇅'; } td { padding: 12px 16px; border-bottom: 1px solid var(--border-color); transition: all 0.15s ease; } tr { transition: all 0.2s ease; } tr:hover { background: linear-gradient(90deg, rgba(122, 162, 247, 0.08) 0%, rgba(187, 154, 247, 0.05) 100%); } tr:hover td { border-bottom-color: rgba(122, 162, 247, 0.2); } tr.selected { background: linear-gradient(90deg, rgba(122, 162, 247, 0.15) 0%, rgba(187, 154, 247, 0.1) 100%); box-shadow: inset 3px 0 0 var(--accent-blue); } tbody tr { cursor: pointer; } tbody tr:hover { background: var(--bg-tertiary); } /* ========================================== * Pagination * ========================================== */ .pagination-container { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: linear-gradient(90deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); border-top: 1px solid rgba(122, 162, 247, 0.1); font-size: 12px; } .pagination-info { color: var(--text-secondary); font-weight: 500; } .pagination-controls { display: flex; align-items: center; gap: 8px; } .pagination-btn { padding: 6px 14px; background: var(--bg-hover); border: 1px solid rgba(122, 162, 247, 0.2); border-radius: 8px; color: var(--text-primary); cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.2s ease; } .pagination-btn:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%); border-color: transparent; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(122, 162, 247, 0.3); } .pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; } .page-size-select { padding: 6px 12px; background: var(--surface-input); border: 1px solid rgba(122, 162, 247, 0.2); border-radius: 8px; color: var(--text-primary); font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .page-size-select:hover { border-color: rgba(122, 162, 247, 0.4); } .page-size-select:focus { outline: none; border-color: var(--accent-blue); } /* ========================================== * Status Badges * ========================================== */ .status-running, .status-active, .status-ready { color: var(--accent-green); text-shadow: 0 0 10px rgba(158, 206, 106, 0.5); } .status-pending { color: var(--accent-yellow); text-shadow: 0 0 10px rgba(224, 175, 104, 0.5); } .status-failed, .status-error { color: var(--accent-red); text-shadow: 0 0 10px rgba(247, 118, 142, 0.5); } .user-badge { background: linear-gradient(135deg, rgba(122, 162, 247, 0.15) 0%, rgba(187, 154, 247, 0.15) 100%); border: 1px solid rgba(122, 162, 247, 0.2); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; } .user-badge::before { content: '👤'; font-size: 12px; } .ai-badge { background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%); color: white; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: bold; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 8px rgba(187, 154, 247, 0.3); } /* ========================================== * Modals * ========================================== */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); justify-content: center; align-items: center; z-index: 1000; } .modal-overlay.active { display: flex; animation: modalOverlayAppear 0.2s ease-out; } .modal { background: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); border-radius: 16px; border: 1px solid rgba(122, 162, 247, 0.2); width: 100%; max-width: 600px; max-height: 80vh; overflow: auto; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(122, 162, 247, 0.1); animation: modalAppear 0.3s ease-out; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(122, 162, 247, 0.15); background: linear-gradient(90deg, rgba(122, 162, 247, 0.05) 0%, transparent 100%); } .modal-header h2 { font-size: 18px; font-weight: 600; background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .modal-close { background: rgba(247, 118, 142, 0.1); border: 1px solid rgba(247, 118, 142, 0.2); color: var(--accent-red); width: 32px; height: 32px; border-radius: 8px; font-size: 18px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: rgba(247, 118, 142, 0.2); transform: scale(1.05); } .modal-body { padding: 24px; } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 24px; border-top: 1px solid rgba(122, 162, 247, 0.15); background: linear-gradient(90deg, transparent 0%, rgba(122, 162, 247, 0.03) 100%); } /* ========================================== * Tabs * ========================================== */ .tabs { display: flex; gap: 6px; padding: 12px 20px; background: linear-gradient(90deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); border-bottom: 1px solid rgba(122, 162, 247, 0.1); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .tab { padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all 0.2s ease; border: 1px solid transparent; white-space: nowrap; flex-shrink: 0; } .tab:hover { background: rgba(122, 162, 247, 0.1); color: var(--text-primary); } .tab.active { background: linear-gradient(135deg, rgba(122, 162, 247, 0.15) 0%, rgba(125, 207, 255, 0.1) 100%); color: var(--accent-blue); border-color: rgba(122, 162, 247, 0.3); box-shadow: 0 2px 10px rgba(122, 162, 247, 0.1); } /* ========================================== * Forms * ========================================== */ .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); } .form-group input, .form-group select { width: 100%; padding: 12px 14px; background: var(--surface-input); border: 1px solid rgba(122, 162, 247, 0.2); border-radius: 10px; color: var(--text-primary); font-family: inherit; font-size: 14px; transition: all 0.2s ease; } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1); background: var(--surface-input-solid); } .namespace-select { background: var(--surface-input); border: 1px solid rgba(122, 162, 247, 0.2); border-radius: 8px; padding: 8px 14px; color: var(--text-primary); font-family: inherit; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .namespace-select:hover { border-color: rgba(122, 162, 247, 0.4); background: var(--surface-input-solid); } .namespace-select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1); } /* ========================================== * Toggles * ========================================== */ .auto-refresh-toggle { position: relative; width: 36px; height: 20px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; } .auto-refresh-toggle.active { background: var(--accent-green); border-color: var(--accent-green); } .auto-refresh-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--text-primary); border-radius: 50%; transition: all 0.2s ease; } .auto-refresh-toggle.active::after { left: 18px; background: white; } /* ========================================== * Loading Indicators * ========================================== */ .loading-dots { display: flex; gap: 4px; } .loading-dots span { width: 6px; height: 6px; background: var(--accent-blue); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; } .loading-dots span:nth-child(1) { animation-delay: -0.32s; } .loading-dots span:nth-child(2) { animation-delay: -0.16s; } /* ========================================== * Health Indicator * ========================================== */ .health-indicator { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; } .health-dot { width: 10px; height: 10px; border-radius: 50%; position: relative; } .health-dot::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; animation: healthPulse 2s ease-in-out infinite; } .health-dot.ok { background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); } .health-dot.ok::after { background: var(--accent-green); } .health-dot.warning { background: var(--accent-yellow); box-shadow: 0 0 10px var(--accent-yellow); } .health-dot.warning::after { background: var(--accent-yellow); } .health-dot.error { background: var(--accent-red); box-shadow: 0 0 10px var(--accent-red); } .health-dot.error::after { background: var(--accent-red); } /* ========================================== * Approval Modal * ========================================== */ .approval-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; } .approval-box { background: var(--bg-secondary); border: 2px solid var(--accent-yellow); border-radius: 12px; padding: 24px; max-width: 500px; width: 90%; animation: slideIn 0.2s ease-out; } .approval-box.dangerous { border-color: var(--accent-red); } .approval-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .approval-icon { font-size: 32px; } .approval-title { font-size: 18px; font-weight: bold; color: var(--accent-yellow); } .approval-box.dangerous .approval-title { color: var(--accent-red); } .approval-command { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; padding: 12px; font-family: monospace; font-size: 13px; margin: 16px 0; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } .approval-category { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; text-transform: uppercase; margin-bottom: 12px; } .approval-category.write { background: var(--accent-yellow); color: var(--bg-primary); } .approval-category.dangerous { background: var(--accent-red); color: white; } .approval-buttons { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; } .approval-buttons button { padding: 10px 24px; border-radius: 6px; font-weight: bold; cursor: pointer; border: none; transition: all 0.2s; } .btn-approve { background: var(--accent-green); color: var(--bg-primary); } .btn-approve:hover { filter: brightness(1.1); } .btn-reject { background: var(--accent-red); color: white; } .btn-reject:hover { filter: brightness(1.1); } /* ========================================== * Tool Execution Indicator * ========================================== */ .tool-execution { background: var(--bg-tertiary); border-left: 3px solid var(--accent-cyan); padding: 12px; margin: 8px 0; border-radius: 0 4px 4px 0; font-size: 13px; } .tool-execution .tool-name { color: var(--accent-cyan); font-weight: bold; font-size: 12px; } .tool-execution .tool-command { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; color: var(--accent-green); margin-top: 4px; } .tool-execution .tool-result-preview, .tool-execution .tool-result-full { border: 1px solid var(--bg-tertiary); } .tool-execution button:hover { background: var(--accent-blue) !important; color: white !important; } /* ========================================== * Search * ========================================== */ .search-container { position: relative; margin-right: 16px; } .global-search { width: 300px; padding: 8px 12px 8px 36px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-family: inherit; font-size: 13px; } .global-search:focus { outline: none; border-color: var(--accent-blue); } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 14px; } .search-shortcut { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 11px; color: var(--text-secondary); } .search-results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; max-height: 400px; overflow-y: auto; z-index: 1000; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .search-results:empty { display: none; } .search-result-item { display: flex; align-items: center; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border-color); gap: 12px; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: var(--bg-tertiary); } .search-result-kind { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--accent-blue); color: white; min-width: 70px; text-align: center; } .search-result-kind.pod { background: var(--accent-green); } .search-result-kind.deployment { background: var(--accent-blue); } .search-result-kind.service { background: var(--accent-purple); } .search-result-kind.configmap { background: var(--accent-yellow); color: var(--text-on-accent); } .search-result-kind.secret { background: var(--accent-red); } .search-result-kind.node { background: var(--accent-cyan); color: var(--text-on-accent); } .search-result-kind.namespace { background: var(--text-secondary); } .search-result-kind.statefulset { background: #f7768e; } .search-result-kind.daemonset { background: #ff9e64; color: var(--text-on-accent); } .search-result-kind.ingress { background: #9ece6a; color: var(--text-on-accent); } .search-result-info { flex: 1; min-width: 0; } .search-result-name { font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-namespace { font-size: 11px; color: var(--text-secondary); } .search-result-status { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--bg-primary); } .search-result-status.running, .search-result-status.ready, .search-result-status.active { color: var(--accent-green); } .search-result-status.pending, .search-result-status.updating { color: var(--accent-yellow); } .search-result-status.failed, .search-result-status.notready { color: var(--accent-red); } .search-no-results { padding: 16px; text-align: center; color: var(--text-secondary); font-size: 13px; } .search-loading { padding: 16px; text-align: center; color: var(--text-secondary); } /* ========================================== * Filter Bar & Chips * ========================================== */ .filter-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); } .filter-input { flex: 1; max-width: 300px; padding: 6px 12px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-family: inherit; font-size: 12px; } .filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--accent-blue); color: var(--bg-primary); border-radius: 12px; font-size: 11px; cursor: pointer; } .filter-chip .remove { opacity: 0.7; font-size: 14px; } .filter-chip .remove:hover { opacity: 1; } /* Column Filter Row */ .column-filter-row { display: none; } .column-filter-row.active { display: table-row; } .column-filter-row th { padding: 4px 8px; background: var(--bg-secondary); border-bottom: 2px solid var(--accent-blue); } .column-filter-input { width: 100%; padding: 4px 6px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 3px; color: var(--text-primary); font-family: inherit; font-size: 11px; } .column-filter-input:focus { border-color: var(--accent-blue); outline: none; } .column-filter-input::placeholder { color: var(--text-secondary); opacity: 0.6; } .filter-toggle-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-secondary); font-size: 11px; cursor: pointer; transition: all 0.2s; } .filter-toggle-btn:hover { background: var(--bg-primary); color: var(--text-primary); } .filter-toggle-btn.active { background: var(--accent-blue); color: var(--bg-primary); border-color: var(--accent-blue); } .active-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; } .column-filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--accent-purple); color: white; border-radius: 10px; font-size: 10px; } .column-filter-chip .col-name { opacity: 0.8; } .column-filter-chip .remove-col-filter { cursor: pointer; opacity: 0.7; font-size: 12px; } .column-filter-chip .remove-col-filter:hover { opacity: 1; } /* ========================================== * Keyboard Shortcuts * ========================================== */ .shortcuts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .shortcut-item { display: flex; justify-content: space-between; align-items: center; padding: 8px; background: var(--bg-primary); border-radius: 4px; } .shortcut-key { background: var(--bg-tertiary); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; } /* ========================================== * Context Switcher & Chips * ========================================== */ .context-switcher { display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--bg-tertiary); border-radius: 4px; font-size: 12px; } .context-icon { color: var(--accent-green); } .add-context-btn { padding: 2px 5px; background: var(--accent-purple); border: none; border-radius: 3px; color: var(--bg-primary); cursor: pointer; font-size: 9px; margin-left: 2px; vertical-align: middle; } .add-context-btn:hover { opacity: 0.9; } .context-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--border-color); min-height: 40px; } .context-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--accent-purple); color: var(--bg-primary); border-radius: 12px; font-size: 11px; } .context-chip .remove { cursor: pointer; opacity: 0.7; } .context-chip .remove:hover { opacity: 1; } /* ========================================== * Hamburger Menu * ========================================== */ .hamburger-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--surface-tertiary); border: 1px solid rgba(122, 162, 247, 0.15); border-radius: 6px; cursor: pointer; padding: 0; margin-right: 10px; transition: all 0.2s ease; } .hamburger-btn:hover { background: var(--bg-hover); border-color: rgba(122, 162, 247, 0.3); } /* Desktop: hide hamburger lines and span, use ::after for arrow toggle */ .hamburger-btn .hamburger-line { display: none; } .hamburger-btn .sidebar-toggle-icon { display: none; } .hamburger-btn::after { content: '«'; font-size: 16px; font-weight: 600; color: var(--text-secondary); line-height: 1; transition: color 0.2s ease; } .hamburger-btn.active::after { content: '»'; } .hamburger-btn:hover::after { color: var(--accent-blue); } /* Mobile: show hamburger lines, hide arrow icon */ @media (max-width: 768px) { .hamburger-btn { flex-direction: column; justify-content: space-around; width: 24px; height: 20px; background: transparent; border: none; border-radius: 0; margin-right: 12px; } .hamburger-btn:hover { background: transparent; border-color: transparent; } .hamburger-btn .hamburger-line { display: block; width: 100%; height: 2px; background: var(--text-primary); border-radius: 1px; transition: all 0.3s ease; } .hamburger-btn .sidebar-toggle-icon { display: none; } .hamburger-btn::after { display: none; } .hamburger-btn.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger-btn.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger-btn.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } } /* ========================================== * Resource Actions * ========================================== */ .resource-actions { display: flex; gap: 4px; } .resource-action-btn { padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 10px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); white-space: nowrap; } .resource-action-btn:hover { background: var(--accent-blue); color: white; border-color: var(--accent-blue); } .resource-action-btn.terminal { border-color: var(--accent-green); } .resource-action-btn.terminal:hover { background: var(--accent-green); } .resource-action-btn.logs { border-color: var(--accent-cyan); } .resource-action-btn.logs:hover { background: var(--accent-cyan); } .resource-action-btn.portforward { border-color: var(--accent-purple); } .resource-action-btn.portforward:hover { background: var(--accent-purple); } .resource-action-btn.topo { border-color: var(--accent-yellow); } .resource-action-btn.topo:hover { background: var(--accent-yellow); color: var(--text-on-accent); } /* ========================================== * AI Toast & Highlight * ========================================== */ .ai-highlight { animation: aiHighlight 2s ease-out; } .ai-action-toast { position: fixed; bottom: 20px; right: 20px; background: var(--accent-purple); color: white; padding: 12px 20px; border-radius: 8px; font-size: 13px; z-index: 3000; animation: slideInUp 0.3s ease-out; } /* ========================================== * Guardrails Status * ========================================== */ .guardrails-status { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); font-size: 11px; } .guardrails-indicator { display: flex; align-items: center; gap: 4px; } .guardrails-indicator .dot { width: 6px; height: 6px; border-radius: 50%; } .guardrails-indicator.safe .dot { background: var(--accent-green); } .guardrails-indicator.warning .dot { background: var(--accent-yellow); } .guardrails-indicator.danger .dot { background: var(--accent-red); } .guardrails-limit { margin-left: auto; color: var(--text-secondary); } /* ========================================== * Tokyo Night Light - component refinements * Overrides hardcoded dark-theme rgba values * for a cohesive cool-light appearance. * ========================================== */ /* Status badges: remove neon glow on light bg */ html[data-theme="light"] .status-running, html[data-theme="light"] .status-active, html[data-theme="light"] .status-ready { text-shadow: none; } html[data-theme="light"] .status-pending { text-shadow: none; } html[data-theme="light"] .status-failed, html[data-theme="light"] .status-error { text-shadow: none; } /* Tables: softer shadow on light bg */ html[data-theme="light"] table { box-shadow: 0 2px 12px rgba(52, 59, 88, 0.08), 0 1px 3px rgba(52, 59, 88, 0.06); } /* Table header: visible tint for depth */ html[data-theme="light"] th { border-bottom: 1px solid rgba(52, 84, 138, 0.15); } html[data-theme="light"] th:hover { background: linear-gradient(180deg, rgba(52, 84, 138, 0.12) 0%, var(--surface-primary) 100%); } /* Table rows */ html[data-theme="light"] tr:hover { background: linear-gradient(90deg, rgba(52, 84, 138, 0.06) 0%, rgba(90, 74, 120, 0.04) 100%); } html[data-theme="light"] tr:hover td { border-bottom-color: rgba(52, 84, 138, 0.15); } html[data-theme="light"] tr.selected { background: linear-gradient(90deg, rgba(52, 84, 138, 0.1) 0%, rgba(90, 74, 120, 0.06) 100%); } /* Buttons: accent-matched shadows */ html[data-theme="light"] .btn-primary { box-shadow: 0 4px 12px rgba(52, 84, 138, 0.25); } html[data-theme="light"] .btn-primary:hover { box-shadow: 0 6px 18px rgba(52, 84, 138, 0.3); } html[data-theme="light"] .btn-secondary { border-color: rgba(52, 84, 138, 0.25); } html[data-theme="light"] .btn-secondary:hover { background: rgba(52, 84, 138, 0.08); } html[data-theme="light"] .send-btn { box-shadow: 0 4px 12px rgba(90, 74, 120, 0.25); } html[data-theme="light"] .send-btn:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(90, 74, 120, 0.3); } html[data-theme="light"] .refresh-btn { background: linear-gradient(135deg, rgba(52, 84, 138, 0.08) 0%, rgba(22, 103, 117, 0.08) 100%); border-color: rgba(52, 84, 138, 0.15); } html[data-theme="light"] .refresh-btn:hover { background: linear-gradient(135deg, rgba(52, 84, 138, 0.15) 0%, rgba(22, 103, 117, 0.15) 100%); border-color: var(--accent-cyan); box-shadow: 0 4px 12px rgba(22, 103, 117, 0.15); } html[data-theme="light"] .logout-btn { border-color: rgba(140, 67, 81, 0.3); } html[data-theme="light"] .logout-btn:hover { background: rgba(140, 67, 81, 0.08); } /* Pagination */ html[data-theme="light"] .pagination-container { border-top-color: rgba(52, 84, 138, 0.1); } html[data-theme="light"] .pagination-btn { border-color: rgba(52, 84, 138, 0.15); } html[data-theme="light"] .pagination-btn:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(52, 84, 138, 0.2); } /* Badges */ html[data-theme="light"] .user-badge { background: linear-gradient(135deg, rgba(52, 84, 138, 0.1) 0%, rgba(90, 74, 120, 0.1) 100%); border-color: rgba(52, 84, 138, 0.15); } html[data-theme="light"] .ai-badge { box-shadow: 0 2px 6px rgba(90, 74, 120, 0.2); } /* Modals: lighter backdrop, softer shadow */ html[data-theme="light"] .modal-overlay { background: rgba(52, 59, 88, 0.5); } html[data-theme="light"] .modal { border-color: rgba(52, 84, 138, 0.15); box-shadow: 0 25px 60px rgba(52, 59, 88, 0.18), 0 0 30px rgba(52, 84, 138, 0.06); } html[data-theme="light"] .modal-header { border-bottom-color: rgba(52, 84, 138, 0.12); background: linear-gradient(90deg, rgba(52, 84, 138, 0.04) 0%, transparent 100%); } html[data-theme="light"] .modal-footer { border-top-color: rgba(52, 84, 138, 0.12); background: linear-gradient(90deg, transparent 0%, rgba(52, 84, 138, 0.02) 100%); } /* Approval modal */ html[data-theme="light"] .approval-modal { background: rgba(52, 59, 88, 0.5); } /* Tabs */ html[data-theme="light"] .tabs { border-bottom-color: rgba(52, 84, 138, 0.1); } html[data-theme="light"] .tab:hover { background: rgba(52, 84, 138, 0.08); } html[data-theme="light"] .tab.active { background: linear-gradient(135deg, rgba(52, 84, 138, 0.1) 0%, rgba(22, 103, 117, 0.06) 100%); border-color: rgba(52, 84, 138, 0.2); box-shadow: 0 2px 8px rgba(52, 84, 138, 0.08); } /* Forms */ html[data-theme="light"] .form-group input, html[data-theme="light"] .form-group select { border-color: rgba(52, 84, 138, 0.15); } html[data-theme="light"] .form-group input:focus, html[data-theme="light"] .form-group select:focus { box-shadow: 0 0 0 3px rgba(52, 84, 138, 0.08); } html[data-theme="light"] .namespace-select { border-color: rgba(52, 84, 138, 0.15); } html[data-theme="light"] .namespace-select:focus { box-shadow: 0 0 0 3px rgba(52, 84, 138, 0.08); } /* Search */ html[data-theme="light"] .search-results { box-shadow: 0 8px 24px rgba(52, 59, 88, 0.12); } /* Health dots: no glow on light bg */ html[data-theme="light"] .health-dot.ok { box-shadow: none; } html[data-theme="light"] .health-dot.warning { box-shadow: none; } html[data-theme="light"] .health-dot.error { box-shadow: none; } /* Re-apply dark values when system prefers dark + no explicit theme */ @media (prefers-color-scheme: dark) { html[data-theme="light"] .status-running, html[data-theme="light"] .status-active, html[data-theme="light"] .status-ready { text-shadow: 0 0 10px rgba(158, 206, 106, 0.5); } html[data-theme="light"] .status-pending { text-shadow: 0 0 10px rgba(224, 175, 104, 0.5); } html[data-theme="light"] .status-failed, html[data-theme="light"] .status-error { text-shadow: 0 0 10px rgba(247, 118, 142, 0.5); } html[data-theme="light"] table { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } html[data-theme="light"] th { border-bottom: 1px solid rgba(122, 162, 247, 0.1); } html[data-theme="light"] th:hover { background: linear-gradient(180deg, rgba(122, 162, 247, 0.2) 0%, var(--surface-primary) 100%); } html[data-theme="light"] tr:hover { background: linear-gradient(90deg, rgba(122, 162, 247, 0.08) 0%, rgba(187, 154, 247, 0.05) 100%); } html[data-theme="light"] tr:hover td { border-bottom-color: rgba(122, 162, 247, 0.2); } html[data-theme="light"] tr.selected { background: linear-gradient(90deg, rgba(122, 162, 247, 0.15) 0%, rgba(187, 154, 247, 0.1) 100%); } html[data-theme="light"] .btn-primary { box-shadow: 0 4px 15px rgba(122, 162, 247, 0.3); } html[data-theme="light"] .btn-primary:hover { box-shadow: 0 6px 20px rgba(122, 162, 247, 0.4); } html[data-theme="light"] .btn-secondary { border-color: rgba(122, 162, 247, 0.3); } html[data-theme="light"] .btn-secondary:hover { background: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .send-btn { box-shadow: 0 4px 15px rgba(187, 154, 247, 0.3); } html[data-theme="light"] .send-btn:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(187, 154, 247, 0.4); } html[data-theme="light"] .refresh-btn { background: linear-gradient(135deg, rgba(122, 162, 247, 0.1) 0%, rgba(125, 207, 255, 0.1) 100%); border-color: rgba(122, 162, 247, 0.2); } html[data-theme="light"] .refresh-btn:hover { background: linear-gradient(135deg, rgba(122, 162, 247, 0.2) 0%, rgba(125, 207, 255, 0.2) 100%); border-color: var(--accent-cyan); box-shadow: 0 4px 12px rgba(125, 207, 255, 0.2); } html[data-theme="light"] .logout-btn { border-color: rgba(247, 118, 142, 0.3); } html[data-theme="light"] .logout-btn:hover { background: rgba(247, 118, 142, 0.1); } html[data-theme="light"] .pagination-container { border-top-color: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .pagination-btn { border-color: rgba(122, 162, 247, 0.2); } html[data-theme="light"] .pagination-btn:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(122, 162, 247, 0.3); } html[data-theme="light"] .user-badge { background: linear-gradient(135deg, rgba(122, 162, 247, 0.15) 0%, rgba(187, 154, 247, 0.15) 100%); border-color: rgba(122, 162, 247, 0.2); } html[data-theme="light"] .ai-badge { box-shadow: 0 2px 8px rgba(187, 154, 247, 0.3); } html[data-theme="light"] .modal-overlay { background: rgba(0, 0, 0, 0.8); } html[data-theme="light"] .modal { border-color: rgba(122, 162, 247, 0.2); box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(122, 162, 247, 0.1); } html[data-theme="light"] .modal-header { border-bottom-color: rgba(122, 162, 247, 0.15); background: linear-gradient(90deg, rgba(122, 162, 247, 0.05) 0%, transparent 100%); } html[data-theme="light"] .modal-footer { border-top-color: rgba(122, 162, 247, 0.15); background: linear-gradient(90deg, transparent 0%, rgba(122, 162, 247, 0.03) 100%); } html[data-theme="light"] .approval-modal { background: rgba(0, 0, 0, 0.7); } html[data-theme="light"] .tabs { border-bottom-color: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .tab:hover { background: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .tab.active { background: linear-gradient(135deg, rgba(122, 162, 247, 0.15) 0%, rgba(125, 207, 255, 0.1) 100%); border-color: rgba(122, 162, 247, 0.3); box-shadow: 0 2px 10px rgba(122, 162, 247, 0.1); } html[data-theme="light"] .form-group input, html[data-theme="light"] .form-group select { border-color: rgba(122, 162, 247, 0.2); } html[data-theme="light"] .form-group input:focus, html[data-theme="light"] .form-group select:focus { box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1); } html[data-theme="light"] .namespace-select { border-color: rgba(122, 162, 247, 0.2); } html[data-theme="light"] .namespace-select:focus { box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1); } html[data-theme="light"] .search-results { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } html[data-theme="light"] .health-dot.ok { box-shadow: 0 0 10px var(--accent-green); } html[data-theme="light"] .health-dot.warning { box-shadow: 0 0 10px var(--accent-yellow); } html[data-theme="light"] .health-dot.error { box-shadow: 0 0 10px var(--accent-red); } } /* === css/layout.css === */ /** * k13d Layout * App layout: top bar, sidebar, content area, AI panel, resize handle */ /* ========================================== * App Container * ========================================== */ .app-container { display: none; flex-direction: column; height: 100vh; background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-deep) 100%); } .app-container.active { display: flex; animation: appFadeIn 0.5s ease-out; } /* ========================================== * Top Bar * ========================================== */ .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; background: linear-gradient(135deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); border-bottom: 1px solid rgba(122, 162, 247, 0.15); backdrop-filter: blur(10px); position: relative; z-index: 100; } .top-bar::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(122, 162, 247, 0.3), rgba(187, 154, 247, 0.3), transparent); } .logo { font-family: var(--font-mono); font-size: 18px; font-weight: var(--font-weight-bold); background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 50%, var(--accent-purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; text-transform: lowercase; text-shadow: 0 0 30px rgba(122, 162, 247, 0.3); } .logo::before { content: '⎈'; -webkit-text-fill-color: var(--accent-blue); font-size: 24px; transition: transform 0.6s ease; } .logo:hover::before { transform: rotate(20deg); } .user-info { display: flex; align-items: center; gap: 12px; } /* Header Team Badge */ .header-team-badge { display: flex; align-items: center; gap: 6px; margin-left: 16px; padding: 4px 12px; background: rgba(125, 211, 252, 0.1); border: 1px solid rgba(125, 211, 252, 0.2); border-radius: 20px; font-size: 11px; } .header-team-cloud { font-size: 12px; } .header-team-text { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600; } /* ========================================== * Main Content * ========================================== */ .main-container { display: flex; flex: 1; overflow: hidden; } /* ========================================== * Sidebar * ========================================== */ .sidebar { width: 200px; min-width: 180px; background: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); border-right: 1px solid rgba(122, 162, 247, 0.1); display: flex; flex-direction: column; overflow-y: auto; backdrop-filter: blur(10px); } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(122, 162, 247, 0.3); border-radius: 3px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(122, 162, 247, 0.5); } .sidebar.collapsed { width: 0; min-width: 0; padding: 0; overflow: hidden; } .sidebar-transition { transition: width 0.3s ease, min-width 0.3s ease, padding 0.3s ease; } .nav-section { padding: 10px 8px; } .nav-title { font-size: 9px; font-weight: var(--font-weight-bold); text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: 0.15em; padding-left: 12px; display: flex; align-items: center; gap: 6px; } .nav-title::before { content: ''; width: 3px; height: 12px; background: linear-gradient(180deg, var(--accent-blue), var(--accent-purple)); border-radius: 2px; } .nav-item { padding: 7px 10px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 500; transition: all 0.2s ease; margin-bottom: 4px; border: 1px solid transparent; position: relative; overflow: hidden; } .nav-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(122, 162, 247, 0.2), transparent); transition: width 0.3s ease; } .nav-item:hover { background: var(--bg-hover); border-color: rgba(122, 162, 247, 0.1); transform: translateX(4px); } .nav-item:hover::before { width: 100%; } .nav-item.active { background: linear-gradient(135deg, rgba(122, 162, 247, 0.2) 0%, rgba(187, 154, 247, 0.15) 100%); border-color: rgba(122, 162, 247, 0.3); color: var(--accent-blue); box-shadow: 0 4px 15px rgba(122, 162, 247, 0.1); } .nav-item.active::after { content: ''; position: absolute; right: 10px; width: 6px; height: 6px; background: var(--accent-blue); border-radius: 50%; box-shadow: 0 0 10px var(--accent-blue); } .nav-item .count { background: var(--surface-elevated); padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 600; min-width: 28px; text-align: center; transition: all 0.2s ease; } .nav-item:hover .count { background: rgba(122, 162, 247, 0.2); color: var(--accent-blue); } .nav-item.active .count { background: rgba(122, 162, 247, 0.3); color: var(--accent-blue); } /* ========================================== * Content Wrapper & Panels * ========================================== */ .content-wrapper { flex: 1; display: flex; overflow: hidden; position: relative; } .main-panel { flex: 1; min-width: 400px; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, var(--surface-secondary) 0%, var(--bg-deep) 100%); } /* ========================================== * Resize Handle * ========================================== */ .resize-handle { width: 4px; background: linear-gradient(180deg, rgba(122, 162, 247, 0.1), rgba(187, 154, 247, 0.1)); cursor: col-resize; transition: all 0.3s ease; position: relative; } .resize-handle::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 40px; background: rgba(122, 162, 247, 0.3); border-radius: 2px; transition: all 0.3s ease; } .resize-handle:hover { background: linear-gradient(180deg, rgba(122, 162, 247, 0.2), rgba(187, 154, 247, 0.2)); } .resize-handle:hover::before { background: var(--accent-blue); box-shadow: 0 0 10px var(--accent-blue); height: 60px; } /* ========================================== * AI Panel * ========================================== */ .ai-panel { width: 400px; min-width: 300px; max-width: 75vw; background: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); display: flex; flex-direction: column; border-left: 1px solid rgba(187, 154, 247, 0.1); position: relative; } .ai-panel::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(187, 154, 247, 0.3), transparent, rgba(122, 162, 247, 0.3)); } .ai-header { padding: 14px 18px; border-bottom: 1px solid rgba(187, 154, 247, 0.15); display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, rgba(187, 154, 247, 0.08) 0%, rgba(122, 162, 247, 0.05) 100%); } .ai-header-title { font-size: 14px; font-weight: 600; background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ai-status-dot { font-size: 12px; margin-left: 4px; animation: pulse 2s infinite; } .ai-status-dot.connected { color: var(--accent-green); animation: none; text-shadow: 0 0 8px var(--accent-green); } .ai-status-dot.disconnected { color: var(--accent-red); animation: none; text-shadow: 0 0 8px var(--accent-red); } .ai-status-dot.checking { color: var(--accent-yellow); text-shadow: 0 0 8px var(--accent-yellow); } .ai-messages { flex: 1; overflow-y: auto; padding: 18px; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%); outline: none; } .ai-messages::-webkit-scrollbar { width: 6px; } .ai-messages::-webkit-scrollbar-track { background: transparent; } .ai-messages::-webkit-scrollbar-thumb { background: rgba(187, 154, 247, 0.3); border-radius: 3px; } .message { margin-bottom: 18px; animation: messageAppear 0.3s ease-out; } .message.user { text-align: right; } .message-content { display: inline-block; padding: 12px 16px; border-radius: 16px; max-width: 90%; font-size: 13px; line-height: 1.6; } .message.user .message-content { background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%); color: white; border-bottom-right-radius: 4px; box-shadow: 0 4px 15px rgba(122, 162, 247, 0.3); } .message.assistant .message-content { background: var(--surface-tertiary); border: 1px solid rgba(187, 154, 247, 0.1); border-bottom-left-radius: 4px; backdrop-filter: blur(5px); } .message-content pre { background: var(--surface-input); padding: 12px; border-radius: 8px; margin-top: 10px; overflow-x: auto; font-size: 12px; border: 1px solid rgba(122, 162, 247, 0.1); } .message-content .resource-link { color: var(--accent-cyan); text-decoration: none; background: rgba(125, 211, 252, 0.1); padding: 1px 4px; border-radius: 3px; cursor: pointer; transition: all 0.2s ease; } .message-content .resource-link:hover { background: rgba(125, 211, 252, 0.25); text-decoration: underline; } .message.streaming .message-content { border-left: 2px solid var(--accent-blue); padding-left: 12px; } .message.streaming .cursor { display: inline-block; animation: blink 0.7s infinite; color: var(--accent-blue); font-weight: bold; } .ai-input-container { padding: 18px; border-top: 1px solid rgba(187, 154, 247, 0.15); background: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); } .ai-input { width: 100%; background: var(--surface-input); border: 1px solid rgba(187, 154, 247, 0.2); border-radius: 12px; padding: 14px 16px; color: var(--text-primary); font-family: inherit; font-size: 13px; resize: none; transition: all 0.2s ease; } .ai-input.error { border-color: var(--accent-red) !important; box-shadow: 0 0 0 3px rgba(247, 118, 142, 0.1), 0 0 20px rgba(247, 118, 142, 0.1) !important; animation: shake 0.4s ease-in-out; } .ai-input.error::placeholder { color: var(--accent-red); opacity: 0.8; } .ai-input:focus { outline: none; border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(187, 154, 247, 0.1), 0 0 20px rgba(187, 154, 247, 0.1); background: var(--surface-input-solid); } .ai-input::placeholder { color: var(--text-secondary); opacity: 0.7; } .ai-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } .ai-hint { font-size: 11px; color: var(--text-secondary); opacity: 0.8; } /* ========================================== * Panel Header * ========================================== */ .panel-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(122, 162, 247, 0.1); background: linear-gradient(90deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); backdrop-filter: blur(10px); } .panel-title { font-size: 15px; font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; } .resource-summary { display: inline-flex; gap: 8px; margin-left: 12px; font-size: 12px; font-weight: 400; color: var(--text-secondary); } .resource-summary .summary-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--surface-tertiary); border-radius: 4px; } .resource-summary .summary-count { font-weight: 600; color: var(--text-primary); } .resource-summary .status-running { color: var(--accent-green); } .resource-summary .status-pending { color: var(--accent-yellow); } .resource-summary .status-failed { color: var(--accent-red); } .resource-summary .status-succeeded { color: var(--accent-cyan); } .resource-summary .status-unknown { color: var(--text-secondary); } .panel-actions { display: flex; gap: 10px; align-items: center; } /* ========================================== * Auto Refresh Container * ========================================== */ .auto-refresh-container { display: flex; align-items: center; gap: 8px; margin-left: 16px; padding: 4px 12px; background: var(--bg-tertiary); border-radius: 4px; font-size: 12px; } .refresh-interval-select { padding: 2px 6px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: 11px; cursor: pointer; } .last-refresh-time { color: var(--text-secondary); font-size: 11px; } .refresh-btn { padding: 4px 8px; background: transparent; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); cursor: pointer; font-size: 12px; transition: all 0.2s; } .refresh-btn:hover { background: var(--accent-blue); border-color: var(--accent-blue); color: white; } .refresh-btn.spinning svg { animation: spin 1s linear infinite; } /* ========================================== * Responsive Media Queries * ========================================== */ /* --- Tablet (max-width: 1024px) --- */ @media (max-width: 1024px) { .ai-panel { width: 320px; min-width: 250px; max-width: 75vw; } .sidebar { width: 200px; min-width: 160px; } .nav-section { padding: 12px 8px; } .nav-item { padding: 8px 10px; font-size: 12px; } .top-bar { padding: 8px 16px; } .logo { font-size: 18px; } .panel-header { padding: 12px 16px; } .ai-messages { padding: 14px; } .ai-input-container { padding: 14px; } } /* --- Sidebar Overlay (mobile drawer backdrop) --- */ .sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 199; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .sidebar-overlay.active { opacity: 1; visibility: visible; } /* --- Mobile Sidebar Header --- */ .sidebar-mobile-header { display: none; } /* Hide collapse arrows on desktop */ .nav-section-arrow { display: none; } /* --- Mobile (max-width: 768px) --- */ @media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; min-width: 280px; z-index: 200; transform: translateX(-100%); transition: transform 0.3s ease; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3); } .sidebar.mobile-open { transform: translateX(0); /* Override desktop .collapsed styles when mobile drawer is open */ width: 280px; min-width: 280px; padding: 0; overflow-y: auto; } .sidebar.collapsed { transform: translateX(-100%); } /* Mobile sidebar header with close button */ .sidebar-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; background: var(--surface-primary); } .sidebar-mobile-header .sidebar-mobile-title { font-size: 15px; font-weight: 600; color: var(--accent-blue); display: flex; align-items: center; gap: 8px; } .sidebar-mobile-header .sidebar-mobile-title::before { content: '⎈'; font-size: 16px; } .sidebar-close-btn { background: none; border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 18px; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); transition: all 0.2s ease; line-height: 1; } .sidebar-close-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent-blue); } /* Collapsible nav sections on mobile */ .nav-title { cursor: pointer; user-select: none; } .nav-title .nav-section-arrow { display: inline-block; font-size: 10px; transition: transform 0.2s ease; color: var(--text-muted); margin-left: auto; } .nav-section.collapsed .nav-section-arrow { transform: rotate(-90deg); } .nav-section.collapsed .nav-item, .nav-section.collapsed #crd-nav-items { display: none; } /* Always show active item even in collapsed section */ .nav-section.collapsed .nav-item.active { display: flex; } /* Top bar: hide less essential items on mobile */ .search-container { display: none; } .auto-refresh-container { display: none; } .cluster-switcher { display: none; } .ai-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; min-width: 0; z-index: 200; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3); } .ai-panel.mobile-open { transform: translateX(0); } .main-panel { min-width: 0; } .resize-handle { display: none; } .top-bar { padding: 8px 12px; } .logo { font-size: 16px; gap: 6px; } .logo::before { font-size: 20px; } .user-info { gap: 8px; } .header-team-badge { display: none; } .panel-header { padding: 10px 14px; flex-wrap: wrap; gap: 8px; } .panel-title { font-size: 14px; } .resource-summary { margin-left: 0; flex-wrap: wrap; } .panel-actions { gap: 6px; } .ai-messages { padding: 12px; } .ai-input-container { padding: 12px; } .ai-input { padding: 12px 14px; } .message-content { max-width: 95%; } /* --- Mobile: Top bar condensation --- */ .health-indicator span#health-status { display: none; } .user-info .logout-btn { padding: 8px 10px; font-size: 11px; min-height: 36px; } /* --- Mobile: Touch targets (min 44px) --- */ .hamburger-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .nav-item { min-height: 44px; } .nav-title { min-height: 40px; display: flex; align-items: center; } .pagination-btn { min-height: 44px; min-width: 44px; padding: 8px 14px; } .logout-btn { min-height: 44px; } .refresh-btn { min-height: 44px; min-width: 44px; } /* --- Mobile: Table horizontal scroll --- */ .table-container { padding: 8px; -webkit-overflow-scrolling: touch; } table { min-width: 600px; } th { padding: 10px 12px; white-space: nowrap; } td { padding: 10px 12px; font-size: 12px; } /* --- Mobile: Pagination visibility --- */ .pagination-container { padding: 10px 12px; flex-wrap: wrap; gap: 8px; justify-content: center; } .pagination-info { width: 100%; text-align: center; font-size: 12px; } .pagination-controls { width: 100%; justify-content: center; } .page-size-select { min-height: 44px; font-size: 13px; } /* --- Mobile: Font size floor --- */ body { font-size: 14px; -webkit-text-size-adjust: 100%; } } /* --- Small Mobile (max-width: 480px) --- */ @media (max-width: 480px) { .top-bar { padding: 6px 8px; } .logo { font-size: 14px; gap: 4px; } .logo::before { font-size: 18px; } .user-info { gap: 6px; font-size: 12px; } .sidebar { width: 100%; min-width: 100%; max-width: 100%; } .sidebar.mobile-open { width: 100%; min-width: 100%; } .ai-panel { width: 100%; max-width: 100%; } .main-panel { min-width: 0; } .nav-section { padding: 10px 6px; } .nav-item { padding: 8px 8px; font-size: 12px; border-radius: 8px; } .panel-header { padding: 8px 10px; } .panel-title { font-size: 13px; gap: 6px; } .resource-summary { font-size: 11px; } .panel-actions { gap: 4px; } .auto-refresh-container { gap: 4px; padding: 2px 6px; font-size: 11px; } .ai-header { padding: 10px 12px; } .ai-header-title { font-size: 13px; } .ai-messages { padding: 8px; } .ai-input-container { padding: 8px; } .ai-input { padding: 10px 12px; font-size: 12px; border-radius: 10px; } .ai-actions { margin-top: 8px; } .ai-hint { font-size: 10px; } .message { margin-bottom: 12px; } .message-content { padding: 10px 12px; font-size: 12px; max-width: 100%; border-radius: 12px; } .message-content pre { padding: 8px; font-size: 11px; } .content-wrapper { min-width: 0; } } /* --- Extra-Small Mobile (max-width: 375px) --- */ @media (max-width: 375px) { .top-bar { flex-wrap: wrap; gap: 4px; padding: 4px 6px; } .user-info { gap: 4px; } .logout-btn { padding: 4px 6px; font-size: 11px; } .filter-input { width: 100%; min-width: 0; } .filter-bar { flex-wrap: wrap; gap: 4px; } .pagination-controls { flex-wrap: wrap; gap: 6px; } .pagination-btn { padding: 6px 10px; font-size: 11px; } .page-size-select { font-size: 11px; } } /* --- Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { .app-container.active { animation: none; } .ai-status-dot { animation: none; } .ai-status-dot.checking { animation: none; } .message { animation: none; } .message.streaming .cursor { animation: none; } .refresh-btn.spinning svg { animation: none; } .nav-item { transition: none; } .nav-item::before { transition: none; } .nav-item .count { transition: none; } .resize-handle { transition: none; } .resize-handle::before { transition: none; } .sidebar-transition { transition: none; } .ai-input { transition: none; } .message-content .resource-link { transition: none; } .refresh-btn { transition: none; } .sidebar { transition: none; } .ai-panel { transition: none; } } /* ========================================== * Tokyo Night Light - layout refinements * ========================================== */ /* Top bar: cool-tinted gradient border */ html[data-theme="light"] .top-bar { border-bottom-color: rgba(52, 84, 138, 0.12); } html[data-theme="light"] .top-bar::before { background: linear-gradient(90deg, transparent, rgba(52, 84, 138, 0.2), rgba(90, 74, 120, 0.2), transparent); } /* Sidebar: tinted border and scrollbar */ html[data-theme="light"] .sidebar { border-right-color: rgba(52, 84, 138, 0.1); } html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb { background: rgba(52, 84, 138, 0.2); } html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(52, 84, 138, 0.35); } /* Nav items: accent-matched hover & active */ html[data-theme="light"] .nav-item::before { background: linear-gradient(90deg, rgba(52, 84, 138, 0.15), transparent); } html[data-theme="light"] .nav-item:hover { border-color: rgba(52, 84, 138, 0.08); } html[data-theme="light"] .nav-item.active { background: linear-gradient(135deg, rgba(52, 84, 138, 0.14) 0%, rgba(90, 74, 120, 0.08) 100%); border-color: rgba(52, 84, 138, 0.2); box-shadow: 0 2px 10px rgba(52, 84, 138, 0.06); } html[data-theme="light"] .nav-item:hover .count { background: rgba(52, 84, 138, 0.12); } html[data-theme="light"] .nav-item.active .count { background: rgba(52, 84, 138, 0.18); } /* Resize handle */ html[data-theme="light"] .resize-handle { background: linear-gradient(180deg, rgba(52, 84, 138, 0.08), rgba(90, 74, 120, 0.08)); } html[data-theme="light"] .resize-handle::before { background: rgba(52, 84, 138, 0.2); } html[data-theme="light"] .resize-handle:hover { background: linear-gradient(180deg, rgba(52, 84, 138, 0.15), rgba(90, 74, 120, 0.15)); } /* AI panel */ html[data-theme="light"] .ai-panel { border-left-color: rgba(90, 74, 120, 0.1); } html[data-theme="light"] .ai-panel::before { background: linear-gradient(180deg, rgba(90, 74, 120, 0.2), transparent, rgba(52, 84, 138, 0.2)); } html[data-theme="light"] .ai-header { border-bottom-color: rgba(90, 74, 120, 0.1); background: linear-gradient(90deg, rgba(90, 74, 120, 0.06) 0%, rgba(52, 84, 138, 0.03) 100%); } html[data-theme="light"] .ai-messages { background: linear-gradient(180deg, transparent 0%, rgba(52, 59, 88, 0.03) 100%); } html[data-theme="light"] .ai-messages::-webkit-scrollbar-thumb { background: rgba(90, 74, 120, 0.2); } html[data-theme="light"] .message.user .message-content { box-shadow: 0 4px 12px rgba(52, 84, 138, 0.2); } html[data-theme="light"] .message.assistant .message-content { border-color: rgba(90, 74, 120, 0.08); } html[data-theme="light"] .message-content pre { border-color: rgba(52, 84, 138, 0.08); } html[data-theme="light"] .ai-input-container { border-top-color: rgba(90, 74, 120, 0.1); } html[data-theme="light"] .ai-input { border-color: rgba(90, 74, 120, 0.15); } html[data-theme="light"] .ai-input:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(90, 74, 120, 0.08), 0 0 15px rgba(90, 74, 120, 0.06); } /* Panel header */ html[data-theme="light"] .panel-header { border-bottom-color: rgba(52, 84, 138, 0.08); } /* Pagination border */ html[data-theme="light"] .pagination-container { border-top-color: rgba(52, 84, 138, 0.08); } /* Re-apply dark values for auto dark mode */ @media (prefers-color-scheme: dark) { html[data-theme="light"] .top-bar { border-bottom-color: rgba(122, 162, 247, 0.15); } html[data-theme="light"] .top-bar::before { background: linear-gradient(90deg, transparent, rgba(122, 162, 247, 0.3), rgba(187, 154, 247, 0.3), transparent); } html[data-theme="light"] .sidebar { border-right-color: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb { background: rgba(122, 162, 247, 0.3); } html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(122, 162, 247, 0.5); } html[data-theme="light"] .nav-item::before { background: linear-gradient(90deg, rgba(122, 162, 247, 0.2), transparent); } html[data-theme="light"] .nav-item:hover { border-color: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .nav-item.active { background: linear-gradient(135deg, rgba(122, 162, 247, 0.2) 0%, rgba(187, 154, 247, 0.15) 100%); border-color: rgba(122, 162, 247, 0.3); box-shadow: 0 4px 15px rgba(122, 162, 247, 0.1); } html[data-theme="light"] .nav-item:hover .count { background: rgba(122, 162, 247, 0.2); } html[data-theme="light"] .nav-item.active .count { background: rgba(122, 162, 247, 0.3); } html[data-theme="light"] .resize-handle { background: linear-gradient(180deg, rgba(122, 162, 247, 0.1), rgba(187, 154, 247, 0.1)); } html[data-theme="light"] .resize-handle::before { background: rgba(122, 162, 247, 0.3); } html[data-theme="light"] .resize-handle:hover { background: linear-gradient(180deg, rgba(122, 162, 247, 0.2), rgba(187, 154, 247, 0.2)); } html[data-theme="light"] .ai-panel { border-left-color: rgba(187, 154, 247, 0.1); } html[data-theme="light"] .ai-panel::before { background: linear-gradient(180deg, rgba(187, 154, 247, 0.3), transparent, rgba(122, 162, 247, 0.3)); } html[data-theme="light"] .ai-header { border-bottom-color: rgba(187, 154, 247, 0.15); background: linear-gradient(90deg, rgba(187, 154, 247, 0.08) 0%, rgba(122, 162, 247, 0.05) 100%); } html[data-theme="light"] .ai-messages { background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%); } html[data-theme="light"] .ai-messages::-webkit-scrollbar-thumb { background: rgba(187, 154, 247, 0.3); } html[data-theme="light"] .message.user .message-content { box-shadow: 0 4px 15px rgba(122, 162, 247, 0.3); } html[data-theme="light"] .message.assistant .message-content { border-color: rgba(187, 154, 247, 0.1); } html[data-theme="light"] .message-content pre { border-color: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .ai-input-container { border-top-color: rgba(187, 154, 247, 0.15); } html[data-theme="light"] .ai-input { border-color: rgba(187, 154, 247, 0.2); } html[data-theme="light"] .ai-input:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(187, 154, 247, 0.1), 0 0 20px rgba(187, 154, 247, 0.1); } html[data-theme="light"] .panel-header { border-bottom-color: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .pagination-container { border-top-color: rgba(122, 162, 247, 0.1); } } /* === css/views.css === */ /** * k13d View Styles * Styles for all application views and modals * Includes: login, dashboard, settings, detail, topology, * metrics, terminal, log viewer, YAML editor, * port forwarding, search, command bar * * Note: Global reset, :root variables, and body styles are in * variables.css and base.css respectively. */ /* Login Page - Beautiful animated design */ .login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-primary) 50%, var(--bg-deep) 100%); position: relative; overflow-x: hidden; overflow-y: auto; padding: 24px 0; } /* Animated background particles */ .login-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20% 80%, rgba(122, 162, 247, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(187, 154, 247, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(125, 211, 252, 0.05) 0%, transparent 40%), radial-gradient(circle at 60% 60%, rgba(52, 211, 153, 0.05) 0%, transparent 40%); animation: loginBgPulse 8s ease-in-out infinite; } @keyframes loginBgPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } /* Floating Kubernetes icons */ .login-container::after { content: '⎈'; position: absolute; font-size: 300px; color: rgba(50, 108, 229, 0.03); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: floatIcon 20s ease-in-out infinite; pointer-events: none; } @keyframes floatIcon { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(180deg); } } .login-box { background: var(--surface-primary); backdrop-filter: blur(20px); padding: 48px 40px; border-radius: 20px; border: 1px solid rgba(122, 162, 247, 0.2); width: 100%; max-width: 440px; position: relative; z-index: 1; box-shadow: 0 0 60px rgba(122, 162, 247, 0.1), 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); animation: loginBoxAppear 0.6s ease-out; } @keyframes loginBoxAppear { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ASCII Art Logo */ .login-ascii-logo { font-family: var(--font-mono); font-size: 10px; line-height: 1.1; color: var(--accent-blue); text-align: center; margin-bottom: 8px; white-space: pre; overflow: hidden; text-shadow: 0 0 20px rgba(122, 162, 247, 0.5); animation: logoGlow 3s ease-in-out infinite; } @keyframes logoGlow { 0%, 100% { text-shadow: 0 0 20px rgba(122, 162, 247, 0.5); } 50% { text-shadow: 0 0 30px rgba(122, 162, 247, 0.8), 0 0 60px rgba(122, 162, 247, 0.3); } } .login-subtitle { text-align: center; margin-bottom: 32px; color: var(--text-secondary); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; } .login-subtitle span { background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600; } .login-box h1 { display: none; /* Hidden, using ASCII art instead */ } .login-box input { width: 100%; padding: 14px 16px; margin-bottom: 16px; background: var(--surface-input); border: 1px solid rgba(122, 162, 247, 0.2); border-radius: 10px; color: var(--text-primary); font-family: inherit; font-size: 14px; transition: all 0.3s ease; } .login-box input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.15), 0 0 20px rgba(122, 162, 247, 0.1); background: var(--surface-input-solid); } .login-box input::placeholder { color: var(--text-muted); } .login-box button.login-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%); color: #ffffff; border: none; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: 0.5px; transition: all 0.3s ease; position: relative; overflow: hidden; } .login-box button.login-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .login-box button.login-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(122, 162, 247, 0.3); } .login-box button.login-btn:hover::before { left: 100%; } .login-box button.login-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.3), 0 10px 30px rgba(122, 162, 247, 0.3); } .login-box button.login-btn:active { transform: translateY(0); } .login-error { color: var(--accent-red); text-align: center; margin-bottom: 16px; font-size: 13px; padding: 10px; background: rgba(247, 118, 142, 0.1); border-radius: 8px; border: 1px solid rgba(247, 118, 142, 0.2); } .login-error:empty { display: none; } /* Login tabs styling */ .login-tabs { display: flex; gap: 8px; margin-bottom: 20px; } .login-tab { flex: 1; padding: 10px; background: var(--surface-input); border: 1px solid rgba(122, 162, 247, 0.1); border-radius: 8px; color: var(--text-secondary); cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.2s ease; } .login-tab:hover { background: rgba(122, 162, 247, 0.1); border-color: rgba(122, 162, 247, 0.2); } .login-tab.active { background: rgba(122, 162, 247, 0.15); border-color: var(--accent-blue); color: var(--accent-blue); } /* Team Branding */ .team-branding { text-align: center; margin-bottom: 16px; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; } .team-cloud { color: var(--accent-cyan); font-weight: 600; } .team-divider { color: var(--text-muted); opacity: 0.5; } .team-kubeai { background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; } /* Auth Mode Indicator */ .auth-mode-indicator { text-align: center; margin-bottom: 20px; padding: 10px 16px; border-radius: 10px; font-size: 12px; display: none; } .auth-mode-indicator.token-mode { display: block; background: rgba(158, 206, 106, 0.1); border: 1px solid rgba(158, 206, 106, 0.2); color: var(--accent-green); } .auth-mode-indicator.local-mode { display: block; background: rgba(122, 162, 247, 0.1); border: 1px solid rgba(122, 162, 247, 0.2); color: var(--accent-blue); } /* Token Help Box - Collapsible */ .token-help-box { background: var(--surface-input); border: 1px solid rgba(122, 162, 247, 0.15); border-radius: 10px; margin-top: 12px; text-align: left; overflow: hidden; } .token-help-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; transition: all 0.2s ease; user-select: none; } .token-help-toggle:hover { background: rgba(122, 162, 247, 0.1); } .token-help-toggle-text { font-weight: 600; color: var(--accent-cyan); font-size: 12px; display: flex; align-items: center; gap: 6px; } .token-help-toggle-icon { font-size: 10px; transition: transform 0.3s ease; color: var(--text-secondary); } .token-help-box.expanded .token-help-toggle-icon { transform: rotate(180deg); } .token-help-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 14px; } .token-help-box.expanded .token-help-content { max-height: 400px; padding: 0 14px 14px 14px; } .token-help-title { font-weight: 600; color: var(--accent-cyan); margin-bottom: 12px; font-size: 12px; } .token-help-step { display: flex; gap: 10px; margin-bottom: 12px; font-size: 11px; line-height: 1.5; } .token-help-step .step-num { background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; flex-shrink: 0; } .token-help-step code { display: block; background: var(--surface-code); padding: 6px 10px; border-radius: 6px; margin-top: 4px; font-size: 10px; color: var(--accent-green); word-break: break-all; } .token-help-note { background: rgba(224, 175, 104, 0.1); border: 1px solid rgba(224, 175, 104, 0.2); border-radius: 6px; padding: 8px 10px; font-size: 11px; color: var(--accent-yellow); margin-top: 8px; } /* Local Login Hint */ .local-login-hint { text-align: center; margin-bottom: 16px; color: var(--text-secondary); font-size: 13px; } /* Login Footer */ .login-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(122, 162, 247, 0.1); } /* Kubernetes badge */ .login-k8s-badge { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-size: 11px; } .login-k8s-badge svg { width: 16px; height: 16px; opacity: 0.5; } .login-version { text-align: center; margin-top: 12px; font-size: 10px; color: var(--text-muted); } .login-version strong { color: var(--accent-cyan); } /* Main App Container */ .app-container { display: none; flex-direction: column; height: 100vh; background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-deep) 100%); } .app-container.active { display: flex; animation: appFadeIn 0.5s ease-out; } @keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Top Bar - Premium gradient design */ .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: linear-gradient(135deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); border-bottom: 1px solid rgba(122, 162, 247, 0.15); backdrop-filter: blur(10px); position: relative; z-index: 100; } .top-bar::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(122, 162, 247, 0.3), rgba(187, 154, 247, 0.3), transparent); } .logo { font-family: var(--font-mono); font-size: 20px; font-weight: var(--font-weight-bold); background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 50%, var(--accent-purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; text-transform: lowercase; text-shadow: 0 0 30px rgba(122, 162, 247, 0.3); } .logo::before { content: '⎈'; -webkit-text-fill-color: var(--accent-blue); font-size: 24px; animation: logoSpin 20s linear infinite; } @keyframes logoSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .user-info { display: flex; align-items: center; gap: 12px; } .user-badge { background: linear-gradient(135deg, rgba(122, 162, 247, 0.15) 0%, rgba(187, 154, 247, 0.15) 100%); border: 1px solid rgba(122, 162, 247, 0.2); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; } .user-badge::before { content: '👤'; font-size: 12px; } .logout-btn { background: transparent; border: 1px solid rgba(247, 118, 142, 0.3); color: var(--accent-red); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 500; transition: all 0.2s ease; } .logout-btn:hover { background: rgba(247, 118, 142, 0.1); border-color: var(--accent-red); transform: translateY(-1px); } /* Header Team Badge */ .header-team-badge { display: flex; align-items: center; gap: 6px; margin-left: 16px; padding: 4px 12px; background: rgba(125, 211, 252, 0.1); border: 1px solid rgba(125, 211, 252, 0.2); border-radius: 20px; font-size: 11px; } .header-team-cloud { font-size: 12px; } .header-team-text { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600; } /* Main Content */ .main-container { display: flex; flex: 1; overflow: hidden; } /* Sidebar - Premium glass design */ .sidebar { width: 240px; min-width: 200px; background: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); border-right: 1px solid rgba(122, 162, 247, 0.1); display: flex; flex-direction: column; overflow-y: auto; backdrop-filter: blur(10px); } /* Scrollbar styling */ .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(122, 162, 247, 0.3); border-radius: 3px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(122, 162, 247, 0.5); } .nav-section { padding: 16px 12px; } .nav-title { font-size: 10px; font-weight: var(--font-weight-bold); text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; letter-spacing: 0.15em; padding-left: 12px; display: flex; align-items: center; gap: 6px; } .nav-title::before { content: ''; width: 3px; height: 12px; background: linear-gradient(180deg, var(--accent-blue), var(--accent-purple)); border-radius: 2px; } .nav-item { padding: 10px 14px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; transition: all 0.2s ease; margin-bottom: 4px; border: 1px solid transparent; position: relative; overflow: hidden; } .nav-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(122, 162, 247, 0.2), transparent); transition: width 0.3s ease; } .nav-item:hover { background: var(--bg-hover); border-color: rgba(122, 162, 247, 0.1); transform: translateX(4px); } .nav-item:hover::before { width: 100%; } .nav-item.active { background: linear-gradient(135deg, rgba(122, 162, 247, 0.2) 0%, rgba(187, 154, 247, 0.15) 100%); border-color: rgba(122, 162, 247, 0.3); color: var(--accent-blue); box-shadow: 0 4px 15px rgba(122, 162, 247, 0.1); } .nav-item.active::after { content: ''; position: absolute; right: 10px; width: 6px; height: 6px; background: var(--accent-blue); border-radius: 50%; box-shadow: 0 0 10px var(--accent-blue); } .nav-item .count { background: var(--surface-elevated); padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; min-width: 28px; text-align: center; transition: all 0.2s ease; } .nav-item:hover .count { background: rgba(122, 162, 247, 0.2); color: var(--accent-blue); } .nav-item.active .count { background: rgba(122, 162, 247, 0.3); color: var(--accent-blue); } /* Resizable Panels */ .content-wrapper { flex: 1; display: flex; overflow: hidden; position: relative; } .main-panel { flex: 1; min-width: 400px; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, var(--surface-secondary) 0%, var(--bg-deep) 100%); } .resize-handle { width: 4px; background: linear-gradient(180deg, rgba(122, 162, 247, 0.1), rgba(187, 154, 247, 0.1)); cursor: col-resize; transition: all 0.3s ease; position: relative; } .resize-handle::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 40px; background: rgba(122, 162, 247, 0.3); border-radius: 2px; transition: all 0.3s ease; } .resize-handle:hover { background: linear-gradient(180deg, rgba(122, 162, 247, 0.2), rgba(187, 154, 247, 0.2)); } .resize-handle:hover::before { background: var(--accent-blue); box-shadow: 0 0 10px var(--accent-blue); height: 60px; } .ai-panel { width: 400px; min-width: 300px; max-width: 75vw; background: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); display: flex; flex-direction: column; border-left: 1px solid rgba(187, 154, 247, 0.1); position: relative; } .ai-panel::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(187, 154, 247, 0.3), transparent, rgba(122, 162, 247, 0.3)); } /* Main Panel Header - Enhanced */ .panel-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(122, 162, 247, 0.1); background: linear-gradient(90deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); backdrop-filter: blur(10px); } .panel-title { font-size: 15px; font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; } .resource-summary { display: inline-flex; gap: 8px; margin-left: 12px; font-size: 12px; font-weight: 400; color: var(--text-secondary); } .resource-summary .summary-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--surface-tertiary); border-radius: 4px; } .resource-summary .summary-count { font-weight: 600; color: var(--text-primary); } .resource-summary .status-running { color: var(--accent-green); } .resource-summary .status-pending { color: var(--accent-yellow); } .resource-summary .status-failed { color: var(--accent-red); } .resource-summary .status-succeeded { color: var(--accent-cyan); } .resource-summary .status-unknown { color: var(--text-secondary); } .panel-actions { display: flex; gap: 10px; align-items: center; } .namespace-select { background: var(--surface-input); border: 1px solid rgba(122, 162, 247, 0.2); border-radius: 8px; padding: 8px 14px; color: var(--text-primary); font-family: inherit; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .namespace-select:hover { border-color: rgba(122, 162, 247, 0.4); background: var(--surface-input-solid); } .namespace-select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1); } .refresh-btn { background: linear-gradient(135deg, rgba(122, 162, 247, 0.1) 0%, rgba(125, 207, 255, 0.1) 100%); border: 1px solid rgba(122, 162, 247, 0.2); padding: 8px 14px; border-radius: 8px; color: var(--accent-cyan); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; } .refresh-btn:hover { background: linear-gradient(135deg, rgba(122, 162, 247, 0.2) 0%, rgba(125, 207, 255, 0.2) 100%); border-color: var(--accent-cyan); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(125, 207, 255, 0.2); } .refresh-btn:active { transform: translateY(0); } /* Table - Modern glass design */ .table-container { flex: 1; overflow: auto; padding: 20px; } .table-container::-webkit-scrollbar { width: 8px; height: 8px; } .table-container::-webkit-scrollbar-track { background: var(--surface-tertiary); border-radius: 4px; } .table-container::-webkit-scrollbar-thumb { background: rgba(122, 162, 247, 0.3); border-radius: 4px; } .table-container::-webkit-scrollbar-thumb:hover { background: rgba(122, 162, 247, 0.5); } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-feature-settings: 'tnum' 1; background: var(--surface-tertiary); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } th { background: linear-gradient(180deg, var(--surface-tertiary) 0%, var(--surface-primary) 100%); padding: 14px 16px; text-align: left; font-weight: var(--font-weight-bold); color: var(--text-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; position: sticky; top: 0; cursor: pointer; user-select: none; transition: all 0.2s ease; border-bottom: 1px solid rgba(122, 162, 247, 0.1); } th:hover { background: linear-gradient(180deg, rgba(122, 162, 247, 0.2) 0%, var(--surface-primary) 100%); color: var(--accent-blue); } th .sort-icon { margin-left: 6px; opacity: 0.5; font-size: 10px; transition: opacity 0.2s ease; } th:hover .sort-icon { opacity: 0.8; } th.sort-asc .sort-icon::after { content: '▲'; opacity: 1; color: var(--accent-blue); } th.sort-desc .sort-icon::after { content: '▼'; opacity: 1; color: var(--accent-blue); } th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: '⇅'; } /* Pagination - Modern design */ .pagination-container { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: linear-gradient(90deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); border-top: 1px solid rgba(122, 162, 247, 0.1); font-size: 12px; } .pagination-info { color: var(--text-secondary); font-weight: 500; } .pagination-controls { display: flex; align-items: center; gap: 8px; } .pagination-btn { padding: 6px 14px; background: var(--bg-hover); border: 1px solid rgba(122, 162, 247, 0.2); border-radius: 8px; color: var(--text-primary); cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.2s ease; } .pagination-btn:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%); border-color: transparent; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(122, 162, 247, 0.3); } .pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; } .page-size-select { padding: 6px 12px; background: var(--surface-input); border: 1px solid rgba(122, 162, 247, 0.2); border-radius: 8px; color: var(--text-primary); font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .page-size-select:hover { border-color: rgba(122, 162, 247, 0.4); } .page-size-select:focus { outline: none; border-color: var(--accent-blue); } td { padding: 12px 16px; border-bottom: 1px solid var(--border-color); transition: all 0.15s ease; } tr { transition: all 0.2s ease; } tr:hover { background: linear-gradient(90deg, rgba(122, 162, 247, 0.08) 0%, rgba(187, 154, 247, 0.05) 100%); } tr:hover td { border-bottom-color: rgba(122, 162, 247, 0.2); } /* Status badges with glow effects */ .status-running, .status-active, .status-ready { color: var(--accent-green); text-shadow: 0 0 10px rgba(158, 206, 106, 0.5); } .status-pending { color: var(--accent-yellow); text-shadow: 0 0 10px rgba(224, 175, 104, 0.5); } .status-failed, .status-error { color: var(--accent-red); text-shadow: 0 0 10px rgba(247, 118, 142, 0.5); } /* Row selection animation */ tr.selected { background: linear-gradient(90deg, rgba(122, 162, 247, 0.15) 0%, rgba(187, 154, 247, 0.1) 100%); box-shadow: inset 3px 0 0 var(--accent-blue); } /* AI Panel - Premium design */ .ai-header { padding: 14px 18px; border-bottom: 1px solid rgba(187, 154, 247, 0.15); display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, rgba(187, 154, 247, 0.08) 0%, rgba(122, 162, 247, 0.05) 100%); } .ai-header-title { font-size: 14px; font-weight: 600; background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ai-badge { background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%); color: white; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: bold; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 8px rgba(187, 154, 247, 0.3); } .ai-status-dot { font-size: 12px; margin-left: 4px; animation: pulse 2s infinite; } .ai-status-dot.connected { color: var(--accent-green); animation: none; text-shadow: 0 0 8px var(--accent-green); } .ai-status-dot.disconnected { color: var(--accent-red); animation: none; text-shadow: 0 0 8px var(--accent-red); } .ai-status-dot.checking { color: var(--accent-yellow); text-shadow: 0 0 8px var(--accent-yellow); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .ai-messages { flex: 1; overflow-y: auto; padding: 18px; background: linear-gradient(180deg, transparent 0%, var(--surface-code) 100%); } .ai-messages::-webkit-scrollbar { width: 6px; } .ai-messages::-webkit-scrollbar-track { background: transparent; } .ai-messages::-webkit-scrollbar-thumb { background: rgba(187, 154, 247, 0.3); border-radius: 3px; } .message { margin-bottom: 18px; animation: messageAppear 0.3s ease-out; } @keyframes messageAppear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .message.user { text-align: right; } .message-content { display: inline-block; padding: 12px 16px; border-radius: 16px; max-width: 90%; font-size: 13px; line-height: 1.6; } .message.user .message-content { background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%); color: white; border-bottom-right-radius: 4px; box-shadow: 0 4px 15px rgba(122, 162, 247, 0.3); } .message.assistant .message-content { background: var(--surface-tertiary); border: 1px solid rgba(187, 154, 247, 0.1); border-bottom-left-radius: 4px; backdrop-filter: blur(5px); } .message-content pre { background: var(--surface-input); padding: 12px; border-radius: 8px; margin-top: 10px; overflow-x: auto; font-size: 12px; border: 1px solid rgba(122, 162, 247, 0.1); } .message-content .resource-link { color: var(--accent-cyan); text-decoration: none; background: rgba(125, 211, 252, 0.1); padding: 1px 4px; border-radius: 3px; cursor: pointer; transition: all 0.2s ease; } .message-content .resource-link:hover { background: rgba(125, 211, 252, 0.25); text-decoration: underline; } .ai-input-container { padding: 18px; border-top: 1px solid rgba(187, 154, 247, 0.15); background: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); } /* Expanded fullscreen overrides */ .ai-panel.expanded .ai-input-container { height: 30vh; padding: 30px 40px; display: flex; flex-direction: column; width: 100% !important; max-width: none !important; box-sizing: border-box; } .ai-panel.expanded .ai-input { flex: 1; width: 100% !important; font-size: 16px; line-height: 1.6; padding: 20px; resize: none; box-sizing: border-box; } .ai-panel.expanded .context-chips { width: 100% !important; padding: 16px 24px; min-height: 60px; box-sizing: border-box; } .ai-input { width: 100%; background: var(--surface-input); border: 1px solid rgba(187, 154, 247, 0.2); border-radius: 12px; padding: 14px 16px; color: var(--text-primary); font-family: inherit; font-size: 13px; resize: none; transition: all 0.2s ease; } .ai-input:focus { outline: none; border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(187, 154, 247, 0.1), 0 0 20px rgba(187, 154, 247, 0.1); background: var(--surface-input-solid); } .ai-input::placeholder { color: var(--text-secondary); opacity: 0.7; } .ai-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } .ai-hint { font-size: 11px; color: var(--text-secondary); opacity: 0.8; } .send-btn { background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%); color: white; border: none; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13px; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(187, 154, 247, 0.3); } .send-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(187, 154, 247, 0.4); } .send-btn:active:not(:disabled) { transform: translateY(0); } .send-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* Tabs - Modern pill design */ .tabs { display: flex; gap: 6px; padding: 12px 20px; background: linear-gradient(90deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); border-bottom: 1px solid rgba(122, 162, 247, 0.1); } .tab { padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all 0.2s ease; border: 1px solid transparent; } .tab:hover { background: rgba(122, 162, 247, 0.1); color: var(--text-primary); } .tab.active { background: linear-gradient(135deg, rgba(122, 162, 247, 0.15) 0%, rgba(125, 207, 255, 0.1) 100%); color: var(--accent-blue); border-color: rgba(122, 162, 247, 0.3); box-shadow: 0 2px 10px rgba(122, 162, 247, 0.1); } /* Settings Modal - Premium glass design */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); justify-content: center; align-items: center; z-index: 1000; } .modal-overlay.active { display: flex; animation: modalOverlayAppear 0.2s ease-out; } @keyframes modalOverlayAppear { from { opacity: 0; } to { opacity: 1; } } .modal { background: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); border-radius: 16px; border: 1px solid rgba(122, 162, 247, 0.2); width: 100%; max-width: 600px; max-height: 80vh; overflow: auto; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(122, 162, 247, 0.1); animation: modalAppear 0.3s ease-out; } @keyframes modalAppear { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(122, 162, 247, 0.15); background: linear-gradient(90deg, rgba(122, 162, 247, 0.05) 0%, transparent 100%); } .modal-header h2 { font-size: 18px; font-weight: 600; background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .modal-close { background: rgba(247, 118, 142, 0.1); border: 1px solid rgba(247, 118, 142, 0.2); color: var(--accent-red); width: 32px; height: 32px; border-radius: 8px; font-size: 18px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: rgba(247, 118, 142, 0.2); transform: scale(1.05); } .modal-body { padding: 24px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); } .form-group input, .form-group select { width: 100%; padding: 12px 14px; background: var(--surface-input); border: 1px solid rgba(122, 162, 247, 0.2); border-radius: 10px; color: var(--text-primary); font-family: inherit; font-size: 14px; transition: all 0.2s ease; } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1); background: var(--surface-input-solid); } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 24px; border-top: 1px solid rgba(122, 162, 247, 0.15); background: linear-gradient(90deg, transparent 0%, rgba(122, 162, 247, 0.03) 100%); } .btn { padding: 10px 20px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; transition: all 0.2s ease; } .btn-primary { background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%); color: white; border: none; box-shadow: 0 4px 15px rgba(122, 162, 247, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(122, 162, 247, 0.4); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid rgba(122, 162, 247, 0.3); } .btn-secondary:hover { background: rgba(122, 162, 247, 0.1); border-color: var(--accent-blue); } /* Add button with + icon */ .btn-add { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px dashed var(--border-color); border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 13px; transition: all 0.2s; } .btn-add:hover { background: var(--accent-blue); color: var(--bg-primary); border-style: solid; border-color: var(--accent-blue); } .btn-add .plus-icon { font-size: 16px; font-weight: bold; line-height: 1; } /* Loading */ .loading-dots { display: flex; gap: 4px; } .loading-dots span { width: 6px; height: 6px; background: var(--accent-blue); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; } .loading-dots span:nth-child(1) { animation-delay: -0.32s; } .loading-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* Health Indicator - With glow effects */ .health-indicator { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; } .health-dot { width: 10px; height: 10px; border-radius: 50%; position: relative; } .health-dot::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; animation: healthPulse 2s ease-in-out infinite; } @keyframes healthPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.2; transform: scale(1.3); } } .health-dot.ok { background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); } .health-dot.ok::after { background: var(--accent-green); } .health-dot.warning { background: var(--accent-yellow); box-shadow: 0 0 10px var(--accent-yellow); } .health-dot.warning::after { background: var(--accent-yellow); } .health-dot.error { background: var(--accent-red); box-shadow: 0 0 10px var(--accent-red); } .health-dot.error::after { background: var(--accent-red); } /* Decision Required Modal */ .approval-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; } .approval-box { background: var(--bg-secondary); border: 2px solid var(--accent-yellow); border-radius: 12px; padding: 24px; max-width: 500px; width: 90%; animation: slideIn 0.2s ease-out; } .approval-box.dangerous { border-color: var(--accent-red); } @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .approval-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .approval-icon { font-size: 32px; } .approval-title { font-size: 18px; font-weight: bold; color: var(--accent-yellow); } .approval-box.dangerous .approval-title { color: var(--accent-red); } .approval-command { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; padding: 12px; font-family: monospace; font-size: 13px; margin: 16px 0; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } .approval-category { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; text-transform: uppercase; margin-bottom: 12px; } .approval-category.write { background: var(--accent-yellow); color: var(--bg-primary); } .approval-category.dangerous { background: var(--accent-red); color: white; } .approval-buttons { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; } .approval-buttons button { padding: 10px 24px; border-radius: 6px; font-weight: bold; cursor: pointer; border: none; transition: all 0.2s; } .btn-approve { background: var(--accent-green); color: var(--bg-primary); } .btn-approve:hover { filter: brightness(1.1); } .btn-reject { background: var(--accent-red); color: white; } .btn-reject:hover { filter: brightness(1.1); } /* Tool Execution Indicator */ .tool-execution { background: var(--bg-tertiary); border-left: 3px solid var(--accent-cyan); padding: 12px; margin: 8px 0; border-radius: 0 4px 4px 0; font-size: 13px; } .tool-execution .tool-name { color: var(--accent-cyan); font-weight: bold; font-size: 12px; } .tool-execution .tool-command { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; color: var(--accent-green); margin-top: 4px; } .tool-execution .tool-result-preview, .tool-execution .tool-result-full { border: 1px solid var(--bg-tertiary); } .tool-execution button:hover { background: var(--accent-blue) !important; color: white !important; } /* Global Search */ .search-container { position: relative; margin-right: 16px; } .global-search { width: 300px; padding: 8px 12px 8px 36px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-family: inherit; font-size: 13px; } .global-search:focus { outline: none; border-color: var(--accent-blue); } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 14px; } .search-shortcut { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 11px; color: var(--text-secondary); } /* Global Search Results Dropdown */ .search-results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; max-height: 400px; overflow-y: auto; z-index: 1000; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .search-results:empty { display: none; } .search-result-item { display: flex; align-items: center; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border-color); gap: 12px; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: var(--bg-tertiary); } .search-result-kind { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--accent-blue); color: white; min-width: 70px; text-align: center; } .search-result-kind.pod { background: var(--accent-green); } .search-result-kind.deployment { background: var(--accent-blue); } .search-result-kind.service { background: var(--accent-purple); } .search-result-kind.configmap { background: var(--accent-yellow); color: var(--text-on-accent); } .search-result-kind.secret { background: var(--accent-red); } .search-result-kind.node { background: var(--accent-cyan); color: var(--text-on-accent); } .search-result-kind.namespace { background: var(--text-secondary); } .search-result-kind.statefulset { background: #f7768e; } .search-result-kind.daemonset { background: #ff9e64; color: var(--text-on-accent); } .search-result-kind.ingress { background: #9ece6a; color: var(--text-on-accent); } .search-result-info { flex: 1; min-width: 0; } .search-result-name { font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-namespace { font-size: 11px; color: var(--text-secondary); } .search-result-status { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--bg-primary); } .search-result-status.running, .search-result-status.ready, .search-result-status.active { color: var(--accent-green); } .search-result-status.pending, .search-result-status.updating { color: var(--accent-yellow); } .search-result-status.failed, .search-result-status.notready { color: var(--accent-red); } .search-no-results { padding: 16px; text-align: center; color: var(--text-secondary); font-size: 13px; } .search-loading { padding: 16px; text-align: center; color: var(--text-secondary); } /* Resource Filter */ .filter-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); } .filter-input { flex: 1; max-width: 300px; padding: 6px 12px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-family: inherit; font-size: 12px; } .filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--accent-blue); color: var(--bg-primary); border-radius: 12px; font-size: 11px; cursor: pointer; } .filter-chip .remove { opacity: 0.7; font-size: 14px; } .filter-chip .remove:hover { opacity: 1; } /* Column Filter Row */ .column-filter-row { display: none; } .column-filter-row.active { display: table-row; } .column-filter-row th { padding: 4px 8px; background: var(--bg-secondary); border-bottom: 2px solid var(--accent-blue); } .column-filter-input { width: 100%; padding: 4px 6px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 3px; color: var(--text-primary); font-family: inherit; font-size: 11px; } .column-filter-input:focus { border-color: var(--accent-blue); outline: none; } .column-filter-input::placeholder { color: var(--text-secondary); opacity: 0.6; } /* Column filter toggle button */ .filter-toggle-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-secondary); font-size: 11px; cursor: pointer; transition: all 0.2s; } .filter-toggle-btn:hover { background: var(--bg-primary); color: var(--text-primary); } .filter-toggle-btn.active { background: var(--accent-blue); color: var(--bg-primary); border-color: var(--accent-blue); } /* Active column filters display */ .active-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; } .column-filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--accent-purple); color: white; border-radius: 10px; font-size: 10px; } .column-filter-chip .col-name { opacity: 0.8; } .column-filter-chip .remove-col-filter { cursor: pointer; opacity: 0.7; font-size: 12px; } .column-filter-chip .remove-col-filter:hover { opacity: 1; } /* Resource Detail Modal */ .detail-modal { max-width: 900px; max-height: 90vh; } .detail-tabs { display: flex; gap: 4px; padding: 12px 20px; border-bottom: 1px solid var(--border-color); } .detail-tab { padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-secondary); border: none; background: transparent; } .detail-tab:hover { background: var(--bg-tertiary); } .detail-tab.active { background: var(--accent-blue); color: var(--bg-primary); } .detail-content { padding: 20px; max-height: 60vh; overflow-y: auto; } .yaml-viewer { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; padding: 16px; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; } .property-grid { display: grid; grid-template-columns: 150px 1fr; gap: 8px; } .property-label { color: var(--text-secondary); font-size: 12px; } .property-value { font-size: 12px; } /* Resource Overview Styles */ .resource-overview-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .overview-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; } .overview-status-badge .status-dot { width: 8px; height: 8px; border-radius: 50%; } .overview-roles { display: flex; gap: 6px; flex-wrap: wrap; } .role-badge { padding: 3px 8px; background: var(--bg-tertiary); border-radius: 4px; font-size: 11px; color: var(--text-secondary); } .overview-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } @media (max-width: 768px) { .overview-cards { grid-template-columns: 1fr; } } .overview-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; } .overview-card-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .overview-card-content { display: flex; flex-direction: column; gap: 8px; } .overview-stat { display: flex; justify-content: space-between; align-items: center; } .overview-stat .stat-label { font-size: 12px; color: var(--text-secondary); } .overview-stat .stat-value { font-size: 13px; color: var(--text-primary); font-weight: 500; } .overview-progress { width: 100%; height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; } .overview-progress .progress-bar { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .image-tag { font-family: monospace; font-size: 11px; padding: 6px 8px; background: var(--bg-tertiary); border-radius: 4px; word-break: break-all; color: var(--accent-blue); } .ports-list { font-family: monospace; font-size: 12px; padding: 6px 8px; background: var(--bg-tertiary); border-radius: 4px; color: var(--text-primary); } .overview-actions { display: flex; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border-color); } /* Keyboard shortcuts modal */ .shortcuts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .shortcut-item { display: flex; justify-content: space-between; align-items: center; padding: 8px; background: var(--bg-primary); border-radius: 4px; } .shortcut-key { background: var(--bg-tertiary); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; } /* Table row clickable */ tbody tr { cursor: pointer; } tbody tr:hover { background: var(--bg-tertiary); } /* Context switcher */ .context-switcher { display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--bg-tertiary); border-radius: 4px; font-size: 12px; } .context-icon { color: var(--accent-green); } /* Action buttons */ .action-btn { padding: 4px 8px; background: var(--bg-tertiary); border: none; border-radius: 4px; color: var(--text-primary); cursor: pointer; font-size: 11px; } .action-btn:hover { background: var(--accent-blue); color: var(--bg-primary); } .action-btn.danger:hover { background: var(--accent-red); } /* Sidebar collapsed state */ .sidebar.collapsed { width: 0; min-width: 0; padding: 0; overflow: hidden; } .sidebar-transition { transition: width 0.3s ease, min-width 0.3s ease, padding 0.3s ease; } /* Token login styles */ .login-tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); } .login-tab { flex: 1; padding: 12px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-family: inherit; font-size: 14px; transition: all 0.2s; outline: none; } .login-tab.active { color: var(--accent-blue); border-bottom: 2px solid var(--accent-blue); background: transparent; } .login-tab:hover { background: var(--bg-tertiary); color: var(--text-primary); } .login-tab:focus { background: var(--bg-tertiary); color: var(--accent-blue); box-shadow: inset 0 0 0 2px var(--accent-blue); } .login-tab.active:focus { background: rgba(122, 162, 247, 0.1); color: var(--accent-blue); } .login-form { display: none; } .login-form.active { display: block; } .login-form input[type="text"], .login-form input[type="password"] { width: 100%; padding: 12px; margin-bottom: 12px; background: var(--bg-primary) !important; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary) !important; font-size: 14px; -webkit-text-fill-color: var(--text-primary) !important; } .login-form input[type="text"]:focus, .login-form input[type="password"]:focus { outline: none; border-color: var(--accent-blue); background: var(--bg-primary) !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; } /* Override browser autofill styles */ .login-form input:-webkit-autofill, .login-form input:-webkit-autofill:hover, .login-form input:-webkit-autofill:focus, .login-form input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--bg-primary) inset !important; -webkit-text-fill-color: var(--text-primary) !important; background-color: var(--bg-primary) !important; color: var(--text-primary) !important; caret-color: var(--text-primary) !important; } .login-form input::placeholder { color: var(--text-secondary); } .token-input { width: 100%; height: 120px; padding: 12px; margin-bottom: 16px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-family: 'SF Mono', monospace; font-size: 12px; resize: vertical; } .token-hint { font-size: 11px; color: var(--text-secondary); margin-bottom: 16px; padding: 8px; background: var(--bg-tertiary); border-radius: 4px; } .token-hint code { display: block; margin-top: 8px; padding: 8px; background: var(--bg-primary); border-radius: 4px; font-size: 11px; word-break: break-all; } /* Add to context button */ .add-context-btn { padding: 2px 5px; background: var(--accent-purple); border: none; border-radius: 3px; color: var(--bg-primary); cursor: pointer; font-size: 9px; margin-left: 2px; vertical-align: middle; } .add-context-btn:hover { opacity: 0.9; } /* Context chips in AI panel */ .context-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--border-color); min-height: 40px; } .context-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--accent-purple); color: var(--bg-primary); border-radius: 12px; font-size: 11px; } .context-chip .remove { cursor: pointer; opacity: 0.7; } .context-chip .remove:hover { opacity: 1; } /* Debug panel styles */ .debug-panel { display: none; border-top: 1px solid var(--border-color); background: var(--bg-primary); max-height: 200px; overflow-y: auto; } .debug-panel.active { display: block; } .debug-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--bg-tertiary); font-size: 11px; font-weight: bold; } .debug-toggle { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 10px; } .debug-content { padding: 8px 12px; font-size: 11px; font-family: 'SF Mono', monospace; } .debug-entry { margin-bottom: 8px; padding: 8px; background: var(--bg-secondary); border-radius: 4px; border-left: 3px solid var(--accent-blue); } .debug-entry.request { border-left-color: var(--accent-yellow); } .debug-entry.response { border-left-color: var(--accent-green); } .debug-entry.error { border-left-color: var(--accent-red); } .debug-entry-header { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--text-secondary); } .debug-entry-body { white-space: pre-wrap; word-break: break-all; max-height: 100px; overflow-y: auto; } /* SSE Streaming styles */ .message.streaming .message-content { border-left: 2px solid var(--accent-blue); padding-left: 12px; } .message.streaming .cursor { display: inline-block; animation: blink 0.7s infinite; color: var(--accent-blue); font-weight: bold; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Auto-refresh indicator */ .auto-refresh-container { display: flex; align-items: center; gap: 8px; margin-left: 16px; padding: 4px 12px; background: var(--bg-tertiary); border-radius: 4px; font-size: 12px; } .auto-refresh-toggle { position: relative; width: 36px; height: 20px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; } .auto-refresh-toggle.active { background: var(--accent-green); border-color: var(--accent-green); } .auto-refresh-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--text-primary); border-radius: 50%; transition: all 0.2s ease; } .auto-refresh-toggle.active::after { left: 18px; background: white; } .refresh-interval-select { padding: 2px 6px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: 11px; cursor: pointer; } .last-refresh-time { color: var(--text-secondary); font-size: 11px; } .refresh-btn { padding: 4px 8px; background: transparent; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); cursor: pointer; font-size: 12px; transition: all 0.2s; } .refresh-btn:hover { background: var(--accent-blue); border-color: var(--accent-blue); color: white; } .refresh-btn.spinning svg { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Settings panel styles */ .settings-section { margin-bottom: 20px; } .settings-section h4 { margin-bottom: 12px; color: var(--text-primary); font-size: 14px; } .settings-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-color); } .settings-row:last-child { border-bottom: none; } .settings-label { color: var(--text-primary); font-size: 13px; } .settings-description { color: var(--text-secondary); font-size: 11px; margin-top: 2px; } /* About page styles */ .about-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .about-logo { font-size: 48px; color: var(--accent-blue); text-shadow: 0 0 20px rgba(122, 162, 247, 0.4); } .about-title h2 { margin: 0; font-size: 28px; font-weight: 700; background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .about-tagline { margin: 4px 0 0 0; color: var(--text-secondary); font-size: 14px; } .about-version-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; margin-bottom: 20px; } .about-version-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-color); } .about-version-row:last-child { border-bottom: none; } .about-label { color: var(--text-secondary); font-size: 12px; } .about-value { color: var(--text-primary); font-size: 13px; font-weight: 500; } .about-mono { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; color: var(--accent-blue); } .about-description { margin-bottom: 20px; line-height: 1.6; color: var(--text-secondary); font-size: 13px; } .about-description strong { color: var(--text-primary); } .about-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; } .about-feature { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; } .about-feature-icon { font-size: 20px; } .about-feature strong { display: block; color: var(--text-primary); font-size: 12px; margin-bottom: 2px; } .about-feature p { margin: 0; color: var(--text-secondary); font-size: 11px; } .about-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .about-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 12px; text-decoration: none; transition: all 0.2s ease; } .about-link:hover { border-color: var(--accent-blue); background: rgba(122, 162, 247, 0.1); } .about-footer { text-align: center; padding-top: 16px; border-top: 1px solid var(--border-color); } .about-footer p { margin: 0; color: var(--text-secondary); font-size: 12px; } .about-license { margin-top: 4px !important; font-size: 11px !important; color: var(--text-muted) !important; } /* Settings select boxes - dark theme */ .settings-row select, .settings-section select { background: var(--surface-secondary); border: 1px solid rgba(122, 162, 247, 0.2); border-radius: 8px; padding: 8px 12px; color: var(--text-primary); font-family: inherit; font-size: 13px; cursor: pointer; transition: all 0.2s ease; min-width: 140px; } .settings-row select:hover, .settings-section select:hover { border-color: rgba(122, 162, 247, 0.4); background: var(--surface-input-solid); } .settings-row select:focus, .settings-section select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1); } /* Style select options for dark theme */ .settings-row select option, .settings-section select option { background: var(--bg-secondary); color: var(--text-primary); padding: 8px; } /* ========================================== * Terminal Modal Styles * ========================================== */ .terminal-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); display: none; z-index: 2000; padding: 20px; } .terminal-modal.active { display: flex; flex-direction: column; } .terminal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-secondary); border-radius: 8px 8px 0 0; border: 1px solid var(--border-color); border-bottom: none; } .terminal-title { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .terminal-title .pod-name { color: var(--accent-green); } .terminal-title .container-name { color: var(--accent-cyan); font-size: 12px; } .terminal-close { background: var(--accent-red); border: none; color: white; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; } .terminal-body { flex: 1; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 0 0 8px 8px; overflow: hidden; min-height: 400px; } .terminal-body .xterm { padding: 8px; height: 100%; } /* ========================================== * Log Viewer Styles * ========================================== */ .log-viewer-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); display: none; z-index: 2000; padding: 20px; } .log-viewer-modal.active { display: flex; flex-direction: column; } .log-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-secondary); border-radius: 8px 8px 0 0; border: 1px solid var(--border-color); border-bottom: none; } .log-controls { display: flex; gap: 8px; align-items: center; } .log-controls select, .log-controls input { padding: 4px 8px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: 12px; } .log-controls button { padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); } .log-controls button.active { background: var(--accent-blue); color: white; border-color: var(--accent-blue); } .log-body { flex: 1; background: var(--bg-deep); border: 1px solid var(--border-color); border-radius: 0 0 8px 8px; overflow: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; padding: 0; min-height: 400px; counter-reset: log-line-number; } .log-line { display: flex; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--border-color); transition: background 0.15s ease; counter-increment: log-line-number; } .log-line:hover { background: rgba(122, 162, 247, 0.08); } .log-line:nth-child(even) { background: var(--surface-tertiary); } .log-line:nth-child(even):hover { background: rgba(122, 162, 247, 0.12); } .log-line::before { content: counter(log-line-number); min-width: 50px; padding: 0 12px; text-align: right; color: rgba(169, 177, 214, 0.4); font-size: 11px; border-right: 1px solid var(--border-color); margin-right: 12px; user-select: none; flex-shrink: 0; } .log-line-content { white-space: pre-wrap; word-break: break-all; flex: 1; } .log-line .timestamp { color: var(--accent-cyan); margin-right: 8px; opacity: 0.8; } .log-line.error { background: rgba(247, 118, 142, 0.1); border-left: 3px solid var(--accent-red); } .log-line.error:hover { background: rgba(247, 118, 142, 0.18); } .log-line.error .log-line-content { color: var(--accent-red); } .log-line.warn { background: rgba(224, 175, 104, 0.08); border-left: 3px solid var(--accent-yellow); } .log-line.warn:hover { background: rgba(224, 175, 104, 0.15); } .log-line.warn .log-line-content { color: var(--accent-yellow); } /* Multi-pod log colors (k9s style) */ .log-pod-tag { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; margin-right: 8px; white-space: nowrap; flex-shrink: 0; } .log-pod-0 .log-pod-tag { background: rgba(122, 162, 247, 0.3); color: #7aa2f7; } .log-pod-1 .log-pod-tag { background: rgba(158, 206, 106, 0.3); color: #9ece6a; } .log-pod-2 .log-pod-tag { background: rgba(224, 175, 104, 0.3); color: #e0af68; } .log-pod-3 .log-pod-tag { background: rgba(187, 154, 247, 0.3); color: #bb9af7; } .log-pod-4 .log-pod-tag { background: rgba(125, 207, 255, 0.3); color: #7dcfff; } .log-pod-5 .log-pod-tag { background: rgba(247, 118, 142, 0.3); color: #f7768e; } .log-pod-6 .log-pod-tag { background: rgba(115, 218, 202, 0.3); color: #73daca; } .log-pod-7 .log-pod-tag { background: rgba(255, 158, 100, 0.3); color: #ff9e64; } .log-pod-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px; background: var(--bg-tertiary); border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } .log-pod-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: opacity 0.2s; } .log-pod-legend-item:hover { background: rgba(255, 255, 255, 0.05); } .log-pod-legend-item.hidden { opacity: 0.4; } .log-pod-legend-dot { width: 8px; height: 8px; border-radius: 50%; } .log-pod-0 .log-pod-legend-dot, .legend-pod-0 { background: #7aa2f7; } .log-pod-1 .log-pod-legend-dot, .legend-pod-1 { background: #9ece6a; } .log-pod-2 .log-pod-legend-dot, .legend-pod-2 { background: #e0af68; } .log-pod-3 .log-pod-legend-dot, .legend-pod-3 { background: #bb9af7; } .log-pod-4 .log-pod-legend-dot, .legend-pod-4 { background: #7dcfff; } .log-pod-5 .log-pod-legend-dot, .legend-pod-5 { background: #f7768e; } .log-pod-6 .log-pod-legend-dot, .legend-pod-6 { background: #73daca; } .log-pod-7 .log-pod-legend-dot, .legend-pod-7 { background: #ff9e64; } .log-search { padding: 8px 16px; background: var(--bg-tertiary); border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); display: flex; gap: 8px; align-items: center; } .log-search input { flex: 1; padding: 6px 12px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: 12px; } .log-search .match-count { font-size: 11px; color: var(--text-secondary); } /* ========================================== * Topology View Styles * ========================================== */ #topology-container { display: none; flex: 1; min-width: 0; height: 100%; flex-direction: column; background: var(--bg-primary); position: relative; } #topology-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } #topology-toolbar select, #topology-toolbar input[type="text"] { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 6px 10px; font-size: 12px; font-family: var(--font-sans); } #topology-toolbar input[type="text"] { width: 200px; } #topology-toolbar button { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: var(--font-sans); transition: background 0.2s; } #topology-toolbar button:hover { background: var(--accent-blue); color: #fff; } #topology-toolbar label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); cursor: pointer; } #topology-toolbar .toolbar-separator { width: 1px; height: 20px; background: var(--border-color); margin: 0 4px; } #topology-graph { width: 100%; flex: 1; min-height: 0; } #topology-detail { display: none; position: absolute; top: 0; right: 0; width: 320px; height: 100%; background: var(--bg-secondary); border-left: 1px solid var(--border-color); z-index: 10; overflow-y: auto; box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3); } #topology-detail.active { display: block; } .topology-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-color); background: var(--bg-tertiary); } .topology-detail-header h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; } .topology-detail-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 18px; padding: 0 4px; } .topology-detail-body { padding: 16px; } .topology-detail-field { margin-bottom: 12px; } .topology-detail-field .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 4px; } .topology-detail-field .value { font-size: 13px; color: var(--text-primary); font-family: var(--font-mono); } .topology-detail-actions { padding: 16px; border-top: 1px solid var(--border-color); } .topology-detail-actions button { width: 100%; padding: 8px 12px; background: var(--accent-blue); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-family: var(--font-sans); } .topology-detail-actions button:hover { opacity: 0.9; } .topology-status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; } .topology-status-badge.running { background: rgba(158, 206, 106, 0.2); color: var(--accent-green); } .topology-status-badge.pending { background: rgba(224, 175, 104, 0.2); color: var(--accent-yellow); } .topology-status-badge.failed { background: rgba(247, 118, 142, 0.2); color: var(--accent-red); } .topology-status-badge.succeeded { background: rgba(122, 162, 247, 0.2); color: var(--accent-blue); } .topology-status-badge.unknown { background: rgba(169, 177, 214, 0.2); color: var(--text-secondary); } .topology-legend { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 11px; color: var(--text-secondary); } .topology-legend-item { display: flex; align-items: center; gap: 4px; } .topology-legend-dot { width: 8px; height: 8px; border-radius: 50%; } /* ========================================== * Metrics Modal Styles * ========================================== */ .metrics-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); display: none; z-index: 2000; padding: 20px; } .metrics-modal.active { display: flex; flex-direction: column; } .metrics-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-secondary); border-radius: 8px 8px 0 0; border: 1px solid var(--border-color); border-bottom: none; } .metrics-body { flex: 1; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 0 0 8px 8px; overflow: auto; padding: 20px; } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .metric-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; } .metric-card h4 { margin-bottom: 12px; font-size: 14px; color: var(--text-secondary); } .metric-value { font-size: 32px; font-weight: bold; color: var(--accent-blue); } .metric-unit { font-size: 14px; color: var(--text-secondary); margin-left: 4px; } .metric-chart { height: 200px; margin-top: 12px; } .metrics-summary { display: flex; gap: 20px; margin-bottom: 20px; } .summary-card { flex: 1; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; text-align: center; } .summary-card .label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; } .summary-card .value { font-size: 24px; font-weight: bold; } .summary-card .value.cpu { color: var(--accent-cyan); } .summary-card .value.memory { color: var(--accent-purple); } .summary-card .value.pods { color: var(--accent-green); } .summary-card .value.llm { color: var(--accent-yellow); } /* Metrics Dashboard Grid - New Design */ .metrics-dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } @media (max-width: 1200px) { .metrics-dashboard-grid { grid-template-columns: repeat(2, 1fr); } } .metrics-stat-card { background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary)); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .metrics-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); } .metrics-stat-card::before { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: var(--accent-blue); opacity: 0.08; border-radius: 0 12px 0 100%; } .metrics-stat-card .stat-icon { font-size: 24px; margin-bottom: 8px; } .metrics-stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); } .metrics-stat-card .stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .metrics-stat-card .stat-trend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; } .metrics-stat-card .stat-trend.up { color: var(--accent-green); } .metrics-stat-card .stat-trend.down { color: var(--accent-red); } .metrics-stat-card .stat-trend.neutral { color: var(--text-secondary); } /* Node Health Grid */ .node-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; max-height: 180px; overflow-y: auto; } .node-health-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; transition: border-color 0.2s; } .node-health-card:hover { border-color: var(--accent-blue); } .node-health-card .node-name { font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; } .node-health-card .node-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .node-health-card .node-status.healthy { background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); } .node-health-card .node-status.warning { background: var(--accent-yellow); box-shadow: 0 0 8px var(--accent-yellow); } .node-health-card .node-status.critical { background: var(--accent-red); box-shadow: 0 0 8px var(--accent-red); } .usage-bar-container { margin-top: 6px; } .usage-bar-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); margin-bottom: 3px; } .usage-bar { height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; } .usage-bar .fill { height: 100%; transition: width 0.5s ease; border-radius: 3px; } .usage-bar .fill.cpu { background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue)); } .usage-bar .fill.memory { background: linear-gradient(90deg, var(--accent-purple), #e879f9); } .usage-bar .fill.high { background: linear-gradient(90deg, var(--accent-yellow), var(--accent-red)); } /* Prometheus Status Indicator */ .prometheus-status { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg-primary); border-radius: 20px; font-size: 11px; color: var(--text-secondary); margin-left: 12px; } .prometheus-status .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); } .prometheus-status.connected .status-dot { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); } .prometheus-status.disconnected .status-dot { background: var(--text-secondary); } /* Auto refresh control */ .auto-refresh-control { display: flex; align-items: center; gap: 4px; margin-right: 8px; } .auto-refresh-control input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; } /* Time Range Selector */ .time-range-selector { display: flex; gap: 4px; margin-right: 12px; } .time-range-btn { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 12px; transition: all 0.2s; } .time-range-btn:hover { background: var(--bg-secondary); border-color: var(--accent-blue); } .time-range-btn.active { background: var(--accent-blue); border-color: var(--accent-blue); color: #ffffff; } /* LLM Usage Widget */ .llm-usage-widget { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; } .llm-usage-widget h4 { margin-bottom: 12px; font-size: 14px; color: var(--text-secondary); } .llm-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; } .llm-stat { text-align: center; padding: 8px; background: var(--bg-secondary); border-radius: 4px; } .llm-stat .label { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; } .llm-stat .value { font-size: 18px; font-weight: bold; color: var(--accent-yellow); } .llm-stat .value.tokens { color: var(--accent-green); } .llm-stat .value.cost { color: var(--accent-red); } /* ========================================== * Port Forward Modal Styles * ========================================== */ .portforward-modal { max-width: 600px; } .portforward-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .portforward-form .full-width { grid-column: 1 / -1; } .portforward-list { max-height: 300px; overflow-y: auto; } .portforward-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 8px; } .portforward-item .info { display: flex; flex-direction: column; gap: 4px; } .portforward-item .ports { font-size: 14px; font-weight: 500; } .portforward-item .target { font-size: 11px; color: var(--text-secondary); } .portforward-item .status { display: flex; align-items: center; gap: 8px; } .portforward-item .status-dot { width: 8px; height: 8px; border-radius: 50%; } .portforward-item .status-dot.active { background: var(--accent-green); } .portforward-item .status-dot.stopped { background: var(--accent-red); } .portforward-item button { padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 11px; border: none; background: var(--accent-red); color: white; } /* ========================================== * Resource Action Buttons * ========================================== */ .resource-actions { display: flex; gap: 4px; } .resource-action-btn { padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 10px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); white-space: nowrap; } .resource-action-btn:hover { background: var(--accent-blue); color: white; border-color: var(--accent-blue); } .resource-action-btn.terminal { border-color: var(--accent-green); } .resource-action-btn.terminal:hover { background: var(--accent-green); } .resource-action-btn.logs { border-color: var(--accent-cyan); } .resource-action-btn.logs:hover { background: var(--accent-cyan); } .resource-action-btn.portforward { border-color: var(--accent-purple); } .resource-action-btn.portforward:hover { background: var(--accent-purple); } .resource-action-btn.topo { border-color: var(--accent-yellow); } .resource-action-btn.topo:hover { background: var(--accent-yellow); color: var(--text-on-accent); } /* ========================================== * AI Action Highlight * ========================================== */ .ai-highlight { animation: aiHighlight 2s ease-out; } @keyframes aiHighlight { 0% { background: var(--accent-purple); } 100% { background: transparent; } } .ai-action-toast { position: fixed; bottom: 20px; right: 20px; background: var(--accent-purple); color: white; padding: 12px 20px; border-radius: 8px; font-size: 13px; z-index: 3000; animation: slideInUp 0.3s ease-out; } @keyframes slideInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeInOut { 0% { opacity: 0; transform: translateX(-50%) translateY(-10px); } 15% { opacity: 1; transform: translateX(-50%) translateY(0); } 85% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); } } /* Command Bar (TUI-style : command mode) */ .command-bar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 5000; display: none; align-items: flex-start; justify-content: center; padding-top: 20vh; } .command-bar-overlay.active { display: flex; } .command-bar { background: var(--bg-secondary); border: 1px solid var(--accent-blue); border-radius: 8px; width: 500px; max-width: 90vw; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); overflow: hidden; } .command-input-wrapper { display: flex; align-items: center; padding: 12px 16px; background: var(--bg-primary); border-bottom: 1px solid var(--border-color); } .command-prefix { color: var(--accent-blue); font-family: var(--font-mono); font-size: 16px; font-weight: 600; margin-right: 4px; } .command-input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-family: var(--font-mono); font-size: 16px; outline: none; } .command-input::placeholder { color: var(--text-secondary); opacity: 0.5; } .command-suggestions { max-height: 300px; overflow-y: auto; } .command-suggestion { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; cursor: pointer; transition: background 0.15s ease; } .command-suggestion:hover, .command-suggestion.selected { background: var(--bg-tertiary); } .command-suggestion.selected { border-left: 2px solid var(--accent-blue); } .command-suggestion-name { font-family: var(--font-mono); color: var(--text-primary); font-size: 14px; } .command-suggestion-desc { color: var(--text-secondary); font-size: 12px; } .command-suggestion-shortcut { background: var(--bg-primary); padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); } .command-hint { padding: 8px 16px; font-size: 11px; color: var(--text-secondary); border-top: 1px solid var(--border-color); display: flex; gap: 16px; } .command-hint kbd { background: var(--bg-primary); padding: 2px 6px; border-radius: 3px; font-family: var(--font-mono); font-size: 10px; } /* Namespace quick switcher */ .namespace-indicator { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--bg-secondary); border: 1px solid var(--accent-purple); border-radius: 8px; padding: 12px 20px; display: none; align-items: center; gap: 16px; z-index: 4000; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .namespace-indicator.active { display: flex; animation: slideInUp 0.2s ease-out; } .namespace-key { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.15s ease; } .namespace-key:hover { background: var(--bg-tertiary); } .namespace-key.current { background: var(--accent-purple); color: white; } .namespace-key-num { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--accent-purple); } .namespace-key.current .namespace-key-num { color: white; } .namespace-key-name { font-size: 10px; color: var(--text-secondary); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .namespace-key.current .namespace-key-name { color: rgba(255, 255, 255, 0.8); } /* YAML Editor Modal */ .yaml-editor-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 6000; display: none; align-items: center; justify-content: center; } .yaml-editor-modal.active { display: flex; } .yaml-editor-container { background: var(--bg-secondary); border-radius: 12px; width: 90vw; max-width: 1200px; height: 85vh; display: flex; flex-direction: column; box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5); overflow: hidden; } .yaml-editor-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg-primary); border-bottom: 1px solid var(--border-color); } .yaml-editor-title { display: flex; align-items: center; gap: 12px; } .yaml-editor-title h3 { margin: 0; font-size: 16px; color: var(--text-primary); } .yaml-editor-badge { background: var(--accent-blue); color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; } .yaml-editor-actions { display: flex; gap: 8px; } .yaml-editor-btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; transition: all 0.2s ease; } .yaml-editor-btn.primary { background: var(--accent-green); color: white; } .yaml-editor-btn.primary:hover { background: #8bc65a; } .yaml-editor-btn.secondary { background: var(--bg-tertiary); color: var(--text-primary); } .yaml-editor-btn.secondary:hover { background: var(--border-color); } .yaml-editor-btn.danger { background: var(--accent-red); color: white; } .yaml-editor-btn.danger:hover { background: #e5677a; } .yaml-editor-body { flex: 1; display: flex; overflow: hidden; } .yaml-editor-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .yaml-editor-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-primary); border-bottom: 1px solid var(--border-color); } .yaml-editor-toolbar select, .yaml-editor-toolbar input { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px; padding: 6px 10px; color: var(--text-primary); font-size: 12px; } .yaml-editor-toolbar label { font-size: 12px; color: var(--text-secondary); } .yaml-textarea { flex: 1; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; padding: 16px; border: none; resize: none; outline: none; tab-size: 2; } .yaml-textarea::placeholder { color: var(--text-secondary); opacity: 0.5; } .yaml-editor-sidebar { width: 280px; background: var(--bg-primary); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; overflow: hidden; } .yaml-editor-sidebar-header { padding: 12px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px; font-weight: 600; color: var(--text-primary); } .yaml-template-list { flex: 1; overflow-y: auto; padding: 8px; } .yaml-template-item { padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: background 0.15s ease; margin-bottom: 4px; } .yaml-template-item:hover { background: var(--bg-secondary); } .yaml-template-item-title { font-size: 13px; color: var(--text-primary); margin-bottom: 2px; } .yaml-template-item-desc { font-size: 11px; color: var(--text-secondary); } .yaml-editor-footer { padding: 12px 20px; background: var(--bg-primary); border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; } .yaml-editor-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); } .yaml-editor-status .status-dot { width: 8px; height: 8px; border-radius: 50%; } .yaml-editor-status.valid .status-dot { background: var(--accent-green); } .yaml-editor-status.invalid .status-dot { background: var(--accent-red); } .yaml-editor-hints { font-size: 11px; color: var(--text-secondary); } .yaml-editor-hints kbd { background: var(--bg-secondary); padding: 2px 6px; border-radius: 3px; font-family: var(--font-mono); } /* Chat History Sidebar */ .chat-history-sidebar { position: absolute; top: 0; right: -280px; width: 280px; height: 100%; background: var(--bg-primary); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; transition: right 0.3s ease; z-index: 100; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3); } .chat-history-sidebar.open { right: 0; } /* Remove padding approach - use overlay instead */ .ai-panel.history-open { /* No padding needed - sidebar overlays the content */ } .chat-history-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); } .chat-history-header h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); } .chat-history-actions { display: flex; gap: 4px; } .chat-history-btn { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 14px; transition: all 0.2s ease; } .chat-history-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); } .chat-history-btn.primary { background: var(--accent-blue); color: white; } .chat-history-btn.primary:hover { background: var(--accent-cyan); } .chat-history-search { padding: 8px 12px; border-bottom: 1px solid var(--border-color); } .chat-history-search input { width: 100%; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 12px; } .chat-history-search input:focus { outline: none; border-color: var(--accent-blue); } .chat-history-list { flex: 1; overflow-y: auto; padding: 8px; } .chat-history-item { padding: 10px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; transition: background 0.15s ease; position: relative; } .chat-history-item:hover { background: var(--bg-secondary); } .chat-history-item.active { background: var(--accent-blue); color: white; } .chat-history-item.active:hover { background: var(--accent-blue); } .chat-history-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-history-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-secondary); } .chat-history-item.active .chat-history-meta { color: rgba(255, 255, 255, 0.7); } .chat-history-delete { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; opacity: 0; transition: all 0.2s ease; font-size: 12px; padding: 4px 6px; border-radius: 4px; line-height: 1; } .chat-history-item:hover .chat-history-delete { opacity: 1; } .chat-history-delete:hover { background: var(--accent-red); border-color: var(--accent-red); color: white; } .chat-history-item.active .chat-history-delete { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.9); } .chat-history-item.active .chat-history-delete:hover { background: var(--accent-red); border-color: var(--accent-red); color: white; } .chat-history-empty { text-align: center; padding: 40px 20px; color: var(--text-secondary); } .chat-history-empty-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.5; } .chat-history-toggle { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 11px; transition: all 0.2s ease; } .chat-history-toggle:hover { background: var(--accent-blue); color: white; border-color: var(--accent-blue); } /* Chat history item edit button */ .chat-history-edit { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; opacity: 0; transition: all 0.2s ease; font-size: 12px; padding: 4px 6px; border-radius: 4px; line-height: 1; } .chat-history-item:hover .chat-history-edit { opacity: 1; } .chat-history-edit:hover { background: var(--accent-blue); border-color: var(--accent-blue); color: white; } .chat-history-item.active .chat-history-edit { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.9); } .chat-history-item.active .chat-history-edit:hover { background: var(--accent-blue); border-color: var(--accent-blue); color: white; } /* Rename input style */ .chat-history-rename-input { width: 100%; padding: 4px 8px; border: 1px solid var(--accent-blue); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font-size: 12px; outline: none; } .ai-panel { position: relative; } /* Guardrails Status Indicator */ .guardrails-status { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); font-size: 11px; } .guardrails-indicator { display: flex; align-items: center; gap: 4px; } .guardrails-indicator .dot { width: 6px; height: 6px; border-radius: 50%; } .guardrails-indicator.safe .dot { background: var(--accent-green); } .guardrails-indicator.warning .dot { background: var(--accent-yellow); } .guardrails-indicator.danger .dot { background: var(--accent-red); } .guardrails-limit { margin-left: auto; color: var(--text-secondary); } /* ============================================ * Cluster Overview Panel (Dashboard Home) * ============================================ */ .overview-panel { padding: 24px; display: none; overflow-y: auto; height: 100%; } .overview-panel.active { display: block; } .overview-panel .overview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .overview-panel .overview-header h2 { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 0; } .overview-panel .overview-context { font-size: 13px; color: var(--accent-blue); background: rgba(122, 162, 247, 0.1); padding: 4px 12px; border-radius: 12px; font-weight: 500; } #overview-container .overview-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } #overview-container .overview-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } #overview-container .overview-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } #overview-container .overview-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; } #overview-container .overview-card-content { display: flex; flex-direction: column; gap: 2px; } #overview-container .overview-card-value { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } #overview-container .overview-card-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .overview-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 900px) { .overview-sections { grid-template-columns: 1fr; } } .overview-section { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; } .overview-section h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 16px 0; } #overview-container .overview-actions { display: flex; flex-wrap: wrap; gap: 8px; border: none; margin: 0; padding: 0; } .overview-action-btn { padding: 8px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 13px; cursor: pointer; transition: all var(--transition-fast); font-weight: 500; } .overview-action-btn:hover { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); } .overview-events { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; } .overview-event-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: var(--bg-primary); border-radius: 8px; font-size: 12px; border-left: 3px solid var(--border-color); } .overview-event-item.warning { border-left-color: var(--accent-yellow); } .overview-event-item.normal { border-left-color: var(--accent-green); } .overview-event-item .event-type { font-weight: 600; font-size: 11px; text-transform: uppercase; flex-shrink: 0; min-width: 60px; } .overview-event-item .event-type.warning { color: var(--accent-yellow); } .overview-event-item .event-type.normal { color: var(--accent-green); } .overview-event-item .event-message { color: var(--text-secondary); flex: 1; line-height: 1.4; } .overview-event-item .event-time { color: var(--text-secondary); font-size: 11px; flex-shrink: 0; opacity: 0.7; } /* Light Theme Overrides removed - now using CSS variables */ /* ============================ Custom View Containers (Pulse, XRay, Applications, Validate, Healing, Helm) ============================ */ .custom-view-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary); } .custom-view-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .custom-view-toolbar h2 { margin: 0; font-size: 16px; color: var(--text-primary); } .custom-view-toolbar select, .custom-view-toolbar button { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); font-size: 12px; cursor: pointer; } .custom-view-toolbar button:hover { background: var(--bg-hover); } .custom-view-body { flex: 1; overflow-y: auto; padding: 16px; } .loading-placeholder { text-align: center; padding: 60px 20px; color: var(--text-secondary); font-size: 14px; } /* Pulse View */ .pulse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; } .pulse-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .pulse-card-title { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.5px; } .pulse-card-value { font-size: 28px; font-weight: 700; color: var(--text-primary); } .pulse-card-sub { font-size: 12px; color: var(--text-secondary); } .pulse-bar { height: 6px; border-radius: 3px; background: var(--bg-tertiary); overflow: hidden; } .pulse-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; } .pulse-events { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; } .pulse-events h3 { margin: 0 0 12px 0; font-size: 14px; color: var(--text-primary); } .pulse-event-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; } .pulse-event-item:last-child { border-bottom: none; } .pulse-event-badge { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; flex-shrink: 0; } .pulse-event-badge.warning { background: rgba(224,175,104,0.2); color: var(--accent-yellow); } .pulse-event-badge.normal { background: rgba(158,206,106,0.2); color: var(--accent-green); } /* XRay View */ .xray-tree { font-family: monospace; font-size: 13px; } .xray-node { padding: 4px 0; } .xray-node-header { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; cursor: pointer; } .xray-node-header:hover { background: var(--bg-hover); } .xray-toggle { width: 16px; text-align: center; color: var(--text-secondary); cursor: pointer; user-select: none; } .xray-icon { font-size: 14px; } .xray-kind { color: var(--accent-purple); font-weight: 600; font-size: 11px; } .xray-name { color: var(--text-primary); } .xray-status { font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: auto; } .xray-status.running, .xray-status.ready { background: rgba(158,206,106,0.2); color: var(--accent-green); } .xray-status.pending { background: rgba(224,175,104,0.2); color: var(--accent-yellow); } .xray-status.failed { background: rgba(247,118,142,0.2); color: var(--accent-red); } .xray-children { margin-left: 20px; border-left: 1px solid var(--border-subtle); padding-left: 8px; } /* Applications View */ .apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; } .app-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; transition: border-color 0.2s; cursor: pointer; } .app-card:hover { border-color: var(--accent-blue); } .app-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .app-card-name { font-size: 16px; font-weight: 600; color: var(--text-primary); } .app-card-badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; } .app-card-badge.healthy { background: rgba(158,206,106,0.2); color: var(--accent-green); } .app-card-badge.degraded { background: rgba(224,175,104,0.2); color: var(--accent-yellow); } .app-card-badge.failing { background: rgba(247,118,142,0.2); color: var(--accent-red); } .app-card-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; display: flex; gap: 12px; } .app-card-resources { display: flex; flex-wrap: wrap; gap: 6px; } .app-resource-chip { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-subtle); } /* Healing View */ .healing-tab-bar { display: flex; gap: 0; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; } .healing-tab { padding: 5px 14px; font-size: 12px; border: none; background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; } .healing-tab.active { background: var(--accent-blue); color: #fff; } .healing-rule-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; } .healing-rule-status { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .healing-rule-status.enabled { background: var(--accent-green); box-shadow: 0 0 6px rgba(158,206,106,0.5); } .healing-rule-status.disabled { background: var(--text-muted); } .healing-rule-info { flex: 1; } .healing-rule-name { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .healing-rule-meta { font-size: 12px; color: var(--text-secondary); display: flex; gap: 12px; } .healing-rule-actions { display: flex; gap: 6px; } .healing-rule-actions button { padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 11px; cursor: pointer; } .healing-rule-actions button:hover { background: var(--bg-hover); } .healing-rule-actions button.delete:hover { background: rgba(247,118,142,0.2); color: var(--accent-red); } .healing-event-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; } .healing-event-result { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; } .healing-event-result.success { background: rgba(158,206,106,0.2); color: var(--accent-green); } .healing-event-result.failed { background: rgba(247,118,142,0.2); color: var(--accent-red); } /* Healing Rule Form Modal */ .healing-form-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .healing-form { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; width: 480px; max-width: 90vw; } .healing-form h3 { margin: 0 0 16px 0; color: var(--text-primary); } .healing-form .form-group { margin-bottom: 12px; } .healing-form label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; } .healing-form input, .healing-form select { width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); font-size: 13px; box-sizing: border-box; } .healing-form-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } .healing-form-buttons button { padding: 8px 20px; border-radius: 6px; border: 1px solid var(--border-color); cursor: pointer; font-size: 13px; } .healing-form-buttons .btn-primary { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); } .healing-form-buttons .btn-cancel { background: var(--bg-tertiary); color: var(--text-secondary); } /* Helm View */ .helm-table { width: 100%; border-collapse: collapse; } .helm-table th { text-align: left; padding: 10px 12px; background: var(--bg-tertiary); color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color); } .helm-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-primary); } .helm-table tr:hover td { background: var(--bg-hover); } .helm-status { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; } .helm-status.deployed { background: rgba(158,206,106,0.2); color: var(--accent-green); } .helm-status.failed { background: rgba(247,118,142,0.2); color: var(--accent-red); } .helm-status.pending { background: rgba(224,175,104,0.2); color: var(--accent-yellow); } .helm-status.uninstalled { background: rgba(122,162,247,0.2); color: var(--accent-blue); } .helm-actions button { padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 11px; cursor: pointer; margin-right: 4px; } .helm-actions button:hover { background: var(--bg-hover); } .helm-detail-panel { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; margin-top: 12px; } .helm-detail-panel h3 { margin: 0 0 12px 0; font-size: 14px; color: var(--text-primary); } .helm-detail-panel pre { background: var(--bg-tertiary); padding: 12px; border-radius: 6px; font-size: 12px; overflow-x: auto; color: var(--text-primary); } /* AI Panel Toggle Button */ .ai-toggle-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--accent-purple); background: transparent; color: var(--accent-purple); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-left: 4px; } .ai-toggle-btn:hover { background: rgba(187, 154, 247, 0.15); } .ai-toggle-btn.active { background: var(--accent-purple); color: #fff; } /* Audit Logs Modal */ .audit-modal { max-width: 1100px; max-height: 85vh; } /* Reports Modal */ .reports-modal { max-width: 900px; max-height: 85vh; } /* Diff Modal */ .diff-modal { max-width: 1200px; max-height: 85vh; } .diff-content .diff-add { background: rgba(46, 160, 67, 0.15); } .diff-content .diff-remove { background: rgba(248, 81, 73, 0.15); } /* ==================== Multi-Cluster Switcher ==================== */ .cluster-switcher { position: relative; margin-right: 8px; } .cluster-switcher-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; font-size: 13px; transition: all 0.2s; } .cluster-switcher-btn:hover { border-color: var(--accent-blue); } .cluster-icon { font-size: 16px; } .cluster-arrow { font-size: 10px; color: var(--text-secondary); } .cluster-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 280px; margin-top: 4px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 1000; overflow: hidden; } .cluster-dropdown.active { display: block; } .cluster-dropdown-header { padding: 10px 14px; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; border-bottom: 1px solid var(--border-color); } .cluster-dropdown-item { padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; transition: background 0.15s; } .cluster-dropdown-item:hover { background: var(--bg-hover); } .cluster-dropdown-item.active { background: var(--accent-blue); color: #fff; border-radius: 0; } .cluster-dropdown-item .ctx-icon { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); flex-shrink: 0; } .cluster-dropdown-item.active .ctx-icon { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.5); } /* ==================== RBAC Viewer ==================== */ .rbac-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; margin-bottom: 12px; } .rbac-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .rbac-subject-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; } .rbac-subject-icon.sa { background: var(--accent-blue); } .rbac-subject-icon.user { background: var(--accent-purple); } .rbac-subject-icon.group { background: var(--accent-cyan); } .rbac-role-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-size: 11px; background: var(--bg-tertiary); border: 1px solid var(--border-color); margin: 2px; } .rbac-role-badge.cluster { border-color: var(--accent-yellow); color: var(--accent-yellow); } /* ==================== Network Policy Map ==================== */ .netpol-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; margin-bottom: 12px; } .netpol-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .netpol-direction { display: flex; gap: 16px; margin-top: 8px; } .netpol-direction-col { flex: 1; } .netpol-direction-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 6px; } .netpol-rule { padding: 6px 10px; border-radius: 4px; font-size: 12px; background: var(--bg-tertiary); margin-bottom: 4px; border-left: 3px solid var(--accent-green); } .netpol-rule.deny { border-left-color: var(--accent-red); } .netpol-selector { color: var(--accent-cyan); font-family: var(--font-mono); font-size: 11px; } /* ==================== Event Timeline ==================== */ .timeline-container { position: relative; padding-left: 30px; } .timeline-line { position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--border-color); } .timeline-group { margin-bottom: 24px; position: relative; } .timeline-dot { position: absolute; left: -23px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-blue); border: 2px solid var(--bg-primary); z-index: 1; } .timeline-dot.warning { background: var(--accent-yellow); } .timeline-dot.error { background: var(--accent-red); } .timeline-time { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; } .timeline-event { padding: 8px 12px; border-radius: 6px; background: var(--bg-secondary); border: 1px solid var(--border-color); margin-bottom: 4px; font-size: 12px; display: flex; align-items: flex-start; gap: 8px; } .timeline-event .evt-type { padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; flex-shrink: 0; } .timeline-event .evt-type.Normal { background: rgba(46,160,67,0.15); color: var(--accent-green); } .timeline-event .evt-type.Warning { background: rgba(248,81,73,0.15); color: var(--accent-red); } .timeline-event .evt-reason { color: var(--accent-cyan); font-weight: 500; } .timeline-event .evt-msg { color: var(--text-secondary); } .timeline-stats { display: flex; gap: 16px; margin-bottom: 20px; padding: 12px 16px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border-color); } .timeline-stat { text-align: center; } .timeline-stat-value { font-size: 24px; font-weight: 700; } .timeline-stat-label { font-size: 11px; color: var(--text-secondary); } /* ==================== GitOps ==================== */ .gitops-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; } .gitops-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .gitops-status-dot.synced { background: var(--accent-green); box-shadow: 0 0 8px rgba(46,160,67,0.4); } .gitops-status-dot.outofsync { background: var(--accent-yellow); box-shadow: 0 0 8px rgba(227,179,65,0.4); } .gitops-status-dot.degraded { background: var(--accent-red); box-shadow: 0 0 8px rgba(248,81,73,0.4); } .gitops-status-dot.unknown { background: var(--text-secondary); } .gitops-info { flex: 1; } .gitops-name { font-weight: 600; font-size: 14px; } .gitops-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .gitops-repo { font-family: var(--font-mono); font-size: 11px; color: var(--accent-cyan); } .gitops-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; } .gitops-badge.synced { background: rgba(46,160,67,0.15); color: var(--accent-green); } .gitops-badge.outofsync { background: rgba(227,179,65,0.15); color: var(--accent-yellow); } .gitops-badge.degraded { background: rgba(248,81,73,0.15); color: var(--accent-red); } .gitops-empty { text-align: center; padding: 40px; color: var(--text-secondary); font-size: 14px; } /* ==================== Troubleshoot Button ==================== */ .troubleshoot-btn { padding: 4px 10px; border-radius: 4px; border: 1px solid var(--accent-yellow); background: transparent; color: var(--accent-yellow); cursor: pointer; font-size: 11px; transition: all 0.2s; white-space: nowrap; } .troubleshoot-btn:hover { background: var(--accent-yellow); color: var(--bg-primary); } /* ========================================== * Tokyo Night Light - view refinements * Overrides hardcoded dark-optimized values * for login, modals, detail panels, etc. * ========================================== */ /* Login page */ html[data-theme="light"] .login-container::before { background-image: radial-gradient(circle at 20% 80%, rgba(52, 84, 138, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(90, 74, 120, 0.08) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(22, 103, 117, 0.04) 0%, transparent 40%), radial-gradient(circle at 60% 60%, rgba(72, 94, 48, 0.04) 0%, transparent 40%); } html[data-theme="light"] .login-box { box-shadow: 0 0 40px rgba(52, 84, 138, 0.06), 0 20px 40px rgba(52, 59, 88, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4); } html[data-theme="light"] .login-box input { border-color: rgba(52, 84, 138, 0.15); } html[data-theme="light"] .login-box input:focus { box-shadow: 0 0 0 3px rgba(52, 84, 138, 0.1), 0 0 15px rgba(52, 84, 138, 0.06); } html[data-theme="light"] .login-box button.login-btn:hover { box-shadow: 0 8px 24px rgba(52, 84, 138, 0.25); } html[data-theme="light"] .login-box button.login-btn:focus { box-shadow: 0 0 0 3px rgba(52, 84, 138, 0.2), 0 8px 24px rgba(52, 84, 138, 0.25); } html[data-theme="light"] .login-ascii-logo { text-shadow: 0 0 15px rgba(52, 84, 138, 0.3); } html[data-theme="light"] .login-error { background: rgba(140, 67, 81, 0.08); border-color: rgba(140, 67, 81, 0.15); } html[data-theme="light"] .login-tab { border-color: rgba(52, 84, 138, 0.08); } html[data-theme="light"] .login-tab:hover { background: rgba(52, 84, 138, 0.06); border-color: rgba(52, 84, 138, 0.12); } html[data-theme="light"] .login-tab.active { background: rgba(52, 84, 138, 0.1); border-color: var(--accent-blue); } html[data-theme="light"] .login-footer { border-top-color: rgba(52, 84, 138, 0.08); } html[data-theme="light"] .token-help-box { border-color: rgba(52, 84, 138, 0.1); } html[data-theme="light"] .token-help-toggle:hover { background: rgba(52, 84, 138, 0.06); } html[data-theme="light"] .token-help-note { background: rgba(143, 94, 21, 0.06); border-color: rgba(143, 94, 21, 0.12); } html[data-theme="light"] .auth-mode-indicator.token-mode { background: rgba(72, 94, 48, 0.08); border-color: rgba(72, 94, 48, 0.15); } html[data-theme="light"] .auth-mode-indicator.local-mode { background: rgba(52, 84, 138, 0.06); border-color: rgba(52, 84, 138, 0.12); } /* Re-apply dark values for auto dark mode */ @media (prefers-color-scheme: dark) { html[data-theme="light"] .login-container::before { background-image: radial-gradient(circle at 20% 80%, rgba(122, 162, 247, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(187, 154, 247, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(125, 211, 252, 0.05) 0%, transparent 40%), radial-gradient(circle at 60% 60%, rgba(52, 211, 153, 0.05) 0%, transparent 40%); } html[data-theme="light"] .login-box { box-shadow: 0 0 60px rgba(122, 162, 247, 0.1), 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); } html[data-theme="light"] .login-box input { border-color: rgba(122, 162, 247, 0.2); } html[data-theme="light"] .login-box input:focus { box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.15), 0 0 20px rgba(122, 162, 247, 0.1); } html[data-theme="light"] .login-box button.login-btn:hover { box-shadow: 0 10px 30px rgba(122, 162, 247, 0.3); } html[data-theme="light"] .login-box button.login-btn:focus { box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.3), 0 10px 30px rgba(122, 162, 247, 0.3); } html[data-theme="light"] .login-ascii-logo { text-shadow: 0 0 20px rgba(122, 162, 247, 0.5); } html[data-theme="light"] .login-error { background: rgba(247, 118, 142, 0.1); border-color: rgba(247, 118, 142, 0.2); } html[data-theme="light"] .login-tab { border-color: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .login-tab:hover { background: rgba(122, 162, 247, 0.1); border-color: rgba(122, 162, 247, 0.2); } html[data-theme="light"] .login-tab.active { background: rgba(122, 162, 247, 0.15); border-color: var(--accent-blue); } html[data-theme="light"] .login-footer { border-top-color: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .token-help-box { border-color: rgba(122, 162, 247, 0.15); } html[data-theme="light"] .token-help-toggle:hover { background: rgba(122, 162, 247, 0.1); } html[data-theme="light"] .token-help-note { background: rgba(224, 175, 104, 0.1); border-color: rgba(224, 175, 104, 0.2); } html[data-theme="light"] .auth-mode-indicator.token-mode { background: rgba(158, 206, 106, 0.1); border-color: rgba(158, 206, 106, 0.2); } html[data-theme="light"] .auth-mode-indicator.local-mode { background: rgba(122, 162, 247, 0.1); border-color: rgba(122, 162, 247, 0.2); } } /* === css/animations.css === */ /** * k13d Animations * All @keyframes animations and transition classes */ @keyframes loginBgPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } @keyframes floatIcon { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(180deg); } } @keyframes loginBoxAppear { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes logoGlow { 0%, 100% { text-shadow: 0 0 20px rgba(122, 162, 247, 0.5); } 50% { text-shadow: 0 0 30px rgba(122, 162, 247, 0.8), 0 0 60px rgba(122, 162, 247, 0.3); } } @keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes messageAppear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes modalOverlayAppear { from { opacity: 0; } to { opacity: 1; } } @keyframes modalAppear { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } @keyframes healthPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.2; transform: scale(1.3); } } @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes aiHighlight { 0% { background: var(--accent-purple); } 100% { background: transparent; } } @keyframes slideInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeInOut { 0% { opacity: 0; transform: translateX(-50%) translateY(-10px); } 15% { opacity: 1; transform: translateX(-50%) translateY(0); } 85% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }