From 79c2d2b5134911800ace3e035e3d9996b7979b37 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Fri, 27 Mar 2026 19:05:42 -0400 Subject: [PATCH] feat: complete TDS v1.2 redesign across all views Full application redesign using Terminal Design System v1.2 (lt-* class system). Introduces shared layout_header/footer partials, upgrades base.css/base.js to TDS v1.2, and rewrites all views (Dashboard, Ticket, CreateTicket, and all 7 admin views) with lt-frame, lt-table, lt-modal, lt-stats-grid, lt-kv-grid, and data-action event delegation patterns. Co-Authored-By: Claude Sonnet 4.6 --- assets/css/base.css | 5925 +++++++++++++++++++----- assets/css/dashboard.css | 6362 +------------------------- assets/css/ticket.css | 2959 +----------- assets/js/base.js | 2938 ++++++++++-- views/CreateTicketView.php | 617 ++- views/DashboardView.php | 1898 ++++---- views/TicketView.php | 1577 ++++--- views/admin/ApiKeysView.php | 370 +- views/admin/AuditLogView.php | 281 +- views/admin/CustomFieldsView.php | 486 +- views/admin/RecurringTicketsView.php | 601 ++- views/admin/TemplatesView.php | 435 +- views/admin/UserActivityView.php | 233 +- views/admin/WorkflowDesignerView.php | 458 +- views/layout_footer.php | 45 + views/layout_header.php | 174 + 16 files changed, 11265 insertions(+), 14094 deletions(-) create mode 100644 views/layout_footer.php create mode 100644 views/layout_header.php diff --git a/assets/css/base.css b/assets/css/base.css index 158488b..1b2d0bb 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -1,36 +1,36 @@ /* ================================================================ - LOTUSGUILD TERMINAL DESIGN SYSTEM v1.0 — base.css - Unified CSS for all LotusGuild web applications + 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) - Aesthetic: Retro CRT terminal, phosphor green, ASCII art borders - Prefix: .lt-* (LotusGuild Terminal) + Apps: Tinker Tickets (PHP), PULSE (Node.js), GANDALF (Flask) + Prefix: .lt-* (LotusGuild Terminal) TABLE OF CONTENTS - 01. CSS Custom Properties - 02. Reset & Base - 03. CRT & Terminal Effects - 04. Typography - 05. Layout Primitives - 06. Header & Navigation - 07. ASCII Frame System - 08. Card Component - 09. Buttons - 10. Forms & Inputs - 11. Tables - 12. Status Badges, Chips, Priority - 13. Modals - 14. Toast Notifications - 15. Tab Navigation - 16. Sidebar / Filter Panel - 17. Stats Widgets - 18. Inline Messages - 19. Loading & Empty States - 20. Boot Sequence Overlay - 21. Log / Timeline Entries - 22. Animations (keyframes) - 23. Responsive Design - 24. Utility Classes + 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 ================================================================ */ @@ -40,111 +40,154 @@ ---------------------------------------------------------------- */ :root { /* --- Backgrounds --- */ - --bg-primary: #0a0a0a; /* Main background: near-black */ - --bg-secondary: #1a1a1a; /* Surface: dark grey */ - --bg-tertiary: #2a2a2a; /* Raised surface / hover states */ - --bg-terminal: #001a00; /* Deep green-tinted black for terminal panels */ + --bg-primary: #030508; + --bg-secondary: #060c14; + --bg-tertiary: #0d1520; + --bg-card: #07101a; + --bg-terminal: #010304; + --bg-overlay: rgba(3,5,8,0.94); - /* --- Terminal Green (Primary accent) --- */ - --terminal-green: #00ff41; - --terminal-green-dim: rgba(0, 255, 65, 0.15); - --terminal-green-dark: #00cc33; - --terminal-green-muted: #008822; + /* --- 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); - /* --- Amber (Secondary / highlight / headings) --- */ - --terminal-amber: #ffb000; - --terminal-amber-dim: rgba(255, 176, 0, 0.15); + /* --- 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); - /* --- Cyan (Tertiary / uplinks / info) --- */ - --terminal-cyan: #00ffff; - --terminal-cyan-dim: rgba(0, 255, 255, 0.12); + /* --- 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); - /* --- Red (Error / critical / closed) --- */ - --terminal-red: #ff4444; - --terminal-red-dim: rgba(255, 68, 68, 0.15); + /* --- Error / Critical --- */ + --accent-red: #FF2D55; + --accent-red-dim: rgba(255,45,85,0.12); - /* --- Orange (Warning) --- */ - --terminal-orange: #ff8c00; - --terminal-orange-dim: rgba(255, 140, 0, 0.15); + /* --- 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: #00ff41; /* Body text */ - --text-secondary: #00cc33; /* Subdued text */ - --text-muted: #00bb33; /* Muted / placeholder text */ + --text-primary: #c4d9ee; + --text-secondary: #7fa3bf; + --text-muted: #3e607a; + --text-dim: #1e3347; /* --- Borders --- */ - --border-color: rgba(0, 255, 65, 0.35); /* Default border (semi-transparent) */ - --border-color-hi: #00ff41; /* Highlighted / focused border */ - --border-color-dim: rgba(0, 255, 65, 0.12); /* Subtle row separator */ + --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); - /* --- Ticket / workflow status colours --- */ - --status-open: #28a745; - --status-pending: #9c27b0; - --status-in-progress: #ffc107; - --status-closed: #dc3545; - --status-online: #28a745; - --status-offline: #dc3545; - --status-running: #ffc107; - --status-completed: #28a745; - --status-failed: #dc3545; - --status-waiting: #ffc107; + /* --- 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 (P1 critical → P5 minimal) --- */ - --priority-1: #ff4d4d; /* Critical */ - --priority-2: #ffa726; /* High */ - --priority-3: #42a5f5; /* Medium */ - --priority-4: #66bb6a; /* Low */ - --priority-5: #9e9e9e; /* Minimal */ + /* --- Priority colours --- */ + --priority-1: #FF2D55; + --priority-2: #FF6B00; + --priority-3: #00D4FF; + --priority-4: #00FF88; + --priority-5: #3e607a; - /* --- Glow — text-shadow stacks --- */ - --glow-green: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41; - --glow-green-intense: 0 0 8px #00ff41, 0 0 16px #00ff41, 0 0 24px #00ff41, - 0 0 32px rgba(0, 255, 65, 0.5); - --glow-amber: 0 0 5px #ffb000, 0 0 10px #ffb000, 0 0 15px #ffb000; - --glow-amber-intense: 0 0 8px #ffb000, 0 0 16px #ffb000, 0 0 24px #ffb000; - --glow-cyan: 0 0 5px #00ffff, 0 0 10px rgba(0, 255, 255, 0.4); - --glow-red: 0 0 5px #ff4444, 0 0 10px #ff4444; + /* --- 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 (element halos) --- */ - --box-glow-green: 0 0 12px rgba(0, 255, 65, 0.3); - --box-glow-amber: 0 0 12px rgba(255, 176, 0, 0.3); - --box-glow-red: 0 0 12px rgba(255, 68, 68, 0.3); - --box-glow-cyan: 0 0 12px rgba(0, 255, 255, 0.25); + /* --- 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: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace; + --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; + --font-display: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; - /* --- Spacing scale --- */ - --space-xs: 0.25rem; /* 4px */ - --space-sm: 0.5rem; /* 8px */ - --space-md: 1rem; /* 16px */ - --space-lg: 1.5rem; /* 24px */ - --space-xl: 2rem; /* 32px */ - --space-2xl: 3rem; /* 48px */ + /* --- 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: 240px; --sidebar-width-sm: 200px; - --header-height: 58px; - --container-max: 1600px; + --header-height: 56px; + --container-max: 1600px; - /* --- Transitions — scoped to GPU-safe properties (no box-shadow/filter) --- */ - --transition-fast: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; - --transition-default: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; + /* --- 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: 400; - --z-modal: 500; - --z-popover: 600; - --z-tooltip: 700; - --z-toast: 800; - --z-overlay: 9999; + --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 ---------------------------------------------------------------- */ @@ -155,191 +198,227 @@ } html { - font-size: 16px; + 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: var(--bg-primary); + background-color: transparent; color: var(--text-primary); font-family: var(--font-mono); - line-height: 1.6; + font-size: 0.875rem; + line-height: 1.65; min-height: 100vh; overflow-x: hidden; + position: relative; } a { - color: var(--terminal-green); + color: var(--accent-cyan); text-decoration: none; - transition: color 0.15s ease; + transition: var(--transition-fast); } a:hover { - color: var(--terminal-amber); + 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; } - +ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } +button { cursor: pointer; font-family: var(--font-mono); } + /* ---------------------------------------------------------------- - 03. CRT & TERMINAL EFFECTS + 03. CRT / GRID / SCANLINE EFFECTS ---------------------------------------------------------------- */ -/* Scanlines baked into body background — position:fixed overlay removed because - Chrome promotes all position:fixed elements to GPU compositing layers, causing - a compositor re-blend blink on every CPU repaint triggered by hover states. */ -body { - background-image: repeating-linear-gradient( +/* Horizontal scanlines — fixed, non-interactive overlay */ +body::before { + content: ''; + position: fixed; + inset: 0; + background: repeating-linear-gradient( 0deg, - rgba(0, 0, 0, 0.15) 0px, - rgba(0, 0, 0, 0.15) 1px, + rgba(0,0,0,0.07) 0px, + rgba(0,0,0,0.07) 1px, transparent 1px, - transparent 2px + transparent 3px ); + pointer-events: none; + z-index: var(--z-overlay); } -body::before { display: none; } -/* body::after binary watermark also suppressed — was position:fixed (GPU layer) */ -body::after { display: none; } + +/* 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-mono); - font-weight: bold; + font-family: var(--font-display); + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.08em; - line-height: 1.3; + letter-spacing: 0.10em; + line-height: 1.25; } h1 { font-size: 1.5rem; - color: var(--terminal-amber); - text-shadow: var(--glow-amber-intense); + color: var(--accent-orange); + text-shadow: var(--glow-orange-intense); } -h1::before { content: '>> '; color: var(--terminal-green); text-shadow: var(--glow-green); } +h1::before { content: '>> '; color: var(--accent-cyan); text-shadow: var(--glow-cyan); } h2 { - font-size: 1.2rem; - color: var(--terminal-amber); - text-shadow: var(--glow-amber); + 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: 1rem; - color: var(--terminal-amber); - text-shadow: var(--glow-amber); + font-size: 0.95rem; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); } -h3::before { content: '═══ '; color: var(--terminal-green); } -h3::after { content: ' ═══'; color: var(--terminal-green); } h4 { - font-size: 0.9rem; - color: var(--terminal-amber); - letter-spacing: 0.07em; + font-size: 0.85rem; + color: var(--text-secondary); } -p { - color: var(--text-primary); - margin-bottom: var(--space-md); +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 { - font-family: var(--font-mono); - background: var(--bg-terminal); - color: var(--terminal-green); - padding: 2px 6px; - border: 1px solid var(--border-color-dim); - font-size: 0.9em; + padding: 0.1em 0.35em; } pre { - font-family: var(--font-mono); - background: var(--bg-terminal); - color: var(--terminal-green); padding: var(--space-md); - border: 1px solid var(--border-color); overflow-x: auto; - line-height: 1.5; + 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: 0 var(--space-lg); + padding: var(--space-lg) var(--space-xl); } .lt-main { - padding: var(--space-lg); - min-height: calc(100vh - var(--header-height)); + padding-top: calc(var(--header-height) + var(--space-lg)); } -/* Sidebar + content split */ .lt-layout { display: flex; - gap: var(--space-md); + gap: var(--space-lg); align-items: flex-start; } .lt-content { flex: 1; min-width: 0; } -/* Page header (below nav, above content) */ -.lt-page-header { - margin-bottom: var(--space-lg); - padding-bottom: var(--space-md); - border-bottom: 1px solid var(--border-color); - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-md); - flex-wrap: wrap; +.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; } -.lt-page-title { - font-size: 1.05rem; - font-weight: bold; - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - text-transform: uppercase; - letter-spacing: 0.08em; -} -.lt-page-title::before { content: '>> '; color: var(--terminal-green); } /* ---------------------------------------------------------------- 06. HEADER & NAVIGATION ---------------------------------------------------------------- */ .lt-header { + position: fixed; + top: 0; left: 0; right: 0; height: var(--header-height); - background: var(--bg-secondary); - border-bottom: 2px solid var(--terminal-green); - box-shadow: 0 2px 16px rgba(0, 255, 65, 0.12); - padding: 0 var(--space-lg); + 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; - position: sticky; - top: 0; + padding: 0 var(--space-xl); z-index: var(--z-fixed); + box-shadow: 0 4px 32px rgba(0,0,0,0.7); } -/* Animated glow underline on header */ +/* Gradient rule along bottom edge */ .lt-header::after { content: ''; position: absolute; - bottom: -2px; - left: 0; right: 0; - height: 2px; + bottom: 0; left: 0; right: 0; + height: 1px; background: linear-gradient( 90deg, transparent 0%, - var(--terminal-green) 20%, - var(--terminal-green) 80%, + var(--accent-cyan) 20%, + var(--accent-orange) 50%, + var(--accent-cyan) 80%, transparent 100% ); - box-shadow: var(--glow-green); + opacity: 0.55; } .lt-header-left { @@ -347,72 +426,86 @@ pre { align-items: center; gap: var(--space-xl); } + .lt-header-right { display: flex; align-items: center; gap: var(--space-md); } -/* --- Brand / App Title --- */ -.lt-brand { display: flex; flex-direction: column; } +/* Brand */ +.lt-brand { display: flex; flex-direction: column; line-height: 1.1; } .lt-brand-title { - font-size: 1.2rem; - font-weight: bold; - color: var(--terminal-amber); - text-shadow: var(--glow-amber-intense); - letter-spacing: 0.1em; - white-space: nowrap; - animation: subtle-pulse 3s ease-in-out infinite; -} -.lt-brand-title::before { - content: '>> '; - color: var(--terminal-green); - text-shadow: var(--glow-green); + 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.6rem; + font-size: 0.58rem; color: var(--text-muted); - letter-spacing: 0.12em; text-transform: uppercase; + letter-spacing: 0.22em; } -/* --- Nav links (horizontal bar) --- */ +/* Nav links */ .lt-nav { display: flex; align-items: center; - gap: var(--space-xs); + gap: 2px; } .lt-nav-link { display: inline-block; - color: var(--text-muted); - padding: 4px 10px; - border: 1px solid transparent; - font-size: 0.8rem; + padding: 0.35rem 0.8rem; + font-size: 0.7rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.06em; + 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); - white-space: nowrap; } -.lt-nav-link::before { content: '[ '; } -.lt-nav-link::after { content: ' ]'; } .lt-nav-link:hover { - color: var(--terminal-green); - border-color: var(--border-color); - background: var(--terminal-green-dim); - text-shadow: var(--glow-green); + 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(--terminal-amber); - border-color: var(--terminal-amber); - background: var(--terminal-amber-dim); - text-shadow: var(--glow-amber); + 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 nav --- */ +/* Dropdown */ .lt-nav-dropdown { position: relative; } .lt-nav-dropdown-menu { @@ -420,239 +513,232 @@ pre { position: absolute; top: calc(100% + 4px); left: 0; - min-width: 200px; - background: var(--bg-secondary); - border: 1px solid var(--border-color-hi); - box-shadow: var(--box-glow-green), 0 8px 24px rgba(0,0,0,0.6); + 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); - list-style: none; } -.lt-nav-dropdown:hover .lt-nav-dropdown-menu, -.lt-nav-dropdown.open .lt-nav-dropdown-menu { display: block; } +.lt-nav-dropdown-menu::before { + content: ''; + position: absolute; + top: 0; 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: 8px 14px; + padding: 0.5rem 0.9rem; + font-size: 0.7rem; color: var(--text-secondary); - font-size: 0.8rem; border-bottom: 1px solid var(--border-color-dim); + text-transform: uppercase; + letter-spacing: 0.09em; transition: var(--transition-fast); } -.lt-nav-dropdown-menu li a::before { content: '> '; color: var(--terminal-amber); } -.lt-nav-dropdown-menu li a:hover { - background: var(--terminal-green-dim); - color: var(--terminal-green); - text-shadow: var(--glow-green); -} .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); +} -/* --- User info widget --- */ +/* Header user + admin badge */ .lt-header-user { - font-size: 0.78rem; - color: var(--text-secondary); - white-space: nowrap; -} -.lt-header-user::before { content: '[user: '; color: var(--terminal-amber); } -.lt-header-user::after { content: ']'; color: var(--terminal-amber); } - -/* --- Admin badge --- */ -.lt-badge-admin { - display: inline-block; - color: var(--terminal-red); - border: 1px solid var(--terminal-red); - padding: 2px 8px; font-size: 0.7rem; - font-weight: bold; - text-shadow: var(--glow-red); - letter-spacing: 0.05em; + color: var(--text-secondary); text-transform: uppercase; + letter-spacing: 0.11em; } -.lt-badge-admin::before { content: '['; } -.lt-badge-admin::after { content: ']'; } +.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 ---------------------------------------------------------------- */ - -/* Outer frame — double-line border, for major page sections */ .lt-frame { position: relative; - border: 3px double var(--terminal-green); - background: var(--bg-primary); - margin-bottom: var(--space-xl); - animation: boot-up 0.8s ease-out; + 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: '╔'; + content: '◈'; position: absolute; - top: -5px; left: -5px; - font-size: 1.3rem; - color: var(--terminal-green); - text-shadow: var(--glow-green); - animation: corner-pulse 3s ease-in-out infinite; - line-height: 1; -} -.lt-frame::after { - content: '╗'; - position: absolute; - top: -5px; right: -5px; - font-size: 1.3rem; - color: var(--terminal-green); - text-shadow: var(--glow-green); - animation: corner-pulse 3s ease-in-out infinite; + top: -1px; right: 3px; + font-size: 0.52rem; + color: var(--accent-orange); + text-shadow: var(--glow-orange); line-height: 1; + pointer-events: none; } -/* Bottom corners require explicit child elements: - ╚ - ╝ */ .lt-frame-bl, .lt-frame-br { position: absolute; - bottom: -5px; - font-size: 1.3rem; - color: var(--terminal-green); - text-shadow: var(--glow-green); + 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: -5px; } -.lt-frame-br { right: -5px; } +.lt-frame-bl { left: 6px; } +.lt-frame-br { right: 6px; } -/* Inner frame — single-line, for sub-panels inside a .lt-frame */ -.lt-frame-inner { - position: relative; - border: 2px solid var(--terminal-green); - background: var(--bg-secondary); - padding: var(--space-md); - margin: var(--space-md); -} -.lt-frame-inner::before { - content: '┌'; - position: absolute; - top: -3px; left: -3px; - color: var(--terminal-green); - line-height: 1; -} -.lt-frame-inner::after { - content: '┐'; - position: absolute; - top: -3px; right: -3px; - color: var(--terminal-green); - line-height: 1; -} - -/* Section header — full-width amber title bar inside a frame */ .lt-section-header { - padding: 0.75rem 1.5rem; - background: var(--bg-primary); - border-bottom: 2px solid var(--terminal-green); - font-weight: bold; - font-size: 0.9rem; - color: var(--terminal-amber); - text-shadow: var(--glow-amber-intense); + font-size: 0.68rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.1em; - animation: subtle-pulse 3s ease-in-out infinite; + 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(--terminal-green); - text-shadow: var(--glow-green); -} -.lt-section-header::after { - content: ' ═══╣'; - color: var(--terminal-green); - text-shadow: var(--glow-green); + 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); } -/* Subsection header */ .lt-subsection-header { - padding: 0.5rem var(--space-md); - background: var(--bg-secondary); - border-bottom: 1px solid var(--terminal-green); - font-weight: bold; - font-size: 0.85rem; - color: var(--terminal-green); + font-size: 0.63rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.07em; + 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: '├─── '; } -.lt-subsection-header::after { content: ' ───┤'; } - -/* Horizontal divider with ASCII end-caps */ -.lt-divider { - height: 1px; - background: var(--border-color); - margin: var(--space-lg) 0; - position: relative; -} -.lt-divider::before { - content: '╞═══'; - position: absolute; - left: -2px; top: -10px; - font-size: 0.7rem; - color: var(--text-muted); - line-height: 1; -} -.lt-divider::after { - content: '═══╡'; - position: absolute; - right: -2px; top: -10px; - font-size: 0.7rem; - color: var(--text-muted); - line-height: 1; +.lt-subsection-header::before { + content: '◦'; + color: var(--accent-cyan); + opacity: 0.55; } -/* Content body inside a frame / section */ -.lt-section-body { padding: var(--space-md) var(--space-lg); } /* ---------------------------------------------------------------- 08. CARD COMPONENT ---------------------------------------------------------------- */ .lt-card { position: relative; - background: var(--bg-secondary); - border: 2px solid var(--border-color); - padding: var(--space-lg); - transition: var(--transition-default); + 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: '┌'; + content: ''; position: absolute; - top: -3px; left: -3px; - color: var(--terminal-green); - line-height: 1; -} -.lt-card::after { - content: '┐'; - position: absolute; - top: -3px; right: -3px; - color: var(--terminal-green); - line-height: 1; + 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(--terminal-green); + 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); } -.lt-card-title { - font-size: 0.95rem; - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - text-transform: uppercase; - letter-spacing: 0.06em; - margin-bottom: var(--space-md); - padding-bottom: var(--space-sm); - border-bottom: 1px solid var(--border-color); -} -.lt-card-title::before { content: '═══ '; color: var(--terminal-green); } -.lt-card-title::after { content: ' ═══'; color: var(--terminal-green); } - -/* Card grid wrappers */ -.lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); } -.lt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } -.lt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } -.lt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } /* ---------------------------------------------------------------- 09. BUTTONS @@ -660,70 +746,107 @@ pre { .lt-btn { display: inline-flex; align-items: center; - background: transparent; - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - border-radius: 0; /* NO rounded corners — terminal style */ - padding: 10px 20px; - cursor: pointer; + gap: var(--space-sm); + padding: 0.4rem 0.9rem; font-family: var(--font-mono); - font-size: 0.9rem; - font-weight: bold; + font-size: 0.7rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.05em; + 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; - transition: var(--transition-default); white-space: nowrap; - user-select: none; + position: relative; + clip-path: polygon( + 0 0, + calc(100% - 7px) 0, + 100% 7px, + 100% 100%, + 7px 100%, + 0 calc(100% - 7px) + ); } -.lt-btn::before { content: '[ '; flex-shrink: 0; } -.lt-btn::after { content: ' ]'; flex-shrink: 0; } .lt-btn:hover { - background: var(--terminal-green-dim); - color: var(--terminal-amber); - border-color: var(--terminal-amber); + 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 { - opacity: 0.85; + +.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 { - opacity: 0.4; + +.lt-btn:disabled, +.lt-btn[disabled] { + opacity: 0.30; cursor: not-allowed; - transform: none; box-shadow: none; } -/* Amber (primary call-to-action) */ +/* Primary — orange */ .lt-btn-primary { - color: var(--terminal-amber); - border-color: var(--terminal-amber); - text-shadow: var(--glow-amber); + color: var(--accent-orange); + border-color: var(--accent-orange-border); } -.lt-btn-primary::before { content: '> '; } .lt-btn-primary:hover { - background: var(--terminal-amber-dim); + 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); } -/* Red (destructive / danger) */ +/* Danger — red */ .lt-btn-danger { - color: var(--terminal-red); - border-color: var(--terminal-red); + color: var(--accent-red); + border-color: rgba(255,45,85,0.32); } .lt-btn-danger:hover { - background: var(--terminal-red-dim); - color: var(--terminal-red); - border-color: var(--terminal-red); + border-color: var(--accent-red); + background: var(--accent-red-dim); + box-shadow: var(--box-glow-red); + text-shadow: var(--glow-red); } -/* Small variant */ -.lt-btn-sm { padding: 5px 10px; font-size: 0.75rem; border-width: 1px; } +/* 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; +} -/* Ghost (border only, no fill on hover either) */ -.lt-btn-ghost { border-color: var(--border-color); color: var(--text-muted); } +/* 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; +} -/* Button group */ -.lt-btn-group { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; } /* ---------------------------------------------------------------- 10. FORMS & INPUTS @@ -736,412 +859,468 @@ pre { } .lt-label { - font-size: 0.75rem; - font-weight: bold; - color: var(--terminal-amber); + font-size: 0.68rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.07em; - text-shadow: var(--glow-amber); + letter-spacing: 0.12em; + color: var(--text-secondary); } -.lt-label-required::after { content: ' *'; color: var(--terminal-red); } +.lt-label-required::after { content: ' *'; color: var(--accent-red); } .lt-input, -.lt-textarea, -.lt-select { +.lt-select, +.lt-textarea { font-family: var(--font-mono); - font-size: 0.9rem; - background: var(--bg-primary); - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - border-radius: 0; - padding: 10px var(--space-md); + 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%; - transition: var(--transition-fast); - box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); -} -.lt-input:focus, -.lt-textarea:focus, -.lt-select:focus { outline: none; - border-color: var(--terminal-amber); - box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5); - background: rgba(0, 255, 65, 0.03); - animation: focus-pulse 2s ease-in-out infinite; + 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); +} + .lt-input::placeholder, -.lt-textarea::placeholder { color: var(--text-muted); opacity: 0.7; } +.lt-textarea::placeholder { color: var(--text-dim); } -.lt-textarea { min-height: 100px; resize: vertical; } +.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; +} -.lt-select option { - background: var(--bg-secondary); - color: var(--terminal-green); +/* 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: 18px; height: 18px; - border: 2px solid var(--terminal-green); - background: var(--bg-primary); + width: 14px; + height: 14px; + border: 1px solid var(--accent-cyan-border); + background: var(--bg-terminal); cursor: pointer; - border-radius: 0; + position: relative; flex-shrink: 0; + vertical-align: middle; transition: var(--transition-fast); } .lt-checkbox:checked { - background: var(--terminal-green-dim); - border-color: var(--terminal-amber); + background: var(--accent-cyan-dim); + border-color: var(--accent-cyan); } -.lt-checkbox:checked::before { +.lt-checkbox:checked::after { content: '✓'; + position: absolute; + inset: 0; display: flex; align-items: center; justify-content: center; - width: 100%; height: 100%; - color: var(--terminal-amber); - font-size: 0.8rem; - line-height: 1; + 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; } -/* Search input with prompt prefix */ -.lt-search { position: relative; } -.lt-search-input { padding-left: 2.2rem; } -.lt-search::before { - content: '>'; +/* 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; - left: 10px; - top: 50%; transform: translateY(-50%); - color: var(--terminal-amber); - font-weight: bold; - pointer-events: none; - z-index: 1; + 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; } -/* Form hint */ -.lt-form-hint { - font-size: 0.7rem; - color: var(--text-muted); - margin-top: var(--space-xs); -} - -/* Toolbar row */ -.lt-toolbar { - display: flex; - align-items: center; - gap: var(--space-md); - flex-wrap: wrap; - margin-bottom: var(--space-md); - justify-content: space-between; -} -.lt-toolbar-left, -.lt-toolbar-right { display: flex; align-items: center; gap: var(--space-sm); } /* ---------------------------------------------------------------- 11. TABLES ---------------------------------------------------------------- */ +.lt-table-wrap { overflow-x: auto; } -/* Standard table — full-grid borders, good for simple data */ .lt-table { width: 100%; border-collapse: collapse; - font-family: var(--font-mono); - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); + 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 { - background: var(--bg-primary); - padding: 10px 14px; - font-size: 0.8rem; - font-weight: bold; - color: var(--terminal-amber); + padding: 0.6rem 0.85rem; + text-align: left; + font-size: 0.62rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.1em; - text-shadow: var(--glow-amber); - border: 1px solid var(--border-color); - border-bottom: 2px solid var(--terminal-green); + letter-spacing: 0.16em; + color: var(--accent-cyan); + text-shadow: var(--glow-cyan); white-space: nowrap; + cursor: default; } -.lt-table th::before { content: '> '; color: var(--terminal-green); } -.lt-table th:has(input[type="checkbox"])::before { content: none; } + +.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: 10px 14px; - font-size: 0.88rem; + padding: 0.55rem 0.85rem; + border-bottom: 1px solid var(--border-color-dim); color: var(--text-primary); - border: 1px solid var(--border-color-dim); + 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, 255, 65, 0.06); + background: rgba(0,212,255,0.04); + outline: 1px solid var(--border-color-dim); + outline-offset: -1px; } -/* Data table — compact, row-only separators, good for dense data */ -.lt-data-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); } -.lt-data-table th { - padding: 8px 12px; - font-size: 0.72rem; - font-weight: bold; - color: var(--terminal-amber); - text-transform: uppercase; - letter-spacing: 0.08em; - text-shadow: var(--glow-amber); - background: var(--bg-tertiary); - border-bottom: 1px solid var(--border-color); +/* 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 th::before { content: '> '; color: var(--terminal-green); } .lt-data-table td { - padding: 7px 12px; - font-size: 0.85rem; - border-bottom: 1px solid rgba(0, 255, 65, 0.08); + padding: 0.3rem 0.5rem; + border-bottom: 1px solid var(--border-color-dim); } -.lt-data-table tbody tr:hover { background: rgba(0, 255, 65, 0.05); } - -/* Priority left-border accent (apply to ) */ -.lt-table tbody tr td:first-child, -.lt-data-table tbody tr td:first-child { border-left: 4px solid transparent; } -.lt-row-p1 td:first-child { border-left-color: var(--priority-1) !important; } -.lt-row-p2 td:first-child { border-left-color: var(--priority-2) !important; } -.lt-row-p3 td:first-child { border-left-color: var(--priority-3) !important; } -.lt-row-p4 td:first-child { border-left-color: var(--priority-4) !important; } -.lt-row-p5 td:first-child { border-left-color: var(--priority-5) !important; } - -/* Row state tints */ -.lt-row-critical td { background: rgba(255, 68, 68, 0.03); } -.lt-row-warning td { background: rgba(255, 140, 0, 0.03); } -.lt-row-success td { background: rgba(40, 167, 69, 0.03); } - -/* Keyboard-selected row (vim-style navigation) */ -.lt-row-selected { - background: rgba(0, 255, 65, 0.12) !important; - outline: 2px solid var(--terminal-green); - outline-offset: -2px; +.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); } -/* Scrollable table wrapper */ -.lt-table-wrap { overflow-x: auto; border: 2px solid var(--terminal-green); } - -/* Sortable column header */ -.lt-table th[data-sort], -th[data-sort-key] { cursor: pointer; } -.lt-table th[data-sort]:hover { color: var(--terminal-green); text-shadow: var(--glow-green); } -.lt-table th[data-sort="asc"]::after { content: ' ▲'; color: var(--terminal-green); } -.lt-table th[data-sort="desc"]::after { content: ' ▼'; color: var(--terminal-green); } /* ---------------------------------------------------------------- 12. STATUS BADGES, CHIPS, PRIORITY ---------------------------------------------------------------- */ - -/* Full status badge */ .lt-status { display: inline-block; - padding: 4px 12px; - border: 2px solid; - font-family: var(--font-mono); - font-size: 0.82rem; - font-weight: bold; + padding: 0.14rem 0.5rem; + font-size: 0.58rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.04em; + letter-spacing: 0.15em; + border: 1px solid currentColor; + background: transparent; white-space: nowrap; } -.lt-status::before { content: '['; } -.lt-status::after { content: ']'; } -.lt-status-open { color: var(--status-open); border-color: var(--status-open); text-shadow: 0 0 5px var(--status-open), 0 0 10px var(--status-open); } -.lt-status-open::before { content: '[●'; } -.lt-status-pending { color: var(--status-pending); border-color: var(--status-pending); } -.lt-status-pending::before { content: '[○'; } -.lt-status-in-progress { color: var(--status-in-progress); border-color: var(--status-in-progress); } -.lt-status-in-progress::before { content: '[◐'; animation: spin-status 2s linear infinite; } -.lt-status-closed { color: var(--status-closed); border-color: var(--status-closed); } -.lt-status-closed::before { content: '[✓'; } -.lt-status-online { color: var(--status-online); border-color: var(--status-online); text-shadow: 0 0 5px var(--status-online); } -.lt-status-online::before { content: '[●'; } -.lt-status-offline { color: var(--status-offline); border-color: var(--status-offline); text-shadow: 0 0 5px var(--status-offline); animation: pulse-red 1.5s infinite; } -.lt-status-offline::before { content: '[○'; } -.lt-status-running { color: var(--status-running); border-color: var(--status-running); } -.lt-status-running::before { content: '[◐'; animation: spin-status 2s linear infinite; } -.lt-status-completed { color: var(--status-completed); border-color: var(--status-completed); } -.lt-status-completed::before { content: '[✓'; } -.lt-status-failed { color: var(--status-failed); border-color: var(--status-failed); text-shadow: 0 0 5px var(--status-failed); } -.lt-status-failed::before { content: '[✗'; } +.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); } -/* Chip (small, compact status tag) */ -.lt-chip { +/* Priority badges */ +.lt-priority, +.lt-p1, .lt-p2, .lt-p3, .lt-p4, .lt-p5 { display: inline-block; - padding: 2px 8px; - border: 1px solid; - font-size: 0.75rem; - font-weight: bold; - letter-spacing: 0.04em; + padding: 0.12rem 0.45rem; + font-size: 0.58rem; + font-weight: 700; text-transform: uppercase; + letter-spacing: 0.12em; + border: 1px solid currentColor; } -.lt-chip::before { content: '['; } -.lt-chip::after { content: ']'; } -.lt-chip-ok { color: var(--terminal-green); border-color: var(--terminal-green); text-shadow: var(--glow-green); } -.lt-chip-warn { color: var(--terminal-orange); border-color: var(--terminal-orange); } -.lt-chip-critical { color: var(--terminal-red); border-color: var(--terminal-red); text-shadow: var(--glow-red); animation: pulse-glow 2s infinite; } -.lt-chip-info { color: var(--terminal-cyan); border-color: var(--terminal-cyan); text-shadow: var(--glow-cyan); } -/* Badge (inline label, smallest) */ +.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: 1px 6px; - border: 1px solid; - font-size: 0.7rem; - font-weight: bold; - letter-spacing: 0.05em; - text-transform: uppercase; + padding: 0.1rem 0.4rem; + font-size: 0.56rem; + font-weight: 700; + letter-spacing: 0.1em; + border: 1px solid currentColor; } -.lt-badge::before { content: '['; } -.lt-badge::after { content: ']'; } -.lt-badge-green { color: var(--terminal-green); border-color: var(--terminal-green); } -.lt-badge-amber { color: var(--terminal-amber); border-color: var(--terminal-amber); } -.lt-badge-red { color: var(--terminal-red); border-color: var(--terminal-red); } -.lt-badge-cyan { color: var(--terminal-cyan); border-color: var(--terminal-cyan); } -.lt-badge-muted { color: var(--text-muted); border-color: var(--border-color); } +.lt-badge-green { color: var(--accent-green); } +.lt-badge-amber { color: var(--accent-amber); } +.lt-badge-red { color: var(--accent-red); } -/* Priority badge */ -.lt-priority { - display: inline-block; - padding: 3px 10px; - border: 1px solid; - font-size: 0.78rem; - font-weight: bold; - letter-spacing: 0.04em; - text-transform: uppercase; - white-space: nowrap; -} -.lt-priority::before { content: '['; } -.lt-priority::after { content: ']'; } -.lt-p1 { color: var(--priority-1); border-color: var(--priority-1); text-shadow: 0 0 5px var(--priority-1); animation: pulse-glow 2s infinite; } -.lt-p1::before { content: '[▲▲ P1 CRITICAL'; } -.lt-p2 { color: var(--priority-2); border-color: var(--priority-2); } -.lt-p2::before { content: '[▲ P2 HIGH'; } -.lt-p3 { color: var(--priority-3); border-color: var(--priority-3); } -.lt-p3::before { content: '[● P3 MED'; } -.lt-p4 { color: var(--priority-4); border-color: var(--priority-4); } -.lt-p4::before { content: '[▼ P4 LOW'; } -.lt-p5 { color: var(--priority-5); border-color: var(--priority-5); } -.lt-p5::before { content: '[▼▼ P5 MIN'; } +/* 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); } -/* Inline status dot */ +/* Status dots */ .lt-dot { display: inline-block; - width: 8px; height: 8px; + width: 8px; + height: 8px; border-radius: 50%; - border: 2px solid; flex-shrink: 0; } -.lt-dot-up { background: var(--terminal-green); border-color: var(--terminal-green); box-shadow: 0 0 4px var(--terminal-green); } -.lt-dot-down { background: var(--terminal-red); border-color: var(--terminal-red); animation: pulse-red 1.5s infinite; } -.lt-dot-warn { background: var(--terminal-orange); border-color: var(--terminal-orange); } -.lt-dot-idle { background: transparent; border-color: var(--text-muted); } +.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: rgba(0, 0, 0, 0.88); + background: var(--bg-overlay); + backdrop-filter: blur(8px); z-index: var(--z-modal-backdrop); - display: none; align-items: center; justify-content: center; - backdrop-filter: blur(2px); } -.lt-modal-overlay.show { display: flex; } +.lt-modal-overlay.is-open { display: flex; } .lt-modal { position: relative; background: var(--bg-secondary); - border: 3px double var(--terminal-green); - box-shadow: 0 0 30px rgba(0, 255, 65, 0.2), 0 8px 40px rgba(0, 0, 0, 0.8); - width: 560px; - max-width: 95vw; - max-height: 90vh; - overflow-y: auto; - animation: modal-slide-in 0.3s ease; + 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; } - -/* Double-line corner decorations */ .lt-modal::before { - content: '╔'; + content: ''; position: absolute; - top: -5px; left: -5px; - font-size: 1.2rem; - color: var(--terminal-green); - text-shadow: var(--glow-green); - line-height: 1; -} -.lt-modal::after { - content: '╗'; - position: absolute; - top: -5px; right: -5px; - font-size: 1.2rem; - color: var(--terminal-green); - text-shadow: var(--glow-green); - line-height: 1; + 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: var(--space-md) var(--space-lg); - border-bottom: 2px solid var(--terminal-green); - background: var(--bg-primary); + 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.9rem; - font-weight: bold; - color: var(--terminal-amber); - text-shadow: var(--glow-amber); + font-size: 0.72rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.08em; + letter-spacing: 0.16em; + color: var(--accent-orange); + text-shadow: var(--glow-orange); } -.lt-modal-title::before { content: '>> '; color: var(--terminal-green); } .lt-modal-close { - background: transparent; - border: 1px solid var(--border-color); + background: none; + border: none; color: var(--text-muted); - cursor: pointer; - font-family: var(--font-mono); font-size: 0.85rem; - padding: 2px 8px; + line-height: 1; + cursor: pointer; + padding: 0.2rem 0.4rem; transition: var(--transition-fast); } -.lt-modal-close::before, -.lt-modal-close::after { content: ''; } /* Override global btn brackets */ -.lt-modal-close:hover { color: var(--terminal-red); border-color: var(--terminal-red); text-shadow: var(--glow-red); transform: none; } +.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); } -.lt-modal-footer { - display: flex; - gap: var(--space-sm); - justify-content: flex-end; - padding: var(--space-md) var(--space-lg); - border-top: 1px solid var(--border-color); - background: var(--bg-primary); +.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; } -/* Wide variant */ -.lt-modal-lg { width: 800px; } /* ---------------------------------------------------------------- 14. TOAST NOTIFICATIONS ---------------------------------------------------------------- */ -.lt-toast-container { +#lt-toast-container { position: fixed; bottom: var(--space-lg); right: var(--space-lg); - z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-sm); + z-index: var(--z-toast); pointer-events: none; } @@ -1149,545 +1328,1066 @@ th[data-sort-key] { cursor: pointer; } display: flex; align-items: center; gap: var(--space-sm); - padding: 10px 16px; - background: var(--bg-secondary); - border: 2px solid; - font-family: var(--font-mono); - font-size: 0.85rem; - font-weight: bold; - max-width: 420px; + 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: slide-in-right 0.2s ease-out; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); + animation: toast-in 0.2s ease; + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); } -.lt-toast::before { content: '>> '; flex-shrink: 0; } -.lt-toast-success { color: var(--terminal-green); border-color: var(--terminal-green); text-shadow: var(--glow-green); } -.lt-toast-error { color: var(--terminal-red); border-color: var(--terminal-red); text-shadow: var(--glow-red); } -.lt-toast-warning { color: var(--terminal-amber); border-color: var(--terminal-amber); text-shadow: var(--glow-amber); } -.lt-toast-info { color: var(--terminal-cyan); border-color: var(--terminal-cyan); text-shadow: var(--glow-cyan); } -.lt-toast-icon { font-size: 1rem; flex-shrink: 0; } -.lt-toast-msg { flex: 1; } -.lt-toast-close { - background: transparent; border: none; - color: inherit; cursor: pointer; - font-family: var(--font-mono); - opacity: 0.6; font-size: 0.85rem; - padding: 0 0 0 var(--space-sm); -} -.lt-toast-close::before, -.lt-toast-close::after { content: ''; } -.lt-toast-close:hover { opacity: 1; transform: none; } -.lt-toast--hiding { opacity: 0; transition: opacity 0.3s ease; } +.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; - gap: var(--space-sm); - flex-wrap: wrap; - background: var(--bg-secondary); - border: 2px solid var(--border-color); - padding: var(--space-sm); + align-items: flex-end; + gap: 2px; + border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-lg); } .lt-tab { - display: inline-flex; - align-items: center; - padding: 8px 18px; - background: transparent; - color: var(--text-muted); - border: 1px solid var(--border-color); - cursor: pointer; + padding: 0.45rem 0.9rem; font-family: var(--font-mono); - font-size: 0.82rem; - font-weight: bold; + font-size: 0.67rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.05em; + 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::before { content: '[ '; } -.lt-tab::after { content: ' ]'; } .lt-tab:hover { - color: var(--terminal-green); - border-color: var(--border-color-hi); - background: var(--terminal-green-dim); + color: var(--text-secondary); + background: rgba(0,212,255,0.04); + border-color: var(--border-color-dim); } .lt-tab.active { - color: var(--terminal-amber); - border-color: var(--terminal-amber); - background: var(--terminal-amber-dim); - text-shadow: var(--glow-amber); + 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 { display: none; } .lt-tab-panel.active { display: block; } + /* ---------------------------------------------------------------- 16. SIDEBAR / FILTER PANEL ---------------------------------------------------------------- */ .lt-sidebar { width: var(--sidebar-width); - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); flex-shrink: 0; - overflow-y: auto; - max-height: calc(100vh - var(--header-height) - 2rem); - position: sticky; - top: calc(var(--header-height) + var(--space-md)); + background: var(--bg-secondary); + border: 1px solid var(--border-color); + transition: var(--transition-default); } +.lt-sidebar.collapsed { width: 32px; overflow: hidden; } .lt-sidebar-header { - padding: var(--space-sm) var(--space-md); - background: var(--bg-primary); - border-bottom: 1px solid var(--border-color); - font-size: 0.75rem; - font-weight: bold; - color: var(--terminal-amber); - text-transform: uppercase; - letter-spacing: 0.08em; 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-header::before { content: '╠═ '; color: var(--terminal-green); } + +.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-lg); } +.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.75rem; - font-weight: bold; - color: var(--terminal-amber); + font-size: 0.6rem; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.07em; + letter-spacing: 0.15em; + color: var(--accent-orange); margin-bottom: var(--space-sm); - padding-bottom: var(--space-xs); - border-bottom: 1px solid var(--border-color-dim); } .lt-filter-option { display: flex; align-items: center; gap: var(--space-sm); - padding: var(--space-xs) 0; + font-size: 0.75rem; + color: var(--text-secondary); + margin-bottom: var(--space-xs); cursor: pointer; - color: var(--text-primary); - font-size: 0.85rem; transition: var(--transition-fast); } -.lt-filter-option:hover { color: var(--terminal-amber); } +.lt-filter-option:hover { color: var(--text-primary); } -/* Collapse toggle */ -.lt-sidebar.collapsed .lt-sidebar-body { display: none; } -.lt-sidebar-toggle { - background: transparent; - border: none; - color: var(--text-muted); - cursor: pointer; - font-family: var(--font-mono); - font-size: 0.8rem; - padding: 0; -} -.lt-sidebar-toggle::before, -.lt-sidebar-toggle::after { content: ''; } /* ---------------------------------------------------------------- 17. STATS WIDGETS ---------------------------------------------------------------- */ .lt-stats-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .lt-stat-card { - background: var(--bg-secondary); - border: 2px solid var(--border-color); - padding: var(--space-md); + position: relative; display: flex; align-items: center; gap: var(--space-md); - position: relative; - transition: var(--transition-default); + padding: var(--space-md); + background: var(--bg-card); + border: 1px solid var(--border-color); cursor: pointer; -} -.lt-stat-card::before { - content: '┌'; - position: absolute; - top: -3px; left: -3px; - color: var(--terminal-green); - line-height: 1; -} -.lt-stat-card::after { - content: '┐'; - position: absolute; - top: -3px; right: -3px; - color: var(--terminal-green); - line-height: 1; -} -.lt-stat-card:hover { - border-color: var(--terminal-amber); -} -.lt-stat-card.active { - background: var(--terminal-amber-dim); - border-color: var(--terminal-amber); + transition: var(--transition-fast); + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + overflow: hidden; } -.lt-stat-icon { font-size: 1.8rem; } -.lt-stat-info { display: flex; flex-direction: column; gap: 2px; } +/* 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: bold; - color: var(--terminal-green); - text-shadow: 0 0 4px currentColor; + font-weight: 700; line-height: 1; + color: var(--accent-orange); + text-shadow: var(--glow-orange); } + .lt-stat-label { - font-size: 0.68rem; - color: var(--text-muted); + font-size: 0.58rem; text-transform: uppercase; - letter-spacing: 0.07em; + letter-spacing: 0.16em; + color: var(--text-muted); + margin-top: 2px; } + /* ---------------------------------------------------------------- 18. INLINE MESSAGES ---------------------------------------------------------------- */ .lt-msg { - padding: var(--space-md) var(--space-lg); - border: 2px solid; - font-family: var(--font-mono); - margin: var(--space-md) 0; + 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-error { color: var(--terminal-red); border-color: var(--terminal-red); background: var(--terminal-red-dim); } -.lt-msg-success { color: var(--status-open); border-color: var(--status-open); background: rgba(40, 167, 69, 0.08); } -.lt-msg-warning { color: var(--terminal-amber); border-color: var(--terminal-amber); background: var(--terminal-amber-dim); } -.lt-msg-info { color: var(--terminal-cyan); border-color: var(--terminal-cyan); background: var(--terminal-cyan-dim); } -.lt-msg-error::before { content: '[✗] ERROR: '; font-weight: bold; } -.lt-msg-success::before { content: '[✓] SUCCESS: '; font-weight: bold; } -.lt-msg-warning::before { content: '[!] WARNING: '; font-weight: bold; } -.lt-msg-info::before { content: '[i] INFO: '; font-weight: bold; } +.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 { - text-align: center; - padding: var(--space-xl); - color: var(--terminal-green); -} -.lt-loading::before { content: '[ LOADING'; display: block; margin-bottom: var(--space-sm); } -.lt-loading::after { content: '...'; animation: loading-dots 1.5s steps(4, end) infinite; } - -.lt-empty { - text-align: center; - padding: var(--space-xl) var(--space-lg); + display: flex; + align-items: center; + justify-content: center; + gap: 8px; color: var(--text-muted); + font-size: 0.72rem; } -.lt-empty::before { - content: '[ NO DATA ]'; - display: block; - font-size: 1.1rem; - color: var(--terminal-green); - text-shadow: var(--glow-green); - margin-bottom: var(--space-sm); +.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; } -/* Skeleton shimmer for async content */ .lt-skeleton { background: linear-gradient( 90deg, - rgba(0, 255, 65, 0.04) 0%, - rgba(0, 255, 65, 0.10) 50%, - rgba(0, 255, 65, 0.04) 100% + var(--bg-secondary) 25%, + var(--bg-tertiary) 50%, + var(--bg-secondary) 75% ); - background-size: 200% 100%; - animation: skeleton-shimmer 1.5s ease-in-out infinite; - border: 1px solid var(--border-color-dim); - color: transparent; - user-select: none; + 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: var(--bg-primary); - z-index: 99999; + background: #000; + z-index: calc(var(--z-overlay) + 1); display: flex; - align-items: center; - justify-content: center; - transition: opacity 0.5s ease; + align-items: flex-start; + justify-content: flex-start; + padding: var(--space-2xl); + animation: boot-fade 0.5s ease 2.2s forwards; } -.lt-boot-overlay.fade-out { opacity: 0; pointer-events: none; } .lt-boot-text { font-family: var(--font-mono); - font-size: 0.9rem; - color: var(--terminal-green); + font-size: 0.78rem; + color: var(--accent-green); text-shadow: var(--glow-green); line-height: 1.7; - white-space: pre; - padding: var(--space-xl); + white-space: pre-wrap; + overflow: hidden; } + /* ---------------------------------------------------------------- 21. LOG / TIMELINE ENTRIES ---------------------------------------------------------------- */ .lt-log-entry { - padding: var(--space-md); - background: var(--bg-secondary); - border-left: 3px solid var(--terminal-green); - margin-bottom: var(--space-sm); - font-size: 0.88rem; + 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::before { content: '> '; color: var(--terminal-amber); font-weight: bold; } -.lt-log-entry:hover { background: var(--terminal-green-dim); border-left-width: 5px; } -.lt-log-entry.error { border-left-color: var(--terminal-red); } -.lt-log-entry.warning { border-left-color: var(--terminal-amber); } -.lt-log-entry.success { border-left-color: var(--status-open); } +.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.78rem; - color: var(--terminal-amber); - margin-bottom: var(--space-xs); + 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); - border: 1px solid var(--border-color-dim); - padding: var(--space-sm); - margin-top: var(--space-sm); - max-height: 300px; - overflow-y: auto; - font-size: 0.82rem; + padding: 0.2rem 0.45rem; + margin-top: 0.35rem; + border-left: 1px solid var(--accent-green-border); + text-shadow: var(--glow-green); } -/* Timeline (vertical) */ -.lt-timeline { position: relative; padding-left: var(--space-xl); } -.lt-timeline::before { - content: ''; - position: absolute; - left: 8px; top: 0; bottom: 0; - width: 1px; - background: var(--border-color); -} -.lt-timeline-item { - position: relative; +/* 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-timeline-item::before { - content: '●'; - position: absolute; - left: calc(-1 * var(--space-xl) + 2px); - color: var(--terminal-green); - font-size: 0.6rem; - top: 0.4rem; +.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 + 22. ANIMATIONS (KEYFRAMES) ---------------------------------------------------------------- */ -@keyframes scanline { - 0% { transform: translateY(0); } - 100% { transform: translateY(4px); } +@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 flicker { - 0% { opacity: 1; } - 10% { opacity: 0.95; } - 20% { opacity: 1; } - 30% { opacity: 0.97; } - 40% { opacity: 1; } +@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 data-stream { - 0% { content: '10101010'; opacity: 0.07; } - 25% { content: '01010101'; opacity: 0.10; } - 50% { content: '11001100'; opacity: 0.07; } - 75% { content: '00110011'; opacity: 0.10; } - 100% { content: '10101010'; opacity: 0.07; } +@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 boot-up { - 0% { opacity: 0; filter: brightness(2) saturate(0); } - 30% { opacity: 1; filter: brightness(1.5) saturate(0.5); } - 100% { opacity: 1; filter: brightness(1) saturate(1); } +@keyframes spin { + to { transform: rotate(360deg); } } -@keyframes modal-slide-in { - from { transform: translateY(-30px); opacity: 0; } - to { transform: translateY(0); opacity: 1; } +@keyframes shimmer { + 0% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } } -@keyframes slide-in-right { - from { transform: translateX(30px); opacity: 0; } - to { transform: translateX(0); opacity: 1; } +@keyframes toast-in { + from { opacity: 0; transform: translateX(16px); } + to { opacity: 1; transform: translateX(0); } } -@keyframes corner-pulse { - 0%, 100% { opacity: 0.7; } - 50% { opacity: 1; } +@keyframes modal-in { + from { opacity: 0; transform: scale(0.96) translateY(-10px); } + to { opacity: 1; transform: scale(1) translateY(0); } } -@keyframes subtle-pulse { - 0%, 100% { opacity: 0.75; } - 50% { opacity: 1; } +@keyframes boot-fade { + to { opacity: 0; pointer-events: none; } } -@keyframes pulse-glow { - 0%, 100% { opacity: 0.7; } - 50% { opacity: 1; } +@keyframes blink { + 0%, 49% { opacity: 1; } + 50%, 100% { opacity: 0; } } -@keyframes pulse-red { - 0%, 100% { opacity: 0.6; } - 50% { opacity: 1; } +@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 focus-pulse { - 0%, 100% { box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5); } - 50% { box-shadow: var(--glow-amber-intense), inset 0 0 10px rgba(0, 0, 0, 0.5); } +@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); } } -@keyframes spin-status { - 0% { content: '[◐'; } - 25% { content: '[◓'; } - 50% { content: '[◑'; } - 75% { content: '[◒'; } - 100% { content: '[◐'; } -} -@keyframes spin-full { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -@keyframes loading-dots { - 0%, 20% { content: '.'; } - 40% { content: '..'; } - 60%, 100% { content: '...'; } -} - -@keyframes skeleton-shimmer { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -@keyframes cursor-blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} - -/* Item pulse for actively running tasks */ -@keyframes exec-running-pulse { - 0%, 100% { border-color: var(--terminal-green); opacity: 0.7; } - 50% { border-color: var(--status-running); opacity: 1; } -} -.lt-item-running { animation: exec-running-pulse 2s ease-in-out infinite; } - -/* ---------------------------------------------------------------- +/* ================================================================ 23. RESPONSIVE DESIGN - ---------------------------------------------------------------- */ -@media (max-width: 1400px) { - .lt-grid-4 { grid-template-columns: repeat(3, 1fr); } - .lt-stats-grid { grid-template-columns: repeat(4, 1fr); } + + 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; } -@media (max-width: 1200px) { - .lt-sidebar { width: var(--sidebar-width-sm); } - .lt-grid-4, .lt-grid-3 { grid-template-columns: repeat(2, 1fr); } - .lt-stats-grid { grid-template-columns: repeat(3, 1fr); } +/* ── 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); } -@media (max-width: 1024px) { - .lt-layout { flex-direction: column; } - .lt-sidebar { width: 100%; max-height: none; position: static; } +.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-grid-3 { 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%; } } -@media (max-width: 768px) { + +/* ── 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-nav { display: none; } /* Replace with hamburger menu on mobile */ .lt-brand-subtitle { display: none; } - .lt-main { padding: var(--space-md); } - .lt-grid-2 { grid-template-columns: 1fr; } + + .lt-grid-2, .lt-grid-3, .lt-grid-4 { grid-template-columns: 1fr; } .lt-stats-grid { grid-template-columns: repeat(2, 1fr); } - .lt-modal { width: 100%; max-width: none; margin: var(--space-md); } - .lt-table { font-size: 0.8rem; } - .lt-table th, .lt-table td { padding: 8px; } + + .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; } } -@media (max-width: 480px) { - .lt-main { padding: var(--space-sm); } - .lt-stats-grid { grid-template-columns: 1fr 1fr; } - .lt-btn { padding: 8px 14px; font-size: 0.8rem; } - .lt-toast-container { left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); } - .lt-toast { max-width: none; } + +/* ── 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-green { color: var(--terminal-green) !important; text-shadow: var(--glow-green); } -.lt-text-amber { color: var(--terminal-amber) !important; text-shadow: var(--glow-amber); } -.lt-text-red { color: var(--terminal-red) !important; } -.lt-text-cyan { color: var(--terminal-cyan) !important; } -.lt-text-muted { color: var(--text-muted) !important; } -.lt-text-mono { font-family: var(--font-mono) !important; } -.lt-text-upper { text-transform: uppercase; letter-spacing: 0.06em; } -.lt-text-sm { font-size: 0.8rem; } -.lt-text-xs { font-size: 0.7rem; } -.lt-no-wrap { white-space: nowrap; } +.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-flex { display: flex; align-items: center; } -.lt-flex-between { display: flex; align-items: center; justify-content: space-between; } -.lt-flex-wrap { flex-wrap: wrap; } -.lt-gap-xs { gap: var(--space-xs); } -.lt-gap-sm { gap: var(--space-sm); } -.lt-gap-md { gap: var(--space-md); } -.lt-mt-sm { margin-top: var(--space-sm); } -.lt-mt-md { margin-top: var(--space-md); } -.lt-mb-md { margin-bottom: var(--space-md); } -.lt-mb-lg { margin-bottom: var(--space-lg); } -.lt-p-md { padding: var(--space-md); } +.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; } -/* Screen reader only */ -.lt-sr-only { - position: absolute; width: 1px; height: 1px; - padding: 0; margin: -1px; overflow: hidden; - clip: rect(0,0,0,0); white-space: nowrap; border: 0; +.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; } - .lt-header, .lt-sidebar, .lt-tabs, - .lt-modal-overlay, .lt-toast-container { display: none !important; } - .lt-main { padding: 0; } - body { background: white; color: black; animation: none; } - .lt-card, .lt-frame { border: 1px solid #333; box-shadow: none; } - a { color: black; } + 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: 2px solid var(--terminal-amber); + outline: 1px solid var(--accent-cyan); outline-offset: 2px; + box-shadow: var(--box-glow-cyan); } @media (prefers-reduced-motion: reduce) { @@ -1696,6 +2396,3095 @@ th[data-sort-key] { cursor: pointer; } animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } - body::before { animation: none; } - body { animation: none; } +} + + +/* ---------------------------------------------------------------- + 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); } + +/* — 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; } } diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index a947949..2a8299e 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -1,6209 +1,223 @@ -/* ===== CSS VARIABLES - TERMINAL EDITION ===== */ -:root { - /* Terminal Dark Backgrounds */ - --bg-primary: #0a0a0a; - --bg-secondary: #1a1a1a; - --bg-tertiary: #2a2a2a; +/* ================================================================ + dashboard.css — Tinker Tickets TDS v1.2 + App-specific overrides. base.css handles all base components. + ================================================================ */ - /* Terminal Colors */ - --terminal-green: #00ff41; - /* Note: --terminal-green-dim is NOT overridden here — base.css defines it as - rgba(0,255,65,0.15) for button hover backgrounds. Use --text-secondary for dim text. */ - --terminal-amber: #ffb000; - --terminal-cyan: #00ffff; - --terminal-red: #ff4444; - --text-primary: #00ff41; - --text-secondary: #00cc33; - --text-muted: #00bb33; /* Improved contrast ratio for WCAG AA */ - - /* Border & UI */ - --border-color: #00ff41; - --shadow: none; - --hover-bg: rgba(0, 255, 65, 0.1); - --border-radius: 0; - - /* Priority Colors (Keep existing) */ - --priority-1: #ff4d4d; - --priority-2: #ffa726; - --priority-3: #42a5f5; - --priority-4: #66bb6a; - --priority-5: #9e9e9e; - - /* Status Colors */ - --status-open: #28a745; - --status-pending: #9c27b0; - --status-in-progress: #ffc107; - --status-closed: #dc3545; - - /* Terminal Font Stack */ - --font-mono: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace; - - /* Glow Effects - Enhanced for stronger phosphor effect */ - --glow-green: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41; - --glow-green-intense: 0 0 8px #00ff41, 0 0 16px #00ff41, 0 0 24px #00ff41, 0 0 32px rgba(0, 255, 65, 0.5); - --glow-red: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d, 0 0 15px #ff4d4d; - --glow-blue: 0 0 5px #42a5f5, 0 0 10px #42a5f5, 0 0 15px #42a5f5; - --glow-amber: 0 0 5px #ffb000, 0 0 10px #ffb000, 0 0 15px #ffb000; - --glow-amber-intense: 0 0 8px #ffb000, 0 0 16px #ffb000, 0 0 24px #ffb000; - --glow-priority-1: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d, 0 0 15px #ff4d4d; - --glow-priority-2: 0 0 5px #ffa726, 0 0 10px #ffa726, 0 0 15px #ffa726; - --glow-priority-3: 0 0 5px #42a5f5, 0 0 10px #42a5f5, 0 0 15px #42a5f5; - --glow-priority-4: 0 0 5px #66bb6a, 0 0 10px #66bb6a, 0 0 15px #66bb6a; - --glow-priority-5: 0 0 5px #9e9e9e, 0 0 10px #9e9e9e, 0 0 15px #9e9e9e; - - /* Spacing */ - --spacing-xs: 0.5rem; - --spacing-sm: 1rem; - --spacing-md: 1.5rem; - --spacing-lg: 2rem; - - /* Transitions — scoped to GPU-safe properties only (no box-shadow, no filter) */ - --transition-default: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; - - /* Z-Index Scale - Centralized stacking context management */ - --z-base: 1; - --z-dropdown: 100; - --z-sticky: 200; - --z-fixed: 300; - --z-modal-backdrop: 400; - --z-modal: 500; - --z-popover: 600; - --z-tooltip: 700; - --z-toast: 800; - --z-overlay: 9999; -} - -/* Dark theme (now same as light for terminal aesthetic) */ -[data-theme="dark"] { - --bg-primary: #0a0a0a; - --bg-secondary: #1a1a1a; - --bg-tertiary: #2a2a2a; - --text-primary: #00ff41; - --text-secondary: #00cc33; - --border-color: #00ff41; - --shadow: none; - --hover-bg: rgba(0, 255, 65, 0.1); -} - -/* ===== BASE ELEMENTS - TERMINAL STYLE ===== */ - -/* Global box-sizing for consistent layouts */ -*, *::before, *::after { - box-sizing: border-box; -} - -body { - font-family: var(--font-mono); - margin: 0; - padding: var(--spacing-md); - background-color: var(--bg-primary); - /* Scanlines baked into body background — avoids position:fixed GPU layer */ - background-image: repeating-linear-gradient( - 0deg, - rgba(0, 0, 0, 0.15) 0px, - rgba(0, 0, 0, 0.15) 1px, - transparent 1px, - transparent 2px - ); - color: var(--text-primary); - position: relative; -} - -/* body::before was the CRT scanline overlay (position:fixed, z-index:9999). - Chrome promotes all position:fixed elements to GPU compositing layers, so - every hover-triggered CPU repaint caused a compositor re-blend blink. - Scanlines moved to body background-image above. */ -body::before { - display: none; -} - -/* Suppress body::after binary text watermark (also position:fixed → GPU layer). - Do NOT add a second body::after rule below — the last rule wins in the cascade, - overriding this display:none and re-creating the fixed GPU compositing layer. */ -body::after { - display: none; -} - -/* Screen Flicker Effect */ -@keyframes flicker { - 0% { opacity: 1; } - 10% { opacity: 0.95; } - 20% { opacity: 1; } - 30% { opacity: 0.97; } - 40% { opacity: 1; } -} - -@keyframes glitch { - 0% { transform: translate(0); } - 20% { transform: translate(-2px, 2px); } - 40% { transform: translate(-2px, -2px); } - 60% { transform: translate(2px, 2px); } - 80% { transform: translate(2px, -2px); } - 100% { transform: translate(0); } -} - -/* ===== ENHANCED TERMINAL ANIMATIONS ===== */ - -/* Typing cursor effect for focused inputs */ -input:focus::placeholder, -textarea:focus::placeholder { - animation: typing-cursor 1s steps(1) infinite; -} - -@keyframes typing-cursor { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} - -/* Glowing border pulse on focus */ -input:focus, -textarea:focus, -select:focus { - outline: 2px solid var(--terminal-amber); - outline-offset: 2px; - /* Static glow on focus — no animation to avoid CPU repaints on every frame */ - box-shadow: var(--glow-amber); -} - -/* Focus visible for keyboard navigation */ -:focus-visible { - outline: 2px solid var(--terminal-amber); - outline-offset: 2px; -} - -/* Screen reader only - visually hidden but accessible */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -/* Reduced motion for accessibility */ -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } - - body::before { - animation: none; - } -} - -/* Boot-up fade in effect */ -@keyframes boot-up { - 0% { - opacity: 0; - filter: brightness(2) saturate(0); - } - 30% { - opacity: 1; - filter: brightness(1.5) saturate(0.5); - } - 100% { - opacity: 1; - filter: brightness(1) saturate(1); - } -} - -.ascii-frame-outer { - animation: boot-up 0.8s ease-out; -} - -/* Phosphor text glow on important elements */ -.stat-value, -.ticket-id, -h1, h2, h3 { - text-shadow: 0 0 2px currentColor, 0 0 4px currentColor; -} - -/* Link hover — text-decoration (no opacity pseudo-element, no GPU layer creation) */ -a:not(.btn) { - text-decoration: none; -} -a:not(.btn):hover { - text-decoration: underline; - text-underline-offset: 3px; -} - -a:not(.btn)::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 100%; - height: 1px; - background: currentColor; - opacity: 0; - transition: opacity 0.2s ease; -} - -a:not(.btn):hover::after { - opacity: 1; -} - -/* Matrix-style rain effect on hover for stats */ -.stat-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(180deg, - transparent 0%, - rgba(0, 255, 65, 0.03) 50%, - transparent 100% - ); - background-size: 100% 200%; - opacity: 0; - transition: opacity 0.3s; - pointer-events: none; -} - -.stat-card:hover::before { - opacity: 1; -} - -@keyframes matrix-rain { - 0% { background-position: 0 -100%; } - 100% { background-position: 0 100%; } -} - -/* Smooth table row selection animation */ -tbody tr { - transition: background-color 0.15s ease; -} - -tr[data-clickable="true"] { cursor: pointer; } - -/* Button press effect */ -.btn { - transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; - position: relative; -} - -/* Terminal cursor blink for active/selected elements */ -.keyboard-selected td:first-child::before { - content: '█'; - position: absolute; - left: -25px; - animation: cursor-blink 0.8s steps(1) infinite; - color: var(--terminal-green); -} - -@keyframes cursor-blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} - -/* Neon glow effect for priority badges — static box-shadow (no filter:blur GPU layer) */ -.priority-badge { - box-shadow: 0 0 6px currentColor; -} - -/* Smooth scrollbar styling */ -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-track { - background: var(--bg-primary); - border: 1px solid var(--terminal-green); -} - -::-webkit-scrollbar-thumb { - background: var(--terminal-green); - box-shadow: 0 0 5px var(--terminal-green); -} - -::-webkit-scrollbar-thumb:hover { - background: var(--terminal-amber); - box-shadow: 0 0 10px var(--terminal-amber); -} - -/* Firefox scrollbar */ -* { - scrollbar-width: thin; - scrollbar-color: var(--terminal-green) var(--bg-primary); -} - -body.menu-open { - padding-left: 260px; -} - -h1 { - color: var(--text-primary); - margin: 0; -} - -/* ===== USER HEADER - TERMINAL STYLE ===== */ -.user-header { - background: var(--bg-secondary); - padding: 0.5rem 1rem; - color: var(--terminal-green); - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 2px solid var(--terminal-green); - box-shadow: 0 2px 20px rgba(0, 255, 65, 0.2); - box-sizing: border-box; - font-family: var(--font-mono); - position: relative; -} - -.user-header::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background: linear-gradient(90deg, - transparent 0%, - var(--terminal-green) 20%, - var(--terminal-green) 80%, - transparent 100%); - box-shadow: var(--glow-green); -} - -.user-header-left, -.user-header-right { - display: flex; - align-items: center; - gap: 0.75rem; - flex-shrink: 1; - min-width: 0; -} - -.app-title { - font-weight: bold; - font-size: 1rem; - color: var(--terminal-amber); - text-shadow: var(--glow-amber-intense); - white-space: nowrap; - animation: subtle-pulse 3s ease-in-out infinite; -} - -.app-title::before { - content: '>> '; - color: var(--terminal-green); - text-shadow: var(--glow-green); -} - -.back-link { - color: var(--terminal-green); - text-decoration: none; - font-weight: bold; - font-size: 1rem; - white-space: nowrap; - text-shadow: var(--glow-green); -} - -.back-link:hover { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); -} - -.user-name { - color: var(--terminal-green); - font-size: 0.9rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.admin-badge { - background: transparent; - color: var(--priority-1); - padding: 0.2rem 0.5rem; - border: 2px solid var(--priority-1); - border-radius: 0; /* Terminal aesthetic - no rounded corners */ - font-size: 0.75rem; - font-weight: bold; - white-space: nowrap; - text-shadow: var(--glow-priority-1); - font-family: var(--font-mono); -} - -.admin-badge::before { - content: '['; - margin-right: 3px; -} - -.admin-badge::after { - content: ']'; - margin-left: 3px; -} - -/* ===== INTERMEDIATE RESPONSIVE BREAKPOINTS ===== */ - -/* Extra large desktop (1600px+) - Full table view */ -@media (min-width: 1600px) { - .dashboard-layout { - max-width: 1800px; - margin: 0 auto; - } - - .stats-widgets .stats-row { - grid-template-columns: repeat(6, 1fr); - } - - .kanban-board { - grid-template-columns: repeat(4, 1fr); - } -} - -/* Large desktop (1400px - 1599px) - Slightly compact table */ -@media (min-width: 1400px) and (max-width: 1599px) { - .dashboard-layout { - max-width: 100%; - padding: 0 0.5rem; - } - - .dashboard-sidebar { - width: 220px; - } - - .stats-widgets .stats-row { - grid-template-columns: repeat(4, 1fr); - } - - table { - font-size: 0.85rem; - } - - th, td { - padding: 8px 10px; - } -} - -/* ===== RESPONSIVE CARD VIEW (below 1400px) ===== */ -/* Switch from table to card layout for better usability */ - -@media (max-width: 1399px) { - /* Hide the table on smaller screens */ - .table-wrapper table { - display: none; - } - - /* Show card view instead */ - .table-wrapper { - display: block; - } - - /* Card-based ticket list */ - .table-wrapper::before { - content: 'Tickets'; - display: block; - font-family: var(--font-mono); - font-size: 1rem; - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - padding: 0.75rem 1rem; - border-bottom: 2px solid var(--terminal-green); - background: var(--bg-primary); - } - - .ticket-cards { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 0.5rem; - } - - .ticket-card-row { - display: grid; - grid-template-columns: auto 1fr auto auto; - gap: 1rem; - align-items: center; - padding: 0.75rem 1rem; - background: var(--bg-secondary); - border: 1px solid var(--terminal-green); - border-left: 4px solid var(--terminal-green); - transition: background 0.2s ease; - } - - .ticket-card-row:hover { - background: rgba(0, 255, 65, 0.1); - } - - .ticket-card-row.priority-1 { border-left-color: var(--priority-1); } - .ticket-card-row.priority-2 { border-left-color: var(--priority-2); } - .ticket-card-row.priority-3 { border-left-color: var(--priority-3); } - .ticket-card-row.priority-4 { border-left-color: var(--priority-4); } - .ticket-card-row.priority-5 { border-left-color: var(--priority-5); } - - .ticket-card-id { - font-family: var(--font-mono); - font-size: 0.85rem; - color: var(--terminal-cyan); - white-space: nowrap; - } - - .ticket-card-id a { - color: inherit; - text-decoration: none; - } - - .ticket-card-id a:hover { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - } - - .ticket-card-main { - min-width: 0; - } - - .ticket-card-title { - font-size: 0.95rem; - color: var(--terminal-green); - margin-bottom: 0.25rem; - word-wrap: break-word; - } - - .ticket-card-meta { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - font-size: 0.75rem; - color: var(--text-muted); - } - - .ticket-card-meta span { - display: inline-flex; - align-items: center; - gap: 0.25rem; - } - - .ticket-card-status { - padding: 0.25rem 0.5rem; - font-size: 0.75rem; - font-family: var(--font-mono); - white-space: nowrap; - } - - .ticket-card-actions { - display: flex; - gap: 0.25rem; - } - - .ticket-card-actions button { - padding: 0.4rem; - min-width: 32px; - min-height: 32px; - background: transparent; - border: 1px solid var(--terminal-green); - color: var(--terminal-green); - cursor: pointer; - font-size: 0.9rem; - } - - .ticket-card-actions button:hover { - background: var(--terminal-green); - color: var(--bg-primary); - } - - /* Sidebar adjustments */ - .dashboard-sidebar { - width: 200px; - } - - .stats-widgets .stats-row { - grid-template-columns: repeat(3, 1fr); - } -} - -/* Tablet view (900px - 1399px) */ -@media (min-width: 900px) and (max-width: 1399px) { - .dashboard-layout { - gap: 1rem; - padding: 0 0.5rem; - } - - .ticket-card-row { - grid-template-columns: auto 1fr auto auto; - } - - .ticket-card-actions button { - min-width: 40px; - min-height: 40px; - } -} - -/* Small tablet (600px - 899px) */ -@media (min-width: 600px) and (max-width: 899px) { - .dashboard-layout { - gap: 0.75rem; - padding: 0 0.5rem; - } - - .dashboard-sidebar { - width: 180px; - } - - .stats-widgets .stats-row { - grid-template-columns: repeat(3, 1fr); - gap: 0.5rem; - } - - .stat-card { - padding: 0.75rem; - } - - .ticket-cards { - gap: 0.5rem; - } - - .ticket-card-row { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - padding: 0.75rem; - } - - .ticket-card-id { - font-size: 0.9rem; - font-weight: bold; - } - - .ticket-card-main { - flex: 1 1 100%; - order: 2; - } - - .ticket-card-title { - font-size: 1rem; - margin-bottom: 0.5rem; - } - - .ticket-card-status { - order: 1; - margin-left: auto; - } - - .ticket-card-actions { - flex: 1 1 100%; - order: 3; - display: flex; - gap: 0.5rem; - margin-top: 0.5rem; - padding-top: 0.5rem; - border-top: 1px solid rgba(0, 255, 65, 0.2); - } - - .ticket-card-actions button { - flex: 1; - min-height: 44px; - font-size: 1rem; - } -} - -/* Large phone / Small tablet (480px - 599px) */ -@media (min-width: 480px) and (max-width: 599px) { - body { - padding: 0.5rem; - } - - .user-header { - padding: 0.5rem 0.75rem; - } - - .dashboard-layout { - flex-direction: column; - gap: 0.5rem; - padding: 0; - } - - .dashboard-sidebar { - display: none; - } - - .mobile-filter-toggle { - display: flex !important; - } - - .stats-widgets { - margin: 0.5rem 0; - } - - .stats-widgets .stats-row { - grid-template-columns: repeat(2, 1fr); - gap: 0.5rem; - } - - .stat-card { - padding: 0.75rem; - } - - .stat-value { - font-size: 1.5rem; - } - - .stat-label { - font-size: 0.7rem; - } - - .dashboard-toolbar { - padding: 0.5rem; - gap: 0.5rem; - } - - .ascii-frame-outer { - margin: 0.5rem 0; - border-width: 2px; - } - - .ticket-cards { - padding: 0.5rem; - gap: 0.5rem; - } - - .ticket-card-row { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 1rem; - border-left-width: 5px; - } - - .ticket-card-id { - font-size: 1rem; - font-weight: bold; - } - - .ticket-card-id a { - padding: 0.25rem 0; - display: inline-block; - } - - .ticket-card-title { - font-size: 1.1rem; - line-height: 1.4; - } - - .ticket-card-meta { - font-size: 0.85rem; - gap: 1rem; - } - - .ticket-card-status { - align-self: flex-start; - padding: 0.4rem 0.75rem; - font-size: 0.85rem; - } - - .ticket-card-actions { - display: flex; - gap: 0.5rem; - margin-top: 0.75rem; - padding-top: 0.75rem; - border-top: 1px solid rgba(0, 255, 65, 0.2); - } - - .ticket-card-actions button { - flex: 1; - min-height: 48px; - font-size: 1.2rem; - border-width: 2px; - } -} - -/* Tablet landscape (600px - 899px) */ -@media (min-width: 600px) and (max-width: 899px) { - .stats-widgets .stats-row { - grid-template-columns: repeat(2, 1fr); - } - - .dashboard-toolbar { - flex-direction: column; - align-items: stretch; - } - - .toolbar-left, - .toolbar-center, - .toolbar-right { - width: 100%; - } - - .toolbar-search { - width: 100%; - } - - .search-box { - flex: 1; - } - - .dashboard-sidebar { - width: 200px; - } - - .kanban-board { - grid-template-columns: repeat(2, 1fr); - } - - table { - font-size: 0.85rem; - } - - th, td { - padding: 0.5rem; - } -} - -/* Responsive design for smaller screens */ -@media (max-width: 768px) { - .user-header { - padding: 0.5rem 0.75rem; - margin-left: 0; /* Remove margin on mobile */ - } - - .app-title, - .back-link { - font-size: 0.9rem; - } - - .user-name { - font-size: 0.85rem; - } -} - -/* ===== ASCII BORDER SYSTEM ===== */ -.ascii-box { - position: relative; - border: 2px solid var(--terminal-green); - border-radius: 0; - padding: 1rem; - background: var(--bg-secondary); - font-family: var(--font-mono); -} - -.ascii-box-heavy { - border: 3px double var(--terminal-green); -} - -.ascii-title { - position: relative; - padding: 0.5rem 1rem; - background: var(--bg-primary); - border-bottom: 2px solid var(--terminal-green); - font-family: var(--font-mono); - font-weight: bold; - color: var(--terminal-green); - text-shadow: var(--glow-green); -} - -.ascii-title::before { - content: '═══ '; -} - -.ascii-title::after { - content: ' ═══'; -} - -/* Priority-specific border colors */ -.ascii-box[data-priority="1"] { border-color: var(--priority-1); } -.ascii-box[data-priority="2"] { border-color: var(--priority-2); } -.ascii-box[data-priority="3"] { border-color: var(--priority-3); } -.ascii-box[data-priority="4"] { border-color: var(--priority-4); } -.ascii-box[data-priority="5"] { border-color: var(--priority-5); } - -/* ===== NESTED ASCII FRAME SYSTEM ===== */ - -/* Main outer container - Heavy double border */ -.ascii-frame-outer { - position: relative; - border: 3px double var(--terminal-green); - padding: 0; - background: var(--bg-primary); - margin-bottom: 2rem; -} - -.ascii-frame-outer::before { - content: '╔'; - position: absolute; - top: -3px; - left: -3px; - font-size: 1.5rem; - color: var(--terminal-green); - line-height: 1; - z-index: var(--z-base); -} - -.ascii-frame-outer::after { - content: '╗'; - position: absolute; - top: -3px; - right: -3px; - font-size: 1.5rem; - color: var(--terminal-green); - line-height: 1; - z-index: var(--z-base); -} - -/* Bottom corners as separate elements with enhanced glow */ -.bottom-left-corner, -.bottom-right-corner { - position: absolute; - bottom: -3px; - font-size: 1.5rem; - color: var(--terminal-green); - text-shadow: var(--glow-green); - line-height: 1; - z-index: var(--z-base); - animation: corner-pulse 4s ease-in-out infinite; -} - -@keyframes corner-pulse { - 0%, 100% { opacity: 0.7; } - 50% { opacity: 1; } -} - -.bottom-left-corner { - left: -3px; -} - -.bottom-right-corner { - right: -3px; -} - -/* Inner section frame - Single border */ -.ascii-frame-inner { - position: relative; - border: 2px solid var(--terminal-green); - padding: 1rem; - background: var(--bg-secondary); - margin: 1rem; -} - -.ascii-frame-inner::before { - content: '┌'; - position: absolute; - top: -2px; - left: -2px; - font-size: 1.2rem; - color: var(--terminal-green); - line-height: 1; -} - -.ascii-frame-inner::after { - content: '┐'; - position: absolute; - top: -2px; - right: -2px; - font-size: 1.2rem; - color: var(--terminal-green); - line-height: 1; -} - -/* Section headers with ASCII decoration */ -.ascii-section-header { - position: relative; - padding: 0.75rem 1.5rem; - background: var(--bg-primary); - border-bottom: 2px solid var(--terminal-green); - font-family: var(--font-mono); - font-weight: bold; - color: var(--terminal-amber); - text-shadow: var(--glow-amber-intense); - text-transform: uppercase; - letter-spacing: 0.1em; - animation: subtle-pulse 3s ease-in-out infinite; -} - -@keyframes subtle-pulse { - 0%, 100% { opacity: 0.75; } - 50% { opacity: 1; } -} - -.ascii-section-header::before { - content: '╠═══ '; - color: var(--terminal-green); - margin-right: 0.5rem; -} - -.ascii-section-header::after { - content: ' ═══╣'; - color: var(--terminal-green); - margin-left: 0.5rem; -} - -/* Subsection headers for nested areas */ -.ascii-subsection-header { - position: relative; - padding: 0.5rem 1rem; - background: var(--bg-secondary); - border-bottom: 1px solid var(--terminal-green); - font-family: var(--font-mono); - font-weight: bold; - color: var(--terminal-green); - text-transform: uppercase; - font-size: 0.9em; -} - -.ascii-subsection-header::before { - content: '├─── '; - color: var(--terminal-green); -} - -.ascii-subsection-header::after { - content: ' ───┤'; - color: var(--terminal-green); -} - -/* Section dividers */ -.ascii-divider { - height: 2px; - background: linear-gradient(90deg, - var(--terminal-green) 0%, - var(--terminal-green) 48%, - transparent 48%, - transparent 52%, - var(--terminal-green) 52%, - var(--terminal-green) 100%); - margin: 1.5rem 0; - position: relative; -} - -.ascii-divider::before { - content: '╞═══'; - position: absolute; - left: -2px; - top: -11px; - color: var(--terminal-green); - font-size: 1.2rem; - text-shadow: var(--glow-green); - letter-spacing: -2px; -} - -.ascii-divider::after { - content: '═══╡'; - position: absolute; - right: -2px; - top: -11px; - color: var(--terminal-green); - font-size: 1.2rem; - text-shadow: var(--glow-green); - letter-spacing: -2px; -} - -/* Content wrapper inside frames */ -.ascii-content { - padding: 1rem; - background: var(--bg-secondary); -} - -/* Priority-based color variants for outer frames */ -.ascii-frame-outer[data-priority="1"], -.ascii-frame-outer[data-priority="1"]::before, -.ascii-frame-outer[data-priority="1"]::after { - border-color: var(--priority-1); - color: var(--priority-1); -} - -.ascii-frame-outer[data-priority="1"] .bottom-left-corner, -.ascii-frame-outer[data-priority="1"] .bottom-right-corner { - color: var(--priority-1); -} - -.ascii-frame-outer[data-priority="2"], -.ascii-frame-outer[data-priority="2"]::before, -.ascii-frame-outer[data-priority="2"]::after { - border-color: var(--priority-2); - color: var(--priority-2); -} - -.ascii-frame-outer[data-priority="2"] .bottom-left-corner, -.ascii-frame-outer[data-priority="2"] .bottom-right-corner { - color: var(--priority-2); -} - -.ascii-frame-outer[data-priority="3"], -.ascii-frame-outer[data-priority="3"]::before, -.ascii-frame-outer[data-priority="3"]::after { - border-color: var(--priority-3); - color: var(--priority-3); -} - -.ascii-frame-outer[data-priority="3"] .bottom-left-corner, -.ascii-frame-outer[data-priority="3"] .bottom-right-corner { - color: var(--priority-3); -} - -.ascii-frame-outer[data-priority="4"], -.ascii-frame-outer[data-priority="4"]::before, -.ascii-frame-outer[data-priority="4"]::after { - border-color: var(--priority-4); - color: var(--priority-4); -} - -.ascii-frame-outer[data-priority="4"] .bottom-left-corner, -.ascii-frame-outer[data-priority="4"] .bottom-right-corner { - color: var(--priority-4); -} - -.ascii-frame-outer[data-priority="5"], -.ascii-frame-outer[data-priority="5"]::before, -.ascii-frame-outer[data-priority="5"]::after { - border-color: var(--priority-5); - color: var(--priority-5); -} - -.ascii-frame-outer[data-priority="5"] .bottom-left-corner, -.ascii-frame-outer[data-priority="5"] .bottom-right-corner { - color: var(--priority-5); -} - -/* ===== TERMINAL PROMPT STYLES ===== */ -.terminal-prompt::before { - content: '> '; - color: var(--terminal-green); - font-weight: bold; -} - -.terminal-command::before { - content: '$ '; - color: var(--terminal-amber); - font-weight: bold; -} - -.terminal-checkbox-checked::before { - content: '[✓] '; - color: var(--terminal-green); -} - -.terminal-checkbox-unchecked::before { - content: '[ ] '; - color: var(--text-secondary); -} - -.terminal-status-active::before { - content: '[●] '; - color: var(--status-open); -} - -.terminal-status-inactive::before { - content: '[○] '; - color: var(--text-secondary); -} - -/* ===== TEXT GLOW EFFECTS ===== */ -.glow-text { - text-shadow: var(--glow-green); -} - -.glow-priority-1 { text-shadow: var(--glow-priority-1); } -.glow-priority-2 { text-shadow: var(--glow-priority-2); } -.glow-priority-3 { text-shadow: var(--glow-priority-3); } -.glow-priority-4 { text-shadow: var(--glow-priority-4); } -.glow-priority-5 { text-shadow: var(--glow-priority-5); } - -.glow-status-open { - text-shadow: 0 0 5px var(--status-open), 0 0 10px var(--status-open); -} - -.glow-status-progress { - text-shadow: 0 0 5px var(--status-in-progress), 0 0 10px var(--status-in-progress); -} - -.glow-status-closed { - text-shadow: 0 0 5px var(--status-closed), 0 0 10px var(--status-closed); -} - -@keyframes pulse-glow { - 0%, 100% { opacity: 0.7; } - 50% { opacity: 1; } -} - -.pulse-glow { - animation: pulse-glow 2s ease-in-out infinite; -} - -/* ===== TYPEWRITER ANIMATION ===== */ -@keyframes typewriter { - from { width: 0; } - to { width: 100%; } -} - -@keyframes blink-caret { - from, to { border-color: transparent; } - 50% { border-color: var(--terminal-green); } -} - -.typewriter { - overflow: hidden; - white-space: nowrap; - border-right: 3px solid var(--terminal-green); - animation: - typewriter 2s steps(40, end), - blink-caret 0.75s step-end infinite; -} - -.typewriter-slow { animation-duration: 4s; } -.typewriter-fast { animation-duration: 1s; } - -.typewriter-multi-line { - overflow: hidden; - animation: reveal-lines 3s steps(20, end) forwards; -} - -@keyframes reveal-lines { - from { max-height: 0; } - to { max-height: 500px; } -} - -/* ===== LOADING STATES ===== */ -.loading-terminal { - display: inline-block; - font-family: var(--font-mono); - color: var(--terminal-green); -} - -.loading-terminal::after { - content: '...'; - animation: loading-dots 1.5s steps(4, end) infinite; -} - -@keyframes loading-dots { - 0%, 20% { content: '.'; } - 40% { content: '..'; } - 60%, 100% { content: '...'; } -} - -.spinner-terminal { - display: inline-block; - font-family: var(--font-mono); - color: var(--terminal-green); -} - -.spinner-terminal::before { content: '['; } -.spinner-terminal::after { - content: ']'; - animation: spinner-rotate 1s linear infinite; -} - -@keyframes spinner-rotate { - 0% { content: '|]'; } - 25% { content: '/]'; } - 50% { content: '─]'; } - 75% { content: '\\]'; } - 100% { content: '|]'; } -} - -/* ===== SKELETON LOADING SCREENS ===== */ -.skeleton { - position: relative; - overflow: hidden; - background: linear-gradient(90deg, - rgba(0, 255, 65, 0.05) 0%, - rgba(0, 255, 65, 0.1) 50%, - rgba(0, 255, 65, 0.05) 100% - ); - background-size: 200% 100%; - animation: skeleton-shimmer 1.5s ease-in-out infinite; -} - -@keyframes skeleton-shimmer { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -/* Skeleton text line */ -.skeleton-text { - height: 1em; - margin: 0.5em 0; - border-radius: 0; - border: 1px solid rgba(0, 255, 65, 0.2); -} - -.skeleton-text.short { width: 40%; } -.skeleton-text.medium { width: 70%; } -.skeleton-text.long { width: 90%; } - -/* Skeleton table row */ -.skeleton-row { - display: flex; - align-items: center; - padding: 12px 8px; - border-bottom: 1px solid rgba(0, 255, 65, 0.1); - gap: 1rem; -} - -.skeleton-row .skeleton-cell { - height: 1.2em; - flex: 1; - border: 1px solid rgba(0, 255, 65, 0.15); -} - -.skeleton-row .skeleton-cell:first-child { flex: 0 0 100px; } -.skeleton-row .skeleton-cell:nth-child(2) { flex: 0 0 60px; } -.skeleton-row .skeleton-cell:nth-child(3) { flex: 3; } - -/* Skeleton stat card */ -.skeleton-stat { - padding: 1rem; - border: 2px solid rgba(0, 255, 65, 0.2); - min-height: 80px; -} - -.skeleton-stat .skeleton-value { - height: 2rem; - width: 60%; - margin-bottom: 0.5rem; -} - -.skeleton-stat .skeleton-label { - height: 1rem; - width: 80%; -} - -/* Skeleton comment */ -.skeleton-comment { - padding: 1rem; - border: 1px solid rgba(0, 255, 65, 0.2); - margin-bottom: 1rem; -} - -.skeleton-comment-header { - display: flex; - gap: 1rem; - margin-bottom: 0.75rem; -} - -.skeleton-avatar { - width: 32px; - height: 32px; - border-radius: 0; - border: 1px solid rgba(0, 255, 65, 0.2); - flex-shrink: 0; -} - -.skeleton-comment-meta { - flex: 1; -} - -/* Terminal-style loading indicator */ -.loading-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 10, 2, 0.9); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - z-index: var(--z-dropdown); - font-family: var(--font-mono); - color: var(--terminal-green); - transition: opacity 0.3s; -} - -.loading-overlay--hiding { opacity: 0; } -.has-overlay { position: relative; } - -/* Visibility utilities — !important required to override HTML inline style="display:none" */ -.is-hidden { display: none !important; } -.bulk-actions-inline.is-visible { display: flex !important; } -.export-dropdown.is-visible { display: inline-block !important; } - -.loading-overlay .loading-text { - margin-top: 1rem; - animation: blink-cursor 1s step-end infinite; -} - -.loading-overlay .loading-spinner { - font-size: 2rem; - animation: terminal-spin 0.5s linear infinite; -} - -@keyframes terminal-spin { - 0% { content: '⠋'; } - 10% { content: '⠙'; } - 20% { content: '⠹'; } - 30% { content: '⠸'; } - 40% { content: '⠼'; } - 50% { content: '⠴'; } - 60% { content: '⠦'; } - 70% { content: '⠧'; } - 80% { content: '⠇'; } - 90% { content: '⠏'; } -} - -.loading-spinner::before { - content: '⠋'; - animation: terminal-spin 0.8s linear infinite; -} - -@keyframes blink-cursor { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} - -/* ===== MESSAGE STYLES ===== */ -.error-message { - padding: 15px 20px; - background: rgba(255, 77, 77, 0.1); - border: 2px solid var(--priority-1); - border-radius: 0; - font-family: var(--font-mono); - color: var(--priority-1); - margin: 20px 0; -} - -.error-message::before { - content: '[!] ERROR: '; - font-weight: bold; -} - -.success-message { - padding: 15px 20px; - background: rgba(40, 167, 69, 0.1); - border: 2px solid var(--status-open); - border-radius: 0; - font-family: var(--font-mono); - color: var(--status-open); - margin: 20px 0; -} - -.success-message::before { - content: '[✓] SUCCESS: '; - font-weight: bold; -} - -.info-message { - padding: 15px 20px; - background: rgba(66, 165, 245, 0.1); - border: 2px solid var(--priority-3); - border-radius: 0; - font-family: var(--font-mono); - color: var(--priority-3); - margin: 20px 0; -} - -.info-message::before { - content: '[i] INFO: '; - font-weight: bold; +/* ── Stats grid spacing ──────────────────────────────────────── */ +.lt-stats-grid { + margin-bottom: 1rem; } -/* ===== EMPTY STATES ===== */ -.empty-state { - text-align: center; - padding: 60px 20px; - font-family: var(--font-mono); - color: var(--terminal-green); +/* Priority row highlights */ +.lt-row-critical td { + background: rgba(255, 77, 77, 0.04); } - -.empty-state::before { - content: '\A╔════════════════════════════╗\A║ ║\A║ NO DATA FOUND ║\A║ ║\A╚════════════════════════════╝\A'; - white-space: pre; - display: block; - font-size: 0.9rem; - line-height: 1.2; - margin-bottom: 20px; - opacity: 0.7; -} - -/* Inside table cells: compact version — no ASCII art, reduced padding */ -td.empty-state { - padding: 2rem; - color: var(--terminal-green-dim); -} - -td.empty-state::before { - display: none; -} - -/* Admin views max-width container */ -.admin-container { - max-width: 1200px; - margin: 2rem auto; -} - -.admin-container-wide { - max-width: 1400px; - margin: 2rem auto; -} - -/* ===== LAYOUT COMPONENTS ===== */ -.dashboard-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: var(--spacing-md); - margin-left: 3.75rem; -} - -.table-controls { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; - padding: 10px; - background: var(--bg-secondary); - border-radius: 0; - box-shadow: var(--shadow); -} - -.ticket-count { - font-weight: 500; - color: var(--text-secondary); -} - -.table-actions { - display: flex; - gap: 15px; - align-items: center; -} - -/* ===== BUTTON STYLES - TERMINAL EDITION ===== */ -/* Base: apply terminal font/reset to all buttons */ -.btn, -.btn-base, -button { - font-family: var(--font-mono); - background: transparent; - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - border-radius: 0; - padding: 10px 20px; - cursor: pointer; - text-transform: uppercase; - font-weight: bold; - position: relative; - display: inline-block; - white-space: nowrap; - will-change: transform; - transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; -} - -/* Bracket notation only for explicitly-styled .btn class buttons */ -.btn::before, -.btn-base::before { - content: '[ '; -} - -.btn::after, -.btn-base::after { - content: ' ]'; -} - -.btn:hover, -.btn-base:hover { - background: rgba(0, 255, 65, 0.15); - color: var(--terminal-amber); - border-color: var(--terminal-amber); - transform: translateY(-1px); -} - -.btn:active, -.btn-base:active { - transform: translateY(0); -} - -/* Terminal prompt for primary action buttons */ -.btn.create-ticket::before, -.btn.primary::before { - content: '> '; - margin-right: 4px; -} - -.btn.create-ticket::after, -.btn.primary::after { - content: ''; -} - -.btn-primary, -.create-ticket { - background: transparent; - color: var(--terminal-amber); - border: 2px solid var(--terminal-amber); - padding: 0.625rem 1.25rem; - border-radius: 0; - cursor: pointer; - font-weight: bold; - font-family: var(--font-mono); - text-transform: uppercase; - will-change: transform; - transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; - margin-right: 3.75rem; -} - -.btn-primary::before, -.create-ticket::before { - content: '[ '; -} - -.btn-primary::after, -.create-ticket::after { - content: ' ]'; -} - -.btn-primary:hover, -.create-ticket:hover { - background: rgba(255, 176, 0, 0.1); - color: var(--terminal-green); - border-color: var(--terminal-green); - transform: translateY(-1px); -} - -/* ===== RESPONSIVE TICKET CARDS - Hidden on desktop (1400px+) ===== */ -@media (min-width: 1400px) { - .ticket-cards { - display: none; - } -} - -.ticket-card-empty { - padding: 3rem; - text-align: center; - color: var(--terminal-green); - font-family: var(--font-mono); -} - -/* ===== TABLE STYLES - TERMINAL EDITION ===== */ -table { - width: 100%; - border-collapse: collapse; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - border-radius: 0; - box-shadow: none; - font-family: var(--font-mono); - position: relative; -} - -/* ASCII corner decorations with glow */ -table::before { - content: '┌'; - position: absolute; - top: -2px; - left: -2px; - font-size: 1.2rem; - color: var(--terminal-green); - text-shadow: var(--glow-green); - line-height: 1; - z-index: var(--z-base); -} - -table::after { - content: '┐'; - position: absolute; - top: -2px; - right: -2px; - font-size: 1.2rem; - color: var(--terminal-green); - text-shadow: var(--glow-green); - line-height: 1; - z-index: var(--z-base); -} - -th, td { - padding: 12px 16px; - text-align: left; - border: 1px solid var(--terminal-green); - color: var(--terminal-green); - font-family: var(--font-mono); - word-wrap: break-word; - overflow-wrap: break-word; -} - -th { - background-color: var(--bg-primary); - font-weight: bold; - text-transform: uppercase; - font-size: 0.85em; - letter-spacing: 0.1em; - position: relative; - cursor: pointer; - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - transition: background-color 0.2s ease; -} - -th:hover { - background-color: rgba(255, 176, 0, 0.05); -} - -/* Add terminal prompt to headers */ -th::before { - content: '> '; - color: var(--terminal-green); - margin-right: 4px; -} - -/* Remove prompt from checkbox header column */ -th:has(input[type="checkbox"])::before { - content: none; -} - -tr:hover { - background-color: rgba(0, 255, 65, 0.08); +.lt-row-warning td { + background: rgba(255, 167, 38, 0.04); } -/* Keyboard navigation selected row */ -tbody tr.keyboard-selected { - background-color: rgba(0, 255, 65, 0.15) !important; - box-shadow: inset 0 0 30px rgba(0, 255, 65, 0.2), 0 0 10px rgba(0, 255, 65, 0.3); - outline: 2px solid var(--terminal-green); - outline-offset: -2px; +/* Stat cards — clickable filter shortcuts */ +.lt-stat-card[role="button"] { + cursor: pointer; + transition: border-color 0.15s ease, background 0.15s ease; } - -tbody tr.keyboard-selected td { - color: var(--terminal-green); - text-shadow: 0 0 5px rgba(0, 255, 65, 0.5); -} - -/* Priority indicator border - match header and body first column */ -thead tr th:first-child { - border-left: 6px solid var(--terminal-green); -} - -tbody tr td:first-child { - border-left: 6px solid; -} - -/* Priority row colors */ -tbody tr.priority-1 td:first-child { border-left-color: var(--priority-1); } -tbody tr.priority-2 td:first-child { border-left-color: var(--priority-2); } -tbody tr.priority-3 td:first-child { border-left-color: var(--priority-3); } -tbody tr.priority-4 td:first-child { border-left-color: var(--priority-4); } -tbody tr.priority-5 td:first-child { border-left-color: var(--priority-5); } - -/* Priority number styling - TERMINAL STYLE */ -td:nth-child(2) { - text-align: center; -} - -td:nth-child(2) span { - font-weight: bold; - font-family: var(--font-mono); - padding: 4px 8px; - border-radius: 0; - display: inline-block; - background: transparent; -} - -/* Add brackets to priority badges */ -td:nth-child(2) span::before { - content: '['; - color: var(--terminal-green); - margin-right: 2px; -} - -td:nth-child(2) span::after { - content: ']'; - color: var(--terminal-green); - margin-left: 2px; -} - -.priority-1 td:nth-child(2) { - color: var(--priority-1); - text-shadow: var(--glow-priority-1); - font-weight: bold; -} - -.priority-1 td:nth-child(2)::after { - content: ' ▲▲'; - font-size: 0.7em; -} - -.priority-2 td:nth-child(2) { - color: var(--priority-2); - text-shadow: var(--glow-priority-2); - font-weight: bold; -} - -.priority-2 td:nth-child(2)::after { - content: ' ▲'; - font-size: 0.7em; -} - -.priority-3 td:nth-child(2) { - color: var(--priority-3); - text-shadow: var(--glow-priority-3); -} - -.priority-3 td:nth-child(2)::after { - content: ' ●'; - font-size: 0.7em; -} - -.priority-4 td:nth-child(2) { - color: var(--priority-4); - text-shadow: var(--glow-priority-4); -} - -.priority-4 td:nth-child(2)::after { - content: ' ▼'; - font-size: 0.7em; -} - -.priority-5 td:nth-child(2) { - color: var(--priority-5); - text-shadow: var(--glow-priority-5); -} - -.priority-5 td:nth-child(2)::after { - content: ' ▼▼'; - font-size: 0.7em; -} - -/* ===== STATUS STYLES - TERMINAL EDITION ===== */ -.status-Open { - background-color: transparent !important; - color: var(--status-open) !important; - padding: 4px 12px; - border-radius: 0 !important; - border: 2px solid var(--status-open) !important; - font-size: 0.875rem; - font-weight: 500; - font-family: var(--font-mono); - text-shadow: 0 0 5px var(--status-open), 0 0 10px var(--status-open); -} - -.status-Open::before { - content: '[●'; - margin-right: 4px; -} - -.status-Open::after { - content: ']'; - margin-left: 4px; -} - -.status-In-Progress { - background-color: transparent !important; - color: var(--status-in-progress) !important; - padding: 4px 12px; - border-radius: 0 !important; - border: 2px solid var(--status-in-progress) !important; - font-size: 0.875rem; - font-weight: 500; - min-width: 140px; - white-space: nowrap; - display: inline-block; - font-family: var(--font-mono); - text-shadow: 0 0 5px var(--status-in-progress), 0 0 10px var(--status-in-progress); -} - -.status-In-Progress::before { - content: '[◐'; - margin-right: 4px; - animation: spin-status 2s linear infinite; -} - -@keyframes spin-status { - 0% { content: '[◐'; } - 25% { content: '[◓'; } - 50% { content: '[◑'; } - 75% { content: '[◒'; } - 100% { content: '[◐'; } -} - -.status-In-Progress::after { - content: ']'; - margin-left: 4px; -} - -.status-Closed { - background-color: transparent !important; - color: var(--status-closed) !important; - padding: 4px 12px; - border-radius: 0 !important; - border: 2px solid var(--status-closed) !important; - font-size: 0.875rem; - font-weight: 500; - font-family: var(--font-mono); - text-shadow: 0 0 5px var(--status-closed), 0 0 10px var(--status-closed); -} - -.status-Closed::before { - content: '[✓'; - margin-right: 4px; -} - -.status-Closed::after { - content: ']'; - margin-left: 4px; -} - -.status-Pending { - background-color: transparent !important; - color: var(--status-pending) !important; - padding: 4px 12px; - border-radius: 0 !important; - border: 2px solid var(--status-pending) !important; - font-size: 0.875rem; - font-weight: 500; - font-family: var(--font-mono); - text-shadow: 0 0 5px var(--status-pending), 0 0 10px var(--status-pending); -} - -.status-Pending::before { - content: '[⏸'; - margin-right: 4px; -} - -.status-Pending::after { - content: ']'; - margin-left: 4px; +.lt-stat-card[role="button"]:hover, +.lt-stat-card[role="button"]:focus-visible { + border-color: var(--lt-text-primary, #00ff41); + background: rgba(0, 255, 65, 0.06); + outline: none; } +.lt-stat-card.stat-critical .lt-stat-icon { color: var(--lt-danger, #ff4d4d); } +.lt-stat-card.stat-open .lt-stat-icon { color: var(--lt-text-primary, #00ff41); } +.lt-stat-card.stat-unassigned .lt-stat-icon { color: var(--lt-amber, #ffb000); } +.lt-stat-card.stat-today .lt-stat-icon { color: var(--lt-cyan, #00ffff); } -/* ===== ACTIVE FILTERS BAR ===== */ +/* ── Active filters bar ──────────────────────────────────────── */ .active-filters-bar { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 0.5rem; - padding: 0.75rem 1rem; - margin-bottom: 1rem; - background: rgba(0, 255, 65, 0.05); - border: 1px solid var(--terminal-green); - border-left: 4px solid var(--terminal-amber); -} - -.active-filters-label { - font-family: var(--font-mono); - font-size: 0.85rem; - color: var(--terminal-amber); - font-weight: 600; - margin-right: 0.5rem; -} - -.active-filters-list { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - flex: 1; + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + align-items: center; + padding: 0.5rem 0; + margin-bottom: 0.5rem; } .filter-badge { - display: inline-flex; - align-items: center; - gap: 0.4rem; - padding: 0.3rem 0.6rem; - background: rgba(0, 255, 65, 0.1); - border: 1px solid var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.8rem; - color: var(--terminal-green); - animation: filter-appear 0.3s ease-out; -} - -@keyframes filter-appear { - from { - opacity: 0; - transform: scale(0.9); - } - to { - opacity: 1; - transform: scale(1); - } -} - -.filter-badge[data-filter-type="status"] { - border-color: var(--terminal-cyan); - color: var(--terminal-cyan); -} - -.filter-badge[data-filter-type="priority"] { - border-color: var(--terminal-amber); - color: var(--terminal-amber); -} - -.filter-badge[data-filter-type="search"] { - border-color: var(--terminal-magenta, #ff79c6); - color: var(--terminal-magenta, #ff79c6); + display: inline-flex; + align-items: center; + gap: 0.3rem; + padding: 0.15rem 0.5rem; + border: 1px solid var(--lt-border, #00ff41); + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--lt-text-primary, #00ff41); + background: transparent; } .filter-remove { - background: none; - border: none; - color: inherit; - font-size: 1.1rem; - line-height: 1; - cursor: pointer; - padding: 0 0.2rem; - opacity: 0.7; - transition: opacity 0.2s, transform 0.2s; + background: none; + border: none; + cursor: pointer; + color: inherit; + opacity: 0.6; + font-size: 0.75rem; + padding: 0 0.1rem; + line-height: 1; } +.filter-remove:hover { opacity: 1; } -.filter-remove:hover { - opacity: 1; - transform: scale(1.2); -} - -.btn-sm { - padding: 0.3rem 0.6rem; - font-size: 0.8rem; -} - -/* ===== SEARCH AND FILTER STYLES - TERMINAL EDITION ===== */ -.search-box, -input[type="text"], -input[type="search"], -textarea, -select { - font-family: var(--font-mono); - background: var(--bg-primary); - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - border-radius: 0; - padding: 8px 12px; - transition: border-color 0.2s ease, background-color 0.2s ease; - box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); -} - -.search-box:focus, -input[type="text"]:focus, -input[type="search"]:focus, -textarea:focus, -select:focus { - outline: none; - border-color: var(--terminal-amber); - box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5); - background: rgba(0, 255, 65, 0.05); -} - -.search-box { - margin-left: 1.25rem; - width: 40%; -} - -input:focus, -textarea:focus, -select:focus, -.search-box:focus { - outline: none; - border-color: var(--terminal-amber); - box-shadow: 0 0 10px rgba(255, 176, 0, 0.3); - text-shadow: var(--glow-green); -} - -.search-container { - margin: 20px 0; - padding: 0 20px; -} - -.search-form { - display: flex; - gap: 10px; - align-items: center; - flex-wrap: wrap; -} - -/* Terminal prompt before search box */ -.search-form::before { - content: '$ SEARCH'; - font-family: var(--font-mono); - color: var(--terminal-amber); - font-weight: bold; - text-shadow: var(--glow-amber); -} - -/* Checkbox styling */ -input[type="checkbox"] { - appearance: none; - width: 18px; - height: 18px; - border: 2px solid var(--terminal-green); - background: var(--bg-primary); - position: relative; - cursor: pointer; - border-radius: 0; -} - -input[type="checkbox"]:checked::before { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: var(--terminal-green); - font-size: 14px; - font-weight: bold; -} - -input[type="checkbox"]:checked { - background: rgba(0, 255, 65, 0.1); -} - -.search-box:focus { - outline: none; - border-color: var(--terminal-green); -} - -.search-btn { - background: transparent; - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; -} - -.search-btn:hover { - background: rgba(0, 255, 65, 0.15); - color: var(--terminal-amber); - border-color: var(--terminal-amber); -} - -.clear-search-btn { - padding: 6px 10px; - color: var(--text-muted); - text-decoration: none; - font-family: var(--font-mono); - font-size: 1rem; - transition: color 0.15s ease; - line-height: 1; -} - -.clear-search-btn:hover { - color: var(--terminal-red); - text-decoration: none; -} - -/* Show search results info */ -.search-results-info { - margin: 10px 0; - padding: 10px; - background-color: rgba(0, 255, 65, 0.05); - border-left: 4px solid var(--terminal-green); - border-radius: 0; -} - -/* Status Filter Dropdown */ -.status-filter-container { - position: relative; - display: inline-block; - margin-right: 15px; -} - -.status-dropdown { - position: relative; - display: inline-block; -} - -.dropdown-header { - padding: 8px 15px; - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 0; - cursor: pointer; - min-width: 120px; -} - -.dropdown-content { - display: none; - position: absolute; - top: 100%; - left: 0; - background: var(--bg-secondary); - min-width: 160px; - box-shadow: var(--shadow); - border-radius: 0; - padding: 10px; - z-index: var(--z-dropdown); - border: 1px solid var(--border-color); -} - -.status-dropdown.active .dropdown-content { - display: block; -} - -.dropdown-content label { - display: block; - padding: 8px; - cursor: pointer; - transition: background 0.2s; -} - -.dropdown-content label:hover { - background: var(--hover-bg); -} - -.dropdown-content .save-filter { - margin-top: 10px; - width: 100%; - padding: 8px; - background: var(--terminal-green); - color: var(--bg-primary); - border: none; - border-radius: 0; - cursor: pointer; -} - -/* ===== COLLAPSIBLE ASCII BANNER ===== */ -.ascii-banner { - margin: 0; - font-family: var(--font-mono); - color: var(--terminal-green); - line-height: 1.2; - white-space: pre; - overflow: visible; - text-align: center; -} - -.ascii-banner--glow { text-shadow: var(--glow-green); } -.ascii-banner-cursor { margin-left: 5px; animation: blink-cursor 0.75s step-end infinite; } - -.ascii-banner-wrapper { - max-width: 100%; - margin: 0 1rem 1rem 1rem; - border: 2px solid var(--terminal-green); - background: var(--bg-secondary); -} - -.ascii-banner-wrapper.collapsed .banner-content { - display: none; -} - -.banner-toggle { - width: 100%; - background: var(--bg-secondary); - border: none; - color: var(--terminal-amber); - padding: 0.5rem 1rem; - cursor: pointer; - font-family: var(--font-mono); - text-align: left; - font-size: 0.9rem; - text-shadow: var(--glow-amber); - transition: background-color 0.2s ease; -} - -.banner-toggle:hover { - background: var(--hover-bg); -} - -.toggle-icon { - display: inline-block; - width: 1rem; - text-align: center; - color: var(--terminal-green); - transition: transform 0.3s ease; -} - -.banner-content { - padding: 1rem; - text-align: center; -} - -/* ===== CONDENSED TOOLBAR ===== */ -.dashboard-toolbar { - display: flex; - flex-wrap: wrap; - gap: 1rem; - align-items: center; - justify-content: space-between; - padding: 1rem; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - margin-bottom: 1rem; - box-shadow: var(--glow-green); -} - -.toolbar-left { - display: flex; - align-items: center; - gap: 1rem; - flex: 1; - min-width: 300px; -} - -.dashboard-title { - font-family: var(--font-mono); - color: var(--terminal-green); - text-shadow: var(--glow-green); - font-size: 1.5rem; - margin: 0; - white-space: nowrap; -} - -.toolbar-search { - display: flex; - gap: 0.5rem; - flex: 1; -} - -.toolbar-center { - display: flex; - align-items: center; - gap: 1rem; -} - -.toolbar-right { - display: flex; - align-items: center; -} - -.ticket-count { - font-family: var(--font-mono); - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - font-size: 0.9rem; - white-space: nowrap; -} - -.clear-search-btn { - background: var(--bg-primary); - color: var(--priority-1); - border: 2px solid var(--priority-1); - padding: 0.5rem 0.75rem; - font-family: var(--font-mono); - text-decoration: none; - cursor: pointer; - transition: background 0.2s ease, color 0.2s ease; -} - -.clear-search-btn:hover { - background: var(--priority-1); - color: var(--bg-primary); -} - -.search-results-info { - background: var(--bg-secondary); - border: 2px solid var(--terminal-amber); - padding: 0.75rem 1rem; - margin-bottom: 1rem; - font-family: var(--font-mono); - color: var(--terminal-amber); - text-shadow: var(--glow-amber); -} - -/* Inline Bulk Actions */ +/* ── Bulk actions inline bar ─────────────────────────────────── */ .bulk-actions-inline { - padding: 0.75rem 1rem; - background: var(--bg-primary); - border: 2px solid var(--terminal-amber); - border-radius: 0; - margin-bottom: 1rem; - display: flex; - gap: 1rem; - align-items: center; - font-family: var(--font-mono); - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - box-shadow: inset 0 0 20px rgba(255, 176, 0, 0.2); -} - -.bulk-actions-inline .btn { - padding: 0.4rem 0.8rem; - font-size: 0.85rem; -} - -/* Mobile: Stack toolbar items */ -@media (max-width: 1024px) { - .dashboard-toolbar { - flex-direction: column; - align-items: stretch; - } - - .toolbar-left, - .toolbar-center, - .toolbar-right { - width: 100%; - justify-content: space-between; - } - - .toolbar-search { - min-width: 100%; - } - - .dashboard-title { - font-size: 1.2rem; - } -} - -@media (max-width: 768px) { - .toolbar-left { - flex-direction: column; - align-items: stretch; - } - - .dashboard-title { - text-align: center; - } -} - -/* ===== DASHBOARD SIDEBAR LAYOUT ===== */ -.dashboard-layout { - display: flex; - gap: 1.5rem; - max-width: 100%; - margin: 0 auto; - padding: 0 1rem; -} - -.dashboard-sidebar { - width: 250px; - flex-shrink: 0; - position: sticky; - top: 1rem; - max-height: calc(100vh - 2rem); - overflow-y: auto; -} - -.dashboard-sidebar .ascii-frame-inner { - background: var(--bg-secondary); - padding: 1rem; - border: 2px solid var(--terminal-green); - box-shadow: var(--glow-green); - position: relative; - overflow: hidden; -} - -.dashboard-sidebar .ascii-frame-inner::before { - content: '│'; - position: absolute; - left: 5px; - top: 0; - height: 100%; - color: var(--terminal-green); - opacity: 0.3; - font-size: 1.5rem; - line-height: 1.2; - pointer-events: none; -} - -.dashboard-sidebar .ascii-subsection-header { - color: var(--terminal-amber); - text-shadow: var(--glow-amber-intense); - font-family: var(--font-mono); - font-size: 0.95rem; - text-transform: uppercase; - margin-bottom: 1rem; - padding-bottom: 0.5rem; - border-bottom: 2px solid var(--terminal-green); - position: relative; - white-space: nowrap; - overflow: hidden; -} - -.dashboard-sidebar .ascii-subsection-header::before { - content: '╔══ '; - color: var(--terminal-green); - text-shadow: var(--glow-green); -} - -.dashboard-sidebar .ascii-subsection-header::after { - content: ' ══╗'; - color: var(--terminal-green); - text-shadow: var(--glow-green); -} - -.filter-group { - margin-bottom: 1.5rem; -} - -.filter-group h4 { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - margin: 0 0 0.5rem 0; - font-size: 0.9rem; - text-transform: uppercase; - font-family: var(--font-mono); -} - -.filter-group label { - display: block; - margin: 0.4rem 0; - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - cursor: pointer; - font-size: 0.85rem; - font-family: var(--font-mono); - transition: color 0.2s ease, padding-left 0.2s ease; -} - -.filter-group label:hover { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - padding-left: 4px; -} - -.filter-group input[type="checkbox"] { - margin-right: 0.5rem; - cursor: pointer; - accent-color: var(--terminal-green); - width: 16px; - height: 16px; - border: 2px solid var(--terminal-green); - transition: opacity 0.15s ease; -} - -.filter-group input[type="checkbox"]:checked { - box-shadow: var(--glow-green); -} - -.filter-group input[type="checkbox"]:hover { - filter: brightness(1.3); -} - -.dashboard-sidebar .btn { - width: 100%; - margin-top: 0.5rem; - padding: 0.5rem; - background: var(--bg-primary); - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - font-family: var(--font-mono); - cursor: pointer; - transition: background-color 0.2s ease, color 0.2s ease; -} - -.dashboard-sidebar .btn:hover { - background: var(--terminal-green); - color: var(--bg-primary); - box-shadow: var(--glow-green); -} - -.dashboard-sidebar .btn-secondary { - background: transparent; - color: var(--terminal-amber); - border-color: var(--terminal-amber); -} - -.dashboard-sidebar .btn-secondary:hover { - background: var(--terminal-amber); - color: var(--bg-primary); - box-shadow: var(--glow-amber); -} - -/* Collapsible Sidebar */ -.dashboard-sidebar { - position: relative; - transition: width 0.3s ease, min-width 0.3s ease; - overflow: hidden; -} - -.sidebar-content { - transition: opacity 0.2s ease; - width: 250px; -} - -/* Collapse button inside sidebar */ -.sidebar-collapse-btn { - display: block; - width: 100%; - padding: 0.5rem 1rem; - background: var(--bg-secondary); - border: none; - border-bottom: 2px solid var(--terminal-green); - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.85rem; - cursor: pointer; - text-align: left; - transition: background 0.2s ease; -} - -.sidebar-collapse-btn:hover { - background: rgba(0, 255, 65, 0.15); - color: var(--terminal-amber); -} - -/* Expand button shown when collapsed */ -.sidebar-expand-btn { - display: none; - padding: 0.5rem 1rem; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.85rem; - cursor: pointer; - white-space: nowrap; - transition: background 0.2s ease; - margin-right: 1rem; - flex-shrink: 0; -} - -.sidebar-expand-btn:hover { - background: rgba(0, 255, 65, 0.15); - color: var(--terminal-amber); - border-color: var(--terminal-amber); -} - -/* Collapsed state */ -.dashboard-sidebar.collapsed { - width: 0; - min-width: 0; - padding: 0; - margin: 0; - border: none; -} - -.dashboard-sidebar.collapsed .sidebar-content, -.dashboard-sidebar.collapsed .sidebar-collapse-btn { - opacity: 0; - pointer-events: none; - display: none; -} - -/* Remove gap when sidebar is collapsed */ -.dashboard-layout.sidebar-collapsed { - gap: 0; -} - -.dashboard-layout.sidebar-collapsed .sidebar-expand-btn { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - min-width: 40px; - height: auto; - padding: 0.5rem; - writing-mode: vertical-rl; - text-orientation: mixed; - flex-shrink: 0; -} - -/* Hide collapse controls on mobile */ -@media (max-width: 768px) { - .sidebar-collapse-btn, - .sidebar-expand-btn { - display: none !important; - } -} - -.dashboard-main { - flex: 1; - min-width: 0; - max-width: 100%; - overflow-x: hidden; -} - -/* Ensure frame doesn't overflow — scrolling handled by .table-wrapper */ -.dashboard-main .ascii-frame-outer { - max-width: 100%; - overflow-x: visible; -} - -.dashboard-main table { - width: 100%; - min-width: 900px; /* trigger scroll before columns collapse */ - table-layout: auto; -} - -/* Mobile: Stack sidebar above content */ -@media (max-width: 768px) { - .dashboard-layout { - flex-direction: column; - padding: 0 0.5rem; - } - - .dashboard-sidebar { - width: 100%; - position: static; - max-height: none; - margin-bottom: 1rem; - } -} - -/* ===== BOOT SEQUENCE ===== */ -.boot-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--bg-primary); - z-index: var(--z-modal-backdrop); - display: flex; - align-items: center; - justify-content: center; - transition: opacity 0.5s; -} -.boot-overlay--fade-out { opacity: 0; } - -#boot-text { - font-family: var(--font-mono); - color: var(--terminal-green); - text-shadow: var(--glow-green); - font-size: 0.95rem; - line-height: 1.6; - white-space: pre; - padding: 2rem; -} - -/* ===== ASCII LOADING SPINNER ===== */ -.loading-spinner { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: var(--z-modal); - background: var(--bg-primary); - border: 3px solid var(--terminal-green); - padding: 2rem; - box-shadow: 0 0 30px rgba(0, 255, 65, 0.5); - font-family: var(--font-mono); - color: var(--terminal-green); - font-size: 1.5rem; - text-shadow: var(--glow-green); - display: none; -} - -.loading-spinner.active { - display: block; -} - -.spinner-text { - text-align: center; -} - -.spinner-frames { - animation: spin-frames 0.8s steps(8) infinite; -} - -@keyframes spin-frames { - 0% { content: '|'; } - 12.5% { content: '/'; } - 25% { content: '—'; } - 37.5% { content: '\\'; } - 50% { content: '|'; } - 62.5% { content: '/'; } - 75% { content: '—'; } - 87.5% { content: '\\'; } -} - -.spinner-frames::before { - content: '|'; - display: inline-block; - animation: spin-frames 0.8s steps(8) infinite; -} - -/* ===== UTILITY STYLES ===== */ -.ticket-link { - font-family: 'Courier New', monospace; - font-weight: bold; - color: var(--text-primary) !important; - text-decoration: none; - background: var(--hover-bg); - padding: 4px 8px; - border-radius: 0; - display: inline-block; - border: 1px solid transparent; - transition: background-color 0.2s ease, border-color 0.2s ease; - text-shadow: var(--glow-green); -} - -.ticket-link::before { - content: '#'; - color: var(--terminal-amber); - margin-right: 2px; -} - -.ticket-link:hover { - background: rgba(0, 255, 65, 0.2); - border-color: var(--terminal-green); -} - -/* ===== PAGINATION STYLES ===== */ -.pagination { - display: flex; - gap: 0.5rem; - align-items: center; - justify-content: center; - margin-top: 1rem; -} - -.pagination button { - padding: 0.5rem 0.75rem; - border: 2px solid var(--terminal-green); - background: var(--bg-secondary); - color: var(--terminal-green); - border-radius: 0; - cursor: pointer; - transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; - font-family: var(--font-mono); -} - -.pagination button:hover { - background: rgba(0, 255, 65, 0.15); -} - -.pagination button.active { - background: var(--terminal-green); - color: var(--bg-primary); - border-color: var(--terminal-green); - box-shadow: var(--glow-green-intense); - font-weight: bold; -} - -/* ===== SORTING STYLES ===== */ -th::after { - content: ''; - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - opacity: 0.5; -} - -th.sort-asc::after { - border-bottom: 7px solid var(--text-primary); - opacity: 1; -} - -th.sort-desc::after { - border-top: 7px solid var(--text-primary); - opacity: 1; -} - -/* Dark mode bulk actions */ -body.dark-mode .bulk-actions-toolbar { - --toolbar-bg: var(--bg-tertiary); - --toolbar-border: var(--terminal-amber); - --text-primary: var(--terminal-green); - background: var(--bg-tertiary) !important; -} - -body.dark-mode .bulk-actions-info { - color: var(--terminal-amber); - font-weight: bold; -} - -body.dark-mode .btn-bulk { - --btn-bulk-bg: var(--terminal-green); - --btn-bulk-hover: var(--text-secondary); -} - -body.dark-mode .btn-secondary { - --btn-secondary-bg: var(--bg-tertiary); - --btn-secondary-hover: var(--bg-secondary); -} - -/* Modal styles */ -.modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - z-index: var(--z-modal); -} - -.modal-content { - background: var(--bg-primary, white); - padding: 2rem; - border-radius: 0; - min-width: 300px; - max-width: 500px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} - -.modal-content h3 { - margin-top: 0; - margin-bottom: 1rem; - color: var(--text-primary, #333); -} - -.modal-body { - margin-bottom: 1.5rem; -} - -.modal-body label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: var(--text-primary, #333); -} - -.modal-body select { - width: 100%; - padding: 0.5rem; - border: 1px solid var(--border-color, #ddd); - border-radius: 0; - background: var(--bg-secondary, #f8f9fa); - color: var(--text-primary, #333); -} - -.modal-footer { - display: flex; - gap: 0.5rem; - justify-content: flex-end; -} - -/* Dark mode modal — terminal CSS variables already apply; no overrides needed */ - -/* Checkbox styling in table */ -.ticket-checkbox { - cursor: pointer; - width: 18px; - height: 18px; -} - -#selectAllCheckbox { - cursor: pointer; - width: 18px; - height: 18px; -} - -/* Checkbox cell - click anywhere to toggle */ -.checkbox-cell { - cursor: pointer; - text-align: center; - transition: background-color 0.2s ease; -} - -.checkbox-cell:hover { - background-color: rgba(0, 255, 65, 0.15); -} - -/* Responsive bulk actions */ -@media (max-width: 768px) { - .bulk-actions-toolbar { - flex-direction: column; - align-items: stretch; - } - - .bulk-actions-info { - text-align: center; - margin-bottom: 0.5rem; - } - - .bulk-actions-buttons { - justify-content: center; - } -} - -/* Comprehensive Dark Mode Fix - Dashboard (terminal palette) */ -body.dark-mode { - background: var(--bg-secondary) !important; - color: var(--text-primary) !important; -} - -body.dark-mode .dashboard-container, -body.dark-mode .dashboard-content { - background: var(--bg-secondary) !important; - color: var(--text-primary) !important; -} - -/* Ensure table has dark background */ -body.dark-mode table { - background: var(--bg-tertiary) !important; -} - -body.dark-mode table thead { - background: var(--bg-secondary) !important; -} - -body.dark-mode table tbody tr { - background: var(--bg-tertiary) !important; -} - -body.dark-mode table tbody tr:hover { - background: var(--hover-bg) !important; -} - -body.dark-mode table td, -body.dark-mode table th { - color: var(--text-primary) !important; - border-color: var(--border-color) !important; -} - -/* Fix search box */ -body.dark-mode .search-box, -body.dark-mode input[type="search"], -body.dark-mode input[type="text"] { - background: var(--bg-tertiary) !important; - color: var(--text-primary) !important; - border-color: var(--border-color) !important; -} - -/* Fix any white backgrounds in modals */ -body.dark-mode .modal-content { - background: var(--bg-tertiary) !important; - color: var(--text-primary) !important; -} - -/* Fix dropdown menus */ -body.dark-mode select option { - background: var(--bg-tertiary) !important; - color: var(--text-primary) !important; -} - -/* ===== RESPONSIVE DESIGN - TERMINAL EDITION ===== */ - -/* Tablet and smaller */ -@media (max-width: 1024px) { - /* Smaller ASCII banner */ - .ascii-banner { - font-size: 0.6rem !important; - } - - /* Reduce table padding */ - th, td { - padding: 8px 12px; - } - - /* Stack bulk actions */ - .bulk-actions-buttons { - flex-direction: column; - } - - /* Simplify ASCII corners - use single-line chars */ - .ascii-frame-outer::before { - content: '┌'; - font-size: 1.2rem; - } - - .ascii-frame-outer::after { - content: '┐'; - font-size: 1.2rem; - } - - .bottom-left-corner { - content: '└'; - font-size: 1.2rem; - } - - .bottom-right-corner { - content: '┘'; - font-size: 1.2rem; - } - - /* Simplify section headers */ - .ascii-section-header::before { - content: '├─ '; - } - - .ascii-section-header::after { - content: ' ─┤'; - } - - /* Simplify dividers */ - .ascii-divider::before { - content: '├'; - } - - .ascii-divider::after { - content: '┤'; - } -} - -/* Mobile */ -@media (max-width: 768px) { - /* Use compact ASCII banner */ - .ascii-banner { - font-size: 0.5rem !important; - } - - /* Remove all ASCII corners for mobile */ - .ascii-frame-outer::before, - .ascii-frame-outer::after, - .bottom-left-corner, - .bottom-right-corner { - display: none !important; - } - - /* Simplify inner frames - remove corners */ - .ascii-frame-inner::before, - .ascii-frame-inner::after { - display: none !important; - } - - /* Keep section headers but simplify */ - .ascii-section-header::before { - content: '> '; - } - - .ascii-section-header::after { - content: ''; - } - - .ascii-section-header { - font-size: 0.9rem; - padding: 0.5rem 1rem; - } - - /* Simplify subsection headers */ - .ascii-subsection-header::before { - content: '• '; - } - - .ascii-subsection-header::after { - content: ''; - } - - /* Remove dividers on mobile */ - .ascii-divider { - display: none; - } - - /* Reduce padding in ascii-content */ - .ascii-content { - padding: 0.5rem; - } - - .ascii-frame-inner { - padding: 0.5rem; - margin: 0.5rem; - border-width: 1px; - } - - /* Hide decorative ASCII corners on small screens (legacy) */ - table::before, - table::after, - .ticket-container::before, - .ticket-container::after, - .settings-modal::before, - .settings-modal::after { - display: none; - } - - /* Simplify borders */ - .ticket-header::before { - display: none; - } - - /* Full-width hamburger menu */ - .hamburger-content { - width: 100%; - left: -100%; - } - - .hamburger-content.open { - left: 0; - } - - /* Reduce padding everywhere */ - .ascii-box, - .terminal-form-group, - .comment, - .timeline-content { - padding: 10px; - } - - /* Smaller glow effects */ - .glow-text, - [class*="glow-"] { - text-shadow: 0 0 3px currentColor; - } - - /* Stack buttons vertically */ - .btn, - button { - width: 100%; - margin: 5px 0; - } - - /* Reduce font size slightly */ - body { - font-size: 14px; - } - - /* Smaller table text */ - th, td { - font-size: 0.85rem; - padding: 6px 8px; - } - - /* Hide some table columns on mobile */ - th:nth-child(n+6), - td:nth-child(n+6) { - display: none; - } -} - -/* Very small mobile */ -@media (max-width: 480px) { - /* Minimal ASCII banner */ - .ascii-banner { - font-size: 0.4rem !important; - } - - /* Remove purely decorative frame corner glyphs on tiny screens */ - .ascii-frame-outer .bottom-left-corner, - .ascii-frame-outer .bottom-right-corner { - display: none; - } - .lt-frame::before, .lt-frame::after, - .lt-frame-inner::before, .lt-frame-inner::after, - .lt-card::before, .lt-card::after, - .lt-stat-card::before, .lt-stat-card::after, - .lt-divider::before, .lt-divider::after, - .lt-section-header::before, .lt-section-header::after, - .lt-subsection-header::before, .lt-subsection-header::after, - .lt-sidebar-header::before, - .lt-modal::before, .lt-modal::after, - .lt-modal-title::before, - .lt-timeline::before, - h1::before, h3::before, h3::after, - .lt-page-title::before, - .lt-brand-title::before { - content: none !important; - } - - /* Collapse nested frames - minimal borders */ - .ascii-frame-outer, - .ascii-frame-inner { - border-width: 1px; - padding: 0.25rem; - margin: 0.25rem; - } - - /* Section headers without decorations */ - .ascii-section-header, - .ascii-subsection-header { - font-size: 0.85rem; - padding: 0.4rem 0.5rem; - text-transform: none; - letter-spacing: normal; - } - - /* Minimal content padding */ - .ascii-content { - padding: 0.25rem; - } - - /* Simplify modals */ - .settings-modal, - .modal-content { - width: 95%; - max-width: 95%; - } - - /* Reduce ticket container size */ - .ticket-container { - width: 95%; - min-width: unset; - margin: 20px auto; - } - - /* Stack tabs vertically */ - .ticket-tabs { - flex-direction: column; - } - - .tab-btn { - width: 100%; - margin-bottom: 5px; - } -} - -/* Print styles - terminal aesthetic */ -@media print { - body { - background: white; - color: black; - } - - .ascii-banner, - .theme-toggle, - .hamburger-menu, - .bulk-actions-toolbar { - display: none; - } - - table, - .ticket-container { - border-color: black; - } - - /* Remove glows for print */ - * { - text-shadow: none !important; - box-shadow: none !important; - } -} - -/* ===== TERMINAL TOAST NOTIFICATIONS ===== */ -.terminal-toast { - position: fixed; - top: 20px; - right: 20px; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - padding: 1rem 1.5rem; - font-family: var(--font-mono); - font-size: 0.9rem; - color: var(--terminal-green); - text-shadow: var(--glow-green); - box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); - z-index: var(--z-toast); - opacity: 0; - transform: translateX(400px); - transition: opacity 0.3s ease, transform 0.3s ease; - max-width: 400px; - word-wrap: break-word; -} - -.terminal-toast.show { - opacity: 1; - transform: translateX(0); -} - -.toast-icon { - display: inline-block; - margin-right: 0.5rem; - font-weight: bold; -} - -.toast-success { - border-color: var(--status-open); - color: var(--status-open); - text-shadow: 0 0 5px var(--status-open); -} - -.toast-error { - border-color: var(--status-closed); - color: var(--status-closed); - text-shadow: 0 0 5px var(--status-closed); -} - -.toast-warning { - border-color: var(--status-in-progress); - color: var(--status-in-progress); - text-shadow: 0 0 5px var(--status-in-progress); -} - -.toast-info { - border-color: var(--terminal-cyan); - color: var(--terminal-cyan); - text-shadow: 0 0 5px var(--terminal-cyan); -} - -/* ======================================== - SETTINGS MODAL STYLES - ======================================== */ - -/* Settings Icon */ -.settings-icon { - background: transparent; - border: 2px solid var(--terminal-green); - color: var(--terminal-green); - font-size: 1.2rem; - padding: 0.25rem 0.5rem; - cursor: pointer; - font-family: var(--font-mono); - transition: background-color 0.2s ease, color 0.2s ease; - border-radius: 0; - margin-left: 1rem; -} - -.settings-icon:hover { - background: var(--terminal-green); - color: var(--bg-primary); - box-shadow: var(--glow-green); -} - -/* lt-modal-overlay: hidden by default, shown via .show class (mirrors base.css rules) */ -/* lt-btn: fallback styles when base.css is unavailable */ -.lt-btn { - display: inline-flex; - align-items: center; - background: transparent; - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - padding: 8px 16px; - cursor: pointer; - font-family: var(--font-mono); - font-size: 0.9rem; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 0.05em; - text-decoration: none; - white-space: nowrap; -} -.lt-btn::before { content: '[ '; flex-shrink: 0; } -.lt-btn::after { content: ' ]'; flex-shrink: 0; } -.lt-btn-primary { color: var(--terminal-amber); border-color: var(--terminal-amber); } -.lt-btn-primary::before { content: '> '; } -.lt-btn-ghost { border-color: var(--border-color); color: var(--text-muted); } -.lt-btn-danger { color: var(--status-closed); border-color: var(--status-closed); } -.lt-select, .lt-input { - background: var(--bg-primary); - color: var(--terminal-green); - border: 1px solid var(--terminal-green); - font-family: var(--font-mono); - padding: 0.4rem 0.5rem; - width: 100%; -} - -/* lt-modal-overlay: hidden by default, shown via .show class (mirrors base.css rules) */ -.lt-modal-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.88); - z-index: var(--z-modal); - display: none; - align-items: center; - justify-content: center; - backdrop-filter: blur(2px); -} -.lt-modal-overlay.show { - display: flex; -} -.lt-modal { - position: relative; - background: var(--bg-secondary); - border: 3px double var(--terminal-green); - box-shadow: 0 0 30px rgba(0, 255, 65, 0.2), 0 8px 40px rgba(0, 0, 0, 0.8); - width: 560px; - max-width: 95vw; - max-height: 90vh; - overflow-y: auto; -} -.lt-modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem 1.5rem; - border-bottom: 2px solid var(--terminal-green); - background: var(--bg-primary); -} -.lt-modal-title { - font-size: 0.9rem; - font-weight: bold; - color: var(--terminal-amber); - text-transform: uppercase; - letter-spacing: 0.08em; -} -.lt-modal-title::before { content: '>> '; color: var(--terminal-green); } -.lt-modal-close { - background: transparent; - border: 1px solid var(--border-color); - color: var(--text-muted); - cursor: pointer; - font-family: var(--font-mono); - font-size: 0.85rem; - padding: 2px 8px; -} -.lt-modal-close::before, .lt-modal-close::after { content: ''; } -.lt-modal-close:hover { color: var(--terminal-red); border-color: var(--terminal-red); } -.lt-modal-body { padding: 1.5rem; } -.lt-modal-footer { - display: flex; - gap: 0.5rem; - justify-content: flex-end; - padding: 1rem 1.5rem; - border-top: 1px solid var(--border-color); - background: var(--bg-primary); -} - -/* Settings Modal Container - acts as backdrop */ -.settings-modal { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - z-index: var(--z-modal); - background: rgba(0, 0, 0, 0.85); - backdrop-filter: blur(5px); - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; - overflow-y: auto; -} - -.settings-content { - position: relative; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - box-shadow: 0 0 30px rgba(0, 255, 65, 0.5); - max-width: 800px; - width: 100%; - max-height: calc(90vh - 2rem); - overflow-y: auto; - overflow-x: hidden; - font-family: var(--font-mono); - padding: 2rem; - animation: settingsSlideIn 0.3s ease; - margin: auto; - box-sizing: border-box; -} - -@keyframes settingsSlideIn { - from { - opacity: 0; - transform: translateY(-30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Settings Header */ -.settings-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; - padding-bottom: 1rem; - border-bottom: 2px solid var(--terminal-green); -} - -.settings-header h3 { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - font-family: var(--font-mono); - font-size: 1.5rem; - margin: 0; -} - -.close-settings { - background: transparent; - border: 2px solid var(--terminal-green); - color: var(--terminal-green); - font-size: 1.5rem; - padding: 0.25rem 0.75rem; - cursor: pointer; - font-family: var(--font-mono); - transition: background-color 0.2s ease, color 0.2s ease; -} - -.close-settings:hover { - background: var(--status-closed); - border-color: var(--status-closed); - color: var(--bg-primary); - box-shadow: 0 0 10px var(--status-closed); -} - -/* Settings Body */ -.settings-body { - margin-bottom: 2rem; -} - -/* Settings Sections */ -.settings-section { - margin-bottom: 2rem; - border: 2px solid var(--terminal-green); - padding: 1rem; -} - -.settings-section h4 { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - font-family: var(--font-mono); - margin-bottom: 1rem; - font-size: 1rem; -} - -/* Setting Rows */ -.setting-row { - margin-bottom: 1rem; - display: flex; - flex-wrap: wrap; - align-items: flex-start; - gap: 0.5rem 1rem; -} - -.setting-row:last-child { - margin-bottom: 0; -} - -.setting-row label { - color: var(--terminal-green); - font-family: var(--font-mono); - flex-shrink: 0; -} - -/* Form elements within setting rows */ -.setting-row input[type="text"], -.setting-row input[type="number"], -.setting-row input[type="date"], -.setting-row input[type="time"], -.setting-row select, -.setting-row textarea { - flex: 1; - min-width: 0; - font-family: var(--font-mono); - background: var(--bg-primary); - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - padding: 0.5rem; -} - -.setting-row input:focus, -.setting-row select:focus, -.setting-row textarea:focus { - outline: none; - border-color: var(--terminal-amber); - box-shadow: 0 0 10px rgba(255, 193, 7, 0.3); -} - -.setting-row textarea { - resize: vertical; - min-height: 100px; -} - -/* Checkbox in setting row */ -.setting-row label:has(input[type="checkbox"]) { - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; - padding-top: 0; -} - -.setting-row input[type="checkbox"] { - flex: none; - min-width: auto; - width: 1.2rem; - height: 1.2rem; - cursor: pointer; - accent-color: var(--terminal-green); -} - -/* Compact setting rows - stacked layout for grids/narrow containers */ -.setting-row-compact { - flex-direction: column !important; - align-items: stretch !important; - gap: 0.25rem !important; -} - -.setting-row-compact label { - min-width: auto !important; - padding-top: 0 !important; - margin-bottom: 0.25rem; -} - -.setting-row-compact input, -.setting-row-compact select, -.setting-row-compact textarea { - width: 100% !important; - min-width: auto !important; -} - -.setting-select { - flex: 1; - max-width: 200px; - font-family: var(--font-mono); - background: var(--bg-primary); - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - padding: 0.5rem; - cursor: pointer; -} - -/* Setting select width variants */ -.setting-select-wide { - max-width: 70%; -} - -.setting-select-full { - max-width: 100%; -} - -.setting-select-narrow { - max-width: 90px; -} - -/* Setting row layout variants */ -.setting-row-right { - justify-content: flex-end; -} - -/* Button size variants for settings */ -.btn-setting { - padding: 0.5rem 1rem; -} - -/* Utility text classes */ -.text-muted { - color: var(--text-muted); -} - -.text-small { - font-size: 0.85rem; -} - -.text-center { - text-align: center; -} - -/* Utility spacing classes */ -.mt-sm { - margin-top: 0.25rem; -} - -.display-block { - display: block; -} - -/* Empty state styling */ -.empty-state { - text-align: center; - padding: 3rem; -} - -.empty-state-terminal { - color: var(--terminal-green); - text-shadow: var(--glow-green); - font-size: 0.8rem; - line-height: 1.2; -} - -/* Separator text */ -.separator-text { - color: var(--terminal-green); -} - -/* Checkbox column width */ -.checkbox-column { - width: 40px; -} - -/* Actions column width */ -.actions-column { - width: 100px; - text-align: center; -} - -.setting-select:focus { - outline: none; - border-color: var(--terminal-amber); - box-shadow: 0 0 10px rgba(255, 193, 7, 0.3); -} - -/* Checkbox Group */ -.checkbox-group { - display: flex; - gap: 1rem; - flex-wrap: wrap; - flex: 1; -} - -.checkbox-group label { - min-width: auto; - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; -} - -.checkbox-group input[type="checkbox"] { - cursor: pointer; -} - -/* Keyboard Shortcuts Display */ -.shortcuts-list { - font-family: var(--font-mono); -} - -.shortcut-item { - display: flex; - justify-content: space-between; - padding: 0.5rem 0; - border-bottom: 1px solid var(--terminal-green); -} - -.shortcut-item:last-child { - border-bottom: none; -} - -.shortcut-item kbd { - background: var(--bg-primary); - border: 2px solid var(--terminal-green); - padding: 0.25rem 0.5rem; - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - font-family: var(--font-mono); - font-size: 0.9rem; -} - -.shortcut-item span { - color: var(--terminal-green); -} - -/* User Info Grid */ -.user-info-grid { - display: grid; - grid-template-columns: 150px 1fr; - gap: 0.5rem 1rem; - font-family: var(--font-mono); - color: var(--terminal-green); -} - -.user-info-grid div { - padding: 0.25rem 0; -} - -/* Settings Footer */ -.settings-footer { - display: flex; - gap: 1rem; - justify-content: flex-end; - padding-top: 1rem; - border-top: 2px solid var(--terminal-green); -} - -.settings-footer .btn { - font-family: var(--font-mono); - padding: 0.75rem 1.5rem; - border: 2px solid; - cursor: pointer; - transition: background-color 0.2s ease, color 0.2s ease; - background: transparent; -} - -.settings-footer .btn-primary { - color: var(--status-open); - border-color: var(--status-open); -} - -.settings-footer .btn-primary:hover { - background: var(--status-open); - color: var(--bg-primary); - box-shadow: 0 0 15px var(--status-open); -} - -.settings-footer .btn-secondary { - color: var(--terminal-green); - border-color: var(--terminal-green); -} - -.settings-footer .btn-secondary:hover { - background: var(--terminal-green); - color: var(--bg-primary); - box-shadow: var(--glow-green); -} - -/* Table Density Classes */ -.table-compact table { - font-size: 0.85rem; -} - -.table-compact th, -.table-compact td { - padding: 6px 10px; -} - -.table-comfortable table { - font-size: 1rem; -} - -.table-comfortable th, -.table-comfortable td { - padding: 16px 20px; -} - -/* Responsive Settings Modal */ -@media (max-width: 768px) { - .settings-content { - max-width: 95%; - padding: 1rem; - } - - .setting-row { - flex-direction: column; - align-items: stretch; - } - - .setting-row label { - min-width: auto; - padding-top: 0; - margin-bottom: 0.25rem; - } - - .setting-row input[type="text"], - .setting-row input[type="number"], - .setting-row input[type="date"], - .setting-row input[type="time"], - .setting-row select, - .setting-row textarea { - width: 100%; - min-width: auto; - } - - .setting-select { - width: 100%; - max-width: 100%; - } - - .user-info-grid { - grid-template-columns: 1fr; - } -} - -/* Prevent body scroll when modal is open */ -body.modal-open { - overflow: hidden; - position: fixed; - width: 100%; - height: 100%; -} - -/* ======================================== - ADMIN FORM UTILITIES - Shared across all admin views (WorkflowDesigner, CustomFields, - Templates, RecurringTickets, ApiKeys). - ======================================== */ - -.admin-section-title { - color: var(--terminal-amber); - margin-bottom: 1rem; -} - -/* Horizontal flex row for form fields */ -.admin-form-row { - display: flex; - gap: 1rem; - flex-wrap: wrap; - align-items: flex-end; - margin-bottom: 1rem; -} - -/* Growable field within .admin-form-row */ -.admin-form-field { - flex: 1; - min-width: 150px; -} - -/* Compact label above admin inputs */ -.admin-label { - display: block; - font-size: 0.8rem; - color: var(--terminal-amber); - margin-bottom: 0.25rem; -} - -/* Styled input / select / textarea for admin forms */ -.admin-input { - width: 100%; - padding: 0.5rem; - border: 2px solid var(--terminal-green); - border-radius: 0; - background: var(--bg-primary); - color: var(--terminal-green); - font-family: var(--font-mono); -} - -.admin-input:focus { - outline: none; - border-color: var(--terminal-amber); -} - -/* Admin page title in user-header (breadcrumb-style label) */ -.admin-page-title { - margin-left: 1rem; - color: var(--terminal-amber); -} - -/* Utility: prevent text wrap (e.g., date columns in tables) */ -.nowrap { white-space: nowrap; } - -/* Utility: monospace font */ -.mono { font-family: var(--font-mono); } - -/* Utility: color helpers for status / accent text */ -.text-green { color: var(--terminal-green); } -.text-amber { color: var(--terminal-amber); } -.text-cyan { color: var(--terminal-cyan); } -.text-danger { color: var(--priority-1); } -.text-open { color: var(--status-open); } -.text-closed { color: var(--status-closed); } -.text-muted-green { color: var(--terminal-green-dim); } - -/* Pre / code display block in admin UI */ -.admin-code-block { - background: var(--bg-primary); - padding: 1rem; - border: 1px solid var(--terminal-green); - overflow-x: auto; - font-family: var(--font-mono); -} - -/* Summary stats grid (4 columns, used in UserActivityView) */ -.admin-stats-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - text-align: center; - margin-top: 2rem; - padding: 1rem; - border: 1px solid var(--terminal-green); -} - -.admin-stat-value { - font-size: 1.5rem; - font-weight: bold; -} - -.admin-stat-label { - font-size: 0.8rem; - color: var(--terminal-green-dim); -} - -/* Row with title on left and action button on right */ -.admin-header-row { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1rem; -} - -.admin-header-row h2 { - margin: 0; -} - -/* Font weight utility */ -.fw-bold { font-weight: bold; } - -/* Small button variant (shared with ticket.css) */ -.btn-small { - padding: 0.4rem 0.75rem !important; - font-size: 0.85rem !important; - min-height: auto !important; -} - -/* Boot banner centering */ -#boot-banner { - text-align: center; - margin-bottom: 1rem; -} - -/* Empty state for dashboard table (PHP-generated) */ -.dashboard-empty-state { - text-align: center; - padding: 3rem; -} - -/* Fixed-width table columns */ -.col-checkbox { width: 40px; } -.col-actions { width: 100px; } - -.dashboard-empty-pre { - color: var(--terminal-green); - text-shadow: var(--glow-green); - font-size: 0.8rem; - line-height: 1.2; -} - -/* Grid layouts for modal form bodies */ -.setting-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } -.setting-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } - -/* Workflow status diagram container */ -.workflow-diagram { - margin-bottom: 2rem; - padding: 1rem; - border: 1px solid var(--terminal-green); - background: var(--bg-secondary); -} - -.workflow-diagram-nodes { - display: flex; - justify-content: center; - gap: 2rem; - flex-wrap: wrap; -} - -.workflow-diagram-node { - text-align: center; -} - -.workflow-diagram-node-label { - font-size: 0.8rem; - margin-top: 0.5rem; -} - -/* Inline paragraph spacing utility */ -.mb-1 { margin-bottom: 1rem; } - -/* Smaller modal size variants (complement lt-modal-lg from base.css) */ -.lt-modal-sm { width: 460px; } - -/* Half-rem margin-bottom utility */ -.mb-half { margin-bottom: 0.5rem; } - -/* Modal form label (block display with bottom spacing) */ -.lt-modal-body label { - display: block; - margin-bottom: 0.5rem; - color: var(--terminal-green); -} - -/* Modal form select/input top spacing */ -.lt-modal-body .lt-select, -.lt-modal-body .lt-input { - margin-top: 0.5rem; -} - -/* Extra-small modal size (400px) */ -.lt-modal-xs { width: 400px; } - -/* Confirmation modal body message */ -.modal-message { - color: var(--terminal-green); - white-space: pre-line; -} - -/* Danger modal header variant */ -.lt-modal-header--danger { - color: var(--status-closed) !important; -} - -/* Danger action button */ -.lt-btn-danger { - background: var(--status-closed); - border-color: var(--status-closed); - color: var(--bg-primary); -} - -.lt-btn-danger:hover { - background: var(--priority-1); - border-color: var(--priority-1); -} - -/* Modal body text sizing */ -.modal-warning-text { - color: var(--terminal-amber); - font-size: 1.1rem; - margin-bottom: 1rem; -} - -/* Keyboard shortcuts modal */ -.kb-section-heading { - color: var(--terminal-amber); - margin: 0 0 0.5rem 0; - font-size: 0.9rem; -} - -.kb-shortcuts-table { - width: 100%; - border-collapse: collapse; - margin-bottom: 1rem; -} - -.kb-shortcuts-table.no-margin { - margin-bottom: 0; -} - -.kb-shortcuts-table td { - padding: 0.4rem; - border-bottom: 1px solid var(--border-color); -} - -.kb-shortcuts-table tr:last-child td { - border-bottom: none; -} - -/* Button/action group aligned to bottom (used in filter forms) */ -.admin-form-actions { - display: flex; - align-items: flex-end; - gap: 0.5rem; -} - -/* Truncated table cell for long content */ -.td-truncate { - max-width: 300px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Small text utility */ -.text-sm { font-size: 0.85rem; } - -/* ======================================== - MARKDOWN FORMATTING STYLES - ======================================== */ - -/* Code blocks */ -.code-block { - background: var(--bg-primary); - border: 2px solid var(--terminal-green); - border-left: 4px solid var(--terminal-amber); - padding: 1rem; - margin: 1rem 0; - overflow-x: auto; - font-family: var(--font-mono); - color: var(--terminal-green); - text-shadow: var(--glow-green); -} - -.code-block code { - background: transparent; - border: none; - padding: 0; -} - -/* Inline code */ -code.inline-code { - background: var(--bg-secondary); - border: 1px solid var(--terminal-green); - padding: 0.2rem 0.4rem; - font-family: var(--font-mono); - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - border-radius: 0; -} - -/* Markdown headings in content */ -[data-markdown] h1, -[data-markdown] h2, -[data-markdown] h3 { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - font-family: var(--font-mono); - margin: 1.5rem 0 0.5rem 0; - border-bottom: 2px solid var(--terminal-green); - padding-bottom: 0.5rem; -} - -[data-markdown] h1 { font-size: 1.8rem; } -[data-markdown] h2 { font-size: 1.5rem; } -[data-markdown] h3 { font-size: 1.2rem; } - -/* Markdown lists */ -[data-markdown] ul, -[data-markdown] ol { - margin: 1rem 0; - padding-left: 2rem; -} - -[data-markdown] li { - color: var(--terminal-green); - margin: 0.5rem 0; -} - -[data-markdown] li::marker { - color: var(--terminal-amber); -} - -/* Markdown blockquotes */ -[data-markdown] blockquote { - border-left: 4px solid var(--terminal-amber); - background: var(--bg-secondary); - padding: 1rem; - margin: 1rem 0; - color: var(--terminal-green); - font-style: italic; -} - -/* Markdown links */ -[data-markdown] a { - color: var(--terminal-cyan); - text-decoration: none; - border-bottom: 1px dotted var(--terminal-cyan); - transition: color 0.2s ease, border-bottom-color 0.2s ease; -} - -[data-markdown] a:hover { - color: var(--terminal-amber); - border-bottom-color: var(--terminal-amber); - text-shadow: var(--glow-amber); -} - -/* Horizontal rules */ -[data-markdown] hr { - border: none; - border-top: 2px solid var(--terminal-green); - margin: 2rem 0; -} - -/* Markdown paragraphs */ -[data-markdown] p { - margin: 1rem 0; - line-height: 1.6; -} - -/* Strong/bold text */ -[data-markdown] strong { - color: var(--terminal-amber); - font-weight: bold; - text-shadow: var(--glow-amber); -} - -/* Italic/emphasized text */ -[data-markdown] em { - color: var(--terminal-cyan); - font-style: italic; -} -/* Advanced Search Modal */ -.advanced-search-modal { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - z-index: var(--z-modal); - background: rgba(0, 0, 0, 0.85); - backdrop-filter: blur(5px); - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; - overflow-y: auto; -} - -.advanced-search-content { - position: relative; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - box-shadow: 0 0 30px rgba(0, 255, 65, 0.5); - max-width: 900px; - width: 100%; - max-height: calc(90vh - 2rem); - overflow-y: auto; - overflow-x: hidden; - font-family: var(--font-mono); - padding: 2rem; - animation: slideIn 0.3s ease; - box-sizing: border-box; -} - -.advanced-search-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; - border-bottom: 2px solid var(--terminal-green); - padding-bottom: 1rem; -} - -.advanced-search-header h3 { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - font-size: 1.5rem; - margin: 0; -} - -.close-advanced-search { - background: transparent; - border: 2px solid var(--terminal-red); - color: var(--terminal-red); - font-size: 1.5rem; - padding: 0.25rem 0.75rem; - cursor: pointer; - font-family: var(--font-mono); - transition: background-color 0.2s ease, color 0.2s ease; -} - -.close-advanced-search:hover { - background: var(--terminal-red); - color: var(--bg-primary); - box-shadow: 0 0 15px rgba(255, 77, 77, 0.7); -} - -.advanced-search-body { - font-family: var(--font-mono); -} - -.search-section { - margin-bottom: 2rem; - border: 2px solid var(--terminal-green); - padding: 1.5rem; -} - -.search-section h4 { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - margin-bottom: 1rem; - font-size: 1.1rem; -} - -.search-field { - margin-bottom: 1rem; -} - -.search-field label { - display: block; - color: var(--terminal-green); - margin-bottom: 0.5rem; -} - -.search-field input[type="text"], -.search-field input[type="date"], -.search-field input[type="number"], -.search-field select { - width: 100%; - background: var(--bg-primary); - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - padding: 0.75rem; - font-family: var(--font-mono); - font-size: 1rem; - box-sizing: border-box; -} - -.search-field input:focus, -.search-field select:focus { - outline: none; - border-color: var(--terminal-amber); - box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); -} - -.date-range-group, -.priority-range-group { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - -.search-field select[multiple] { - min-height: 120px; -} - -.advanced-search-footer { - display: flex; - justify-content: flex-end; - gap: 1rem; - margin-top: 2rem; - padding-top: 1rem; - border-top: 2px solid var(--terminal-green); -} - -.btn-search-primary { - background: var(--terminal-green); - color: var(--bg-primary); - border: 2px solid var(--terminal-green); - padding: 0.75rem 2rem; - font-family: var(--font-mono); - font-size: 1rem; - cursor: pointer; - transition: background-color 0.2s ease, color 0.2s ease; - font-weight: bold; -} - -.btn-search-primary:hover { - background: transparent; - color: var(--terminal-green); - box-shadow: 0 0 15px rgba(0, 255, 65, 0.7); -} - -.btn-search-secondary { - background: transparent; - color: var(--terminal-green); - border: 2px solid var(--terminal-green); - padding: 0.75rem 1.5rem; - font-family: var(--font-mono); - font-size: 1rem; - cursor: pointer; - transition: background-color 0.2s ease, color 0.2s ease; -} - -.btn-search-secondary:hover { - background: var(--terminal-green); - color: var(--bg-primary); - box-shadow: 0 0 15px rgba(0, 255, 65, 0.5); -} - -.btn-search-reset { - background: transparent; - color: var(--terminal-amber); - border: 2px solid var(--terminal-amber); - padding: 0.75rem 1.5rem; - font-family: var(--font-mono); - font-size: 1rem; - cursor: pointer; - transition: background-color 0.2s ease, color 0.2s ease; -} - -.btn-search-reset:hover { - background: var(--terminal-amber); - color: var(--bg-primary); - box-shadow: 0 0 15px rgba(255, 193, 7, 0.5); -} - -/* Hint text */ -.search-hint { - color: var(--terminal-cyan); - font-size: 0.85rem; - margin-top: 0.25rem; - font-style: italic; -} - -/* ===== QUICK ACTIONS ===== */ -.quick-actions-cell { - text-align: center; - white-space: nowrap; -} - -.quick-actions { - display: flex; - gap: 0.25rem; - justify-content: center; - opacity: 0.5; - transition: opacity 0.2s ease; -} - -tr:hover .quick-actions { - opacity: 1; -} - -.quick-action-btn { - background: transparent; - border: 1px solid var(--terminal-green); - color: var(--terminal-green); - padding: 0.25rem 0.5rem; - font-size: 0.9rem; - cursor: pointer; - transition: background 0.15s ease, color 0.15s ease; - border-radius: 0; -} - -.quick-action-btn:hover { - background: var(--terminal-green); - color: var(--bg-primary); -} - -/* ===== DASHBOARD STATS WIDGETS ===== */ -.stats-widgets { - margin-bottom: 1.5rem; -} - -.stats-row { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 1rem; -} - -.stat-card { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 1rem; - background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(0, 255, 65, 0.03) 100%); - border: 2px solid var(--terminal-green); - will-change: transform; - transition: border-color 0.2s ease, transform 0.15s ease; - position: relative; - overflow: hidden; - cursor: pointer; -} - -/* Corner accent */ -.stat-card::after { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 30px; - height: 30px; - background: linear-gradient(135deg, transparent 50%, rgba(0, 255, 65, 0.1) 50%); -} - -.stat-card:hover { - border-color: var(--terminal-amber); - transform: translateY(-2px); -} - -/* Critical stat card styling */ -.stat-card.stat-critical { - border-color: var(--priority-1); - background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 77, 77, 0.08) 100%); -} - -.stat-card.stat-critical .stat-value { - color: var(--priority-1); - text-shadow: var(--glow-priority-1); - animation: pulse-glow 2s ease-in-out infinite; -} - -.stat-card.stat-critical::after { - background: linear-gradient(135deg, transparent 50%, rgba(255, 77, 77, 0.15) 50%); -} - -.stat-icon { - font-size: 1.5rem; - opacity: 0.9; - transition: transform 0.3s ease; -} - -.stat-card:hover .stat-icon { - transform: scale(1.1); -} - -.stat-content { - flex: 1; -} - -.stat-value { - font-size: 1.5rem; - font-weight: bold; - color: var(--terminal-green); - line-height: 1; - text-shadow: var(--glow-green); -} - -.stat-label { - font-size: 0.8rem; - color: var(--text-secondary); - margin-top: 0.25rem; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* Stat card color variations */ -.stat-critical .stat-value { - color: var(--priority-1); - text-shadow: var(--glow-red); -} - -.stat-critical { - border-color: var(--priority-1); -} - -.stat-unassigned .stat-value { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); -} - -.stat-unassigned { - border-color: var(--terminal-amber); -} - -/* Mobile responsive stats */ -@media (max-width: 768px) { - .stats-row { - grid-template-columns: repeat(2, 1fr); - } - - .stat-card { - padding: 0.75rem; - } - - .stat-value { - font-size: 1.25rem; - } - - .stat-icon { - font-size: 1.25rem; - } -} - -@media (max-width: 480px) { - .stats-row { - grid-template-columns: 1fr; - } -} - -/* ===== EXPORT DROPDOWN ===== */ -.export-dropdown { - position: relative; - display: inline-block; -} - -.export-dropdown-content { - display: none; - position: absolute; - top: 100%; - right: 0; - background: var(--bg-primary); - border: 2px solid var(--terminal-green); - min-width: 120px; - z-index: var(--z-dropdown); - box-shadow: 0 0 10px rgba(0, 255, 65, 0.3); -} - -.export-dropdown:hover .export-dropdown-content, -.export-dropdown.open .export-dropdown-content { - display: block; -} - -.export-dropdown-content a { - display: block; - padding: 0.5rem 1rem; - color: var(--terminal-green); - text-decoration: none; - font-family: var(--font-mono); - transition: background-color 0.15s ease, color 0.15s ease; -} - -.export-dropdown-content a:hover { - background: rgba(0, 255, 65, 0.1); - color: var(--terminal-amber); -} - -/* ===== ADMIN DROPDOWN ===== */ -.admin-dropdown { - position: relative; - display: inline-block; -} - -.admin-dropdown .admin-badge { - cursor: pointer; - padding: 0.3rem 0.6rem; -} - -.admin-dropdown-content { - display: none; - position: absolute; - top: 100%; - right: 0; - background: var(--bg-primary); - border: 2px solid var(--priority-1); - min-width: 180px; - z-index: var(--z-popover); - box-shadow: 0 0 15px rgba(255, 77, 77, 0.3); -} - -.admin-dropdown-content.show { - display: block; -} - -.admin-dropdown-content a { - display: block; - padding: 0.6rem 1rem; - color: var(--terminal-green); - text-decoration: none; - font-family: var(--font-mono); - font-size: 0.85rem; - transition: background-color 0.15s ease, color 0.15s ease; - border-bottom: 1px solid var(--bg-tertiary); -} - -.admin-dropdown-content a:last-child { - border-bottom: none; -} - -.admin-dropdown-content a:hover { - background: rgba(255, 77, 77, 0.1); - color: var(--priority-1); - text-shadow: var(--glow-red); -} - -/* ===== CLICKABLE STAT CARDS ===== */ -.stat-card:active { - opacity: 0.85; -} - -/* ===== TABLE OVERFLOW FIX ===== */ -.ascii-content { - overflow-x: visible; -} - -/* Reduce column widths for better fit */ -table th, -table td { - padding: 8px 10px; - font-size: 0.85rem; -} - -/* Title column wraps to new lines */ -table td:nth-child(4) { - max-width: 250px; - word-wrap: break-word; - overflow-wrap: break-word; - white-space: normal; -} - -/* ===== TICKET LINK REFERENCES IN COMMENTS ===== */ -.ticket-link-ref { - color: var(--terminal-cyan); - text-decoration: none; - font-family: var(--font-mono); - padding: 0.1rem 0.3rem; - border-radius: 0; - background: rgba(0, 255, 255, 0.1); - transition: color 0.15s ease, background-color 0.15s ease; -} - -.ticket-link-ref:hover { - color: var(--terminal-amber); - background: rgba(255, 176, 0, 0.15); - text-shadow: var(--glow-amber); -} - -/* ===== USER GROUPS DISPLAY ===== */ -.user-groups-list { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.group-badge { - display: inline-block; - padding: 0.2rem 0.6rem; - background: rgba(0, 255, 255, 0.1); - border: 1px solid var(--terminal-cyan); - color: var(--terminal-cyan); - font-family: var(--font-mono); - font-size: 0.8rem; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.group-badge:hover { - background: rgba(0, 255, 255, 0.2); - text-shadow: 0 0 5px var(--terminal-cyan); -} - -/* ===== VISIBILITY SETTINGS ===== */ + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.75rem; + border: 1px solid var(--lt-amber, #ffb000); + margin-bottom: 0.5rem; + font-size: 0.75rem; +} + +/* ── Search form ─────────────────────────────────────────────── */ +.lt-search-form { + display: flex; + align-items: center; + gap: 0.4rem; + flex-wrap: wrap; +} + +/* ── Pagination ──────────────────────────────────────────────── */ +.lt-pagination { + display: flex; + align-items: center; + gap: 0.2rem; + padding: 0.75rem 0; + flex-wrap: wrap; +} + +/* ── Sidebar expand stub ─────────────────────────────────────── */ +.lt-sidebar-expand-btn { + writing-mode: vertical-rl; + text-orientation: mixed; + padding: 0.75rem 0.3rem; + cursor: pointer; + border: 1px solid var(--lt-border, #00ff41); + background: transparent; + color: var(--lt-text-primary, #00ff41); + font-family: inherit; + font-size: 0.7rem; + letter-spacing: 0.1em; + align-self: flex-start; +} + +/* ── Kanban empty state ──────────────────────────────────────── */ +#tab-kanban .lt-section-body:empty::after { + content: '— empty —'; + display: block; + padding: 1rem; + text-align: center; + font-size: 0.7rem; + opacity: 0.4; +} + +/* ── Dashboard-specific page header ─────────────────────────── */ +.lt-page-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0 0.75rem; + margin-bottom: 0.25rem; +} + +/* ── Col checkbox width ──────────────────────────────────────── */ +.col-checkbox { width: 2rem; text-align: center; } +.col-actions { width: auto; white-space: nowrap; } + +/* ── Admin container ─────────────────────────────────────────── */ +.admin-container { + max-width: 900px; +} + +/* ── Create ticket meta grid ─────────────────────────────────── */ +.create-ticket-meta-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} +@media (max-width: 600px) { + .create-ticket-meta-grid { grid-template-columns: 1fr; } +} + +/* ── Form hint text ──────────────────────────────────────────── */ +.lt-form-hint { + font-size: 0.7rem; + opacity: 0.6; + margin: 0.2rem 0 0; +} +.lt-form-hint--warn { color: var(--lt-amber, #ffb000); opacity: 1; } + +/* ── Visibility groups ───────────────────────────────────────── */ .visibility-groups-list { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + padding: 0.4rem 0; } -.visibility-groups-list label { - cursor: pointer; -} - -.visibility-groups-list label:hover .group-badge { - background: rgba(0, 255, 255, 0.2); - text-shadow: 0 0 5px var(--terminal-cyan); -} - -.visibility-group-checkbox { - width: 16px; - height: 16px; - cursor: pointer; -} - -.visibility-group-checkbox:checked + .group-badge { - background: var(--terminal-cyan); - color: var(--bg-primary); - font-weight: bold; -} - -.ticket-visibility-settings { - margin-top: 0.75rem; -} - -.visibility-groups-display { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -/* ===== INLINE TICKET PREVIEW POPUP ===== */ -.ticket-preview-popup { - position: absolute; - z-index: var(--z-modal); - width: 320px; - background: var(--bg-primary); - border: 2px solid var(--terminal-green); - box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); - font-family: var(--font-mono); - padding: 0; - pointer-events: auto; -} - -.ticket-preview-popup::before { - content: '┌──────────────────────┐'; - display: block; - color: var(--terminal-green); - font-size: 0.7rem; - text-align: center; - padding: 0.25rem; - background: var(--bg-secondary); - border-bottom: 1px solid var(--terminal-green); -} - -.preview-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.75rem; - background: var(--bg-secondary); - border-bottom: 1px solid var(--terminal-green); -} - -.preview-id { - color: var(--terminal-amber); - font-weight: bold; - text-shadow: var(--glow-amber); -} - -.preview-status { - padding: 0.2rem 0.5rem; - font-size: 0.75rem; - text-transform: uppercase; -} - -.preview-title { - padding: 0.75rem; - color: var(--terminal-green); - font-size: 0.95rem; - line-height: 1.4; - border-bottom: 1px solid var(--terminal-green); - word-break: break-word; -} - -.preview-meta { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0.5rem; - padding: 0.75rem; - font-size: 0.8rem; - color: var(--terminal-green); -} - -.preview-meta strong { - color: var(--terminal-cyan); -} - -.preview-footer { - padding: 0.5rem 0.75rem; - font-size: 0.75rem; - color: var(--text-muted); - background: var(--bg-secondary); - border-top: 1px solid var(--terminal-green); -} - -/* ===== DUPLICATE DETECTION LIST ===== */ - +/* ── Duplicate warning list ──────────────────────────────────── */ .duplicate-list { - margin: 0; - padding-left: 1.5rem; - color: var(--terminal-green); + list-style: none; + padding: 0.25rem 0 0; + margin: 0; } - .duplicate-list li { - margin-bottom: 0.5rem; + padding: 0.2rem 0; + border-bottom: 1px solid rgba(255, 176, 0, 0.2); +} +.duplicate-list li:last-child { border-bottom: none; } + +/* ── Admin sections ──────────────────────────────────────────── */ +.settings-section { + margin-bottom: 1.5rem; +} +.settings-section:last-child { margin-bottom: 0; } + +/* ── Shortcuts list ──────────────────────────────────────────── */ +.shortcuts-list { + display: flex; + flex-direction: column; + gap: 0.35rem; +} +.shortcut-item { + display: flex; + align-items: center; + gap: 0.75rem; +} +kbd { + font-family: inherit; + font-size: 0.7rem; + padding: 0.1rem 0.35rem; + border: 1px solid var(--lt-border, #00ff41); + white-space: nowrap; } -.duplicate-list a { - color: var(--terminal-green); -} - -.duplicate-meta { - color: var(--terminal-amber); -} - -.duplicate-hint { - margin-top: 0.5rem; - font-size: 0.85rem; - color: var(--terminal-green-dim); -} - -/* ===== INLINE ALERT BOXES ===== */ - -.inline-error { - color: var(--priority-1); - border: 2px solid var(--priority-1); - padding: 1rem; - background: rgba(255, 68, 68, 0.1); -} - -.inline-warning { - border: 2px solid var(--terminal-amber); - background: rgba(255, 176, 0, 0.1); - padding: 1rem; -} - -/* New API key display — amber tinted alert frame */ -.key-generated-alert { - background: rgba(255, 176, 0, 0.1); - border-color: var(--terminal-amber); -} - -/* ===== RELATIVE TIMESTAMP CELLS ===== */ - -/* Inline spans with data-ts show relative time; title attr has the full date */ -span.ts-cell { - cursor: help; - border-bottom: 1px dotted var(--text-muted); - text-decoration: none; -} - -/* Table cells with data-ts — no underline on full td, just cursor hint */ -td.ts-cell { - cursor: help; -} - -/* ===== ENHANCED MOBILE RESPONSIVE STYLES ===== */ - -/* Table wrapper - horizontal scroll when table overflows container */ -.table-wrapper { - overflow-x: auto; - overflow-y: visible; - margin: 0; - padding: 0; - -webkit-overflow-scrolling: touch; - /* Scroll fade indicator: fades out right edge when content overflows */ - background-image: - linear-gradient(to right, var(--bg-primary), var(--bg-primary)), - linear-gradient(to right, var(--bg-primary), var(--bg-primary)), - linear-gradient(to right, rgba(0,255,65,0.12), transparent), - linear-gradient(to left, rgba(0,255,65,0.12), transparent); - background-position: left center, right center, left center, right center; - background-repeat: no-repeat; - background-color: var(--bg-primary); - background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%; - background-attachment: local, local, scroll, scroll; -} +/* ── lt-msg variants ─────────────────────────────────────────── */ +.lt-mb-md { margin-bottom: 1rem; } +/* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 768px) { - /* Prevent iOS zoom on input focus */ - input[type="text"], - input[type="email"], - input[type="search"], - input[type="password"], - input[type="number"], - select, - textarea { - font-size: 16px !important; - } - - /* Minimum touch target size (44px) */ - .btn, - button, - .tab-btn, - .checkbox-cell, - .quick-action-btn, - input[type="checkbox"], - select { - min-height: 44px; - min-width: 44px; - } - - /* Better button spacing */ - .btn { - padding: 12px 16px; - margin: 4px 2px; - } - - /* Stack toolbar elements */ - .dashboard-toolbar { - flex-direction: column; - gap: 1rem; - padding: 1rem; - } - - .toolbar-left, - .toolbar-center, - .toolbar-right { - width: 100%; - justify-content: center; - flex-wrap: wrap; - } - - .toolbar-search { - flex-direction: column; - width: 100%; - } - - .toolbar-search input, - .toolbar-search button { - width: 100%; - margin: 4px 0; - } - - .search-box { - width: 100% !important; - max-width: none !important; - } - - /* Improve table readability */ - table { - font-size: 0.8rem; - } - - th, td { - padding: 8px 6px; - min-width: 60px; - } - - /* Hide less important columns on mobile */ - table th:nth-child(5), - table td:nth-child(5), - table th:nth-child(10), - table td:nth-child(10), - table th:nth-child(11), - table td:nth-child(11) { - display: none; - } - - /* Improve stats widgets */ - .stats-row { - flex-wrap: wrap; - } - - .stat-card { - flex: 1 1 calc(50% - 0.5rem); - min-width: 120px; - } - - /* Improve filter groups */ - .filter-group label { - min-height: 44px; - display: flex; - align-items: center; - padding: 0.5rem 0; - } - - .filter-group input[type="checkbox"] { - width: 20px; - height: 20px; - margin-right: 0.75rem; - } - - /* Improve pagination */ - .pagination { - flex-wrap: wrap; - justify-content: center; - } - - .pagination button { - min-width: 44px; - min-height: 44px; - padding: 8px 12px; - } - - /* Better modal sizing */ - .modal-content, - .settings-content { - width: 95%; - max-width: 95%; - max-height: 90vh; - overflow-y: auto; - } - - /* Hide preview on mobile (not useful with touch) */ - .ticket-preview-popup { - display: none !important; - } - - /* Improve quick actions */ - .quick-actions { - flex-direction: row; - gap: 4px; - } - - .quick-action-btn { - padding: 8px; - font-size: 1rem; - } -} - -/* ===== VIEW TOGGLE BUTTONS ===== */ -.view-toggle { - display: flex; - gap: 0; - border: 2px solid var(--terminal-green); -} - -.view-btn { - padding: 0.5rem 1rem; - background: var(--bg-primary); - color: var(--terminal-green); - border: none; - cursor: pointer; - font-size: 1.2rem; - min-width: 44px; - min-height: 44px; - transition: background-color 0.15s ease, color 0.15s ease; -} - -.view-btn::before, -.view-btn::after { - content: ''; -} - -.view-btn:hover { - background: rgba(0, 255, 65, 0.15); -} - -.view-btn.active { - background: var(--terminal-green); - color: var(--bg-primary); -} - -/* ===== KANBAN BOARD STYLES ===== */ -.card-view-container { - margin-bottom: 2rem; -} - -.kanban-board { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - min-height: 500px; -} - -.kanban-column { - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - display: flex; - flex-direction: column; - min-height: 400px; -} - -.kanban-column-header { - padding: 1rem; - border-bottom: 2px solid var(--terminal-green); - display: flex; - justify-content: space-between; - align-items: center; - font-family: var(--font-mono); - text-transform: uppercase; - letter-spacing: 0.1em; -} - -.kanban-column-header.status-Open { - background: rgba(40, 167, 69, 0.1); - color: var(--status-open); - border-color: var(--status-open); -} - -.kanban-column-header.status-Pending { - background: rgba(156, 39, 176, 0.1); - color: var(--status-pending); - border-color: var(--status-pending); -} - -.kanban-column-header.status-In-Progress { - background: rgba(255, 193, 7, 0.1); - color: var(--status-in-progress); - border-color: var(--status-in-progress); -} - -.kanban-column-header.status-Closed { - background: rgba(220, 53, 69, 0.1); - color: var(--status-closed); - border-color: var(--status-closed); -} - -.column-title { - font-weight: bold; -} - -.column-count { - background: currentColor; - color: var(--bg-primary); - padding: 0.2rem 0.6rem; - font-size: 0.8rem; - font-weight: bold; -} - -.kanban-cards { - flex: 1; - padding: 0.5rem; - overflow-y: auto; - display: flex; + .lt-page-header { flex-direction: column; + align-items: flex-start; gap: 0.5rem; + } + .lt-stats-grid { + grid-template-columns: repeat(2, 1fr); + } } -.kanban-card { - background: var(--bg-primary); - border: 1px solid var(--terminal-green); - padding: 0.75rem; - cursor: pointer; - transition: border-color 0.15s ease, transform 0.15s ease; - font-family: var(--font-mono); -} - -.kanban-card:hover { - border-color: var(--terminal-amber); - transform: translateX(4px); - box-shadow: -4px 0 0 var(--terminal-amber); -} - -.kanban-card.priority-1 { border-left: 4px solid var(--priority-1); } -.kanban-card.priority-2 { border-left: 4px solid var(--priority-2); } -.kanban-card.priority-3 { border-left: 4px solid var(--priority-3); } -.kanban-card.priority-4 { border-left: 4px solid var(--priority-4); } -.kanban-card.priority-5 { border-left: 4px solid var(--priority-5); } - -.card-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; - font-size: 0.8rem; -} - -.card-id { - color: var(--terminal-cyan); -} - -.card-priority { - padding: 0.1rem 0.4rem; - font-size: 0.7rem; - font-weight: bold; -} - -.card-priority.p1 { background: var(--priority-1); color: var(--bg-primary); } -.card-priority.p2 { background: var(--priority-2); color: var(--bg-primary); } -.card-priority.p3 { background: var(--priority-3); color: var(--bg-primary); } -.card-priority.p4 { background: var(--priority-4); color: var(--bg-primary); } -.card-priority.p5 { background: var(--priority-5); color: var(--bg-primary); } - -.card-title { - color: var(--terminal-green); - font-size: 0.9rem; - line-height: 1.3; - margin-bottom: 0.5rem; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} - -.card-footer { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 0.75rem; - color: var(--text-muted); -} - -.card-category { - background: rgba(0, 255, 65, 0.1); - padding: 0.1rem 0.4rem; -} - -.card-assignee { - width: 28px; - height: 28px; - background: var(--terminal-cyan); - color: var(--bg-primary); - border-radius: 0; - display: flex; - align-items: center; - justify-content: center; - font-weight: bold; - font-size: 0.7rem; -} - -/* Kanban responsive */ -@media (max-width: 1200px) { - .kanban-board { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 768px) { - .kanban-board { - grid-template-columns: 1fr; - } - - .kanban-column { - min-height: 200px; - } -} - -/* ===== MOBILE-ONLY ELEMENTS - Hidden on Desktop ===== */ -.mobile-filter-toggle, -.mobile-bottom-nav, -.mobile-sidebar-close, -.mobile-sidebar-overlay { - display: none !important; -} - -/* ===== MARKDOWN TABLE STYLES ===== */ -.markdown-table { - width: 100%; - border-collapse: collapse; - margin: 1rem 0; - font-family: var(--font-mono); - font-size: 0.9rem; -} - -.markdown-table th, -.markdown-table td { - border: 1px solid var(--terminal-green); - padding: 0.5rem 0.75rem; - text-align: left; -} - -.markdown-table th { - background: rgba(0, 255, 65, 0.1); - color: var(--terminal-green); - font-weight: bold; -} - -.markdown-table tr:hover td { - background: rgba(0, 255, 65, 0.05); -} - -/* Auto-linked URLs styling */ -.auto-link { - color: var(--terminal-cyan); - text-decoration: none; - word-break: break-all; -} - -.auto-link:hover { - color: var(--terminal-amber); - text-decoration: underline; -} - -/* ===== MOBILE STYLES - PHONES (max 768px) ===== */ -@media (max-width: 768px) { - /* ===== BASE RESETS ===== */ - * { - -webkit-tap-highlight-color: transparent; - } - - body { - padding-bottom: 70px; /* Space for mobile nav */ - } - - /* Prevent iOS zoom on input focus */ - input, select, textarea, button { - font-size: 16px !important; - } - - /* ===== HEADER - Simplified for mobile ===== */ - .user-header { - position: sticky; - top: 0; - z-index: var(--z-dropdown); - padding: 0.5rem 0.75rem; - flex-wrap: nowrap; - gap: 0.5rem; - background: var(--bg-primary); - border-bottom: 2px solid var(--terminal-green); - } - - .user-header-left { - flex: 1; - min-width: 0; - } - - .user-header-left .app-title { - font-size: 1rem; - white-space: nowrap; - } - - .user-header-right { - display: flex; - align-items: center; - gap: 0.25rem; - flex-shrink: 0; - } - - .user-header-right .user-name { - display: none; /* Hide username on mobile */ - } - - .user-header-right .settings-icon { - width: 44px; - height: 44px; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.3rem; - border: none; - background: transparent; - } - - .admin-badge { - padding: 0.5rem 0.75rem; - font-size: 0.8rem; - min-height: 44px; - } - - /* ===== HIDE DESKTOP ELEMENTS ===== */ - .ascii-banner-wrapper, - .sidebar-collapse-btn, - .sidebar-expand-btn { - display: none !important; - } - - /* ===== SIDEBAR AS SLIDE-OUT DRAWER ===== */ - .dashboard-layout { - flex-direction: column; - padding: 0; - } - - .dashboard-sidebar { - position: fixed; - top: 0; - left: 0; - width: 85vw; - max-width: 320px; - height: 100vh; - z-index: var(--z-modal); - background: var(--bg-primary); - transform: translateX(-100%); - transition: transform 0.3s ease; - padding: 60px 1rem 1rem 1rem; - overflow-y: auto; - box-shadow: 4px 0 20px rgba(0, 0, 0, 0.8); - } - - .dashboard-sidebar.mobile-open { - transform: translateX(0); - } - - .dashboard-sidebar .sidebar-content { - display: block; - padding-top: 1rem; - } - - /* Mobile sidebar interior styling */ - .dashboard-sidebar .ascii-frame-inner { - padding: 1rem !important; - border: 2px solid var(--terminal-green) !important; - background: var(--bg-secondary) !important; - } - - .dashboard-sidebar .ascii-subsection-header { - font-size: 1.1rem; - margin-bottom: 1rem; - padding-bottom: 0.5rem; - } - - .dashboard-sidebar .filter-group { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - border-bottom: 1px solid rgba(0, 255, 65, 0.3); - } - - .dashboard-sidebar .filter-group:last-of-type { - border-bottom: none; - } - - .dashboard-sidebar .filter-group h4 { - font-size: 0.95rem; - margin-bottom: 0.75rem; - color: var(--terminal-amber); - } - - .dashboard-sidebar .filter-group label { - display: flex; - align-items: center; - padding: 0.75rem 0.5rem; - margin: 0.25rem 0; - min-height: 44px; - font-size: 0.95rem; - background: rgba(0, 255, 65, 0.05); - border-radius: 0; - } - - .dashboard-sidebar .filter-group label:active { - background: rgba(0, 255, 65, 0.15); - } - - .dashboard-sidebar .filter-group input[type="checkbox"] { - width: 22px; - height: 22px; - margin-right: 0.75rem; - flex-shrink: 0; - } - - .dashboard-sidebar .btn { - width: 100%; - min-height: 48px; - margin-top: 0.5rem; - font-size: 1rem; - } - - /* Mobile sidebar overlay */ - .mobile-sidebar-overlay { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.7); - z-index: var(--z-popover); - } - - .mobile-sidebar-overlay.active { - display: block; - } - - /* Close button in sidebar */ - .mobile-sidebar-close { - display: flex !important; - position: absolute; - top: 10px; - right: 10px; - width: 44px; - height: 44px; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - color: var(--terminal-green); - font-size: 1.5rem; - cursor: pointer; - align-items: center; - justify-content: center; - z-index: var(--z-base); - } - - /* ===== MAIN CONTENT AREA ===== */ - .dashboard-main { - width: 100%; - padding: 0 0.5rem; - } - - /* ===== MOBILE FILTER TOGGLE ===== */ - .mobile-filter-toggle { - display: flex !important; - width: 100%; - padding: 0.75rem 1rem; - margin: 0.5rem 0; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.9rem; - align-items: center; - justify-content: center; - gap: 0.5rem; - cursor: pointer; - } - - .mobile-filter-toggle:active { - background: var(--terminal-green); - color: var(--bg-primary); - } - - /* ===== STATS WIDGETS ===== */ - .stats-widgets { - margin: 0.5rem 0; - } - - .stats-row { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 0.5rem; - } - - .stat-card { - padding: 0.75rem; - min-height: auto; - } - - .stat-value { - font-size: 1.25rem; - } - - .stat-label { - font-size: 0.65rem; - } - - /* ===== TOOLBAR - Stack vertically ===== */ - .dashboard-toolbar { - flex-direction: column; - gap: 0.5rem; - padding: 0.5rem; - margin: 0; - } - - .toolbar-left { - width: 100%; - flex-direction: column; - gap: 0.5rem; - } - - .toolbar-left .dashboard-title { - display: none; /* Hide title, it's in header */ - } - - .toolbar-left .toolbar-search { - width: 100%; - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - } - - .toolbar-search .search-box { - flex: 1; - min-width: 0; - min-height: 44px; - padding: 0.5rem 0.75rem; - } - - .toolbar-search .btn { - min-height: 44px; - padding: 0.5rem 0.75rem; - } - - .toolbar-search .btn-secondary { - display: none; /* Hide advanced search button */ - } - - .clear-search-btn { - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - } - - .toolbar-center { - width: 100%; - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - justify-content: space-between; - align-items: center; - } - - .toolbar-center .view-toggle { - order: 1; - } - - .toolbar-center .create-ticket { - order: 2; - flex: 1; - min-height: 44px; - } - - .toolbar-center .ticket-count { - order: 3; - width: 100%; - text-align: center; - font-size: 0.8rem; - padding: 0.25rem; - } - - .toolbar-center .export-dropdown { - display: none; /* Hide export on mobile */ - } - - .view-toggle { - display: flex; - } - - .view-btn { - min-width: 44px; - min-height: 44px; - padding: 0.5rem; - } - - .toolbar-right { - display: none; /* Hide pagination in toolbar - show at bottom */ - } - - /* ===== TICKET CARDS - Mobile optimized ===== */ - .ascii-frame-outer { - margin: 0.25rem 0; - border-width: 2px; - } - - .ascii-section-header { - font-size: 1rem; - padding: 0.75rem; - background: var(--bg-primary); - } - - .ascii-content { - padding: 0; - } - - .ascii-frame-inner { - padding: 0; - border: none; - } - - .table-wrapper { - width: 100%; - } - - /* Hide the ::before header on mobile - cleaner look */ - .table-wrapper::before { - display: none; - } - - /* Mobile-optimized card layout - full width, touch friendly */ - .ticket-cards { - padding: 0; - gap: 0; - } - - .ticket-card-row { - display: flex; - flex-direction: column; - gap: 0.75rem; - padding: 1rem; - border-left-width: 5px; - border-bottom: 1px solid rgba(0, 255, 65, 0.3); - background: var(--bg-secondary); - } - - .ticket-card-row:last-child { - border-bottom: none; - } - - .ticket-card-row:active { - background: rgba(0, 255, 65, 0.15); - } - - /* Header row with ID and status */ - .ticket-card-header { - display: flex; - justify-content: space-between; - align-items: center; - } - - .ticket-card-id { - font-size: 1rem; - font-weight: bold; - } - - .ticket-card-id a { - display: inline-block; - padding: 0.5rem 0; - min-height: 44px; - line-height: 1.5; - color: var(--terminal-cyan); - text-decoration: none; - } - - .ticket-card-id a:active { - color: var(--terminal-amber); - } - - .ticket-card-main { - width: 100%; - } - - .ticket-card-title { - font-size: 1.1rem; - line-height: 1.4; - margin-bottom: 0.75rem; - color: var(--terminal-green); - } - - .ticket-card-meta { - display: flex; - flex-wrap: wrap; - font-size: 0.85rem; - gap: 0.5rem 1rem; - color: var(--text-muted); - } - - .ticket-card-meta span { - display: inline-flex; - align-items: center; - gap: 0.25rem; - } - - .ticket-card-status { - align-self: flex-start; - padding: 0.5rem 1rem; - font-size: 0.85rem; - font-weight: bold; - } - - .ticket-card-actions { - display: flex; - gap: 0.75rem; - margin-top: 0.5rem; - padding-top: 0.75rem; - border-top: 1px solid rgba(0, 255, 65, 0.2); - } - - .ticket-card-actions button { - flex: 1; - min-height: 48px; - padding: 0.75rem; - font-size: 1.2rem; - border-width: 2px; - border-radius: 0; - background: var(--bg-primary); - color: var(--terminal-green); - border-color: var(--terminal-green); - } - - .ticket-card-actions button:active { - background: var(--terminal-green); - color: var(--bg-primary); - } - - /* Empty state for mobile */ - .ticket-card-empty { - padding: 3rem 1rem; - text-align: center; - font-size: 1rem; - } - - /* ===== BULK ACTIONS ===== */ - .bulk-actions-inline { - position: fixed; - bottom: 70px; /* Above mobile nav */ - left: 0; - right: 0; - background: var(--bg-secondary); - border-top: 2px solid var(--terminal-green); - padding: 0.75rem; - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - z-index: 99; - } - - .bulk-actions-inline button { - flex: 1 1 calc(50% - 0.5rem); - min-height: 44px; - font-size: 0.8rem; - } - - /* ===== PAGINATION - Bottom of page ===== */ - .pagination { - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 0.25rem; - padding: 1rem 0.5rem; - margin-bottom: 1rem; - } - - .pagination button { - min-width: 40px; - min-height: 44px; - padding: 0.5rem; - font-size: 0.9rem; - } - - /* ===== MODALS ===== */ - .modal-overlay { - padding: 0; - align-items: flex-end; - } - - .modal-content { - width: 100% !important; - max-width: 100% !important; - max-height: 90vh; - border-radius: 0; - margin: 0; - } - - .modal-body { - max-height: 60vh; - overflow-y: auto; - padding: 1rem; - } - - .modal-body input, - .modal-body select, - .modal-body textarea { - width: 100%; - min-height: 48px; - padding: 0.75rem; - margin-bottom: 0.75rem; - font-size: 16px; - } - - .modal-footer { - flex-direction: column; - gap: 0.5rem; - padding: 1rem; - border-top: 1px solid var(--border-color); - } - - .modal-footer button { - width: 100%; - min-height: 50px; - font-size: 1rem; - } - - /* ===== SETTINGS MODAL ===== */ - .settings-modal { - align-items: flex-end; - } - - .settings-content { - width: 100% !important; - max-width: 100% !important; - max-height: 85vh; - border-radius: 0; - } - - /* ===== ADMIN DROPDOWN ===== */ - .admin-dropdown-content { - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: auto; - width: 100%; - max-height: 60vh; - overflow-y: auto; - border-radius: 0; - z-index: var(--z-popover); - } - - .admin-dropdown-content a { - padding: 1rem 1.5rem; - min-height: 50px; - display: flex; - align-items: center; - font-size: 1rem; - } - - /* ===== KANBAN VIEW ===== */ - .kanban-board { - grid-template-columns: 1fr; - gap: 1rem; - } - - .kanban-column { - min-height: auto; - } - - .kanban-column-header { - padding: 0.75rem; - font-size: 0.9rem; - } - - .kanban-cards { - padding: 0.5rem; - max-height: none; - } - - .ticket-card { - padding: 0.75rem; - } - - /* ===== QUICK ACTIONS ===== */ - .quick-actions { - display: flex; - gap: 0.25rem; - } - - .quick-action-btn { - min-width: 36px; - min-height: 36px; - padding: 0.25rem; - font-size: 0.9rem; - } - - /* ===== MOBILE BOTTOM NAV ===== */ - .mobile-bottom-nav { - display: flex !important; - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 60px; - background: var(--bg-primary); - border-top: 2px solid var(--terminal-green); - z-index: var(--z-dropdown); - padding: 0; - } - - .mobile-bottom-nav a, - .mobile-bottom-nav button { - flex: 1 1 25%; - max-width: 25%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 4px; - background: transparent; - border: none; - color: var(--terminal-green); - text-decoration: none; - font-family: var(--font-mono); - padding: 8px 4px; - min-height: 60px; - } - - .mobile-bottom-nav .nav-icon { - font-size: 20px; - line-height: 1; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - } - - .mobile-bottom-nav .nav-label, - .mobile-bottom-nav span:not(.nav-icon) { - font-size: 10px; - line-height: 1; - text-transform: uppercase; - letter-spacing: 0.5px; - } - - .mobile-bottom-nav a:active, - .mobile-bottom-nav button:active { - background: rgba(0, 255, 65, 0.2); - } - - .mobile-bottom-nav a.active, - .mobile-bottom-nav button.active { - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - } - - /* ===== HIDE PREVIEW POPUP ON MOBILE ===== */ - .ticket-preview-popup { - display: none !important; - } -} - -/* ===== EXTRA SMALL PHONES (max 480px) ===== */ @media (max-width: 480px) { - .user-header-left .app-title { - font-size: 0.9rem; - } - - .stats-row { - grid-template-columns: 1fr 1fr; - } - - .stat-value { - font-size: 1.1rem; - } - - .stat-label { - font-size: 0.6rem; - } - - /* Hide more table columns on very small screens */ - .table-wrapper table { - min-width: 500px; - } - - table th:nth-child(4), - table td:nth-child(4), - table th:nth-child(7), - table td:nth-child(7), - table th:nth-child(8), - table td:nth-child(8) { - display: none; - } - - .toolbar-center .create-ticket { - font-size: 0.8rem; - padding: 0.5rem; - } -} - -/* ===== LANDSCAPE PHONE ===== */ -@media (max-width: 768px) and (orientation: landscape) { - body { - padding-bottom: 50px; - } - - .mobile-bottom-nav { - height: 50px; - } - - .mobile-bottom-nav .nav-icon { - font-size: 1rem; - } - - .mobile-bottom-nav a, - .mobile-bottom-nav button { - font-size: 0.6rem; - } - - .modal-content { - max-height: 80vh; - } - - .modal-body { - max-height: 50vh; - } + .lt-stats-grid { + grid-template-columns: 1fr; + } } diff --git a/assets/css/ticket.css b/assets/css/ticket.css index a0f3e17..8855411 100644 --- a/assets/css/ticket.css +++ b/assets/css/ticket.css @@ -1,2767 +1,266 @@ -/* ===== TICKET PAGE SPECIFIC STYLES - TERMINAL EDITION ===== */ - -/* Import terminal variables (should be loaded from dashboard.css globally) */ -/* This file uses the same CSS variables defined in dashboard.css */ - -/* Status colors for ticket page - TERMINAL STYLE */ -.status-Open, -[id="statusDisplay"].status-Open { - background-color: transparent !important; - color: var(--status-open) !important; - padding: 8px 16px; - border-radius: 0 !important; - border: 2px solid var(--status-open) !important; - font-weight: 500; - text-transform: uppercase; - font-size: 0.9em; - letter-spacing: 0.5px; - font-family: var(--font-mono); - text-shadow: 0 0 5px var(--status-open), 0 0 10px var(--status-open); -} - -.status-Open::before, -[id="statusDisplay"].status-Open::before { - content: '['; - margin-right: 4px; -} - -.status-Open::after, -[id="statusDisplay"].status-Open::after { - content: ']'; - margin-left: 4px; -} - -.status-In-Progress, -[id="statusDisplay"].status-In-Progress { - background-color: transparent !important; - color: var(--status-in-progress) !important; - padding: 8px 16px; - border-radius: 0 !important; - border: 2px solid var(--status-in-progress) !important; - font-weight: 500; - text-transform: uppercase; - font-size: 0.9em; - letter-spacing: 0.5px; - min-width: 140px; - white-space: nowrap; - display: inline-block; - font-family: var(--font-mono); - text-shadow: 0 0 5px var(--status-in-progress), 0 0 10px var(--status-in-progress); -} - -.status-In-Progress::before, -[id="statusDisplay"].status-In-Progress::before { - content: '['; - margin-right: 4px; -} - -.status-In-Progress::after, -[id="statusDisplay"].status-In-Progress::after { - content: ']'; - margin-left: 4px; -} - -.status-Closed, -[id="statusDisplay"].status-Closed { - background-color: transparent !important; - color: var(--status-closed) !important; - padding: 8px 16px; - border-radius: 0 !important; - border: 2px solid var(--status-closed) !important; - font-weight: 500; - text-transform: uppercase; - font-size: 0.9em; - letter-spacing: 0.5px; - font-family: var(--font-mono); - text-shadow: 0 0 5px var(--status-closed), 0 0 10px var(--status-closed); -} - -.status-Closed::before, -[id="statusDisplay"].status-Closed::before { - content: '['; - margin-right: 4px; -} - -.status-Closed::after, -[id="statusDisplay"].status-Closed::after { - content: ']'; - margin-left: 4px; -} - -.status-Pending { - background-color: transparent !important; - color: var(--status-pending) !important; - padding: 8px 16px; - border-radius: 0 !important; - border: 2px solid var(--status-pending) !important; - font-weight: 500; - text-transform: uppercase; - font-size: 0.9em; - letter-spacing: 0.5px; - font-family: var(--font-mono); - text-shadow: 0 0 5px var(--status-pending), 0 0 10px var(--status-pending); -} - -.status-Pending::before { - content: '[⏸'; - margin-right: 4px; -} - -.status-Pending::after { - content: ']'; - margin-left: 4px; -} - -/* Base Layout Components - TERMINAL STYLE */ -.ticket-container { - width: 90%; - height: auto; - min-height: auto; - max-width: 1800px; - margin: 40px auto; - padding: 0; - background: var(--bg-primary); - border: 3px double var(--terminal-green); - border-radius: 0; - box-shadow: none; - transition: border-color 0.3s ease; - position: relative; - font-family: var(--font-mono); - word-wrap: break-word; - overflow-wrap: break-word; -} - -/* Compatibility with ascii-frame-outer - remove duplicate corners */ -.ticket-container.ascii-frame-outer { - padding: 0; -} - -/* Remove old corner styles when using ascii-frame-outer (new frame system handles this) */ -.ticket-container.ascii-frame-outer::before { - content: '╔' !important; -} - -.ticket-container.ascii-frame-outer::after { - content: '╗' !important; -} - -/* Priority-based border colors */ -[data-priority="1"] { - border-color: var(--priority-1); -} -[data-priority="1"]::before, -[data-priority="1"]::after { - color: var(--priority-1); -} - -[data-priority="2"] { - border-color: var(--priority-2); -} -[data-priority="2"]::before, -[data-priority="2"]::after { - color: var(--priority-2); -} - -[data-priority="3"] { - border-color: var(--priority-3); -} -[data-priority="3"]::before, -[data-priority="3"]::after { - color: var(--priority-3); -} - -[data-priority="4"] { - border-color: var(--priority-4); -} -[data-priority="4"]::before, -[data-priority="4"]::after { - color: var(--priority-4); -} - -[data-priority="5"] { - border-color: var(--priority-5); -} -[data-priority="5"]::before, -[data-priority="5"]::after { - color: var(--priority-5); -} - -/* Header Components - TERMINAL STYLE */ -.ticket-header { - display: flex; - flex-direction: column; - margin-bottom: 30px; - width: 100%; - overflow-wrap: break-word; - padding: 20px; - border-bottom: 2px solid var(--terminal-green); - background: var(--bg-secondary); - position: relative; -} - -.ticket-header::before { - content: '═══════════════════════════════════════════════════════'; - display: block; - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.8rem; - margin-bottom: 10px; - opacity: 0.5; -} - -.ticket-subheader { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 10px; -} - -.ticket-details { - margin-top: 30px; - padding: 20px; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - border-radius: 0; -} - -.header-controls { - display: flex; - gap: 15px; - align-items: center; -} - -/* Metadata Fields Grid (Priority, Category, Type) */ -.ticket-metadata-fields { - margin-top: 0.75rem; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.75rem; -} - -.metadata-field { - display: flex; - flex-direction: column; -} - -.metadata-field label { - font-weight: 500; - display: block; - margin-bottom: 0.25rem; - color: var(--terminal-amber); - font-family: var(--font-mono); - font-size: 0.85rem; - text-shadow: var(--glow-amber); -} - -.metadata-select { - width: 100%; - padding: 0.25rem 0.5rem; - border-radius: 0; - border: 2px solid var(--terminal-green); - background: var(--bg-primary); - color: var(--terminal-green); - font-family: var(--font-mono); - cursor: pointer; - transition: border-color 0.2s ease; -} - -.metadata-select:hover { - border-color: var(--terminal-amber); -} - -.metadata-select:focus { - outline: none; - border-color: var(--terminal-amber); - box-shadow: 0 0 10px var(--terminal-amber); -} - -.metadata-select:disabled { - opacity: 0.6; - cursor: not-allowed; - border-color: var(--border-color); -} - -.metadata-select:disabled:hover { - border-color: var(--border-color); - box-shadow: none; -} - -/* Blinking cursor effect for active inputs */ -.title-input[contenteditable="true"]::after, -textarea[data-field="description"]:not(:disabled)::after { - content: '█'; - color: var(--terminal-green); - animation: blink-cursor 1s step-end infinite; - margin-left: 2px; -} - -/* blink-cursor keyframes defined in dashboard.css */ - -/* Mobile: Stack metadata fields */ -@media (max-width: 768px) { - .ticket-metadata-fields { - grid-template-columns: 1fr; - gap: 0.5rem; - } -} - -.ticket-id { - font-family: var(--font-mono); - margin-right: 20px; - color: var(--terminal-amber); - text-shadow: var(--glow-amber); -} - -.ticket-id::before { - content: '[UUID: '; - color: var(--terminal-green); -} - -.ticket-id::after { - content: ']'; - color: var(--terminal-green); -} - -/* Ticket Age Indicator */ -.ticket-age { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.35rem 0.75rem; - margin-top: 0.5rem; - font-family: var(--font-mono); - font-size: 0.85rem; - border-radius: 0; - border: 1px solid var(--terminal-green); - background: rgba(0, 255, 65, 0.05); -} - -.ticket-age.age-normal { - color: var(--terminal-green); - border-color: var(--terminal-green); -} - -.ticket-age.age-warning { - color: var(--terminal-amber); - border-color: var(--terminal-amber); - background: rgba(255, 176, 0, 0.1); - box-shadow: 0 0 6px rgba(255, 176, 0, 0.4); - animation: pulse-warning 2s ease-in-out infinite; - will-change: opacity; -} - -.ticket-age.age-critical { - color: var(--priority-1); - border-color: var(--priority-1); - background: rgba(255, 77, 77, 0.15); - box-shadow: 0 0 8px rgba(255, 77, 77, 0.5); - animation: pulse-critical 1s ease-in-out infinite; - will-change: opacity; -} - -@keyframes pulse-warning { - 0%, 100% { opacity: 0.75; } - 50% { opacity: 1; } -} - -@keyframes pulse-critical { - 0%, 100% { opacity: 0.7; } - 50% { opacity: 1; } -} - -/* Tab transition animations */ -@keyframes tab-fade-in { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes tab-slide-in { - from { - opacity: 0; - transform: translateX(-20px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -.ticket-age .age-icon { - font-size: 1rem; -} - -.ticket-age .age-text { - font-weight: 500; -} - -.status-priority-group { - display: flex; - gap: 10px; - align-items: center; - margin-right: 15px; -} - -.priority-indicator { - padding: 4px 8px; - border: 2px solid; - border-radius: 0; - font-weight: bold; - font-family: var(--font-mono); -} - -.priority-indicator::before { - content: '['; - margin-right: 2px; -} - -.priority-indicator::after { - content: ']'; - margin-left: 2px; -} - -/* Title Input Styles - TERMINAL */ -.title-input { - font-size: 1.2em; - font-weight: bold; - font-family: var(--font-mono); - width: 100%; - border: none; - border-bottom: 2px solid transparent; - border-radius: 0; - padding: 8px 0; - margin: 0; - word-break: break-word; - overflow-wrap: break-word; - word-wrap: break-word; - white-space: normal; - display: block; - background: transparent; - color: var(--terminal-green); - line-height: 1.4; - min-height: 1.4em; - outline: none; -} - -.title-input[contenteditable="true"] { - border-color: var(--border-color); - background: var(--bg-primary); - cursor: text; -} - -.title-input[contenteditable="true"]:hover { - border-color: var(--terminal-amber); -} - -.title-input[contenteditable="false"] { - color: var(--text-primary); - border: none; - background: transparent; - cursor: default; -} - -/* Form Elements */ -/* Helper text below form fields */ -.form-hint { - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.85rem; - margin-top: 0.5rem; -} - -.form-hint-warning { - color: var(--terminal-amber); - font-family: var(--font-mono); - font-size: 0.85rem; - margin-top: 0.5rem; -} - -/* Visibility group checkbox row */ -.visibility-groups-list { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - margin-top: 0.5rem; -} - -.group-checkbox-label { - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; -} - -/* Duplicate warning box and visibility groups (JS-toggled, need margin when visible) */ -#duplicateWarning { - margin-top: 1rem; -} - -#visibilityGroupsContainer { - margin-top: 1rem; -} - -/* Duplicate found heading */ -.duplicate-heading { - margin-bottom: 0.5rem; -} - -.detail-group { - margin-bottom: 30px; - padding: 15px; -} - -.detail-group label { - display: block; - margin-bottom: 8px; - color: var(--text-secondary); - font-weight: 500; -} - -/* Status/Priority row for CreateTicketView - 4 columns */ -.status-priority-row { - display: flex; - gap: 1rem; - flex-wrap: wrap; -} - -.detail-quarter { - flex: 1 1 calc(25% - 0.75rem); - min-width: 150px; -} - -.detail-quarter label { - display: block; - margin-bottom: 0.5rem; -} - -.detail-quarter select { - width: 100%; - padding: 0.5rem; - min-height: 40px; -} - -.full-width { - grid-column: 1 / -1; -} - -.editable { - padding: 10px; - border: 1px solid var(--border-color); - border-radius: 0; - background: var(--bg-primary); - color: var(--text-primary); - transition: border-color 0.2s ease; -} - -input.editable { - width: 100%; -} - -textarea.editable { - width: 100%; - min-height: 200px; - height: auto; - white-space: pre-wrap; - word-wrap: break-word; - overflow-wrap: break-word; - font-family: var(--font-mono); - line-height: 1.4; - resize: vertical; -} - -#description-tab { - min-height: auto; - height: auto; - padding-bottom: 20px; -} - -.editable:disabled { - background: var(--bg-secondary); - cursor: default; - border-color: transparent; - overflow: hidden; - resize: none; -} - -/* Button Styles */ -.btn { - padding: 10px 20px; - border: none; - border-radius: 0; - cursor: pointer; - font-weight: 500; - background: var(--bg-primary); - color: var(--text-primary); - transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; -} - -.btn.primary { - background: var(--terminal-amber); - color: var(--bg-primary); - border-color: var(--terminal-amber); -} - -.btn.active { - background: var(--terminal-green); - color: var(--bg-primary); - border-color: var(--terminal-green); -} - -.btn:hover { -} - -/* Comments Section - TERMINAL STYLE */ -.comments-section { - margin-top: 40px; - padding: 20px; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - border-radius: 0; -} - -/* Nested frame compatibility - remove border since ascii-frame-inner handles it */ -.ascii-frame-inner .comments-section { - border: none; - padding: 0; - margin-top: 0; -} - -.comments-section h2 { - font-family: var(--font-mono); - color: var(--terminal-amber); - text-shadow: var(--glow-amber); - text-transform: uppercase; - letter-spacing: 0.1em; -} - -.comments-section h2::before { - content: '╔═══ '; -} - -.comments-section h2::after { - content: ' ═══╗'; -} - -.comment-form { - margin-bottom: 20px; -} - -.comment-form textarea { - width: 100%; - min-height: 100px; - margin-bottom: 10px; - padding: 10px; - border-radius: 0; - border: 2px solid var(--terminal-green); - background: var(--bg-primary); - color: var(--terminal-green); - font-family: var(--font-mono); - box-sizing: border-box; -} - -.comment-form textarea::placeholder { - color: rgba(0, 255, 65, 0.5); +/* ================================================================ + ticket.css — Tinker Tickets TDS v1.2 + App-specific ticket view styles. base.css handles base components. + ================================================================ */ + +/* ── Ticket frame ────────────────────────────────────────────── */ +.lt-frame-ticket { + margin-bottom: 0.5rem; +} + +/* Priority left-border accent on ticket frame */ +.lt-frame-ticket[data-priority="1"] { border-left: 3px solid var(--lt-danger, #ff4d4d); } +.lt-frame-ticket[data-priority="2"] { border-left: 3px solid var(--lt-amber, #ffb000); } +.lt-frame-ticket[data-priority="3"] { border-left: 3px solid var(--lt-cyan, #00ffff); } +.lt-frame-ticket[data-priority="4"] { border-left: 3px solid var(--lt-text-primary, #00ff41); } +.lt-frame-ticket[data-priority="5"] { border-left: 3px solid rgba(0,255,65,0.3); } + +/* ── Ticket title row ────────────────────────────────────────── */ +.ticket-title-row { + display: flex; + align-items: flex-start; + gap: 0.75rem; + margin-bottom: 1rem; +} +.ticket-title-heading { + margin: 0; + font-size: 1.1rem; + line-height: 1.3; + flex: 1; + font-family: inherit; + font-weight: 600; +} +.ticket-id-badge { + white-space: nowrap; + padding-top: 0.15rem; + flex-shrink: 0; +} + +/* ── Edit mode — show editable fields as inputs ──────────────── */ +body.edit-mode .editable[contenteditable="true"] { + border: 1px solid var(--lt-text-primary, #00ff41); + padding: 0.2rem 0.4rem; + outline: none; + background: rgba(0,255,65,0.03); +} +body.edit-mode .editable-metadata { + pointer-events: all; +} + +/* ── Status select styling ───────────────────────────────────── */ +.lt-status-select { + font-family: inherit; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} +.lt-status-select.lt-status-open { color: var(--lt-success, #00ff41); border-color: var(--lt-success, #00ff41); } +.lt-status-select.lt-status-pending { color: var(--lt-amber, #ffb000); border-color: var(--lt-amber, #ffb000); } +.lt-status-select.lt-status-in-progress { color: var(--lt-cyan, #00ffff); border-color: var(--lt-cyan, #00ffff); } +.lt-status-select.lt-status-closed { color: var(--lt-danger, #ff4d4d); border-color: var(--lt-danger, #ff4d4d); } + +/* ── Ticket meta KV grid ─────────────────────────────────────── */ +.ticket-meta-grid { + margin-bottom: 0.75rem; +} + +/* ── Description textarea ────────────────────────────────────── */ +#ticketDescription { + width: 100%; + resize: vertical; + min-height: 16rem; + font-family: inherit; +} + +/* ── Comments ────────────────────────────────────────────────── */ +.comments-list { + display: flex; + flex-direction: column; + gap: 0.75rem; } .comment { - background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(0, 255, 65, 0.02) 100%); - padding: 15px; - border: 1px solid var(--terminal-green); - border-radius: 0; - margin-bottom: 1rem; - position: relative; - box-shadow: none; - transition: border-color 0.2s ease; - animation: comment-appear 0.4s ease-out; + position: relative; + padding: 0.75rem; + border: 1px solid rgba(0, 255, 65, 0.2); } - -@keyframes comment-appear { - from { - opacity: 0; - transform: translateX(-10px); - } - to { - opacity: 1; - transform: translateX(0); - } +.comment-reply { + margin-left: 1.5rem; + border-color: rgba(0, 255, 65, 0.12); } +.thread-depth-2 { margin-left: 3rem; } +.thread-depth-3 { margin-left: 4.5rem; } -.comment:hover { - border-color: var(--terminal-amber); -} - -.comment:hover::before, -.comment:hover::after { - color: var(--terminal-amber); -} - -/* Add corner decorations to individual comments */ -.comment::before { - content: '┌─'; - position: absolute; - top: -1px; - left: -1px; - color: var(--terminal-green); - font-size: 1rem; - line-height: 1; -} - -.comment::after { - content: '┐'; - position: absolute; - top: -1px; - right: -1px; - color: var(--terminal-green); - font-size: 1rem; - line-height: 1; +.thread-line { + position: absolute; + left: -1rem; + top: 0; + bottom: 0; + width: 2px; + background: rgba(0, 255, 65, 0.15); } .comment-header { - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 10px; - padding-bottom: 8px; - border-bottom: 1px solid var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.9em; -} - -.comment-user { - font-weight: bold; - color: var(--terminal-amber); -} - -.comment-user::before { - content: '> '; - color: var(--terminal-green); -} - -.comment-date { - color: var(--terminal-cyan); - font-size: 0.85em; -} - -.comment-date::before { - content: '['; - color: var(--terminal-green); -} - -.comment-date::after { - content: ']'; - color: var(--terminal-green); -} - -.comment-edited { - font-size: 0.85em; - color: var(--terminal-amber); - font-style: italic; - margin-left: 0.5rem; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.4rem; } +.comment-user { font-size: 0.75rem; font-weight: 600; } +.comment-date { font-size: 0.7rem; opacity: 0.6; } +.comment-actions { margin-left: auto; } .comment-text { - color: var(--terminal-green); - font-family: var(--font-mono); - line-height: 1.6; - word-wrap: break-word; - margin: 0; - padding: 0; - white-space: normal; -} - -.comment-text p { - margin: 0.5em 0; -} - -.comment-text p:first-child { - margin-top: 0; -} - -.comment-text p:last-child { - margin-bottom: 0; + font-size: 0.8rem; + line-height: 1.5; + white-space: pre-wrap; + word-break: break-word; +} +.comment-text[data-markdown] { white-space: normal; } + +.comment-edited { font-size: 0.65rem; opacity: 0.5; } + +/* Reply/edit inline textarea */ +.comment-edit-raw { + width: 100%; + margin-top: 0.4rem; + resize: vertical; + min-height: 4rem; } +/* Comment controls bar */ .comment-controls { - display: flex; - justify-content: space-between; - align-items: center; - margin: 10px 0; + display: flex; + align-items: center; + gap: 0.75rem; + margin-top: 0.5rem; } - -/* Comment Action Buttons (Edit/Delete) */ -.comment-actions { - display: flex; - gap: 0.5rem; - margin-left: auto; -} - -.comment-action-btn { - background: transparent; - border: 1px solid var(--terminal-green); - color: var(--terminal-green); - padding: 0.25rem 0.5rem; - font-size: 0.85rem; - cursor: pointer; - transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; - font-family: var(--font-mono); - line-height: 1; -} - -.comment-action-btn:hover, -.comment-action-btn:focus-visible { - background: rgba(0, 255, 65, 0.1); - outline: 2px solid var(--terminal-amber); - outline-offset: 2px; -} - -.comment-action-btn.edit-btn:hover { - color: var(--terminal-amber); - border-color: var(--terminal-amber); -} - -.comment-action-btn.delete-btn:hover { - color: var(--priority-1); - border-color: var(--priority-1); -} - -/* Comment Edit Form */ -.comment.editing { - background: rgba(0, 255, 65, 0.05); - padding: 1rem; - margin: -0.5rem; - border: 1px dashed var(--terminal-amber); -} - -.comment-edit-form { - margin-top: 0.5rem; -} - -.comment-edit-textarea { - width: 100%; - min-height: 100px; - padding: 0.75rem; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.9rem; - resize: vertical; - box-sizing: border-box; -} - -.comment-edit-textarea:focus { - outline: none; - border-color: var(--terminal-amber); - box-shadow: 0 0 10px rgba(255, 176, 0, 0.3); -} - -.comment-edit-controls { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 0.75rem; - flex-wrap: wrap; - gap: 0.5rem; -} - -.markdown-toggle-small { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.85rem; - color: var(--terminal-green); - cursor: pointer; -} - -.markdown-toggle-small input[type="checkbox"] { - width: 18px; - height: 18px; -} - -.comment-edit-buttons { - display: flex; - gap: 0.5rem; -} - -.btn-small { - padding: 0.4rem 0.75rem !important; - font-size: 0.85rem !important; - min-height: auto !important; -} - -/* ===== COMMENT THREADING STYLES ===== */ - -/* Thread depth indentation */ -.comment.thread-depth-1 { - margin-left: 2rem; -} - -.comment.thread-depth-2 { - margin-left: 4rem; -} - -.comment.thread-depth-3 { - margin-left: 6rem; -} - -/* Reduce thread indentation on mobile */ -@media (max-width: 768px) { - .comment.thread-depth-1 { - margin-left: 1rem; - } - - .comment.thread-depth-2 { - margin-left: 1.5rem; - } - - .comment.thread-depth-3 { - margin-left: 2rem; - } -} - -/* Reply styling */ -.comment.comment-reply { - position: relative; - border-left: 2px solid var(--terminal-green-dim); - margin-top: 0.5rem; - padding-left: 1rem; -} - -.comment.comment-reply::before { - content: none; -} - -/* Thread connector line */ -.comment .thread-line { - position: absolute; - left: -1rem; - top: 0; - width: 0.75rem; - height: 1rem; - border-left: 2px solid var(--terminal-green-dim); - border-bottom: 2px solid var(--terminal-green-dim); -} - -/* Comment content wrapper for threading */ -.comment .comment-content { - flex: 1; -} - -/* Replies container */ -.comment-replies { - margin-top: 0.5rem; -} - -/* Reply button styling */ -.comment-action-btn.reply-btn { - color: var(--terminal-green); - font-size: 1rem; -} - -.comment-action-btn.reply-btn:hover { - color: var(--terminal-cyan); - border-color: var(--terminal-cyan); -} - -/* Reply form inline */ -.reply-form-container { - margin-top: 1rem; - padding: 1rem; - background: rgba(0, 255, 65, 0.03); - border: 1px dashed var(--terminal-green); - animation: fadeIn 0.3s ease; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.animate-fadein { animation: fadeIn 0.3s ease; } -.is-hidden { display: none !important; } -.animate-fadeout { animation: fadeIn 0.2s ease reverse; } -.comment--deleting { opacity: 0; transform: translateX(-20px); transition: opacity 0.3s, transform 0.3s; } - -.reply-form-container .reply-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.75rem; - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.85rem; -} - -.reply-form-container .reply-header .replying-to { - color: var(--terminal-amber); -} - -.reply-form-container .close-reply-btn { - background: none; - border: 1px solid var(--terminal-red); - color: var(--terminal-red); - padding: 0.25rem 0.5rem; - cursor: pointer; - font-family: var(--font-mono); - font-size: 0.8rem; -} - -.reply-form-container .close-reply-btn:hover { - background: rgba(255, 0, 0, 0.1); -} - -.reply-form-container textarea { - width: 100%; - min-height: 80px; - padding: 0.75rem; - background: var(--bg-secondary); - border: 2px solid var(--terminal-green); - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.9rem; - resize: vertical; - margin-bottom: 0.75rem; - box-sizing: border-box; -} - -.reply-form-container textarea:focus { - outline: none; - border-color: var(--terminal-amber); - box-shadow: 0 0 10px rgba(255, 176, 0, 0.3); -} - -.reply-form-container .reply-actions { - display: flex; - justify-content: space-between; - align-items: center; -} - -.reply-form-container .reply-buttons { - display: flex; - gap: 0.5rem; -} - -/* Quote block in replies */ -.comment-text blockquote { - border-left: 3px solid var(--terminal-green-dim); - padding-left: 1rem; - margin: 0.5rem 0; - color: var(--terminal-green-dim); - font-style: italic; -} - -/* Thread collapse indicator */ -.thread-collapse-btn { - background: none; - border: none; - color: var(--terminal-green-dim); - cursor: pointer; - font-family: var(--font-mono); - font-size: 0.8rem; - padding: 0.25rem; - margin-left: 0.5rem; -} - -.thread-collapse-btn:hover { - color: var(--terminal-green); -} - -.comment.collapsed .comment-replies { - display: none; -} - -.comment.collapsed .thread-collapse-btn::after { - content: ' [+]'; -} - -.comment:not(.collapsed) .thread-collapse-btn::after { - content: ' [-]'; -} - -/* ===== END COMMENT THREADING STYLES ===== */ - -/* Comment Tabs - TERMINAL STYLE */ -.ticket-tabs { - display: flex; - gap: 0; - margin: 20px 0; - border-bottom: 2px solid var(--terminal-green); -} - -.tab-btn { - padding: 12px 24px; - border: 2px solid var(--terminal-green); - border-bottom: none; - background: var(--bg-primary); - border-radius: 0; - cursor: pointer; - font-weight: bold; - font-size: 1em; - font-family: var(--font-mono); - color: var(--terminal-green); - transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; - position: relative; - margin-right: -2px; -} - -.tab-btn::before { - content: '[ '; - color: var(--terminal-green); -} - -.tab-btn::after { - content: ' ]'; - color: var(--terminal-green); -} - -.tab-btn:hover, -.tab-btn:focus-visible { - background: rgba(0, 255, 65, 0.05); - color: var(--terminal-amber); - outline: 2px solid var(--terminal-amber); - outline-offset: -2px; -} - -.tab-btn.active { - background: var(--bg-secondary); - color: var(--terminal-amber); - border-color: var(--terminal-amber); - text-shadow: var(--glow-amber); - z-index: 1; -} - -.tab-btn.active::after { - content: ' ▼ ]'; -} - -.tab-content { - display: none; - padding: 20px; - animation: tab-fade-in 0.3s ease-out; - border: 2px solid var(--terminal-green); - border-top: none; - background: var(--bg-secondary); -} - -.tab-content.active { - display: block; -} - -/* Markdown Styles */ -.markdown-preview { - min-height: 100px; - padding: 10px; - border: 1px solid var(--border-color); - border-radius: 0; - background: var(--bg-primary); -} - -.markdown-preview h1, -.markdown-preview h2, -.markdown-preview h3 { - margin-top: 0; -} - -.markdown-preview code { - background: var(--bg-secondary); - padding: 2px 4px; - border-radius: 0; -} - -.markdown-preview pre { - background: var(--bg-secondary); - padding: 10px; - border-radius: 0; - overflow-x: auto; -} - .markdown-toggles { - display: flex; - gap: 20px; + display: flex; + gap: 0.5rem; + align-items: center; } -/* Toggle Switch */ -.switch { - position: relative; - display: inline-block; - width: 50px; - height: 24px; +/* Markdown preview */ +.markdown-preview { + margin-top: 0.5rem; + padding: 0.5rem; + border: 1px dashed rgba(0,255,65,0.3); + font-size: 0.8rem; + min-height: 2rem; } -.switch input { - opacity: 0; - width: 0; - height: 0; -} - -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: var(--bg-secondary); - transition: background-color 0.4s ease; -} - -.slider:before { - position: absolute; - content: ""; - height: 16px; - width: 16px; - left: 4px; - bottom: 4px; - background-color: var(--bg-primary); - transition: transform 0.4s ease; -} - -.slider.round { - border-radius: 0; -} - -.slider.round:before { - border-radius: 0; -} - -input:checked + .slider { - background-color: var(--terminal-green); -} - -input:checked + .slider:before { - transform: translateX(26px); -} - -.switch input:disabled + .slider { - opacity: 0.5; - cursor: not-allowed; -} - -/* Footer */ -.ticket-footer { - margin-top: 30px; - padding-top: 20px; - border-top: 1px solid var(--border-color); -} - -.back-btn { - background: var(--bg-secondary); - color: var(--text-primary); - padding: 10px 20px; - border-radius: 0; - border: 1px solid var(--border-color); - cursor: pointer; - transition: background-color 0.3s ease; -} - -.back-btn:hover { - background: var(--border-color); -} - -/* Activity Timeline Styles - ASCII TREE */ -.timeline-container { - padding: 1rem; - max-width: 800px; - font-family: var(--font-mono); -} - -.timeline-event { - display: flex; - gap: 1rem; - margin-bottom: 1.5rem; - position: relative; -} - -/* ASCII tree connector */ -.timeline-event:not(:last-child)::before { - content: '│'; - position: absolute; - left: 12px; - top: 30px; - bottom: -24px; - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 1.2rem; - line-height: 1.5rem; -} - -/* Branch connector */ -.timeline-event::after { - content: '├──'; - position: absolute; - left: 0; - top: 12px; - color: var(--terminal-green); - font-family: var(--font-mono); -} - -.timeline-event:last-child::after { - content: '└──'; -} - -.timeline-icon { - font-size: 1.2rem; - flex-shrink: 0; - width: 24px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - margin-left: 30px; -} - -.timeline-content { - flex: 1; - background: var(--bg-primary); - padding: 12px 16px; - border: 2px solid var(--terminal-green); - border-radius: 0; - position: relative; -} - -/* Terminal box corner */ -.timeline-content::before { - content: '┌─'; - position: absolute; - top: -2px; - left: -2px; - color: var(--terminal-green); - font-family: var(--font-mono); -} - -.timeline-header { - display: flex; - gap: 0.5rem; - align-items: center; - margin-bottom: 0.5rem; - font-family: var(--font-mono); -} - -.timeline-header strong { - color: var(--terminal-amber); -} - -.timeline-header strong::before { - content: '['; - color: var(--terminal-green); -} - -.timeline-header strong::after { - content: ']'; - color: var(--terminal-green); -} - -.timeline-action { - color: var(--terminal-green); - font-size: 0.9rem; -} - -.timeline-date { - margin-left: auto; - color: var(--terminal-cyan); - font-size: 0.85rem; -} - -.timeline-details { - font-size: 0.9rem; - color: var(--terminal-green); - padding-top: 0.5rem; - border-top: 1px solid var(--terminal-green); - font-family: var(--font-mono); -} - -body.dark-mode .timeline-content { - --card-bg: var(--bg-tertiary); - --border-color: var(--border-color); - --text-muted: var(--text-muted); - --text-secondary: var(--text-secondary); - background: var(--bg-tertiary); - color: var(--text-primary); -} - -body.dark-mode .timeline-header strong { - color: var(--text-primary); -} - -body.dark-mode .timeline-action { - color: var(--text-muted); -} - -body.dark-mode .timeline-date { - color: var(--text-secondary); -} -/* Status select dropdown */ -.status-select { - padding: 8px 16px; - border-radius: 0; - font-weight: 500; - text-transform: uppercase; - font-size: 0.9em; - letter-spacing: 0.5px; - border: 2px solid transparent; - cursor: pointer; - transition: opacity 0.15s ease, border-color 0.15s ease; -} - -.status-select:hover { - opacity: 0.9; - border-color: rgba(0, 255, 65, 0.4); -} - -.status-select:focus { - outline: none; - border-color: var(--terminal-amber); -} - -/* Status colors for dropdown */ -.status-select.status-open { - background-color: var(--status-open) !important; - color: var(--bg-primary) !important; -} - -.status-select.status-in-progress { - background-color: var(--status-in-progress) !important; - color: var(--bg-primary) !important; -} - -.status-select.status-closed { - background-color: var(--status-closed) !important; - color: var(--bg-primary) !important; -} - -.status-select.status-resolved { - background-color: var(--status-open) !important; - color: var(--bg-primary) !important; -} - -/* Dropdown options inherit colors */ -.status-select option { - background-color: var(--bg-primary); - color: var(--text-primary); - padding: 8px; -} - -body.dark-mode .status-select option { - background-color: var(--bg-tertiary); - color: var(--text-primary); -} - -/* Dark mode for Activity tab and general improvements */ -body.dark-mode .tab-content { - color: var(--text-primary); -} - -body.dark-mode #activity-tab { - background: var(--bg-secondary); - color: var(--text-primary); -} - -body.dark-mode #activity-tab p { - color: var(--text-primary); -} - -/* Comprehensive Dark Mode Fix - terminal CSS variables apply throughout */ - -/* Ensure ticket container has dark background */ -body.dark-mode .ticket-container { - background: var(--bg-secondary) !important; - color: var(--text-primary) !important; -} - -/* Ensure all ticket details sections are dark */ -body.dark-mode .ticket-details { - background: var(--bg-secondary) !important; - color: var(--text-primary) !important; -} - -/* Ensure detail groups are dark */ -body.dark-mode .detail-group { - background: transparent !important; - color: var(--text-primary) !important; -} - -/* Ensure labels are visible */ -body.dark-mode .detail-group label, -body.dark-mode label { - color: var(--text-secondary) !important; -} - -/* Fix textarea and input fields */ -body.dark-mode textarea, -body.dark-mode input[type="text"] { - background: var(--bg-tertiary) !important; - color: var(--text-primary) !important; - border-color: var(--border-color) !important; -} - -/* Ensure timeline event backgrounds are dark */ -body.dark-mode .timeline-event { - background: transparent !important; -} - -/* Fix any remaining white text issues */ -body.dark-mode .timeline-details { - color: var(--text-secondary) !important; - background: transparent !important; -} - -/* Fix comment sections */ -body.dark-mode .comment { - background: var(--bg-tertiary) !important; - color: var(--text-primary) !important; -} - -body.dark-mode .comment-text { - color: var(--text-primary) !important; -} - -body.dark-mode .comment-header { - color: var(--text-secondary) !important; -} - -/* Fix any form elements */ -body.dark-mode select, -body.dark-mode .editable { - background: var(--bg-tertiary) !important; - color: var(--text-primary) !important; - border-color: var(--border-color) !important; -} - -/* ===== RELATIVE TIMESTAMP CELLS ===== */ - -span.ts-cell { - cursor: help; - border-bottom: 1px dotted var(--text-muted); - text-decoration: none; -} - -/* ===== RESPONSIVE DESIGN - TERMINAL EDITION ===== */ - -/* Tablet and smaller */ -@media (max-width: 1024px) { - .ticket-container { - width: 95%; - min-width: 600px; - } - - /* Reduce timeline spacing */ - .timeline-event { - margin-bottom: 1rem; - } -} - -/* Mobile */ -@media (max-width: 768px) { - .ticket-container { - width: 98%; - min-width: unset; - margin: 20px auto; - padding: 0; - } - - /* Hide ASCII corner decorations on mobile */ - .ticket-container::before, - .ticket-container::after { - display: none; - } - - /* Simplify ticket header */ - .ticket-header::before { - display: none; - } - - .ticket-header { - padding: 15px; - } - - /* Stack header controls */ - .header-controls { - flex-direction: column; - align-items: flex-start; - } - - /* Reduce comment padding */ - .comment { - padding: 10px; - } - - /* Simplify timeline on mobile */ - .timeline-icon { - margin-left: 20px; - } - - .timeline-event::after { - font-size: 0.9rem; - } - - /* Smaller tabs */ - .tab-btn { - padding: 8px 16px; - font-size: 0.9em; - } - - /* Reduce glow effects */ - .glow-text, - [class*="glow-"] { - text-shadow: 0 0 3px currentColor; - } -} - -/* Very small mobile */ -@media (max-width: 480px) { - .ticket-container { - width: 100%; - margin: 10px 0; - } - - /* Remove timeline connectors on very small screens */ - .timeline-event::before, - .timeline-event::after { - display: none; - } - - .timeline-content::before { - display: none; - } - - .timeline-icon { - margin-left: 0; - } - - /* Stack tabs vertically */ - .ticket-tabs { - flex-direction: column; - } - - .tab-btn { - width: 100%; - border: 2px solid var(--terminal-green); - margin-bottom: 5px; - } -} - -/* ===== ATTACHMENT STYLES ===== */ - -/* Upload Zone */ +/* ── Upload zone ─────────────────────────────────────────────── */ .upload-zone { - border: 3px dashed var(--terminal-green); - border-radius: 0; - padding: 2rem; - text-align: center; - cursor: pointer; - transition: border-color 0.2s ease, background-color 0.2s ease; - background: var(--bg-primary); + border: 2px dashed rgba(0,255,65,0.4); + padding: 2rem 1rem; + text-align: center; + cursor: pointer; + transition: border-color 0.2s, background 0.2s; } - -.upload-zone:hover { - border-color: var(--terminal-amber); - background: rgba(0, 255, 65, 0.05); -} - +.upload-zone:hover, +.upload-zone:focus-visible, .upload-zone.drag-over { - border-color: var(--terminal-amber); - background: rgba(241, 196, 15, 0.1); - box-shadow: 0 0 20px rgba(241, 196, 15, 0.3); + border-color: var(--lt-text-primary, #00ff41); + background: rgba(0,255,65,0.04); + outline: none; } +.upload-zone-icon { font-size: 1.5rem; margin-bottom: 0.5rem; } +.upload-zone-content { pointer-events: none; } -.upload-zone-content { - color: var(--terminal-green); - font-family: var(--font-mono); -} - -.upload-icon { - font-size: 3rem; - margin-bottom: 1rem; -} - -.upload-hint { - font-size: 0.85rem; - color: var(--terminal-green-dim); - margin-top: 0.5rem; -} - -.upload-browse-btn { - margin-top: 1rem; -} - -/* Progress Bar */ +/* Progress bar */ .progress-bar { - width: 100%; - height: 20px; - border: 2px solid var(--terminal-green); - background: var(--bg-primary); - position: relative; - overflow: hidden; + height: 4px; + background: rgba(0,255,65,0.15); + margin-top: 0.5rem; } - .progress-fill { - height: 100%; - background: var(--terminal-green); - transition: width 0.3s ease; - position: relative; + height: 100%; + width: 0%; + background: var(--lt-text-primary, #00ff41); + transition: width 0.3s ease; +} +.upload-status-text { margin-top: 0.25rem; } + +/* Attachments list */ +.attachments-list { + display: flex; + flex-direction: column; + gap: 0.4rem; } -.progress-fill::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - transparent 0%, - rgba(255, 255, 255, 0.2) 50%, - transparent 100% - ); - animation: progress-shimmer 1.5s infinite; +/* ── Dependencies list ───────────────────────────────────────── */ +.dependencies-list { + display: flex; + flex-direction: column; + gap: 0.4rem; } -@keyframes progress-shimmer { - 0% { transform: translateX(-100%); } - 100% { transform: translateX(100%); } +/* ── Visibility groups toggle ────────────────────────────────── */ +.ticket-visibility-groups.is-hidden, +.is-hidden { display: none !important; } + +/* ── Page header utility ─────────────────────────────────────── */ +.lt-page-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0 0.75rem; + gap: 0.5rem; + flex-wrap: wrap; } -/* Attachments Grid */ -.attachments-grid { - display: flex; +/* ── lt-select-sm ────────────────────────────────────────────── */ +.lt-select-sm { + font-size: 0.75rem; + padding: 0.2rem 0.4rem; +} + +/* ── lt-flex utilities ───────────────────────────────────────── */ +.lt-flex-align-center { align-items: center; } +.lt-flex-gap-sm { gap: 0.5rem; } +.lt-flex-wrap { flex-wrap: wrap; } + +/* ── Ticket tabs margin ──────────────────────────────────────── */ +.lt-tabs { + margin-bottom: 0; +} +.lt-tab-panel { + margin-top: 0.5rem; +} + +/* ── Settings section (also used in ticket settings modal) ───── */ +.settings-section { + margin-bottom: 1.25rem; +} +.settings-section:last-child { margin-bottom: 0; } + +.shortcut-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.2rem 0; +} +kbd { + font-family: inherit; + font-size: 0.7rem; + padding: 0.1rem 0.35rem; + border: 1px solid rgba(0,255,65,0.4); +} + +/* ── lt-mb-md ────────────────────────────────────────────────── */ +.lt-mb-md { margin-bottom: 1rem; } + +/* ── Responsive ──────────────────────────────────────────────── */ +@media (max-width: 640px) { + .ticket-title-row { flex-direction: column; - gap: 0.75rem; -} - -.attachment-item { - display: flex; - align-items: center; - gap: 1rem; - padding: 0.75rem 1rem; - border: 1px solid var(--terminal-green); - background: var(--bg-primary); - transition: border-color 0.15s ease, background-color 0.15s ease; -} - -.attachment-item:hover { - border-color: var(--terminal-amber); - background: rgba(0, 255, 65, 0.05); -} - -.attachment-icon { - font-size: 1.5rem; - flex-shrink: 0; -} - -.attachment-info { - flex: 1; - min-width: 0; -} - -.attachment-name { - font-family: var(--font-mono); - font-size: 0.95rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.attachment-name a { - color: var(--terminal-green); - text-decoration: none; -} - -.attachment-name a:hover { - color: var(--terminal-amber); - text-decoration: underline; -} - -.attachment-meta { - font-size: 0.8rem; - color: var(--terminal-green-dim); - font-family: var(--font-mono); - margin-top: 0.25rem; -} - -.attachment-actions { - display: flex; - gap: 0.5rem; - flex-shrink: 0; -} - -.btn-small { - padding: 0.25rem 0.5rem; - font-size: 0.85rem; -} - -.btn-danger { - color: var(--priority-1); - border-color: var(--priority-1); -} - -.btn-danger:hover { - background: var(--priority-1); - color: var(--bg-primary); -} - -/* Mobile responsiveness for attachments */ -@media (max-width: 768px) { - .attachment-item { - flex-wrap: wrap; - } - - .attachment-info { - flex-basis: calc(100% - 4rem); - } - - .attachment-actions { - flex-basis: 100%; - justify-content: flex-end; - margin-top: 0.5rem; - } -} - -/* ===== @MENTION HIGHLIGHTING STYLES ===== */ - -/* Mention styling in comments */ -.mention { - color: var(--terminal-cyan); - background: rgba(0, 255, 255, 0.1); - padding: 0.1rem 0.3rem; - border-radius: 0; - font-weight: 600; - cursor: pointer; - transition: background-color 0.15s ease; -} - -.mention:hover { - background: rgba(0, 255, 255, 0.2); -} - -.mention::before { - content: '@'; -} - -/* Mention Autocomplete Dropdown */ -.mention-autocomplete { - position: absolute; - background: var(--bg-primary); - border: 2px solid var(--terminal-green); - border-radius: 0; - max-height: 200px; - overflow-y: auto; - z-index: var(--z-popover); - display: none; - min-width: 200px; - box-shadow: 0 0 10px rgba(0, 255, 65, 0.3); -} - -.mention-autocomplete.active { - display: block; -} - -.mention-option { - padding: 0.5rem 1rem; - cursor: pointer; - font-family: var(--font-mono); - color: var(--terminal-green); - transition: background-color 0.15s ease, color 0.15s ease; - display: flex; - align-items: center; - gap: 0.5rem; -} - -.mention-option:hover, -.mention-option.selected { - background: rgba(0, 255, 65, 0.1); - color: var(--terminal-amber); -} - -.mention-option .mention-username { - font-weight: bold; -} - -.mention-option .mention-displayname { - color: var(--terminal-green-dim); - font-size: 0.85rem; -} - -/* ===== RICH TEXT EDITOR TOOLBAR ===== */ - -.editor-toolbar { - display: flex; - gap: 0.25rem; - padding: 0.5rem; - border: 2px solid var(--terminal-green); - border-bottom: none; - background: var(--bg-secondary); - flex-wrap: wrap; -} - -.editor-toolbar button { - padding: 0.4rem 0.6rem; - background: var(--bg-primary); - border: 1px solid var(--terminal-green); - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.85rem; - cursor: pointer; - transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; - min-width: 32px; -} - -.editor-toolbar button:hover { - background: rgba(0, 255, 65, 0.1); - color: var(--terminal-amber); - border-color: var(--terminal-amber); -} - -.editor-toolbar button:active { - background: rgba(0, 255, 65, 0.2); -} - -.editor-toolbar .toolbar-separator { - width: 1px; - background: var(--terminal-green-dim); - margin: 0 0.5rem; -} - -/* Connect toolbar to textarea */ -.editor-with-toolbar textarea { - border-top: none; -} - -/* ===== EXPORT BUTTON ===== */ - -.export-dropdown { - position: relative; - display: inline-block; -} - -.export-dropdown-content { - display: none; - position: absolute; - right: 0; - background: var(--bg-primary); - border: 2px solid var(--terminal-green); - min-width: 150px; - z-index: var(--z-dropdown); - box-shadow: 0 0 10px rgba(0, 255, 65, 0.3); -} - -.export-dropdown:hover .export-dropdown-content { - display: block; -} - -.export-dropdown-content a { - display: block; - padding: 0.5rem 1rem; - color: var(--terminal-green); - text-decoration: none; - font-family: var(--font-mono); - transition: background-color 0.15s ease, color 0.15s ease; -} - -.export-dropdown-content a:hover { - background: rgba(0, 255, 65, 0.1); - color: var(--terminal-amber); -} - -/* ===== ENHANCED MOBILE RESPONSIVE - TICKET PAGE ===== */ -@media (max-width: 768px) { - /* Prevent iOS zoom on input focus */ - input[type="text"], - input[type="email"], - input[type="search"], - textarea, - select { - font-size: 16px !important; - } - - /* Touch-friendly button sizes */ - .btn, - button, - .tab-btn { - min-height: 44px; - padding: 12px 16px; - } - - /* Stack ticket metadata vertically */ - .ticket-metadata-fields { - grid-template-columns: 1fr !important; - gap: 1rem; - } - - .metadata-field { - width: 100%; - } - - /* Stack header controls */ - .ticket-subheader { - flex-direction: column; - gap: 1rem; - } - - .header-controls { - width: 100%; - flex-direction: column; - } - - .status-priority-group { - width: 100%; - margin-right: 0; - } - - .status-select { - width: 100%; - } - - /* Full width buttons */ - #editButton { - width: 100%; - } - - /* Improve comment form */ - .comment-form textarea { - width: 100%; - min-height: 120px; - } - - .comment-controls { - flex-direction: column; - gap: 1rem; - } - - .markdown-toggles { - flex-direction: column; - gap: 0.75rem; - } - - /* Improve assignment dropdown */ - .ticket-assignment { - flex-direction: column; - align-items: flex-start; - } - - .assignment-select { - width: 100%; - min-height: 44px; - } - - /* Full width tabs with better spacing */ - .ticket-tabs { - flex-wrap: wrap; - } - - .tab-btn { - flex: 1 1 auto; - text-align: center; - min-width: 100px; - } - - /* Improve upload zone */ - .upload-zone { - padding: 1.5rem; - } - - .upload-zone-content p { - font-size: 0.9rem; - } - - /* Improve timeline readability */ - .timeline-header { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .timeline-date { - margin-left: 0; - } -} - -/* ===== INLINE STYLE REPLACEMENTS ===== */ -/* These classes replace inline styles from TicketView.php */ - -.ticket-user-info { - font-size: 0.85rem; - color: var(--text-muted); - margin-top: 0.25rem; -} - -.ticket-assignment { - margin-top: 0.5rem; -} - -.ticket-assignment-label { - font-weight: 500; - margin-right: 0.5rem; -} - -.assignment-select { - padding: 0.25rem 0.5rem; - border-radius: 0; - border: 2px solid var(--terminal-green); -} - -/* Visibility settings section */ -.ticket-visibility-settings { - margin-top: 0.75rem; - padding-top: 0.75rem; - border-top: 1px solid var(--terminal-green); -} - -.visibility-settings-grid { - display: grid; - grid-template-columns: 1fr 2fr; - gap: 0.75rem; -} - -.visibility-groups-edit { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.visibility-group-label { - display: flex; - align-items: center; - gap: 0.3rem; - cursor: pointer; -} - -/* Metadata labels */ -.metadata-label { - font-weight: 500; - display: block; - margin-bottom: 0.25rem; - color: var(--terminal-amber); - font-family: var(--font-mono); - font-size: 0.85rem; -} - -.metadata-label-cyan { - color: var(--terminal-cyan); -} - -/* Generic full-width select styling */ -.full-width-select { - width: 100%; - padding: 0.25rem 0.5rem; - border-radius: 0; - border: 2px solid var(--terminal-green); - background: var(--bg-primary); - color: var(--terminal-green); - font-family: var(--font-mono); -} - -/* Add dependency form */ -.add-dependency-form { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - align-items: center; -} - -.dependency-input { - flex: 1; - min-width: 150px; - padding: 0.5rem; - border: 2px solid var(--terminal-green); - background: var(--bg-primary); - color: var(--terminal-green); - font-family: var(--font-mono); -} - -.dependency-type-select { - padding: 0.5rem; - border: 2px solid var(--terminal-green); - background: var(--bg-primary); - color: var(--terminal-green); - font-family: var(--font-mono); -} - -/* Dependency list items */ -.dependency-group h4 { - color: var(--terminal-amber); - margin: 0.5rem 0; -} - -.dependency-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem; - border-bottom: 1px dashed var(--terminal-green-dim); -} - -.dependency-item a { - color: var(--terminal-green); -} - -.dependency-item .dependency-title { - margin-left: 0.5rem; -} - -.dependency-item .status-badge { - margin-left: 0.5rem; - font-size: 0.8rem; -} - -.dependency-item .btn-small { - padding: 0.25rem 0.5rem; - font-size: 0.8rem; -} - -/* Upload progress */ -.upload-progress { - margin-top: 1rem; -} - -.upload-status-text { - margin-top: 0.5rem; - color: var(--terminal-green); - font-family: var(--font-mono); - font-size: 0.85rem; -} - -/* Frame inner spacing */ -.frame-inner-spacing { - margin-bottom: 1rem; -} - -.frame-inner-spacing-top { - margin-top: 1rem; -} - -/* No groups message */ -.no-groups-message { - color: var(--text-muted); - font-size: 0.85rem; -} - -/* ===== INTERMEDIATE RESPONSIVE BREAKPOINTS ===== */ - -/* Large desktop (1200px+) */ -@media (min-width: 1200px) { - .ticket-container { - max-width: 1600px; - } - - .ticket-metadata-fields { - grid-template-columns: repeat(4, 1fr); - } - - .visibility-settings-grid { - grid-template-columns: 1fr 3fr; - } -} - -/* Medium desktop (900px - 1199px) */ -@media (min-width: 900px) and (max-width: 1199px) { - .ticket-container { - width: 95%; - max-width: 1200px; - } - - .ticket-metadata-fields { - grid-template-columns: repeat(3, 1fr); - } -} - -/* Tablet landscape (600px - 899px) */ -@media (min-width: 600px) and (max-width: 899px) { - .ticket-container { - width: 98%; - min-width: unset; - } - - .ticket-metadata-fields { - grid-template-columns: repeat(2, 1fr); - } - - .visibility-settings-grid { - grid-template-columns: 1fr; - } - - .header-controls { - flex-wrap: wrap; - } - - .tab-btn { - padding: 10px 18px; - font-size: 0.95em; - } - - .timeline-event { - margin-bottom: 1.25rem; - } - - .comment { - padding: 12px; - } -} - -/* ===== COMPREHENSIVE TICKET PAGE MOBILE STYLES ===== */ -@media (max-width: 768px) { - /* Prevent iOS zoom on input focus */ - input, select, textarea { - font-size: 16px !important; - } - - /* Add padding at bottom for potential mobile nav */ - body { - padding-bottom: 70px; - } - - /* Better header on mobile */ - .user-header { - position: sticky; - top: 0; - z-index: var(--z-dropdown); - padding: 0.5rem 0.75rem; - } - - .user-header-right .user-name { - display: none; - } - - .back-link { - font-size: 0.9rem; - padding: 0.5rem 0; - min-height: 44px; - display: inline-flex; - align-items: center; - } - - /* Ticket container - full width on mobile, minimal borders */ - .ticket-container { - width: 100%; - margin: 0; - border: none; - padding: 0; - } - - .ticket-container.ascii-frame-outer { - border: none; - padding: 0; - } - - /* Remove all decorative corners on mobile */ - .ticket-container::before, - .ticket-container::after, - .ticket-container .bottom-left-corner, - .ticket-container .bottom-right-corner { - display: none; - } - - .ascii-section-header { - font-size: 1rem; - padding: 0.75rem 0.75rem; - margin: 0; - border-bottom: 2px solid var(--terminal-green); - } - - /* Remove all nested padding - go edge to edge */ - .ascii-content { - padding: 0; - } - - .ascii-frame-inner { - padding: 0.75rem; - border: none; - margin: 0; - } - - /* Nested ascii-frame-inner should have no extra padding */ - .ascii-frame-inner .ascii-frame-inner { - padding: 0.5rem; - } - - /* Detail group full width */ - .detail-group.full-width { - padding: 0; - margin: 0; - width: 100%; - } - - /* Better ticket header layout */ - .ticket-header { - flex-direction: column; - align-items: flex-start; - gap: 0.75rem; - } - - .ticket-header h2 { - font-size: 1.1rem; - line-height: 1.3; - word-break: break-word; - } - - .ticket-subheader { - width: 100%; - } - - /* Ticket metadata fields - stack on mobile */ - .ticket-metadata-fields { - grid-template-columns: 1fr !important; - gap: 0.75rem !important; - } - - .metadata-field { - display: flex; - flex-direction: column; - gap: 0.25rem; - } - - .metadata-field label { - font-size: 0.85rem !important; - } - - .metadata-field select, - .metadata-select { - width: 100% !important; - min-height: 48px !important; - padding: 0.75rem !important; - font-size: 16px !important; - } - - /* Assignment select */ - .ticket-assignment { - display: flex; - flex-direction: column; - gap: 0.25rem; - margin-top: 0.75rem !important; - } - - .ticket-assignment label { - font-size: 0.85rem; - } - - .assignment-select, - #assignedToSelect { - width: 100% !important; - min-height: 48px !important; - padding: 0.75rem !important; - font-size: 16px !important; - } - - /* Ticket user info */ - .ticket-user-info { - font-size: 0.8rem !important; - line-height: 1.4; - } - - .ticket-id { - font-size: 0.85rem; - word-break: break-all; - } - - /* Status display and select */ - .status-display, - #statusDisplay { - display: block; - width: 100%; - text-align: center; - margin: 0.5rem 0; - } - - #statusSelect { - width: 100%; - min-height: 48px; - font-size: 16px !important; - } - - /* Full width title on mobile */ - .ticket-title, - .title-input { - font-size: 1rem; - word-break: break-word; - } - - /* Better tabs on mobile - equal width, scrollable */ - .ticket-tabs { - display: flex; - flex-wrap: nowrap; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - gap: 0; - background: var(--bg-primary); - border-bottom: 2px solid var(--terminal-green); - } - - .tab-btn { - flex: 1 0 auto; - min-width: 80px; - padding: 1rem 0.75rem; - white-space: nowrap; - min-height: 52px; - font-size: 0.85rem; - border: none; - border-bottom: 3px solid transparent; - } - - .tab-btn.active { - border-bottom-color: var(--terminal-amber); - background: rgba(255, 176, 0, 0.1); - } - - /* Tab content areas - full width */ - .tab-content { - padding: 0; - } - - .tab-content.active { - display: block; - } - - /* Description section */ - .ticket-description, - #description-tab { - padding: 1rem; - width: 100%; - } - - /* Comments section */ - .comments-section, - #comments-tab { - padding: 1rem; - width: 100%; - } - - /* Dependencies section */ - #dependencies-tab { - padding: 1rem; - } - - /* Files section */ - #files-tab { - padding: 1rem; - } - - /* Activity section */ - #activity-tab { - padding: 1rem; - } - - /* Description textarea - full width */ - .editable, - textarea.editable, - #ticketDescription { - width: 100% !important; - min-height: 200px; - padding: 1rem; - font-size: 16px !important; - line-height: 1.6; - border: 2px solid var(--terminal-green); - } - - /* Markdown preview */ - .markdown-preview, - #markdownPreview { - padding: 1rem; - font-size: 1rem; - line-height: 1.6; - } - - /* Better comment input */ - .comment-form textarea { - width: 100%; - min-height: 120px; - font-size: 16px; - padding: 1rem; - } - - .comment-form .btn { - width: 100%; - min-height: 48px; - margin-top: 0.5rem; - } - - /* Markdown toolbar scroll */ - .markdown-toolbar { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - flex-wrap: nowrap; - padding: 0.5rem; - gap: 0.25rem; - } - - .markdown-toolbar button { - min-width: 44px; - min-height: 44px; - flex-shrink: 0; - font-size: 1rem; - } - - /* Comment styling */ - .comment { - padding: 1rem; - } - - .comment-header { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - /* Dependencies list */ - .dependency-item { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .dependency-item .btn { - align-self: flex-end; - } - - /* Attachments grid */ - .attachments-grid { - grid-template-columns: 1fr; - } - - .attachment-item { - padding: 1rem; - } - - /* Activity timeline */ - .timeline-item { - padding: 0.75rem; - } - - .timeline-content { - font-size: 0.9rem; - } - - /* Status select */ - #statusSelect { - width: 100%; - min-height: 48px; - } - - /* Back link more prominent */ - .back-link { - display: inline-flex; - align-items: center; - padding: 0.5rem 1rem; - min-height: 44px; - } - - /* Comment actions on mobile */ - .comment-header { - flex-direction: column; - align-items: flex-start; - } - - .comment-actions { - width: 100%; - justify-content: flex-end; - margin-top: 0.5rem; - } - - .comment-action-btn { - min-height: 44px; - min-width: 44px; - padding: 0.5rem; - } - - .comment-edit-controls { - flex-direction: column; - gap: 0.75rem; - } - - .comment-edit-buttons { - width: 100%; - } - - .comment-edit-buttons .btn { - flex: 1; - min-height: 44px; - } - - /* CreateTicketView - Stack metadata fields */ - .status-priority-row { - flex-direction: column !important; - gap: 1rem !important; - } - - .detail-quarter { - width: 100% !important; - flex: none !important; - } - - .detail-quarter select, - .detail-quarter input { - width: 100% !important; - min-height: 48px !important; - font-size: 16px !important; - } - - /* Form inputs in CreateTicketView */ - .detail-group input[type="text"], - .detail-group textarea, - .detail-group select { - width: 100% !important; - min-height: 48px !important; - padding: 0.75rem !important; - font-size: 16px !important; - } - - .detail-group textarea { - min-height: 150px !important; - } - - /* Visibility groups */ - .visibility-groups-list { - flex-direction: column !important; - } - - .visibility-groups-list label { - min-height: 44px; - padding: 0.5rem; - background: rgba(0, 255, 65, 0.05); - border-radius: 0; - } -} - -/* Extra small screens for ticket page */ -@media (max-width: 480px) { - .ticket-id { - font-size: 0.9rem; - } - - .ticket-title { - font-size: 1rem; - } - - .tab-btn { - font-size: 0.85rem; - padding: 0.5rem 0.75rem; - } - - .ticket-meta-item { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .ticket-meta-value { - text-align: left; - width: 100%; - } - - .ticket-meta-item select { - max-width: 100%; - width: 100%; - } + } + .ticket-meta-grid .lt-kv-grid { + grid-template-columns: 1fr; + } + .comment-reply { margin-left: 0.75rem; } + .thread-depth-2 { margin-left: 1.5rem; } + .thread-depth-3 { margin-left: 2.25rem; } } diff --git a/assets/js/base.js b/assets/js/base.js index ebb61fa..cd20236 100644 --- a/assets/js/base.js +++ b/assets/js/base.js @@ -1,5 +1,5 @@ /** - * LOTUSGUILD TERMINAL DESIGN SYSTEM v1.0 — base.js + * 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) @@ -22,7 +22,25 @@ * 14. Sortable Table Headers * 15. Stats Widget Filtering * 16. Auto-refresh Manager - * 17. Initialisation + * --- 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) { @@ -31,14 +49,6 @@ /* ---------------------------------------------------------------- 1. HTML ESCAPE ---------------------------------------------------------------- */ - /** - * Escape a value for safe insertion into innerHTML. - * Always prefer textContent/innerText when possible, but use this - * when you must build HTML strings (e.g. template literals for lists). - * - * @param {*} str - * @returns {string} - */ function escHtml(str) { if (str === null || str === undefined) return ''; return String(str) @@ -52,79 +62,70 @@ /* ---------------------------------------------------------------- 2. TOAST NOTIFICATIONS ---------------------------------------------------------------- - Usage: - lt.toast.success('Ticket saved'); - lt.toast.error('Network error', 5000); - lt.toast.warning('Rate limit approaching'); - lt.toast.info('Workflow started'); + 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; - /** - * @param {string} message - * @param {'success'|'error'|'warning'|'info'} type - * @param {number} [duration=3500] ms before auto-dismiss - */ function showToast(message, type, duration) { type = type || 'info'; duration = duration || 3500; - - if (_toastActive) { - _toastQueue.push({ message, type, duration }); - return; - } + 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.querySelector('.lt-toast-container'); + let container = document.getElementById('lt-toast-container'); if (!container) { container = document.createElement('div'); - container.className = 'lt-toast-container'; + 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'); + const iconEl = document.createElement('span'); iconEl.className = 'lt-toast-icon'; iconEl.textContent = '[' + (icons[type] || 'i') + ']'; - const msgEl = document.createElement('span'); + 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); - /* Auto-dismiss */ const timer = setTimeout(() => _dismissToast(toast), duration); toast._lt_timer = timer; - - /* Optional audio feedback */ _beep(type); } function _dismissToast(toast) { if (!toast || !toast.parentNode) return; clearTimeout(toast._lt_timer); - toast.classList.add('lt-toast--hiding'); + toast.style.opacity = '0'; + toast.style.transition = 'opacity 0.3s ease'; setTimeout(() => { if (toast.parentNode) toast.parentNode.removeChild(toast); _toastActive = false; @@ -144,9 +145,6 @@ /* ---------------------------------------------------------------- 3. TERMINAL AUDIO - ---------------------------------------------------------------- - Usage: lt.beep('success' | 'error' | 'info') - Silent-fails if Web Audio API is unavailable. ---------------------------------------------------------------- */ function _beep(type) { try { @@ -155,74 +153,109 @@ const gain = ctx.createGain(); osc.connect(gain); gain.connect(ctx.destination); - osc.frequency.value = type === 'success' ? 880 - : type === 'error' ? 220 - : 440; + osc.frequency.value = type === 'success' ? 880 : type === 'error' ? 220 : 440; osc.type = 'sine'; - gain.gain.setValueAtTime(0.08, ctx.currentTime); - gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.12); + 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.12); - } catch (_) { /* silently fail */ } + osc.stop(ctx.currentTime + 0.1); + } catch (_) {} } /* ---------------------------------------------------------------- 4. MODAL MANAGEMENT ---------------------------------------------------------------- - Usage: - lt.modal.open('my-modal-id'); - lt.modal.close('my-modal-id'); - lt.modal.closeAll(); - - HTML contract: - + 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; - el.classList.add('show'); - el.setAttribute('aria-hidden', 'false'); - document.body.style.overflow = 'hidden'; - /* Focus first focusable element */ - const first = el.querySelector('button, input, select, textarea, [tabindex]:not([tabindex="-1"])'); + // 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) return; - el.classList.remove('show'); + if (!el || !el.classList.contains('is-open')) return; + el.classList.remove('is-open'); el.setAttribute('aria-hidden', 'true'); - document.body.style.overflow = ''; + _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.show').forEach(closeModal); + 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(); + } } - /* Delegated close handlers */ document.addEventListener('click', function (e) { - /* Click on overlay backdrop (outside .lt-modal) */ - if (e.target.classList.contains('lt-modal-overlay')) { - closeModal(e.target); - return; - } - /* [data-modal-close] button */ + 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); - } - /* [data-modal-open="id"] trigger */ + 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); }); @@ -232,42 +265,42 @@ /* ---------------------------------------------------------------- 5. TAB MANAGEMENT ---------------------------------------------------------------- - Usage: - lt.tabs.init(); // auto-wires all .lt-tab elements - lt.tabs.switch('tab-panel-id'); - - HTML contract: -
- - -
-
…
-
…
- - Persistence: localStorage key 'lt_activeTab_' + lt.tabs.init() + lt.tabs.switch('panel-id') ---------------------------------------------------------------- */ function switchTab(panelId) { - document.querySelectorAll('.lt-tab').forEach(t => t.classList.remove('active')); + 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'); + 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() { - /* Restore from localStorage */ + if (_tabsInitialized) return; _tabsInitialized = true; try { const saved = localStorage.getItem('lt_activeTab_' + location.pathname); - if (saved && document.getElementById(saved)) { switchTab(saved); return; } + if (saved && document.getElementById(saved)) { switchTab(saved); } } catch (_) {} - - /* Wire click handlers */ - document.querySelectorAll('.lt-tab[data-tab]').forEach(btn => { - btn.addEventListener('click', () => switchTab(btn.dataset.tab)); + 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); } + }); + }); }); } @@ -276,44 +309,45 @@ /* ---------------------------------------------------------------- 6. BOOT SEQUENCE ANIMATION ---------------------------------------------------------------- - Usage: - lt.boot.run('APP NAME'); // shows once per session - lt.boot.run('APP NAME', true); // force show even if already seen - - HTML contract (add to , hidden by default): - + 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.0'; - const innerWidth = 43; - const leftPad = Math.max(0, Math.floor((innerWidth - titleStr.length) / 2)); - const rightPad = Math.max(0, innerWidth - titleStr.length - leftPad); - const messages = [ - '╔═══════════════════════════════════════════╗', - '║' + ' '.repeat(leftPad) + titleStr + ' '.repeat(rightPad) + '║', - '║ BOOTING SYSTEM... ║', - '╚═══════════════════════════════════════════╝', + 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 ] Checking kernel modules...', - '[ OK ] Mounting filesystem...', - '[ OK ] Initializing database connection...', - '[ OK ] Loading user session...', - '[ OK ] Applying security headers...', - '[ OK ] Rendering terminal interface...', + '[ 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', '', - '> SYSTEM READY ✓', + '> ALL SYSTEMS NOMINAL — ' + name, '', ]; @@ -326,15 +360,12 @@ } else { clearInterval(interval); setTimeout(() => { - overlay.classList.add('fade-out'); - setTimeout(() => { - overlay.style.display = 'none'; - overlay.classList.remove('fade-out'); - }, 520); - }, 400); - sessionStorage.setItem(storageKey, '1'); + overlay.style.transition = 'opacity 0.5s ease'; + overlay.style.opacity = '0'; + setTimeout(() => { overlay.style.display = 'none'; overlay.style.opacity = ''; overlay.style.transition = ''; }, 520); + }, 500); } - }, 80); + }, 65); } const boot = { run: runBoot }; @@ -342,106 +373,63 @@ /* ---------------------------------------------------------------- 7. KEYBOARD SHORTCUTS ---------------------------------------------------------------- - Register handlers: - lt.keys.on('ctrl+k', () => searchBox.focus()); - lt.keys.on('?', showHelpModal); - lt.keys.on('Escape', lt.modal.closeAll); - - Built-in defaults (activate with lt.keys.initDefaults()): - ESC → close all modals - ? → show #lt-keys-help modal if present - Ctrl/⌘+K → focus .lt-search-input + 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+') /* treat Cmd as Ctrl */ - .replace(/meta\+/i, 'ctrl+') - .toLowerCase(); + 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)]; - } + 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; - - /* Build the combo string */ + 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(); - - /* Always fire ESC, Ctrl combos regardless of input focus */ const alwaysFire = e.key === 'Escape' || e.ctrlKey || e.metaKey; - if (inInput && !alwaysFire) return; - const handler = _keyHandlers[combo]; - if (handler) { - e.preventDefault(); - handler(e); - } + if (handler) { e.preventDefault(); handler(e); } }); function initDefaultKeys() { - registerKey('Escape', closeAllModals); - registerKey('?', () => { - const helpModal = document.getElementById('lt-keys-help'); - if (helpModal) openModal(helpModal); - }); + registerKey('escape', closeAllModals); + registerKey('?', () => { const h = document.getElementById('lt-keys-help'); if (h) openModal(h); }); registerKey('ctrl+k', () => { - const search = document.querySelector('.lt-search-input'); - if (search) { search.focus(); search.select(); } + 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, - }; + const keys = { on: registerKey, off: unregisterKey, initDefaults: initDefaultKeys }; /* ---------------------------------------------------------------- 8. SIDEBAR COLLAPSE ---------------------------------------------------------------- - Usage: lt.sidebar.init(); - - HTML contract: - + 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; - - /* Restore state */ const collapsed = sessionStorage.getItem('lt_sidebar_' + btn.dataset.sidebarToggle) === '1'; - if (collapsed) { - sidebar.classList.add('collapsed'); - btn.textContent = '▶'; - } - + if (collapsed) { sidebar.classList.add('collapsed'); btn.textContent = '▶'; } btn.addEventListener('click', () => { sidebar.classList.toggle('collapsed'); - const isCollapsed = sidebar.classList.contains('collapsed'); - btn.textContent = isCollapsed ? '▶' : '◀'; - try { sessionStorage.setItem('lt_sidebar_' + btn.dataset.sidebarToggle, isCollapsed ? '1' : '0'); } catch (_) {} + const c = sidebar.classList.contains('collapsed'); + btn.textContent = c ? '▶' : '◀'; + try { sessionStorage.setItem('lt_sidebar_' + btn.dataset.sidebarToggle, c ? '1' : '0'); } catch (_) {} }); }); } @@ -451,14 +439,7 @@ /* ---------------------------------------------------------------- 9. CSRF TOKEN HELPERS ---------------------------------------------------------------- - PHP apps: window.CSRF_TOKEN is set by the view via: - - Node apps: set via: window.CSRF_TOKEN = '<%= csrfToken %>'; - Flask: use Flask-WTF meta tag or inject via template. - - Usage: - const headers = lt.csrf.headers(); - fetch('/api/foo', { method: 'POST', headers: lt.csrf.headers(), body: … }); + lt.csrf.headers() ---------------------------------------------------------------- */ function csrfHeaders() { const token = global.CSRF_TOKEN || ''; @@ -470,169 +451,106 @@ /* ---------------------------------------------------------------- 10. FETCH HELPERS ---------------------------------------------------------------- - Usage: - const data = await lt.api.get('/api/tickets'); - const res = await lt.api.post('/api/update_ticket.php', { id: 1, status: 'Closed' }); - const res = await lt.api.delete('/api/ticket_dependencies.php', { id: 5 }); - - All methods: - - Automatically set Content-Type: application/json - - Attach CSRF token header - - Parse JSON response - - On non-2xx: throw an Error with the server's error message + lt.api.get(url) + lt.api.post(url, body) + lt.api.put / patch / delete ---------------------------------------------------------------- */ async function apiFetch(method, url, body) { - const opts = { - method, - headers: Object.assign( - { 'Content-Type': 'application/json' }, - csrfHeaders() - ), - }; - if (body !== undefined) opts.body = JSON.stringify(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 (networkErr) { - throw new Error('Network error: ' + networkErr.message); - } - + 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); - } + 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, body) => apiFetch('POST', url, body), - put: (url, body) => apiFetch('PUT', url, body), - patch: (url, body) => apiFetch('PATCH', url, body), - delete: (url, body) => apiFetch('DELETE', url, body), + 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) ---------------------------------------------------------------- */ - /** - * Returns a human-readable relative time string. - * @param {string|number|Date} value ISO string, Unix ms, or Date - * @returns {string} e.g. "5m ago", "2h ago", "3d ago" - */ 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'; + 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'; } - /** - * Format seconds → "1h 23m 45s" style. - * @param {number} secs - * @returns {string} - */ function formatUptime(secs) { secs = Math.floor(secs); - const d = Math.floor(secs / 86400); - const h = Math.floor((secs % 86400) / 3600); - const m = Math.floor((secs % 3600) / 60); - const s = secs % 60; - const parts = []; - if (d) parts.push(d + 'd'); - if (h) parts.push(h + 'h'); - if (m) parts.push(m + 'm'); - if (!d) parts.push(s + 's'); - return parts.join(' ') || '0s'; + 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'; } - /** - * Format an ISO datetime string for display. - * Uses the timezone configured in window.APP_TIMEZONE (PHP apps) - * or falls back to the browser locale. - */ function formatDate(value) { const date = value instanceof Date ? value : new Date(value); if (isNaN(date)) return '—'; - const tz = global.APP_TIMEZONE || undefined; try { return date.toLocaleString(undefined, { - timeZone: tz, - year: 'numeric', month: '2-digit', day: '2-digit', - hour: '2-digit', minute: '2-digit', + timeZone: global.APP_TIMEZONE || undefined, + year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', }); - } catch (_) { - return date.toLocaleString(); - } + } catch (_) { return date.toLocaleString(); } } const time = { ago: timeAgo, uptime: formatUptime, format: formatDate }; /* ---------------------------------------------------------------- 12. BYTES FORMATTING + ---------------------------------------------------------------- + lt.bytes.format(n) ---------------------------------------------------------------- */ - /** - * @param {number} bytes - * @returns {string} e.g. "1.23 GB" - */ function formatBytes(bytes) { - if (bytes === null || bytes === undefined) return '—'; - const units = ['B', 'KB', 'MB', 'GB', 'TB']; - let i = 0; + 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 (vim-style j/k) + 13. TABLE KEYBOARD NAVIGATION ---------------------------------------------------------------- - Usage: lt.tableNav.init('my-table-id'); - - Keys registered: - j or ArrowDown → move selection down - k or ArrowUp → move selection up - Enter → follow first in selected row + 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 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(); - const 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]; + 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) return; - const link = row.querySelector('a[href]'); - if (link) global.location.href = link.href; - }); + 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 }; @@ -640,38 +558,34 @@ /* ---------------------------------------------------------------- 14. SORTABLE TABLE HEADERS ---------------------------------------------------------------- - Usage: lt.sortTable.init('my-table-id'); - - Markup: add data-sort-key="field" to elements. - Sorts rows client-side by the text content of the matching column. + 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.addEventListener('click', () => { - /* Reset all headers */ - ths.forEach(h => h.removeAttribute('data-sort')); + 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 aText = (a.cells[colIdx] || {}).textContent || ''; - const bText = (b.cells[colIdx] || {}).textContent || ''; - const n = !isNaN(parseFloat(aText)) && !isNaN(parseFloat(bText)); - const cmp = n - ? parseFloat(aText) - parseFloat(bText) - : aText.localeCompare(bText); + 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(); } }); }); } @@ -680,29 +594,20 @@ /* ---------------------------------------------------------------- 15. STATS WIDGET FILTERING ---------------------------------------------------------------- - Usage: lt.statsFilter.init(); - - HTML contract: -
…
- + lt.statsFilter.init() ---------------------------------------------------------------- */ function initStatsFilter() { document.querySelectorAll('.lt-stat-card[data-filter-key]').forEach(card => { - card.addEventListener('click', () => { - const key = card.dataset.filterKey; - const val = card.dataset.filterVal; - - /* Toggle active state */ + 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'); - - /* Call app-specific filter hook if defined */ - if (typeof global.lt_onStatFilter === 'function') { + 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(); } }); }); } @@ -711,55 +616,729 @@ /* ---------------------------------------------------------------- 16. AUTO-REFRESH MANAGER ---------------------------------------------------------------- - Usage: - lt.autoRefresh.start(refreshFn, 30000); // every 30 s - lt.autoRefresh.stop(); - lt.autoRefresh.now(); // trigger immediately + restart timer + lt.autoRefresh.start(fn, ms) + lt.autoRefresh.stop() + lt.autoRefresh.now() ---------------------------------------------------------------- */ - let _arTimer = null; - let _arFn = null; - let _arInterval = 30000; + let _arTimer = null, _arFn = null, _arInterval = 30000; - function arStart(fn, intervalMs) { - arStop(); - _arFn = fn; - _arInterval = intervalMs || 30000; - _arTimer = setInterval(_arFn, _arInterval); - } - - function arStop() { - if (_arTimer) { clearInterval(_arTimer); _arTimer = null; } - } - - function arNow() { - arStop(); - if (_arFn) { - _arFn(); - _arTimer = setInterval(_arFn, _arInterval); - } - } + 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. INITIALISATION + 17. ACCORDION ---------------------------------------------------------------- - Called automatically on DOMContentLoaded. - Each sub-system can also be initialised manually after the DOM - has been updated with AJAX content. + 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(); - - /* Boot sequence: runs if #lt-boot element is present */ + /* v1.2 */ + initAccordion(); + initTooltips(); + initCopyButtons(); + initAlerts(); + _initAllDropzones(); + observeLazy('[data-lazy]'); + /* v1.3 */ + initMobileNav(); + initSidebarSubmenus(); + /* Boot */ const bootEl = document.getElementById('lt-boot'); - if (bootEl) { - const appName = bootEl.dataset.appName || document.title; - runBoot(appName); - } + if (bootEl) runBoot(bootEl.dataset.appName || document.title); } if (document.readyState === 'loading') { @@ -768,13 +1347,1545 @@ init(); } - /* ---------------------------------------------------------------- - Public API + + /* ================================================================ + 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, + beep: _beep, modal, tabs, boot, @@ -788,6 +2899,49 @@ 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)); diff --git a/views/CreateTicketView.php b/views/CreateTicketView.php index bf3f54e..e5f1eec 100644 --- a/views/CreateTicketView.php +++ b/views/CreateTicketView.php @@ -1,358 +1,329 @@ - - - - - - Create New Ticket - - - - - - - - - - -

    -
    - [ ← DASHBOARD ] -
    -
    - - [ ] - - [ ADMIN ] - - -
    + + +
    +
    + ← Dashboard + / + New Ticket +
    +
    + + +
    + + + + + + +
    + ╚╝ +
    Template (Optional)
    +
    +
    + + +

    Selecting a template pre-fills the form fields.

    +
    +
    - -
    - ╚ - ╝ + +
    + ╚╝ +
    Title *
    +
    +
    + + +
    - -
    Create New Ticket
    -
    -
    -
    -

    New Ticket Form

    -

    - Complete the form below to create a new ticket -

    -
    -
    -
    - - - -
    - - -
    -
    -
    - [ ! ] ERROR: -
    -
    -
    - - - -
    - - - - -
    Template Selection
    -
    -
    -
    - - -

    - Select a template to auto-fill form fields -

    -
    -
    -
    - - -
    - - -
    Basic Information
    -
    -
    -
    - - -
    - - -
    -
    - - -
    - - -
    Ticket Metadata
    -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    - - -
    - - -
    Assignment
    -
    -
    -
    - - -

    - Select a user to assign this ticket to -

    -
    -
    -
    - - -
    - - -
    Visibility Settings
    -
    -
    -
    - - -

    - Controls who can view this ticket -

    -
    - -
    -
    - - -
    - - -
    Detailed Description
    -
    -
    -
    - - -
    -
    -
    - - -
    - - -
    Form Actions
    -
    -
    -
    - - -
    -
    -
    - - + +
    - +
    - - - +}()); + + + diff --git a/views/DashboardView.php b/views/DashboardView.php index 84e8d74..96c7281 100644 --- a/views/DashboardView.php +++ b/views/DashboardView.php @@ -1,1043 +1,905 @@ 'status', 'value' => trim($s), 'label' => 'Status: ' . trim($s)]; + } +} +if (!empty($_GET['priority'])) { + $pArr = is_array($_GET['priority']) ? $_GET['priority'] : explode(',', $_GET['priority']); + foreach ($pArr as $p) { + $activeFilters[] = ['type' => 'priority', 'value' => trim($p), 'label' => 'Priority: P' . trim($p)]; + } +} +if (!empty($_GET['category'])) { + $activeFilters[] = ['type' => 'category', 'value' => $_GET['category'], 'label' => 'Category: ' . htmlspecialchars($_GET['category'])]; +} +if (!empty($_GET['type'])) { + $activeFilters[] = ['type' => 'type', 'value' => $_GET['type'], 'label' => 'Type: ' . htmlspecialchars($_GET['type'])]; +} +if (!empty($_GET['assigned_to'])) { + $label = $_GET['assigned_to'] === 'unassigned' ? 'Unassigned' : 'User #' . htmlspecialchars($_GET['assigned_to']); + $activeFilters[] = ['type' => 'assigned_to', 'value' => $_GET['assigned_to'], 'label' => 'Assigned: ' . $label]; +} + +$currentStatus = isset($_GET['status']) ? explode(',', $_GET['status']) : ['Open', 'Pending', 'In Progress']; +$currentCategories = isset($_GET['category']) ? explode(',', $_GET['category']) : []; +$currentTypes = isset($_GET['type']) ? explode(',', $_GET['type']) : []; +$isAdmin = $GLOBALS['currentUser']['is_admin'] ?? false; +$colCount = $isAdmin ? 12 : 11; + +include __DIR__ . '/layout_header.php'; ?> - - - - - - Ticket Dashboard - - - - - - - - - - -' data-types=''> - -
    -
    - 
    
