/* ═══════════════════════════════════════════════ AI-Powered Monitoring (APM) — Web Design System Generated by mp-web ═══════════════════════════════════════════════ */ /* Google Fonts WAJIB via di setiap HTML — TIDAK ADA @import di file ini. */ /* ─────────────────────────────────────────────── 1. CSS Variables — :root (Custom — Dark Tech + Status Green, reskin ui-ux-pro-max) ─────────────────────────────────────────────── */ :root { color-scheme: light dark; /* Brand — reskin ui-ux-pro-max "Dark tech + status green" (Smart Home/IoT & Financial/RPA Dashboard match, --design-system query "admin dashboard SIEM security operations tool") */ --color-primary: #22c55e; --color-primary-hover: #16a34a; --color-primary-light: color-mix( in srgb, var(--color-primary) 15%, transparent ); --color-accent: #0ea5e9; --color-accent-hover: #0284c7; /* #22c55e fails WCAG AA (4.5:1) with white text (~2.3:1) — palet sumber ui-ux-pro-max menetapkan "On Accent/CTA: #0F172A" (teks gelap), bukan putih. Sama di light/dark: fill brand tidak berubah, ink di atas fill juga tidak. #ef4444 juga gagal AA dengan teks putih (3.76:1) — pola yang sama diterapkan (ink gelap, 4.74:1). */ --color-on-primary: #0f172a; --color-on-success: #0f172a; --color-on-warning: #0f172a; --color-on-danger: #0f172a; --color-on-info: #0f172a; /* Semantic — CANONICAL */ --color-success: #10b981; --color-success-light: #d1fae5; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-danger: #ef4444; --color-danger-light: #fee2e2; --color-info: #3b82f6; --color-info-light: #dbeafe; --color-purple: #8b5cf6; --color-purple-light: #ede9fe; /* Extended semantic text-on-surface pairing (bukan ink di atas fill solid) */ --color-danger-text: var(--alert-danger-text); --color-warning-text: #92400e; --color-success-text: var(--alert-success-text); --color-info-text: var(--alert-info-text); /* Badge foreground — light: gelap di atas pastel; dark: terang di atas tint */ --badge-primary-fg: var(--color-primary-hover); --badge-success-fg: var(--alert-success-text); --badge-warning-fg: var(--color-warning-text); --badge-danger-fg: var(--alert-danger-text); --badge-info-fg: var(--alert-info-text); --badge-purple-fg: #5b21b6; --badge-neutral-fg: var(--text-secondary); --badge-tint: 15%; --badge-severity-critical: var(--color-severity-critical); --badge-severity-high: var(--color-severity-high); --badge-severity-medium: var(--color-severity-medium); --badge-severity-low: var(--color-severity-low); --badge-confidence-high: var(--color-confidence-high); --badge-confidence-medium: var(--color-confidence-medium); --badge-confidence-low: var(--color-confidence-low); /* Domain — Severity & Confidence (APM) */ --color-severity-critical: #dc2626; --color-severity-high: #ea580c; --color-severity-medium: #ca8a04; --color-severity-low: #2563eb; --color-confidence-high: #16a34a; --color-confidence-medium: #ca8a04; --color-confidence-low: #6b7280; /* Surface — slate family (light mode) */ --bg-page: #fafbfd; --bg-surface: #ffffff; --bg-subtle: #f1f5f9; --bg-elevated: #f1f5f9; --bg-hover: #e2e8f0; /* Text — pola ORION light: muted = primary dengan alpha, BUKAN warna overlay */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: color-mix(in srgb, var(--text-primary) 58%, transparent); /* Border */ --border-default: #e2e8f0; --border-strong: #cbd5e1; --border-focus: var(--color-primary); /* Shadow — tinted with --text-primary (#0f172a = rgb(15,23,42)), per STYLE-GUIDE-WEB.md */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.16); /* Layout */ --header-height: 60px; --sidebar-width: 240px; --sidebar-width-collapsed: 80px; --font-mono: "Fira Code", "Courier New", monospace; /* Viewport canvas — MacBook 1440×800 / tablet 1280×800 (pola ORION/Waste360) */ --vp-design-w: 1440px; --vp-design-h: 800px; --vp-scale: 1; --vp-left: 0px; --vp-top: 0px; --vp-bg-overlay: rgba(232, 238, 246, 0.4); --vp-frame-bg: #e8eef6; /* Z-index — urutan wajib, DILARANG ubah */ --z-sidebar: 100; --z-dropdown: 150; --z-modal: 200; --z-modal-content: 201; --z-toast: 500; /* Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 20px; --radius-full: 9999px; /* Transition */ --transition-fast: 150ms ease; --transition-base: 200ms ease; /* Focus ring — canonical/14 §3 */ --ring-width: 2px; --ring-offset: 2px; --ring-color: var(--color-primary); /* Component Token Layer — alias ke semantic token di atas, DILARANG hardcode hex baru */ --btn-radius: var(--radius-md); --btn-focus-ring: var(--ring-color); --input-border: var(--border-default); --input-border-focus: var(--color-primary); --input-border-error: var(--color-danger); --input-bg: var(--bg-page); --card-bg: rgba(255, 255, 255, 0.6); --card-blur: 24px; --card-border: var(--border-default); --card-radius: var(--radius-2xl); --stat-card-radius: 16px; --stat-icon-radius: var(--radius-xl); --modal-bg: var(--card-bg); --modal-border: var(--border-default); --modal-overlay: rgba(0, 0, 0, 0.5); --toast-bg: var(--bg-surface); --toast-border-success: var(--color-success); --toast-border-warning: var(--color-warning); --toast-border-danger: var(--color-danger); --toast-border-info: var(--color-info); --table-row-hover: var(--bg-hover); --table-row-selected: var(--color-primary-light); --table-row-border: var(--border-default); --stat-card-shadow: -4px -4px 10px color-mix(in srgb, var(--bg-page) 60%, white 8%), 4px 4px 10px color-mix(in srgb, black 8%, transparent); /* Icon accent — light: gelap agar terbaca di kaca/foto; dark: terang */ --icon-primary-color: color-mix( in srgb, var(--color-primary) 52%, var(--text-primary) ); --icon-success-color: var(--color-success); --icon-warning-color: var(--color-warning); --icon-danger-color: var(--color-danger); --icon-info-color: var(--color-info); /* Alert readable text — dark high-contrast shade atop light tinted bg */ --alert-info-text: #1e40af; --alert-success-text: #065f46; --alert-warning-text: #92400e; --alert-danger-text: #991b1b; /* Visual Surface Treatments — gradient & glass, derivasi dari primary/accent/purple, BUKAN hex baru. HANYA surface dekoratif (auth page, hero, landing) — DILARANG di surface fungsional. */ --gradient-mesh: radial-gradient( at 15% 20%, color-mix(in srgb, var(--color-primary) 32%, transparent) 0px, transparent 55% ), radial-gradient( at 85% 10%, color-mix(in srgb, var(--color-accent) 28%, transparent) 0px, transparent 55% ), radial-gradient( at 50% 100%, color-mix(in srgb, var(--color-purple) 22%, transparent) 0px, transparent 60% ); --gradient-primary: linear-gradient( 135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 55%, var(--color-accent)) 100% ); --glass-bg: color-mix(in srgb, var(--bg-surface) 58%, transparent); --glass-border: color-mix(in srgb, white 72%, transparent); --glass-blur: 24px; --glass-saturate: 160%; --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.1); /* Tech grid — pola circuit/node orisinal (SVG inline, BUKAN foto), sengaja identik di light/dark supaya efek glass/blur pada .card terlihat jelas (permintaan user). */ --tech-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%2322c55e'%3E%3Cpath d='M0 60H120M60 0V120' stroke-opacity='0.16'/%3E%3Cpath d='M0 0L20 20M100 0L120 20M0 120L20 100M100 120L120 100' stroke-opacity='0.09'/%3E%3C/g%3E%3Cg fill='%2322c55e' fill-opacity='0.3'%3E%3Ccircle cx='60' cy='60' r='2.5'/%3E%3Ccircle cx='0' cy='60' r='1.5'/%3E%3Ccircle cx='120' cy='60' r='1.5'/%3E%3Ccircle cx='60' cy='0' r='1.5'/%3E%3Ccircle cx='60' cy='120' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); } /* ─────────────────────────────────────────────── 2. Dark Mode Override ─────────────────────────────────────────────── */ [data-theme="dark"] { --bg-page: #131b2e; --bg-surface: #1b2336; --bg-subtle: #272f42; --bg-elevated: #272f42; --bg-hover: #2f3a52; --card-bg: rgba(20, 27, 44, 0.55); --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border-default: #334155; --border-strong: #475569; --border-focus: #22c55e; --color-primary-light: color-mix( in srgb, var(--color-primary) 32%, transparent ); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16); --color-info-light: color-mix(in srgb, var(--color-info) 32%, transparent); --color-success-light: color-mix( in srgb, var(--color-success) 32%, transparent ); --color-warning-light: color-mix( in srgb, var(--color-warning) 32%, transparent ); --color-danger-light: color-mix( in srgb, var(--color-danger) 32%, transparent ); --color-purple-light: color-mix( in srgb, var(--color-purple) 32%, transparent ); --stat-card-shadow: -4px -4px 10px color-mix(in srgb, var(--bg-hover) 50%, transparent), 4px 4px 10px rgba(0, 0, 0, 0.4); --icon-primary-color: #86efac; --icon-success-color: #34d399; --icon-warning-color: #fcd34d; --icon-danger-color: #fca5a5; --icon-info-color: #93c5fd; --color-warning-text: #fde68a; --color-success-text: #6ee7b7; --color-danger-text: #fecaca; --color-info-text: #93c5fd; --badge-primary-fg: #86efac; --badge-success-fg: #6ee7b7; --badge-warning-fg: #fde68a; --badge-danger-fg: #fca5a5; --badge-info-fg: #93c5fd; --badge-purple-fg: #c4b5fd; --badge-neutral-fg: #e2e8f0; --badge-tint: 32%; --badge-severity-critical: #f87171; --badge-severity-high: #fb923c; --badge-severity-medium: #facc15; --badge-severity-low: #93c5fd; --badge-confidence-high: #4ade80; --badge-confidence-medium: #facc15; --badge-confidence-low: #cbd5e1; --alert-info-text: var(--badge-info-fg); --alert-success-text: var(--badge-success-fg); --alert-warning-text: var(--badge-warning-fg); --alert-danger-text: var(--badge-danger-fg); --vp-bg-overlay: rgba(11, 18, 32, 0.48); --vp-frame-bg: #0b1220; --glass-bg: color-mix(in srgb, var(--bg-surface) 55%, transparent); --glass-border: color-mix(in srgb, white 14%, transparent); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.28); } /* ─────────────────────────────────────────────── 3. Reset ─────────────────────────────────────────────── */ [hidden] { display: none !important; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } button { appearance: none; -webkit-appearance: none; background: none; border: none; outline: none; cursor: pointer; font-family: inherit; font-size: inherit; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } input, select, textarea { font-family: inherit; font-size: inherit; } /* ─────────────────────────────────────────────── 4. Base Typography ─────────────────────────────────────────────── */ html { color-scheme: light dark; font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } body { background: var(--vp-frame-bg); color: var(--text-primary); line-height: 1.5; position: relative; } body::before { content: ""; position: fixed; inset: 0; background: var(--gradient-mesh), var(--tech-grid); background-size: auto, 120px 120px; opacity: 0.3; pointer-events: none; z-index: 0; } html.vp-lock body::before { display: none; } .font-mono { font-family: var(--font-mono); } /* ─────────────────────────────────────────────── 5. Layout — App Shell ─────────────────────────────────────────────── */ .app-shell { display: flex; height: 100vh; overflow: hidden; position: relative; z-index: 1; background: transparent; } .app-sidebar { width: var(--sidebar-width); flex-shrink: 0; background: transparent; display: flex; flex-direction: column; align-self: stretch; margin: 12px 8px 12px 12px; height: auto; max-height: calc(100vh - 24px); min-height: 0; overflow: hidden; transition: width var(--transition-base); border: 0; border-radius: var(--radius-2xl); box-shadow: none; } .app-sidebar.collapsed:not(.open) { width: var(--sidebar-width-collapsed); } .app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; background: transparent; } .app-header { height: var(--header-height); flex-shrink: 0; background: transparent; display: flex; align-items: center; flex-wrap: nowrap; padding: 0 16px 0 8px; gap: 12px; } .app-content { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px 20px; background: transparent; } /* Device Gate — landscape + lebar ≥1024px */ .device-gate { display: none; position: fixed; inset: 0; z-index: 99999; isolation: isolate; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px; background: var(--vp-frame-bg); color: var(--text-primary); overflow: hidden; } .device-gate::before { content: ""; position: absolute; inset: -40px; z-index: 0; background: url("bg-ops.jpg") center / cover no-repeat; filter: blur(10px); pointer-events: none; } .device-gate::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--vp-bg-overlay); pointer-events: none; } .device-gate-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 420px; } .device-gate-icon { font-size: 40px; color: var(--color-primary); } .device-gate-title { font-size: 20px; font-weight: 700; letter-spacing: 0.04em; } .device-gate-sub { font-size: 15px; color: var(--text-secondary); line-height: 1.55; } .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 99; display: none; } .sidebar-overlay.open { display: block; } /* ─────────────────────────────────────────────── 5b. Viewport canvas — contain-fit 1280–1440 × 800 ke jendela ─────────────────────────────────────────────── */ html.vp-lock, html.vp-lock body { width: 100%; height: 100%; min-height: 100dvh; overflow: hidden !important; background: var(--vp-frame-bg); } .viewport-frame { position: fixed; inset: 0; z-index: 0; display: block; overflow: hidden; isolation: isolate; background: var(--vp-frame-bg); pointer-events: none; } .viewport-frame::before { content: ""; position: absolute; inset: -24px; z-index: 0; background: url("bg-ops.jpg") center / cover no-repeat; filter: blur(4px); pointer-events: none; } .viewport-frame::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--vp-bg-overlay); pointer-events: none; } html.vp-lock:has(.login-page) .viewport-frame::after { background: color-mix(in srgb, var(--vp-bg-overlay) 55%, transparent); } .viewport-stage { width: var(--vp-design-w); height: var(--vp-design-h); position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; transform-origin: 0 0; transform: translate(var(--vp-left), var(--vp-top)) scale(var(--vp-scale)); will-change: transform; pointer-events: auto; background: transparent; } html.vp-lock .app-shell, html.vp-lock .login-page { width: var(--vp-design-w) !important; height: var(--vp-design-h) !important; max-width: var(--vp-design-w) !important; max-height: var(--vp-design-h) !important; min-height: 0 !important; background: transparent !important; } html.vp-lock .app-sidebar { max-height: calc(var(--vp-design-h) - 24px); min-height: 0; position: relative !important; transform: none !important; inset: auto !important; left: auto !important; top: auto !important; } html.vp-lock .app-main, html.vp-lock .app-content { min-height: 0; } html.vp-lock .app-content { padding: 4px 20px 16px; } html.vp-lock .login-hero, html.vp-lock .login-panel { min-height: 0; overflow-y: auto; } html.device-restricted, html.device-restricted body { overflow: hidden !important; } html.device-restricted .device-gate { display: flex; } html.device-restricted .viewport-frame, html.device-restricted .viewport-stage, html.device-restricted .app-shell, html.device-restricted .login-page { display: none !important; } /* Sidebar tetap terlihat (in-flow, tidak off-canvas) sepanjang lebar tablet — termasuk landscape — dan hanya jadi drawer tersembunyi di bawah breakpoint mobile (≤640px). Saat vp-lock, layout memakai lebar canvas (1280–1440), bukan lebar jendela. */ @media (max-width: 640px) { html:not(.vp-lock) .app-sidebar { position: fixed; left: -280px; top: 0; z-index: var(--z-sidebar); transition: left var(--transition-base); } html:not(.vp-lock) .app-sidebar.open { left: 0; } } /* ─────────────────────────────────────────────── 6. Sidebar Components ─────────────────────────────────────────────── */ .sidebar-brand { height: var(--header-height); display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0; } .brand-logo { width: 40px; height: 40px; aspect-ratio: 1; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: var(--icon-primary-color); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; flex: 0 0 40px; } .brand-logo svg { width: 100%; height: 100%; } .brand-info { flex: 1; min-width: 0; } .brand-name { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0; } .nav-section { margin-bottom: 4px; } .nav-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); padding: 8px 16px 4px; display: block; } .nav-section-divider { display: none; height: 1px; background: var(--border-default); margin: 4px 12px; } .nav-item { display: flex; align-items: center; gap: 10px; margin: 4px 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--glass-border); cursor: pointer; color: var(--text-secondary); font-size: 13px; font-weight: 500; background: var(--glass-bg); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); position: relative; text-decoration: none; } .nav-item:hover { background: color-mix(in srgb, var(--bg-surface) 78%, transparent); color: var(--text-primary); border-color: var(--color-primary); } .nav-item.active { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 35%, transparent); } .nav-item.active .nav-icon { color: var(--color-on-primary); } .nav-icon { width: 18px; flex-shrink: 0; text-align: center; } .nav-label { flex: 1; } .nav-arrow { font-size: 11px; transition: transform var(--transition-fast); } .nav-item.open > .nav-arrow { transform: rotate(90deg); } .nav-badge { font-size: 11px; background: var(--color-danger); color: var(--color-on-danger); border-radius: var(--radius-full); padding: 1px 6px; font-weight: 600; min-width: 18px; text-align: center; margin-left: auto; flex-shrink: 0; } .nav-sub-item { display: flex; align-items: center; padding: 6px 16px 6px 44px; font-size: 13px; color: var(--text-secondary); cursor: pointer; } .nav-sub-item:hover { color: var(--text-primary); background: var(--bg-hover); } .nav-sub-item.active { color: var(--text-primary); background: var(--color-primary-light); font-weight: 500; } /* Collapsed state */ .app-sidebar.collapsed:not(.open) .brand-info, .app-sidebar.collapsed:not(.open) .nav-label, .app-sidebar.collapsed:not(.open) .nav-arrow, .app-sidebar.collapsed:not(.open) .nav-badge, .app-sidebar.collapsed:not(.open) .nav-section-label { display: none; } .app-sidebar.collapsed:not(.open) .nav-section-divider { display: block; width: 24px; margin: 2px auto; } .app-sidebar.collapsed:not(.open) .nav-section { margin-bottom: 0; display: flex; flex-direction: column; align-items: center; } .app-sidebar.collapsed:not(.open) .sidebar-nav { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4px 0; overflow-y: hidden; } .app-sidebar.collapsed:not(.open) .nav-item { justify-content: center; width: 40px; height: 40px; aspect-ratio: 1; box-sizing: border-box; flex: 0 0 40px; font-size: 18px; margin: 2px auto; padding: 0; border-radius: 10px; } .app-sidebar.collapsed:not(.open) .nav-icon { width: 18px; font-size: 18px; } .app-sidebar.collapsed:not(.open) .nav-item.active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); } .app-sidebar.collapsed:not(.open) .sidebar-brand { justify-content: center; padding: 0; } /* Expanded (dengan label) — rapat + center, tanpa scroll di canvas 800px */ .app-sidebar:not(.collapsed) .sidebar-nav, .app-sidebar.open .sidebar-nav { display: flex; flex-direction: column; justify-content: center; overflow-y: hidden; padding: 4px 0; } .app-sidebar:not(.collapsed) .nav-section, .app-sidebar.open .nav-section { margin-bottom: 0; } .app-sidebar:not(.collapsed) .nav-section-label, .app-sidebar.open .nav-section-label { padding: 4px 14px 2px; font-size: 10px; } .app-sidebar:not(.collapsed) .nav-item, .app-sidebar.open .nav-item { margin: 2px 8px; padding: 6px 10px; font-size: 12px; border-radius: 10px; } /* * AMANDEMEN WAJIB (STYLE-GUIDE-WEB.md §4): tooltip collapsed-state via JS position:fixed, * BUKAN CSS ::after — .sidebar-nav overflow-y:auto memaksa overflow-x non-visible, * meng-clip ::after yang keluar boundary. Implementasi ada di SidebarManager._initTooltips(). */ .sidebar-tooltip { position: fixed; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 4px 10px; font-size: 13px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-md); z-index: var(--z-dropdown); } /* ─────────────────────────────────────────────── 7. Header / Topbar ─────────────────────────────────────────────── */ .header-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } .header-titles { min-width: 0; display: flex; flex-direction: column; gap: 0; } .header-kicker { display: none; } .header-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-search { width: 180px; height: 38px; padding: 0 10px; border-radius: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); } .header-search .form-control { border: 0; background: transparent; height: 36px; box-shadow: none; padding-left: 28px; } .header-search .form-control:focus { outline: none; box-shadow: none; } .header-user { position: relative; display: flex; align-items: center; } .header-user-btn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; border-radius: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); font-size: 12.5px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); } .header-user-btn:hover, .header-user.is-open .header-user-btn { background: color-mix(in srgb, var(--bg-surface) 82%, transparent); border-color: color-mix(in srgb, var(--text-primary) 16%, transparent); } .header-user-photo, .header-user-fallback { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .header-user-photo[hidden], .header-user-fallback[hidden] { display: none !important; } .header-user-fallback { font-size: 11px; cursor: inherit; } .header-user-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-user-caret { color: var(--text-muted); font-size: 11px; transition: transform 0.15s ease; } .header-user.is-open .header-user-caret { transform: rotate(180deg); } .dropdown-menu.header-user-menu { width: 200px; min-width: 200px; padding: 4px; border-radius: 12px; border: 1px solid var(--border-default); background: var(--bg-elevated); box-shadow: var(--shadow-lg); overflow: hidden; top: calc(100% + 8px); } .dropdown-menu.header-user-menu .dropdown-header { padding: 8px 10px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); } .dropdown-menu.header-user-menu .dropdown-header strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); } .dropdown-menu.header-user-menu .dropdown-header .text-muted { color: var(--text-muted); } .dropdown-menu.header-user-menu .dropdown-item { gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-primary); } .dropdown-menu.header-user-menu .dropdown-item + .dropdown-item { border-top: 1px solid var(--border-default); border-radius: 0; } .dropdown-menu.header-user-menu .dropdown-item:last-child { border-radius: 0 0 8px 8px; } .dropdown-menu.header-user-menu .dropdown-item i { width: 18px; text-align: center; font-size: 14px; color: var(--text-muted); } .dropdown-menu.header-user-menu .dropdown-item:hover { background: var(--bg-hover); } .dropdown-menu.header-user-menu .dropdown-item:hover i { color: var(--text-primary); } .dropdown-menu.header-user-menu .dropdown-item.danger { color: var(--color-danger); } .dropdown-menu.header-user-menu .dropdown-item.danger i { color: var(--color-danger); } .dropdown-menu.header-user-menu .dropdown-item.danger:hover { background: color-mix(in srgb, var(--color-danger) 12%, transparent); } .header-sync, .header-right > .btn-icon, .header-right > .bell-wrapper .btn-icon { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); border-radius: 10px; } .header-sync { padding: 0 10px; height: 38px; } .header-left .btn-icon, .header-right .btn-icon { width: 38px; height: 38px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); border-radius: 10px; } .header-breadcrumb { display: flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1.3; order: -1; } .breadcrumb-item { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .breadcrumb-item a { color: var(--text-secondary); text-decoration: none; } .breadcrumb-item a:hover { color: var(--color-primary); } .breadcrumb-link { color: var(--text-secondary); } .breadcrumb-link:hover { color: var(--color-primary); } .breadcrumb-sep { color: var(--text-muted); font-size: 10px; flex-shrink: 0; } .breadcrumb-current { color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .header-sync { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } /* SSE Live Indicator (APM) */ .sse-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .sse-dot.connected { background: var(--color-success); animation: pulse 2s ease-in-out infinite; } .sse-dot.reconnecting { background: var(--color-warning); animation: pulse 1s ease-in-out infinite; } .sse-dot.offline { background: var(--color-danger); } .bell-wrapper { position: relative; display: inline-flex; } .bell-badge { position: absolute; top: -4px; right: -4px; background: var(--color-danger); color: var(--color-on-danger); font-size: 10px; font-weight: 700; border-radius: var(--radius-full); min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--bg-surface); } /* ─────────────────────────────────────────────── 8. Cards & Containers ─────────────────────────────────────────────── */ .card { background: var(--card-bg); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); border-radius: var(--card-radius); border: 1px solid var(--glass-border); overflow: hidden; box-shadow: var(--shadow-soft, var(--shadow-sm)); } @supports not (backdrop-filter: blur(1px)) { .card { background: var(--bg-surface); } } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-default); } .card-header-actions { display: flex; gap: 8px; align-items: center; } .card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .card-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .card-body { padding: 20px; } .card-footer { padding: 12px 20px; border-top: 1px solid var(--border-default); background: var(--bg-elevated); display: flex; align-items: center; justify-content: space-between; } .card-nested { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); } .card-nested-header { padding: 10px 14px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border-default); } .card-nested-body { padding: 14px; } .card.h-full { display: flex; flex-direction: column; height: 100%; } .card.h-full .card-body { flex: 1; min-height: 0; } /* Stat Card / KPI tile — WAJIB dibungkus .kpi-strip (opsional .grid-cols-2/3). Satu visual: glass compact seperti Investigation Dashboard. Warna lewat .stat-icon (.icon-warning dll), bukan border-top. .kpi-tile = alias .stat-card. */ .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .stat-card, .kpi-tile { display: flex; align-items: center; gap: 10px; min-width: 0; background: var(--card-bg); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: 10px 12px; } .stat-icon { width: 36px; height: 36px; border-radius: var(--stat-icon-radius); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .stat-body { flex: 1; min-width: 0; } .stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-value { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .stat-trend { font-size: 12px; margin-top: 0; display: flex; align-items: center; gap: 4px; } .trend-up { color: var(--color-success); } .trend-down { color: var(--color-danger); } .trend-flat { color: var(--text-muted); } /* AI Insight widget — daftar insight ringkas (dot warna + judul + deskripsi) diikuti form query singkat yang mengarahkan ke NLQuery (bukan chatbox baru — reuse halaman existing). */ .ai-insight-list { display: flex; flex-direction: column; gap: 12px; max-height: 230px; overflow-y: auto; padding-right: 4px; } .ai-insight-item { display: flex; gap: 10px; } .ai-insight-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; } .ai-insight-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .ai-insight-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .ai-insight-form { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-default); } .ai-insight-form .form-control { flex: 1; } /* ─────────────────────────────────────────────── 9. Page Header ─────────────────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; } .page-header-left { display: flex; align-items: center; gap: 12px; } .page-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .page-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .btn-back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; text-decoration: none; flex-shrink: 0; transition: background var(--transition-fast), color var(--transition-fast); } .btn-back:hover { background: var(--bg-elevated); color: var(--text-primary); } @media (max-width: 640px) { .page-header { flex-direction: column; gap: 12px; } .page-header-actions { width: 100%; justify-content: flex-end; } } /* ─────────────────────────────────────────────── 10. Tables ─────────────────────────────────────────────── */ .table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-default); } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead th { background: var(--bg-surface); padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border-default); white-space: nowrap; } tbody td { padding: 12px 16px; border-bottom: 1px solid var(--table-row-border); color: var(--text-primary); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--table-row-hover); } tbody tr.selected { background: var(--table-row-selected); } .col-no { width: 48px; text-align: center; } .col-action td, td.col-action { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; min-width: 100px; } .sortable { cursor: pointer; user-select: none; } .sortable:hover { color: var(--text-primary); } .sort-icon { font-size: 10px; color: var(--text-muted); margin-left: 4px; } /* Segmented pill toggle — grup filter periode (mis. Week/Month/Year), alternatif form-select untuk 2-4 opsi yang saling eksklusif dan sering diganti. */ .segmented { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-full); } .segmented-item { appearance: none; border: none; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .segmented-item:hover { color: var(--text-primary); } .segmented-item.active { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); } .table-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: nowrap; overflow-x: auto; } .table-toolbar .search-box { flex: 1; min-width: 160px; max-width: 280px; } .table-toolbar .form-select, .table-toolbar .form-select-sm { width: auto; flex-shrink: 0; min-width: 120px; } .table-toolbar .flex { flex-shrink: 0; } .table-title { font-size: 15px; font-weight: 600; color: var(--text-primary); } .empty-row td { padding: 0; border: none; } .table-empty { text-align: center; padding: 48px 24px; } .table-empty-icon { font-size: 36px; color: var(--text-muted); margin-bottom: 12px; } .table-empty-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .table-empty-sub { font-size: 13px; color: var(--text-muted); } .pagination { display: flex; align-items: center; gap: 4px; } .pagination-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; color: var(--text-secondary); background: var(--bg-surface); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .pagination-btn:hover { background: var(--bg-elevated); } .pagination-btn.active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } .pagination-ellipsis { padding: 0 6px; color: var(--text-muted); } .pagination-info { font-size: 13px; color: var(--text-muted); } .table-sticky-header thead th { position: sticky; top: 0; z-index: 1; } /* ─────────────────────────────────────────────── 11. Forms ─────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); } .form-label .required { color: var(--color-danger); margin-left: 2px; } .form-control { width: 100%; height: 38px; border: 1px solid var(--input-border); border-radius: var(--radius-md); padding: 0 12px; font-size: 14px; color: var(--text-primary); background: var(--input-bg); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-control:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--color-primary-light); } .form-control.error { border-color: var(--input-border-error); } .form-control:disabled { opacity: 0.5; background: var(--bg-surface); cursor: not-allowed; } .form-control-lg { height: 44px; font-size: 15px; } textarea.form-control { height: auto; padding: 10px 12px; resize: vertical; } .form-select { width: 100%; height: 38px; border: 1px solid var(--input-border); border-radius: var(--radius-md); padding: 0 36px 0 12px; font-size: 14px; color: var(--text-primary); background: var(--input-bg); outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23818CF8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; } .form-select:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--color-primary-light); outline: none; } .form-select-sm { height: 30px; font-size: 13px; } .form-select:disabled { opacity: 0.5; cursor: not-allowed; } .form-error { display: block; font-size: 12px; color: var(--color-danger); margin-top: 4px; } .form-hint { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; } .form-check { display: flex; align-items: center; gap: 8px; } .form-check-label { font-size: 14px; cursor: pointer; } .form-row { display: flex; align-items: center; gap: 16px; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .form-row-2, .form-row-3 { grid-template-columns: 1fr; } } .input-group { display: flex; align-items: stretch; position: relative; } .input-group .form-control { flex: 1; padding-left: 36px; } .input-prefix { position: absolute; left: 12px; top: 0; height: 38px; display: flex; align-items: center; color: var(--text-muted); font-size: 14px; pointer-events: none; z-index: 1; } .input-suffix { position: absolute; right: 12px; top: 0; height: 38px; display: flex; align-items: center; color: var(--text-muted); font-size: 14px; } .input-group .form-control.has-suffix { padding-right: 36px; } .search-box { position: relative; display: flex; align-items: center; } .search-icon { position: absolute; left: 10px; color: var(--text-muted); font-size: 13px; pointer-events: none; } .search-box .form-control { padding-left: 32px; } .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: 12px; transition: background var(--transition-base); } .toggle-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #f8fafc; border-radius: 50%; transition: transform var(--transition-base); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .toggle-switch input:checked + .toggle-slider { background: var(--color-primary); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); } .toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; } /* ─────────────────────────────────────────────── 12. Buttons ─────────────────────────────────────────────── */ .btn { --btn-fg: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--btn-radius); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; color: var(--btn-fg); transition: filter var(--transition-fast), transform var(--transition-fast); border: none; } .btn-xs { height: 24px; padding: 0 8px; font-size: 11px; border-radius: var(--radius-sm); } .btn-sm { height: 30px; padding: 0 12px; font-size: 13px; } .btn-lg { height: 44px; padding: 0 20px; font-size: 16px; } .btn-xl { height: 52px; padding: 0 24px; font-size: 16px; } .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--btn-radius); --btn-fg: var(--text-secondary); color: var(--btn-fg); } .btn-icon:hover { background: var(--bg-hover); --btn-fg: var(--text-primary); color: var(--btn-fg); } .btn-icon.btn-primary:hover, .btn-icon.btn-success:hover, .btn-icon.btn-danger:hover, .btn-icon.btn-warning:hover { background: transparent; color: var(--btn-fg); } .btn-icon.btn-primary:hover { --btn-fg: var(--color-on-primary); } .btn-icon.btn-success:hover { --btn-fg: var(--color-on-success); } .btn-icon.btn-danger:hover { --btn-fg: var(--color-on-danger); } .btn-icon.btn-warning:hover { --btn-fg: var(--color-on-warning); } .btn-icon.btn-xs { width: 24px; height: 24px; border-radius: var(--radius-sm); } .btn-icon.btn-sm { width: 30px; height: 30px; } .btn-icon.btn-lg { width: 44px; height: 44px; } .btn-primary { background: var(--color-primary); --btn-fg: var(--color-on-primary); color: var(--btn-fg); } .btn-secondary { background: transparent; border: 1px solid var(--border-default); --btn-fg: var(--text-primary); color: var(--btn-fg); } .btn-outline { background: transparent; border: 1px solid currentColor; --btn-fg: var(--badge-primary-fg); color: var(--btn-fg); } .btn-outline:hover { background: var(--color-primary-light); } .btn-outline-secondary { background: transparent; border: 1px solid var(--border-default); --btn-fg: var(--text-primary); color: var(--btn-fg); } .btn-outline-secondary:hover { background: var(--bg-hover); } .btn-outline-warning { background: transparent; border: 1px solid currentColor; --btn-fg: var(--badge-warning-fg); color: var(--btn-fg); } .btn-outline-warning:hover { background: var(--color-warning-light); } .btn-ghost { background: transparent; --btn-fg: var(--text-secondary); color: var(--btn-fg); } .btn-ghost:hover { background: var(--bg-hover); --btn-fg: var(--text-primary); color: var(--btn-fg); } .btn-danger { background: var(--color-danger); --btn-fg: var(--color-on-danger); color: var(--btn-fg); } .btn-danger-outline { background: transparent; border: 1px solid currentColor; --btn-fg: var(--badge-danger-fg); color: var(--btn-fg); } .btn-danger-outline:hover { background: var(--color-danger-light); } .btn-success { background: var(--color-success); --btn-fg: var(--color-on-success); color: var(--btn-fg); } .btn-warning { background: var(--color-warning); --btn-fg: var(--color-on-warning); color: var(--btn-fg); } .btn-link { background: transparent; --btn-fg: var(--badge-primary-fg); color: var(--btn-fg); padding: 0; height: auto; text-decoration: underline; } .btn-link:hover { text-decoration: none; } .btn:hover { filter: brightness(0.92); } .btn-success:hover, .btn-warning:hover { filter: brightness(0.88); } .btn:active { transform: scale(0.98); } .btn.loading { position: relative; color: transparent; pointer-events: none; } .btn.loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--btn-fg) 35%, transparent); border-top-color: var(--btn-fg); border-radius: 50%; animation: spin 0.6s linear infinite; } /* ─────────────────────────────────────────────── 13. Badges & Status ─────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.4; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); } .badge-primary { background: var(--color-primary-light); color: var(--badge-primary-fg); } .badge-success { background: var(--color-success-light); color: var(--badge-success-fg); } .badge-warning { background: var(--color-warning-light); color: var(--badge-warning-fg); } .badge-danger { background: var(--color-danger-light); color: var(--badge-danger-fg); } .badge-info { background: var(--color-info-light); color: var(--badge-info-fg); } .badge-purple { background: var(--color-purple-light); color: var(--badge-purple-fg); } .badge-gray { background: var(--bg-elevated); color: var(--badge-neutral-fg); } .badge-outline { background: transparent; border: 1px solid currentColor; } .badge-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 0; } .badge-dot::before { content: ""; } .badge-role-soc-analyst { background: var(--color-info-light); color: var(--badge-info-fg); } .badge-role-network-admin { background: var(--color-purple-light); color: var(--badge-purple-fg); } .badge-role-security-engineer { background: var(--color-primary-light); color: var(--badge-primary-fg); } .badge-role-compliance-officer { background: var(--color-warning-light); color: var(--badge-warning-fg); } /* Domain-Specific Badges (APM) */ .badge-severity-critical { background: color-mix( in srgb, var(--badge-severity-critical) var(--badge-tint), transparent ); color: var(--badge-severity-critical); } .badge-severity-high { background: color-mix( in srgb, var(--badge-severity-high) var(--badge-tint), transparent ); color: var(--badge-severity-high); } .badge-severity-medium { background: color-mix( in srgb, var(--badge-severity-medium) var(--badge-tint), transparent ); color: var(--badge-severity-medium); } .badge-severity-low { background: color-mix( in srgb, var(--badge-severity-low) var(--badge-tint), transparent ); color: var(--badge-severity-low); } .badge-confidence-high { background: color-mix( in srgb, var(--badge-confidence-high) var(--badge-tint), transparent ); color: var(--badge-confidence-high); } .badge-confidence-medium { background: color-mix( in srgb, var(--badge-confidence-medium) var(--badge-tint), transparent ); color: var(--badge-confidence-medium); } .badge-confidence-low { background: color-mix( in srgb, var(--badge-confidence-low) var(--badge-tint), transparent ); color: var(--badge-confidence-low); } .badge-status-pending_review { background: var(--color-warning-light); color: var(--badge-warning-fg); } .badge-status-confirmed { background: var(--color-success-light); color: var(--badge-success-fg); } .badge-status-dismissed { background: var(--bg-elevated); color: var(--badge-neutral-fg); } .badge-status-escalated { background: var(--color-purple-light); color: var(--badge-purple-fg); } .badge-status-closed { background: var(--bg-elevated); color: var(--badge-neutral-fg); } .badge-status-active { background: var(--color-success-light); color: var(--badge-success-fg); } .badge-status-degraded { background: var(--color-warning-light); color: var(--badge-warning-fg); } .badge-status-silent { background: var(--color-danger-light); color: var(--badge-danger-fg); } .badge-status-draft { background: var(--bg-elevated); color: var(--badge-neutral-fg); } .badge-status-shadow_test { background: var(--color-info-light); color: var(--badge-info-fg); } .badge-status-active-rule { background: var(--color-success-light); color: var(--badge-success-fg); } .badge-status-deprecated { background: var(--bg-elevated); color: var(--badge-neutral-fg); } .badge-status-generating { background: var(--color-info-light); color: var(--badge-info-fg); } .badge-status-ready { background: var(--color-success-light); color: var(--badge-success-fg); } .badge-status-failed { background: var(--color-danger-light); color: var(--badge-danger-fg); } .badge-status-drift-pending { background: var(--color-warning-light); color: var(--badge-warning-fg); } .badge-status-drift-approved { background: var(--color-success-light); color: var(--badge-success-fg); } .badge-status-drift-rejected { background: var(--color-danger-light); color: var(--badge-danger-fg); } /* ─────────────────────────────────────────────── 14. Icon Color Helpers ─────────────────────────────────────────────── */ .icon-primary { background: color-mix(in srgb, var(--icon-primary-color) 16%, transparent); color: var(--icon-primary-color); } .icon-success { background: var(--color-success-light); color: var(--color-success); } .icon-warning { background: var(--color-warning-light); color: var(--color-warning); } .icon-danger { background: var(--color-danger-light); color: var(--color-danger); } .icon-info { background: var(--color-info-light); color: var(--color-info); } .icon-muted { background: var(--bg-elevated); color: var(--text-muted); } .icon-success { color: var(--icon-success-color); } .icon-primary { color: var(--icon-primary-color); } .icon-warning { color: var(--icon-warning-color); } .icon-danger { color: var(--icon-danger-color); } .icon-info { color: var(--icon-info-color); } .icon-sm { width: 32px; height: 32px; font-size: 13px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); flex-shrink: 0; } .icon-md { width: 40px; height: 40px; font-size: 16px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); flex-shrink: 0; } .icon-lg { width: 48px; height: 48px; font-size: 20px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); flex-shrink: 0; } /* ─────────────────────────────────────────────── 15. Avatar ─────────────────────────────────────────────── */ .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; user-select: none; overflow: hidden; } .avatar-sm { width: 28px; height: 28px; font-size: 11px; } .avatar-lg { width: 48px; height: 48px; font-size: 16px; } .avatar-xl { width: 72px; height: 72px; font-size: 24px; } .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .list-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-default); min-height: 64px; cursor: pointer; } .list-item:last-child { border-bottom: none; } .list-item:hover { background: var(--bg-hover); } .list-body { flex: 1; min-width: 0; } .list-title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } /* ─────────────────────────────────────────────── 16. Navigation — Tabs, Filter, Breadcrumb ─────────────────────────────────────────────── */ .tabs { display: flex; border-bottom: 1px solid var(--border-default); margin-bottom: 20px; gap: 0; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab-item { padding: 10px 16px; cursor: pointer; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; transition: color var(--transition-fast), border-color var(--transition-fast); } .tab-item:hover { color: var(--text-primary); } .tab-item.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 500; } .tab-count { font-size: 11px; background: var(--bg-elevated); border-radius: var(--radius-full); padding: 1px 6px; margin-left: 4px; color: var(--text-muted); } .tab-item.active .tab-count { background: var(--color-primary-light); color: var(--color-primary); } .tab-pane { display: none; padding-top: 20px; } .tab-pane.active { display: block; } .filter-bar { display: flex; align-items: center; gap: 8px; padding: 12px 0; flex-wrap: wrap; } .filter-chip { padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid var(--border-default); font-size: 13px; cursor: pointer; color: var(--text-secondary); background: var(--bg-surface); white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast); } .filter-chip:hover { border-color: var(--badge-primary-fg); color: var(--badge-primary-fg); background: var(--bg-elevated); } .filter-chip.active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } /* ─────────────────────────────────────────────── 17. Modals & Overlays ─────────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--modal-overlay); z-index: var(--z-modal); align-items: center; justify-content: center; padding: 16px; } .modal-overlay.open { display: flex; } .modal { position: relative; z-index: var(--z-modal-content); background: var(--modal-bg); backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); border-radius: var(--radius-xl); border: 1px solid var(--modal-border); box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; width: 100%; max-width: 560px; animation: modal-in 0.2s ease; } @supports not (backdrop-filter: blur(1px)) { .modal { background: var(--bg-surface); } } .modal-sm { max-width: 400px; } .modal-md { max-width: 560px; } .modal-lg { max-width: 720px; } .modal-xl { max-width: 900px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-default); flex-shrink: 0; } .modal-title { font-size: 16px; font-weight: 600; color: var(--text-primary); } .modal-close { color: var(--text-secondary); } .modal-close:hover { color: var(--text-primary); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; } @media (max-width: 640px) { .modal-overlay { padding: 0; align-items: flex-end; } .modal { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 95vh; } } /* ─────────────────────────────────────────────── 18. Toast ─────────────────────────────────────────────── */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; max-width: 360px; width: calc(100vw - 48px); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--toast-bg); border-radius: var(--radius-lg); border: 1px solid var(--border-default); border-left: 4px solid transparent; box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in 0.25s ease; } .toast-success { border-left-color: var(--toast-border-success); } .toast-error { border-left-color: var(--toast-border-danger); } .toast-warning { border-left-color: var(--toast-border-warning); } .toast-info { border-left-color: var(--toast-border-info); } .toast-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; } .toast-body { flex: 1; min-width: 0; } .toast-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .toast-message { font-size: 13px; color: var(--text-secondary); margin-top: 2px; } .toast-close { color: var(--text-muted); margin-left: auto; flex-shrink: 0; } .toast-close:hover { color: var(--text-primary); } /* ─────────────────────────────────────────────── 19. Dropdown ─────────────────────────────────────────────── */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); min-width: 180px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); overflow: hidden; } .dropdown-menu.open, .dropdown-menu[style*="display: block"] { display: block; } .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 14px; color: var(--text-primary); cursor: pointer; width: 100%; white-space: nowrap; background: none; border: none; text-align: left; } .dropdown-item:hover { background: var(--bg-hover); } .dropdown-item.danger { color: var(--color-danger); } .dropdown-header { padding: 10px 16px 8px; border-bottom: 1px solid var(--border-default); } .dropdown-divider { height: 1px; background: var(--border-default); margin: 4px 0; } /* ─────────────────────────────────────────────── 20. Feedback — Alert, Progress, Empty, Skeleton ─────────────────────────────────────────────── */ .alert { display: flex; gap: 12px; padding: 12px 16px; border-radius: var(--radius-lg); border-left: 4px solid transparent; font-size: 14px; line-height: 1.5; margin-bottom: 16px; } .alert-icon { flex-shrink: 0; margin-top: 1px; } .alert-body { flex: 1; } .alert-title { font-weight: 600; margin-bottom: 2px; } .alert-info { background: var(--color-info-light); border-left-color: var(--color-info); color: var(--alert-info-text); } .alert-success { background: var(--color-success-light); border-left-color: var(--color-success); color: var(--alert-success-text); } .alert-warning { background: var(--color-warning-light); border-left-color: var(--color-warning); color: var(--alert-warning-text); } .alert-danger { background: var(--color-danger-light); border-left-color: var(--color-danger); color: var(--alert-danger-text); } .progress-bar { height: 6px; background: var(--bg-elevated); border-radius: var(--radius-full); overflow: hidden; width: 100%; } .progress-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width 0.3s ease; } .progress-fill.success { background: var(--color-success); } .progress-fill.warning { background: var(--color-warning); } .progress-fill.danger { background: var(--color-danger); } .empty-state { text-align: center; padding: 60px 24px; display: flex; flex-direction: column; align-items: center; } .empty-icon { font-size: 48px; color: var(--text-muted); margin-bottom: 16px; opacity: 0.5; } .empty-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .empty-sub { font-size: 14px; color: var(--text-muted); max-width: 360px; line-height: 1.5; } .skeleton { background: linear-gradient( 90deg, var(--bg-surface) 25%, var(--bg-elevated) 50%, var(--bg-surface) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } .skeleton-text { height: 14px; border-radius: var(--radius-sm); } .skeleton-title { height: 20px; width: 60%; border-radius: var(--radius-sm); } .skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; } .timeline { position: relative; padding-left: 24px; list-style: none; } .timeline::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--border-default); } .timeline-item { position: relative; padding-bottom: 20px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: -21px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-surface); border: 2px solid var(--border-default); top: 2px; } .timeline-dot.active { background: var(--color-primary); border-color: var(--color-primary); } .timeline-dot.success { background: var(--color-success); border-color: var(--color-success); } .timeline-dot.warning { background: var(--color-warning); border-color: var(--color-warning); } .timeline-dot.danger { background: var(--color-danger); border-color: var(--color-danger); } .timeline-title { font-weight: 600; font-size: 14px; color: var(--text-primary); } .timeline-time { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ─────────────────────────────────────────────── 21. Charts & Maps ─────────────────────────────────────────────── */ .chart-container { position: relative; width: 100%; } .chart-host { position: relative; width: 100%; } .map-host { position: relative; width: 100%; } .chart-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .legend-item-color { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; } .legend-label { font-size: 12px; color: var(--text-secondary); } /* ─────────────────────────────────────────────── 22. Domain-Specific — APM ─────────────────────────────────────────────── */ /* APM — Reasoning Trace Viewer (W02) */ .reasoning-step { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-default); } .reasoning-step:last-child { border-bottom: none; } .reasoning-step-index { width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .reasoning-step-body { flex: 1; min-width: 0; } .reasoning-step-label { font-size: 13px; font-weight: 600; color: var(--text-primary); } .reasoning-step-detail { font-size: 13px; color: var(--text-secondary); margin-top: 2px; } .reasoning-step-evidence { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); } /* APM — Log Viewer */ .log-viewer { background: var(--bg-page); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; max-height: 320px; overflow-y: auto; font-family: var(--font-mono); } .log-line { font-size: 12px; padding: 2px 0; white-space: pre-wrap; word-break: break-all; } .log-line-highlight { background: var(--color-warning-light); } /* APM — Schema Drift Diff (W10) */ .diff-added { background: var(--color-success-light); color: var(--color-success); padding: 4px 8px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; } .diff-removed { background: var(--color-danger-light); color: var(--color-danger); text-decoration: line-through; padding: 4px 8px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; } .diff-changed { background: var(--color-warning-light); color: var(--color-warning-text); padding: 4px 8px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; } /* APM — SLA Countdown (W12) */ .sla-countdown { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-secondary); } .sla-warning { color: var(--color-warning); } .sla-critical { color: var(--color-danger); animation: pulse 1.5s ease-in-out infinite; } /* APM — Workflow / Shadow Test Stepper (W07) */ .sim-stepper { display: flex; align-items: flex-start; padding: 12px 0 4px; } .stepper-step { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--text-muted); position: relative; flex: 1; padding: 0 4px; text-align: center; } .stepper-step::before { content: ""; position: absolute; top: 16px; left: 0; right: 50%; height: 2px; background: var(--border-default); z-index: 0; } .stepper-step::after { content: ""; position: absolute; top: 16px; left: 50%; right: 0; height: 2px; background: var(--border-default); z-index: 0; } .stepper-step:first-child::before { display: none; } .stepper-step:last-child::after { display: none; } .stepper-step i { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-default); background: var(--bg-page); font-size: 12px; color: var(--text-muted); position: relative; z-index: 1; flex-shrink: 0; } .stepper-step.done { color: var(--color-success); } .stepper-step.done i { background: var(--color-success-light); border-color: var(--color-success); color: var(--color-success); } .stepper-step.done::before, .stepper-step.done::after { background: var(--color-success); } .stepper-step.active { color: var(--color-primary); font-weight: 600; } .stepper-step.active i { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 0 0 4px var(--color-primary-light); } /* ─────────────────────────────────────────────── 23. Login Page — split hero + panel (pola ORION/Waste360) ─────────────────────────────────────────────── */ .login-page { position: relative; isolation: isolate; min-height: 100vh; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; background: transparent; padding: 0; overflow: hidden; } .login-page::before { display: none; } .login-hero { display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; min-width: 0; z-index: 1; } .login-hero-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-primary); margin-bottom: 12px; } .login-hero-title { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--text-primary); margin-bottom: 12px; } .login-hero-title em { font-style: normal; color: var(--icon-primary-color); } .login-hero-sub { font-size: 14px; color: var(--text-primary); max-width: 420px; margin-bottom: 28px; line-height: 1.6; } .login-role-list { list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 420px; } .login-role-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); cursor: pointer; text-align: left; width: 100%; color: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .login-role-item:hover, .login-role-item.is-active { border-color: var(--color-primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 18%, transparent); } .login-role-num { width: 28px; height: 28px; border-radius: 8px; background: var(--color-primary); color: var(--color-on-primary); font-size: 12px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .login-role-item > i { font-size: 20px; color: var(--icon-primary-color); width: 24px; text-align: center; flex-shrink: 0; } .login-role-item strong { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); } .login-role-item em { display: block; font-style: normal; font-size: 12px; color: color-mix(in srgb, var(--text-primary) 72%, transparent); } .login-panel { display: flex; align-items: center; justify-content: center; padding: 32px; z-index: 1; } .login-card { width: 100%; max-width: 400px; background: var(--glass-bg); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); border-radius: 22px; padding: 36px 32px; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } @supports not (backdrop-filter: blur(1px)) { .login-card, .login-role-item, .nav-item, .card { background: var(--bg-surface); } } .login-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; text-align: center; } .login-logo-icon { width: 56px; height: 56px; aspect-ratio: 1; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: var(--icon-primary-color); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; flex: 0 0 56px; } .login-logo-icon svg { width: 100%; height: 100%; } .login-logo-text { flex: 1; } .login-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .login-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 0; } .login-footer { text-align: center; margin-top: 20px; font-size: 12px; color: var(--text-muted); } .password-field { position: relative; } .password-field .form-control { padding-right: 44px; } .password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-muted); border-radius: 8px; } .password-toggle:hover { color: var(--text-primary); background: var(--bg-hover); } html.vp-lock .login-page { grid-template-columns: 1.05fr 0.95fr !important; overflow: hidden !important; padding: 0 !important; } /* ─────────────────────────────────────────────── 24. Typography Utilities (WAJIB SETELAH component) ─────────────────────────────────────────────── */ .text-xs { font-size: 11px; } .text-sm { font-size: 12px; } .text-base { font-size: 14px; } .text-lg { font-size: 16px; } .text-xl { font-size: 18px; } .text-2xl { font-size: 20px; } .text-3xl { font-size: 24px; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-success { color: var(--color-success-text); } .text-warning { color: var(--color-warning-text); } .text-danger { color: var(--color-danger-text); } .text-center { text-align: center; } .text-right { text-align: right; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uppercase { text-transform: uppercase; letter-spacing: 0.05em; } .capitalize { text-transform: capitalize; } .link { color: var(--color-primary); cursor: pointer; text-decoration: underline; } .link:hover { text-decoration: none; } .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; } /* ─────────────────────────────────────────────── 25. Grid & Flex Utilities (WAJIB SETELAH component) ─────────────────────────────────────────────── */ .grid { display: grid; gap: 20px; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .grid-cols-main-aside { grid-template-columns: 2fr 1fr; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .flex-shrink-0 { flex-shrink: 0; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } /* ─────────────────────────────────────────────── 26. Spacing Utilities (WAJIB SETELAH component) ─────────────────────────────────────────────── */ .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .p-0 { padding: 0; } .p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-5 { padding: 20px; } .p-6 { padding: 24px; } .px-4 { padding-left: 16px; padding-right: 16px; } .py-2 { padding-top: 8px; padding-bottom: 8px; } .py-4 { padding-top: 16px; padding-bottom: 16px; } /* ─────────────────────────────────────────────── 27. Width / Height / Border / Bg / Shadow Utilities ─────────────────────────────────────────────── */ .w-full { width: 100%; } .min-w-0 { min-width: 0; } .h-full { height: 100%; } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); } .border { border: 1px solid var(--border-default); } .border-top { border-top: 1px solid var(--border-default); } .border-bottom { border-bottom: 1px solid var(--border-default); } .divider { height: 1px; background: var(--border-default); } .bg-page { background: var(--bg-page); } .bg-surface { background: var(--bg-surface); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } /* ─────────────────────────────────────────────── 28. Display / Visibility / Misc Utilities ─────────────────────────────────────────────── */ .hidden { display: none !important; } .block { display: block; } .overflow-hidden { overflow: hidden; } /* ─────────────────────────────────────────────── 29. Animations & Keyframes ─────────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { opacity: 0; transform: scale(0.95) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-fade { animation: fade-in 0.2s ease; } .animate-spin { animation: spin 1s linear infinite; } .animate-pulse { animation: pulse 2s ease-in-out infinite; } /* ─────────────────────────────────────────────── 30. Scrollbar ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } /* ─────────────────────────────────────────────── 31. Interactive States — Focus Ring, Disabled, Loading, Error State Priority Order: disabled > loading > active > focus > hover > default (dideklarasikan SETELAH semua rule hover/active di atas — cascade menang alami) ─────────────────────────────────────────────── */ :focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-offset) var(--bg-surface), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color); } .btn-danger:focus-visible, .btn-danger-outline:focus-visible { --ring-color: var(--color-danger); } .btn-success:focus-visible { --ring-color: var(--color-success); } .btn-warning:focus-visible { --ring-color: var(--color-warning); } /* Sidebar nav item — offset ring pakai warna sidebar (kini menyatu dengan --bg-page) */ .nav-item:focus-visible, .nav-sub-item:focus-visible { box-shadow: 0 0 0 var(--ring-offset) var(--bg-page), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color); } .btn:disabled, .btn[aria-disabled="true"], .form-control:disabled, .form-select:disabled, .pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .form-control.error { border-color: var(--input-border-error); } /* ─────────────────────────────────────────────── 32. Responsive Breakpoints ─────────────────────────────────────────────── */ @media (max-width: 1024px) { html:not(.vp-lock) .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } html:not(.vp-lock) .grid-cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { html:not(.vp-lock) .grid-cols-2, html:not(.vp-lock) .grid-cols-3, html:not(.vp-lock) .grid-cols-4, html:not(.vp-lock) .grid-cols-main-aside { grid-template-columns: 1fr; } html:not(.vp-lock) .form-row-2, html:not(.vp-lock) .form-row-3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { html:not(.vp-lock) .app-content { padding: 16px; } html:not(.vp-lock) .stat-card, html:not(.vp-lock) .kpi-tile { padding: 10px 12px; } } @media (orientation: portrait), (max-width: 1023px) { html:not(.vp-lock):not(.device-restricted) .device-gate { display: flex; } html:not(.vp-lock):not(.device-restricted) .app-shell, html:not(.vp-lock):not(.device-restricted) .login-page { display: none; } } /* ─────────────────────────────────────────────── 33. prefers-reduced-motion — WAJIB PALING AKHIR ─────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }