/* ============================================================ TriLock Portal — Global Theme System Bootstrap is the base. This file layers on top. ZONE-BASED FONT SIZING: Each UI zone has its own CSS variable so fonts can be scaled independently. Users complained about "too small" in some areas — this gives granular control. ============================================================ */ /* --- Root: Default (Navy Blue) Theme --- */ :root { /* Brand */ --tl-brand-primary: #00d4ff; --tl-brand-accent: #00b8e0; --tl-brand-highlight: #33ddff; /* Surfaces */ --tl-bg-body: #1a1a2e; --tl-bg-surface: #16213e; --tl-bg-sidebar: #0f1a2e; --tl-bg-sidebar-hover: rgba(255,255,255,0.08); --tl-bg-sidebar-active: rgba(0,212,255,0.15); --tl-bg-topbar: #0f3460; --tl-bg-card: #1e2a4a; --tl-bg-input: #0f3460; /* Text */ --tl-text-primary: #e8e8e8; --tl-text-secondary: #a0a0a0; --tl-text-muted: #666666; --tl-text-sidebar: #c8d6e5; --tl-text-sidebar-active: #ffffff; --tl-text-topbar: #e8e8e8; --tl-text-on-brand: #ffffff; /* Borders */ --tl-border: #2a3f5f; --tl-border-light: #2a3f5f; --tl-border-sidebar: rgba(255,255,255,0.1); /* Shadows */ --tl-shadow-sm: 0 1px 3px rgba(0,0,0,0.25); --tl-shadow-md: 0 2px 8px rgba(0,0,0,0.3); --tl-shadow-lg: 0 4px 16px rgba(0,0,0,0.4); /* Status colors */ --tl-success: #00cc66; --tl-warning: #ffaa00; --tl-danger: #ff4444; --tl-info: #00d4ff; /* ========================================================= FONT ZONES — Scale each area independently Base sizes below. User preference multiplier applied via [data-font-scale] attribute on . ========================================================= */ --tl-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --tl-font-topbar: 14px; /* Top banner: user name, nav */ --tl-font-sidebar: 13px; /* Sidebar: company tree, app list */ --tl-font-sidebar-header: 11px;/* Sidebar: section headers */ --tl-font-content: 14px; /* Main content area: default */ --tl-font-content-sm: 12px; /* Content: small/secondary text */ --tl-font-heading: 20px; /* Page headings */ --tl-font-heading-sm: 16px; /* Sub-headings */ --tl-font-table: 13px; /* Table cells */ --tl-font-table-header: 12px; /* Table headers */ --tl-font-input: 14px; /* Form inputs */ --tl-font-button: 13px; /* Buttons */ --tl-font-badge: 11px; /* Badges, pills */ --tl-font-app-tile: 13px; /* App launcher tile labels */ --tl-font-app-tile-icon: 32px; /* App launcher tile icons */ /* Sidebar geometry */ --tl-sidebar-width: 260px; --tl-topbar-height: 52px; /* Transitions */ --tl-transition-speed: 0.25s; } /* --- Dark Theme --- */ [data-theme="dark"] { --tl-bg-body: #121212; --tl-bg-surface: #1e1e1e; --tl-bg-sidebar: #0d1117; --tl-bg-sidebar-hover: rgba(255,255,255,0.06); --tl-bg-sidebar-active: rgba(255,255,255,0.12); --tl-bg-topbar: #1e1e1e; --tl-bg-card: #252525; --tl-bg-input: #2a2a2a; --tl-text-primary: #e0e0e0; --tl-text-secondary: #a0a0a0; --tl-text-muted: #666666; --tl-text-sidebar: #8b949e; --tl-text-sidebar-active: #f0f6fc; --tl-text-topbar: #e0e0e0; --tl-border: #333333; --tl-border-light: #2a2a2a; --tl-border-sidebar: rgba(255,255,255,0.06); --tl-shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --tl-shadow-md: 0 2px 8px rgba(0,0,0,0.4); --tl-shadow-lg: 0 4px 16px rgba(0,0,0,0.5); --tl-brand-primary: #2e86c1; --tl-brand-accent: #3498db; --tl-brand-highlight: #5dade2; } /* --- Font Scale Overrides (user preference: +1, +2, +3 steps) --- */ [data-font-scale="1"] { --tl-font-topbar: 15px; --tl-font-sidebar: 14px; --tl-font-sidebar-header: 12px; --tl-font-content: 15px; --tl-font-content-sm: 13px; --tl-font-heading: 22px; --tl-font-heading-sm: 17px; --tl-font-table: 14px; --tl-font-table-header: 13px; --tl-font-input: 15px; --tl-font-button: 14px; --tl-font-badge: 12px; --tl-font-app-tile: 14px; } [data-font-scale="2"] { --tl-font-topbar: 16px; --tl-font-sidebar: 15px; --tl-font-sidebar-header: 13px; --tl-font-content: 16px; --tl-font-content-sm: 14px; --tl-font-heading: 24px; --tl-font-heading-sm: 19px; --tl-font-table: 15px; --tl-font-table-header: 14px; --tl-font-input: 16px; --tl-font-button: 15px; --tl-font-badge: 13px; --tl-font-app-tile: 15px; } [data-font-scale="3"] { --tl-font-topbar: 17px; --tl-font-sidebar: 16px; --tl-font-sidebar-header: 14px; --tl-font-content: 18px; --tl-font-content-sm: 15px; --tl-font-heading: 26px; --tl-font-heading-sm: 21px; --tl-font-table: 16px; --tl-font-table-header: 15px; --tl-font-input: 18px; --tl-font-button: 16px; --tl-font-badge: 14px; --tl-font-app-tile: 16px; } [data-font-scale="4"] { --tl-font-topbar: 18px; --tl-font-sidebar: 17px; --tl-font-sidebar-header: 15px; --tl-font-content: 20px; --tl-font-content-sm: 17px; --tl-font-heading: 28px; --tl-font-heading-sm: 23px; --tl-font-table: 18px; --tl-font-table-header: 16px; --tl-font-input: 20px; --tl-font-button: 18px; --tl-font-badge: 15px; --tl-font-app-tile: 18px; } [data-font-scale="5"] { --tl-font-topbar: 20px; --tl-font-sidebar: 18px; --tl-font-sidebar-header: 16px; --tl-font-content: 22px; --tl-font-content-sm: 18px; --tl-font-heading: 32px; --tl-font-heading-sm: 26px; --tl-font-table: 20px; --tl-font-table-header: 18px; --tl-font-input: 22px; --tl-font-button: 20px; --tl-font-badge: 16px; --tl-font-app-tile: 20px; } /* ============================================================ GLOBAL BASE ============================================================ */ html, body { margin: 0; padding: 0; height: 100%; font-family: var(--tl-font-family); font-size: var(--tl-font-content); color: var(--tl-text-primary); background-color: var(--tl-bg-body); -webkit-font-smoothing: antialiased; } /* ============================================================ PLATFORM SHELL ============================================================ */ /* --- Top Bar --- */ .tl-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--tl-topbar-height); background: var(--tl-bg-topbar); border-bottom: 1px solid var(--tl-border); box-shadow: var(--tl-shadow-sm); display: flex; align-items: center; padding: 0 16px; z-index: 1000; font-size: var(--tl-font-topbar); color: var(--tl-text-topbar); } .tl-topbar-brand { font-weight: 600; font-size: calc(var(--tl-font-topbar) + 2px); color: var(--tl-brand-primary); margin-right: 16px; white-space: nowrap; } .tl-topbar-spacer { flex: 1; } .tl-topbar-user { display: flex; align-items: center; gap: 8px; font-size: var(--tl-font-content-sm); color: var(--tl-text-secondary); } /* Hamburger button */ .tl-hamburger { background: none; border: none; cursor: pointer; padding: 6px; margin-right: 8px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--tl-text-primary); transition: background var(--tl-transition-speed); } .tl-hamburger:hover { background: rgba(255,255,255,0.1); } .tl-hamburger svg { width: 22px; height: 22px; } /* --- Sidebar Drawer --- */ .tl-sidebar { position: fixed; top: var(--tl-topbar-height); left: 0; bottom: 0; width: var(--tl-sidebar-width); background: var(--tl-bg-sidebar); color: var(--tl-text-sidebar); font-size: var(--tl-font-sidebar); overflow-y: auto; overflow-x: hidden; transform: translateX(-100%); transition: transform var(--tl-transition-speed) ease; z-index: 900; box-shadow: var(--tl-shadow-lg); } .tl-sidebar.open { transform: translateX(0); } /* Sidebar overlay (click to close) */ .tl-sidebar-overlay { display: none; position: fixed; top: var(--tl-topbar-height); left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 899; } .tl-sidebar-overlay.open { display: block; } /* Sidebar sections */ .tl-sidebar-section { padding: 12px 0; border-bottom: 1px solid var(--tl-border-sidebar); } .tl-sidebar-section:last-child { border-bottom: none; } .tl-sidebar-section-header { font-size: var(--tl-font-sidebar-header); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tl-text-muted); padding: 4px 16px 6px; font-weight: 600; } .tl-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; border-radius: 0; transition: background var(--tl-transition-speed); color: var(--tl-text-sidebar); text-decoration: none; font-size: var(--tl-font-sidebar); } .tl-sidebar-item:hover { background: var(--tl-bg-sidebar-hover); color: var(--tl-text-sidebar-active); } .tl-sidebar-item.active { background: var(--tl-bg-sidebar-active); color: var(--tl-text-sidebar-active); font-weight: 500; } .tl-sidebar-item-icon { width: 18px; height: 18px; opacity: 0.7; flex-shrink: 0; } .tl-sidebar-item.active .tl-sidebar-item-icon { opacity: 1; } .tl-sidebar-logo { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } /* Company node (expandable) */ .tl-company-node { padding: 8px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--tl-text-sidebar); transition: background var(--tl-transition-speed); } .tl-company-node:hover { background: var(--tl-bg-sidebar-hover); } .tl-company-chevron { width: 14px; height: 14px; transition: transform var(--tl-transition-speed); opacity: 0.5; flex-shrink: 0; } .tl-company-chevron.expanded { transform: rotate(90deg); } .tl-company-apps { padding-left: 22px; } /* --- Main Content Area --- */ .tl-main { margin-top: var(--tl-topbar-height); min-height: calc(100vh - var(--tl-topbar-height)); padding: 20px 24px; font-size: var(--tl-font-content); transition: margin-left var(--tl-transition-speed) ease; } /* When sidebar is pinned (future: large screens) */ .tl-main.sidebar-pinned { margin-left: var(--tl-sidebar-width); } /* Full-screen app mode — topbar hidden, toggled via postMessage pin from iframe */ body.app-fullscreen .tl-topbar { transform: translateY(-100%); transition: transform 0.3s ease; z-index: 1100; } body.app-fullscreen.topbar-pinned .tl-topbar { transform: translateY(0); } body.app-fullscreen { overflow: hidden; height: 100vh; } body.app-fullscreen .tl-main { margin-top: 0; padding: 0; height: 100vh; overflow: hidden; transition: margin-top 0.3s ease; } body.app-fullscreen.topbar-pinned .tl-main { margin-top: var(--tl-topbar-height); height: calc(100vh - var(--tl-topbar-height)); } /* In app-fullscreen, hide cosmetic controls — keep hamburger, brand, nav, logout */ body.app-fullscreen .tl-font-scale-control, body.app-fullscreen .tl-theme-toggle, body.app-fullscreen .tl-topbar-username, body.app-fullscreen .tl-badge, body.app-fullscreen .tl-avatar { display: none !important; } /* ============================================================ ZONE FONT CLASSES — Apply to containers ============================================================ */ .tl-zone-content { font-size: var(--tl-font-content); } .tl-zone-content-sm { font-size: var(--tl-font-content-sm); } .tl-zone-heading { font-size: var(--tl-font-heading); font-weight: 600; } .tl-zone-heading-sm { font-size: var(--tl-font-heading-sm); font-weight: 600; } .tl-zone-table { font-size: var(--tl-font-table); } .tl-zone-table-header { font-size: var(--tl-font-table-header); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } /* ============================================================ COMPONENT STYLES ============================================================ */ /* Cards */ .tl-card { background: var(--tl-bg-card); border: 1px solid var(--tl-border); border-radius: 8px; box-shadow: var(--tl-shadow-sm); padding: 16px; } /* App tiles (launcher) */ .tl-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; padding: 8px 0; } .tl-app-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 12px; background: var(--tl-bg-card); border: 1px solid var(--tl-border); border-radius: 12px; cursor: pointer; transition: all var(--tl-transition-speed); text-decoration: none; color: var(--tl-text-primary); box-shadow: var(--tl-shadow-sm); } .tl-app-tile:hover { border-color: var(--tl-brand-accent); box-shadow: var(--tl-shadow-md); transform: translateY(-2px); color: var(--tl-text-primary); } .tl-app-tile.locked { opacity: 0.5; cursor: default; } .tl-app-tile.locked:hover { transform: none; box-shadow: var(--tl-shadow-sm); border-color: var(--tl-border); } .tl-app-tile-icon { font-size: var(--tl-font-app-tile-icon); line-height: 1; } .tl-app-tile-name { font-size: var(--tl-font-app-tile); font-weight: 500; text-align: center; } .tl-app-tile-badge { font-size: var(--tl-font-badge); padding: 2px 8px; border-radius: 10px; background: var(--tl-success); color: #fff; } .tl-app-tile-badge.trial { background: var(--tl-warning); } .tl-app-tile-badge.locked { background: var(--tl-text-muted); } /* Buttons */ .tl-btn { font-size: var(--tl-font-button); padding: 6px 16px; border-radius: 6px; border: 1px solid var(--tl-border); background: var(--tl-bg-surface); color: var(--tl-text-primary); cursor: pointer; transition: all var(--tl-transition-speed); } .tl-btn:hover { background: rgba(255,255,255,0.05); } .tl-btn-primary { background: var(--tl-brand-primary); border-color: var(--tl-brand-primary); color: var(--tl-text-on-brand); } .tl-btn-primary:hover { background: var(--tl-brand-accent); border-color: var(--tl-brand-accent); } /* Form inputs */ .tl-input { font-size: var(--tl-font-input); padding: 8px 12px; border: 1px solid var(--tl-border); border-radius: 6px; background: var(--tl-bg-input); color: var(--tl-text-primary); transition: border-color var(--tl-transition-speed); } .tl-input:focus { outline: none; border-color: var(--tl-brand-accent); box-shadow: 0 0 0 2px rgba(46,134,193,0.2); } /* Tables */ .tl-table { width: 100%; border-collapse: collapse; font-size: var(--tl-font-table); } .tl-table th { font-size: var(--tl-font-table-header); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tl-text-secondary); padding: 8px 12px; border-bottom: 2px solid var(--tl-border); text-align: left; } .tl-table td { padding: 8px 12px; border-bottom: 1px solid var(--tl-border-light); } .tl-table tr:hover td { background: rgba(255,255,255,0.03); } /* Avatars (letter-based) */ .tl-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 600; flex-shrink: 0; line-height: 1; } .tl-avatar-sm { width: 28px; height: 28px; font-size: 13px; } .tl-avatar-xs { width: 22px; height: 22px; font-size: 11px; } .tl-avatar-lg { width: 40px; height: 40px; font-size: 18px; } /* Badges */ .tl-badge { font-size: var(--tl-font-badge); padding: 2px 8px; border-radius: 10px; font-weight: 500; display: inline-block; } .tl-badge-success { background: var(--tl-success); color: #fff; } .tl-badge-warning { background: var(--tl-warning); color: #fff; } .tl-badge-danger { background: var(--tl-danger); color: #fff; } .tl-badge-info { background: var(--tl-info); color: #fff; } /* Theme toggle */ .tl-theme-toggle { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 4px; color: var(--tl-text-secondary); display: flex; align-items: center; transition: background var(--tl-transition-speed); } .tl-theme-toggle:hover { background: rgba(255,255,255,0.08); } /* ============================================================ BOOTSTRAP OVERRIDES (theme-aware) ============================================================ */ .btn-primary { background-color: var(--tl-brand-primary); border-color: var(--tl-brand-primary); } .btn-primary:hover { background-color: var(--tl-brand-accent); border-color: var(--tl-brand-accent); } .form-control { font-size: var(--tl-font-input); background: var(--tl-bg-input); color: var(--tl-text-primary); border-color: var(--tl-border); } .form-control:focus { border-color: var(--tl-brand-accent); box-shadow: 0 0 0 2px rgba(0,212,255,0.2); } .modal-content { background: var(--tl-bg-surface); color: var(--tl-text-primary); border-color: var(--tl-border); } .table { color: var(--tl-text-primary); } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--tl-text-muted); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--tl-text-secondary); } /* ============================================================ LOGIN PAGE ============================================================ */ .login-layout { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--tl-bg-body); } .login-container { width: 100%; max-width: 420px; padding: 1rem; } .login-box { background: var(--tl-bg-surface); border: 1px solid var(--tl-border); border-radius: 12px; padding: 2.5rem 2rem; box-shadow: var(--tl-shadow-lg); } .login-header { text-align: center; margin-bottom: 1.5rem; } .login-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--tl-brand-primary); margin: 0; } .login-subtitle { font-size: 0.85rem; color: var(--tl-text-secondary); margin-top: 0.25rem; } .login-error { background: rgba(255, 68, 68, 0.15); border: 1px solid var(--tl-danger); color: var(--tl-danger); padding: 0.6rem 1rem; border-radius: 6px; font-size: 0.85rem; margin-bottom: 1rem; text-align: center; } .login-box .form-group { margin-bottom: 1rem; } .login-box .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--tl-text-secondary); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.5px; } .login-box .form-group input { width: 100%; padding: 0.6rem 0.8rem; background: var(--tl-bg-input); border: 1px solid var(--tl-border); border-radius: 6px; color: var(--tl-text-primary); font-size: 0.95rem; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .login-box .form-group input:focus { border-color: var(--tl-brand-primary); box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2); } .login-box .form-group input::placeholder { color: var(--tl-text-muted); } .btn-login { width: 100%; padding: 0.7rem; background: var(--tl-brand-primary); color: var(--tl-text-on-brand); border: none; border-radius: 6px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-top: 0.5rem; } .btn-login:hover { background: var(--tl-brand-accent); } .login-footer { text-align: center; margin-top: 1.5rem; font-size: 0.75rem; color: var(--tl-text-muted); } /* ============================================================ ADMIN PAGE — Tabs, Modals, Forms, Toast ============================================================ */ /* Tabs */ .tl-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--tl-border); margin-bottom: 16px; } .tl-tab { padding: 8px 20px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: var(--tl-font-button); color: var(--tl-text-secondary); cursor: pointer; transition: all var(--tl-transition-speed); } .tl-tab:hover { color: var(--tl-text-primary); } .tl-tab.active { color: var(--tl-brand-primary); border-bottom-color: var(--tl-brand-primary); font-weight: 600; } /* Tab actions bar */ .tl-tab-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } /* Table scroll container */ .tl-table-scroll { overflow-x: auto; } /* Action cells */ .tl-action-cell { display: flex; gap: 4px; flex-wrap: nowrap; } /* Small buttons */ .tl-btn-sm { font-size: 11px; padding: 3px 10px; border-radius: 4px; } .tl-btn-danger-sm { background: var(--tl-danger); border-color: var(--tl-danger); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 4px; } .tl-btn-danger-sm:hover { opacity: 0.85; } .tl-btn-restore { background: var(--tl-success); border-color: var(--tl-success); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 4px; } /* Deleted row */ .tl-deleted-row td { opacity: 0.5; text-decoration: line-through; } /* TopBar nav links */ .tl-topbar-nav { display: flex; gap: 4px; margin-left: 8px; } .tl-topbar-nav-link { color: var(--tl-text-topbar); text-decoration: none; padding: 4px 12px; border-radius: 4px; font-size: var(--tl-font-button); transition: background var(--tl-transition-speed); } .tl-topbar-nav-link:hover { background: rgba(255,255,255,0.1); color: var(--tl-text-topbar); } /* TopBar username + logout */ .tl-topbar-username { font-size: var(--tl-font-content-sm); } .tl-topbar-logout { color: var(--tl-text-secondary); padding: 4px; border-radius: 4px; display: flex; align-items: center; transition: background var(--tl-transition-speed); } .tl-topbar-logout:hover { background: rgba(255,255,255,0.1); color: var(--tl-text-primary); } /* Font scale controls */ .tl-font-scale-control { display: flex; align-items: center; gap: 2px; } .tl-font-scale-label { font-size: 14px; font-weight: 600; color: var(--tl-text-secondary); width: 20px; text-align: center; } .tl-btn-icon { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px; color: var(--tl-text-secondary); display: flex; align-items: center; transition: background var(--tl-transition-speed); } .tl-btn-icon:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: var(--tl-text-primary); } .tl-btn-icon:disabled { opacity: 0.3; cursor: default; } /* TopBar controls group */ .tl-topbar-controls { display: flex; align-items: center; gap: 12px; } /* ============================================================ MODAL OVERLAY + MODAL ============================================================ */ .tl-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1050; } .tl-modal { background: var(--tl-bg-surface); border: 1px solid var(--tl-border); border-radius: 12px; box-shadow: var(--tl-shadow-lg); width: 90%; max-width: 560px; max-height: 85vh; display: flex; flex-direction: column; } .tl-modal-lg { max-width: 720px; } .tl-modal-sm { max-width: 400px; } .tl-modal-header { padding: 16px 20px; font-size: var(--tl-font-heading-sm); font-weight: 600; border-bottom: 1px solid var(--tl-border); display: flex; align-items: center; justify-content: space-between; } .tl-modal-close { background: none; border: none; font-size: 24px; color: var(--tl-text-secondary); cursor: pointer; padding: 0 4px; line-height: 1; } .tl-modal-close:hover { color: var(--tl-text-primary); } .tl-screen-id { font-size: 9px; font-family: 'Courier New', monospace; color: var(--tl-text-muted); opacity: 0.4; vertical-align: super; margin-left: 6px; font-weight: normal; letter-spacing: 0.5px; user-select: all; } .tl-modal-body { padding: 20px; overflow-y: auto; flex: 1; } .tl-modal-footer { padding: 12px 20px; border-top: 1px solid var(--tl-border); display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* ============================================================ FORMS ============================================================ */ .tl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .tl-form-grid { grid-template-columns: 1fr; } } .tl-form-group { display: flex; flex-direction: column; gap: 4px; } .tl-form-group label { font-size: var(--tl-font-content-sm); font-weight: 600; color: var(--tl-text-secondary); text-transform: uppercase; letter-spacing: 0.3px; } .tl-form-checks { display: flex; flex-direction: column; gap: 6px; } .tl-form-checks label { display: flex; align-items: center; gap: 8px; font-size: var(--tl-font-content-sm); cursor: pointer; color: var(--tl-text-primary); } /* Chips (for assignments) */ .tl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--tl-bg-card); border: 1px solid var(--tl-border); border-radius: 16px; font-size: var(--tl-font-badge); color: var(--tl-text-primary); } .tl-chip-remove { background: none; border: none; color: var(--tl-text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; } .tl-chip-remove:hover { color: var(--tl-danger); } /* ============================================================ TOAST ============================================================ */ .tl-toast { position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; border-radius: 8px; font-size: var(--tl-font-content-sm); box-shadow: var(--tl-shadow-lg); z-index: 2000; animation: tl-toast-in 0.3s ease; } .tl-toast-success { background: var(--tl-success); color: #fff; } .tl-toast-error { background: var(--tl-danger); color: #fff; } @keyframes tl-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ DASHBOARD ============================================================ */ .tl-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .tl-stat-card { text-align: center; padding: 20px 16px; } .tl-stat-value { font-size: var(--tl-font-heading); font-weight: 700; color: var(--tl-brand-primary); margin-bottom: 4px; } .tl-stat-label { font-size: var(--tl-font-content-sm); color: var(--tl-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } /* Profile table (Dashboard) */ .tl-profile-table { width: 100%; font-size: var(--tl-font-content); } .tl-profile-table td { padding: 6px 0; } .tl-profile-label { color: var(--tl-text-secondary); font-weight: 600; width: 120px; font-size: var(--tl-font-content-sm); text-transform: uppercase; letter-spacing: 0.3px; } /* Dual-Listbox (assignments) */ .tl-dlb-container { display: flex; gap: 0; align-items: stretch; min-height: 240px; } .tl-dlb-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tl-dlb-label { font-size: 12px; font-weight: 600; color: var(--tl-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0 6px 2px; } .tl-dlb-checklist { flex: 1; min-height: 200px; max-height: 300px; overflow-y: auto; border: 1px solid var(--tl-border); border-radius: 4px; background: var(--tl-bg-primary); padding: 4px 0; } .tl-dlb-check-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; cursor: pointer; font-size: 13px; transition: background 0.1s; } .tl-dlb-check-item:hover { background: var(--tl-bg-tertiary); } .tl-dlb-buttons { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 10px; } .tl-dlb-btn { padding: 6px 12px; border: 1px solid var(--tl-border); border-radius: 4px; background: var(--tl-bg-secondary); color: var(--tl-text-primary); cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.15s, color 0.15s; } .tl-dlb-btn:hover:not(:disabled) { background: var(--tl-accent); color: #fff; border-color: var(--tl-accent); } .tl-dlb-btn:disabled { opacity: 0.35; cursor: default; } .tl-dlb-empty { color: var(--tl-text-muted); text-align: center; padding: 20px 12px; font-size: 12px; } .tl-dlb-primary-badge { font-size: 10px; font-weight: 600; color: var(--tl-accent); background: rgba(74,144,217,0.12); border-radius: 3px; padding: 1px 5px; margin-left: auto; white-space: nowrap; } /* ============================================================ ANALYTICAL REPORT (Reports tab) ============================================================ */ /* Stats cards */ .ar-stats-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .ar-stat-card { background: var(--tl-bg-secondary); border: 1px solid var(--tl-border); border-radius: 8px; padding: 16px 20px; min-width: 120px; text-align: center; } .ar-stat-card .ar-stat-value { font-size: 1.8em; font-weight: 700; color: var(--tl-text-primary); } .ar-stat-card .ar-stat-label { font-size: 0.8em; color: var(--tl-text-muted); margin-top: 4px; } .ar-stat-card.green .ar-stat-value { color: #27ae60; } .ar-stat-card.yellow .ar-stat-value { color: #f39c12; } .ar-stat-card.red .ar-stat-value { color: #e74c3c; } .ar-stat-card.blue .ar-stat-value { color: #3498db; } /* Filters */ .ar-filters-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: flex-end; } .ar-filter-group { display: flex; flex-direction: column; gap: 4px; } .ar-filter-group label { font-size: 0.8em; color: var(--tl-text-muted); } .ar-filter-group input, .ar-filter-group select { background: var(--tl-bg-primary); border: 1px solid var(--tl-border); color: var(--tl-text-primary); padding: 6px 10px; border-radius: 4px; font-size: 0.85em; } .ar-btn-filter { background: var(--tl-accent); color: #fff; border: none; padding: 7px 16px; border-radius: 4px; cursor: pointer; font-size: 0.85em; } .ar-btn-filter:hover { opacity: 0.85; } .ar-btn-clear { background: var(--tl-bg-secondary); color: var(--tl-text-muted); border: 1px solid var(--tl-border); padding: 7px 16px; border-radius: 4px; cursor: pointer; font-size: 0.85em; } .ar-btn-clear:hover { opacity: 0.85; } /* Table */ .ar-table-container { overflow-x: auto; } .ar-table { width: 100%; border-collapse: collapse; font-size: 0.82em; } .ar-table th { background: var(--tl-bg-secondary); color: var(--tl-text-muted); padding: 8px 10px; text-align: left; border-bottom: 2px solid var(--tl-border); position: sticky; top: 0; z-index: 5; white-space: nowrap; cursor: pointer; user-select: none; } .ar-table th:hover { color: var(--tl-text-primary); } .ar-table th .ar-sort-arrow { font-size: 0.75em; margin-left: 4px; opacity: 0.4; } .ar-table th.ar-sort-active .ar-sort-arrow { opacity: 1; color: var(--tl-accent); } .ar-table td { padding: 6px 10px; border-bottom: 1px solid var(--tl-border); vertical-align: top; } .ar-table tr:hover { background: rgba(0,212,255,0.04); } /* Classification colors */ .ar-cls-human { color: #27ae60; font-weight: 600; } .ar-cls-suspected_bot { color: #f39c12; font-weight: 600; } .ar-cls-crawler { color: #e74c3c; font-weight: 600; } .ar-cls-headless { color: #e74c3c; font-weight: 600; } .ar-cls-honeypot_bot { color: #e74c3c; font-weight: 600; } .ar-cls-unknown { color: var(--tl-text-muted); } /* Row background tints */ .ar-row-suspected_bot { background: rgba(243,156,18,0.05); } .ar-row-crawler { background: rgba(231,76,60,0.05); } .ar-row-headless { background: rgba(231,76,60,0.08); } .ar-row-honeypot_bot { background: rgba(231,76,60,0.1); } /* Badges */ .ar-badge-blocked { background: #e74c3c; color: white; padding: 1px 6px; border-radius: 3px; font-size: 0.8em; } .ar-badge-success { background: #27ae60; color: white; padding: 1px 6px; border-radius: 3px; font-size: 0.8em; } .ar-badge-method { background: var(--tl-bg-secondary); color: var(--tl-text-muted); padding: 1px 6px; border-radius: 3px; font-size: 0.8em; } /* Text truncation */ .ar-ua-text { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; } .ar-reasons-text { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; font-size: 0.85em; color: var(--tl-text-muted); } .ar-url-text { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; font-size: 0.85em; } .ar-ref-text { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; font-size: 0.85em; color: var(--tl-text-muted); } /* Pagination */ .ar-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 16px; align-items: center; } .ar-page-link { background: var(--tl-bg-secondary); color: var(--tl-text-primary); border: 1px solid var(--tl-border); padding: 6px 12px; border-radius: 4px; font-size: 0.85em; cursor: pointer; } .ar-page-link:hover:not(:disabled) { background: var(--tl-bg-tertiary); } .ar-page-link.active { background: var(--tl-accent); color: white; border-color: var(--tl-accent); } .ar-page-link:disabled { opacity: 0.4; cursor: default; } .ar-page-info { color: var(--tl-text-muted); font-size: 0.85em; } /* Action buttons */ .ar-btn-purge { background: #e74c3c; color: white; border: none; padding: 5px 14px; border-radius: 4px; cursor: pointer; font-size: 0.8em; font-weight: 600; } .ar-btn-purge:hover { background: #c0392b; } .ar-btn-purge:disabled { opacity: 0.5; cursor: default; } .ar-btn-print { background: var(--tl-accent); color: white; border: none; padding: 5px 14px; border-radius: 4px; cursor: pointer; font-size: 0.8em; font-weight: 600; } .ar-btn-print:hover { opacity: 0.85; } /* ============================================================ SECURITY REPORTS (Log modals) ============================================================ */ .sr-modal-wide { max-width: 1100px; width: 95vw; } .sr-modal-body { max-height: 70vh; overflow-y: auto; padding: 0; } .sr-modal-body .ar-table-container { padding: 0; } .sr-modal-body .ar-table { font-size: 0.8em; } .sr-modal-body .ar-table td { padding: 5px 8px; } .sr-modal-body .ar-table th { padding: 6px 8px; font-size: 0.85em; } .sr-type-badge { background: var(--tl-bg-tertiary); color: var(--tl-text-primary); padding: 1px 8px; border-radius: 3px; font-size: 0.85em; font-family: monospace; } .sr-action-badge { background: rgba(37,99,235,0.1); color: var(--tl-accent); padding: 1px 8px; border-radius: 3px; font-size: 0.85em; font-weight: 600; text-transform: uppercase; }