+
+
    
+  
    [ TICKETS ]
    
+  
    
+    + NEW TICKET
+    
+    
+  
    
+
    
+
+
+
+
    
+
+  
    
+    
    [ # ]
    
+    
    
+      
    
+      
    Open Tickets
    
     
    
-    
-    
-
-    
-    
    
-        
-        
-        
-        
-
-        
-        
    
-
-    
-    
-    
    
-        
    
-            
    
-                
    [ # ]
    
-                
    
-                    
    
-                    
    Open Tickets
    
-                
    
-            
    
-            
    
-                
    [ ! ]
    
-                
    
-                    
    
-                    
    Critical (P1)
    
-                
    
-            
    
-            
    
-                
    [ @ ]
    
-                
    
-                    
    
-                    
    Unassigned
    
-                
    
-            
    
-            
    
-                
    [ + ]
    
-                
    
-                    
    
-                    
    Created Today
    
-                
    
-            
    
-            
    
-                
    [ OK ]
    
-                
    
-                    
    
-                    
    Closed Today
    
-                
    
-            
    
-            
    
-                
    [ t ]
    
-                
    
-                    
    h
    
-                    
    Avg Resolution
    
-                
    
-            
    
-        
    
+  
    
+    
    [ ! ]
    
+    
    
+      
    
+      
    Critical (P1)
    
     
    
-    
+  
    
 
-    
-    
    
-        
-        
    
-            
    [ TICKETS ]
    
-            
    
-                
-                
-                    
-                
-                
-                    
-                
-                
-                    
-                
-                
-                    
-                
-                
-                    
-                
+  
    
+    
    [ @ ]
    
+    
    
+      
    
+      
    Unassigned
    
+    
    
+  
    
 
-                
-                
-                
-                
-                    [ X ]
-                
-            
    
+  
    
+    
    [ + ]
    
+    
    
+      
    
+      
    Created Today
    
+    
    
+  
    
+
+  
    
+    
    [ OK ]
    
+    
    
+      
    
+      
    Closed Today
    
+    
    
+  
    
+
+  
    
+    
    ⏱
    
+    
    
+      
    h
    
+      
    Avg Resolution
    
+    
    
+  
    
+
+
    
+
+
+
+
    
+  
+  
+
    
+
+
+
    
+
+  
+  
+
+  
+  
+
+  
+  
    
+
+    
+    
    
+      
    
+        
+      
    
+      
    
+        
+           ticket
+        
+        
+        
+        
+        
+      
    
+    
    
 
-        
-        
    
-            
    
-                
-                
-            
    
-            
-            
-            Total: 
+    
+    
+    
    
+      Active:
+      
+        
+          
+          
+        
+      
+      
+    
    
+    
+
+    
+    
+    
    
+      Showing results for: 
+      —  ticket found
+    
    
+    
+
+    
+    
    
+
+      
+      
+      
+      
 
-        
-        
    
-            
-    
-    
-
-    
-    
-
-    
-    
-    
    
-
-    
-    
-
-    
-    
-    
-    
-
-
\ No newline at end of file
+        
    
+          ╚╝
+          
    
+            Open 
+          
    
+          
    
+        
    
+
+        
    
+          ╚╝
+          
    
+            Pending 
+          
    
+          
    
+        
    
+
+        
    
+          ╚╝
+          
    
+            In Progress 
+          
    
+          
    
+        
    
+
+        
    
+          ╚╝
+          
    
+            Closed 
+          
    
+          
    
+        
    
+
+      
    
+    
    
+
+  
    
+
+
    
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/views/TicketView.php b/views/TicketView.php
index 30a00d7..e8dbbbc 100644
--- a/views/TicketView.php
+++ b/views/TicketView.php
@@ -1,820 +1,779 @@
  '[ + ]',
         'update'        => '[ ~ ]',
         'comment'       => '[ > ]',
         'view'          => '[ . ]',
         'assign'        => '[ @ ]',
         'status_change' => '[ ! ]',
-    ];
-    return $icons[$actionType] ?? '[ * ]';
-}
-
-function formatAction($event) {
-    $actions = [
-        'create' => 'created this ticket',
-        'update' => 'updated this ticket',
-        'comment' => 'added a comment',
-        'view' => 'viewed this ticket',
-        'assign' => 'assigned this ticket',
-        'status_change' => 'changed the status'
-    ];
-    return $actions[$event['action_type']] ?? $event['action_type'];
-}
-
-function formatDetails($details, $actionType) {
-    if ($actionType === 'update' && is_array($details)) {
-        $changes = [];
-        foreach ($details as $field => $value) {
-            if ($field === 'old_value' || $field === 'new_value') continue;
-            $changes[] = "" . htmlspecialchars($field) . ": " . htmlspecialchars($value);
-        }
-        return implode(', ', $changes);
-    }
-    return '';
-}
-
-require_once __DIR__ . '/../middleware/SecurityHeadersMiddleware.php';
-require_once __DIR__ . '/../middleware/CsrfMiddleware.php';
-$nonce = SecurityHeadersMiddleware::getNonce();
-?>
-
-
-
-    
-    
-    Ticket #<?php echo $ticket['ticket_id']; ?>
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-
-
-    
    
