From bb6393e35bdd2db358290f1ebd196fba3a234ccb Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Sat, 18 Apr 2026 22:11:44 -0400 Subject: [PATCH] Replace dangling symlinks with real base.css and base.js files The symlinks pointed to /root/code/web_template/ which does not exist on the production LXC (10.10.10.61). Flask returned 404 for both assets. Replaced with actual file copies from web_template v1.2. To update when web_template changes: cp /root/code/web_template/base.css static/base.css cp /root/code/web_template/base.js static/base.js Co-Authored-By: Claude Sonnet 4.6 --- static/base.css | 5607 ++++++++++++++++++++++++++++++++++++++++++++++- static/base.js | 2948 ++++++++++++++++++++++++- 2 files changed, 8553 insertions(+), 2 deletions(-) mode change 120000 => 100644 static/base.css mode change 120000 => 100644 static/base.js diff --git a/static/base.css b/static/base.css deleted file mode 120000 index f5d1c39..0000000 --- a/static/base.css +++ /dev/null @@ -1 +0,0 @@ -/root/code/web_template/base.css \ No newline at end of file diff --git a/static/base.css b/static/base.css new file mode 100644 index 0000000..4045b7f --- /dev/null +++ b/static/base.css @@ -0,0 +1,5606 @@ +/* ================================================================ + LOTUSGUILD TERMINAL DESIGN SYSTEM v1.2 — base.css + Aesthetic: Anduril x Hacker Terminal — dark military-tech, + multi-accent neon, angular frames, glitch effects. + + Apps: Tinker Tickets (PHP), PULSE (Node.js), GANDALF (Flask) + Prefix: .lt-* (LotusGuild Terminal) + + TABLE OF CONTENTS + 01. CSS Custom Properties 27. Progress Bars + 02. Reset & Base 28. Tooltips + 03. CRT / Grid / Scanline 29. Breadcrumbs + 04. Typography 30. Pagination + 05. Layout Primitives 31. Accordion + 06. Header & Navigation 32. Alert Banners + 07. ASCII Frame System 33. Toggle Switch + 08. Card Component 34. Range Slider + 09. Buttons 35. File Upload / Dropzone + 10. Forms & Inputs 36. Command Palette + 11. Tables 37. Code Blocks + 12. Status Badges / Chips 38. Tags / Chips + 13. Modals 39. Notification Badges + 14. Toast Notifications 40. Stepper / Wizard + 15. Tab Navigation 41. List Groups + 16. Sidebar / Filter Panel 42. Key-Value Pairs + 17. Stats Widgets 43. Hero / Banner + 18. Inline Messages 44. Divider with Label + 19. Loading & Empty States 45. Custom Scrollbar + 20. Boot Sequence Overlay 46. Responsive Table Cards + 21. Log / Timeline Entries 47. Gauge / Meter + 22. Animations (keyframes) 48. Spinners / Loaders + 23. Responsive Design 49. Tab Bar + 24. Utility Classes 50. Utility Additions + 25. Print Styles + 26. Accessibility + ================================================================ */ + +/* ---------------------------------------------------------------- + 01. CSS CUSTOM PROPERTIES + ---------------------------------------------------------------- */ +:root { + /* --- Backgrounds --- */ + --bg-primary: #030508; + --bg-secondary: #060c14; + --bg-tertiary: #0d1520; + --bg-card: #07101a; + --bg-terminal: #010304; + --bg-overlay: rgba(3,5,8,0.94); + + /* --- Primary accent: Anduril Orange --- */ + --accent-orange: #FF6B00; + --accent-orange-bright: #FF8C2B; + --accent-orange-dim: rgba(255,107,0,0.12); + --accent-orange-border: rgba(255,107,0,0.35); + --accent-amber: #FFB300; + --accent-amber-dim: rgba(255,179,0,0.10); + + /* --- Secondary accent: Ice Cyan --- */ + --accent-cyan: #00D4FF; + --accent-cyan-bright: #33DFFF; + --accent-cyan-dim: rgba(0,212,255,0.10); + --accent-cyan-border: rgba(0,212,255,0.22); + + /* --- Tertiary accent: Matrix Green --- */ + --accent-green: #00FF88; + --accent-green-bright: #33FFAA; + --accent-green-dim: rgba(0,255,136,0.10); + --accent-green-border: rgba(0,255,136,0.22); + + /* --- Error / Critical --- */ + --accent-red: #FF2D55; + --accent-red-dim: rgba(255,45,85,0.12); + + /* --- Warning --- */ + --accent-gold: #FFD700; + --accent-gold-dim: rgba(255,215,0,0.10); + + /* --- Purple (admin / misc) --- */ + --accent-purple: #BF5FFF; + --accent-purple-dim: rgba(191,95,255,0.10); + + /* Legacy aliases — keeps all existing component HTML working */ + --terminal-green: var(--accent-green); + --terminal-green-dim: var(--accent-green-dim); + --terminal-green-dark: #00cc66; + --terminal-green-muted: #007744; + --terminal-amber: var(--accent-amber); + --terminal-amber-dim: var(--accent-amber-dim); + --terminal-cyan: var(--accent-cyan); + --terminal-cyan-dim: var(--accent-cyan-dim); + --terminal-red: var(--accent-red); + --terminal-red-dim: var(--accent-red-dim); + --terminal-orange: var(--accent-orange); + --terminal-orange-dim: var(--accent-orange-dim); + + /* --- Text --- */ + --text-primary: #c4d9ee; + --text-secondary: #7fa3bf; + --text-muted: #3e607a; + --text-dim: #1e3347; + + /* --- Borders --- */ + --border-color: rgba(0,212,255,0.16); + --border-color-hi: var(--accent-cyan); + --border-color-dim: rgba(0,212,255,0.07); + --border-dim: rgba(0,212,255,0.07); /* alias for v1.2+ components */ + --border-orange: var(--accent-orange-border); + + /* --- Workflow / status colours --- */ + --status-open: var(--accent-green); + --status-pending: var(--accent-purple); + --status-in-progress: var(--accent-amber); + --status-closed: var(--accent-red); + --status-online: var(--accent-green); + --status-offline: var(--accent-red); + --status-running: var(--accent-amber); + --status-completed: var(--accent-cyan); + --status-failed: var(--accent-red); + --status-waiting: var(--accent-gold); + + /* --- Priority colours --- */ + --priority-1: #FF2D55; + --priority-2: #FF6B00; + --priority-3: #00D4FF; + --priority-4: #00FF88; + --priority-5: #3e607a; + + /* --- Glow: text-shadow stacks --- */ + --glow-orange: 0 0 6px #FF6B00, 0 0 16px rgba(255,107,0,0.55); + --glow-orange-intense: 0 0 8px #FF6B00, 0 0 22px #FF6B00, 0 0 40px rgba(255,107,0,0.45); + --glow-cyan: 0 0 6px #00D4FF, 0 0 16px rgba(0,212,255,0.45); + --glow-cyan-intense: 0 0 8px #00D4FF, 0 0 22px #00D4FF, 0 0 38px rgba(0,212,255,0.35); + --glow-green: 0 0 6px #00FF88, 0 0 16px rgba(0,255,136,0.45); + --glow-green-intense: 0 0 8px #00FF88, 0 0 22px #00FF88, 0 0 36px rgba(0,255,136,0.35); + --glow-amber: 0 0 6px #FFB300, 0 0 14px rgba(255,179,0,0.40); + --glow-amber-intense: 0 0 8px #FFB300, 0 0 20px #FFB300, 0 0 34px rgba(255,179,0,0.45); + --glow-red: 0 0 6px #FF2D55, 0 0 16px rgba(255,45,85,0.45); + + /* --- Glow: box-shadow halos --- */ + --box-glow-orange: 0 0 18px rgba(255,107,0,0.22), 0 0 36px rgba(255,107,0,0.08); + --box-glow-cyan: 0 0 18px rgba(0,212,255,0.18), 0 0 36px rgba(0,212,255,0.06); + --box-glow-green: 0 0 18px rgba(0,255,136,0.18), 0 0 36px rgba(0,255,136,0.06); + --box-glow-red: 0 0 18px rgba(255,45,85,0.22), 0 0 36px rgba(255,45,85,0.08); + --box-glow-amber: 0 0 18px rgba(255,179,0,0.18), 0 0 36px rgba(255,179,0,0.06); + + /* --- Typography --- */ + --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; + --font-display: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; + --font-crt: 'VT323', 'Courier New', monospace; + + /* --- Spacing --- */ + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 3rem; + + /* --- Layout --- */ + --sidebar-width: 240px; + --sidebar-width-sm: 200px; + --header-height: 56px; + --container-max: 1600px; + + /* --- Transitions --- */ + --transition-fast: all 0.12s ease; + --transition-default: all 0.25s ease; + + /* --- Z-index ladder --- */ + --z-base: 1; + --z-dropdown: 100; + --z-sticky: 200; + --z-fixed: 300; + --z-modal-backdrop: 10010; /* above nav drawer (10002) so modals always accessible */ + --z-modal: 10011; + --z-popover: 10012; + --z-tooltip: 10013; + --z-toast: 10014; + --z-panel: 10020; /* notification / generic dropdown panels — above everything */ + --z-overlay: 9999; /* scanlines / CRT effects */ + + /* --- Corner cuts (clip-path polygon notches) --- */ + --corner-cut: 8px; + --corner-cut-sm: 5px; + --corner-cut-lg: 16px; + + /* --- Syntax highlight --- */ + --color-tok-cmt: #5c8c6a; +} + + +/* ---------------------------------------------------------------- + 02. RESET & BASE + ---------------------------------------------------------------- */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-size: 14px; + scroll-behavior: smooth; + /* Dot-grid tactical background */ + background-color: var(--bg-primary); + background-image: + radial-gradient(circle, rgba(0,212,255,0.055) 1px, transparent 1px); + background-size: 28px 28px; +} + +body { + background-color: transparent; + color: var(--text-primary); + font-family: var(--font-mono); + font-size: 0.875rem; + line-height: 1.65; + min-height: 100vh; + overflow-x: hidden; + position: relative; +} + +a { + color: var(--accent-cyan); + text-decoration: none; + transition: var(--transition-fast); +} +a:hover { + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} +a:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; +} + +ul, ol { list-style: none; } +img, svg { display: block; max-width: 100%; } +button { cursor: pointer; font-family: var(--font-mono); } + + +/* ---------------------------------------------------------------- + 03. CRT / GRID / SCANLINE EFFECTS + ---------------------------------------------------------------- */ + +/* Horizontal scanlines — fixed, non-interactive overlay */ +body::before { + content: ''; + position: fixed; + inset: 0; + background: repeating-linear-gradient( + 0deg, + rgba(0,0,0,0.07) 0px, + rgba(0,0,0,0.07) 1px, + transparent 1px, + transparent 3px + ); + pointer-events: none; + z-index: var(--z-overlay); +} + +/* Corner vignette */ +body::after { + content: ''; + position: fixed; + inset: 0; + background: radial-gradient( + ellipse at center, + transparent 55%, + rgba(0,0,0,0.60) 100% + ); + pointer-events: none; + z-index: calc(var(--z-overlay) - 1); +} + + +/* ---------------------------------------------------------------- + 04. TYPOGRAPHY + ---------------------------------------------------------------- */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.10em; + line-height: 1.25; +} + +h1 { + font-size: 1.5rem; + color: var(--accent-orange); + text-shadow: var(--glow-orange-intense); +} +h1::before { content: '>> '; color: var(--accent-cyan); text-shadow: var(--glow-cyan); } + +h2 { + font-size: 1.15rem; + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} +h2::before { content: '> '; color: var(--accent-cyan); opacity: 0.65; } + +h3 { + font-size: 0.95rem; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); +} + +h4 { + font-size: 0.85rem; + color: var(--text-secondary); +} + +p { margin-bottom: var(--space-md); } +p:last-child { margin-bottom: 0; } + +code, pre { + font-family: var(--font-mono); + font-size: 0.8rem; + background: var(--bg-terminal); + border: 1px solid var(--border-color); + color: var(--accent-green); +} + +code { + padding: 0.1em 0.35em; +} + +pre { + padding: var(--space-md); + overflow-x: auto; + white-space: pre-wrap; + border-left: 2px solid var(--accent-green); + text-shadow: var(--glow-green); +} + +hr { + border: none; + border-top: 1px solid var(--border-color-dim); + margin: var(--space-lg) 0; +} + + +/* ---------------------------------------------------------------- + 05. LAYOUT PRIMITIVES + ---------------------------------------------------------------- */ +.lt-container { + max-width: var(--container-max); + margin: 0 auto; + padding: var(--space-lg) var(--space-xl); +} + +.lt-main { + padding-top: calc(var(--header-height) + var(--space-lg)); +} + +.lt-layout { + display: flex; + gap: var(--space-lg); + align-items: flex-start; +} + +.lt-content { flex: 1; min-width: 0; } + +.lt-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-lg); } +.lt-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); } +.lt-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-lg); } + +.lt-flex { display: flex; align-items: center; } +.lt-flex-between { display: flex; align-items: center; justify-content: space-between; } +.lt-flex-center { display: flex; align-items: center; justify-content: center; } +.lt-flex-col { display: flex; flex-direction: column; } +.lt-flex-wrap { flex-wrap: wrap; } + +.lt-gap-sm { gap: var(--space-sm); } +.lt-gap-md { gap: var(--space-md); } +.lt-gap-lg { gap: var(--space-lg); } + +.lt-mt-sm { margin-top: var(--space-sm); } +.lt-mt-md { margin-top: var(--space-md); } +.lt-mb-sm { margin-bottom: var(--space-sm); } +.lt-mb-md { margin-bottom: var(--space-md); } +.lt-p-md { padding: var(--space-md); } + +.lt-divider { + border: none; + border-top: 1px solid var(--border-color-dim); + margin: var(--space-xl) 0; +} + + +/* ---------------------------------------------------------------- + 06. HEADER & NAVIGATION + ---------------------------------------------------------------- */ +.lt-header { + position: fixed; + top: 0; left: 0; right: 0; + height: var(--header-height); + background: rgba(3,5,8,0.96); + backdrop-filter: blur(14px); + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-xl); + z-index: var(--z-fixed); + box-shadow: 0 4px 32px rgba(0,0,0,0.7); +} + +/* Gradient rule along bottom edge */ +.lt-header::after { + content: ''; + position: absolute; + bottom: 0; left: 0; right: 0; + height: 1px; + background: linear-gradient( + 90deg, + transparent 0%, + var(--accent-cyan) 20%, + var(--accent-orange) 50%, + var(--accent-cyan) 80%, + transparent 100% + ); + opacity: 0.55; +} + +.lt-header-left { + display: flex; + align-items: center; + gap: var(--space-xl); +} + +.lt-header-right { + display: flex; + align-items: center; + gap: var(--space-md); +} + +/* Brand */ +.lt-brand { display: flex; flex-direction: column; line-height: 1.1; } + +.lt-brand-title { + font-size: 1rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.16em; + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} +.lt-brand-title::before { content: '[ '; color: var(--accent-cyan); text-shadow: var(--glow-cyan); } +.lt-brand-title::after { content: ' ]'; color: var(--accent-cyan); text-shadow: var(--glow-cyan); } + +.lt-brand-subtitle { + font-size: 0.58rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.22em; +} + +/* Nav links */ +.lt-nav { + display: flex; + align-items: center; + gap: 2px; +} + +.lt-nav-link { + display: inline-block; + padding: 0.35rem 0.8rem; + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.13em; + color: var(--text-secondary); + border: 1px solid transparent; + transition: var(--transition-fast); + position: relative; +} + +.lt-nav-link::after { + content: ''; + position: absolute; + bottom: -1px; + left: 50%; right: 50%; + height: 1px; + background: var(--accent-cyan); + transition: var(--transition-fast); +} + +.lt-nav-link:hover { + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + border-color: var(--accent-cyan-border); + background: var(--accent-cyan-dim); +} +.lt-nav-link:hover::after { left: 0; right: 0; box-shadow: var(--glow-cyan); } +.lt-nav-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; color: var(--accent-cyan); } + +.lt-nav-link.active { + color: var(--accent-orange); + text-shadow: var(--glow-orange); + border-color: var(--accent-orange-border); + background: var(--accent-orange-dim); +} +.lt-nav-link.active::after { + left: 0; right: 0; + background: var(--accent-orange); + box-shadow: var(--glow-orange); +} + +/* Dropdown */ +.lt-nav-dropdown { position: relative; } + +.lt-nav-dropdown-menu { + display: none; + position: absolute; + top: 100%; + left: 0; + min-width: 180px; + background: rgba(6,12,20,0.98); + border: 1px solid var(--accent-cyan-border); + box-shadow: var(--box-glow-cyan), 0 16px 40px rgba(0,0,0,0.8); + z-index: var(--z-dropdown); + /* Invisible bridge above the menu so moving the cursor down from the + trigger into the menu doesn't cross a hover-dead gap */ + padding-top: 6px; + margin-top: -2px; +} +.lt-nav-dropdown-menu::before { + content: ''; + position: absolute; + top: 6px; left: 0; right: 0; + height: 1px; + background: var(--accent-cyan); + box-shadow: var(--glow-cyan); +} + +.lt-nav-dropdown:hover .lt-nav-dropdown-menu { display: block; } + +.lt-nav-dropdown-menu li a { + display: block; + padding: 0.5rem 0.9rem; + font-size: 0.7rem; + color: var(--text-secondary); + border-bottom: 1px solid var(--border-color-dim); + text-transform: uppercase; + letter-spacing: 0.09em; + transition: var(--transition-fast); +} +.lt-nav-dropdown-menu li:last-child a { border-bottom: none; } +.lt-nav-dropdown-menu li a:hover { + color: var(--accent-orange); + background: var(--accent-orange-dim); + text-shadow: var(--glow-orange); + padding-left: 1.1rem; +} +.lt-nav-dropdown-menu li a:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: -2px; + color: var(--accent-cyan); +} + +/* Header user + admin badge */ +.lt-header-user { + font-size: 0.7rem; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.11em; +} +.lt-header-user::before { + content: 'OP: '; + color: var(--accent-green); + text-shadow: var(--glow-green); + font-size: 0.62rem; +} + +.lt-badge-admin { + font-size: 0.58rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.16em; + padding: 0.15rem 0.5rem; + color: var(--accent-purple); + border: 1px solid rgba(191,95,255,0.45); + background: rgba(191,95,255,0.08); + text-shadow: 0 0 6px var(--accent-purple); + box-shadow: 0 0 10px rgba(191,95,255,0.18); +} + +/* Page header row */ +.lt-page-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-lg); + padding-bottom: var(--space-md); + border-bottom: 1px solid var(--border-color-dim); +} + +.lt-page-title { + font-size: 1.3rem; + color: var(--accent-orange); + text-shadow: var(--glow-orange-intense); + text-transform: uppercase; + letter-spacing: 0.13em; +} +.lt-page-title::before { + content: '// '; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); +} + + +/* ---------------------------------------------------------------- + 07. ASCII FRAME SYSTEM + ---------------------------------------------------------------- */ +.lt-frame { + position: relative; + border: 1px solid var(--border-color); + background: var(--bg-card); + margin-bottom: var(--space-lg); + clip-path: polygon( + 0 0, + calc(100% - 14px) 0, + 100% 14px, + 100% 100%, + 14px 100%, + 0 calc(100% - 14px) + ); +} + +/* Top-right corner pip */ +.lt-frame::before { + content: '◈'; + position: absolute; + top: -1px; right: 3px; + font-size: 0.52rem; + color: var(--accent-orange); + text-shadow: var(--glow-orange); + line-height: 1; + pointer-events: none; +} + +.lt-frame-bl, +.lt-frame-br { + position: absolute; + bottom: 4px; + font-size: 0.65rem; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + line-height: 1; + pointer-events: none; +} +.lt-frame-bl { left: 6px; } +.lt-frame-br { right: 6px; } + +.lt-section-header { + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.20em; + color: var(--accent-orange); + text-shadow: var(--glow-orange); + padding: 0.5rem 1rem; + border-bottom: 1px solid var(--border-color); + background: rgba(255,107,0,0.05); + display: flex; + align-items: center; + gap: var(--space-sm); +} +.lt-section-header::before { + content: '▸'; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); +} + +/* Right padding accounts for the 14px clip-path corner cut on .lt-frame */ +.lt-section-body { padding: var(--space-md); padding-right: 22px; } + +/* Inner / nested frame */ +.lt-frame-inner { + border: 1px solid var(--border-color-dim); + margin: var(--space-md); + background: rgba(0,212,255,0.018); +} + +.lt-subsection-header { + font-size: 0.63rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.18em; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + padding: 0.4rem 0.9rem; + border-bottom: 1px solid var(--border-color-dim); + background: rgba(0,212,255,0.03); + display: flex; + align-items: center; + gap: var(--space-sm); +} +.lt-subsection-header::before { + content: '◦'; + color: var(--accent-cyan); + opacity: 0.55; +} + + +/* ---------------------------------------------------------------- + 08. CARD COMPONENT + ---------------------------------------------------------------- */ +.lt-card { + position: relative; + background: var(--bg-card); + border: 1px solid var(--border-color); + padding: var(--space-md); + transition: var(--transition-fast); + clip-path: polygon( + 0 0, + calc(100% - 10px) 0, + 100% 10px, + 100% 100%, + 0 100% + ); +} + +/* Corner accent — top-right triangle */ +.lt-card::before { + content: ''; + position: absolute; + top: 0; right: 0; + width: 0; height: 0; + border-style: solid; + border-width: 0 10px 10px 0; + border-color: transparent var(--accent-cyan) transparent transparent; + opacity: 0.4; + transition: var(--transition-fast); +} + +.lt-card:hover { + border-color: var(--accent-cyan-border); + background: var(--bg-tertiary); + box-shadow: var(--box-glow-cyan); +} +.lt-card:hover::before { + opacity: 1; + border-right-color: var(--accent-orange); +} + + +/* ---------------------------------------------------------------- + 09. BUTTONS + ---------------------------------------------------------------- */ +.lt-btn { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + padding: 0.4rem 0.9rem; + font-family: var(--font-mono); + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--accent-cyan); + background: transparent; + border: 1px solid var(--accent-cyan-border); + transition: var(--transition-fast); + cursor: pointer; + text-decoration: none; + white-space: nowrap; + position: relative; + clip-path: polygon( + 0 0, + calc(100% - 7px) 0, + 100% 7px, + 100% 100%, + 7px 100%, + 0 calc(100% - 7px) + ); +} + +.lt-btn:hover { + color: var(--accent-cyan-bright); + border-color: var(--accent-cyan); + background: var(--accent-cyan-dim); + box-shadow: var(--box-glow-cyan); + text-shadow: var(--glow-cyan); + text-decoration: none; +} + +.lt-btn:active { transform: translateY(1px); } + +.lt-btn:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; + box-shadow: var(--box-glow-cyan); +} + +.lt-btn:disabled, +.lt-btn[disabled] { + opacity: 0.30; + cursor: not-allowed; + box-shadow: none; +} + +/* Primary — orange */ +.lt-btn-primary { + color: var(--accent-orange); + border-color: var(--accent-orange-border); +} +.lt-btn-primary:hover { + color: var(--accent-orange-bright); + border-color: var(--accent-orange); + background: var(--accent-orange-dim); + box-shadow: var(--box-glow-orange); + text-shadow: var(--glow-orange); +} + +/* Danger — red */ +.lt-btn-danger { + color: var(--accent-red); + border-color: rgba(255,45,85,0.32); +} +.lt-btn-danger:hover { + border-color: var(--accent-red); + background: var(--accent-red-dim); + box-shadow: var(--box-glow-red); + text-shadow: var(--glow-red); +} + +/* Ghost — minimal */ +.lt-btn-ghost { + color: var(--text-muted); + border-color: var(--border-color-dim); + clip-path: none; +} +.lt-btn-ghost:hover { + color: var(--text-secondary); + border-color: var(--border-color); + background: rgba(196,217,238,0.03); + box-shadow: none; + text-shadow: none; +} + +/* Small */ +.lt-btn-sm { + padding: 0.22rem 0.6rem; + font-size: 0.62rem; +} + +.lt-btn-group { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + flex-wrap: wrap; +} + + +/* ---------------------------------------------------------------- + 10. FORMS & INPUTS + ---------------------------------------------------------------- */ +.lt-form-group { + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: var(--space-md); +} + +.lt-label { + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--text-secondary); +} +.lt-label-required::after { content: ' *'; color: var(--accent-red); } + +.lt-input, +.lt-select, +.lt-textarea { + font-family: var(--font-mono); + font-size: 0.8rem; + color: var(--text-primary); + background: var(--bg-terminal); + border: 1px solid var(--border-color); + padding: 0.45rem 0.8rem; + width: 100%; + outline: none; + transition: var(--transition-fast); + clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); +} + +.lt-input:focus, +.lt-select:focus, +.lt-textarea:focus, +.lt-input:focus-visible, +.lt-select:focus-visible, +.lt-textarea:focus-visible { + border-color: var(--accent-cyan); + box-shadow: var(--box-glow-cyan); + background: rgba(0,212,255,0.025); + outline: 2px solid var(--accent-cyan); + outline-offset: 1px; +} + +.lt-input:disabled, +.lt-select:disabled, +.lt-textarea:disabled, +.lt-input[readonly], +.lt-textarea[readonly] { + opacity: 0.45; + cursor: not-allowed; + background: var(--bg-tertiary); + color: var(--text-muted); + border-color: var(--border-dim); +} + +/* Display-only fields — readable, non-editable, not "broken" */ +.lt-display-field, +.lt-input.lt-display-field, +.lt-select.lt-display-field, +.lt-textarea.lt-display-field { + opacity: 1; + color: var(--text-secondary); + cursor: default; + pointer-events: none; + background: transparent; + border-color: var(--border-dim); +} + +.lt-input::placeholder, +.lt-textarea::placeholder { color: var(--text-dim); } + +.lt-select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300D4FF'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.75rem center; + padding-right: 2rem; + color-scheme: dark; +} + +/* Style the native option list — works on Chrome/Firefox/Edge on Windows & Linux. + macOS always uses OS-native rendering and ignores these. */ +.lt-select option, +select option { + background: #0d1117; + color: #c9d1d9; +} +.lt-select option:hover, +.lt-select option:focus, +.lt-select option:checked, +select option:checked { + background: #1a2030; + color: #FF6B00; +} + +.lt-textarea { + min-height: 100px; + resize: vertical; + clip-path: none; +} + +.lt-form-hint { + font-size: 0.63rem; + color: var(--text-muted); + letter-spacing: 0.04em; +} + +/* Search */ +.lt-search { position: relative; } +.lt-search-input { padding-left: 2rem; } +.lt-search::before { + content: '⌕'; + position: absolute; + left: 0.6rem; + top: 50%; + transform: translateY(-50%); + color: var(--text-muted); + pointer-events: none; + font-size: 0.9rem; + z-index: 1; +} + +/* Checkbox */ +.lt-checkbox { + appearance: none; + width: 14px; + height: 14px; + border: 1px solid var(--accent-cyan-border); + background: var(--bg-terminal); + cursor: pointer; + position: relative; + flex-shrink: 0; + vertical-align: middle; + transition: var(--transition-fast); +} +.lt-checkbox:checked { + background: var(--accent-cyan-dim); + border-color: var(--accent-cyan); +} +.lt-checkbox:checked::after { + content: '✓'; + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.6rem; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); +} +.lt-checkbox:hover { border-color: var(--accent-cyan); } +.lt-checkbox:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; +} +.lt-checkbox:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +/* Radio (same visual language as checkbox) */ +.lt-radio { + appearance: none; + width: 14px; + height: 14px; + border: 1px solid var(--accent-cyan-border); + border-radius: 50%; + background: var(--bg-terminal); + cursor: pointer; + flex-shrink: 0; + vertical-align: middle; + transition: var(--transition-fast); + position: relative; +} +.lt-radio:checked { + border-color: var(--accent-cyan); + background: var(--accent-cyan-dim); +} +.lt-radio:checked::after { + content: ''; + position: absolute; + inset: 3px; + border-radius: 50%; + background: var(--accent-cyan); + box-shadow: var(--glow-cyan); +} +.lt-radio:hover { border-color: var(--accent-cyan); } +.lt-radio:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; +} +.lt-radio:disabled { opacity: 0.4; cursor: not-allowed; } + + +/* ---------------------------------------------------------------- + 11. TABLES + ---------------------------------------------------------------- */ +.lt-table-wrap { overflow-x: auto; } + +.lt-table { + width: 100%; + border-collapse: collapse; + font-size: 0.78rem; +} + +.lt-table thead { + border-bottom: 1px solid var(--accent-cyan-border); + background: rgba(0,212,255,0.04); +} + +.lt-table th { + padding: 0.6rem 0.85rem; + text-align: left; + font-size: 0.62rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.16em; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + white-space: nowrap; + cursor: default; +} + +.lt-table th[data-sort-key] { cursor: pointer; } +.lt-table th[data-sort-key]:hover { + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} +.lt-table th[data-sort-key]:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; } + +.lt-table td { + padding: 0.55rem 0.85rem; + border-bottom: 1px solid var(--border-color-dim); + color: var(--text-primary); + vertical-align: middle; + overflow-wrap: break-word; + word-break: break-word; + max-width: 280px; /* prevent single cell from expanding table beyond viewport */ +} + +.lt-table tbody tr { transition: var(--transition-fast); } +.lt-table tbody tr:hover { + background: rgba(0,212,255,0.04); + outline: 1px solid var(--border-color-dim); + outline-offset: -1px; +} + +/* Row priority accent bars */ +.lt-row-critical, .lt-row-p1 { + border-left: 2px solid var(--priority-1) !important; + background: rgba(255,45,85,0.035) !important; +} +.lt-row-warning, .lt-row-p2 { border-left: 2px solid var(--priority-2) !important; } +.lt-row-p3 { border-left: 2px solid var(--priority-3) !important; } +.lt-row-p4 { border-left: 2px solid var(--priority-4) !important; } + +/* Compact data table */ +.lt-data-table { + width: 100%; + border-collapse: collapse; + font-size: 0.75rem; +} +.lt-data-table td { + padding: 0.3rem 0.5rem; + border-bottom: 1px solid var(--border-color-dim); +} +.lt-data-table thead tr { border-bottom: 1px solid var(--border-color); } +.lt-data-table th { + font-size: 0.62rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--accent-cyan); + padding: 0.35rem 0.5rem; +} +.lt-data-table-wrapper { padding: 0 var(--space-xs); } + + +/* ---------------------------------------------------------------- + 12. STATUS BADGES, CHIPS, PRIORITY + ---------------------------------------------------------------- */ +.lt-status { + display: inline-block; + padding: 0.14rem 0.5rem; + font-size: 0.58rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.15em; + border: 1px solid currentColor; + background: transparent; + white-space: nowrap; +} + +.lt-status-open { color: var(--status-open); background: rgba(0,255,136,0.07); } +.lt-status-pending { color: var(--status-pending); background: rgba(191,95,255,0.07); } +.lt-status-in-progress { color: var(--status-in-progress); background: rgba(255,179,0,0.07); } +.lt-status-closed { color: var(--status-closed); background: rgba(255,45,85,0.07); } +.lt-status-online { color: var(--status-online); background: rgba(0,255,136,0.07); text-shadow: var(--glow-green); } +.lt-status-offline { color: var(--status-offline); background: rgba(255,45,85,0.07); } +.lt-status-running { color: var(--status-running); background: rgba(255,179,0,0.07); animation: pulse-amber 2s infinite; will-change: color; } +.lt-status-completed { color: var(--status-completed); background: rgba(0,212,255,0.07); } +.lt-status-failed { color: var(--status-failed); background: rgba(255,45,85,0.07); } + +/* Priority badges */ +.lt-priority, +.lt-p1, .lt-p2, .lt-p3, .lt-p4, .lt-p5 { + display: inline-block; + padding: 0.12rem 0.45rem; + font-size: 0.58rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + border: 1px solid currentColor; +} + +.lt-p1 { color: var(--priority-1); background: rgba(255,45,85,0.09); border-color: rgba(255,45,85,0.4); text-shadow: var(--glow-red); } +.lt-p2 { color: var(--priority-2); background: rgba(255,107,0,0.09); border-color: rgba(255,107,0,0.38); } +.lt-p3 { color: var(--priority-3); background: rgba(0,212,255,0.07); border-color: rgba(0,212,255,0.30); } +.lt-p4 { color: var(--priority-4); background: rgba(0,255,136,0.07); border-color: rgba(0,255,136,0.30); } +.lt-p5 { color: var(--priority-5); background: rgba(62,96,122,0.09); border-color: rgba(62,96,122,0.30); } + +/* Chips */ +.lt-chip { + display: inline-flex; + align-items: center; + padding: 0.15rem 0.5rem; + font-size: 0.58rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + border: 1px solid currentColor; +} + +.lt-chip-ok { color: var(--accent-green); background: var(--accent-green-dim); text-shadow: var(--glow-green); } +.lt-chip-warn { color: var(--accent-amber); background: var(--accent-amber-dim); } +.lt-chip-critical { color: var(--accent-red); background: var(--accent-red-dim); text-shadow: var(--glow-red); } +.lt-chip-info { color: var(--accent-cyan); background: var(--accent-cyan-dim); text-shadow: var(--glow-cyan); } + +/* Generic badges */ +.lt-badge { + display: inline-block; + padding: 0.1rem 0.4rem; + font-size: 0.56rem; + font-weight: 700; + letter-spacing: 0.1em; + border: 1px solid currentColor; +} +.lt-badge-green { color: var(--accent-green); } +.lt-badge-amber { color: var(--accent-amber); } +.lt-badge-red { color: var(--accent-red); } + +/* Status + priority badge variants (dark-mode base) */ +.lt-badge-open { color: var(--accent-green); background: rgba(0,255,136,0.08); border-color: rgba(0,255,136,0.35); text-shadow: var(--glow-green); } +.lt-badge-closed { color: var(--text-muted); background: rgba(74,90,112,0.10); border-color: rgba(74,90,112,0.35); } +.lt-badge-in-progress, +.lt-badge-progress { color: var(--accent-amber); background: rgba(255,179,0,0.08); border-color: rgba(255,179,0,0.35); } +.lt-badge-pending { color: var(--accent-purple); background: rgba(191,95,255,0.08); border-color: rgba(191,95,255,0.35); } +.lt-badge-p1 { color: var(--accent-red); background: rgba(255,45,85,0.09); border-color: rgba(255,45,85,0.40); text-shadow: var(--glow-red); } +.lt-badge-p2 { color: var(--accent-orange); background: rgba(255,107,0,0.09); border-color: rgba(255,107,0,0.38); } +.lt-badge-p3 { color: var(--accent-cyan); background: rgba(0,212,255,0.07); border-color: rgba(0,212,255,0.30); } +.lt-badge-p4 { color: var(--accent-green); background: rgba(0,255,136,0.07); border-color: rgba(0,255,136,0.30); } + +/* Status dots */ +.lt-dot { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; +} +.lt-dot-up { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green), 0 0 14px var(--accent-green); animation: pulse-green 2.2s ease-in-out infinite; will-change: box-shadow; } +.lt-dot-down { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red), 0 0 12px var(--accent-red); } +.lt-dot-warn { background: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber), 0 0 12px var(--accent-amber); animation: pulse-amber 2.2s ease-in-out infinite; will-change: box-shadow; } +.lt-dot-idle { background: var(--text-muted); box-shadow: none; } + + +/* ---------------------------------------------------------------- + 13. MODALS + ---------------------------------------------------------------- */ +.lt-modal-overlay { + display: none; + position: fixed; + inset: 0; + background: var(--bg-overlay); + backdrop-filter: blur(8px); + z-index: var(--z-modal-backdrop); + align-items: center; + justify-content: center; +} +.lt-modal-overlay.is-open { display: flex; } + +.lt-modal { + position: relative; + background: var(--bg-secondary); + border: 1px solid var(--accent-cyan-border); + width: min(520px, 92vw); + max-height: 85vh; + display: flex; + flex-direction: column; + box-shadow: var(--box-glow-cyan), 0 40px 80px rgba(0,0,0,0.85); + clip-path: polygon( + 0 0, + calc(100% - 18px) 0, + 100% 18px, + 100% 100%, + 18px 100%, + 0 calc(100% - 18px) + ); + animation: modal-in 0.18s ease; +} +.lt-modal::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); + box-shadow: var(--glow-cyan); +} + +.lt-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--border-color); + background: rgba(0,212,255,0.035); + flex-shrink: 0; +} + +.lt-modal-title { + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.16em; + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} + +.lt-modal-close { + background: none; + border: none; + color: var(--text-muted); + font-size: 0.85rem; + line-height: 1; + cursor: pointer; + padding: 0.2rem 0.4rem; + transition: var(--transition-fast); +} +.lt-modal-close:hover { color: var(--accent-red); text-shadow: var(--glow-red); } +.lt-modal-close:active { color: var(--accent-red); opacity: 0.7; } +.lt-modal-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } + +.lt-modal-body { + padding: var(--space-lg); + overflow-y: auto; + flex: 1; +} + +.lt-modal-footer { + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--space-sm); + padding: 0.75rem 1rem; + border-top: 1px solid var(--border-color-dim); + background: rgba(0,0,0,0.25); + flex-shrink: 0; +} + + +/* ---------------------------------------------------------------- + 14. TOAST NOTIFICATIONS + ---------------------------------------------------------------- */ +#lt-toast-container { + position: fixed; + bottom: var(--space-lg); + right: var(--space-lg); + display: flex; + flex-direction: column; + gap: var(--space-sm); + z-index: var(--z-toast); + pointer-events: none; +} + +.lt-toast { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: 0.5rem 0.9rem; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + min-width: 240px; + max-width: 380px; + border-left: 2px solid currentColor; + background: var(--bg-overlay, rgba(6,12,20,0.97)); + backdrop-filter: blur(8px); + border-top: 1px solid var(--border-dim); + border-right: 1px solid var(--border-dim); + border-bottom: 1px solid var(--border-dim); + pointer-events: all; + animation: toast-in 0.2s ease; + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); +} + +.lt-toast-success { color: var(--accent-green); border-left-color: var(--accent-green); box-shadow: var(--box-glow-green); } +.lt-toast-error { color: var(--accent-red); border-left-color: var(--accent-red); box-shadow: var(--box-glow-red); } +.lt-toast-warning { color: var(--accent-amber); border-left-color: var(--accent-amber); box-shadow: var(--box-glow-amber); } +.lt-toast-info { color: var(--accent-cyan); border-left-color: var(--accent-cyan); box-shadow: var(--box-glow-cyan); } + + +/* ---------------------------------------------------------------- + 15. TAB NAVIGATION + ---------------------------------------------------------------- */ +.lt-tabs { + display: flex; + align-items: flex-end; + gap: 2px; + border-bottom: 1px solid var(--border-color); + margin-bottom: var(--space-lg); +} + +.lt-tab { + padding: 0.45rem 0.9rem; + font-family: var(--font-mono); + font-size: 0.67rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.14em; + color: var(--text-muted); + background: transparent; + border: 1px solid transparent; + border-bottom: none; + cursor: pointer; + transition: var(--transition-fast); +} +.lt-tab:hover { + color: var(--text-secondary); + background: rgba(0,212,255,0.04); + border-color: var(--border-color-dim); +} +.lt-tab.active { + color: var(--accent-orange); + text-shadow: var(--glow-orange); + background: var(--bg-card); + border-color: var(--accent-orange-border); + border-bottom-color: var(--bg-card); +} +.lt-tab:focus-visible { + outline: 2px solid var(--accent-orange); + outline-offset: -2px; +} + +.lt-tab-panel { display: none; } +.lt-tab-panel.active { display: block; } + + +/* ---------------------------------------------------------------- + 16. SIDEBAR / FILTER PANEL + ---------------------------------------------------------------- */ +.lt-sidebar { + width: var(--sidebar-width); + flex-shrink: 0; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + transition: var(--transition-default); +} +.lt-sidebar.collapsed { width: 32px; overflow: hidden; } + +.lt-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 0.75rem; + font-size: 0.63rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.18em; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + border-bottom: 1px solid var(--border-color); + background: rgba(0,212,255,0.035); +} + +.lt-sidebar-toggle { + background: none; + border: none; + color: var(--text-muted); + font-size: 0.65rem; + cursor: pointer; + padding: 0.1rem 0.3rem; + transition: var(--transition-fast); +} +.lt-sidebar-toggle:hover { color: var(--accent-cyan); text-shadow: var(--glow-cyan); } +.lt-sidebar-toggle:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } + +.lt-sidebar-body { padding: var(--space-md); } + +.lt-filter-group { + margin-bottom: var(--space-md); + padding: 0 0 var(--space-md) 0; + border: none; + border-bottom: 1px solid var(--border-color-dim); + min-width: 0; /* fieldset UA reset */ +} +.lt-filter-group:last-child { border-bottom: none; } + +.lt-filter-label { + display: block; + font-size: 0.6rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.15em; + color: var(--accent-orange); + margin-bottom: var(--space-sm); +} + +.lt-filter-option { + display: flex; + align-items: center; + gap: var(--space-sm); + font-size: 0.75rem; + color: var(--text-secondary); + margin-bottom: var(--space-xs); + cursor: pointer; + transition: var(--transition-fast); +} +.lt-filter-option:hover { color: var(--text-primary); } + + +/* ---------------------------------------------------------------- + 17. STATS WIDGETS + ---------------------------------------------------------------- */ +.lt-stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); + gap: var(--space-md); + margin-bottom: var(--space-lg); +} + +.lt-stat-card { + position: relative; + display: flex; + align-items: center; + gap: var(--space-md); + padding: var(--space-md); + background: var(--bg-card); + border: 1px solid var(--border-color); + cursor: pointer; + transition: var(--transition-fast); + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + overflow: hidden; +} + +/* Left accent bar */ +.lt-stat-card::before { + content: ''; + position: absolute; + top: 0; left: 0; + width: 2px; height: 0%; + background: var(--accent-cyan); + box-shadow: var(--glow-cyan); + transition: height 0.3s ease; +} + +.lt-stat-card:hover, +.lt-stat-card.active, +.lt-stat-card:focus-visible { + background: var(--bg-tertiary); + border-color: var(--accent-cyan-border); + box-shadow: var(--box-glow-cyan); +} +.lt-stat-card:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; } +.lt-stat-card:hover::before, +.lt-stat-card.active::before { height: 100%; } + +.lt-stat-card.active { + border-color: var(--accent-orange-border); + box-shadow: var(--box-glow-orange); +} +.lt-stat-card.active::before { + background: var(--accent-orange); + box-shadow: var(--glow-orange); +} + +.lt-stat-icon { font-size: 1.3rem; line-height: 1; opacity: 0.80; } +.lt-stat-info { display: flex; flex-direction: column; } + +.lt-stat-value { + font-size: 1.6rem; + font-weight: 700; + line-height: 1; + color: var(--accent-orange); + text-shadow: var(--glow-orange); +} + +.lt-stat-label { + font-size: 0.58rem; + text-transform: uppercase; + letter-spacing: 0.16em; + color: var(--text-muted); + margin-top: 2px; +} + + +/* ---------------------------------------------------------------- + 18. INLINE MESSAGES + ---------------------------------------------------------------- */ +.lt-msg { + padding: 0.5rem 0.85rem; + font-size: 0.75rem; + border-left: 2px solid currentColor; + margin-bottom: var(--space-sm); + display: flex; + align-items: flex-start; + gap: var(--space-sm); +} +.lt-msg::before { flex-shrink: 0; font-weight: 700; } + +.lt-msg-error { color: var(--accent-red); background: var(--accent-red-dim); border-left-color: var(--accent-red); } +.lt-msg-success { color: var(--accent-green); background: var(--accent-green-dim); border-left-color: var(--accent-green); } +.lt-msg-warning { color: var(--accent-amber); background: var(--accent-amber-dim); border-left-color: var(--accent-amber); } +.lt-msg-info { color: var(--accent-cyan); background: var(--accent-cyan-dim); border-left-color: var(--accent-cyan); } + +.lt-msg-error::before { content: '✗'; } +.lt-msg-success::before { content: '✓'; } +.lt-msg-warning::before { content: '!'; } +.lt-msg-info::before { content: 'i'; } + + +/* ---------------------------------------------------------------- + 19. LOADING & EMPTY STATES + ---------------------------------------------------------------- */ +.lt-loading { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + color: var(--text-muted); + font-size: 0.72rem; +} +.lt-loading::before { + content: ''; + display: inline-block; + width: 14px; height: 14px; + border: 2px solid var(--border-color); + border-top-color: var(--accent-cyan); + border-radius: 50%; + animation: spin 0.75s linear infinite; +} +.lt-loading::after { + content: 'Loading...'; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.lt-skeleton { + background: linear-gradient( + 90deg, + var(--bg-secondary) 25%, + var(--bg-tertiary) 50%, + var(--bg-secondary) 75% + ); + background-size: 300% 100%; + animation: shimmer 1.8s ease-in-out infinite; +} + +.lt-empty { + color: var(--text-dim); + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.12em; + text-align: center; + padding: var(--space-xl); +} +.lt-empty::before { content: '[ '; color: var(--text-muted); } +.lt-empty::after { content: ' ]'; color: var(--text-muted); } + + +/* ---------------------------------------------------------------- + 20. BOOT SEQUENCE OVERLAY + ---------------------------------------------------------------- */ +.lt-boot-overlay { + position: fixed; + inset: 0; + background: #000; + z-index: calc(var(--z-overlay) + 1); + display: flex; + align-items: flex-start; + justify-content: flex-start; + padding: var(--space-2xl); + animation: boot-fade 0.5s ease 2.2s forwards; +} + +.lt-boot-text { + font-family: var(--font-mono); + font-size: 0.78rem; + color: var(--accent-green); + text-shadow: var(--glow-green); + line-height: 1.7; + white-space: pre-wrap; + overflow: hidden; +} + + +/* ---------------------------------------------------------------- + 21. LOG / TIMELINE ENTRIES + ---------------------------------------------------------------- */ +.lt-log-entry { + padding: 0.5rem 0.75rem; + border-left: 2px solid var(--border-color); + margin-bottom: 2px; + font-size: 0.75rem; + background: rgba(0,0,0,0.2); + transition: var(--transition-fast); +} +.lt-log-entry:hover { background: rgba(0,212,255,0.025); } +.lt-log-entry.success { border-left-color: var(--accent-green); } +.lt-log-entry.warning { border-left-color: var(--accent-amber); } +.lt-log-entry.error { border-left-color: var(--accent-red); } + +.lt-log-ts { + font-size: 0.6rem; + color: var(--text-muted); + margin-bottom: 2px; + letter-spacing: 0.04em; +} + +.lt-log-output { + font-size: 0.67rem; + color: var(--accent-green); + background: var(--bg-terminal); + padding: 0.2rem 0.45rem; + margin-top: 0.35rem; + border-left: 1px solid var(--accent-green-border); + text-shadow: var(--glow-green); +} + +/* Toolbar row */ +.lt-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + padding: var(--space-sm) 0; + margin-bottom: var(--space-md); +} +.lt-toolbar-left, +.lt-toolbar-right { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +/* Running / pulsing row */ +.lt-item-running { animation: running-pulse 3s ease-in-out infinite; } + + +/* ---------------------------------------------------------------- + 22. ANIMATIONS (KEYFRAMES) + ---------------------------------------------------------------- */ +@keyframes pulse-green { + 0%, 100% { box-shadow: 0 0 4px var(--accent-green), 0 0 8px var(--accent-green); } + 50% { box-shadow: 0 0 8px var(--accent-green), 0 0 22px var(--accent-green), 0 0 36px rgba(0,255,136,0.35); } +} + +@keyframes pulse-amber { + 0%, 100% { box-shadow: 0 0 4px var(--accent-amber), 0 0 8px var(--accent-amber); } + 50% { box-shadow: 0 0 8px var(--accent-amber), 0 0 20px var(--accent-amber); } +} + +@keyframes running-pulse { + 0%, 100% { border-color: var(--border-color); } + 50% { border-color: rgba(255,179,0,0.25); box-shadow: 0 0 14px rgba(255,179,0,0.12); } +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +@keyframes shimmer { + 0% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +@keyframes toast-in { + from { opacity: 0; transform: translateX(16px); } + to { opacity: 1; transform: translateX(0); } +} + +@keyframes modal-in { + from { opacity: 0; transform: scale(0.96) translateY(-10px); } + to { opacity: 1; transform: scale(1) translateY(0); } +} + +@keyframes boot-fade { + to { opacity: 0; pointer-events: none; } +} + +@keyframes blink { + 0%, 49% { opacity: 1; } + 50%, 100% { opacity: 0; } +} + +@keyframes glitch-1 { + 0%, 90%, 100% { clip-path: inset(0); transform: skewX(0); } + 92% { clip-path: inset(15% 0 72% 0); transform: skewX(-4deg); } + 94% { clip-path: inset(54% 0 22% 0); transform: skewX(3deg); } + 96% { clip-path: inset(30% 0 48% 0); transform: skewX(-2deg); } +} + +@keyframes glitch-2 { + 0%, 90%, 100% { clip-path: inset(0); transform: skewX(0); } + 92% { clip-path: inset(60% 0 8% 0); transform: skewX(3deg); } + 94% { clip-path: inset(8% 0 68% 0); transform: skewX(-3deg); } + 96% { clip-path: inset(42% 0 38% 0); transform: skewX(1deg); } +} + + +/* ================================================================ + 23. RESPONSIVE DESIGN + + Breakpoint system (desktop-first with mobile-first enhancements): + xs: ≤ 479px tiny phones (iPhone SE 1st gen, Galaxy A) + sm: 480–767px phones (iPhone 14, Pixel 7, Galaxy S) + md: 768–1023px tablets (iPad mini/Air portrait) + lg: 1024–1279px laptops (iPad Pro landscape, MacBook Air 11") + xl: 1280–1535px desktops (MacBook Pro 13", 1080p portrait) + 2xl: 1536–1919px large (27" iMac, 1440p) + 3xl: 1920–2559px full HD (1080p monitor, 24") + 4k: ≥ 2560px 4K/ultrawide (4K, 1440p ultrawide) + ================================================================ */ + +/* ── Breakpoint tokens (read by JS lt.viewport module) ── */ +:root { + --bp-xs: 479; + --bp-sm: 480; + --bp-md: 768; + --bp-lg: 1024; + --bp-xl: 1280; + --bp-2xl: 1536; + --bp-3xl: 1920; + --bp-4k: 2560; +} + +/* ── Mobile nav drawer ── */ +.lt-menu-btn { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 36px; height: 36px; + padding: 6px; + background: none; + border: 1px solid var(--border-dim); + cursor: pointer; + flex-shrink: 0; +} +.lt-menu-btn span { + display: block; + height: 1px; + background: var(--accent-cyan); + transition: transform 0.2s ease, opacity 0.2s ease; + box-shadow: var(--glow-cyan); +} +.lt-menu-btn:active { opacity: 0.7; } +.lt-menu-btn:focus-visible { outline: 1px solid var(--accent-cyan); outline-offset: 2px; } +.lt-menu-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } +.lt-menu-btn.open span:nth-child(2) { opacity: 0; } +.lt-menu-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } + +.lt-nav-drawer { + position: fixed; + top: 0; left: 0; bottom: 0; + width: 280px; + background: var(--bg-secondary); + border-right: 1px solid var(--border-color); + box-shadow: 4px 0 32px rgba(0,0,0,0.8); + z-index: calc(var(--z-overlay) + 3); + transform: translateX(-100%); + transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); + overflow-y: auto; + overflow-x: hidden; + overscroll-behavior: contain; + display: flex; + flex-direction: column; +} +.lt-nav-drawer.open { transform: translateX(0); } + +.lt-nav-drawer-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-md) var(--space-lg); + border-bottom: 1px solid var(--border-color); + min-height: var(--header-height); +} +.lt-nav-drawer-close { + background: none; + border: 1px solid var(--border-dim); + color: var(--text-dim); + cursor: pointer; + width: 44px; height: 44px; /* 44px touch target */ + font-size: 0.9rem; + display: flex; align-items: center; justify-content: center; + flex-shrink: 0; + transition: color 0.15s, border-color 0.15s; +} +.lt-nav-drawer-close:hover { color: var(--accent-red); border-color: var(--accent-red); } +.lt-nav-drawer-close:focus-visible { outline: 1px solid var(--accent-cyan); outline-offset: 2px; } + +.lt-nav-drawer-links { padding: var(--space-sm) 0; flex: 1; } +.lt-nav-drawer-link { + display: flex; + align-items: center; + padding: 0.75rem var(--space-lg); + font-family: var(--font-mono); + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-secondary); + text-decoration: none; + transition: color 0.15s, background 0.15s, padding-left 0.15s; + border-left: 2px solid transparent; + min-height: 44px; +} +.lt-nav-drawer-link:hover { color: var(--accent-cyan); background: rgba(0,212,255,0.06); padding-left: calc(var(--space-lg) + 4px); } +.lt-nav-drawer-link:focus-visible { outline: none; color: var(--accent-cyan); background: rgba(0,212,255,0.10); box-shadow: inset 3px 0 0 var(--accent-cyan); } +.lt-nav-drawer-link.active, +.lt-nav-drawer-link[aria-current="page"] { color: var(--accent-orange); border-left-color: var(--accent-orange); background: rgba(255,107,0,0.06); } +.lt-nav-drawer-link--indent { padding-left: calc(var(--space-lg) + var(--space-md)); font-size: 0.75rem; font-weight: 400; text-transform: none; letter-spacing: 0; } +.lt-nav-drawer-section { + padding: var(--space-sm) var(--space-lg) var(--space-xs); + font-family: var(--font-mono); + font-size: 0.6rem; + text-transform: uppercase; + letter-spacing: 0.15em; + color: var(--text-dim); + border-top: 1px solid var(--border-dim); + margin-top: var(--space-xs); +} + +.lt-nav-drawer-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.75); + backdrop-filter: blur(2px); + z-index: calc(var(--z-overlay) + 2); +} +.lt-nav-drawer-overlay.open { display: block; } + + +/* ── Safe areas (iPhone notch / Dynamic Island / home bar) ── */ +@supports (padding: env(safe-area-inset-left)) { + /* Header: pad for notch in landscape, Dynamic Island on top */ + .lt-header { + padding-left: max(var(--space-xl), env(safe-area-inset-left)); + padding-right: max(var(--space-xl), env(safe-area-inset-right)); + } + /* Main content: header-height already includes safe-area-top via header height — + only add safe-area-top once to avoid double-counting */ + .lt-main { + padding-top: calc(var(--header-height) + env(safe-area-inset-top) + var(--space-lg)); + } + /* Nav drawer: account for notch on both top and left (landscape) */ + .lt-nav-drawer { + padding-top: max(var(--header-height), env(safe-area-inset-top)); + padding-left: env(safe-area-inset-left); + } + /* Toast: stay above home bar */ + #lt-toast-container { + bottom: max(var(--space-lg), calc(env(safe-area-inset-bottom) + var(--space-sm))); + right: max(var(--space-lg), env(safe-area-inset-right)); + right: max(var(--space-sm), env(safe-area-inset-right)); /* SM override merged */ + } + /* Bottom-fixed UI (modals, cmd palette at XS) */ + .lt-modal-overlay.bottom-safe, + .lt-cmd-overlay.bottom-safe { + padding-bottom: env(safe-area-inset-bottom); + } +} + + +/* ── Touch / coarse pointer (finger-friendly tap targets) ── */ +@media (pointer: coarse) { + .lt-btn, .lt-input, .lt-select, .lt-textarea { min-height: 44px; } + .lt-btn-sm { min-height: 44px; } /* 44px minimum per WCAG / Apple HIG */ + .lt-menu-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } + .lt-nav-link { padding: 0 var(--space-md); min-height: 44px; display: inline-flex; align-items: center; } + .lt-accordion-header { min-height: 48px; } + .lt-tab { min-height: 44px; padding: var(--space-sm) var(--space-lg); } + .lt-list-item { min-height: 44px; } + .lt-page-btn { min-height: 44px; min-width: 44px; } + .lt-dropdown-trigger { min-height: 44px; } + .lt-notif-bell-btn { min-height: 44px !important; min-width: 44px; } + .lt-checkbox, .lt-radio { width: 20px; height: 20px; } + input[type="range"].lt-range { height: 8px; } + input[type="range"].lt-range::-webkit-slider-thumb { width: 22px; height: 22px; } +} + + +/* ── No-hover / touch devices ── */ +@media (hover: none) { + /* Suppress hover-only decorations on touch */ + [data-tooltip]::before, + [data-tooltip]::after { display: none; } + /* Glitch causes expensive repaints on mobile — disable */ + .lt-glitch::before, + .lt-glitch::after { display: none; } + /* Suppress padding-left shift on touch (causes layout jank on tap) */ + .lt-nav-drawer-link:hover { padding-left: var(--space-lg); } +} + +/* ── Coarse pointer — additional touch performance tweaks ── */ +@media (pointer: coarse) { + /* Disable infinite animations that drain battery on mobile */ + .lt-dot-up, .lt-dot-warn { animation: none; } + .lt-status-running { animation: none; } + .lt-item-running { animation: none; } + /* Use simple pulsing glow instead for coarse-pointer devices */ + .lt-dot-up { box-shadow: 0 0 6px var(--accent-green); } + .lt-dot-warn { box-shadow: 0 0 6px var(--accent-amber); } +} + + +/* ── High-DPI / Retina ── */ +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .lt-header::after { height: 0.5px; } + .lt-frame, .lt-card, .lt-input, .lt-select, .lt-btn { border-width: 0.5px; } + .lt-frame::before { font-size: 0.6rem; } +} + + +/* ── Landscape phone (short viewport) ── */ +@media (max-height: 500px) and (orientation: landscape) { + :root { --header-height: 42px; } + .lt-main { padding-top: calc(42px + var(--space-md)); } + .lt-boot-overlay { display: none; } + .lt-modal { + align-items: flex-start; + padding-top: 48px; + overflow-y: auto; + } + .lt-modal .lt-modal { max-height: calc(100vh - 56px); overflow-y: auto; } +} + + +/* ── LG — laptops 1024–1279px ── */ +@media (max-width: 1279px) { + .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } + .lt-container { padding: var(--space-lg); } +} + + +/* ── MD — tablets portrait 768–1023px ── */ +@media (max-width: 1023px) { + .lt-menu-btn { display: flex; } + .lt-nav { display: none; } + + .lt-grid-3, .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } + .lt-stats-grid { grid-template-columns: repeat(2, 1fr); } + .lt-container { padding: var(--space-md) var(--space-lg); } + .lt-header { padding: 0 var(--space-lg); } + + /* Sidebar becomes off-canvas on tablets */ + .lt-sidebar { + position: fixed; + top: var(--header-height); + left: 0; bottom: 0; + width: var(--sidebar-width); + transform: translateX(-100%); + transition: transform 0.25s ease; + z-index: var(--z-fixed); + border-right: 1px solid var(--border-color); + overflow-y: auto; + } + .lt-sidebar.open { transform: translateX(0); } + .lt-layout { display: block; } + .lt-content { width: 100%; } +} + + +/* ── SM — phones 480–767px ── */ +@media (max-width: 767px) { + :root { --header-height: 50px; } + .lt-main { padding-top: calc(50px + var(--space-md)); } + + .lt-container { padding: var(--space-md); } + .lt-header { padding: 0 var(--space-md); } + .lt-brand-subtitle { display: none; } + + .lt-grid-2, .lt-grid-3, .lt-grid-4 { grid-template-columns: 1fr; } + .lt-stats-grid { grid-template-columns: repeat(2, 1fr); } + + .lt-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-sm); } + .lt-toolbar-left, .lt-toolbar-right { flex-wrap: wrap; gap: var(--space-xs); } + .lt-search { flex: 1 1 100%; } + .lt-search .lt-search-input { width: 100%; } + .lt-page-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } + .lt-btn-group { flex-wrap: wrap; } + + /* Kanban: stay 2-col on SM so columns remain legible */ + #tab-kanban .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } + + /* Drawer form 2-col → 1-col on SM */ + .lt-drawer-form-grid { grid-template-columns: 1fr !important; } + + /* Full-width modals on phone */ + .lt-modal { + width: 96vw; + max-height: 90vh; + overflow-y: auto; + } + + /* Command palette full-width */ + .lt-cmd-palette { + max-width: 96vw; + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); + } + + /* Smaller clip corners feel better on mobile */ + .lt-frame { + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); + } + .lt-card { + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); + } + + /* Toast full-width on phone */ + #lt-toast-container { + left: var(--space-sm); + right: var(--space-sm); + bottom: var(--space-md); + } + .lt-toast { width: 100%; } + + /* Stepper goes vertical on small screens */ + .lt-stepper { flex-direction: column; gap: var(--space-sm); } + .lt-step { flex-direction: row; align-items: center; gap: var(--space-md); text-align: left; } + .lt-step:not(:last-child)::after { + display: none; + } + .lt-step-num { margin-bottom: 0; flex-shrink: 0; } + + /* KV grid stacks on mobile */ + .lt-kv-grid { grid-template-columns: 1fr; } + .lt-kv-key { border-right: none; border-bottom: 1px solid var(--border-dim); padding: var(--space-xs) 0 2px; } + .lt-kv-val { padding: 2px 0 var(--space-sm); } + + /* Pagination compact — show fewer buttons via CSS */ + .lt-page-btn:not(.active):not(:first-child):not(:last-child):not([disabled]) { + display: none; + } + .lt-page-btn.active, + .lt-page-btn:first-child, + .lt-page-btn:last-child { display: inline-flex; } + + /* Dropzone: smaller on mobile */ + .lt-dropzone { padding: var(--space-lg) var(--space-md); } + .lt-dropzone-icon { font-size: 1.5rem; } + + /* Section body: tighter on mobile */ + .lt-section-body { padding: var(--space-sm); padding-right: var(--space-md); } + + /* Data table card mode already at 640px; also reduce font */ + .lt-data-table th, + .lt-data-table td { padding: 0.5rem 0.6rem; font-size: 0.75rem; } + + /* Hero */ + .lt-hero { padding: var(--space-lg) 0; } + .lt-hero-actions { flex-direction: column; align-items: stretch; } + + /* Code block: tighter font on phone */ + .lt-code-block pre { font-size: 0.72rem; } + + /* Stats grid gap tighter */ + .lt-stats-grid { gap: var(--space-sm); } + .lt-stat-card { padding: var(--space-sm); } + .lt-stat-value { font-size: 1.6rem; } +} + + +/* ── XS — tiny phones ≤ 479px ── */ +@media (max-width: 479px) { + :root { --header-height: 46px; } + .lt-main { padding-top: calc(46px + var(--space-sm)); } + + .lt-container { padding: var(--space-sm); } + .lt-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); } + .lt-stat-card { padding: var(--space-xs) var(--space-sm); } + .lt-stat-value { font-size: 1.4rem; } + + .lt-frame { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); } + /* Ensure content clears the 6px clipped corner */ + .lt-section-body { padding: var(--space-xs) var(--space-sm); padding-right: 14px; } + + /* Full-width drawer on tiny phones */ + .lt-nav-drawer { width: 100%; max-width: 100vw; } + + /* Btn groups stack vertically only in primary action areas, not everywhere */ + .lt-page-header .lt-btn-group { flex-direction: column; width: 100%; } + .lt-page-header .lt-btn-group .lt-btn { width: 100%; } + + /* Full-screen bottom-sheet modal on XS */ + .lt-modal-overlay { align-items: flex-end; padding: 0; } + .lt-modal { + width: 100%; + max-width: 100vw; + max-height: 92vh; + overflow-y: auto; + clip-path: none; + border: none; + border-top: 1px solid var(--border-color); + border-radius: 0; + /* Bottom sheet rounding illusion via top corners */ + clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px); + } + .lt-modal-body { max-height: calc(92vh - 120px); overflow-y: auto; } + + /* Full-screen bottom-sheet command palette on XS */ + .lt-cmd-overlay { align-items: flex-end; padding-top: 0; } + .lt-cmd-palette { + max-width: 100%; + width: 100%; + clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px); + border-bottom: none; + } + + .lt-data-table th, + .lt-data-table td { padding: 0.4rem 0.5rem; font-size: 0.75rem; } + + .lt-tab { padding: var(--space-xs) var(--space-sm); font-size: 0.7rem; } + + /* Toolbar stacks fully on XS */ + .lt-toolbar-left, .lt-toolbar-right { + flex-wrap: wrap; + gap: var(--space-xs); + width: 100%; + } + .lt-search { flex: 1 1 100%; } + .lt-search .lt-search-input { width: 100%; } + .lt-dropdown-wrap { flex: 0 0 auto; } + + /* Grid gap tighter on XS */ + .lt-grid-2, .lt-grid-3, .lt-grid-4 { gap: var(--space-sm); } + + /* Stats grid: 2-col but with tighter gap already set above */ + .lt-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); } + + /* Kanban: stay 2-col on XS so columns are still readable */ + #tab-kanban .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } + + /* Drawer form 2-col → 1-col on XS */ + .lt-drawer-form-grid { grid-template-columns: 1fr !important; } + + /* Dropdowns: constrain to viewport on XS */ + .lt-dropdown-panel { min-width: unset; max-width: 92vw; left: 0; right: auto; } + .lt-dropdown-panel--right { left: auto; right: 0; } + + /* Notification panel: constrain to viewport */ + .lt-notif-panel { width: min(300px, 92vw); } + + /* Pagination: show prev/next + active only on XS */ + .lt-page-btn:not(.active):not(:first-child):not(:last-child):not([disabled]) { display: none; } + .lt-page-btn.active, + .lt-page-btn:first-child, + .lt-page-btn:last-child { display: inline-flex; } +} + + +/* ── 2XL — large desktops 1536–1919px ── */ +@media (min-width: 1536px) { + :root { --container-max: 1800px; } + .lt-header { padding: 0 var(--space-2xl); } + .lt-stats-grid { grid-template-columns: repeat(5, 1fr); } +} + + +/* ── 3XL — full HD 1920–2559px ── */ +@media (min-width: 1920px) { + :root { --container-max: 2000px; } + .lt-stats-grid { grid-template-columns: repeat(6, 1fr); } + .lt-grid-4 { grid-template-columns: repeat(4, 1fr); } + .lt-container { padding: var(--space-xl) var(--space-2xl); } +} + + +/* ── 4K / ULTRA-WIDE ≥ 2560px ── */ +@media (min-width: 2560px) { + html { font-size: 18px; } /* scales all rem-based values ~12% larger */ + :root { + --container-max: 2400px; + --header-height: 4rem; /* 72px at 18px base — was 64px hardcoded */ + --sidebar-width: 17.5rem; /* 315px at 18px base — was 280px hardcoded */ + } + /* Clip-path corners scale proportionally */ + .lt-frame { + clip-path: polygon(0 0, calc(100% - 1.25rem) 0, 100% 1.25rem, 100% 100%, 1.25rem 100%, 0 calc(100% - 1.25rem)); + } + .lt-card { + clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% 0.75rem, 100% 100%, 0 100%); + } + .lt-stats-grid { grid-template-columns: repeat(8, 1fr); } + /* Scale hardcoded-px elements explicitly at 4K */ + .lt-dot { width: 0.6rem; height: 0.6rem; } /* was 8px */ + .lt-menu-btn { width: 2.5rem; height: 2.5rem; } /* was 36px */ + .lt-nav-drawer-close { width: 3rem; height: 3rem; } /* was 44px */ + .lt-step-num { width: 2rem; height: 2rem; } /* was 28px */ + .lt-spinner { width: 1.75rem; height: 1.75rem; } /* was 24px */ + .lt-spinner--sm { width: 1rem; height: 1rem; } /* was 14px */ + .lt-spinner--lg { width: 2.75rem; height: 2.75rem; } /* was 40px */ + .lt-checkbox, .lt-radio { width: 1.1rem; height: 1.1rem; } /* was 14px */ + /* More pronounced glows at 4K */ + :root { + --glow-orange: 0 0 8px #FF6B00, 0 0 24px rgba(255,107,0,0.6); + --glow-cyan: 0 0 8px #00D4FF, 0 0 24px rgba(0,212,255,0.6); + --glow-green: 0 0 8px #00FF88, 0 0 22px rgba(0,255,136,0.55); + --glow-red: 0 0 8px #FF2D55, 0 0 22px rgba(255,45,85,0.55); + --glow-orange-intense: 0 0 10px #FF6B00, 0 0 28px #FF6B00, 0 0 50px rgba(255,107,0,0.5); + --glow-cyan-intense: 0 0 10px #00D4FF, 0 0 28px #00D4FF, 0 0 48px rgba(0,212,255,0.4); + --glow-green-intense: 0 0 10px #00FF88, 0 0 26px #00FF88, 0 0 44px rgba(0,255,136,0.4); + --glow-amber-intense: 0 0 10px #FFB300, 0 0 24px #FFB300, 0 0 42px rgba(255,179,0,0.5); + } +} + + +/* ── Breakpoint visibility utilities ── */ +/* Hide at specific breakpoints */ +@media (max-width: 479px) { .lt-hide-xs { display: none !important; } } +@media (max-width: 767px) { .lt-hide-sm { display: none !important; } } +@media (max-width: 1023px) { .lt-hide-md { display: none !important; } } +@media (max-width: 1279px) { .lt-hide-lg { display: none !important; } } +@media (min-width: 480px) { .lt-show-xs { display: none !important; } } +@media (min-width: 768px) { .lt-show-sm { display: none !important; } } +@media (min-width: 1024px) { .lt-show-md { display: none !important; } } +@media (min-width: 1280px) { .lt-show-lg { display: none !important; } } +/* Touch-only / desktop-only */ +@media (pointer: fine) { .lt-touch-only { display: none !important; } } +@media (pointer: coarse) { .lt-mouse-only { display: none !important; } } + + +/* ---------------------------------------------------------------- + 24. UTILITY CLASSES + ---------------------------------------------------------------- */ +.lt-text-orange { color: var(--accent-orange); text-shadow: var(--glow-orange); } +.lt-text-amber { color: var(--accent-amber); text-shadow: var(--glow-amber); } +.lt-text-cyan { color: var(--accent-cyan); text-shadow: var(--glow-cyan); } +.lt-text-green { color: var(--accent-green); text-shadow: var(--glow-green); } +.lt-text-red { color: var(--accent-red); text-shadow: var(--glow-red); } +.lt-text-muted { color: var(--text-muted); } +.lt-text-dim { color: var(--text-dim); } + +.lt-text-xs { font-size: 0.63rem; } +.lt-text-sm { font-size: 0.78rem; } +.lt-text-lg { font-size: 1rem; } +.lt-text-xl { font-size: 1.2rem; } +.lt-text-upper { text-transform: uppercase; letter-spacing: 0.1em; } + +.lt-hidden { display: none !important; } + +/* Skip navigation link — visible only on focus */ +.lt-skip-link { + position: absolute; + top: -100%; + left: var(--space-sm); + padding: var(--space-xs) var(--space-md); + background: var(--bg-terminal); + color: var(--accent-cyan); + border: 1px solid var(--accent-cyan); + font-family: var(--font-mono); + font-size: 0.8rem; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; + z-index: var(--z-toast); + transition: top 0.1s; +} +.lt-skip-link:focus, .lt-skip-link:focus-visible { top: var(--space-sm); } + +.lt-sr-only { + position: absolute; + width: 1px; height: 1px; + padding: 0; margin: -1px; + overflow: hidden; + clip-path: inset(50%); /* replaces deprecated clip: rect(0,0,0,0) */ + white-space: nowrap; + border: 0; +} + +/* Cursor blink */ +.lt-cursor::after { + content: '█'; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); + animation: blink 1s step-start infinite; + font-size: 0.85em; + margin-left: 1px; +} +@media (prefers-reduced-motion: reduce) { + .lt-cursor::after { animation: none; } +} + +/* Glitch text effect */ +.lt-glitch { position: relative; } +.lt-glitch::before, +.lt-glitch::after { + content: attr(data-text); + position: absolute; + top: 0; left: 0; + width: 100%; + overflow: hidden; +} +.lt-glitch::before { + color: var(--accent-cyan); + opacity: 0.65; + animation: glitch-1 4s infinite; + will-change: clip-path, transform; +} +.lt-glitch::after { + color: var(--accent-orange); + opacity: 0.65; + animation: glitch-2 4s 0.12s infinite; + will-change: clip-path, transform; +} + + +/* ---------------------------------------------------------------- + 25. PRINT STYLES + ---------------------------------------------------------------- */ +@media print { + body::before, body::after { display: none; } + html { background-image: none; background-color: white; } + body { background: white; color: black; } + .lt-header, .lt-boot-overlay, #lt-toast-container { display: none; } + .lt-frame, .lt-card { border: 1px solid #ccc; clip-path: none; } +} + + +/* ---------------------------------------------------------------- + 26. ACCESSIBILITY + ---------------------------------------------------------------- */ +:focus-visible { + outline: 1px solid var(--accent-cyan); + outline-offset: 2px; + box-shadow: var(--box-glow-cyan); +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + + +/* ---------------------------------------------------------------- + 27. PROGRESS BARS + ---------------------------------------------------------------- */ +.lt-progress { + width: 100%; + height: 6px; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + overflow: hidden; + position: relative; +} +.lt-progress-bar { + height: 100%; + background: var(--accent-orange); + box-shadow: var(--glow-orange); + transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; +} +.lt-progress-bar::after { + content: ''; + position: absolute; + top: 0; right: 0; + width: 20px; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4)); +} +.lt-progress--cyan .lt-progress-bar { background: var(--accent-cyan); box-shadow: var(--glow-cyan); } +.lt-progress--green .lt-progress-bar { background: var(--accent-green); box-shadow: var(--glow-green); } +.lt-progress--red .lt-progress-bar { background: var(--accent-red); box-shadow: var(--glow-red); } +.lt-progress--striped .lt-progress-bar { + background-image: repeating-linear-gradient( + 45deg, transparent, transparent 4px, + rgba(0,0,0,0.25) 4px, rgba(0,0,0,0.25) 8px + ); +} +.lt-progress--lg { height: 12px; } +.lt-progress--sm { height: 3px; } +.lt-progress-label { + display: flex; + justify-content: space-between; + font-size: 0.7rem; + color: var(--text-dim); + margin-bottom: var(--space-xs); + font-family: var(--font-mono); + text-transform: uppercase; + letter-spacing: 0.05em; +} + + +/* ---------------------------------------------------------------- + 28. TOOLTIPS + ---------------------------------------------------------------- */ +[data-tooltip] { + position: relative; + cursor: help; +} +[data-tooltip]::before, +[data-tooltip]::after { + position: absolute; + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease, transform 0.15s ease; + z-index: var(--z-tooltip); +} +[data-tooltip]::before { + content: attr(data-tooltip); + background: var(--bg-secondary); + border: 1px solid var(--accent-cyan); + box-shadow: var(--box-glow-cyan); + color: var(--text-primary); + font-family: var(--font-mono); + font-size: 0.7rem; + padding: 4px 8px; + white-space: nowrap; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%) translateY(4px); + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); +} +[data-tooltip]::after { + content: ''; + border: 5px solid transparent; + border-top-color: var(--accent-cyan); + bottom: calc(100% + 3px); + left: 50%; + transform: translateX(-50%) translateY(4px); +} +[data-tooltip]:hover::before, +[data-tooltip]:focus-visible::before, +[data-tooltip]:hover::after, +[data-tooltip]:focus-visible::after { + opacity: 1; + transform: translateX(-50%) translateY(0); +} +[data-tooltip][data-tooltip-pos="bottom"]::before { + bottom: auto; + top: calc(100% + 8px); + transform: translateX(-50%) translateY(-4px); + clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); +} +[data-tooltip][data-tooltip-pos="bottom"]::after { + bottom: auto; + top: calc(100% + 3px); + border-top-color: transparent; + border-bottom-color: var(--accent-cyan); + transform: translateX(-50%) translateY(-4px); +} +[data-tooltip][data-tooltip-pos="bottom"]:hover::before, +[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::before, +[data-tooltip][data-tooltip-pos="bottom"]:hover::after, +[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after { + transform: translateX(-50%) translateY(0); +} + + +/* ---------------------------------------------------------------- + 29. BREADCRUMBS + ---------------------------------------------------------------- */ +.lt-breadcrumb { + display: flex; + align-items: center; + gap: var(--space-xs); + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--text-dim); + flex-wrap: wrap; +} +.lt-breadcrumb-item { display: flex; align-items: center; gap: var(--space-xs); } +.lt-breadcrumb-item a { + color: var(--text-dim); + text-decoration: none; + transition: color 0.15s; +} +.lt-breadcrumb-item a:hover { color: var(--accent-cyan); } +.lt-breadcrumb-item a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } +.lt-breadcrumb-item.active { color: var(--accent-orange); } +.lt-breadcrumb-sep { color: var(--border-dim); } +.lt-breadcrumb-sep::before { content: '/'; } + + +/* ---------------------------------------------------------------- + 30. PAGINATION + ---------------------------------------------------------------- */ +.lt-pagination { + display: flex; + align-items: center; + gap: 4px; + font-family: var(--font-mono); + font-size: 0.75rem; +} +.lt-page-btn { + padding: 4px 10px; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + color: var(--text-secondary); + cursor: pointer; + transition: all 0.15s; + text-decoration: none; + clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); +} +.lt-page-btn:hover { + border-color: var(--accent-cyan); + color: var(--accent-cyan); + box-shadow: var(--box-glow-cyan); +} +.lt-page-btn.active { + background: var(--accent-orange); + border-color: var(--accent-orange); + color: var(--bg-primary); + box-shadow: var(--glow-orange); + font-weight: 700; +} +.lt-page-btn:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 1px; + border-color: var(--accent-cyan); + color: var(--accent-cyan); +} +.lt-page-btn:disabled, +.lt-page-btn[aria-disabled="true"] { + opacity: 0.35; + cursor: not-allowed; + pointer-events: none; +} + + +/* ---------------------------------------------------------------- + 31. ACCORDION + ---------------------------------------------------------------- */ +.lt-accordion { border: 1px solid var(--border-dim); } +.lt-accordion + .lt-accordion { border-top: none; } +.lt-accordion-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-sm) var(--space-md); + background: var(--bg-secondary); + cursor: pointer; + font-family: var(--font-mono); + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-primary); + transition: background 0.15s, color 0.15s; + user-select: none; + border: none; + width: 100%; + text-align: left; +} +.lt-accordion-header:hover { background: var(--bg-tertiary); color: var(--accent-cyan); } +.lt-accordion-header:active { background: var(--bg-tertiary); opacity: 0.8; } +.lt-accordion-header:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; } +.lt-accordion-header[aria-expanded="true"] { color: var(--accent-orange); } +.lt-accordion-icon { + width: 14px; + height: 14px; + transition: transform 0.25s ease; + flex-shrink: 0; +} +.lt-accordion-header[aria-expanded="true"] .lt-accordion-icon { transform: rotate(180deg); } +.lt-accordion-body { + overflow: hidden; + height: 0; + transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1); + background: var(--bg-primary); +} +/* .is-open height is set dynamically by JS (scrollHeight) */ +.lt-accordion-body.is-open { height: auto; } +.lt-accordion-content { padding: var(--space-md); } + + +/* ---------------------------------------------------------------- + 32. ALERT BANNERS + ---------------------------------------------------------------- */ +.lt-alert { + display: flex; + align-items: flex-start; + gap: var(--space-sm); + padding: var(--space-sm) var(--space-md); + border-left: 3px solid var(--accent-cyan); + background: rgba(0,212,255,0.06); + font-family: var(--font-mono); + font-size: 0.8rem; + position: relative; + overflow: hidden; + transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); +} +.lt-alert--warning { border-left-color: var(--accent-orange); background: rgba(255,107,0,0.06); } +.lt-alert--error { border-left-color: var(--accent-red); background: rgba(255,45,85,0.06); } +.lt-alert--success { border-left-color: var(--accent-green); background: rgba(0,255,136,0.06); } +.lt-alert--purple { border-left-color: var(--accent-purple); background: rgba(191,95,255,0.06); } +.lt-alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; } +.lt-alert-body { flex: 1; } +.lt-alert-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); margin-bottom: 2px; } +.lt-alert-msg { color: var(--text-secondary); } +.lt-alert-close { + background: none; + border: none; + color: var(--text-dim); + cursor: pointer; + font-size: 1rem; + padding: 0 0 0 var(--space-sm); + line-height: 1; + flex-shrink: 0; + transition: color 0.15s; +} +.lt-alert-close:hover { color: var(--accent-red); } +.lt-alert-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } +.lt-alert.dismissed { max-height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; } + + +/* ---------------------------------------------------------------- + 33. TOGGLE SWITCH + ---------------------------------------------------------------- */ +.lt-toggle { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + cursor: pointer; + font-family: var(--font-mono); + font-size: 0.8rem; +} +/* Visually hidden but still keyboard-focusable */ +.lt-toggle input { + position: absolute; + opacity: 0; + width: 1px; height: 1px; + margin: -1px; padding: 0; + border: 0; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; +} +.lt-toggle input:focus-visible ~ .lt-toggle-track { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; +} +.lt-toggle-track { + width: 36px; + height: 18px; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + border-radius: 0; + position: relative; + transition: all 0.2s ease; + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); +} +.lt-toggle input:checked ~ .lt-toggle-track { + background: var(--accent-orange); + border-color: var(--accent-orange); + box-shadow: var(--glow-orange); +} +.lt-toggle-thumb { + position: absolute; + top: 2px; left: 2px; + width: 12px; height: 12px; + background: var(--text-dim); + transition: transform 0.2s ease, background 0.2s ease; +} +.lt-toggle input:checked ~ .lt-toggle-track .lt-toggle-thumb { + transform: translateX(18px); + background: var(--bg-primary); +} +.lt-toggle-label { color: var(--text-secondary); user-select: none; } +.lt-toggle input:checked ~ .lt-toggle-label { color: var(--text-primary); } + + +/* ---------------------------------------------------------------- + 34. RANGE SLIDER + ---------------------------------------------------------------- */ +.lt-range-wrap { display: flex; flex-direction: column; gap: var(--space-xs); } +.lt-range-header { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.75rem; } +.lt-range-label { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } +.lt-range-value { color: var(--accent-orange); font-weight: 700; } +input[type="range"].lt-range { + -webkit-appearance: none; + width: 100%; + height: 4px; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + outline: none; /* reset; :focus-visible below provides keyboard ring */ + cursor: pointer; +} +input[type="range"].lt-range:focus-visible { + outline: 2px solid var(--accent-orange); + outline-offset: 4px; +} +input[type="range"].lt-range:disabled { + opacity: 0.4; + cursor: not-allowed; +} +input[type="range"].lt-range::-webkit-slider-thumb { + -webkit-appearance: none; + width: 14px; height: 14px; + background: var(--accent-orange); + box-shadow: var(--glow-orange); + cursor: pointer; + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + transition: transform 0.15s; +} +input[type="range"].lt-range::-webkit-slider-thumb:hover { transform: scale(1.3); } +input[type="range"].lt-range:focus-visible::-webkit-slider-thumb { transform: scale(1.3); box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 5px var(--accent-cyan); } +input[type="range"].lt-range::-moz-range-thumb { + width: 14px; height: 14px; + background: var(--accent-orange); + border: none; + cursor: pointer; +} + + +/* ---------------------------------------------------------------- + 35. FILE UPLOAD / DROPZONE + ---------------------------------------------------------------- */ +.lt-dropzone { + border: 2px dashed var(--border-dim); + background: var(--bg-secondary); + padding: var(--space-xl); + text-align: center; + cursor: pointer; + transition: all 0.2s ease; + font-family: var(--font-mono); + position: relative; + clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); +} +.lt-dropzone:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; } +.lt-dropzone:hover, +.lt-dropzone.drag-over { + border-color: var(--accent-cyan); + background: rgba(0,212,255,0.05); + box-shadow: var(--box-glow-cyan); +} +.lt-dropzone-icon { font-size: 2rem; margin-bottom: var(--space-sm); opacity: 0.5; } +.lt-dropzone-text { color: var(--text-secondary); font-size: 0.8rem; } +.lt-dropzone-text strong { color: var(--accent-cyan); } +.lt-dropzone-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: var(--space-xs); } +.lt-dropzone input[type="file"] { + position: absolute; + inset: 0; + opacity: 0; + cursor: pointer; +} +.lt-file-list { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 4px; } +.lt-file-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px var(--space-sm); + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + font-size: 0.75rem; + font-family: var(--font-mono); +} +.lt-file-item-name { color: var(--text-secondary); } +.lt-file-item-size { color: var(--text-dim); } +.lt-file-item-remove { background: none; border: none; color: var(--accent-red); cursor: pointer; padding: 0; font-size: 0.9rem; } +.lt-file-item-remove:hover { opacity: 0.75; text-shadow: var(--glow-red); } +.lt-file-item-remove:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } + + +/* ---------------------------------------------------------------- + 36. COMMAND PALETTE + ---------------------------------------------------------------- */ +.lt-cmd-overlay { + position: fixed; + inset: 0; + background: rgba(3,5,8,0.85); + backdrop-filter: blur(4px); + z-index: var(--z-modal); + display: none; + align-items: flex-start; + justify-content: center; + padding-top: 12vh; +} +.lt-cmd-overlay.is-open { display: flex; } +.lt-cmd-palette { + width: 100%; + max-width: 560px; + background: var(--bg-secondary); + border: 1px solid var(--accent-cyan); + box-shadow: var(--box-glow-cyan); + clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); +} +.lt-cmd-input-wrap { + display: flex; + align-items: center; + padding: var(--space-sm) var(--space-md); + border-bottom: 1px solid var(--border-dim); + gap: var(--space-sm); +} +.lt-cmd-prompt { color: var(--accent-cyan); font-family: var(--font-mono); font-size: 1rem; } +.lt-cmd-input { + flex: 1; + background: none; + border: none; + outline: none; + color: var(--text-primary); + font-family: var(--font-mono); + font-size: 0.9rem; + caret-color: var(--accent-orange); +} +.lt-cmd-input-wrap:focus-within { border-bottom-color: var(--accent-cyan); } +.lt-cmd-results { max-height: 320px; overflow-y: auto; } +.lt-cmd-group-label { + padding: var(--space-xs) var(--space-md); + font-family: var(--font-mono); + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-dim); + border-bottom: 1px solid var(--border-dim); +} +.lt-cmd-item { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-sm) var(--space-md); + cursor: pointer; + font-family: var(--font-mono); + font-size: 0.8rem; + transition: background 0.1s; +} +.lt-cmd-item:hover, +.lt-cmd-item.is-selected, +.lt-cmd-item:focus-visible { + background: rgba(0,212,255,0.08); + color: var(--accent-cyan); +} +.lt-cmd-item-icon { width: 16px; text-align: center; opacity: 0.6; flex-shrink: 0; } +.lt-cmd-item-label { flex: 1; } +.lt-cmd-item-kbd { + font-size: 0.65rem; + padding: 2px 5px; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + color: var(--text-dim); +} +.lt-cmd-footer { + display: flex; + gap: var(--space-md); + padding: var(--space-xs) var(--space-md); + border-top: 1px solid var(--border-dim); + font-family: var(--font-mono); + font-size: 0.65rem; + color: var(--text-dim); +} +.lt-cmd-footer kbd { background: var(--bg-tertiary); border: 1px solid var(--border-dim); padding: 1px 4px; margin: 0 2px; } +.lt-cmd-empty { + padding: var(--space-lg); + text-align: center; + font-family: var(--font-mono); + font-size: 0.8rem; + color: var(--text-dim); +} + + +/* ---------------------------------------------------------------- + 37. CODE BLOCKS + ---------------------------------------------------------------- */ +.lt-code-block { + position: relative; + background: var(--bg-secondary); + border: 1px solid var(--border-dim); + overflow: hidden; +} +.lt-code-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px var(--space-md); + background: var(--bg-tertiary); + border-bottom: 1px solid var(--border-dim); +} +.lt-code-lang { + font-family: var(--font-mono); + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--accent-orange); +} +.lt-code-copy { + background: none; + border: 1px solid var(--border-dim); + color: var(--text-dim); + font-family: var(--font-mono); + font-size: 0.65rem; + padding: 2px 8px; + cursor: pointer; + text-transform: uppercase; + letter-spacing: 0.05em; + transition: all 0.15s; +} +.lt-code-copy:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); } +.lt-code-copy:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } +.lt-code-copy.copied { border-color: var(--accent-green); color: var(--accent-green); } +.lt-code-block pre { + margin: 0; + padding: var(--space-md); + overflow-x: auto; + overflow-y: auto; + font-family: var(--font-mono); + font-size: 0.8rem; + line-height: 1.6; + color: var(--text-secondary); + max-height: 400px; +} +.lt-code-block code { background: none; border: none; padding: 0; color: inherit; } +/* Syntax highlight tokens */ +.tok-kw { color: var(--accent-cyan); } +.tok-str { color: var(--accent-green); } +.tok-num { color: var(--accent-orange); } +.tok-cmt { color: var(--color-tok-cmt); font-style: italic; } +.tok-fn { color: var(--accent-purple); } + + +/* ---------------------------------------------------------------- + 38. TAGS / CHIPS + ---------------------------------------------------------------- */ +.lt-tags { display: flex; flex-wrap: wrap; gap: 6px; } +.lt-tag { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 8px; + font-family: var(--font-mono); + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.05em; + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + color: var(--text-secondary); + clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); + white-space: nowrap; +} +.lt-tag--orange { border-color: var(--accent-orange); color: var(--accent-orange); background: rgba(255,107,0,0.08); } +.lt-tag--cyan { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(0,212,255,0.08); } +.lt-tag--green { border-color: var(--accent-green); color: var(--accent-green); background: rgba(0,255,136,0.08); } +.lt-tag--red { border-color: var(--accent-red); color: var(--accent-red); background: rgba(255,45,85,0.08); } +.lt-tag--purple { border-color: var(--accent-purple); color: var(--accent-purple); background: rgba(191,95,255,0.08); } +.lt-tag-remove { + background: none; + border: none; + color: inherit; + cursor: pointer; + padding: 0; + font-size: 0.8rem; + opacity: 0.6; + line-height: 1; +} +.lt-tag-remove:hover { opacity: 1; } +.lt-tag-remove:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; border-radius: 2px; opacity: 1; } + + +/* ---------------------------------------------------------------- + 39. NOTIFICATION BADGES + ---------------------------------------------------------------- */ +.lt-badge-wrap { position: relative; display: inline-flex; } +/* Notification counter badge — only absolute when inside .lt-badge-wrap */ +.lt-badge-wrap .lt-badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 4px; + font-family: var(--font-mono); + font-size: 0.65rem; + font-weight: 700; + background: var(--accent-red); + color: var(--bg-primary); + position: absolute; + top: -6px; right: -8px; + box-shadow: 0 0 6px var(--accent-red); +} +.lt-badge-wrap .lt-badge--orange { background: var(--accent-orange); box-shadow: var(--glow-orange); } +.lt-badge-wrap .lt-badge--cyan { background: var(--accent-cyan); box-shadow: var(--glow-cyan); color: var(--bg-primary); } +.lt-badge-wrap .lt-badge--green { background: var(--accent-green); box-shadow: var(--glow-green); color: var(--bg-primary); } +.lt-badge-inline { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 5px; + font-family: var(--font-mono); + font-size: 0.65rem; + font-weight: 700; + background: var(--accent-orange); + color: var(--bg-primary); + vertical-align: middle; +} + + +/* ---------------------------------------------------------------- + 40. STEPPER / WIZARD + ---------------------------------------------------------------- */ +.lt-stepper { + display: flex; + align-items: flex-start; + gap: 0; +} +.lt-step { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + font-family: var(--font-mono); + font-size: 0.7rem; + text-align: center; +} +.lt-step:not(:last-child)::after { + content: ''; + position: absolute; + top: 14px; + left: calc(50% + 14px); + right: calc(-50% + 14px); + height: 1px; + background: var(--border-dim); +} +.lt-step.complete:not(:last-child)::after { background: var(--accent-orange); } +.lt-step-num { + width: 28px; height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--border-dim); + background: var(--bg-secondary); + color: var(--text-dim); + font-weight: 700; + margin-bottom: 6px; + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +} +.lt-step.active .lt-step-num { + border-color: var(--accent-orange); + background: var(--accent-orange); + color: var(--bg-primary); + box-shadow: var(--glow-orange); +} +.lt-step.complete .lt-step-num { + border-color: var(--accent-green); + background: var(--bg-secondary); + color: var(--accent-green); + box-shadow: var(--glow-green); +} +.lt-step-label { color: var(--text-dim); } +.lt-step.active .lt-step-label { color: var(--text-primary); } +.lt-step.complete .lt-step-label { color: var(--text-secondary); } + + +/* ---------------------------------------------------------------- + 41. LIST GROUPS + ---------------------------------------------------------------- */ +.lt-list-group { border: 1px solid var(--border-dim); } +.lt-list-item { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-sm) var(--space-md); + border-bottom: 1px solid var(--border-dim); + font-family: var(--font-mono); + font-size: 0.8rem; + transition: background 0.12s; +} +.lt-list-item:last-child { border-bottom: none; } +.lt-list-item:hover { background: var(--bg-tertiary); } +.lt-list-item a { + color: var(--text-primary); + text-decoration: none; + flex: 1; +} +.lt-list-item a:hover { color: var(--accent-cyan); } +.lt-list-item a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } +.lt-list-item-meta { color: var(--text-dim); font-size: 0.7rem; margin-left: auto; } +.lt-list-item--active { background: rgba(255,107,0,0.06); border-left: 2px solid var(--accent-orange); } + + +/* ---------------------------------------------------------------- + 42. KEY-VALUE PAIRS / DATA GRID + ---------------------------------------------------------------- */ +.lt-kv-grid { + display: grid; + grid-template-columns: max-content 1fr; + gap: 1px; + font-family: var(--font-mono); + font-size: 0.8rem; +} +.lt-kv-key { + padding: var(--space-xs) var(--space-md) var(--space-xs) 0; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.05em; + font-size: 0.7rem; + white-space: nowrap; + border-right: 1px solid var(--border-dim); +} +.lt-kv-val { + padding: var(--space-xs) 0 var(--space-xs) var(--space-md); + color: var(--text-primary); +} +.lt-kv-val--orange { color: var(--accent-orange); } +.lt-kv-val--cyan { color: var(--accent-cyan); } +.lt-kv-val--green { color: var(--accent-green); } +.lt-kv-val--red { color: var(--accent-red); } + + +/* ---------------------------------------------------------------- + 43. HERO / BANNER SECTION + ---------------------------------------------------------------- */ +.lt-hero { + position: relative; + padding: var(--space-xl) 0; + text-align: center; + overflow: hidden; +} +.lt-hero::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,107,0,0.08) 0%, transparent 70%); + pointer-events: none; +} +.lt-hero-eyebrow { + font-family: var(--font-mono); + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.2em; + color: var(--accent-orange); + margin-bottom: var(--space-sm); +} +.lt-hero-title { + font-family: var(--font-mono); + font-size: clamp(1.8rem, 5vw, 3.5rem); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-primary); + text-shadow: var(--glow-orange); + line-height: 1.1; + margin-bottom: var(--space-md); +} +.lt-hero-sub { + font-family: var(--font-mono); + font-size: 0.9rem; + color: var(--text-secondary); + max-width: 560px; + margin: 0 auto var(--space-lg); + line-height: 1.6; +} +.lt-hero-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } + + +/* ---------------------------------------------------------------- + 44. DIVIDER WITH LABEL + ---------------------------------------------------------------- */ +.lt-divider { + display: flex; + align-items: center; + gap: var(--space-md); + margin: var(--space-lg) 0; +} +.lt-divider::before, +.lt-divider::after { + content: ''; + flex: 1; + height: 1px; + background: var(--border-dim); +} +.lt-divider-label { + font-family: var(--font-mono); + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.15em; + color: var(--text-dim); + white-space: nowrap; +} +.lt-divider--orange::before, +.lt-divider--orange::after { background: var(--accent-orange); } +.lt-divider--orange .lt-divider-label { color: var(--accent-orange); } + + +/* ---------------------------------------------------------------- + 45. CUSTOM SCROLLBAR + ---------------------------------------------------------------- */ +::-webkit-scrollbar { width: 6px; height: 6px; } +::-webkit-scrollbar-track { background: var(--bg-primary); } +::-webkit-scrollbar-thumb { background: var(--bg-tertiary); } +::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); } + + +/* ---------------------------------------------------------------- + 46. RESPONSIVE TABLE → CARD MODE + ---------------------------------------------------------------- */ +@media (max-width: 767px) { + .lt-table-responsive thead { display: none; } + .lt-table-responsive tbody tr { + display: block; + border: 1px solid var(--border-dim); + margin-bottom: var(--space-sm); + background: var(--bg-secondary); + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + } + .lt-table-responsive td { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-xs) var(--space-sm); + border-bottom: 1px solid var(--border-dim); + font-size: 0.78rem; + min-height: 36px; + } + .lt-table-responsive td:last-child { border-bottom: none; } + .lt-table-responsive td::before { + content: attr(data-label); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-dim); + font-size: 0.72rem; + flex-shrink: 0; + margin-right: var(--space-sm); + } +} + + +/* ---------------------------------------------------------------- + 47. GAUGE / METER + ---------------------------------------------------------------- */ +.lt-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } +.lt-gauge { + position: relative; + width: 100px; + height: 55px; + overflow: visible; +} +.lt-gauge svg { overflow: visible; } +.lt-gauge-track { fill: none; stroke: var(--bg-tertiary); stroke-width: 8; } +.lt-gauge-fill { fill: none; stroke: var(--accent-orange); stroke-width: 8; stroke-linecap: butt; + transition: stroke-dashoffset 0.6s cubic-bezier(0.4,0,0.2,1); + will-change: stroke-dashoffset; } +.lt-gauge-label { + position: absolute; + bottom: 0; left: 50%; + transform: translateX(-50%); + font-family: var(--font-mono); + font-size: 1rem; + font-weight: 700; + color: var(--accent-orange); + text-shadow: var(--glow-orange); + white-space: nowrap; +} +.lt-gauge-caption { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); } + + +/* ---------------------------------------------------------------- + 48. SPINNERS / LOADERS + ---------------------------------------------------------------- */ +.lt-spinner { + display: inline-block; + width: 24px; height: 24px; + border: 2px solid var(--bg-tertiary); + border-top-color: var(--accent-orange); + border-radius: 50%; + animation: lt-spin 0.7s linear infinite; + will-change: transform; +} +.lt-spinner--cyan { border-top-color: var(--accent-cyan); } +.lt-spinner--green { border-top-color: var(--accent-green); } +.lt-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; } +.lt-spinner--lg { width: 40px; height: 40px; border-width: 3px; } +@keyframes lt-spin { to { transform: rotate(360deg); } } + +.lt-pulse-dot { + display: inline-block; + width: 8px; height: 8px; + background: var(--accent-green); + border-radius: 50%; + animation: lt-pulse 1.4s ease-in-out infinite; + box-shadow: 0 0 6px var(--accent-green); +} +@keyframes lt-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.4; transform: scale(0.7); } +} + +.lt-bar-loader { + display: flex; + gap: 3px; + align-items: flex-end; + height: 20px; +} +.lt-bar-loader span { + width: 4px; + background: var(--accent-orange); + box-shadow: var(--glow-orange); + animation: lt-bars 1s ease-in-out infinite; +} +.lt-bar-loader span:nth-child(2) { animation-delay: 0.1s; } +.lt-bar-loader span:nth-child(3) { animation-delay: 0.2s; } +.lt-bar-loader span:nth-child(4) { animation-delay: 0.3s; } +@keyframes lt-bars { + 0%, 100% { height: 4px; } + 50% { height: 20px; } +} + + +/* ---------------------------------------------------------------- + 49. TAB BAR + ---------------------------------------------------------------- */ +.lt-tab-bar { + display: flex; + border-bottom: 1px solid var(--border-dim); + gap: 0; + overflow-x: auto; + scrollbar-width: none; +} +.lt-tab-bar::-webkit-scrollbar { display: none; } +.lt-tab { + padding: var(--space-sm) var(--space-md); + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-dim); + cursor: pointer; + border: none; + background: none; + border-bottom: 2px solid transparent; + transition: all 0.15s; + white-space: nowrap; + text-decoration: none; + display: inline-block; +} +.lt-tab:hover { color: var(--text-secondary); } +.lt-tab.active, +.lt-tab[aria-selected="true"] { + color: var(--accent-orange); + border-bottom-color: var(--accent-orange); + text-shadow: var(--glow-orange); +} +.lt-tab-panels .lt-tab-panel { display: none; } +.lt-tab-panels .lt-tab-panel.active { display: block; } + + +/* ---------------------------------------------------------------- + 50. UTILITY CLASSES + ---------------------------------------------------------------- */ +/* Text colors */ +.lt-text-orange { color: var(--accent-orange); } +.lt-text-cyan { color: var(--accent-cyan); } +.lt-text-green { color: var(--accent-green); } +.lt-text-red { color: var(--accent-red); } +.lt-text-purple { color: var(--accent-purple); } +.lt-text-dim { color: var(--text-dim); } +.lt-text-muted { color: var(--text-secondary); } + +/* Glow text */ +.lt-glow-orange { text-shadow: var(--glow-orange); } +.lt-glow-cyan { text-shadow: var(--glow-cyan); } +.lt-glow-green { text-shadow: var(--glow-green); } +.lt-glow-red { text-shadow: var(--glow-red); } + +/* Backgrounds */ +.lt-bg-secondary { background: var(--bg-secondary); } +.lt-bg-tertiary { background: var(--bg-tertiary); } + +/* Border accents */ +.lt-border-orange { border-color: var(--accent-orange) !important; } +.lt-border-cyan { border-color: var(--accent-cyan) !important; } +.lt-border-green { border-color: var(--accent-green) !important; } +.lt-border-red { border-color: var(--accent-red) !important; } + +/* Display */ +.lt-visible { display: block !important; } +.lt-flex { display: flex; } +.lt-grid { display: grid; } +.lt-inline { display: inline; } +.lt-iflex { display: inline-flex; } + +/* Flex helpers */ +.lt-gap-xs { gap: var(--space-xs); } +.lt-gap-sm { gap: var(--space-sm); } +.lt-gap-md { gap: var(--space-md); } +.lt-gap-lg { gap: var(--space-lg); } +.lt-align-center { align-items: center; } +.lt-align-start { align-items: flex-start; } +.lt-justify-between { justify-content: space-between; } +.lt-justify-center { justify-content: center; } +.lt-justify-end { justify-content: flex-end; } +.lt-wrap { flex-wrap: wrap; } + +/* Spacing */ +.lt-mt-xs { margin-top: var(--space-xs); } +.lt-mt-sm { margin-top: var(--space-sm); } +.lt-mt-md { margin-top: var(--space-md); } +.lt-mt-lg { margin-top: var(--space-lg); } +.lt-mb-xs { margin-bottom: var(--space-xs); } +.lt-mb-sm { margin-bottom: var(--space-sm); } +.lt-mb-md { margin-bottom: var(--space-md); } +.lt-mb-lg { margin-bottom: var(--space-lg); } +.lt-p-sm { padding: var(--space-sm); } +.lt-p-md { padding: var(--space-md); } +.lt-p-lg { padding: var(--space-lg); } + +/* Text helpers */ +.lt-mono { font-family: var(--font-mono); } +.lt-uppercase { text-transform: uppercase; } +.lt-bold { font-weight: 700; } +.lt-small { font-size: 0.75rem; } +.lt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.lt-no-wrap { white-space: nowrap; } +.lt-text-center { text-align: center; } +.lt-text-right { text-align: right; } + +/* Opacity */ +.lt-opacity-50 { opacity: 0.5; } +.lt-opacity-75 { opacity: 0.75; } + +/* Cursor */ +.lt-cursor-pointer { cursor: pointer; } +.lt-cursor-help { cursor: help; } + +/* Width helpers */ +.lt-w-full { width: 100%; } +.lt-w-auto { width: auto; } + +/* Status dot */ +.lt-dot { + display: inline-block; + width: 8px; height: 8px; + border-radius: 50%; + flex-shrink: 0; +} +.lt-dot--green { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); } +.lt-dot--orange { background: var(--accent-orange); box-shadow: var(--glow-orange); } +.lt-dot--red { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red); } +.lt-dot--dim { background: var(--text-dim); } + +/* Monospace table-style number alignment */ +.lt-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } + + +/* ================================================================ + v1.1 COMPONENT EXTENSIONS + 51. Light Theme + 52. Theme Toggle Button + 53. Skeleton Loader Variants + 54. Empty State Enhancements + 55. Nav Notification Badge + 56. Right-Side Drawer + 57. Sticky Table + 58. Multi-Select / Combobox + 59. Context Menu + 60. Offline Banner + 61. Timeline / Activity Feed + 62. Avatar + 63. Split Pane + 64. Chart Container + 65. Toast Queue + 66. Autocomplete / Typeahead + 67. WebSocket Status + 68. Print Enhancements + ================================================================ */ + + +/* ---------------------------------------------------------------- + 51. LIGHT THEME + ---------------------------------------------------------------- */ +/* ================================================================ + LIGHT MODE — complete token overrides + Design intent: "military intelligence dashboard, daylight reading" + Clean off-white surfaces, desaturated accents, no neon. + ================================================================ */ +html[data-theme="light"] { + /* — Surfaces — */ + --bg-primary: #edf0f5; + --bg-secondary: #e2e7ef; + --bg-tertiary: #d4dae6; + --bg-card: #ffffff; + --bg-terminal: #f4f6fa; + --bg-overlay: rgba(237,240,245,0.97); + --bg-input: #ffffff; + + /* — Typography — */ + --text-primary: #111827; /* near-black, high contrast */ + --text-secondary: #2d3d56; + --text-muted: #5a6e8c; + --text-dim: #8a9ab8; + + /* — Borders — */ + --border-color: rgba(50,80,130,0.18); + --border-color-hi: #0062b8; + --border-color-dim: rgba(50,80,130,0.09); + --border-dim: rgba(50,80,130,0.09); + + /* — Accent colors: desaturated for readability on white — */ + --accent-orange: #c44e00; + --accent-cyan: #0062b8; + --accent-green: #006d35; + --accent-red: #b5001f; + --accent-amber: #8a5a00; + --accent-purple: #6b2fb8; + + /* — Accent tints — */ + --accent-orange-dim: rgba(196,78,0,0.10); + --accent-cyan-dim: rgba(0,98,184,0.10); + --accent-green-dim: rgba(0,109,53,0.10); + --accent-red-dim: rgba(181,0,31,0.10); + --accent-amber-dim: rgba(138,90,0,0.10); + --accent-cyan-border: rgba(0,98,184,0.28); + + /* — Glows become subtle drop shadows in light mode — */ + --glow-orange: 0 0 0 1px rgba(196,78,0,0.25), 0 1px 6px rgba(196,78,0,0.18); + --glow-cyan: 0 0 0 1px rgba(0,98,184,0.25), 0 1px 6px rgba(0,98,184,0.18); + --glow-green: 0 0 0 1px rgba(0,109,53,0.25), 0 1px 6px rgba(0,109,53,0.18); + --glow-red: 0 0 0 1px rgba(181,0,31,0.25), 0 1px 6px rgba(181,0,31,0.18); + --glow-amber: 0 0 0 1px rgba(138,90,0,0.25), 0 1px 6px rgba(138,90,0,0.18); + --glow-orange-intense: 0 0 0 2px rgba(196,78,0,0.35), 0 2px 10px rgba(196,78,0,0.25); + --glow-cyan-intense: 0 0 0 2px rgba(0,98,184,0.35), 0 2px 10px rgba(0,98,184,0.25); + --glow-green-intense: 0 0 0 2px rgba(0,109,53,0.35), 0 2px 10px rgba(0,109,53,0.25); + --glow-amber-intense: 0 0 0 2px rgba(138,90,0,0.35), 0 2px 10px rgba(138,90,0,0.25); + + /* — Box glows (card/input focus rings) — */ + --box-glow-orange: 0 0 0 2px rgba(196,78,0,0.22), 0 2px 8px rgba(196,78,0,0.12); + --box-glow-cyan: 0 0 0 2px rgba(0,98,184,0.22), 0 2px 8px rgba(0,98,184,0.12); + --box-glow-green: 0 0 0 2px rgba(0,109,53,0.22), 0 2px 8px rgba(0,109,53,0.12); + --box-glow-red: 0 0 0 2px rgba(181,0,31,0.22), 0 2px 8px rgba(181,0,31,0.12); + --box-glow-amber: 0 0 0 2px rgba(138,90,0,0.22), 0 2px 8px rgba(138,90,0,0.12); + + /* — Syntax highlight — */ + --color-tok-cmt: #2e6540; + + color-scheme: light; +} + +/* — CRT / vignette / scanlines — off in light mode — */ +html[data-theme="light"] body::before, +html[data-theme="light"] body::after { display: none; } + +/* — Dot-grid: neutral gray, not blue — */ +html[data-theme="light"] { + background-image: radial-gradient(circle, rgba(90,110,150,0.14) 1px, transparent 1px); + background-color: var(--bg-primary); +} + +/* — Layout chrome — */ +html[data-theme="light"] .lt-header { + background: rgba(237,240,245,0.97); + border-bottom-color: var(--border-color); + box-shadow: 0 1px 8px rgba(0,0,0,0.08); +} +html[data-theme="light"] .lt-main { background: transparent; } +html[data-theme="light"] .lt-sidebar { + background: var(--bg-secondary); + border-color: var(--border-color); + box-shadow: none; +} +html[data-theme="light"] .lt-nav-drawer { + background: var(--bg-card); + box-shadow: 2px 0 16px rgba(0,0,0,0.12); +} +html[data-theme="light"] .lt-nav-drawer-overlay { background: rgba(0,0,0,0.25); } + +/* — Nav links — */ +html[data-theme="light"] .lt-nav-link, +html[data-theme="light"] .lt-nav-link:hover { color: var(--text-secondary); } +html[data-theme="light"] .lt-nav-link.active { color: var(--accent-orange); } +html[data-theme="light"] .lt-nav-drawer-link { color: var(--text-secondary); } +html[data-theme="light"] .lt-nav-drawer-link:hover { background: var(--accent-cyan-dim); color: var(--accent-cyan); } +html[data-theme="light"] .lt-nav-drawer-link.active { color: var(--accent-orange); background: var(--accent-orange-dim); } +html[data-theme="light"] .lt-nav-drawer-link:focus-visible { outline: none; color: var(--accent-cyan); background: var(--accent-cyan-dim); box-shadow: inset 3px 0 0 var(--accent-cyan); } +html[data-theme="light"] .lt-sidebar-nav-link { color: var(--text-secondary); } +html[data-theme="light"] .lt-sidebar-nav-link:hover { background: var(--accent-cyan-dim); } +html[data-theme="light"] .lt-sidebar-nav-link.active { background: var(--accent-orange-dim); color: var(--accent-orange); } + +/* — Surfaces: cards, frames, sections — */ +html[data-theme="light"] .lt-card, +html[data-theme="light"] .lt-frame { + background: var(--bg-card); + border-color: var(--border-color); + box-shadow: 0 1px 4px rgba(0,0,0,0.06); +} +html[data-theme="light"] .lt-section { background: var(--bg-card); border-color: var(--border-color); } +html[data-theme="light"] .lt-section-header { + background: linear-gradient(90deg, var(--bg-secondary) 0%, transparent 100%); + border-bottom-color: var(--border-color); + color: var(--text-muted); +} +html[data-theme="light"] .lt-frame::before { color: var(--accent-orange); opacity: 0.6; } +html[data-theme="light"] .lt-frame-bl, +html[data-theme="light"] .lt-frame-br { color: var(--accent-cyan); opacity: 0.5; } + +/* — Form controls — */ +html[data-theme="light"] .lt-input, +html[data-theme="light"] .lt-select, +html[data-theme="light"] .lt-textarea { + background: var(--bg-input); + border-color: rgba(50,80,130,0.22); + color: var(--text-primary); + box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); +} +html[data-theme="light"] .lt-input:focus-visible, +html[data-theme="light"] .lt-select:focus-visible, +html[data-theme="light"] .lt-textarea:focus-visible { + border-color: var(--accent-cyan); + box-shadow: var(--box-glow-cyan); +} +html[data-theme="light"] .lt-label { color: var(--text-muted); } + +/* — Buttons — */ +html[data-theme="light"] .lt-btn { + background: var(--bg-secondary); + border-color: var(--border-color); + color: var(--text-primary); +} +html[data-theme="light"] .lt-btn:hover { + background: var(--bg-tertiary); + border-color: rgba(50,80,130,0.3); +} +html[data-theme="light"] .lt-btn-primary { background: var(--accent-cyan); color: #fff; border-color: var(--accent-cyan); } +html[data-theme="light"] .lt-btn-primary:hover { background: #0070cc; border-color: #0070cc; } +html[data-theme="light"] .lt-btn-danger { background: var(--accent-red); color: #fff; border-color: var(--accent-red); } +html[data-theme="light"] .lt-btn-ghost { background: transparent; border-color: var(--border-color); color: var(--text-secondary); } +html[data-theme="light"] .lt-btn-ghost:hover { background: var(--accent-cyan-dim); color: var(--accent-cyan); } + +/* — Tables — */ +html[data-theme="light"] .lt-table th { background: var(--bg-secondary); color: var(--text-muted); border-color: var(--border-color); } +html[data-theme="light"] .lt-table td { border-color: var(--border-dim); color: var(--text-secondary); } +html[data-theme="light"] .lt-table tr:hover td { background: rgba(0,98,184,0.04); } +html[data-theme="light"] .lt-table-wrap { border-color: var(--border-color); } + +/* — Badges & status — */ +html[data-theme="light"] .lt-badge { background: var(--bg-tertiary); color: var(--text-secondary); } +html[data-theme="light"] .lt-badge-open { background: rgba(0,109,53,0.12); color: #006d35; } +html[data-theme="light"] .lt-badge-closed { background: rgba(90,110,150,0.12); color: #5a6e8c; } +html[data-theme="light"] .lt-badge-in-progress, +html[data-theme="light"] .lt-badge-progress { background: rgba(138,90,0,0.12); color: #8a5a00; text-shadow: none; } +html[data-theme="light"] .lt-badge-pending { background: rgba(107,47,184,0.10); color: #7c22cc; } +html[data-theme="light"] .lt-badge-p1 { background: rgba(181,0,31,0.12); color: #b5001f; text-shadow: none; } +html[data-theme="light"] .lt-badge-p2 { background: rgba(196,78,0,0.12); color: #c44e00; } +html[data-theme="light"] .lt-badge-p3 { background: rgba(138,90,0,0.12); color: #8a5a00; } +html[data-theme="light"] .lt-badge-p4 { background: rgba(50,80,130,0.10); color: #2d3d56; } +html[data-theme="light"] .lt-badge-admin { background: rgba(107,47,184,0.12); color: #6b2fb8; } + +/* — Toast — */ +html[data-theme="light"] .lt-toast { + background: #ffffff; + border-color: var(--border-color); + border-top-color: var(--border-color); + border-right-color: var(--border-color); + border-bottom-color: var(--border-color); + box-shadow: 0 4px 20px rgba(0,0,0,0.12); +} +html[data-theme="light"] .lt-toast-icon { opacity: 0.9; } +html[data-theme="light"] .lt-toast-msg { color: var(--text-primary); } + +/* — Modals — */ +html[data-theme="light"] .lt-modal-overlay { background: rgba(30,40,70,0.45); } +html[data-theme="light"] .lt-modal { + background: var(--bg-card); + border-color: var(--border-color); + box-shadow: 0 8px 32px rgba(0,0,0,0.18); +} +html[data-theme="light"] .lt-modal-header { + background: var(--bg-secondary); + border-bottom-color: var(--border-color); +} +html[data-theme="light"] .lt-modal-footer { + background: var(--bg-secondary); + border-top-color: var(--border-color); +} + +/* — Command palette — */ +html[data-theme="light"] .lt-cmd-overlay { background: rgba(30,40,70,0.45); } +html[data-theme="light"] .lt-cmd-palette { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 12px 40px rgba(0,0,0,0.2); } +html[data-theme="light"] .lt-cmd-input { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); } +html[data-theme="light"] .lt-cmd-results { border-top-color: var(--border-color); } +html[data-theme="light"] .lt-cmd-item { color: var(--text-secondary); } +html[data-theme="light"] .lt-cmd-item:hover, +html[data-theme="light"] .lt-cmd-item.is-active { background: var(--accent-cyan-dim); color: var(--accent-cyan); } +html[data-theme="light"] .lt-cmd-group-label { color: var(--text-dim); background: var(--bg-secondary); } + +/* — Context menu — */ +html[data-theme="light"] .lt-context-menu { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 6px 20px rgba(0,0,0,0.15); } +html[data-theme="light"] .lt-context-menu-item { color: var(--text-secondary); } +html[data-theme="light"] .lt-context-menu-item:hover { background: var(--accent-cyan-dim); color: var(--accent-cyan); } +html[data-theme="light"] .lt-context-menu-divider { background: var(--border-dim); } + +/* — Right drawer — */ +html[data-theme="light"] .lt-drawer-right { + background: var(--bg-card); + border-left-color: var(--border-color); + box-shadow: -4px 0 24px rgba(0,0,0,0.1); +} +html[data-theme="light"] .lt-drawer-right-header { background: var(--bg-secondary); border-bottom-color: var(--border-color); } +html[data-theme="light"] .lt-drawer-right-footer { background: var(--bg-secondary); border-top-color: var(--border-color); } +html[data-theme="light"] .lt-drawer-right-overlay { background: rgba(30,40,70,0.35); } + +/* — Nav dropdown menu — */ +html[data-theme="light"] .lt-nav-dropdown-menu { + background: var(--bg-card); + border-color: var(--border-color); + box-shadow: 0 6px 20px rgba(0,0,0,0.12); +} +html[data-theme="light"] .lt-nav-dropdown-menu li a { + color: var(--text-secondary); + border-bottom-color: var(--border-dim); +} +html[data-theme="light"] .lt-nav-dropdown-menu li a:hover { + color: var(--accent-orange); + background: var(--accent-orange-dim); +} + +/* — Dropdowns & notification panel — */ +html[data-theme="light"] .lt-dropdown-panel { + background: var(--bg-card); + border-color: var(--border-color); + box-shadow: 0 6px 20px rgba(0,0,0,0.12); +} +html[data-theme="light"] .lt-dropdown-item { color: var(--text-secondary); } +html[data-theme="light"] .lt-dropdown-item:hover { background: var(--accent-cyan-dim); color: var(--accent-cyan); } +html[data-theme="light"] .lt-dropdown-divider { background: var(--border-dim); } +html[data-theme="light"] .lt-notif-panel { + background: var(--bg-card); + border-color: var(--border-color); + box-shadow: 0 6px 20px rgba(0,0,0,0.12); +} +html[data-theme="light"] .lt-notif-panel-header { border-bottom-color: var(--border-dim); color: var(--text-muted); } +html[data-theme="light"] .lt-notif-item { border-bottom-color: var(--border-dim); } +html[data-theme="light"] .lt-notif-item:hover { background: var(--bg-secondary); } +html[data-theme="light"] .lt-notif-item--unread { background: rgba(0,98,184,0.05); } +html[data-theme="light"] .lt-notif-panel-footer { border-top-color: var(--border-dim); } + +/* — Sidebar / accordion — */ +html[data-theme="light"] .lt-accordion-header { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } +html[data-theme="light"] .lt-accordion-header:hover { background: var(--bg-tertiary); } +html[data-theme="light"] .lt-accordion-body { border-color: var(--border-color); background: var(--bg-card); } + +/* — Code / terminal — */ +html[data-theme="light"] code, +html[data-theme="light"] .lt-code-block { background: var(--bg-terminal); color: var(--text-primary); border-color: var(--border-color); } +html[data-theme="light"] .lt-code-block .comment { color: #6c7e99; } + +/* — Stat cards — */ +html[data-theme="light"] .lt-stat-card { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 1px 4px rgba(0,0,0,0.06); } +html[data-theme="light"] .lt-stat-card:hover { box-shadow: var(--box-glow-cyan); border-color: var(--accent-cyan); } + +/* — Timeline — */ +html[data-theme="light"] .lt-timeline-item::before { background: var(--border-color); } +html[data-theme="light"] .lt-timeline-actor { color: var(--accent-cyan); } +html[data-theme="light"] .lt-timeline-body { color: var(--text-secondary); } + +/* — Dividers — */ +html[data-theme="light"] .lt-divider::before, +html[data-theme="light"] .lt-divider::after { background: var(--border-color); } +html[data-theme="light"] .lt-divider-label { color: var(--text-dim); } + +/* — Tags / chips — */ +html[data-theme="light"] .lt-tag { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); } + +/* — Tooltips — */ +html[data-theme="light"] [data-tooltip]::before { background: var(--bg-terminal); color: var(--text-primary); } +html[data-theme="light"] [data-tooltip]::after { border-top-color: var(--bg-terminal); } + +/* — Pagination — */ +html[data-theme="light"] .lt-page-btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); } +html[data-theme="light"] .lt-page-btn:hover { background: var(--accent-cyan-dim); border-color: var(--accent-cyan); color: var(--accent-cyan); } +html[data-theme="light"] .lt-page-btn.active { background: var(--accent-cyan); color: #fff; border-color: var(--accent-cyan); } +html[data-theme="light"] .lt-page-btn[disabled] { opacity: 0.4; } + +/* — Tabs — */ +html[data-theme="light"] .lt-tab { color: var(--text-muted); border-bottom-color: transparent; } +html[data-theme="light"] .lt-tab:hover { color: var(--text-primary); } +html[data-theme="light"] .lt-tab.active { color: var(--accent-orange); border-bottom-color: var(--accent-orange); } +html[data-theme="light"] .lt-tabs { border-bottom-color: var(--border-color); } + +/* — Offline banner — */ +html[data-theme="light"] .lt-offline-banner { background: rgba(138,90,0,0.12); color: var(--accent-amber); border-color: rgba(138,90,0,0.25); } + +/* — WS status indicator — */ +html[data-theme="light"] .lt-ws-status { color: var(--text-muted); background: var(--bg-tertiary); border-color: var(--border-color); } + +/* — Boot overlay — */ +html[data-theme="light"] .lt-boot-overlay { background: var(--bg-primary); } +html[data-theme="light"] .lt-boot-text { color: var(--accent-cyan); } + +/* — Section header accent arrow — */ +html[data-theme="light"] .lt-section-title::before { color: var(--accent-orange); opacity: 0.8; } + +/* — Breadcrumbs — */ +html[data-theme="light"] .lt-breadcrumb-item a { color: var(--text-muted); } +html[data-theme="light"] .lt-breadcrumb-item.active { color: var(--text-primary); } +html[data-theme="light"] .lt-breadcrumb-sep { color: var(--text-dim); } + +/* — Progress bars — */ +html[data-theme="light"] .lt-progress { background: var(--bg-tertiary); } +html[data-theme="light"] .lt-progress-bar { background: var(--accent-cyan); } + +/* — Skeleton loader — */ +html[data-theme="light"] .lt-skeleton { background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%); } + +/* — Dropzone — */ +html[data-theme="light"] .lt-dropzone { background: var(--bg-terminal); border-color: var(--border-color); } +html[data-theme="light"] .lt-dropzone.is-over { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); } + +/* — Wizard steps — */ +html[data-theme="light"] .lt-wizard-step-num { background: var(--bg-tertiary); color: var(--text-muted); border-color: var(--border-color); } +html[data-theme="light"] .lt-wizard-step.active .lt-wizard-step-num { background: var(--accent-cyan); color: #fff; border-color: var(--accent-cyan); } +html[data-theme="light"] .lt-wizard-step.done .lt-wizard-step-num { background: var(--accent-green); color: #fff; border-color: var(--accent-green); } +html[data-theme="light"] .lt-wizard-connector { background: var(--border-color); } + +/* — Avatar — */ +html[data-theme="light"] .lt-avatar { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color); } + +/* — Lightbox — */ +html[data-theme="light"] .lt-lightbox-overlay { background: rgba(15,20,40,0.92); } + +/* — Split pane divider — */ +html[data-theme="light"] .lt-split-divider { background: var(--border-color); } +html[data-theme="light"] .lt-split-divider:hover { background: var(--accent-cyan); } + +/* — Theme button (active state in light mode) — */ +html[data-theme="light"] .lt-theme-btn { color: var(--accent-orange); } + +/* — Text glow utilities: replace neon with ink shadow in light mode — */ +html[data-theme="light"] .lt-text-orange { text-shadow: none; color: var(--accent-orange); } +html[data-theme="light"] .lt-text-cyan { text-shadow: none; color: var(--accent-cyan); } +html[data-theme="light"] .lt-text-green { text-shadow: none; color: var(--accent-green); } +html[data-theme="light"] .lt-text-red { text-shadow: none; color: var(--accent-red); } +html[data-theme="light"] .lt-text-amber { text-shadow: none; color: var(--accent-amber); } +html[data-theme="light"] .lt-text-muted { color: var(--text-muted); } + +/* — Markdown — */ +html[data-theme="light"] .lt-markdown code { background: var(--bg-secondary); color: var(--accent-cyan); } +html[data-theme="light"] .lt-markdown blockquote { border-left-color: var(--accent-cyan); background: var(--accent-cyan-dim); } + +/* — KV grid — */ +html[data-theme="light"] .lt-kv-row { border-bottom-color: var(--border-dim); } +html[data-theme="light"] .lt-kv-label { color: var(--text-dim); } + +/* — Empty state — */ +html[data-theme="light"] .lt-empty-state-icon { color: var(--text-dim); } +html[data-theme="light"] .lt-empty-state-title { color: var(--text-secondary); } + +/* — Combobox / typeahead — */ +html[data-theme="light"] .lt-combobox-dropdown, +html[data-theme="light"] .lt-typeahead-dropdown { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 4px 16px rgba(0,0,0,0.1); } +html[data-theme="light"] .lt-combobox-option:hover, +html[data-theme="light"] .lt-typeahead-item:hover, +html[data-theme="light"] .lt-typeahead-item.is-focused, +html[data-theme="light"] .lt-typeahead-item:focus-visible { background: var(--accent-cyan-dim); color: var(--accent-cyan); } +html[data-theme="light"] .lt-combobox-tag { background: var(--accent-cyan-dim); color: var(--accent-cyan); border-color: var(--accent-cyan-border); } + +/* — Sortable ghost — */ +html[data-theme="light"] .lt-sortable-placeholder { background: var(--accent-cyan-dim); border-color: var(--accent-cyan); } + +/* — P-level row accents — softer in light mode — */ +html[data-theme="light"] .lt-row-p1 { border-left-color: var(--accent-red); } +html[data-theme="light"] .lt-row-p2 { border-left-color: var(--accent-orange); } +html[data-theme="light"] .lt-row-p3 { border-left-color: var(--accent-amber); } +html[data-theme="light"] .lt-row-p4 { border-left-color: rgba(50,80,130,0.25); } + +/* — Scrollbar light theme — */ +html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-secondary); } +html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); } +html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); } + + +/* ---------------------------------------------------------------- + 52. THEME TOGGLE BUTTON + ---------------------------------------------------------------- */ +.lt-theme-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; height: 32px; + border-radius: 4px; + border: 1px solid var(--border-color); + background: transparent; + color: var(--accent-cyan); + font-size: 1rem; + cursor: pointer; + transition: var(--transition-fast); + flex-shrink: 0; +} +.lt-theme-btn:hover { + background: var(--accent-cyan-dim); + border-color: var(--accent-cyan-border); + box-shadow: var(--box-glow-cyan); +} +.lt-theme-btn:focus-visible { + outline: 1px solid var(--accent-cyan); + outline-offset: 2px; +} +@media (pointer: coarse) { + .lt-theme-btn { width: 44px; height: 44px; font-size: 1.2rem; } +} + + +/* ---------------------------------------------------------------- + 53. SKELETON LOADER VARIANTS + (Extends existing .lt-skeleton in section 19) + ---------------------------------------------------------------- */ +/* Override section 19 shimmer with improved cyan-tinted version */ +.lt-skeleton { + background: linear-gradient( + 90deg, + var(--bg-secondary) 25%, + rgba(0,212,255,0.05) 50%, + var(--bg-secondary) 75% + ); + background-size: 200% 100%; + animation: lt-shimmer 1.6s ease-in-out infinite; + border-radius: 2px; + display: block; + will-change: opacity; +} +@keyframes lt-shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} +@media (prefers-reduced-motion: reduce) { + .lt-skeleton { animation: none; background: var(--bg-secondary); } +} +@media (pointer: coarse) { + .lt-skeleton { animation: none; } +} +/* Size variants */ +.lt-skeleton-text { height: 0.8rem; width: 100%; margin-bottom: 0.4rem; } +.lt-skeleton-title { height: 1.1rem; width: 55%; margin-bottom: 0.6rem; } +.lt-skeleton-avatar { height: 2.25rem; width: 2.25rem; border-radius: 50%; flex-shrink: 0; } +.lt-skeleton-btn { height: 1.9rem; width: 5.5rem; } +.lt-skeleton-badge { height: 1.1rem; width: 4rem; border-radius: 999px; } +.lt-skeleton-line-sm { height: 0.7rem; width: 40%; margin-bottom: 0.3rem; } +.lt-skeleton-line-lg { height: 0.8rem; width: 80%; margin-bottom: 0.4rem; } + +/* Card skeleton */ +.lt-skeleton-card { + background: var(--bg-card); + border: 1px solid var(--border-dim); + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + padding: 1rem; + display: flex; + flex-direction: column; + gap: 0.4rem; +} +.lt-skeleton-card-header { + display: flex; + gap: 0.75rem; + align-items: center; + margin-bottom: 0.4rem; +} +/* Table row skeleton */ +.lt-skeleton-row { + display: grid; + grid-template-columns: 1.5rem 1fr 2.5fr 1fr 1fr 1fr; + gap: 1rem; + padding: 0.65rem 1rem; + border-bottom: 1px solid var(--border-dim); + align-items: center; +} +@media (max-width: 639px) { + .lt-skeleton-row { grid-template-columns: 1fr 2fr; gap: 0.5rem; } +} + + +/* ---------------------------------------------------------------- + 54. EMPTY STATE ENHANCEMENTS + (Extends existing .lt-empty in section 19) + ---------------------------------------------------------------- */ +.lt-empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 3rem 2rem; + text-align: center; + gap: 0.6rem; +} +.lt-empty-state-icon { + font-size: 2.5rem; + opacity: 0.35; + margin-bottom: 0.25rem; + line-height: 1; +} +.lt-empty-state-title { + color: var(--text-secondary); + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; +} +.lt-empty-state-body { + color: var(--text-muted); + font-size: 0.72rem; + max-width: 30ch; + line-height: 1.7; +} +.lt-empty-state .lt-btn { margin-top: 0.5rem; } +/* Small inline variant */ +.lt-empty-state--sm { + padding: 1.5rem 1rem; +} +.lt-empty-state--sm .lt-empty-state-icon { font-size: 1.5rem; } +.lt-empty-state--sm .lt-empty-state-title { font-size: 0.72rem; } + + +/* ---------------------------------------------------------------- + 55. NAV NOTIFICATION BADGE + ---------------------------------------------------------------- */ +.lt-notif-wrap { + position: relative; + display: inline-flex; +} +.lt-notif-badge { + position: absolute; + top: -4px; + right: -4px; + min-width: 1rem; + height: 1rem; + padding: 0 0.2rem; + background: var(--accent-red); + color: #fff; + font-size: 0.58rem; + font-weight: 700; + border-radius: 999px; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + border: 1.5px solid var(--bg-primary); + pointer-events: none; + animation: lt-notif-pulse 2.5s ease-in-out infinite; +} +.lt-notif-badge[data-count="0"], +.lt-notif-badge:empty { display: none; } +@keyframes lt-notif-pulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(255,45,85,0.7); } + 50% { box-shadow: 0 0 0 5px rgba(255,45,85,0); } +} +@media (pointer: coarse) { .lt-notif-badge { animation: none; } } + + +/* ---------------------------------------------------------------- + 56. RIGHT-SIDE DRAWER + ---------------------------------------------------------------- */ +.lt-drawer-right { + position: fixed; + top: var(--header-height); + right: 0; + height: calc(100vh - var(--header-height)); + width: 400px; + max-width: 92vw; + background: var(--bg-card); + border-left: 1px solid var(--border-color); + clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); + transform: translateX(100%); + transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); + z-index: calc(var(--z-overlay) + 2); /* 10001 — same level as nav overlay */ + display: flex; + flex-direction: column; + overflow: hidden; +} +.lt-drawer-right.is-open { transform: translateX(0); } +.lt-drawer-right-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--border-dim); + flex-shrink: 0; +} +.lt-drawer-right-title { + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); +} +.lt-drawer-right-close { + width: 32px; height: 32px; + display: flex; align-items: center; justify-content: center; + background: none; + border: 1px solid transparent; + color: var(--text-muted); + font-size: 1rem; + cursor: pointer; + border-radius: 2px; + transition: var(--transition-fast); +} +.lt-drawer-right-close:hover { color: var(--accent-red); border-color: var(--accent-red); } +.lt-drawer-right-close:active { color: var(--accent-red); opacity: 0.7; } +.lt-drawer-right-close:focus-visible { outline: 1px solid var(--accent-cyan); outline-offset: 2px; } +.lt-drawer-right-body { + flex: 1; + overflow-y: auto; + padding: 1rem; + overscroll-behavior: contain; +} +.lt-drawer-right-footer { + padding: 0.75rem 1rem; + border-top: 1px solid var(--border-dim); + display: flex; + gap: 0.5rem; + justify-content: flex-end; + flex-shrink: 0; +} +/* Overlay for right drawer */ +.lt-drawer-right-overlay { + position: fixed; + inset: 0; + background: rgba(3,5,8,0.65); + z-index: calc(var(--z-overlay) + 1); /* 10000 */ + opacity: 0; + pointer-events: none; + transition: opacity 0.25s ease; +} +.lt-drawer-right-overlay.is-open { opacity: 1; pointer-events: auto; } +@media (max-width: 479px) { + .lt-drawer-right { width: 100vw; max-width: 100vw; top: 0; height: 100vh; border-left: none; border-top: 1px solid var(--border-color); } +} +@media (pointer: coarse) { + .lt-drawer-right-close { width: 44px; height: 44px; } +} + + +/* ---------------------------------------------------------------- + 57. STICKY TABLE + ---------------------------------------------------------------- */ +.lt-table-sticky-wrap { + max-height: 420px; + overflow-y: auto; + overflow-x: auto; + overscroll-behavior: contain; + border: 1px solid var(--border-dim); + border-radius: 2px; +} +.lt-table-sticky-wrap .lt-table { margin: 0; border: none; } +.lt-table-sticky-wrap .lt-table thead th { + position: sticky; + top: 0; + z-index: 2; + background: var(--bg-tertiary); + backdrop-filter: blur(6px); + border-bottom: 2px solid var(--border-color); + box-shadow: 0 2px 8px rgba(3,5,8,0.5); +} +/* Custom scrollbar inside sticky wrap */ +.lt-table-sticky-wrap::-webkit-scrollbar { width: 6px; height: 6px; } +.lt-table-sticky-wrap::-webkit-scrollbar-track { background: var(--bg-primary); } +.lt-table-sticky-wrap::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } + + +/* ---------------------------------------------------------------- + 58. MULTI-SELECT / COMBOBOX + ---------------------------------------------------------------- */ +.lt-combobox { + position: relative; + display: block; +} +.lt-combobox-input-wrap { + display: flex; + flex-wrap: wrap; + gap: 4px; + align-items: center; + min-height: 36px; + padding: 4px 8px; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + cursor: text; + transition: border-color 0.15s; +} +.lt-combobox-input-wrap:focus-within { + border-color: var(--accent-cyan); + box-shadow: var(--box-glow-cyan); +} +.lt-combobox-input-wrap .lt-combobox-input { + flex: 1; + min-width: 80px; + background: none; + border: none; + outline: none; + color: var(--text-primary); + font-family: var(--font-mono); + font-size: 0.8rem; + padding: 2px 0; +} +/* Selected tag chips inside the input */ +.lt-combobox-tag { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 1px 6px; + background: var(--accent-cyan-dim); + border: 1px solid var(--accent-cyan-border); + color: var(--accent-cyan); + font-size: 0.7rem; + border-radius: 2px; + white-space: nowrap; +} +.lt-combobox-tag-remove { + background: none; border: none; cursor: pointer; + color: var(--text-muted); font-size: 0.75rem; padding: 0; line-height: 1; + display: flex; align-items: center; +} +.lt-combobox-tag-remove:hover { color: var(--accent-red); } +.lt-combobox-tag-remove:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; border-radius: 2px; } +/* Dropdown list */ +.lt-combobox-dropdown { + position: absolute; + top: calc(100% + 2px); + left: 0; right: 0; + background: var(--bg-card); + border: 1px solid var(--border-color); + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + z-index: var(--z-dropdown); + max-height: 200px; + overflow-y: auto; + display: none; +} +.lt-combobox-dropdown.is-open { display: block; } +.lt-combobox-option { + padding: 0.4rem 0.75rem; + font-size: 0.78rem; + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; + transition: background 0.1s; +} +.lt-combobox-option:hover, +.lt-combobox-option.is-focused, +.lt-combobox-option:focus-visible { background: var(--accent-cyan-dim); color: var(--accent-cyan); } +.lt-combobox-option.is-selected::before { + content: '✓'; + color: var(--accent-green); + font-size: 0.7rem; + width: 0.8rem; + flex-shrink: 0; +} +.lt-combobox-option:not(.is-selected)::before { content: ''; width: 0.8rem; display: inline-block; flex-shrink: 0; } +.lt-combobox-empty { + padding: 0.6rem 0.75rem; + font-size: 0.72rem; + color: var(--text-muted); + text-align: center; +} + + +/* ---------------------------------------------------------------- + 59. CONTEXT MENU + ---------------------------------------------------------------- */ +.lt-context-menu { + position: fixed; + background: var(--bg-card); + border: 1px solid var(--border-color); + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + min-width: 160px; + z-index: var(--z-tooltip); + box-shadow: 0 8px 32px rgba(0,0,0,0.45); + padding: 4px 0; + display: none; +} +.lt-context-menu.is-open { display: block; } +.lt-context-menu-item { + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.4rem 0.75rem; + font-size: 0.78rem; + color: var(--text-secondary); + cursor: pointer; + transition: background 0.1s; + user-select: none; + white-space: nowrap; +} +.lt-context-menu-item:hover { background: var(--accent-cyan-dim); color: var(--accent-cyan); } +.lt-context-menu-item:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; background: var(--accent-cyan-dim); color: var(--accent-cyan); } +.lt-context-menu-item.is-danger:hover { background: var(--accent-red-dim); color: var(--accent-red); } +.lt-context-menu-item .icon { width: 1rem; text-align: center; opacity: 0.7; font-size: 0.75rem; } +.lt-context-menu-item kbd { + margin-left: auto; + font-size: 0.6rem; + color: var(--text-muted); + background: var(--bg-tertiary); + border: 1px solid var(--border-dim); + padding: 1px 4px; + border-radius: 2px; +} +.lt-context-menu-divider { + height: 1px; + background: var(--border-dim); + margin: 4px 0; +} +.lt-context-menu-label { + padding: 0.25rem 0.75rem; + font-size: 0.62rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-muted); + pointer-events: none; +} + + +/* ---------------------------------------------------------------- + 60. OFFLINE BANNER + ---------------------------------------------------------------- */ +.lt-offline-banner { + position: fixed; + top: var(--header-height); + left: 0; right: 0; + padding: 0.4rem 1rem; + background: var(--accent-red-dim); + border-top: 1px solid var(--accent-red); + border-bottom: 1px solid var(--accent-red); + color: var(--accent-red); + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.1em; + text-align: center; + z-index: var(--z-fixed); + transform: translateY(-100%); + transition: transform 0.25s ease; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} +.lt-offline-banner.is-visible { transform: translateY(0); } +.lt-offline-banner .lt-dot--red { + animation: lt-pulse 1s ease-in-out infinite; +} +@keyframes lt-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} +body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s ease; } + + +/* ---------------------------------------------------------------- + 61. TIMELINE / ACTIVITY FEED + ---------------------------------------------------------------- */ +.lt-timeline { + display: flex; + flex-direction: column; + gap: 0; + padding-left: 1.25rem; + border-left: 1px solid var(--border-dim); + margin-left: 0.5rem; +} +.lt-timeline-item { + position: relative; + padding: 0 0 1.25rem 1.25rem; +} +.lt-timeline-item:last-child { padding-bottom: 0; } +/* Connector dot */ +.lt-timeline-item::before { + content: ''; + position: absolute; + left: -5px; + top: 4px; + width: 8px; height: 8px; + border-radius: 50%; + background: var(--accent-cyan); + box-shadow: 0 0 6px var(--accent-cyan); + border: 1.5px solid var(--bg-primary); +} +.lt-timeline-item--orange::before { background: var(--accent-orange); box-shadow: var(--glow-orange); } +.lt-timeline-item--green::before { background: var(--accent-green); box-shadow: var(--glow-green); } +.lt-timeline-item--red::before { background: var(--accent-red); box-shadow: var(--glow-red); } +.lt-timeline-item--dim::before { background: var(--text-muted); box-shadow: none; } +.lt-timeline-meta { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.68rem; + color: var(--text-muted); + margin-bottom: 0.2rem; + flex-wrap: wrap; +} +.lt-timeline-actor { color: var(--accent-cyan); } +.lt-timeline-time { margin-left: auto; white-space: nowrap; } +.lt-timeline-body { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; } +.lt-timeline-body code { font-size: 0.72rem; color: var(--accent-green); } + + +/* ---------------------------------------------------------------- + 62. AVATAR + ---------------------------------------------------------------- */ +.lt-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: var(--bg-tertiary); + border: 1.5px solid var(--border-color); + color: var(--accent-cyan); + font-weight: 700; + font-size: 0.75rem; + text-transform: uppercase; + overflow: hidden; + flex-shrink: 0; + user-select: none; +} +.lt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } +/* Sizes */ +.lt-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: 0.55rem; } +.lt-avatar--sm { width: 2rem; height: 2rem; font-size: 0.65rem; } +.lt-avatar { width: 2.5rem; height: 2.5rem; font-size: 0.75rem; } /* default */ +.lt-avatar--lg { width: 3.5rem; height: 3.5rem; font-size: 1rem; } +.lt-avatar--xl { width: 5rem; height: 5rem; font-size: 1.4rem; } +/* Color variants */ +.lt-avatar--orange { background: var(--accent-orange-dim); border-color: var(--accent-orange-border); color: var(--accent-orange); } +.lt-avatar--green { background: var(--accent-green-dim); border-color: var(--accent-green-border); color: var(--accent-green); } +.lt-avatar--red { background: var(--accent-red-dim); border-color: var(--accent-red); color: var(--accent-red); } +.lt-avatar--purple { background: var(--accent-purple-dim); border-color: var(--accent-purple); color: var(--accent-purple); } +/* Avatar group (overlapping row) */ +.lt-avatar-group { display: flex; } +.lt-avatar-group .lt-avatar { + margin-left: -0.5rem; + border: 2px solid var(--bg-primary); + transition: transform 0.15s; +} +.lt-avatar-group .lt-avatar:first-child { margin-left: 0; } +.lt-avatar-group .lt-avatar:hover { transform: translateY(-2px) scale(1.08); z-index: 1; } +/* Status ring */ +.lt-avatar-wrap { + position: relative; + display: inline-flex; + flex-shrink: 0; +} +.lt-avatar-status { + position: absolute; + bottom: 1px; right: 1px; + width: 9px; height: 9px; + border-radius: 50%; + border: 1.5px solid var(--bg-primary); + background: var(--text-muted); +} +.lt-avatar-status--online { background: var(--accent-green); box-shadow: 0 0 4px var(--accent-green); } +.lt-avatar-status--away { background: var(--accent-amber); } +.lt-avatar-status--busy { background: var(--accent-red); } + + +/* ---------------------------------------------------------------- + 63. SPLIT PANE + ---------------------------------------------------------------- */ +.lt-split { + display: flex; + width: 100%; + height: 100%; + overflow: hidden; + position: relative; +} +.lt-split--vertical { flex-direction: column; } +.lt-split-pane { + overflow: auto; + flex: 1; + min-width: 0; + min-height: 0; +} +.lt-split-divider { + flex: 0 0 5px; + background: var(--border-color); /* 16% opacity — clearly visible */ + cursor: col-resize; + transition: background 0.15s; + position: relative; + user-select: none; + touch-action: none; + /* Wider invisible hit area so it's easy to grab */ +} +.lt-split-divider::before { + content: ''; + position: absolute; + top: 0; bottom: 0; + left: -6px; right: -6px; + cursor: col-resize; +} +.lt-split-divider::after { + content: '⠿'; + position: absolute; + top: 50%; left: 50%; + transform: translate(-50%, -50%); + color: var(--text-muted); + font-size: 0.75rem; + pointer-events: none; +} +.lt-split-divider:hover, +.lt-split-divider.is-dragging { background: var(--accent-cyan); } +.lt-split-divider:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 3px; } +.lt-split--vertical .lt-split-divider::before { top: -6px; bottom: -6px; left: 0; right: 0; cursor: row-resize; } +.lt-split--vertical .lt-split-divider { cursor: row-resize; } +/* On mobile, stack vertically and hide divider */ +@media (max-width: 767px) { + .lt-split:not(.lt-split--vertical) { flex-direction: column; } + .lt-split:not(.lt-split--vertical) .lt-split-divider { display: none; } + .lt-split:not(.lt-split--vertical) .lt-split-pane { flex: 0 0 auto; } +} + + +/* ---------------------------------------------------------------- + 64. CHART CONTAINER + ---------------------------------------------------------------- */ +.lt-chart-wrap { + position: relative; + background: var(--bg-card); + border: 1px solid var(--border-dim); + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + padding: 1rem; + overflow: hidden; +} +.lt-chart-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.75rem; + flex-wrap: wrap; + gap: 0.5rem; +} +.lt-chart-title { + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-secondary); +} +.lt-chart-legend { + display: flex; + gap: 1rem; + font-size: 0.68rem; + color: var(--text-muted); + flex-wrap: wrap; +} +.lt-chart-legend-item { + display: flex; + align-items: center; + gap: 0.35rem; +} +.lt-chart-legend-dot { + width: 8px; height: 8px; + border-radius: 50%; + flex-shrink: 0; +} +.lt-chart-body { + position: relative; + width: 100%; +} +/* Sparkline — inline mini chart */ +.lt-sparkline { + display: inline-block; + vertical-align: middle; +} +/* Axis labels */ +.lt-chart-axis { + display: flex; + justify-content: space-between; + font-size: 0.62rem; + color: var(--text-muted); + margin-top: 0.25rem; +} +/* Loading / no-data states */ +.lt-chart-wrap.is-loading .lt-chart-body { min-height: 120px; } +.lt-chart-wrap.is-loading .lt-chart-body::after { + content: 'LOADING DATA...'; + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.68rem; + color: var(--text-muted); + letter-spacing: 0.1em; +} + + +/* ---------------------------------------------------------------- + 65. TOAST QUEUE (enhanced multi-toast stack) + ---------------------------------------------------------------- */ +/* Toast container already exists in section 14; these are addons */ +#lt-toast-container { + /* Stack from bottom — newest on top */ + display: flex; + flex-direction: column-reverse; + gap: 0.5rem; +} +.lt-toast + .lt-toast { margin-top: 0; } /* gap handles spacing */ +/* Progress bar on toast (auto-dismiss countdown) */ +.lt-toast-progress { + position: absolute; + bottom: 0; left: 0; + height: 2px; + background: currentColor; + opacity: 0.4; + animation: lt-toast-drain linear forwards; +} +@keyframes lt-toast-drain { + from { width: 100%; } + to { width: 0; } +} +/* Pause on hover */ +.lt-toast:hover .lt-toast-progress { animation-play-state: paused; } + + +/* ---------------------------------------------------------------- + 66. AUTOCOMPLETE / TYPEAHEAD + ---------------------------------------------------------------- */ +.lt-typeahead { + position: relative; + display: block; +} +.lt-typeahead-dropdown { + position: absolute; + top: calc(100% + 2px); + left: 0; right: 0; + background: var(--bg-card); + border: 1px solid var(--border-color); + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + z-index: var(--z-dropdown); + max-height: 220px; + overflow-y: auto; + display: none; +} +.lt-typeahead-dropdown.is-open { display: block; } +.lt-typeahead-item { + padding: 0.4rem 0.75rem; + font-size: 0.78rem; + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; + transition: background 0.1s; +} +.lt-typeahead-item:hover, +.lt-typeahead-item.is-focused, +.lt-typeahead-item:focus-visible { background: var(--accent-cyan-dim); color: var(--accent-cyan); } +.lt-typeahead-item mark { + background: none; + color: var(--accent-orange); + font-weight: 700; +} +.lt-typeahead-item .icon { + font-size: 0.75rem; + opacity: 0.6; + width: 1rem; + text-align: center; + flex-shrink: 0; +} +.lt-typeahead-empty { + padding: 0.6rem 0.75rem; + font-size: 0.72rem; + color: var(--text-muted); + text-align: center; + letter-spacing: 0.05em; +} +/* Loading state in dropdown */ +.lt-typeahead-loading { + padding: 0.6rem 0.75rem; + font-size: 0.72rem; + color: var(--text-muted); + display: flex; + align-items: center; + gap: 0.5rem; +} +.lt-typeahead-loading::before { + content: ''; + width: 10px; height: 10px; + border: 1.5px solid var(--border-color); + border-top-color: var(--accent-cyan); + border-radius: 50%; + animation: spin 0.7s linear infinite; + flex-shrink: 0; +} + + +/* ---------------------------------------------------------------- + 67. WEBSOCKET STATUS INDICATOR + ---------------------------------------------------------------- */ +.lt-ws-status { + display: inline-flex; + align-items: center; + gap: 0.4rem; + font-size: 0.68rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-muted); + padding: 2px 8px; + border: 1px solid var(--border-dim); + border-radius: 2px; +} +.lt-ws-status .lt-dot { flex-shrink: 0; } +.lt-ws-status[data-state="connected"] { color: var(--accent-green); border-color: var(--accent-green-border); } +.lt-ws-status[data-state="connecting"] { color: var(--accent-amber); border-color: var(--accent-amber-dim); } +.lt-ws-status[data-state="disconnected"] { color: var(--accent-red); border-color: var(--accent-red-dim); } +.lt-ws-status[data-state="connected"] .lt-dot { background: var(--accent-green); box-shadow: var(--glow-green); } +.lt-ws-status[data-state="connecting"] .lt-dot { background: var(--accent-amber); box-shadow: var(--glow-amber); animation: lt-pulse 0.8s ease-in-out infinite; } +.lt-ws-status[data-state="disconnected"] .lt-dot { background: var(--accent-red); } + + +/* ---------------------------------------------------------------- + 69. INFINITE SCROLL SENTINEL / LOADING + ---------------------------------------------------------------- */ +.lt-infinite-sentinel { height: 1px; width: 100%; } +.lt-infinite-loading { + display: flex; + justify-content: center; + padding: 1.5rem; +} + + +/* ---------------------------------------------------------------- + 70. WIZARD / MULTI-STEP FORM + ---------------------------------------------------------------- */ +/* Step container — hide non-active steps */ +[data-wizard-step] { display: none; } +[data-wizard-step].is-active { display: block; } + +/* Progress indicator bar */ +.lt-wizard-steps { + display: flex; + align-items: center; + gap: 0; + margin-bottom: 1.5rem; + overflow-x: auto; + padding-bottom: 2px; +} +.lt-wizard-step { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.3rem; + flex: 1; + min-width: 60px; + position: relative; + cursor: default; +} +/* Connector line between steps */ +.lt-wizard-step::before { + content: ''; + position: absolute; + top: 14px; + left: calc(-50% + 14px); + right: calc(50% + 14px); + height: 1px; + background: var(--border-dim); + z-index: 0; +} +.lt-wizard-step:first-child::before { display: none; } +.lt-wizard-step.is-complete::before { background: var(--accent-cyan); } +/* Step number circle */ +.lt-wizard-num { + width: 28px; height: 28px; + border-radius: 50%; + background: var(--bg-secondary); + border: 1.5px solid var(--border-color); + color: var(--text-muted); + font-size: 0.72rem; + font-weight: 700; + display: flex; align-items: center; justify-content: center; + position: relative; + z-index: 1; + transition: all 0.2s; +} +.lt-wizard-step.is-active .lt-wizard-num { + background: var(--accent-orange-dim); + border-color: var(--accent-orange); + color: var(--accent-orange); + box-shadow: var(--box-glow-orange); +} +.lt-wizard-step.is-complete .lt-wizard-num { + background: var(--accent-cyan-dim); + border-color: var(--accent-cyan); + color: var(--accent-cyan); +} +.lt-wizard-step.is-complete .lt-wizard-num::after { + content: '✓'; + position: absolute; +} +.lt-wizard-step.is-error .lt-wizard-num { + background: var(--accent-red-dim); + border-color: var(--accent-red); + color: var(--accent-red); +} +.lt-wizard-label { + font-size: 0.62rem; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-muted); + white-space: nowrap; + text-align: center; +} +.lt-wizard-step.is-active .lt-wizard-label { color: var(--accent-orange); } +.lt-wizard-step.is-complete .lt-wizard-label { color: var(--text-secondary); } +/* Counter badge */ +.lt-wizard-counter { + font-size: 0.68rem; + color: var(--text-muted); +} +.lt-wizard-counter strong { color: var(--accent-cyan); } +/* Nav footer */ +.lt-wizard-nav { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 1.5rem; + padding-top: 1rem; + border-top: 1px solid var(--border-dim); + gap: 0.75rem; +} + + +/* ---------------------------------------------------------------- + 71. SORTABLE LIST + ---------------------------------------------------------------- */ +[data-sortable-item] { transition: opacity 0.15s; } +[data-sortable-item].is-dragging { + opacity: 0.35; + cursor: grabbing; +} +.lt-sortable-placeholder { + background: var(--accent-cyan-dim); + border: 1px dashed var(--accent-cyan-border); + border-radius: 2px; + pointer-events: none; +} + + +/* ---------------------------------------------------------------- + 72. COUNTDOWN / TIMER + ---------------------------------------------------------------- */ +.lt-countdown { + font-variant-numeric: tabular-nums; + font-feature-settings: "tnum"; + font-size: 1.25rem; + font-weight: 700; + color: var(--accent-cyan); + letter-spacing: 0.05em; +} +.lt-countdown.lt-text-red { text-shadow: var(--glow-red); } +.lt-countdown.lt-text-cyan { text-shadow: var(--glow-cyan); } +/* SLA urgency animation */ +.lt-countdown-urgent { + animation: lt-countdown-blink 1s step-end infinite; +} +@keyframes lt-countdown-blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } +} +@media (prefers-reduced-motion: reduce) { + .lt-countdown-urgent { animation: none; } +} + + +/* ---------------------------------------------------------------- + 73. IMAGE LIGHTBOX + ---------------------------------------------------------------- */ +.lt-lightbox-overlay { + position: fixed; + inset: 0; + background: rgba(3,5,8,0.96); + z-index: calc(var(--z-modal) + 10); /* above everything */ + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease; +} +.lt-lightbox-overlay.is-open { + opacity: 1; + pointer-events: auto; +} +.lt-lightbox-img-wrap { + max-width: 90vw; + max-height: 85vh; + display: flex; + align-items: center; + justify-content: center; +} +.lt-lightbox-img { + max-width: 100%; + max-height: 85vh; + object-fit: contain; + box-shadow: 0 0 60px rgba(0,212,255,0.12); + display: block; +} +.lt-lightbox-close, +.lt-lightbox-prev, +.lt-lightbox-next { + position: fixed; + background: rgba(10,14,23,0.75); + border: 1px solid var(--border-color); + color: var(--text-secondary); + font-size: 1.5rem; + cursor: pointer; + transition: var(--transition-fast); + display: flex; align-items: center; justify-content: center; + border-radius: 2px; +} +.lt-lightbox-close { top: 1rem; right: 1rem; width: 40px; height: 40px; } +.lt-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; } +.lt-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; } +.lt-lightbox-close:hover, +.lt-lightbox-prev:hover, +.lt-lightbox-next:hover { color: var(--accent-cyan); border-color: var(--accent-cyan-border); box-shadow: var(--box-glow-cyan); } +.lt-lightbox-close:focus-visible, +.lt-lightbox-prev:focus-visible, +.lt-lightbox-next:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; color: var(--accent-cyan); } +.lt-lightbox-caption { + position: fixed; + bottom: 3rem; + left: 50%; + transform: translateX(-50%); + font-size: 0.78rem; + color: var(--text-secondary); + max-width: 60vw; + text-align: center; +} +.lt-lightbox-counter { + position: fixed; + bottom: 1rem; + left: 50%; + transform: translateX(-50%); + font-size: 0.68rem; + color: var(--text-muted); + letter-spacing: 0.1em; +} +@media (pointer: coarse) { + .lt-lightbox-prev { width: 56px; height: 80px; } + .lt-lightbox-next { width: 56px; height: 80px; } + .lt-lightbox-close { width: 48px; height: 48px; } +} + + +/* ---------------------------------------------------------------- + 74. SIDEBAR SUBMENUS + ---------------------------------------------------------------- */ +.lt-sidebar-group { + margin-bottom: 0.25rem; +} +.lt-sidebar-group-label { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.35rem 0.75rem; + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-muted); + cursor: pointer; + user-select: none; + transition: color 0.15s; + border-radius: 2px; +} +.lt-sidebar-group-label:hover { color: var(--text-secondary); } +.lt-sidebar-group-label:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; border-radius: 2px; } +.lt-sidebar-group-label .chevron { + font-size: 0.5rem; + transition: transform 0.2s ease; + opacity: 0.6; +} +.lt-sidebar-group.is-open .lt-sidebar-group-label .chevron { transform: rotate(90deg); } +/* Submenu items */ +.lt-sidebar-submenu { + display: none; + flex-direction: column; + padding-left: 0.75rem; + border-left: 1px solid var(--border-dim); + margin-left: 0.75rem; + margin-top: 2px; + margin-bottom: 4px; +} +.lt-sidebar-group.is-open .lt-sidebar-submenu { display: flex; } +.lt-sidebar-sub-link { + padding: 0.3rem 0.5rem; + font-size: 0.72rem; + color: var(--text-muted); + text-decoration: none; + border-radius: 2px; + transition: var(--transition-fast); + display: flex; + align-items: center; + gap: 0.4rem; + white-space: nowrap; +} +.lt-sidebar-sub-link:hover { color: var(--accent-cyan); background: var(--accent-cyan-dim); } +.lt-sidebar-sub-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; border-radius: 2px; } +.lt-sidebar-sub-link.active, +.lt-sidebar-sub-link[aria-current="page"] { + color: var(--accent-orange); + background: var(--accent-orange-dim); +} +@media (pointer: coarse) { + .lt-sidebar-group-label { padding: 0.5rem 0.75rem; } + .lt-sidebar-sub-link { padding: 0.4rem 0.5rem; min-height: 36px; } +} + + +/* ---------------------------------------------------------------- + 75. MARKDOWN OUTPUT STYLING + ---------------------------------------------------------------- */ +.lt-markdown h1 { font-size: 1.25rem; color: var(--accent-cyan); border-bottom: 1px solid var(--border-dim); padding-bottom: 0.3rem; margin: 1rem 0 0.5rem; } +.lt-markdown h2 { font-size: 1.05rem; color: var(--text-primary); margin: 0.9rem 0 0.4rem; } +.lt-markdown h3 { font-size: 0.9rem; color: var(--text-secondary); margin: 0.75rem 0 0.35rem; } +.lt-markdown h4, .lt-markdown h5, .lt-markdown h6 { font-size: 0.8rem; color: var(--text-muted); margin: 0.5rem 0 0.25rem; } +.lt-markdown p { font-size: 0.82rem; line-height: 1.7; color: var(--text-secondary); margin: 0.5rem 0; } +.lt-markdown ul, .lt-markdown ol { padding-left: 1.25rem; margin: 0.5rem 0; } +.lt-markdown li { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.2rem; } +.lt-markdown ul li::marker { color: var(--accent-cyan); } +.lt-markdown ol li::marker { color: var(--accent-orange); } +.lt-markdown code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-green); background: var(--bg-secondary); padding: 1px 5px; border-radius: 2px; } +.lt-markdown pre { margin: 0.75rem 0; overflow-x: auto; } +.lt-markdown blockquote { border-left: 3px solid var(--accent-cyan-border); padding: 0.25rem 0.75rem; margin: 0.5rem 0; background: var(--accent-cyan-dim); color: var(--text-muted); font-style: italic; } +.lt-markdown hr { border: none; border-top: 1px solid var(--border-dim); margin: 1rem 0; } +.lt-markdown a { color: var(--accent-cyan); text-decoration: none; } +.lt-markdown a:hover { text-decoration: underline; } +.lt-markdown a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } +.lt-markdown strong { color: var(--text-primary); } +.lt-markdown img { max-width: 100%; border: 1px solid var(--border-dim); } +.lt-markdown table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin: 0.75rem 0; } +.lt-markdown th { background: var(--bg-secondary); color: var(--accent-cyan); padding: 0.4rem 0.6rem; border: 1px solid var(--border-dim); text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; } +.lt-markdown td { padding: 0.35rem 0.6rem; border: 1px solid var(--border-dim); color: var(--text-secondary); } +.lt-markdown tr:hover td { background: var(--bg-secondary); } + + +/* ---------------------------------------------------------------- + 68. PRINT ENHANCEMENTS + (Extends section 25) + ---------------------------------------------------------------- */ +@media print { + .lt-sidebar, .lt-nav, .lt-header-right, + .lt-btn-group, .lt-menu-btn, + .lt-nav-drawer, .lt-nav-drawer-overlay, + .lt-offline-banner, .lt-context-menu, + [data-modal-open], [data-tooltip] { display: none !important; } + + .lt-section, .lt-card, .lt-frame { + break-inside: avoid; + box-shadow: none; + clip-path: none; + border: 1px solid #999; + } + .lt-table { border-collapse: collapse; } + .lt-table th, .lt-table td { border: 1px solid #ccc; } + .lt-table thead th { background: #eee !important; color: black !important; } + a[href]::after { content: " (" attr(href) ")"; font-size: 0.7em; color: #666; } + a[href^="#"]::after, a[href^="javascript"]::after { content: ""; } + .lt-code-block { white-space: pre-wrap; word-break: break-all; } + .lt-page-header { border-bottom: 2px solid #333; padding-bottom: 0.5rem; margin-bottom: 1rem; } +} + +/* ---------------------------------------------------------------- + 76. NOTIFICATION DROPDOWN PANEL + ---------------------------------------------------------------- */ +.lt-notif-dropdown-wrap { + position: relative; + display: inline-flex; + align-items: center; +} + +.lt-notif-panel { + position: absolute; + top: calc(100% + 6px); + right: 0; + width: min(300px, 92vw); + background: var(--bg-secondary); + border: 1px solid var(--border-color); + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + z-index: var(--z-panel); + box-shadow: 0 8px 32px rgba(0,0,0,0.5); + transform-origin: top right; + transform: scale(0.95); + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease, transform 0.15s ease; + overflow: hidden; +} +.lt-notif-panel:not([aria-hidden]) { + opacity: 1; + transform: scale(1); + pointer-events: auto; +} + +.lt-notif-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.6rem 0.75rem; + border-bottom: 1px solid var(--border-dim); + font-size: 0.75rem; + font-family: var(--font-mono); + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-muted); +} +.lt-notif-panel-clear { + background: none; + border: none; + color: var(--accent-cyan); + font-size: 0.68rem; + font-family: var(--font-mono); + cursor: pointer; + padding: 0; + text-transform: uppercase; + letter-spacing: 0.04em; +} +.lt-notif-panel-clear:hover { text-decoration: underline; } +.lt-notif-panel-clear:active { opacity: 0.7; } +.lt-notif-panel-clear:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } + +.lt-notif-panel-list { max-height: min(280px, calc(80vh - 110px)); overflow-y: auto; } + +.lt-notif-item { + display: flex; + align-items: flex-start; + gap: 0.6rem; + padding: 0.6rem 0.75rem; + border-bottom: 1px solid var(--border-dim); + cursor: pointer; + transition: background 0.1s; +} +.lt-notif-item:hover { background: var(--bg-tertiary); } +.lt-notif-item:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; background: var(--bg-tertiary); } +.lt-notif-item--unread { background: rgba(0, 212, 255, 0.04); } + +.lt-notif-dot { + flex-shrink: 0; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--accent-cyan); + margin-top: 4px; + box-shadow: 0 0 6px var(--accent-cyan); +} +.lt-notif-dot--read { + background: var(--border-color); + box-shadow: none; +} + +.lt-notif-item-body { flex: 1; min-width: 0; } +.lt-notif-item-title { + font-size: 0.78rem; + color: var(--text-primary); + line-height: 1.4; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.lt-notif-item--unread .lt-notif-item-title { color: var(--text-primary); font-weight: 600; } +.lt-notif-item-time { + font-size: 0.7rem; + color: var(--text-muted); + margin-top: 2px; + font-family: var(--font-mono); +} + +.lt-notif-panel-footer { + padding: 0.5rem 0.75rem; + border-top: 1px solid var(--border-dim); +} + +/* ---------------------------------------------------------------- + 77. GENERIC DROPDOWN WIDGET + ---------------------------------------------------------------- */ +.lt-dropdown-wrap { + position: relative; + display: inline-block; +} + +.lt-dropdown-panel { + position: absolute; + top: calc(100% + 4px); + left: 0; + min-width: 160px; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + z-index: var(--z-panel); + box-shadow: 0 8px 24px rgba(0,0,0,0.4); + transform-origin: top left; + transform: scale(0.95); + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease, transform 0.15s ease; +} +.lt-dropdown-panel--right { + left: auto; + right: 0; + transform-origin: top right; +} +.lt-dropdown-panel:not([aria-hidden]) { + opacity: 1; + transform: scale(1); + pointer-events: auto; +} + +.lt-dropdown-item { + display: block; + width: 100%; + padding: 0.5rem 0.85rem; + background: none; + border: none; + text-align: left; + font-size: 0.78rem; + font-family: var(--font-mono); + color: var(--text-secondary); + cursor: pointer; + transition: background 0.1s, color 0.1s; + white-space: nowrap; + min-height: 36px; + display: flex; + align-items: center; +} +.lt-dropdown-item:hover { + background: var(--bg-tertiary); + color: var(--text-primary); +} +.lt-dropdown-item:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: -2px; + background: var(--bg-tertiary); + color: var(--text-primary); +} +.lt-dropdown-item--danger { color: var(--accent-red); } +.lt-dropdown-item--danger:hover { background: rgba(255,45,85,0.1); color: var(--accent-red); } + +.lt-dropdown-divider { + height: 1px; + background: var(--border-dim); + margin: 0.25rem 0; +} + +/* textarea utility */ +.lt-textarea { + min-height: 60px; + resize: vertical; + line-height: 1.5; +} + +/* ---------------------------------------------------------------- + 78. MOBILE / RESPONSIVE FIXES v1.1 + Targeted overrides addressing audit findings. + ---------------------------------------------------------------- */ + +/* — Modal max-width cap (prevents 4K-wide modals) — */ +.lt-modal { max-width: 640px; } +@media (max-width: 767px) { .lt-modal { max-width: 96vw; } } +@media (max-width: 479px) { .lt-modal { max-width: 100vw; } } + +/* — Landscape phone: better modal + nav spacing — */ +@media (max-height: 500px) and (orientation: landscape) { + .lt-modal { max-height: calc(100vh - 48px); overflow-y: auto; } + .lt-modal-body { max-height: calc(100vh - 130px); overflow-y: auto; } + .lt-notif-panel-list { max-height: calc(100vh - 140px); } + .lt-header { padding: 0 var(--space-md); } + /* Suppress boot overlay on landscape to save vertical space */ + .lt-boot-overlay { display: none !important; } +} + +/* — Dropdown panels: stay within viewport on SM/XS — */ +@media (max-width: 767px) { + .lt-dropdown-panel { max-width: 90vw; font-size: 0.8rem; } + .lt-dropdown-panel--right { left: auto; right: 0; } + .lt-dropdown-item { font-size: 0.8rem; } + + /* Notification panel: left-safe positioning */ + .lt-notif-panel { right: 0; max-width: 90vw; } + + /* Advanced filter panel: left-aligned to prevent right overflow */ + #adv-filter-panel { left: 0; right: auto; } + + /* Right drawer full-screen on SM */ + .lt-drawer-right { + width: 100vw; + max-width: 100vw; + border-left: none; + border-top: 1px solid var(--border-color); + } + + /* Right drawer body: more compact padding */ + .lt-drawer-right-body { padding: var(--space-sm) var(--space-md); } + + /* Inline split pane → stack vertically on SM */ + .lt-split:not(.lt-split--vertical) { + flex-direction: column; + } + .lt-split:not(.lt-split--vertical) .lt-split-divider { + width: 100%; + height: 6px; + cursor: ns-resize; + margin: 0; + } + .lt-split:not(.lt-split--vertical) .lt-split-divider::before { + top: -6px; bottom: -6px; + left: 0; right: 0; + width: auto; height: auto; + } + .lt-split-pane { flex: none; width: 100% !important; } +} + +/* — XS font-size floors (nothing below 0.72rem = ~11.5px) — */ +@media (max-width: 479px) { + .lt-cmd-group-label { font-size: 0.72rem; } + .lt-cmd-item-label { font-size: 0.78rem; } + .lt-cmd-item-kbd { font-size: 0.72rem; } + .lt-nav-drawer-section { font-size: 0.72rem; } + .lt-frame::before { font-size: 0.65rem; } /* just above retina floor */ + .lt-stat-label { font-size: 0.72rem; } + .lt-section-title { font-size: 0.72rem; } + .lt-chart-axis span { font-size: 0.68rem; } + .lt-dropdown-item { font-size: 0.8rem; min-height: 40px; } + .lt-notif-item-title { font-size: 0.78rem; } + .lt-notif-item-time { font-size: 0.72rem; } + .lt-badge-admin, + .lt-header-user { font-size: 0.7rem; } + /* Hide admin badge on very small screens to save header space */ + .lt-badge-admin { display: none; } +} + +/* — Safe-area insets for notched devices (header-right) — */ +@supports (padding: max(0px)) { + .lt-header-right { + padding-right: max(var(--space-md), env(safe-area-inset-right)); + } + .lt-header { + padding-left: max(var(--space-md), env(safe-area-inset-left)); + padding-right: max(var(--space-md), env(safe-area-inset-right)); + } + /* Bottom toast: respect home indicator */ + #lt-toast-container { + bottom: max(var(--space-md), env(safe-area-inset-bottom)); + } +} + +/* — Header: tighter brand on XS to prevent overflow — */ +@media (max-width: 479px) { + .lt-header { padding: 0 var(--space-sm); gap: var(--space-xs); } + .lt-header-left { gap: var(--space-xs); flex-shrink: 1; min-width: 0; } + .lt-brand-title { + font-size: 0.85rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 110px; + } + .lt-ws-status { display: none; } /* hide WS indicator on XS, save space */ + .lt-header-right { gap: var(--space-xs); flex-shrink: 0; } +} + +/* — Stats grid: never below 2-col, but use auto-fit for flexibility — */ +@media (max-width: 767px) { + .lt-stats-grid { + grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); + } +} + +/* — Lightbox: full-screen on any phone — */ +@media (max-width: 767px) { + .lt-lightbox-overlay { + padding: 0; + background: rgba(0,0,0,0.97); + } + .lt-lightbox-img { + max-width: 100vw; + max-height: calc(100vh - 80px); + border: none; + } + .lt-lightbox-nav-prev, + .lt-lightbox-nav-next { + bottom: 1rem; + top: auto; + transform: none; + font-size: 1.2rem; + } + .lt-lightbox-nav-prev { left: 1rem; } + .lt-lightbox-nav-next { right: 1rem; } +} + +/* — Wizard steps: compact on XS — */ +@media (max-width: 479px) { + .lt-wizard-steps { + overflow-x: auto; + padding-bottom: 4px; + scrollbar-width: none; + } + .lt-wizard-steps::-webkit-scrollbar { display: none; } + .lt-wizard-step-label { display: none; } /* show only numbers on XS */ + .lt-wizard-step.active .lt-wizard-step-label { display: block; } +} + +/* — Timeline: tighter on XS — */ +@media (max-width: 479px) { + .lt-timeline-item { padding: var(--space-xs) 0 var(--space-xs) var(--space-md); } + .lt-timeline-item::before { left: 0; } + .lt-timeline-meta { font-size: 0.72rem; flex-wrap: wrap; } + .lt-timeline-body { font-size: 0.75rem; } +} + +/* — Code blocks: prevent overflow and fix font on mobile — */ +@media (max-width: 767px) { + .lt-code-block { font-size: 0.75rem; overflow-x: auto; } + .lt-code-block pre { white-space: pre; word-break: normal; } +} + +/* — Pagination: 44px touch targets on coarse pointer — */ +@media (pointer: coarse) { + .lt-page-btn { + min-height: 44px; + min-width: 44px; + font-size: 0.85rem; + } +} + +/* — 4K: cap stats grid at 8 columns but use auto-fit — */ +@media (min-width: 2560px) { + .lt-stats-grid { grid-template-columns: repeat(8, 1fr); max-width: 100%; } + .lt-modal { max-width: 800px; } +} + +/* ---------------------------------------------------------------- + 79. FOOTER + ---------------------------------------------------------------- */ +.lt-footer { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: var(--space-sm); + padding: var(--space-md) var(--space-lg); + border-top: 1px solid var(--border-dim); + margin-top: auto; + background: var(--bg-secondary); + color: var(--text-muted); + font-size: 0.7rem; + font-family: var(--font-mono); +} +@media (max-width: 479px) { + .lt-footer { flex-direction: column; align-items: flex-start; gap: 0.25rem; } +} + +/* ================================================================ + BLINKING CURSOR +

SYSTEM STATUS

+ SCANNING + ================================================================ */ +.lt-cursor::after { + content: '▊'; + animation: lt-blink 1s step-end infinite; + color: var(--accent-green); + margin-left: 2px; +} +.lt-cursor--cyan::after { color: var(--accent-cyan); } +.lt-cursor--orange::after { color: var(--accent-orange); } +.lt-cursor--red::after { color: var(--accent-red); } +@keyframes lt-blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +/* ================================================================ + CRT SCANLINE OVERLAY + Add lt-scanlines to or any container to enable. + Automatically suppressed in light theme. + ================================================================ */ +.lt-scanlines::after { + content: ''; + position: fixed; + inset: 0; + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 0, 0, 0.04) 2px, + rgba(0, 0, 0, 0.04) 4px + ); + pointer-events: none; + z-index: 9998; +} +html[data-theme="light"] .lt-scanlines::after { display: none; } + +/* ================================================================ + RADAR SWEEP LOADING INDICATOR +
+ Drop-in replacement for lt-spinner where a radar aesthetic fits. + ================================================================ */ +.lt-radar { + display: inline-block; + width: 48px; height: 48px; + border-radius: 50%; + border: 1px solid var(--accent-cyan); + position: relative; + overflow: hidden; + flex-shrink: 0; +} +.lt-radar::before { + content: ''; + position: absolute; + inset: 0; + background: conic-gradient( + from 0deg, + transparent 70%, + rgba(0, 212, 255, 0.35) 100% + ); + animation: lt-radar-sweep 2s linear infinite; + transform-origin: center; +} +.lt-radar::after { + content: ''; + position: absolute; + inset: 50% 0 0 50%; + width: 1px; height: 50%; + background: var(--accent-cyan); + transform-origin: top left; + animation: lt-radar-sweep 2s linear infinite; + opacity: 0.6; +} +.lt-radar--sm { width: 28px; height: 28px; } +.lt-radar--lg { width: 72px; height: 72px; } +.lt-radar--green { border-color: var(--accent-green); } +.lt-radar--green::before { background: conic-gradient(from 0deg, transparent 70%, rgba(0,255,136,0.35) 100%); } +.lt-radar--green::after { background: var(--accent-green); } +@keyframes lt-radar-sweep { to { transform: rotate(360deg); } } diff --git a/static/base.js b/static/base.js deleted file mode 120000 index 1d09a6a..0000000 --- a/static/base.js +++ /dev/null @@ -1 +0,0 @@ -/root/code/web_template/base.js \ No newline at end of file diff --git a/static/base.js b/static/base.js new file mode 100644 index 0000000..cd20236 --- /dev/null +++ b/static/base.js @@ -0,0 +1,2947 @@ +/** + * LOTUSGUILD TERMINAL DESIGN SYSTEM v1.2 — base.js + * Core JavaScript utilities shared across all LotusGuild applications + * + * Apps: Tinker Tickets (PHP), PULSE (Node.js), GANDALF (Flask) + * Namespace: window.lt + * + * CONTENTS + * 1. HTML Escape + * 2. Toast Notifications + * 3. Terminal Audio (beep) + * 4. Modal Management + * 5. Tab Management + * 6. Boot Sequence Animation + * 7. Keyboard Shortcuts + * 8. Sidebar Collapse + * 9. CSRF Token Helpers + * 10. Fetch Helpers (JSON API wrapper) + * 11. Time Formatting + * 12. Bytes Formatting + * 13. Table Keyboard Navigation + * 14. Sortable Table Headers + * 15. Stats Widget Filtering + * 16. Auto-refresh Manager + * --- v1.2 additions --- + * 17. Accordion + * 18. Tooltip System + * 19. Clipboard Copy + * 20. Alert / Banner Dismiss + * 21. Progress Bar + * 22. Command Palette + * 23. Form Validation + * 24. Debounce & Throttle + * 25. Event Bus (pub/sub) + * 26. Storage Helpers + * 27. URL / Query String Helpers + * 28. Number Formatter + * 29. DOM Helpers + * 30. Table Column Visibility + * 31. Polling & Async Retry + * 32. Drag & Drop Upload + * 33. Intersection Observer + * 34. Full Initialisation + */ + +(function (global) { + 'use strict'; + + /* ---------------------------------------------------------------- + 1. HTML ESCAPE + ---------------------------------------------------------------- */ + function escHtml(str) { + if (str === null || str === undefined) return ''; + return String(str) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); + } + + /* ---------------------------------------------------------------- + 2. TOAST NOTIFICATIONS + ---------------------------------------------------------------- + lt.toast.success(msg, duration?) + lt.toast.error(msg, duration?) + lt.toast.warning(msg, duration?) + lt.toast.info(msg, duration?) + ---------------------------------------------------------------- */ + const _toastQueue = []; + let _toastActive = false; + + function showToast(message, type, duration) { + type = type || 'info'; + duration = duration || 3500; + if (_toastActive) { if (_toastQueue.length < 12) _toastQueue.push({ message, type, duration }); return; } + _displayToast(message, type, duration); + } + + function _displayToast(message, type, duration) { + _toastActive = true; + let container = document.getElementById('lt-toast-container'); + if (!container) { + container = document.createElement('div'); + container.id = 'lt-toast-container'; + document.body.appendChild(container); + } + const icons = { success: '✓', error: '✗', warning: '!', info: 'i' }; + const toast = document.createElement('div'); + toast.className = 'lt-toast lt-toast-' + type; + toast.setAttribute('role', 'alert'); + toast.setAttribute('aria-live', 'polite'); + + const iconEl = document.createElement('span'); + iconEl.className = 'lt-toast-icon'; + iconEl.textContent = '[' + (icons[type] || 'i') + ']'; + + const msgEl = document.createElement('span'); + msgEl.className = 'lt-toast-msg'; + msgEl.textContent = message; + + const closeEl = document.createElement('button'); + closeEl.type = 'button'; + closeEl.className = 'lt-toast-close'; + closeEl.textContent = '✕'; + closeEl.setAttribute('aria-label', 'Dismiss'); + closeEl.addEventListener('click', () => _dismissToast(toast)); + + const progressEl = document.createElement('div'); + progressEl.className = 'lt-toast-progress'; + progressEl.style.animationDuration = duration + 'ms'; + + toast.appendChild(iconEl); + toast.appendChild(msgEl); + toast.appendChild(closeEl); + toast.appendChild(progressEl); + container.appendChild(toast); + + const timer = setTimeout(() => _dismissToast(toast), duration); + toast._lt_timer = timer; + _beep(type); + } + + function _dismissToast(toast) { + if (!toast || !toast.parentNode) return; + clearTimeout(toast._lt_timer); + toast.style.opacity = '0'; + toast.style.transition = 'opacity 0.3s ease'; + setTimeout(() => { + if (toast.parentNode) toast.parentNode.removeChild(toast); + _toastActive = false; + if (_toastQueue.length) { + const next = _toastQueue.shift(); + _displayToast(next.message, next.type, next.duration); + } + }, 320); + } + + const toast = { + success: (msg, dur) => showToast(msg, 'success', dur), + error: (msg, dur) => showToast(msg, 'error', dur), + warning: (msg, dur) => showToast(msg, 'warning', dur), + info: (msg, dur) => showToast(msg, 'info', dur), + }; + + /* ---------------------------------------------------------------- + 3. TERMINAL AUDIO + ---------------------------------------------------------------- */ + function _beep(type) { + try { + const ctx = new (global.AudioContext || global.webkitAudioContext)(); + const osc = ctx.createOscillator(); + const gain = ctx.createGain(); + osc.connect(gain); + gain.connect(ctx.destination); + osc.frequency.value = type === 'success' ? 880 : type === 'error' ? 220 : 440; + osc.type = 'sine'; + gain.gain.setValueAtTime(0.06, ctx.currentTime); + gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.1); + osc.start(ctx.currentTime); + osc.stop(ctx.currentTime + 0.1); + } catch (_) {} + } + + /* ---------------------------------------------------------------- + 4. MODAL MANAGEMENT + ---------------------------------------------------------------- + lt.modal.open('modal-id') + lt.modal.close('modal-id') + lt.modal.closeAll() + ---------------------------------------------------------------- */ + + // iOS-safe scroll lock: position:fixed preserves scroll position on iOS + let _scrollLockCount = 0; + let _scrollLockY = 0; + function _lockScroll() { + if (_scrollLockCount === 0) { + _scrollLockY = window.scrollY; + document.body.style.position = 'fixed'; + document.body.style.top = `-${_scrollLockY}px`; + document.body.style.width = '100%'; + } + _scrollLockCount++; + } + function _unlockScroll() { + _scrollLockCount = Math.max(0, _scrollLockCount - 1); + if (_scrollLockCount === 0) { + document.body.style.position = ''; + document.body.style.top = ''; + document.body.style.width = ''; + window.scrollTo(0, _scrollLockY); + } + } + + // Focus-trap helpers + const _FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; + function _trapFocus(el, e) { + const nodes = Array.from(el.querySelectorAll(_FOCUSABLE)).filter(n => !n.closest('[aria-hidden="true"]')); + if (!nodes.length) return; + const first = nodes[0], last = nodes[nodes.length - 1]; + if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } + else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } + } + + // Map modal → trigger element so focus returns after close + const _modalTriggers = new WeakMap(); + + function openModal(id) { + const el = typeof id === 'string' ? document.getElementById(id) : id; + if (!el) return; + // Close mobile nav before opening modal (avoids z-index overlap) + if (_mnOpen) _mnSetOpen(false); + // Remember what triggered the open for return-focus + if (document.activeElement && document.activeElement !== document.body) { + _modalTriggers.set(el, document.activeElement); + } + el.classList.add('is-open'); + el.removeAttribute('aria-hidden'); /* removing is correct; setting 'false' is an anti-pattern */ + _lockScroll(); + // Focus first focusable element + const first = el.querySelector(_FOCUSABLE); + if (first) setTimeout(() => first.focus(), 50); + // Tab focus trap + el._ltTrapHandler = e => { if (e.key === 'Tab') _trapFocus(el, e); }; + el.addEventListener('keydown', el._ltTrapHandler); + } + + function closeModal(id) { + const el = typeof id === 'string' ? document.getElementById(id) : id; + if (!el || !el.classList.contains('is-open')) return; + el.classList.remove('is-open'); + el.setAttribute('aria-hidden', 'true'); + _unlockScroll(); + // Remove trap handler + if (el._ltTrapHandler) { el.removeEventListener('keydown', el._ltTrapHandler); delete el._ltTrapHandler; } + // Return focus to trigger (only if no other modal remains open) + const trigger = _modalTriggers.get(el); + if (trigger) { + _modalTriggers.delete(el); + if (!document.querySelector('.lt-modal-overlay.is-open') && document.contains(trigger)) { + trigger.focus(); + } + } + } + + function closeAllModals() { + document.querySelectorAll('.lt-modal-overlay.is-open').forEach(closeModal); + const ov = document.getElementById('lt-cmd-overlay'); + if (ov && ov.classList.contains('is-open')) { + ov.classList.remove('is-open'); + _unlockScroll(); + } + } + + document.addEventListener('click', function (e) { + if (e.target.classList.contains('lt-modal-overlay')) { closeModal(e.target); return; } + const closeBtn = e.target.closest('[data-modal-close]'); + if (closeBtn) { const overlay = closeBtn.closest('.lt-modal-overlay'); if (overlay) closeModal(overlay); } + const openBtn = e.target.closest('[data-modal-open]'); + if (openBtn) openModal(openBtn.dataset.modalOpen); + }); + + const modal = { open: openModal, close: closeModal, closeAll: closeAllModals }; + + /* ---------------------------------------------------------------- + 5. TAB MANAGEMENT + ---------------------------------------------------------------- + lt.tabs.init() + lt.tabs.switch('panel-id') + ---------------------------------------------------------------- */ + function switchTab(panelId) { + document.querySelectorAll('.lt-tab[data-tab]').forEach(t => { + t.classList.remove('active'); + t.setAttribute('aria-selected', 'false'); + }); + document.querySelectorAll('.lt-tab-panel').forEach(p => p.classList.remove('active')); + const btn = document.querySelector('.lt-tab[data-tab="' + panelId + '"]'); + const panel = document.getElementById(panelId); + if (btn) { btn.classList.add('active'); btn.setAttribute('aria-selected', 'true'); } + if (panel) panel.classList.add('active'); + try { localStorage.setItem('lt_activeTab_' + location.pathname, panelId); } catch (_) {} + } + + let _tabsInitialized = false; + function initTabs() { + if (_tabsInitialized) return; _tabsInitialized = true; + try { + const saved = localStorage.getItem('lt_activeTab_' + location.pathname); + if (saved && document.getElementById(saved)) { switchTab(saved); } + } catch (_) {} + document.querySelectorAll('[role="tablist"]').forEach(tablist => { + const btns = Array.from(tablist.querySelectorAll('.lt-tab[data-tab]')); + btns.forEach((btn, i) => { + btn.addEventListener('click', () => switchTab(btn.dataset.tab)); + btn.addEventListener('keydown', e => { + let idx = -1; + if (e.key === 'ArrowRight') idx = (i + 1) % btns.length; + else if (e.key === 'ArrowLeft') idx = (i - 1 + btns.length) % btns.length; + else if (e.key === 'Home') idx = 0; + else if (e.key === 'End') idx = btns.length - 1; + if (idx >= 0) { e.preventDefault(); btns[idx].focus(); switchTab(btns[idx].dataset.tab); } + }); + }); + }); + } + + const tabs = { init: initTabs, switch: switchTab }; + + /* ---------------------------------------------------------------- + 6. BOOT SEQUENCE ANIMATION + ---------------------------------------------------------------- + lt.boot.run('APP NAME') + lt.boot.run('APP NAME', true) // force replay + ---------------------------------------------------------------- */ + let _bootFired = false; // in-memory guard: survives within a JS context, resets on true page reload + function runBoot(appName, force) { + if (!force && _bootFired) return; // Fastest guard — blocks any same-page double-call + const storageKey = 'lt_booted_' + (appName || 'app'); + if (!force && sessionStorage.getItem(storageKey)) return; + _bootFired = true; + sessionStorage.setItem(storageKey, '1'); + const overlay = document.getElementById('lt-boot'); + const pre = document.getElementById('lt-boot-text'); + if (!overlay || !pre) return; + + overlay.style.display = 'flex'; + overlay.style.opacity = '1'; + + const name = (appName || 'TERMINAL').toUpperCase(); + const titleStr = name + ' v1.2'; + const inner = 50; + const lp = Math.max(0, Math.floor((inner - titleStr.length) / 2)); + const rp = Math.max(0, inner - titleStr.length - lp); + const messages = [ + '╔════════════════════════════════════════════════════╗', + '║' + ' '.repeat(lp) + titleStr + ' '.repeat(rp) + '║', + '║ LOTUSGUILD INFRASTRUCTURE PLATFORM ║', + '╚════════════════════════════════════════════════════╝', + '', + '[ OK ] Kernel modules loaded', + '[ OK ] Filesystem mounted read-write', + '[ OK ] Network interfaces configured', + '[ OK ] Database connection pool initialized', + '[ OK ] Authentication service started', + '[ OK ] Security headers applied', + '[ OK ] API gateway bound', + '[ OK ] Scheduled tasks registered', + '[ OK ] Terminal interface rendered', + '', + '> ALL SYSTEMS NOMINAL — ' + name, + '', + ]; + + let i = 0; + pre.textContent = ''; + const interval = setInterval(() => { + if (i < messages.length) { + pre.textContent += messages[i] + '\n'; + i++; + } else { + clearInterval(interval); + setTimeout(() => { + overlay.style.transition = 'opacity 0.5s ease'; + overlay.style.opacity = '0'; + setTimeout(() => { overlay.style.display = 'none'; overlay.style.opacity = ''; overlay.style.transition = ''; }, 520); + }, 500); + } + }, 65); + } + + const boot = { run: runBoot }; + + /* ---------------------------------------------------------------- + 7. KEYBOARD SHORTCUTS + ---------------------------------------------------------------- + lt.keys.on('ctrl+k', fn) + lt.keys.off('ctrl+k') + lt.keys.initDefaults() + ---------------------------------------------------------------- */ + const _keyHandlers = {}; + + function normalizeKey(combo) { + return combo.replace(/ctrl\+/i, 'ctrl+').replace(/cmd\+/i, 'ctrl+').replace(/meta\+/i, 'ctrl+').toLowerCase(); + } + + function registerKey(combo, handler) { _keyHandlers[normalizeKey(combo)] = handler; } + function unregisterKey(combo) { delete _keyHandlers[normalizeKey(combo)]; } + + document.addEventListener('keydown', function (e) { + const inInput = ['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName) || e.target.isContentEditable; + let combo = ''; + if (e.ctrlKey || e.metaKey) combo += 'ctrl+'; + if (e.altKey) combo += 'alt+'; + if (e.shiftKey) combo += 'shift+'; + combo += e.key.toLowerCase(); + const alwaysFire = e.key === 'Escape' || e.ctrlKey || e.metaKey; + if (inInput && !alwaysFire) return; + const handler = _keyHandlers[combo]; + if (handler) { e.preventDefault(); handler(e); } + }); + + function initDefaultKeys() { + registerKey('escape', closeAllModals); + registerKey('?', () => { const h = document.getElementById('lt-keys-help'); if (h) openModal(h); }); + registerKey('ctrl+k', () => { + const ov = document.getElementById('lt-cmd-overlay'); + if (ov) { _cmdPaletteOpen(); return; } + const s = document.querySelector('.lt-search-input'); + if (s) { s.focus(); s.select(); } + }); + } + + const keys = { on: registerKey, off: unregisterKey, initDefaults: initDefaultKeys }; + + /* ---------------------------------------------------------------- + 8. SIDEBAR COLLAPSE + ---------------------------------------------------------------- + lt.sidebar.init() + ---------------------------------------------------------------- */ + let _sidebarInitialized = false; + function initSidebar() { + if (_sidebarInitialized) return; _sidebarInitialized = true; + document.querySelectorAll('[data-sidebar-toggle]').forEach(btn => { + const sidebar = document.getElementById(btn.dataset.sidebarToggle); + if (!sidebar) return; + const collapsed = sessionStorage.getItem('lt_sidebar_' + btn.dataset.sidebarToggle) === '1'; + if (collapsed) { sidebar.classList.add('collapsed'); btn.textContent = '▶'; } + btn.addEventListener('click', () => { + sidebar.classList.toggle('collapsed'); + const c = sidebar.classList.contains('collapsed'); + btn.textContent = c ? '▶' : '◀'; + try { sessionStorage.setItem('lt_sidebar_' + btn.dataset.sidebarToggle, c ? '1' : '0'); } catch (_) {} + }); + }); + } + + const sidebar = { init: initSidebar }; + + /* ---------------------------------------------------------------- + 9. CSRF TOKEN HELPERS + ---------------------------------------------------------------- + lt.csrf.headers() + ---------------------------------------------------------------- */ + function csrfHeaders() { + const token = global.CSRF_TOKEN || ''; + return token ? { 'X-CSRF-Token': token } : {}; + } + + const csrf = { headers: csrfHeaders }; + + /* ---------------------------------------------------------------- + 10. FETCH HELPERS + ---------------------------------------------------------------- + lt.api.get(url) + lt.api.post(url, body) + lt.api.put / patch / delete + ---------------------------------------------------------------- */ + async function apiFetch(method, url, body) { + const hasBody = body !== undefined; + const headers = Object.assign({}, csrfHeaders()); + if (hasBody) headers['Content-Type'] = 'application/json'; // Only set on requests with a body + const opts = { method, headers }; + if (hasBody) opts.body = JSON.stringify(body); + let resp; + try { resp = await fetch(url, opts); } catch (err) { throw new Error('Network error: ' + err.message); } + let data; + try { data = await resp.json(); } catch (_) { data = { success: resp.ok }; } + if (!resp.ok) throw new Error(data.error || data.message || 'HTTP ' + resp.status); + return data; + } + + const api = { + get: url => apiFetch('GET', url), + post: (url, b) => apiFetch('POST', url, b), + put: (url, b) => apiFetch('PUT', url, b), + patch: (url, b) => apiFetch('PATCH', url, b), + delete: (url, b) => apiFetch('DELETE', url, b), + }; + + /* ---------------------------------------------------------------- + 11. TIME FORMATTING + ---------------------------------------------------------------- + lt.time.ago(value) + lt.time.uptime(secs) + lt.time.format(value) + ---------------------------------------------------------------- */ + function timeAgo(value) { + const date = value instanceof Date ? value : new Date(value); + if (isNaN(date)) return '—'; + const diff = Math.floor((Date.now() - date.getTime()) / 1000); + if (diff < 60) return diff + 's ago'; + if (diff < 3600) return Math.floor(diff / 60) + 'm ago'; + if (diff < 86400) return Math.floor(diff / 3600) + 'h ago'; + return Math.floor(diff / 86400) + 'd ago'; + } + + function formatUptime(secs) { + secs = Math.floor(secs); + const d = Math.floor(secs / 86400), h = Math.floor((secs % 86400) / 3600), + m = Math.floor((secs % 3600) / 60), s = secs % 60; + const p = []; + if (d) p.push(d + 'd'); if (h) p.push(h + 'h'); if (m) p.push(m + 'm'); if (!d) p.push(s + 's'); + return p.join(' ') || '0s'; + } + + function formatDate(value) { + const date = value instanceof Date ? value : new Date(value); + if (isNaN(date)) return '—'; + try { + return date.toLocaleString(undefined, { + timeZone: global.APP_TIMEZONE || undefined, + year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', + }); + } catch (_) { return date.toLocaleString(); } + } + + const time = { ago: timeAgo, uptime: formatUptime, format: formatDate }; + + /* ---------------------------------------------------------------- + 12. BYTES FORMATTING + ---------------------------------------------------------------- + lt.bytes.format(n) + ---------------------------------------------------------------- */ + function formatBytes(bytes) { + if (bytes == null) return '—'; + const units = ['B','KB','MB','GB','TB']; let i = 0; + while (bytes >= 1024 && i < units.length - 1) { bytes /= 1024; i++; } + return bytes.toFixed(i === 0 ? 0 : 2) + ' ' + units[i]; + } + + /* ---------------------------------------------------------------- + 13. TABLE KEYBOARD NAVIGATION + ---------------------------------------------------------------- + lt.tableNav.init('table-id') + ---------------------------------------------------------------- */ + function initTableNav(tableId) { + const table = tableId ? document.getElementById(tableId) : document.querySelector('.lt-table'); + if (!table) return; + function rows() { return Array.from(table.querySelectorAll('tbody tr')); } + function selected() { return table.querySelector('tbody tr.lt-row-selected'); } + function move(dir) { + const all = rows(); if (!all.length) return; + const cur = selected(), idx = cur ? all.indexOf(cur) : -1; + const next = dir === 'down' ? all[idx < all.length - 1 ? idx + 1 : 0] : all[idx > 0 ? idx - 1 : all.length - 1]; + if (cur) cur.classList.remove('lt-row-selected'); + next.classList.add('lt-row-selected'); + next.scrollIntoView({ block: 'nearest' }); + } + keys.on('j', () => move('down')); + keys.on('arrowdown', () => move('down')); + keys.on('k', () => move('up')); + keys.on('arrowup', () => move('up')); + keys.on('enter', () => { const row = selected(); if (row) { const l = row.querySelector('a[href]'); if (l) global.location.href = l.href; } }); + } + + const tableNav = { init: initTableNav }; + + /* ---------------------------------------------------------------- + 14. SORTABLE TABLE HEADERS + ---------------------------------------------------------------- + lt.sortTable.init('table-id') + ---------------------------------------------------------------- */ + function initSortTable(tableId) { + const table = document.getElementById(tableId); + if (!table) return; + const ths = Array.from(table.querySelectorAll('th[data-sort-key]')); + ths.forEach((th, colIdx) => { + let dir = 'asc'; + th.setAttribute('aria-sort', 'none'); + th.setAttribute('tabindex', '0'); + const _sort = () => { + ths.forEach(h => { h.removeAttribute('data-sort'); h.setAttribute('aria-sort', 'none'); }); + th.setAttribute('data-sort', dir); + th.setAttribute('aria-sort', dir === 'asc' ? 'ascending' : 'descending'); + const tbody = table.querySelector('tbody'); + const rows = Array.from(tbody.querySelectorAll('tr')); + rows.sort((a, b) => { + const aT = (a.cells[colIdx] || {}).textContent || ''; + const bT = (b.cells[colIdx] || {}).textContent || ''; + const n = !isNaN(parseFloat(aT)) && !isNaN(parseFloat(bT)); + const cmp = n ? parseFloat(aT) - parseFloat(bT) : aT.localeCompare(bT); + return dir === 'asc' ? cmp : -cmp; + }); + rows.forEach(r => tbody.appendChild(r)); + dir = dir === 'asc' ? 'desc' : 'asc'; + }; + th.addEventListener('click', _sort); + th.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _sort(); } }); + }); + } + + const sortTable = { init: initSortTable }; + + /* ---------------------------------------------------------------- + 15. STATS WIDGET FILTERING + ---------------------------------------------------------------- + lt.statsFilter.init() + ---------------------------------------------------------------- */ + function initStatsFilter() { + document.querySelectorAll('.lt-stat-card[data-filter-key]').forEach(card => { + const _activate = () => { + const key = card.dataset.filterKey, val = card.dataset.filterVal; + const wasActive = card.classList.contains('active'); + document.querySelectorAll('.lt-stat-card').forEach(c => c.classList.remove('active')); + if (!wasActive) card.classList.add('active'); + if (typeof global.lt_onStatFilter === 'function') + global.lt_onStatFilter(wasActive ? null : key, wasActive ? null : val); + }; + card.addEventListener('click', _activate); + card.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _activate(); } }); + }); + } + + const statsFilter = { init: initStatsFilter }; + + /* ---------------------------------------------------------------- + 16. AUTO-REFRESH MANAGER + ---------------------------------------------------------------- + lt.autoRefresh.start(fn, ms) + lt.autoRefresh.stop() + lt.autoRefresh.now() + ---------------------------------------------------------------- */ + let _arTimer = null, _arFn = null, _arInterval = 30000; + + function arStart(fn, ms) { arStop(); _arFn = fn; _arInterval = ms || 30000; _arTimer = setInterval(_arFn, _arInterval); } + function arStop() { if (_arTimer) { clearInterval(_arTimer); _arTimer = null; } } + function arNow() { arStop(); if (_arFn) { _arFn(); _arTimer = setInterval(_arFn, _arInterval); } } + + const autoRefresh = { start: arStart, stop: arStop, now: arNow }; + + /* ================================================================ + v1.2 NEW MODULES + ================================================================ */ + + /* ---------------------------------------------------------------- + 17. ACCORDION + ---------------------------------------------------------------- + lt.accordion.init() + lt.accordion.open(triggerEl) + lt.accordion.close(triggerEl) + ---------------------------------------------------------------- */ + function _accordionOpen(trigger) { + const body = trigger.nextElementSibling; + if (!body || !body.classList.contains('lt-accordion-body')) return; + trigger.setAttribute('aria-expanded', 'true'); + body.style.height = body.scrollHeight + 'px'; + body.classList.add('is-open'); + body.addEventListener('transitionend', function once() { + if (body.classList.contains('is-open')) body.style.height = 'auto'; + body.removeEventListener('transitionend', once); + }); + } + + function _accordionClose(trigger) { + const body = trigger.nextElementSibling; + if (!body || !body.classList.contains('lt-accordion-body')) return; + body.style.height = body.scrollHeight + 'px'; + requestAnimationFrame(() => { + body.style.height = '0'; + body.classList.remove('is-open'); + trigger.setAttribute('aria-expanded', 'false'); + }); + } + + let _accordionInitialized = false; + function initAccordion() { + if (_accordionInitialized) return; _accordionInitialized = true; + // Support both data-accordion attribute (HTML) and .lt-accordion-trigger class + document.querySelectorAll('[data-accordion], .lt-accordion-trigger').forEach(trigger => { + if (trigger.getAttribute('aria-expanded') === 'true') { + const body = trigger.nextElementSibling; + if (body) { body.style.height = 'auto'; body.classList.add('is-open'); } + } + trigger.addEventListener('click', () => { + const isOpen = trigger.getAttribute('aria-expanded') === 'true'; + const acc = trigger.closest('[data-accordion-single]'); + if (acc) { + acc.querySelectorAll('[data-accordion], .lt-accordion-trigger').forEach(t => { + if (t !== trigger && t.getAttribute('aria-expanded') === 'true') _accordionClose(t); + }); + } + isOpen ? _accordionClose(trigger) : _accordionOpen(trigger); + }); + }); + } + + const accordion = { init: initAccordion, open: _accordionOpen, close: _accordionClose }; + + /* ---------------------------------------------------------------- + 18. TOOLTIP SYSTEM + ---------------------------------------------------------------- + lt.tooltip.init() + lt.tooltip.show(anchorEl) + lt.tooltip.hide() + + HTML: + ---------------------------------------------------------------- */ + let _tooltipEl = null; + + function _tooltipShow(anchor) { + _tooltipHide(); + const text = anchor.dataset.tooltip; + if (!text) return; + const pos = anchor.dataset.tooltipPos || 'top'; + const tip = document.createElement('div'); + tip.className = 'lt-tooltip-bubble'; + tip.textContent = text; + tip.setAttribute('role', 'tooltip'); + document.body.appendChild(tip); + _tooltipEl = tip; + + const r = anchor.getBoundingClientRect(); + const tr = tip.getBoundingClientRect(); + const sx = global.scrollX || 0, sy = global.scrollY || 0; + let top, left; + switch (pos) { + case 'bottom': top = r.bottom + sy + 8; left = r.left + sx + r.width / 2 - tr.width / 2; break; + case 'left': top = r.top + sy + r.height / 2 - tr.height / 2; left = r.left + sx - tr.width - 8; break; + case 'right': top = r.top + sy + r.height / 2 - tr.height / 2; left = r.right + sx + 8; break; + default: top = r.top + sy - tr.height - 8; left = r.left + sx + r.width / 2 - tr.width / 2; + } + const maxLeft = (global.scrollX || 0) + global.innerWidth - tr.width - 4; + const maxTop = (global.scrollY || 0) + global.innerHeight - tr.height - 4; + left = Math.max(4 + (global.scrollX || 0), Math.min(maxLeft, left)); + top = Math.max(4 + (global.scrollY || 0), Math.min(maxTop, top)); + tip.style.cssText = 'position:absolute;top:' + top + 'px;left:' + left + 'px'; + requestAnimationFrame(() => tip.classList.add('is-visible')); + } + + function _tooltipHide() { + if (_tooltipEl) { _tooltipEl.remove(); _tooltipEl = null; } + } + + let _tooltipInitialized = false; + function initTooltips() { + if (_tooltipInitialized) return; + _tooltipInitialized = true; + document.addEventListener('mouseover', e => { const a = e.target.closest('[data-tooltip]'); if (a) _tooltipShow(a); }); + document.addEventListener('mouseout', e => { if (!e.target.closest('[data-tooltip]')) return; if (!e.relatedTarget || !e.relatedTarget.closest('[data-tooltip]')) _tooltipHide(); }); + document.addEventListener('focusin', e => { const a = e.target.closest('[data-tooltip]'); if (a) _tooltipShow(a); }); + document.addEventListener('focusout', _tooltipHide); + document.addEventListener('scroll', _tooltipHide, { passive: true }); + global.addEventListener('resize', _tooltipHide, { passive: true }); + } + + const tooltip = { init: initTooltips, show: _tooltipShow, hide: _tooltipHide }; + + /* ---------------------------------------------------------------- + 19. CLIPBOARD COPY + ---------------------------------------------------------------- + lt.clipboard.copy(text) → Promise + lt.clipboard.initCopyButtons() + + HTML: + ---------------------------------------------------------------- */ + async function clipboardCopy(text) { + try { + if (navigator.clipboard && navigator.clipboard.writeText) { await navigator.clipboard.writeText(text); return true; } + const ta = document.createElement('textarea'); + ta.value = text; ta.style.cssText = 'position:fixed;top:-9999px;left:-9999px'; + document.body.appendChild(ta); ta.focus(); ta.select(); + const ok = document.execCommand('copy'); + document.body.removeChild(ta); return ok; + } catch (_) { return false; } + } + + let _copyInitialized = false; + function initCopyButtons() { + if (_copyInitialized) return; _copyInitialized = true; + document.addEventListener('click', async function (e) { + const btn = e.target.closest('[data-copy]'); if (!btn) return; + const orig = btn.textContent; + const ok = await clipboardCopy(btn.dataset.copy); + if (ok) { + btn.textContent = 'COPIED ✓'; btn.disabled = true; + if (btn.hasAttribute('data-copy-toast')) toast.success('Copied to clipboard'); + setTimeout(() => { if (document.contains(btn)) { btn.textContent = orig; btn.disabled = false; } }, 1500); + } else { toast.error('Copy failed'); } + }); + } + + const clipboard = { copy: clipboardCopy, initCopyButtons }; + + /* ---------------------------------------------------------------- + 20. ALERT / BANNER DISMISS + ---------------------------------------------------------------- + lt.alerts.init() + lt.alerts.dismiss(el) + ---------------------------------------------------------------- */ + function dismissAlert(el) { + el.style.transition = 'opacity 0.3s ease, max-height 0.35s ease, padding 0.35s ease, margin 0.35s ease'; + el.style.overflow = 'hidden'; + el.style.opacity = '0'; + el.style.maxHeight = el.offsetHeight + 'px'; + requestAnimationFrame(() => requestAnimationFrame(() => { + el.style.maxHeight = '0'; el.style.margin = '0'; el.style.padding = '0'; + setTimeout(() => el.remove(), 360); + })); + } + + let _alertsInitialized = false; + function initAlerts() { + if (_alertsInitialized) return; _alertsInitialized = true; + document.addEventListener('click', function (e) { + const btn = e.target.closest('.lt-alert-close, .lt-alert-dismiss'); if (!btn) return; + const al = btn.closest('.lt-alert'); if (al) dismissAlert(al); + }); + document.querySelectorAll('.lt-alert[data-alert-auto-dismiss]').forEach(el => { + const ms = parseInt(el.dataset.alertAutoDismiss, 10); + if (ms > 0) setTimeout(() => dismissAlert(el), ms); + }); + } + + const alerts = { init: initAlerts, dismiss: dismissAlert }; + + /* ---------------------------------------------------------------- + 21. PROGRESS BAR + ---------------------------------------------------------------- + lt.progress.set(el, value, max?) + lt.progress.animate(el, from, to, durationMs?) + ---------------------------------------------------------------- */ + function _pEl(el) { return typeof el === 'string' ? document.querySelector(el) : el; } + + function progressSet(el, value, max) { + el = _pEl(el); if (!el) return; + const pct = Math.min(100, Math.max(0, (value / (max || 100)) * 100)); + const bar = el.querySelector('.lt-progress-bar'); + const valEl = el.parentElement && el.parentElement.querySelector('.lt-progress-value'); + if (bar) bar.style.width = pct + '%'; + if (valEl) valEl.textContent = Math.round(pct) + '%'; + el.setAttribute('aria-valuenow', Math.round(pct)); + } + + function progressAnimate(el, from, to, dur) { + el = _pEl(el); if (!el) return; + dur = dur || 600; + const start = performance.now(); + function step(now) { + const t = Math.min(1, (now - start) / dur); + progressSet(el, from + (to - from) * (1 - Math.pow(1 - t, 3))); + if (t < 1) requestAnimationFrame(step); + } + requestAnimationFrame(step); + } + + const progress = { set: progressSet, animate: progressAnimate }; + + /* ---------------------------------------------------------------- + 22. COMMAND PALETTE + ---------------------------------------------------------------- + lt.cmdPalette.init(commands) + lt.cmdPalette.open() + lt.cmdPalette.close() + lt.cmdPalette.register(cmd) + + Command: { id, label, icon?, description?, kbd?, group?, tags?, action } + ---------------------------------------------------------------- */ + let _cpCommands = [], _cpSelected = 0, _cpTrigger = null; + const _cpRecentKey = 'lt_cmd_recent'; + + function _cmdPaletteOpen() { + const ov = document.getElementById('lt-cmd-overlay'); if (!ov) return; + if (_mnOpen) _mnSetOpen(false); + _cpTrigger = (document.activeElement && document.activeElement !== document.body) ? document.activeElement : null; + ov.classList.add('is-open'); + _lockScroll(); + const palette = document.getElementById('lt-cmd-palette'); + const inp = palette && palette.querySelector('.lt-cmd-input'); + if (inp) { inp.value = ''; inp.focus(); inp.select(); } + _cpRender(''); + } + + function _cmdPaletteClose() { + const ov = document.getElementById('lt-cmd-overlay'); if (!ov) return; + ov.classList.remove('is-open'); + _unlockScroll(); + const inp = document.querySelector('#lt-cmd-palette .lt-cmd-input'); + if (inp) inp.removeAttribute('aria-activedescendant'); + if (_cpTrigger) { if (document.contains(_cpTrigger)) _cpTrigger.focus(); _cpTrigger = null; } + } + + function _cpHighlight(text, q) { + if (!q) return escHtml(text); + const i = text.toLowerCase().indexOf(q.toLowerCase()); + if (i < 0) return escHtml(text); + return escHtml(text.slice(0, i)) + + '' + escHtml(text.slice(i, i + q.length)) + '' + + escHtml(text.slice(i + q.length)); + } + + function _cpRender(query) { + const ov = document.getElementById('lt-cmd-palette'); if (!ov) return; + const results = ov.querySelector('.lt-cmd-results'); if (!results) return; + query = query.trim().toLowerCase(); + + let recents = []; + try { recents = JSON.parse(localStorage.getItem(_cpRecentKey) || '[]'); } catch (_) {} + + const filtered = _cpCommands.filter(cmd => + !query || [cmd.label, cmd.description || '', ...(cmd.tags || [])].join(' ').toLowerCase().includes(query) + ); + + _cpSelected = 0; + if (!filtered.length) { results.innerHTML = '
No results for “' + escHtml(query) + '”
'; return; } + + const groups = {}, order = []; + if (!query && recents.length) { + const rec = recents.map(id => _cpCommands.find(c => c.id === id)).filter(Boolean); + if (rec.length) { groups['Recent'] = rec; order.push('Recent'); } + } + filtered.forEach(cmd => { + const g = cmd.group || 'Other'; + if (!groups[g]) { groups[g] = []; if (!order.includes(g)) order.push(g); } + groups[g].push(cmd); + }); + + let html = '', idx = 0; + order.forEach(g => { + if (!groups[g] || !groups[g].length) return; + html += '
' + escHtml(g) + '
'; + groups[g].forEach(cmd => { + html += '
' + + '' + escHtml(cmd.icon || '◦') + '' + + '' + _cpHighlight(cmd.label, query) + '' + + (cmd.kbd ? '' + escHtml(cmd.kbd) + '' : '') + + '
'; + idx++; + }); + }); + + results.innerHTML = html; + const pal = document.getElementById('lt-cmd-palette'); + const inp = pal && pal.querySelector('.lt-cmd-input'); + const allItems = Array.from(results.querySelectorAll('.lt-cmd-item')); + if (inp && allItems[0]) inp.setAttribute('aria-activedescendant', allItems[0].id); + allItems.forEach((item, i) => { + item.addEventListener('mouseenter', () => { + allItems.forEach(x => x.classList.remove('is-selected')); + item.classList.add('is-selected'); _cpSelected = i; + if (inp) inp.setAttribute('aria-activedescendant', item.id); + }); + item.addEventListener('click', () => _cpExec(item.dataset.cmdId)); + }); + } + + function _cpExec(id) { + const cmd = _cpCommands.find(c => c.id === id); + if (!cmd || typeof cmd.action !== 'function') return; + _cmdPaletteClose(); + try { + let r = JSON.parse(localStorage.getItem(_cpRecentKey) || '[]'); + r = [id, ...r.filter(x => x !== id)].slice(0, 5); + localStorage.setItem(_cpRecentKey, JSON.stringify(r)); + } catch (_) {} + cmd.action(); + } + + function _cpMove(dir) { + const ov = document.getElementById('lt-cmd-palette'); if (!ov) return; + const items = Array.from(ov.querySelectorAll('.lt-cmd-item')); if (!items.length) return; + items[_cpSelected] && items[_cpSelected].classList.remove('is-selected'); + _cpSelected = (_cpSelected + dir + items.length) % items.length; + items[_cpSelected] && items[_cpSelected].classList.add('is-selected'); + items[_cpSelected] && items[_cpSelected].scrollIntoView({ block: 'nearest' }); + const inp = ov.querySelector('.lt-cmd-input'); + if (inp && items[_cpSelected]) inp.setAttribute('aria-activedescendant', items[_cpSelected].id); + } + + function initCmdPalette(commands) { + _cpCommands = commands || []; + const ov = document.getElementById('lt-cmd-palette'); if (!ov) return; + const inp = ov.querySelector('.lt-cmd-input'); + if (inp) { + inp.addEventListener('input', () => _cpRender(inp.value)); + inp.addEventListener('keydown', e => { + if (e.key === 'ArrowDown') { e.preventDefault(); _cpMove(1); } + if (e.key === 'ArrowUp') { e.preventDefault(); _cpMove(-1); } + if (e.key === 'Enter') { e.preventDefault(); const s = ov.querySelector('.lt-cmd-item.is-selected'); if (s) _cpExec(s.dataset.cmdId); } + if (e.key === 'Escape') { e.preventDefault(); _cmdPaletteClose(); } + }); + } + const overlay = document.getElementById('lt-cmd-overlay'); + if (overlay) overlay.addEventListener('click', e => { if (e.target === overlay) _cmdPaletteClose(); }); + } + + const cmdPalette = { + init: initCmdPalette, + open: _cmdPaletteOpen, + close: _cmdPaletteClose, + register: cmd => { const i = _cpCommands.findIndex(c => c.id === cmd.id); if (i >= 0) _cpCommands[i] = cmd; else _cpCommands.push(cmd); }, + }; + + /* ---------------------------------------------------------------- + 23. FORM VALIDATION + ---------------------------------------------------------------- + lt.validate.field(el) → { valid, message } + lt.validate.form(formEl) → { valid, errors } + lt.validate.showError(el, msg) + lt.validate.clearError(el) + lt.validate.init(formEl, onSubmit) + lt.validate.custom = {} + ---------------------------------------------------------------- */ + const _validateCustom = {}; + + function _validateField(el) { + const val = el.value || '', type = (el.type || '').toLowerCase(); + if ((type === 'checkbox' || type === 'radio') && el.required && !el.checked) return { valid: false, message: 'This field is required' }; + if (el.tagName === 'SELECT' && el.multiple && el.required && el.selectedOptions.length === 0) return { valid: false, message: 'Please select at least one option' }; + if (el.required && !val.trim()) return { valid: false, message: 'This field is required' }; + if (el.minLength > 0 && val.length < el.minLength) return { valid: false, message: 'Minimum ' + el.minLength + ' characters' }; + if (el.maxLength > 0 && val.length > el.maxLength) return { valid: false, message: 'Maximum ' + el.maxLength + ' characters' }; + if (val && type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) return { valid: false, message: 'Enter a valid email address' }; + if (val && type === 'url') { try { new URL(val); } catch (_) { return { valid: false, message: 'Enter a valid URL' }; } } + if (val && type === 'number' && isNaN(Number(val))) return { valid: false, message: 'Enter a valid number' }; + if (val && el.pattern && !new RegExp('^(?:' + el.pattern + ')$').test(val)) return { valid: false, message: el.dataset.validateMsg || 'Invalid format' }; + if (el.dataset.validate) { + const fn = _validateCustom[el.dataset.validate]; + if (typeof fn === 'function') { const r = fn(val, el); if (r !== true) return { valid: false, message: r || 'Invalid value' }; } + } + return { valid: true, message: '' }; + } + + function _showError(el, msg) { + el.classList.add('is-invalid'); el.classList.remove('is-valid'); + let err = el.parentElement && el.parentElement.querySelector('.lt-field-error'); + if (!err) { + err = document.createElement('span'); + err.className = 'lt-field-error'; + err.id = (el.id || ('lt-field-' + Math.random().toString(36).slice(2))) + '-err'; + if (el.parentElement) el.parentElement.appendChild(err); + } + err.textContent = msg; + err.setAttribute('role', 'alert'); + el.setAttribute('aria-describedby', err.id); + el.setAttribute('aria-invalid', 'true'); + } + + function _clearError(el) { + el.classList.remove('is-invalid'); el.classList.add('is-valid'); + el.removeAttribute('aria-invalid'); + el.removeAttribute('aria-describedby'); + const err = el.parentElement && el.parentElement.querySelector('.lt-field-error'); + if (err) err.remove(); + } + + function _validateForm(formEl) { + const errors = []; let valid = true; + Array.from(formEl.querySelectorAll('input, select, textarea')).forEach(f => { + if (f.disabled || f.readOnly) return; + const r = _validateField(f); + if (!r.valid) { valid = false; _showError(f, r.message); errors.push({ el: f, message: r.message }); } + else _clearError(f); + }); + return { valid, errors }; + } + + function initFormValidation(formEl, onSubmit) { + if (!formEl) return; + formEl.querySelectorAll('input, select, textarea').forEach(f => { + f.addEventListener('blur', () => { const r = _validateField(f); r.valid ? _clearError(f) : _showError(f, r.message); }); + }); + formEl.addEventListener('submit', e => { + e.preventDefault(); + const r = _validateForm(formEl); + if (r.valid && typeof onSubmit === 'function') onSubmit(formEl, e); + else if (!r.valid && r.errors.length) r.errors[0].el.focus(); + }); + } + + const validate = { field: _validateField, form: _validateForm, showError: _showError, clearError: _clearError, init: initFormValidation, custom: _validateCustom }; + + /* ---------------------------------------------------------------- + 24. DEBOUNCE & THROTTLE + ---------------------------------------------------------------- + lt.debounce(fn, wait) → fn with .cancel() + lt.throttle(fn, wait) → throttled fn + ---------------------------------------------------------------- */ + function debounce(fn, wait) { + let t; + function d() { const a = arguments, c = this; clearTimeout(t); t = setTimeout(() => fn.apply(c, a), wait); } + d.cancel = () => clearTimeout(t); + return d; + } + + function throttle(fn, wait) { + let last = 0; + return function () { const now = Date.now(); if (now - last >= wait) { last = now; fn.apply(this, arguments); } }; + } + + /* ---------------------------------------------------------------- + 25. EVENT BUS + ---------------------------------------------------------------- + lt.bus.on / off / emit / once + ---------------------------------------------------------------- */ + const _busH = new Map(); + + function busOn(e, h) { if (!_busH.has(e)) _busH.set(e, []); _busH.get(e).push(h); } + function busOff(e, h) { const hs = _busH.get(e); if (hs) _busH.set(e, hs.filter(x => x !== h)); } + function busEmit(e, d) { (_busH.get(e) || []).slice().forEach(h => { try { h(d); } catch (err) { console.error('lt.bus:', err); } }); } + function busOnce(e, h) { function w(d) { h(d); busOff(e, w); } busOn(e, w); } + + const bus = { on: busOn, off: busOff, emit: busEmit, once: busOnce }; + + /* ---------------------------------------------------------------- + 26. STORAGE HELPERS + ---------------------------------------------------------------- + lt.store.set / get / remove / clear + lt.store.session.* + ---------------------------------------------------------------- */ + function _mkStore(s) { + return { + set(k, v) { try { s.setItem('lt_' + k, JSON.stringify(v)); } catch (_) {} }, + get(k, fb) { try { const r = s.getItem('lt_' + k); return r !== null ? JSON.parse(r) : (fb !== undefined ? fb : null); } catch (_) { return fb !== undefined ? fb : null; } }, + remove(k) { try { s.removeItem('lt_' + k); } catch (_) {} }, + clear() { try { Object.keys(s).filter(k => k.startsWith('lt_')).forEach(k => s.removeItem(k)); } catch (_) {} }, + }; + } + + const store = Object.assign(_mkStore(localStorage), { session: _mkStore(sessionStorage) }); + + /* ---------------------------------------------------------------- + 27. URL HELPERS + ---------------------------------------------------------------- + lt.url.params / get / set / remove / setMultiple + ---------------------------------------------------------------- */ + const url = { + params() { return new URLSearchParams(global.location.search); }, + get(k) { return this.params().get(k); }, + set(k, v) { const p = this.params(); p.set(k, v); global.history.pushState({}, '', global.location.pathname + '?' + p); }, + remove(k) { const p = this.params(); p.delete(k); const q = p.toString(); global.history.pushState({}, '', global.location.pathname + (q ? '?' + q : '')); }, + setMultiple(obj) { const p = this.params(); Object.entries(obj).forEach(([k, v]) => v == null ? p.delete(k) : p.set(k, v)); global.history.pushState({}, '', global.location.pathname + '?' + p); }, + }; + + /* ---------------------------------------------------------------- + 28. NUMBER FORMATTER + ---------------------------------------------------------------- + lt.num.format / compact / percent / pad / clamp / lerp + ---------------------------------------------------------------- */ + const num = { + format(n, d) { if (n == null || isNaN(n)) return '—'; return Number(n).toLocaleString(undefined, { minimumFractionDigits: d || 0, maximumFractionDigits: d != null ? d : 2 }); }, + compact(n) { if (Math.abs(n) >= 1e9) return (n/1e9).toFixed(1)+'B'; if (Math.abs(n) >= 1e6) return (n/1e6).toFixed(1)+'M'; if (Math.abs(n) >= 1e3) return (n/1e3).toFixed(1)+'K'; return String(n); }, + percent(n, total) { return total ? ((n/total)*100).toFixed(1)+'%' : '—'; }, + pad(n, w) { return String(Math.floor(n)).padStart(w, '0'); }, + clamp(n, a, b) { return Math.min(b, Math.max(a, n)); }, + lerp(a, b, t) { return a + (b - a) * t; }, + }; + + /* ---------------------------------------------------------------- + 29. DOM HELPERS + ---------------------------------------------------------------- + lt.dom.el / qs / qsa / on / off / show / hide / toggle / + empty / append / closest / ready + ---------------------------------------------------------------- */ + const dom = { + el(tag, attrs) { + const el = document.createElement(tag); + if (attrs) Object.entries(attrs).forEach(([k, v]) => { + if (k === 'class') el.className = v; + else if (k === 'text') el.textContent = v; + else if (k === 'html') el.innerHTML = v; + else el.setAttribute(k, v); + }); + for (let i = 2; i < arguments.length; i++) { + const c = arguments[i]; + el.appendChild(typeof c === 'string' ? document.createTextNode(c) : c); + } + return el; + }, + qs(sel, ctx) { return (ctx || document).querySelector(sel); }, + qsa(sel, ctx) { return Array.from((ctx || document).querySelectorAll(sel)); }, + on(el, ev, fn, o) { el.addEventListener(ev, fn, o); return () => el.removeEventListener(ev, fn, o); }, + off(el, ev, fn) { el.removeEventListener(ev, fn); }, + show(el) { if (el) el.classList.remove('lt-hidden'); }, + hide(el) { if (el) el.classList.add('lt-hidden'); }, + toggle(el, force) { if (el) el.classList.toggle('lt-hidden', force === undefined ? undefined : !force); }, + empty(el) { while (el && el.firstChild) el.removeChild(el.firstChild); }, + append(p) { for (let i = 1; i < arguments.length; i++) if (arguments[i]) p.appendChild(arguments[i]); }, + closest(el, sel) { return el ? el.closest(sel) : null; }, + ready(fn) { document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', fn) : fn(); }, + }; + + /* ---------------------------------------------------------------- + 30. TABLE COLUMN VISIBILITY + ---------------------------------------------------------------- + lt.tableColumns.init / show / hide / toggle + ---------------------------------------------------------------- */ + function _cells(t, i) { const c = []; t.querySelectorAll('tr').forEach(r => { if (r.cells[i]) c.push(r.cells[i]); }); return c; } + function _saveCols(id, i, v) { try { const k = 'lt_cols_' + id, s = JSON.parse(localStorage.getItem(k) || '{}'); s[i] = v; localStorage.setItem(k, JSON.stringify(s)); } catch (_) {} } + + function _colShow(id, i) { const t = document.getElementById(id); if (!t) return; _cells(t, i).forEach(c => c.style.display = ''); _saveCols(id, i, true); } + function _colHide(id, i) { const t = document.getElementById(id); if (!t) return; _cells(t, i).forEach(c => c.style.display = 'none'); _saveCols(id, i, false); } + function _colToggle(id, i) { const t = document.getElementById(id); if (!t) return; const c0 = _cells(t, i)[0]; (c0 && c0.style.display === 'none') ? _colShow(id, i) : _colHide(id, i); } + + function initTableColumns(tableId) { + try { const s = JSON.parse(localStorage.getItem('lt_cols_' + tableId) || '{}'); Object.entries(s).forEach(([i, v]) => { if (!v) _colHide(tableId, +i); }); } catch (_) {} + document.querySelectorAll('[data-toggle-col]').forEach(btn => { + btn.addEventListener('click', () => _colToggle(btn.dataset.tableId || tableId, +btn.dataset.toggleCol)); + }); + } + + const tableColumns = { init: initTableColumns, show: _colShow, hide: _colHide, toggle: _colToggle }; + + /* ---------------------------------------------------------------- + 31. POLLING & ASYNC RETRY + ---------------------------------------------------------------- + lt.poll(fn, ms, opts?) → { stop } + lt.retry(fn, opts?) → Promise + ---------------------------------------------------------------- */ + function poll(fn, ms, opts) { + opts = opts || {}; let stopped = false, timer = null; + async function tick() { + if (stopped) return; + try { await fn(); } catch (e) { if (typeof opts.onError === 'function') opts.onError(e); } + if (!stopped) timer = setTimeout(tick, ms); + } + opts.immediate ? tick() : (timer = setTimeout(tick, ms)); + return { stop() { stopped = true; clearTimeout(timer); } }; + } + + async function retry(fn, opts) { + opts = opts || {}; + const retries = opts.retries || 3, delay = opts.delay || 1000, backoff = opts.backoff || 1; + let lastErr; + for (let i = 0; i <= retries; i++) { + try { return await fn(i); } catch (e) { + lastErr = e; + if (i < retries) { + if (typeof opts.onRetry === 'function') opts.onRetry(e, i + 1); + await new Promise(r => setTimeout(r, delay * Math.pow(backoff, i))); + } + } + } + throw lastErr; + } + + /* ---------------------------------------------------------------- + 32. DRAG & DROP UPLOAD + ---------------------------------------------------------------- + lt.dropzone.init(el, opts) + opts: { onFiles, accept, maxSize, multiple } + ---------------------------------------------------------------- */ + function initDropzone(el, opts) { + if (typeof el === 'string') el = document.querySelector(el); + if (!el) return; + opts = opts || {}; + const maxSize = opts.maxSize || 10 * 1024 * 1024; + + function validate(files) { + const valid = [], invalid = []; + Array.from(files).forEach(f => { + if (f.size > maxSize) { invalid.push(f.name + ' (too large)'); return; } + if (opts.accept && opts.accept.length) { + const ok = opts.accept.some(a => a.startsWith('.') ? f.name.toLowerCase().endsWith(a) : f.type.match(new RegExp(a.replace('*', '.*')))); + if (!ok) { invalid.push(f.name + ' (not allowed)'); return; } + } + valid.push(f); + }); + if (invalid.length) toast.error('Rejected: ' + invalid.join(', ')); + return valid; + } + + function deliver(files) { + const v = validate(files); + if (v.length) { el.classList.add('has-file'); if (typeof opts.onFiles === 'function') opts.onFiles(opts.multiple !== false ? v : [v[0]]); } + } + + el.addEventListener('dragover', e => { e.preventDefault(); el.classList.add('is-dragging'); }); + el.addEventListener('dragleave', e => { if (!el.contains(e.relatedTarget)) el.classList.remove('is-dragging'); }); + el.addEventListener('drop', e => { e.preventDefault(); el.classList.remove('is-dragging'); deliver(e.dataTransfer.files); }); + el.addEventListener('click', () => { + const inp = document.createElement('input'); + inp.type = 'file'; inp.multiple = opts.multiple !== false; + if (opts.accept) inp.accept = opts.accept.join(','); + inp.addEventListener('change', () => deliver(inp.files)); + inp.click(); + }); + } + + function _initAllDropzones() { + document.querySelectorAll('[data-dropzone]').forEach(el => { + initDropzone(el, { onFiles: files => toast.info(Array.from(files).length + ' file(s) selected: ' + Array.from(files).map(f => f.name).join(', ')) }); + }); + } + + const dropzone = { init: initDropzone }; + + /* ---------------------------------------------------------------- + 33. INTERSECTION OBSERVER + ---------------------------------------------------------------- + lt.observe.lazy(selector, opts?) → adds .is-visible on enter + lt.observe.sentinel(el, callback) → fires when el enters viewport + ---------------------------------------------------------------- */ + function observeLazy(selector, opts) { + if (!global.IntersectionObserver) { + document.querySelectorAll(selector).forEach(el => el.classList.add('is-visible')); + return; + } + opts = opts || {}; + const obs = new IntersectionObserver((entries, o) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + if (opts.once !== false) o.unobserve(entry.target); + } + }); + }, { threshold: opts.threshold || 0.1, rootMargin: opts.rootMargin || '0px' }); + document.querySelectorAll(selector).forEach(el => obs.observe(el)); + return obs; + } + + function observeSentinel(el, cb) { + if (!el || !global.IntersectionObserver) { if (el) cb(); return; } + const obs = new IntersectionObserver(entries => { if (entries[0].isIntersecting) cb(); }, { threshold: 0.1 }); + obs.observe(el); + return { stop: () => obs.disconnect() }; + } + + const observe = { lazy: observeLazy, sentinel: observeSentinel }; + + /* ---------------------------------------------------------------- + 34. FULL INITIALISATION + ---------------------------------------------------------------- */ + function init() { + /* Core */ + initTabs(); + initSidebar(); + initDefaultKeys(); + initStatsFilter(); + /* v1.2 */ + initAccordion(); + initTooltips(); + initCopyButtons(); + initAlerts(); + _initAllDropzones(); + observeLazy('[data-lazy]'); + /* v1.3 */ + initMobileNav(); + initSidebarSubmenus(); + /* Boot */ + const bootEl = document.getElementById('lt-boot'); + if (bootEl) runBoot(bootEl.dataset.appName || document.title); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } + + + /* ================================================================ + MODULE 35 — VIEWPORT + Tracks current breakpoint, fires callbacks on change. + lt.viewport.bp() → 'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'|'4k' + lt.viewport.is('md') → true if current bp >= md + lt.viewport.on(cb) → subscribe (cb receives {bp, w, h, prev}) + lt.viewport.off(cb) → unsubscribe + lt.viewport.touch() → true if primary pointer is coarse + lt.viewport.landscape() → true if width > height + ================================================================ */ + const _bpOrder = ['xs','sm','md','lg','xl','2xl','3xl','4k']; + const _bpMin = { xs: 0, sm: 480, md: 768, lg: 1024, xl: 1280, '2xl': 1536, '3xl': 1920, '4k': 2560 }; + let _vpListeners = []; + let _vpCurrent = null; + + function _getBp(w) { + if (w >= 2560) return '4k'; + if (w >= 1920) return '3xl'; + if (w >= 1536) return '2xl'; + if (w >= 1280) return 'xl'; + if (w >= 1024) return 'lg'; + if (w >= 768) return 'md'; + if (w >= 480) return 'sm'; + return 'xs'; + } + + function _vpFire() { + const w = window.innerWidth; + const h = window.innerHeight; + const bp = _getBp(w); + const prev = _vpCurrent; + _vpCurrent = bp; + if (bp !== prev) { + const evt = { bp, w, h, prev }; + _vpListeners.forEach(cb => { try { cb(evt); } catch (_) {} }); + bus.emit('viewport:change', evt); + } + } + + const _vpResizeHandler = debounce(_vpFire, 120); + const _vpOrientationHandler = debounce(_vpFire, 350); // 350ms for iOS layout settle + window.addEventListener('resize', _vpResizeHandler); + window.addEventListener('orientationchange', _vpOrientationHandler); + _vpFire(); // set initial value + + const viewport = { + bp: () => _vpCurrent || _getBp(window.innerWidth), + is: name => { + if (!_bpOrder.includes(name)) { console.warn('[lt.viewport] Unknown breakpoint:', name); return false; } + return _bpOrder.indexOf(_vpCurrent || _getBp(window.innerWidth)) >= _bpOrder.indexOf(name); + }, + width: () => window.innerWidth, + height: () => window.innerHeight, + touch: () => window.matchMedia('(pointer: coarse)').matches, + landscape: () => window.innerWidth > window.innerHeight, + on: cb => { if (!_vpListeners.includes(cb)) _vpListeners.push(cb); }, + off: cb => { _vpListeners = _vpListeners.filter(l => l !== cb); }, + breakpoints: _bpMin, + }; + + + /* ================================================================ + MODULE 36 — MOBILE NAV + Hamburger-driven off-canvas navigation drawer with swipe support. + lt.mobileNav.open() / .close() / .toggle() + Auto-inits on [id="lt-menu-btn"] + [id="lt-nav-drawer"] + Swipe right from left edge (≤ 20px) opens; swipe left closes. + ================================================================ */ + let _mnOpen = false, _mnTrigger = null; + + function _mnSetOpen(open) { + _mnOpen = open; + const btn = document.getElementById('lt-menu-btn'); + const drawer = document.getElementById('lt-nav-drawer'); + const overlay = document.getElementById('lt-nav-overlay'); + if (!drawer) return; + + if (open) { + _mnTrigger = (document.activeElement && document.activeElement !== document.body) ? document.activeElement : null; + drawer.classList.add('open'); + drawer.removeAttribute('aria-hidden'); + if (overlay) overlay.classList.add('open'); + if (btn) { btn.classList.add('open'); btn.setAttribute('aria-expanded', 'true'); } + document.body.style.overflow = 'hidden'; + // Trap focus inside drawer + if (!drawer._mnTrapHandler) { + drawer._mnTrapHandler = e => { if (e.key === 'Tab') _trapFocus(drawer, e); }; + drawer.addEventListener('keydown', drawer._mnTrapHandler); + } + const first = drawer.querySelector('button, a, [tabindex]'); + if (first) setTimeout(() => { if (document.contains(first)) first.focus(); }, 50); + } else { + drawer.classList.remove('open'); + drawer.setAttribute('aria-hidden', 'true'); + if (overlay) overlay.classList.remove('open'); + if (btn) { btn.classList.remove('open'); btn.setAttribute('aria-expanded', 'false'); } + document.body.style.overflow = ''; + if (drawer._mnTrapHandler) { drawer.removeEventListener('keydown', drawer._mnTrapHandler); delete drawer._mnTrapHandler; } + if (_mnTrigger && document.contains(_mnTrigger)) { _mnTrigger.focus(); } + _mnTrigger = null; + } + bus.emit('mobileNav:' + (open ? 'open' : 'close')); + } + + let _mnInitialized = false; + function initMobileNav() { + if (_mnInitialized) return; // prevent duplicate init / memory leaks + _mnInitialized = true; + const btn = document.getElementById('lt-menu-btn'); + const overlay = document.getElementById('lt-nav-overlay'); + const closeBtn = document.getElementById('lt-nav-drawer-close'); + + if (btn) btn.addEventListener('click', () => _mnSetOpen(!_mnOpen)); + if (overlay) overlay.addEventListener('click', () => _mnSetOpen(false)); + if (closeBtn) closeBtn.addEventListener('click', () => _mnSetOpen(false)); + + // Close on Escape + document.addEventListener('keydown', e => { + if (e.key === 'Escape' && _mnOpen) _mnSetOpen(false); + }); + + // Close when nav link is clicked (navigates away) + const drawer = document.getElementById('lt-nav-drawer'); + if (drawer) { + drawer.querySelectorAll('a').forEach(a => { + a.addEventListener('click', () => _mnSetOpen(false)); + }); + } + + // Swipe gesture — open from left edge, close by swiping left + let _touchStartX = 0; + let _touchStartY = 0; + let _isSwiping = false; + + document.addEventListener('touchstart', e => { + _touchStartX = e.touches[0].clientX; + _touchStartY = e.touches[0].clientY; + // Only initiate open-swipe from left 20px edge + _isSwiping = !_mnOpen && _touchStartX <= 20; + }, { passive: true }); + + document.addEventListener('touchmove', e => { + if (!_isSwiping && !_mnOpen) return; + const dx = e.touches[0].clientX - _touchStartX; + const dy = e.touches[0].clientY - _touchStartY; + // Ignore mostly-vertical scrolls + if (Math.abs(dy) > Math.abs(dx) * 1.5) { _isSwiping = false; return; } + // Live drag feedback on the drawer + const drawerEl = document.getElementById('lt-nav-drawer'); + if (!drawerEl) return; + if (!_mnOpen && _isSwiping && dx > 0) { + const pct = Math.min(dx / 280, 1); + drawerEl.style.transform = `translateX(${-100 + pct * 100}%)`; + drawerEl.style.transition = 'none'; + } else if (_mnOpen && dx < 0) { + const pct = Math.max(0, 1 + dx / 280); + drawerEl.style.transform = `translateX(${-(1 - pct) * 100}%)`; + drawerEl.style.transition = 'none'; + } + }, { passive: true }); + + document.addEventListener('touchend', e => { + const drawerEl = document.getElementById('lt-nav-drawer'); + if (!drawerEl) return; + drawerEl.style.transform = ''; + drawerEl.style.transition = ''; + const dx = e.changedTouches[0].clientX - _touchStartX; + if (!_mnOpen && _isSwiping && dx > 60) _mnSetOpen(true); + if (_mnOpen && dx < -60) _mnSetOpen(false); + _isSwiping = false; + }, { passive: true }); + + // Auto-close when viewport becomes desktop width + viewport.on(({ bp }) => { + if (['lg', 'xl', '2xl', '3xl', '4k'].includes(bp) && _mnOpen) _mnSetOpen(false); + }); + } + + const mobileNav = { + open: () => _mnSetOpen(true), + close: () => _mnSetOpen(false), + toggle: () => _mnSetOpen(!_mnOpen), + isOpen: () => _mnOpen, + }; + + + /* ================================================================ + MODULE 37 — THEME TOGGLE + lt.theme.toggle() + lt.theme.set('light'|'dark') + lt.theme.get() + ================================================================ */ + const _themeKey = 'lt_theme'; + function _applyTheme(t) { + document.documentElement.setAttribute('data-theme', t); + document.documentElement.style.colorScheme = t; + try { localStorage.setItem(_themeKey, t); } catch(_) {} + // Sync theme-color meta for browser chrome + const metaTheme = document.querySelector('meta[name="theme-color"]'); + if (metaTheme) metaTheme.setAttribute('content', t === 'light' ? '#edf0f5' : '#030508'); + document.querySelectorAll('.lt-theme-btn').forEach(btn => { + btn.textContent = t === 'light' ? '◐' : '☀'; + btn.setAttribute('aria-label', t === 'light' ? 'Switch to dark mode' : 'Switch to light mode'); + btn.setAttribute('title', t === 'light' ? 'Switch to dark mode' : 'Switch to light mode'); + }); + bus.emit('theme:change', { theme: t }); + } + const _initTheme = (function() { + let saved; + try { saved = localStorage.getItem(_themeKey); } catch(_) {} + return saved || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'); + })(); + _applyTheme(_initTheme); + window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', e => { + let saved; try { saved = localStorage.getItem(_themeKey); } catch(_) {} + if (!saved) _applyTheme(e.matches ? 'light' : 'dark'); + }); + // Sync theme across tabs via storage event + window.addEventListener('storage', e => { + if (e.key === _themeKey && e.newValue) _applyTheme(e.newValue); + }); + const theme = { + toggle: () => _applyTheme(document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light'), + set: t => _applyTheme(t), + get: () => document.documentElement.getAttribute('data-theme') || 'dark', + }; + + /* ================================================================ + MODULE 38 — NOTIFICATION BADGE + lt.notif.set(el, count) + lt.notif.inc(el) + lt.notif.clear(el) + el = CSS selector string or DOM element + ================================================================ */ + function _notifEl(el) { return typeof el === 'string' ? document.querySelector(el) : el; } + function _notifBadge(el) { + const wrap = _notifEl(el); if (!wrap) return null; + let b = wrap.querySelector(':scope > .lt-notif-badge'); + if (!b) { + b = document.createElement('span'); + b.className = 'lt-notif-badge'; + b.setAttribute('aria-live', 'polite'); + b.setAttribute('role', 'status'); + wrap.classList.add('lt-notif-wrap'); + wrap.appendChild(b); + } + return b; + } + const notif = { + set(el, n) { + const b = _notifBadge(el); if (!b) return; + const label = n > 99 ? '99+' : n > 0 ? String(n) : ''; + b.textContent = label; + b.setAttribute('data-count', n); + b.setAttribute('aria-label', n > 0 ? `${n} notification${n !== 1 ? 's' : ''}` : ''); + }, + inc(el) { + const b = _notifBadge(el); if (!b) return; + const cur = parseInt(b.getAttribute('data-count') || '0', 10); + notif.set(el, cur + 1); + }, + clear(el) { notif.set(el, 0); }, + }; + + /* ================================================================ + MODULE 39 — RIGHT-SIDE DRAWER + lt.rightDrawer.open(id) + lt.rightDrawer.close(id) + lt.rightDrawer.toggle(id) + ================================================================ */ + function _rdOpen(id, triggerEl) { + const drawer = typeof id === 'string' ? document.getElementById(id) : id; + if (!drawer) return; + const ovId = drawer.dataset.overlay || id + '-overlay'; + const ov = document.getElementById(ovId); + if (_mnOpen) _mnSetOpen(false); + drawer.classList.add('is-open'); + drawer.removeAttribute('aria-hidden'); + if (ov) ov.classList.add('is-open'); + _lockScroll(); + if (triggerEl) _modalTriggers.set(drawer, triggerEl); + const first = drawer.querySelector(_FOCUSABLE); + if (first) setTimeout(() => first.focus(), 50); + // ESC to close + Tab trap + drawer._rdKeyHandler = e => { if (e.key === 'Escape') _rdClose(drawer); }; + document.addEventListener('keydown', drawer._rdKeyHandler); + drawer._rdTrapHandler = e => { if (e.key === 'Tab') _trapFocus(drawer, e); }; + drawer.addEventListener('keydown', drawer._rdTrapHandler); + // Overlay click + if (ov) ov._rdClick = () => _rdClose(drawer); + if (ov) ov.addEventListener('click', ov._rdClick); + // Close button + drawer.querySelectorAll('[data-drawer-close]').forEach(btn => { + btn._rdHandler = () => _rdClose(drawer); + btn.addEventListener('click', btn._rdHandler); + }); + } + function _rdClose(id) { + const drawer = typeof id === 'string' ? document.getElementById(id) : id; + if (!drawer || !drawer.classList.contains('is-open')) return; + const ovId = drawer.dataset.overlay || (drawer.id ? drawer.id + '-overlay' : null); + const ov = ovId ? document.getElementById(ovId) : null; + drawer.classList.remove('is-open'); + drawer.setAttribute('aria-hidden', 'true'); + if (ov) { ov.classList.remove('is-open'); if (ov._rdClick) { ov.removeEventListener('click', ov._rdClick); delete ov._rdClick; } } + drawer.querySelectorAll('[data-drawer-close]').forEach(btn => { + if (btn._rdHandler) { btn.removeEventListener('click', btn._rdHandler); delete btn._rdHandler; } + }); + _unlockScroll(); + if (drawer._rdKeyHandler) { document.removeEventListener('keydown', drawer._rdKeyHandler); delete drawer._rdKeyHandler; } + if (drawer._rdTrapHandler) { drawer.removeEventListener('keydown', drawer._rdTrapHandler); delete drawer._rdTrapHandler; } + const trigger = _modalTriggers.get(drawer); + if (trigger) { trigger.focus(); _modalTriggers.delete(drawer); } + } + const rightDrawer = { + open: (id) => _rdOpen(id, document.activeElement !== document.body ? document.activeElement : null), + close: (id) => _rdClose(id), + toggle: (id) => { + const el = typeof id === 'string' ? document.getElementById(id) : id; + if (el && el.classList.contains('is-open')) _rdClose(el); else _rdOpen(id); + }, + }; + // data-drawer-open="drawer-id" trigger wiring + document.addEventListener('click', e => { + const btn = e.target.closest('[data-drawer-open]'); + if (btn) { e.preventDefault(); _rdOpen(btn.dataset.drawerOpen, btn); } + }); + + /* ================================================================ + MODULE 40 — CONTEXT MENU + lt.contextMenu.register(selector, items) + items = [{ label, icon, kbd, danger, divider, action }] + ================================================================ */ + let _ctxMenu = null, _ctxTrigger = null; + const _ctxItems = {}; + function _ctxShow(x, y, items, trigger) { + _ctxTrigger = trigger || (document.activeElement !== document.body ? document.activeElement : null); + if (!_ctxMenu) { + _ctxMenu = document.createElement('div'); + _ctxMenu.className = 'lt-context-menu'; + _ctxMenu.setAttribute('role', 'menu'); + document.body.appendChild(_ctxMenu); + } + _ctxMenu.innerHTML = ''; + items.forEach(item => { + if (item.divider) { const d = document.createElement('div'); d.className = 'lt-context-menu-divider'; _ctxMenu.appendChild(d); return; } + if (item.label && !item.action) { const l = document.createElement('div'); l.className = 'lt-context-menu-label'; l.textContent = item.label; _ctxMenu.appendChild(l); return; } + const el = document.createElement('div'); + el.className = 'lt-context-menu-item' + (item.danger ? ' is-danger' : ''); + el.setAttribute('role', 'menuitem'); + el.setAttribute('tabindex', '0'); + el.innerHTML = `${item.icon ? `${escHtml(item.icon)}` : ''}${escHtml(item.label || '')}${item.kbd ? `${escHtml(item.kbd)}` : ''}`; + el.addEventListener('click', () => { _ctxHide(); if (item.action) item.action(); }); + el.addEventListener('keydown', e => { + const items = Array.from(_ctxMenu.querySelectorAll('[role="menuitem"]')); + const idx = items.indexOf(e.currentTarget); + if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); el.click(); } + else if (e.key === 'ArrowDown') { e.preventDefault(); (items[idx + 1] || items[0]).focus(); } + else if (e.key === 'ArrowUp') { e.preventDefault(); (items[idx - 1] || items[items.length - 1]).focus(); } + else if (e.key === 'Home') { e.preventDefault(); items[0].focus(); } + else if (e.key === 'End') { e.preventDefault(); items[items.length - 1].focus(); } + }); + _ctxMenu.appendChild(el); + }); + _ctxMenu.classList.add('is-open'); + // Position — keep on screen + const vw = window.innerWidth, vh = window.innerHeight; + const mw = _ctxMenu.offsetWidth || 180, mh = _ctxMenu.offsetHeight || 200; + _ctxMenu.style.left = Math.max(8, Math.min(x, vw - mw - 8)) + 'px'; + _ctxMenu.style.top = Math.min(y, vh - mh - 8) + 'px'; + // Focus first item + const first = _ctxMenu.querySelector('[role="menuitem"]'); + if (first) setTimeout(() => first.focus(), 20); + } + function _ctxHide() { + if (_ctxMenu) _ctxMenu.classList.remove('is-open'); + if (_ctxTrigger && document.contains(_ctxTrigger)) { _ctxTrigger.focus(); } + _ctxTrigger = null; + } + document.addEventListener('click', () => _ctxHide()); + document.addEventListener('contextmenu', e => { + const target = e.target.closest('[data-context-menu]'); + if (!target) { _ctxHide(); return; } + e.preventDefault(); + const menuId = target.dataset.contextMenu; + const items = _ctxItems[menuId]; + if (items) _ctxShow(e.clientX, e.clientY, items, target); + }); + document.addEventListener('keydown', e => { if (e.key === 'Escape') _ctxHide(); }); + const contextMenu = { + register(id, items) { _ctxItems[id] = items; }, + show: (x, y, items) => _ctxShow(x, y, items), + hide: () => _ctxHide(), + }; + + /* ================================================================ + MODULE 41 — OFFLINE DETECTION + lt.offline.onOnline(fn) + lt.offline.onOffline(fn) + lt.offline.isOnline() + ================================================================ */ + let _offlineBanner = null; + function _offlineGetBanner() { + if (!_offlineBanner) { + _offlineBanner = document.getElementById('lt-offline-banner'); + if (!_offlineBanner) { + _offlineBanner = document.createElement('div'); + _offlineBanner.id = 'lt-offline-banner'; + _offlineBanner.className = 'lt-offline-banner'; + _offlineBanner.setAttribute('role', 'alert'); + _offlineBanner.setAttribute('aria-live', 'assertive'); + _offlineBanner.innerHTML = ' NO NETWORK CONNECTION — RECONNECTING...'; + document.body.appendChild(_offlineBanner); + } + } + return _offlineBanner; + } + const _offlineHandlers = []; + const _onlineHandlers = []; + window.addEventListener('offline', () => { + document.body.classList.add('lt-is-offline'); + _offlineGetBanner().classList.add('is-visible'); + toast.warning('Connection lost — working offline'); + _offlineHandlers.forEach(fn => fn()); + }); + window.addEventListener('online', () => { + document.body.classList.remove('lt-is-offline'); + _offlineGetBanner().classList.remove('is-visible'); + toast.success('Connection restored'); + _onlineHandlers.forEach(fn => fn()); + }); + const offline = { + isOnline: () => navigator.onLine, + onOffline: fn => _offlineHandlers.push(fn), + onOnline: fn => _onlineHandlers.push(fn), + }; + + /* ================================================================ + MODULE 42 — WEBSOCKET MANAGER + lt.ws.connect(url, opts) + opts: { protocols, onOpen, onMessage, onClose, onError, + reconnect: true, reconnectDelay: 2000, maxRetries: 10 } + Returns a handle: { send, close, status, on, off } + ================================================================ */ + const ws = { + connect(url, opts = {}) { + const { + protocols = [], + onOpen = null, + onMessage = null, + onClose = null, + onError = null, + reconnect = true, + reconnectDelay = 2000, + maxRetries = 10, + } = opts; + + let _sock = null; + let _retries = 0; + let _closed = false; + let _statusEl = opts.statusEl ? (typeof opts.statusEl === 'string' ? document.querySelector(opts.statusEl) : opts.statusEl) : null; + const _handlers = {}; + + function _setStatus(state) { + if (_statusEl) { + _statusEl.setAttribute('data-state', state); + _statusEl.querySelector('.lt-dot'); // force repaint + const labels = { connected: 'Connected', connecting: 'Connecting…', disconnected: 'Disconnected' }; + const dot = _statusEl.querySelector('.lt-dot'); + const span = _statusEl.querySelector('span:last-child'); + if (span) span.textContent = labels[state] || state; + } + bus.emit('ws:status', { url, state }); + } + + function _connect() { + _setStatus('connecting'); + try { _sock = protocols.length ? new WebSocket(url, protocols) : new WebSocket(url); } + catch(e) { console.error('[lt.ws] Failed to create WebSocket:', e); return; } + + _sock.addEventListener('open', e => { + _retries = 0; + _setStatus('connected'); + if (onOpen) onOpen(e); + (_handlers['open'] || []).forEach(fn => fn(e)); + }); + _sock.addEventListener('message', e => { + let data = e.data; + try { data = JSON.parse(e.data); } catch(_) {} + if (onMessage) onMessage(data, e); + (_handlers['message'] || []).forEach(fn => fn(data, e)); + }); + _sock.addEventListener('close', e => { + _setStatus('disconnected'); + if (onClose) onClose(e); + (_handlers['close'] || []).forEach(fn => fn(e)); + if (reconnect && !_closed && _retries < maxRetries) { + _retries++; + const delay = Math.min(reconnectDelay * Math.pow(1.5, _retries - 1), 30000); + setTimeout(_connect, delay); + } + }); + _sock.addEventListener('error', e => { + if (onError) onError(e); + (_handlers['error'] || []).forEach(fn => fn(e)); + }); + } + _connect(); + + return { + send(data) { + if (!_sock || _sock.readyState !== WebSocket.OPEN) { console.warn('[lt.ws] Not connected'); return false; } + _sock.send(typeof data === 'string' ? data : JSON.stringify(data)); + return true; + }, + close() { _closed = true; if (_sock) _sock.close(); _setStatus('disconnected'); }, + get status() { return _sock ? ['connecting','open','closing','closed'][_sock.readyState] : 'disconnected'; }, + on(event, fn) { if (!_handlers[event]) _handlers[event] = []; _handlers[event].push(fn); return this; }, + off(event, fn) { if (_handlers[event]) _handlers[event] = _handlers[event].filter(f => f !== fn); return this; }, + }; + }, + }; + + /* ================================================================ + MODULE 43 — MULTI-SELECT COMBOBOX + lt.combobox.init(inputEl, options, opts) + options = [{ value, label, icon? }] + opts: { max, placeholder, onChange } + ================================================================ */ + const combobox = { + init(inputEl, options = [], opts = {}) { + const wrap = inputEl.closest('.lt-combobox') || inputEl.parentElement; + const inputWrap = wrap.querySelector('.lt-combobox-input-wrap') || wrap; + const dropdown = wrap.querySelector('.lt-combobox-dropdown'); + if (!dropdown) return; + + const { max = Infinity, placeholder = 'Search…', onChange = null } = opts; + let selected = []; + let focusedIdx = -1; + let filtered = [...options]; + + // ARIA combobox wiring + const dropId = dropdown.id || ('lt-cb-drop-' + Math.random().toString(36).slice(2)); + dropdown.id = dropId; + dropdown.setAttribute('role', 'listbox'); + inputEl.setAttribute('role', 'combobox'); + inputEl.setAttribute('aria-expanded', 'false'); + inputEl.setAttribute('aria-controls', dropId); + inputEl.setAttribute('aria-autocomplete', 'list'); + + function _renderTags() { + wrap.querySelectorAll('.lt-combobox-tag').forEach(t => t.remove()); + selected.forEach(v => { + const opt = options.find(o => o.value === v); + if (!opt) return; + const tag = document.createElement('span'); + tag.className = 'lt-combobox-tag'; + tag.innerHTML = `${escHtml(opt.label)}`; + inputWrap.insertBefore(tag, inputEl); + }); + } + + function _renderDropdown(query) { + const q = query.toLowerCase().trim(); + filtered = options.filter(o => !selected.includes(o.value) && (!q || o.label.toLowerCase().includes(q))); + dropdown.innerHTML = ''; + if (!filtered.length) { + dropdown.innerHTML = `
${q ? 'No matches' : 'All selected'}
`; + return; + } + filtered.forEach((opt, i) => { + const el = document.createElement('div'); + el.id = dropId + '-opt-' + i; + el.className = 'lt-combobox-option' + (selected.includes(opt.value) ? ' is-selected' : ''); + el.setAttribute('role', 'option'); + el.setAttribute('data-value', opt.value); + const safeLabel = escHtml(opt.label); + const hl = q ? safeLabel.replace(new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')})`, 'gi'), '$1') : safeLabel; + el.innerHTML = `${opt.icon ? `${escHtml(opt.icon)}` : ''}${hl}`; + el.addEventListener('mousedown', e => { e.preventDefault(); _toggle(opt.value); }); + dropdown.appendChild(el); + }); + focusedIdx = -1; + } + + function _toggle(value) { + const idx = selected.indexOf(value); + if (idx >= 0) { selected.splice(idx, 1); } + else if (selected.length < max) { selected.push(value); } + _renderTags(); + _renderDropdown(inputEl.value); + inputEl.value = ''; + inputEl.focus(); + if (onChange) onChange([...selected]); + } + + function _moveFocus(dir) { + const items = Array.from(dropdown.querySelectorAll('.lt-combobox-option')); + if (!items.length) return; + focusedIdx = Math.max(0, Math.min(focusedIdx + dir, items.length - 1)); + items.forEach((el, i) => el.classList.toggle('is-focused', i === focusedIdx)); + items[focusedIdx].scrollIntoView({ block: 'nearest' }); + inputEl.setAttribute('aria-activedescendant', items[focusedIdx].id); + } + + function _setOpen(open) { + dropdown.classList.toggle('is-open', open); + inputEl.setAttribute('aria-expanded', open ? 'true' : 'false'); + if (!open) { inputEl.removeAttribute('aria-activedescendant'); focusedIdx = -1; } + } + inputEl.addEventListener('input', () => { _setOpen(true); _renderDropdown(inputEl.value); }); + inputEl.addEventListener('focus', () => { _setOpen(true); _renderDropdown(inputEl.value); }); + inputEl.addEventListener('keydown', e => { + if (e.key === 'ArrowDown') { e.preventDefault(); _moveFocus(1); } + if (e.key === 'ArrowUp') { e.preventDefault(); _moveFocus(-1); } + if (e.key === 'Enter') { e.preventDefault(); if (focusedIdx >= 0 && filtered[focusedIdx]) _toggle(filtered[focusedIdx].value); } + if (e.key === 'Escape') { _setOpen(false); } + if (e.key === 'Backspace' && !inputEl.value && selected.length) { _toggle(selected[selected.length - 1]); } + }); + inputWrap.addEventListener('mousedown', e => { + const rmBtn = e.target.closest('.lt-combobox-tag-remove'); + if (rmBtn) { e.preventDefault(); _toggle(rmBtn.dataset.value); return; } + inputEl.focus(); + }); + document.addEventListener('click', e => { if (!wrap.contains(e.target)) _setOpen(false); }); + + _renderTags(); + _renderDropdown(''); + + return { + getValue: () => [...selected], + setValue: vals => { selected = [...vals]; _renderTags(); _renderDropdown(''); }, + clear: () => { selected = []; _renderTags(); _renderDropdown(''); }, + }; + }, + }; + + /* ================================================================ + MODULE 44 — AUTOCOMPLETE / TYPEAHEAD + lt.typeahead.init(inputEl, source, opts) + source: array or async fn(query) => [{value, label, icon?, meta?}] + opts: { minChars, debounceMs, onSelect, maxResults } + ================================================================ */ + const typeahead = { + init(inputEl, source, opts = {}) { + const wrap = inputEl.closest('.lt-typeahead') || inputEl.parentElement; + const dropdown = wrap.querySelector('.lt-typeahead-dropdown'); + if (!dropdown) return; + + const { minChars = 1, debounceMs = 150, onSelect = null, maxResults = 10 } = opts; + let _focusedIdx = -1; + let _items = []; + let _debTimer = null; + + function _render(items, query) { + _items = items.slice(0, maxResults); + dropdown.innerHTML = ''; + if (!_items.length) { + dropdown.innerHTML = `
[ NO RESULTS ]
`; + return; + } + const q = query.toLowerCase(); + _items.forEach((item, i) => { + const el = document.createElement('div'); + el.id = (inputEl.id || 'lt-ta') + '-item-' + i; + el.className = 'lt-typeahead-item'; + el.setAttribute('role', 'option'); + const safeItemLabel = escHtml(item.label); + const hl = safeItemLabel.replace(new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')})`, 'gi'), '$1'); + el.innerHTML = `${item.icon ? `${escHtml(item.icon)}` : ''}${hl}${item.meta ? `${escHtml(item.meta)}` : ''}`; + el.addEventListener('mousedown', e => { e.preventDefault(); _select(item); }); + dropdown.appendChild(el); + }); + _focusedIdx = -1; + } + + async function _search(query) { + dropdown.innerHTML = '
Searching…
'; + dropdown.classList.add('is-open'); + inputEl.setAttribute('aria-busy', 'true'); + try { + const results = typeof source === 'function' ? await source(query) : source.filter(i => i.label.toLowerCase().includes(query.toLowerCase())); + _render(results, query); + } catch(e) { + dropdown.innerHTML = '
Error loading results
'; + } finally { + inputEl.setAttribute('aria-busy', 'false'); + } + } + + function _select(item) { + inputEl.value = item.label; + inputEl.removeAttribute('aria-activedescendant'); + dropdown.classList.remove('is-open'); + if (onSelect) onSelect(item); + bus.emit('typeahead:select', { item }); + } + + function _moveFocus(dir) { + const els = Array.from(dropdown.querySelectorAll('.lt-typeahead-item')); + if (!els.length) return; + _focusedIdx = Math.max(0, Math.min(_focusedIdx + dir, els.length - 1)); + els.forEach((el, i) => el.classList.toggle('is-focused', i === _focusedIdx)); + els[_focusedIdx].scrollIntoView({ block: 'nearest' }); + inputEl.setAttribute('aria-activedescendant', els[_focusedIdx].id); + } + + inputEl.addEventListener('input', () => { + clearTimeout(_debTimer); + const q = inputEl.value.trim(); + if (q.length < minChars) { dropdown.classList.remove('is-open'); return; } + _debTimer = setTimeout(() => _search(q), debounceMs); + }); + inputEl.addEventListener('keydown', e => { + if (!dropdown.classList.contains('is-open')) return; + if (e.key === 'ArrowDown') { e.preventDefault(); _moveFocus(1); } + if (e.key === 'ArrowUp') { e.preventDefault(); _moveFocus(-1); } + if (e.key === 'Enter') { e.preventDefault(); if (_focusedIdx >= 0 && _items[_focusedIdx]) _select(_items[_focusedIdx]); } + if (e.key === 'Escape') { dropdown.classList.remove('is-open'); } + if (e.key === 'Tab') { dropdown.classList.remove('is-open'); } + }); + inputEl.addEventListener('blur', () => setTimeout(() => dropdown.classList.remove('is-open'), 150)); + document.addEventListener('click', e => { if (!wrap.contains(e.target)) dropdown.classList.remove('is-open'); }); + + return { search: q => _search(q) }; + }, + }; + + /* ================================================================ + MODULE 45 — COOKIE UTILITY + lt.cookie.set(name, value, days?, opts?) + lt.cookie.get(name) + lt.cookie.del(name) + ================================================================ */ + const cookie = { + set(name, value, days = 0, opts = {}) { + let str = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`; + if (days) { const d = new Date(); d.setDate(d.getDate() + days); str += `; expires=${d.toUTCString()}`; } + str += `; path=${opts.path || '/'}`; + if (opts.sameSite) str += `; SameSite=${opts.sameSite}`; + if (opts.secure || location.protocol === 'https:') str += '; Secure'; + document.cookie = str; + }, + get(name) { + const key = encodeURIComponent(name) + '='; + const found = document.cookie.split(';').map(c => c.trim()).find(c => c.startsWith(key)); + return found ? decodeURIComponent(found.slice(key.length)) : null; + }, + del(name, opts = {}) { cookie.set(name, '', -1, opts); }, + getAll() { + const out = {}; + document.cookie.split(';').forEach(c => { + const [k, ...v] = c.trim().split('='); + if (k) out[decodeURIComponent(k)] = decodeURIComponent(v.join('=')); + }); + return out; + }, + }; + + /* ================================================================ + MODULE 46 — SPLIT PANE + lt.splitPane.init(containerEl, opts) + opts: { minA, minB, initial (0-1), vertical, onResize } + ================================================================ */ + const splitPane = { + init(container, opts = {}) { + const { minA = 80, minB = 80, initial = 0.5, vertical = false, onResize = null } = opts; + const panes = container.querySelectorAll('.lt-split-pane'); + const divider = container.querySelector('.lt-split-divider'); + if (!panes[0] || !panes[1] || !divider) return; + + const dim = vertical ? 'height' : 'width'; + const client = vertical ? 'clientY' : 'clientX'; + let dragging = false; + let startPos, startSizeA; + + function _setRatio(ratio) { + const total = vertical ? container.clientHeight : container.clientWidth; + const divSize = vertical ? divider.offsetHeight : divider.offsetWidth; + const available = total - divSize; + const sizeA = Math.max(minA, Math.min(available - minB, ratio * available)); + panes[0].style[dim] = sizeA + 'px'; + panes[0].style.flex = 'none'; + panes[1].style.flex = '1'; + if (onResize) onResize(sizeA, available - sizeA); + } + + // Pointer events (handles both mouse and touch) + divider.addEventListener('pointerdown', e => { + e.preventDefault(); + dragging = true; + divider.setPointerCapture(e.pointerId); + divider.classList.add('is-dragging'); + startPos = e[client]; + startSizeA = vertical ? panes[0].offsetHeight : panes[0].offsetWidth; + }); + divider.addEventListener('pointermove', e => { + if (!dragging) return; + const delta = e[client] - startPos; + const total = vertical ? container.clientHeight : container.clientWidth; + const divSize = vertical ? divider.offsetHeight : divider.offsetWidth; + const newSize = Math.max(minA, Math.min(total - divSize - minB, startSizeA + delta)); + panes[0].style[dim] = newSize + 'px'; + panes[0].style.flex = 'none'; + panes[1].style.flex = '1'; + if (onResize) onResize(newSize, total - divSize - newSize); + }); + divider.addEventListener('pointerup', () => { dragging = false; divider.classList.remove('is-dragging'); }); + + // Keyboard resize support + divider.setAttribute('tabindex', '0'); + divider.setAttribute('role', 'separator'); + divider.setAttribute('aria-label', 'Resize panes'); + divider.addEventListener('keydown', e => { + const step = 0.05; + const total = vertical ? container.clientHeight : container.clientWidth; + const divSize = vertical ? divider.offsetHeight : divider.offsetWidth; + const available = total - divSize; + const currentSize = vertical ? panes[0].offsetHeight : panes[0].offsetWidth; + const currentRatio = currentSize / available; + if ((e.key === 'ArrowRight' && !vertical) || (e.key === 'ArrowDown' && vertical)) { + e.preventDefault(); _setRatio(Math.min(1, currentRatio + step)); + } else if ((e.key === 'ArrowLeft' && !vertical) || (e.key === 'ArrowUp' && vertical)) { + e.preventDefault(); _setRatio(Math.max(0, currentRatio - step)); + } else if (e.key === 'Home') { e.preventDefault(); _setRatio(0); } + else if (e.key === 'End') { e.preventDefault(); _setRatio(1); } + }); + + _setRatio(initial); + return { setRatio: _setRatio }; + }, + }; + + /* ================================================================ + MODULE 48 — SIDEBAR SUBMENUS + Auto-inits .lt-sidebar-group elements. + Click label → toggle .is-open + animate submenu. + ================================================================ */ + function initSidebarSubmenus(root) { + const container = root || document; + container.querySelectorAll('.lt-sidebar-group').forEach(group => { + if (group._sbInit) return; + group._sbInit = true; + const label = group.querySelector('.lt-sidebar-group-label'); + if (!label) return; + label.setAttribute('tabindex', '0'); + label.setAttribute('role', 'button'); + const chevron = label.querySelector('.chevron, .lt-sidebar-chevron'); + if (chevron) chevron.setAttribute('aria-hidden', 'true'); + const _toggle = () => { + group.classList.toggle('is-open'); + label.setAttribute('aria-expanded', group.classList.contains('is-open') ? 'true' : 'false'); + }; + label.setAttribute('aria-expanded', group.classList.contains('is-open') ? 'true' : 'false'); + label.addEventListener('click', _toggle); + label.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _toggle(); } }); + // Open group if it contains the active link + if (group.querySelector('.lt-sidebar-sub-link.active, .lt-sidebar-sub-link[aria-current="page"]')) { + group.classList.add('is-open'); + label.setAttribute('aria-expanded', 'true'); + } + }); + } + + /* ================================================================ + MODULE 49 — INFINITE SCROLL + lt.infiniteScroll.init(containerEl, loadFn, opts) + loadFn: async fn() → { items: [], done: bool } + opts: { threshold (px from bottom), loadingClass, sentinelClass } + ================================================================ */ + const infiniteScroll = { + init(container, loadFn, opts = {}) { + const { threshold = 200, onEmpty = null } = opts; + let _loading = false; + let _done = false; + + // Sentinel element at the bottom of the container + const sentinel = document.createElement('div'); + sentinel.className = 'lt-infinite-sentinel'; + sentinel.setAttribute('aria-hidden', 'true'); + container.appendChild(sentinel); + + // Loading indicator + const loadingEl = document.createElement('div'); + loadingEl.className = 'lt-infinite-loading lt-loading lt-hidden'; + loadingEl.setAttribute('aria-live', 'polite'); + loadingEl.setAttribute('aria-label', 'Loading more items'); + container.appendChild(loadingEl); + + async function _load() { + if (_loading || _done) return; + _loading = true; + loadingEl.classList.remove('lt-hidden'); + try { + const result = await loadFn(); + if (result && result.done) { + _done = true; + sentinel.remove(); + loadingEl.remove(); + if (onEmpty) onEmpty(); + } + } catch (e) { + console.error('[lt.infiniteScroll]', e); + } finally { + _loading = false; + loadingEl.classList.add('lt-hidden'); + } + } + + // Use IntersectionObserver if available, else scroll listener + if (global.IntersectionObserver) { + const io = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) _load(); + }, { rootMargin: `0px 0px ${threshold}px 0px` }); + io.observe(sentinel); + return { reset() { _done = false; _loading = false; }, stop() { io.disconnect(); } }; + } else { + const scrollRoot = container === document.body ? window : container; + function _onScroll() { + const el = container === document.body ? document.documentElement : container; + const dist = el.scrollHeight - el.scrollTop - el.clientHeight; + if (dist < threshold) _load(); + } + const _onScrollThrottled = throttle(_onScroll, 150); + scrollRoot.addEventListener('scroll', _onScrollThrottled, { passive: true }); + return { reset() { _done = false; _loading = false; }, stop() { scrollRoot.removeEventListener('scroll', _onScrollThrottled); } }; + } + }, + }; + + /* ================================================================ + MODULE 49 — WIZARD / MULTI-STEP FORM + lt.wizard.init(containerEl, opts) + opts: { onStep(n, total), onComplete(data), validate(n) } + HTML: [data-wizard-step="1"] ... [data-wizard-nav] + ================================================================ */ + const wizard = { + init(container, opts = {}) { + const { onStep = null, onComplete = null, validate = null } = opts; + const steps = Array.from(container.querySelectorAll('[data-wizard-step]')); + const total = steps.length; + let current = 0; + const formData = {}; + + function _getStepData(idx) { + const step = steps[idx]; + const data = {}; + step.querySelectorAll('input, select, textarea').forEach(el => { + if (el.name) data[el.name] = el.type === 'checkbox' ? el.checked : el.value; + }); + return data; + } + + function _show(idx) { + steps.forEach((s, i) => { + s.classList.toggle('is-active', i === idx); + if (i !== idx) s.setAttribute('aria-hidden', 'true'); else s.removeAttribute('aria-hidden'); + }); + // Update step indicators + container.querySelectorAll('[data-wizard-indicator]').forEach((ind, i) => { + ind.classList.toggle('is-active', i === idx); + ind.classList.toggle('is-complete', i < idx); + ind.classList.remove('is-error'); + }); + // Update nav buttons + const prevBtn = container.querySelector('[data-wizard-prev]'); + const nextBtn = container.querySelector('[data-wizard-next]'); + const doneBtn = container.querySelector('[data-wizard-done]'); + if (prevBtn) prevBtn.disabled = idx === 0; + if (nextBtn) nextBtn.style.display = idx < total - 1 ? '' : 'none'; + if (doneBtn) doneBtn.style.display = idx === total - 1 ? '' : 'none'; + // Update step counter + container.querySelectorAll('[data-wizard-current]').forEach(el => el.textContent = idx + 1); + container.querySelectorAll('[data-wizard-total]').forEach(el => el.textContent = total); + if (onStep) onStep(idx + 1, total, formData); + // Focus first input in step + const first = steps[idx].querySelector('input, select, textarea, button'); + if (first) setTimeout(() => first.focus(), 60); + } + + let _wizBusy = false; + async function _next() { + if (_wizBusy) return; + _wizBusy = true; + try { + if (validate) { + const ok = await validate(current + 1, _getStepData(current)); + if (!ok) { + container.querySelectorAll('[data-wizard-indicator]')[current]?.classList.add('is-error'); + return; + } + } + Object.assign(formData, _getStepData(current)); + if (current < total - 1) { current++; _show(current); } + } finally { + _wizBusy = false; + } + } + + function _prev() { + if (current > 0) { current--; _show(current); } + } + + function _done() { + Object.assign(formData, _getStepData(current)); + if (onComplete) onComplete({ ...formData }); + } + + function _goTo(n) { // 1-based + const idx = Math.max(0, Math.min(n - 1, total - 1)); + current = idx; _show(current); + } + + // Wire up nav buttons + container.querySelector('[data-wizard-next]')?.addEventListener('click', _next); + container.querySelector('[data-wizard-prev]')?.addEventListener('click', _prev); + container.querySelector('[data-wizard-done]')?.addEventListener('click', _done); + + _show(0); + return { next: _next, prev: _prev, goTo: _goTo, getData: () => ({ ...formData }), total }; + }, + }; + + /* ================================================================ + MODULE 50 — SORTABLE (drag-to-reorder lists/kanban) + lt.sortable.init(listEl, opts) + opts: { handle (selector), onSort(newOrder, movedEl), group } + Supports cross-list dragging when group matches. + Returns { refresh(), getOrder() }; emits 'sortable:change' on bus + ================================================================ */ + // Shared cross-instance drag state (enables group/cross-column dragging) + let _srtDragging = null, _srtPlaceholder = null, _srtSrcList = null; + + const sortable = { + init(list, opts = {}) { + const { handle = null, onSort = null, group = null } = opts; + list.setAttribute('data-sortable-group', group || ''); + + function _mark(child) { + child.setAttribute('data-sortable-item', ''); + child.setAttribute('draggable', handle ? 'false' : 'true'); + if (handle) { + const h = child.querySelector(handle); + if (h) { h.setAttribute('draggable', 'true'); h.style.cursor = 'grab'; } + } else { child.style.cursor = 'grab'; } + } + + function _getItems() { return Array.from(list.querySelectorAll(':scope > [data-sortable-item]')); } + + function _makePlaceholder(el) { + const ph = document.createElement(el.tagName); + ph.className = 'lt-sortable-placeholder'; + ph.style.height = el.offsetHeight + 'px'; + ph.style.width = '100%'; + return ph; + } + + function _sameGroup(otherList) { + if (!group) return false; + return otherList.getAttribute('data-sortable-group') === group; + } + + // Mark all current children + Array.from(list.children).forEach(_mark); + + list.addEventListener('dragstart', e => { + const item = e.target.closest('[data-sortable-item]'); + if (!item || !list.contains(item)) return; + _srtDragging = item; + _srtSrcList = list; + _srtPlaceholder = _makePlaceholder(item); + requestAnimationFrame(() => { item.classList.add('is-dragging'); }); + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('text/plain', ''); + }); + + list.addEventListener('dragend', () => { + if (!_srtDragging) return; + _srtDragging.classList.remove('is-dragging'); + if (_srtPlaceholder && _srtPlaceholder.parentNode) { + _srtPlaceholder.parentNode.insertBefore(_srtDragging, _srtPlaceholder); + _srtPlaceholder.remove(); + } + if (onSort) onSort(_getItems(), _srtDragging); + bus.emit('sortable:change', { list, items: _getItems(), moved: _srtDragging }); + _srtDragging = null; _srtPlaceholder = null; _srtSrcList = null; + }); + + list.addEventListener('dragover', e => { + if (!_srtDragging) return; + // Allow drop only within same list or same group + if (list !== _srtSrcList && !_sameGroup(_srtSrcList)) return; + e.preventDefault(); e.dataTransfer.dropEffect = 'move'; + if (!_srtPlaceholder) _srtPlaceholder = _makePlaceholder(_srtDragging); + const over = e.target.closest('[data-sortable-item]'); + if (over && over !== _srtDragging && list.contains(over)) { + const rect = over.getBoundingClientRect(); + list.insertBefore(_srtPlaceholder, e.clientY < rect.top + rect.height / 2 ? over : over.nextSibling); + } else if (!list.contains(_srtPlaceholder)) { + list.appendChild(_srtPlaceholder); + } + }); + + list.addEventListener('drop', e => { e.preventDefault(); }); + + return { + refresh() { Array.from(list.children).forEach(child => { if (!child.hasAttribute('data-sortable-item')) _mark(child); }); }, + getOrder: () => _getItems().map(el => el.dataset.id || el.textContent.trim()), + }; + }, + }; + + /* ================================================================ + MODULE 51 — COUNTDOWN / TIMER + lt.timer.countdown(el, targetDate, opts) + lt.timer.stopwatch(el, opts) + el = DOM element or selector; updates .textContent + opts: { onExpire, format, urgent (seconds), urgentClass } + ================================================================ */ + const timer = { + countdown(el, target, opts = {}) { + const dom = typeof el === 'string' ? document.querySelector(el) : el; + if (!dom) return; + const { onExpire = null, urgent = 300, urgentClass = 'lt-text-red' } = opts; + const end = target instanceof Date ? target : new Date(target); + + function _tick() { + const diff = Math.floor((end - Date.now()) / 1000); + if (diff <= 0) { + dom.textContent = '00:00:00'; + dom.classList.add(urgentClass); + if (onExpire) onExpire(); + clearInterval(handle); + return; + } + if (diff <= urgent) urgentClass.split(/\s+/).filter(Boolean).forEach(c => dom.classList.add(c)); + const h = Math.floor(diff / 3600), m = Math.floor((diff % 3600) / 60), s = diff % 60; + dom.textContent = [h, m, s].map(n => String(n).padStart(2, '0')).join(':'); + } + _tick(); + const handle = setInterval(_tick, 1000); + return { stop: () => clearInterval(handle) }; + }, + + stopwatch(el, opts = {}) { + const dom = typeof el === 'string' ? document.querySelector(el) : el; + if (!dom) return; + const { onTick = null } = opts; + let start = Date.now(), paused = false, offset = 0; + + function _tick() { + if (paused) return; + const elapsed = Math.floor((Date.now() - start + offset) / 1000); + const h = Math.floor(elapsed / 3600), m = Math.floor((elapsed % 3600) / 60), s = elapsed % 60; + dom.textContent = [h, m, s].map(n => String(n).padStart(2, '0')).join(':'); + if (onTick) onTick(elapsed); + } + const handle = setInterval(_tick, 1000); + _tick(); + return { + pause() { paused = true; offset += Date.now() - start; }, + resume() { paused = false; start = Date.now(); }, + reset() { offset = 0; start = Date.now(); _tick(); }, + stop() { clearInterval(handle); }, + elapsed: () => Math.floor((Date.now() - start + offset) / 1000), + }; + }, + }; + + /* ================================================================ + MODULE 52 — IMAGE LIGHTBOX + lt.lightbox.init(selector, opts) + Clicking any matched image opens a full-screen overlay with + prev/next, keyboard nav, zoom. + opts: { caption (fn|'alt'|'title'), loop } + ================================================================ */ + const lightbox = { + init(selector, opts = {}) { + const { caption = 'alt', loop = true } = opts; + let _images = [], _current = 0, _overlay = null, _lbKeyBound = null, _lbTrigger = null; + + function _getCaption(img) { + if (typeof caption === 'function') return caption(img); + return img.getAttribute(caption) || ''; + } + + function _buildOverlay() { + if (_overlay) return; + _overlay = document.createElement('div'); + _overlay.className = 'lt-lightbox-overlay'; + _overlay.setAttribute('role', 'dialog'); + _overlay.setAttribute('aria-modal', 'true'); + _overlay.setAttribute('aria-label', 'Image viewer'); + _overlay.innerHTML = ` + + + +
+ +
+
+
+ `; + document.body.appendChild(_overlay); + + _overlay.querySelector('.lt-lightbox-close').addEventListener('click', lightbox.close); + _overlay.querySelector('.lt-lightbox-prev').addEventListener('click', () => lightbox.prev()); + _overlay.querySelector('.lt-lightbox-next').addEventListener('click', () => lightbox.next()); + _overlay.addEventListener('click', e => { if (e.target === _overlay) lightbox.close(); }); + _lbKeyBound = _lbKey.bind(null); + document.addEventListener('keydown', _lbKeyBound); + } + + function _lbKey(e) { + if (!_overlay || !_overlay.classList.contains('is-open')) return; + if (e.key === 'Escape') lightbox.close(); + if (e.key === 'ArrowLeft') lightbox.prev(); + if (e.key === 'ArrowRight') lightbox.next(); + } + + function _show(idx) { + if (!_overlay) _buildOverlay(); + if (!_overlay.classList.contains('is-open')) { + _lbTrigger = (document.activeElement && document.activeElement !== document.body) ? document.activeElement : null; + } + _current = idx; + const img = _images[idx]; + const el = _overlay.querySelector('.lt-lightbox-img'); + el.src = img.src; el.alt = img.alt || ''; + _overlay.querySelector('.lt-lightbox-caption').textContent = _getCaption(img); + _overlay.querySelector('.lt-lightbox-counter').textContent = `${idx + 1} / ${_images.length}`; + // Hide prev/next when single image or at edges + _overlay.querySelector('.lt-lightbox-prev').style.display = (loop || idx > 0) && _images.length > 1 ? '' : 'none'; + _overlay.querySelector('.lt-lightbox-next').style.display = (loop || idx < _images.length - 1) && _images.length > 1 ? '' : 'none'; + _overlay.classList.add('is-open'); + _lockScroll(); + setTimeout(() => { if (document.contains(el)) el.focus?.(); }, 50); + } + + function _collect() { + _images = Array.from(document.querySelectorAll(selector)); + _images.forEach((img, i) => { + img.style.cursor = 'zoom-in'; + img.setAttribute('tabindex', '0'); + img.removeEventListener('click', img._lbHandler); + img.removeEventListener('keydown', img._lbKeyHandler); + img._lbHandler = () => _show(i); + img._lbKeyHandler = e => { if (e.key === 'Enter' || e.key === ' ') _show(i); }; + img.addEventListener('click', img._lbHandler); + img.addEventListener('keydown', img._lbKeyHandler); + }); + } + _collect(); + + return Object.assign(lightbox, { + open: idx => _show(idx), + close() { + if (!_overlay) return; + _overlay.classList.remove('is-open'); + _unlockScroll(); + if (_lbKeyBound) { document.removeEventListener('keydown', _lbKeyBound); _lbKeyBound = null; } + if (_lbTrigger && document.contains(_lbTrigger)) { _lbTrigger.focus(); } + _lbTrigger = null; + }, + prev() { _show(loop ? (_current - 1 + _images.length) % _images.length : Math.max(0, _current - 1)); }, + next() { _show(loop ? (_current + 1) % _images.length : Math.min(_images.length - 1, _current + 1)); }, + refresh: _collect, + }); + }, + }; + + /* ================================================================ + MODULE 53 — AUTH / JWT HELPERS + Extends lt.api with token refresh support. + lt.auth.setToken(accessToken, refreshToken, expiresIn) + lt.auth.getToken() + lt.auth.refresh() — explicit refresh + lt.auth.onExpire(fn) — callback when token expires & refresh fails + lt.auth.clear() + Auto-intercepts lt.api calls to inject Bearer header + and silently refreshes when token is within 60s of expiry. + ================================================================ */ + let _authAccess = null; + let _authRefresh = null; + let _authExpiry = 0; // epoch ms + let _authRefreshUrl = null; + let _authRefreshing = null; // in-flight promise + const _authExpireHandlers = []; + + const auth = { + setToken(access, refresh, expiresIn, refreshUrl) { + _authAccess = access; + _authRefresh = refresh; + _authExpiry = expiresIn ? Date.now() + expiresIn * 1000 : 0; + if (refreshUrl) _authRefreshUrl = refreshUrl; + try { sessionStorage.setItem('lt_auth_access', access); } catch(_) {} + }, + getToken: () => _authAccess, + clear() { + _authAccess = _authRefresh = null; _authExpiry = 0; + try { sessionStorage.removeItem('lt_auth_access'); } catch(_) {} + bus.emit('auth:logout'); + }, + onExpire: fn => _authExpireHandlers.push(fn), + async refresh() { + if (!_authRefreshUrl || !_authRefresh) return false; + if (_authRefreshing) return _authRefreshing; + _authRefreshing = fetch(_authRefreshUrl, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ refresh_token: _authRefresh }), + }) + .then(r => r.json()) + .then(data => { + if (data.access_token) { + _authAccess = data.access_token; + _authExpiry = data.expires_in ? Date.now() + data.expires_in * 1000 : 0; + bus.emit('auth:refreshed'); + return true; + } + throw new Error('Refresh failed'); + }) + .catch(e => { + console.error('[lt.auth]', e); + _authExpireHandlers.forEach(fn => fn()); + bus.emit('auth:expired'); + return false; + }) + .finally(() => { _authRefreshing = null; }); + return _authRefreshing; + }, + isExpired: () => _authExpiry > 0 && Date.now() >= _authExpiry, + isExpiringSoon: (secs = 60) => _authExpiry > 0 && Date.now() >= _authExpiry - secs * 1000, + }; + + // Patch lt.api — auth-aware wrapper (renamed to avoid strict-mode duplicate declaration) + async function _apiFetchAuth(method, url, body) { + if (_authAccess && auth.isExpiringSoon()) await auth.refresh(); + const opts = { method, headers: Object.assign({ 'Content-Type': 'application/json' }, csrfHeaders()) }; + if (_authAccess) opts.headers['Authorization'] = 'Bearer ' + _authAccess; + if (body !== undefined) opts.body = JSON.stringify(body); + let resp; + try { resp = await fetch(url, opts); } catch (err) { throw new Error('Network error: ' + err.message); } + // Auto-retry once on 401 after silent token refresh + if (resp.status === 401 && _authRefresh) { + const ok = await auth.refresh(); + if (ok) { + opts.headers['Authorization'] = 'Bearer ' + _authAccess; + try { resp = await fetch(url, opts); } catch (err) { throw new Error('Network error: ' + err.message); } + } + } + let data; + try { data = await resp.json(); } catch (_) { data = { success: resp.ok }; } + if (!resp.ok) throw new Error(data.error || data.message || 'HTTP ' + resp.status); + return data; + } + api.get = url => _apiFetchAuth('GET', url); + api.post = (u, b) => _apiFetchAuth('POST', u, b); + api.put = (u, b) => _apiFetchAuth('PUT', u, b); + api.patch = (u, b) => _apiFetchAuth('PATCH', u, b); + api.delete = (u, b) => _apiFetchAuth('DELETE', u, b); + + /* ================================================================ + MODULE 54 — MARKDOWN RENDERER + lt.markdown.render(mdString) → HTML string (sanitized) + lt.markdown.init(selector) → renders all matching el's .textContent + Uses a built-in micro-renderer (no deps) for common syntax. + For full GFM, swap in marked.js: window.marked && marked.parse() + ================================================================ */ + const markdown = { + render(md) { + // Delegate to window.marked if available + if (global.marked) return global.marked.parse(md); + if (global.markdownit) return global.markdownit().render(md); + // Micro-renderer: covers headings, bold, italic, code, links, lists, blockquote, hr + let html = escHtml(md) + // Fenced code blocks + .replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => `
${code.trim()}
`) + // Inline code + .replace(/`([^`]+)`/g, '$1') + // Headings + .replace(/^######\s(.+)$/gm, '
$1
') + .replace(/^#####\s(.+)$/gm, '
$1
') + .replace(/^####\s(.+)$/gm, '

$1

') + .replace(/^###\s(.+)$/gm, '

$1

') + .replace(/^##\s(.+)$/gm, '

$1

') + .replace(/^#\s(.+)$/gm, '

$1

') + // Bold / italic + .replace(/\*\*\*(.+?)\*\*\*/g, '$1') + .replace(/\*\*(.+?)\*\*/g, '$1') + .replace(/\*(.+?)\*/g, '$1') + .replace(/__(.+?)__/g, '$1') + .replace(/_(.+?)_/g, '$1') + // Links — block javascript: and data: URIs + .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, text, url) => { + const safeUrl = /^(https?:\/\/|\/|#|\.\.?\/)/i.test(url) ? url : '#'; + return `${escHtml(text)}`; + }) + // Images — block javascript: and data: URIs + .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, src) => { + const safeSrc = /^(https?:\/\/|\/|\.\.?\/)/i.test(src) ? src : ''; + return `${escHtml(alt)}`; + }) + // Blockquote + .replace(/^>\s(.+)$/gm, '
$1
') + // Horizontal rule + .replace(/^(-{3,}|\*{3,}|_{3,})$/gm, '
') + // Unordered list items + .replace(/^[-*+]\s(.+)$/gm, '
  • $1
    • ') + .replace(/(
  • [\s\S]+?<\/li>\n?)+/g, m => `
      ${m}
    `) + // Ordered list items + .replace(/^\d+\.\s(.+)$/gm, '
  • $1
    • ') + // Paragraphs (double newline) + .replace(/\n{2,}/g, '

    ') + .replace(/\n/g, '
    '); + return `

    ${html}

    ` + .replace(/

    (<(?:pre|ul|ol|h[1-6]|blockquote|hr)[^>]*>)/g, '$1') + .replace(/(<\/(?:pre|ul|ol|h[1-6]|blockquote|hr)>)<\/p>/g, '$1'); + }, + + init(selector) { + document.querySelectorAll(selector).forEach(el => { + const raw = el.getAttribute('data-markdown') || el.textContent; + el.innerHTML = markdown.render(raw); + el.classList.add('lt-markdown'); + }); + }, + }; + + /* ================================================================ + MODULE 55 — PAGINATION + lt.pagination.init(navEl, opts) + opts: { total, perPage, page, onChange(page) } + Renders page buttons inside navEl; re-renders on page change. + ================================================================ */ + const pagination = { + init(nav, opts = {}) { + if (typeof nav === 'string') nav = document.querySelector(nav); + if (!nav) return null; + let { total = 0, perPage = 10, page = 1, onChange = null, maxBtns = 7 } = opts; + + function _pages() { return Math.max(1, Math.ceil(total / perPage)); } + + function render() { + const pages = _pages(); + let html = ''; + // Prev + html += ``; + // Page buttons with ellipsis + const half = Math.floor((maxBtns - 2) / 2); + let start = Math.max(2, page - half); + let end = Math.min(pages - 1, page + half); + if (end - start < maxBtns - 3) { + if (start === 2) end = Math.min(pages - 1, start + maxBtns - 3); + else start = Math.max(2, end - maxBtns + 3); + } + html += ``; + if (start > 2) html += ``; + for (let i = start; i <= end; i++) { + html += ``; + } + if (end < pages - 1) html += ``; + if (pages > 1) html += ``; + // Next + html += ``; + if (!nav.getAttribute('role')) nav.setAttribute('role', 'navigation'); + if (!nav.getAttribute('aria-label')) nav.setAttribute('aria-label', 'Pagination'); + nav.innerHTML = html; + } + + nav.addEventListener('click', e => { + const btn = e.target.closest('.lt-page-btn'); + if (!btn || btn.disabled || btn.classList.contains('active')) return; + const p = parseInt(btn.dataset.page, 10); + if (!p || p < 1 || p > _pages()) return; + page = p; + render(); + if (onChange) onChange(page); + }); + + render(); + return { + setTotal(n) { total = n; page = 1; render(); }, + setPage(p) { page = Math.max(1, Math.min(_pages(), p)); render(); }, + getPage() { return page; }, + getPages() { return _pages(); }, + }; + }, + }; + + /* ================================================================ + MASTER INIT + lt.init(opts?) + Call once after DOM ready. Runs all standard auto-init modules. + Opts: { boot: bool, bootName: str, tooltip: bool, accordion: bool, + alerts: bool, clipboard: bool, sidebar: bool, submenus: bool } + Individual modules can still be called manually. + ================================================================ */ + let _ltInitialized = false; + function ltInit(opts) { + if (_ltInitialized) return; // Guard: safe to call multiple times + _ltInitialized = true; + const o = Object.assign({ + boot: true, + bootName: null, + tooltip: true, + accordion: true, + alerts: true, + clipboard: true, + sidebar: true, + submenus: true, + }, opts || {}); + + if (o.accordion) accordion.init(); + if (o.tooltip) tooltip.init(); + if (o.alerts) alerts.init(); + if (o.clipboard) initCopyButtons(); + if (o.sidebar) initSidebar(); + if (o.submenus) initSidebarSubmenus(); + if (o.boot) { + const bootEl = document.getElementById('lt-boot'); + if (bootEl) { + const name = o.bootName || bootEl.dataset.appName || document.title.split('—')[0].trim(); + boot.run(name); + } + } + } + + /* ================================================================ + PUBLIC API + ---------------------------------------------------------------- */ + global.lt = { + /* Master initializer */ + init: ltInit, + /* Core */ + escHtml, + toast, + beep: _beep, + modal, + tabs, + boot, + keys, + sidebar, + csrf, + api, + time, + bytes: { format: formatBytes }, + tableNav, + sortTable, + statsFilter, + autoRefresh, + /* v1.2 */ + accordion, + tooltip, + clipboard, + alerts, + progress, + cmdPalette, + validate, + debounce, + throttle, + bus, + store, + url, + num, + dom, + tableColumns, + poll, + retry, + dropzone, + observe, + /* v1.3 responsive */ + viewport, + mobileNav, + /* v1.1 new features */ + theme, + notif, + rightDrawer, + contextMenu, + offline, + ws, + combobox, + typeahead, + cookie, + splitPane, + infiniteScroll, + wizard, + sortable, + timer, + lightbox, + auth, + markdown, + pagination, + sidebarSubmenus: { init: initSidebarSubmenus }, + }; + +}(window));