-        
    
-            [ ← DASHBOARD ]
-        
    
-        
    
-            
-                [  ]
-                
-                    [ ADMIN ]
-                
-                
-            
-        
    
-    
    
-    
    
-    
    Ticket: 
    
-    
    ">
-        ╚
-        ╝
-
-        
-        
    Ticket Information
    
-        
    
-            
    
-                
    
-                    
    
-                    
    
-                        
    
-                            
    UUID 
    
-                            = 10) {
-                                    $ageClass = 'age-critical';
-                                } elseif ($ageDays >= 5) {
-                                    $ageClass = 'age-warning';
-                                }
-                            }
-
-                            // Format age string
-                            if ($ageDays > 0) {
-                                $ageStr = $ageDays . ' day' . ($ageDays != 1 ? 's' : '');
-                            } else {
-                                $ageStr = $ageHours . ' hour' . ($ageHours != 1 ? 's' : '');
-                            }
-                            ?>
-                            
    
-                                
-                                Last activity:  ago
-                            
    
-                            
-                            
    
-                                
-                                
-                            
    
-
-                            
-                            
    
-                                
    
-                                    
-                                    
-                                
    
-
-                                
    
-                                    
-                                    
-                                
    
-
-                                
    
-                                    
-                                    
-                                
    
-                            
    
-
-                            
-                            getAllGroups();
-                            ?>
-                            
    
-                                
    
-                                    
    
-                                        
-                                        
-                                    
    
-                                    
    
-                                        
-                                        
    
-                                            
-                                                
-                                            
-                                            
-                                                No groups available
-                                            
-                                        
    
-                                    
    
-                                
    
-                            
    
-                        
    
-                        
    
-                            
    
-                                
-                            
    
-                            
-                            
-                        
    
-                    
    
-                
    
-            
    
-        
    
-
-        
-        
    
-
-        
-        
    Content Sections
    
-        
    
-            
-        
    
-
-        
-        
    
-
-        
-        
    Content Display
    
-        
    
-            
    
-                
    
-                    
    
-                        
    Description
    
-                        
    
-                            
-                            
-                        
    
-                    
    
-
-                    
    
-                        
    Comments Section
    
-                        
    
-                            
    
-                                
    Add Comment
    
-                                
    
-                        
-                        
-                        
    
-                            
    
-                                
    
-                                    
-                                    Enable Markdown
-                                
    
-                                
    
-                                    
-                                    Preview Markdown
-                                
    
-                            
    
-                            
-                        
    
-                        
-                                
    
-                            
    
-
-                            
-                            
    
-                                
    Comment History
    
-                                
    
-                                    ";
-
-                                        // Thread connector line for replies
-                                        if ($parentId) {
-                                            echo "
    ";
-                                        }
-
-                                        echo "
    ";
-                                        echo "
    ";
-                                        echo "" . htmlspecialchars($displayName) . "";
-                                        $dateStr = date('M d, Y H:i', strtotime($comment['created_at']));
-                                        $editedIndicator = !empty($comment['updated_at']) ? ' (edited)' : '';
-                                        echo "" . $dateStr . "{$editedIndicator}";
-
-                                        // Action buttons
-                                        echo "
    ";
-                                        // Reply button (max depth of 3)
-                                        if ($threadDepth < 3) {
-                                            echo "";
-                                        }
-                                        // Edit/Delete buttons for owner or admin
-                                        if ($canModify) {
-                                            echo "";
-                                            echo "";
-                                        }
-                                        echo "
    ";
-
-                                        echo "
    "; // .comment-header
-
-                                        echo "
    ";
-                                        if ($comment['markdown_enabled']) {
-                                            echo htmlspecialchars($comment['comment_text']);
-                                        } else {
-                                            echo nl2br(htmlspecialchars($comment['comment_text']));
-                                        }
-                                        echo "
    ";
-
-                                        // Hidden raw text for editing
-                                        echo "";
-
-                                        echo "
    "; // .comment-content
-
-                                        // Render replies recursively
-                                        if (!empty($comment['replies'])) {
-                                            echo "
    ";
-                                            foreach ($comment['replies'] as $reply) {
-                                                renderComment($reply, $currentUserId, $isAdmin, $threadDepth + 1);
-                                            }
-                                            echo "
    ";
-                                        }
-
-                                        echo "
    "; // .comment
-                                    }
-
-                                    // Render all comments
-                                    foreach ($comments as $comment) {
-                                        renderComment($comment, $currentUserId, $isAdmin);
-                                    }
-                                    ?>
-                                
    
-                            
    
-                        
    
-                    
    
-
-                    
    
-                        
    File Attachments
    
-                        
    
-                            
-                            
    
-                                
    Upload Files
    
-                                
    
-                                    
    
-                                        
    [ + ]
    
-                                        
    Drag and drop files here or click to browse
    
-                                        
    Max file size: 
    
-                                        
-                                        
-                                    
    
-                                
    
-                                
-                            
    
-
-                            
-                            
    
-                                
    Attached Files
    
-                                
    
-                                    
    Loading attachments...
    
-                                
    
-                            
    
-                        
    
-                    
    
-
-                    
    
-                        
    Ticket Dependencies
    
-                        
    
-                            
-                            
    
-                                
    Add Dependency
    
-                                
    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                
    
-                            
    
-
-                            
-                            
    
-                                
    Current Dependencies
    
-                                
    
-                                    
    Loading dependencies...
    
-                                
    
-                            
    
-
-                            
-                            
    
-                                
    Tickets That Depend On This
    
-                                
    
-                                    
    Loading dependents...
    
-                                
    
-                            
    
-                        
    
-                    
    
-
-                    
    
-                        
    Activity Timeline
    
-                        
    
-                            
-                                
    No activity recorded yet.
    
-                            
-                                
-                                    
    
-                                        
    
-                                        
    
-                                            
    
-                                                
-                                                
-                                                
-                                                
-                                            
    
-                                            
-                                                
    
-                                                    
-                                                
    
-                                            
-                                        
    
-                                    
    
-                                
-                            
-                        
    
-                    
    
-                
    
-            
    
-        
    
-    
-    
    
-    
-    
-
-    
-