:root { color-scheme: light; --font: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --mono: var(--font); --bg: #ffffff; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f1f5f9; --surface-3: #e2e8f0; --text: #0f172a; --text-secondary: #334155; --muted: #64748b; --muted-2: #94a3b8; --border: rgba(15, 23, 42, 0.07); --border-strong: rgba(15, 23, 42, 0.12); --hairline: rgba(15, 23, 42, 0.05); --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: rgba(37, 99, 235, 0.1); --accent-ring: rgba(37, 99, 235, 0.22); --accent-gradient: linear-gradient(135deg, #1d4ed8, #3b82f6); --primary: #2563eb; --primary-rgb: 37, 99, 235; --card: var(--surface); --blue: #0284c7; --amber: #d97706; --orange: #ea580c; --green: #16a34a; --red: #dc2626; --purple: #7c3aed; --pink: #db2777; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.05); --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.2); --panel-elev: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06); --radius: 10px; --radius-md: 12px; --radius-sm: 8px; --radius-xs: 6px; --radius-lg: 16px; --sidebar-w: 260px; --sidebar-w-collapsed: 68px; --content-max: 1360px; --topbar-h: 64px; --mobile-nav-h: 68px; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --transition: 0.22s var(--ease); --transition-fast: 0.15s var(--ease); } [data-theme="dark"] { color-scheme: dark; --bg: #111827; --bg-elevated: #111827; --surface: #111827; --surface-2: #1e293b; --surface-3: #334155; --text: #f1f5f9; --text-secondary: #cbd5e1; --muted: #94a3b8; --muted-2: #64748b; --border: rgba(248, 250, 252, 0.07); --border-strong: rgba(248, 250, 252, 0.12); --hairline: rgba(248, 250, 252, 0.05); --accent: #60a5fa; --accent-hover: #93c5fd; --accent-soft: rgba(96, 165, 250, 0.14); --accent-ring: rgba(96, 165, 250, 0.28); --accent-gradient: linear-gradient(135deg, #3b82f6, #60a5fa); --primary: #60a5fa; --primary-rgb: 96, 165, 250; --card: var(--surface); --blue: #38bdf8; --amber: #fbbf24; --orange: #fb923c; --green: #4ade80; --red: #f87171; --purple: #a78bfa; --pink: #f472b6; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.45); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --panel-elev: var(--shadow-sm); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* ——— App-shell scroll model ——— The dashboard uses a classic desktop-app layout: the window itself NEVER scrolls. Instead, and are pinned to the viewport and act purely as the frame. A single inner container (`.content`) is the only scroll port; everything else (sidebar, topbar, the shell itself) stays locked in place regardless of page length. Without `overflow: hidden` here, long dashboards re-engage document scroll and drag the sticky sidebar with them — which is exactly the "sidebar ikut scroll" symptom we're killing. */ html, body { height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; letter-spacing: 0; font-feature-settings: normal; font-variant-ligatures: none; -webkit-font-smoothing: antialiased; } html[data-dashboard-booting] .sidebar-nav-scroll, html[data-dashboard-booting] .sidebar-bottom, html[data-dashboard-booting] .content-inner, html[data-dashboard-booting] .mobile-nav { display: none !important; pointer-events: none; } html[data-dashboard-booting] .content { position: relative; } html[data-dashboard-booting] .content::before { content: "Memuat dashboard..."; display: grid; place-items: center; min-height: min(420px, calc(100dvh - var(--topbar-h) - 5rem)); width: 100%; border: 1px dashed color-mix(in srgb, var(--border-strong) 82%, transparent); border-radius: var(--radius-lg); background: linear-gradient( 135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 82%, transparent) ); color: var(--muted); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--shadow-sm); } /* ——— Layout shell ——— App-shell model: viewport is split into a fixed sidebar column (shrink-0) and a flexible main column (flex: 1). The shell is clamped to 100vh with `overflow: hidden`, which: 1. Makes sidebar and main touch flush (flex adjacent boxes). 2. Removes the document scroll — the whole .shell can never be taller than the viewport, so window/body has nothing to scroll. 3. Forces the single legitimate scroll port to be deeper inside the tree: `.content` (see main column below). On mobile (≤ 1024px) the sidebar switches to `position: fixed` (out of flow) and .main stretches to full width automatically — no grid/flex reshuffling needed. */ .shell { display: flex; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.38); z-index: 35; opacity: 0; transition: opacity var(--transition); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .shell.sidebar-open .sidebar-backdrop { display: block; opacity: 1; } .sidebar { /* Fixed-width flex child of .shell. Because .shell is `height: 100vh; overflow: hidden` and this element is `flex-shrink: 0; height: 100%`, the sidebar is literally pinned to the viewport — it cannot scroll, translate, or be dragged by any document scroll. No sticky tricks. 3-section interior (flex column): ┌─────────────────────────┐ │ .brand-row [top] │ ← flex-shrink: 0 ├─────────────────────────┤ │ .sidebar-nav-scroll │ ← flex: 1 + overflow-y: auto │ (internal scroll ONLY │ (only this container scrolls, │ when menu > height) │ and only inside the sidebar) ├─────────────────────────┤ │ .sidebar-bottom [footer]│ ← flex-shrink: 0 (Akun, pinned) └─────────────────────────┘ */ flex-shrink: 0; width: var(--sidebar-w); height: 100%; background: var(--surface); border-right: 1px solid var(--border); padding: 0.75rem 0.65rem 0.85rem; display: flex; flex-direction: column; z-index: 40; overflow: hidden; transition: width var(--transition), transform var(--transition), box-shadow var(--transition), padding var(--transition); } .sidebar-nav-scroll { /* Middle section — the ONLY part of the sidebar that ever scrolls. Grows to fill the vertical space between the sticky .brand-row (top) and the pinned .sidebar-bottom (footer). When role-based menu items make the list longer than the viewport, only this container scrolls. */ flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -0.35rem; padding: 0 0.35rem; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted-2) 30%, transparent) transparent; overscroll-behavior: contain; } .sidebar-nav-scroll::-webkit-scrollbar { width: 4px; } .sidebar-nav-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-nav-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted-2) 25%, transparent); border-radius: 4px; } .sidebar-nav-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted-2) 45%, transparent); } .sidebar-bottom { /* Bottom section — sits below .sidebar-nav-scroll as the sidebar's footer. `flex-shrink: 0` keeps it from being squeezed; `margin-top: auto` is defensive (guarantees push-to-bottom even if flex: 1 on the middle section ever fails). Negative horizontal margin extends the hairline border-top edge-to-edge over the sidebar's inner padding, giving the Akun entry a real "footer" identity separated from the scrollable menu above. */ flex-shrink: 0; margin: auto -0.65rem 0; padding: 0.55rem 0.65rem 0.15rem; border-top: 1px solid var(--border); } .sidebar-bottom .nav-item { margin-top: 0.3rem; } .sidebar-bottom .nav-item:first-child { margin-top: 0.35rem; } /* Collapsed: keep the footer tight and centered just like the nav list above it. */ .shell.sidebar-collapsed .sidebar-bottom { padding-left: 0.25rem; padding-right: 0.25rem; } @media (max-width: 1024px) { /* Mobile: sidebar is yanked out of flow and becomes a fixed overlay drawer sliding in from the left when toggled. Because it's `position: fixed`, .main auto-stretches to 100% width of .shell — no .shell override needed. */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); height: auto; transform: translateX(-105%); box-shadow: none; padding-top: max(1.25rem, env(safe-area-inset-top)); } .shell.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); } } /* ── Sidebar & Topbar theming ── Use the surface token so they stay in sync with body/cards regardless of theme. Only border tones differ per theme. */ html:not([data-theme="dark"]) .sidebar { border-right-color: rgba(15, 23, 42, 0.06); } html:not([data-theme="dark"]) .topbar { border-bottom-color: rgba(15, 23, 42, 0.06); } [data-theme="dark"] .sidebar { border-right-color: rgba(248, 250, 252, 0.05); } [data-theme="dark"] .topbar { border-bottom-color: rgba(248, 250, 252, 0.05); } /* ═══ BRAND / LOGO COMPONENT ═══════════════════════════════════ Inline SVG logo component used across sidebar + auth pages. Clean, subtle, no heavy effects. Structure: a.brand — flex row anchor, clickable span.brand-mark — icon wrapper () svg — inherits color via currentColor span.brand-wordmark — text container (hidden when collapsed) span.brand-word-publik — neutral text color span.brand-word-api — accent blue color Modifiers: .brand-lg — 40px icon (auth hero) .brand-md — 36px icon (auth card) ═══════════════════════════════════════════════════════════ */ .brand, a.brand { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; margin: 0; border: 0; background: transparent; min-width: 0; color: var(--text); font-family: inherit; font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em; line-height: 1; text-decoration: none !important; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; opacity: 0.92; transition: opacity 200ms ease-in-out; } .brand:hover, .brand:focus-visible { opacity: 1; } .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--accent); } .brand-mark svg { width: 28px; height: 28px; display: block; overflow: visible; stroke: currentColor; fill: none; } .brand-wordmark { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap; overflow: hidden; max-width: 100%; transition: opacity 200ms ease-in-out, max-width 200ms ease-in-out, margin-left 200ms ease-in-out; } .brand-word { font-weight: 700; letter-spacing: -0.01em; text-decoration: none; } .brand-word-publik { color: var(--text); } .brand-word-api { color: var(--accent); font-weight: 800; } /* Size modifiers */ .brand-lg { font-size: 1.35rem; gap: 0.65rem; } .brand-lg .brand-mark { width: 40px; height: 40px; } .brand-lg .brand-mark svg { width: 34px; height: 34px; } .brand-md { font-size: 1.18rem; gap: 0.6rem; } .brand-md .brand-mark { width: 36px; height: 36px; } .brand-md .brand-mark svg { width: 30px; height: 30px; } /* Legacy img-based logo kept for admin-configurable branding feature (settings preview + any future custom-logo uploader) */ .brand-logo-full { flex-shrink: 0; height: 32px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; } .nav-section { font-size: 0.6875rem; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; padding: 1.1rem 0.65rem 0.4rem; } .nav-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.7rem; margin: 0.06rem 0; border-radius: var(--radius); color: var(--muted); font-weight: 450; font-size: 0.8375rem; cursor: pointer; border: none; background: none; width: 100%; min-width: 0; text-align: left; font: inherit; position: relative; transition: background 0.18s var(--ease), color 0.18s var(--ease); } .nav-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .nav-item:hover { background: color-mix(in srgb, var(--surface-2) 80%, transparent); color: var(--text); } .nav-item:focus { outline: none; } .nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .nav-item.active { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); color: var(--text); font-weight: 600; } .nav-item.active .nav-label { color: var(--text); } .nav-icon-wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } .nav-item svg { flex-shrink: 0; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; } .nav-item:hover svg { opacity: 0.8; } .nav-item.active svg { color: var(--accent); opacity: 0.95; } .nav-group { margin: 0.15rem 0.2rem 0.25rem; } .nav-group-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); padding: 0.5rem 1rem 0.15rem; } /* Sidebar accordion (Katalog, Integrasi) */ .nav-group-accordion:not(.is-open) .nav-group-body { display: none; } .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 1.1rem 0.65rem 0.4rem; border: none; background: transparent; font: inherit; font-size: 0.6875rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--muted); cursor: pointer; border-radius: var(--radius-sm); text-align: left; transition: color var(--transition); } .nav-group-toggle:hover { color: var(--text); } .nav-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nav-group-chevron { flex-shrink: 0; opacity: 0.65; transition: transform 0.22s var(--ease); } .nav-group-accordion.is-open .nav-group-chevron { transform: rotate(180deg); } .nav-group-body { display: flex; flex-direction: column; gap: 0.06rem; } .shell.sidebar-collapsed .nav-group-accordion .nav-group-body { display: block !important; } .shell.sidebar-collapsed .nav-group-toggle { display: none !important; } .nav-sub-item { padding-left: 0.7rem !important; font-size: 0.8375rem; margin-top: 0; } .nav-sub-item .nav-icon-wrap { width: 22px; height: 22px; } .nav-sub-item svg { width: 18px; height: 18px; } .nav-nested { padding: 0.65rem 0.5rem 0.18rem calc(0.7rem + 22px + 0.65rem); margin-top: 0.1rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); line-height: 1.2; } .main { /* Flexible column that hosts topbar (shrink-0) + content (the single scroll port). Itself `overflow: hidden` so that any overflowing child is contained — the ONLY place overflow is allowed to turn into a scrollbar is inside `.content` below. This is the keystone that prevents document scroll from ever happening. */ flex: 1 1 auto; min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; } /* ——— Sidebar collapsed (desktop): icon-only ——— */ /* Sidebar collapse/pin button — a first-class control, not a trapped element in the brand row. Floats on the sidebar edge, looks clearly interactive, keeps a premium dark feel. */ .sidebar-pin-btn { display: none; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 75%, transparent); color: var(--muted); cursor: pointer; align-items: center; justify-content: center; padding: 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent) inset, var(--shadow-sm); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition-fast); } .sidebar-pin-btn:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong)); box-shadow: 0 1px 0 color-mix(in srgb, var(--surface) 80%, transparent) inset, var(--shadow); } .sidebar-pin-btn:active { transform: scale(0.94); } .sidebar-pin-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sidebar-pin-btn svg { display: block; width: 18px; height: 18px; } .sidebar-pin-btn .pin-chevron { overflow: visible; } .sidebar-pin-btn .pin-chevron-arrow { transform-origin: 13.5px 12px; transition: transform var(--transition); } .shell.sidebar-collapsed .sidebar-pin-btn { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--text); border-color: color-mix(in srgb, var(--accent) 38%, var(--border-strong)); } .shell.sidebar-collapsed .sidebar-pin-btn .pin-chevron-arrow { transform: rotate(180deg); } @media (min-width: 1025px) { .sidebar-pin-btn { display: flex; } /* Collapsed: shrink the sidebar's own width from --sidebar-w to --sidebar-w-collapsed. .main, being flex: 1 in the shell, auto-grows into the freed space. The transition on .sidebar { width, padding } makes the collapse animate smoothly. */ .shell.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); padding-left: 0.45rem; padding-right: 0.45rem; } .shell.sidebar-collapsed .brand-row { flex-direction: column; align-items: center; gap: 0.65rem; padding-bottom: 1rem; } .shell.sidebar-collapsed .brand { padding: 0.25rem 0 0; justify-content: center; width: 100%; gap: 0; } .shell.sidebar-collapsed .brand-wordmark { opacity: 0; max-width: 0; margin-left: -0.55rem; pointer-events: none; } .shell.sidebar-collapsed .brand-mark { width: 34px; height: 34px; } .shell.sidebar-collapsed .brand-logo-full { height: 30px; width: auto; max-width: 52px; object-fit: contain; object-position: center center; } .shell.sidebar-collapsed .nav-section, .shell.sidebar-collapsed .nav-group-label, .shell.sidebar-collapsed .nav-group-toggle, .shell.sidebar-collapsed .nav-nested { display: none !important; } .shell.sidebar-collapsed .nav-item { position: relative; justify-content: center; width: calc(100% - 0.2rem); margin-left: auto; margin-right: auto; padding-left: 0.45rem; padding-right: 0.45rem; } .shell.sidebar-collapsed .nav-item .nav-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .shell.sidebar-collapsed .nav-sub-item { padding-left: 0.45rem !important; font-size: 0.8125rem; } .shell.sidebar-collapsed .nav-group { margin-left: 0.1rem; margin-right: 0.1rem; } .shell.sidebar-collapsed .nav-item.active { box-shadow: none; background: var(--accent-soft); border-radius: var(--radius); } } .brand-row { /* Top section of sidebar — fixed, never shrinks, never scrolls. Separated from the scrollable nav below by a hairline border. Generous horizontal padding so logo has breathing room; bottom gap reads as ~22–24px to nav. */ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem 0.9rem; border-bottom: 1px solid var(--border); margin-bottom: 0.65rem; min-height: 56px; flex-shrink: 0; } .brand-row .brand { flex: 1; min-width: 0; padding-right: 0; } .toggle-inline { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .toggle-inline input { width: 16px; height: 16px; margin: 0; } /* ——— Topbar ——— App-shell top row. NOT `position: sticky` — that was needed when the document scrolled. In the app-shell model, the topbar is simply the first flex child of .main (a column with `overflow: hidden`), so it stays fixed at the top of the main area by construction. The sibling below it (`.content`) is the element that scrolls, and the topbar is above that scroll port — never scrolled past. We still give it z-index: 30 so its dropdowns sit above content. */ .topbar { position: relative; z-index: 30; flex-shrink: 0; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--border); padding: 0 clamp(1rem, 1.6vw, 1.5rem); padding-left: max(clamp(1rem, 1.6vw, 1.5rem), env(safe-area-inset-left)); padding-right: max(clamp(1rem, 1.6vw, 1.5rem), env(safe-area-inset-right)); min-height: var(--topbar-h); height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0.5rem; box-sizing: border-box; min-width: 0; } .topbar-left { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; min-width: 0; flex: 1 1 auto; } .search-wrap { flex: 1; min-width: 0; max-width: 520px; position: relative; } .search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: 0.45; pointer-events: none; color: var(--muted); } .search-wrap input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.65rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface-2) 76%, var(--surface)); font: inherit; font-size: 0.875rem; color: var(--text); outline: none; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .search-wrap input::placeholder { color: var(--muted-2); } .search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); } .topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-left: auto; min-width: fit-content; flex: 0 0 auto; flex-shrink: 0; } .topbar-mobile-brand-group { display: none; align-items: center; justify-content: flex-start; gap: 0.625rem; min-width: 0; flex: 0 1 auto; margin-right: auto; text-align: left; } .topbar-brand { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.5rem; min-width: 0; flex: 0 1 auto; margin: 0; opacity: 0.96; text-align: left; } .topbar-brand .brand-mark { width: 30px; height: 30px; } .topbar-brand .brand-mark svg { width: 26px; height: 26px; } .topbar-brand .brand-wordmark { max-width: none; } .system-status-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.65rem; border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, var(--surface-2)); color: var(--text-secondary); cursor: pointer; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform 0.12s ease; } .system-status-trigger:hover { background: var(--surface-2); border-color: var(--border-strong); } .system-status-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .system-status-trigger:active { transform: scale(0.97); } .system-status-dots { display: inline-flex; align-items: center; gap: 0.3rem; } .system-status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 78%, transparent); } .system-status-dot.is-good { background: #22c55e; } .system-status-dot.is-warn { background: #f59e0b; } .system-status-dot.is-bad { background: #ef4444; animation: system-status-pulse 1.8s ease-in-out infinite; } .system-status-trigger--inline { min-width: auto; width: auto; height: auto; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--muted-2); opacity: 0.76; } .system-status-trigger--inline:hover, .system-status-trigger--inline:focus-visible { background: transparent; border-color: transparent; opacity: 1; } .system-status-trigger--inline .system-status-dots { gap: 0.375rem; } .system-status-trigger--inline .system-status-dot { width: 6px; height: 6px; box-shadow: none; opacity: 0.92; } .system-status-tooltip { position: absolute; top: calc(100% + 0.65rem); right: 0; z-index: 65; width: min(15.5rem, calc(100vw - 1.5rem)); display: grid; gap: 0.55rem; padding: 0.8rem 0.85rem; border-radius: 8px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 98%, transparent); box-shadow: var(--shadow-xl); text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .system-status-trigger:hover .system-status-tooltip, .system-status-trigger:focus-visible .system-status-tooltip, .system-status-trigger:focus-within .system-status-tooltip { opacity: 1; visibility: visible; transform: translateY(0); } .system-status-trigger--inline .system-status-tooltip { top: calc(100% + 0.55rem); left: 0; right: auto; width: min(15rem, calc(100vw - 1.75rem)); transform: translateY(-6px); } .system-status-trigger--inline:hover .system-status-tooltip, .system-status-trigger--inline:focus-visible .system-status-tooltip, .system-status-trigger--inline:focus-within .system-status-tooltip { transform: translateY(0); } .system-status-tooltip-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .system-status-tooltip-updated { font-size: 0.73rem; line-height: 1.45; color: var(--muted-2); } .system-status-tooltip-rows { display: grid; gap: 0.55rem; } .system-status-tooltip-item { display: grid; gap: 0.16rem; } .system-status-tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; font-size: 0.78rem; } .system-status-tooltip-meta { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--text); font-weight: 600; } .system-status-tooltip-value { flex-shrink: 0; color: var(--text); font-size: 0.74rem; font-weight: 700; text-align: right; } .system-status-tooltip-sub { font-size: 0.72rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; } @keyframes system-status-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45), 0 0 0 1px color-mix(in srgb, var(--surface) 78%, transparent); } 60% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0), 0 0 0 1px color-mix(in srgb, var(--surface) 78%, transparent); } } /* Balance badge in topbar */ .topbar-balance { display: flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0.35rem 0.75rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--hairline); font-size: 0.8125rem; font-weight: 600; color: var(--text); cursor: pointer; transition: background 0.15s; white-space: nowrap; } .topbar-balance:hover { background: var(--surface-3); } .topbar-balance svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; } /* Mutation type badges */ .badge-topup { background: #dcfce7; color: #166534; } .badge-purchase { background: #fee2e2; color: #991b1b; } .badge-refund { background: #dbeafe; color: #1e40af; } .badge-adjustment { background: #fef9c3; color: #854d0e; } [data-theme="dark"] .badge-topup { background: #14532d; color: #86efac; } [data-theme="dark"] .badge-purchase { background: #7f1d1d; color: #fca5a5; } [data-theme="dark"] .badge-refund { background: #1e3a5f; color: #93c5fd; } [data-theme="dark"] .badge-adjustment { background: #713f12; color: #fde047; } .nav-mobile-only { display: none; } @media (max-width: 1024px) { .nav-mobile-only { display: grid; } } .icon-btn { width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, var(--surface-2)); color: var(--text-secondary); cursor: pointer; display: grid; place-items: center; transition: background var(--transition), transform 0.12s ease, border-color var(--transition); } .icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .icon-btn:active { transform: scale(0.96); } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } .avatar-small { width: 34px; height: 34px; border-radius: var(--radius-xs); background: linear-gradient(145deg, #dbeafe, #d1fae5); flex-shrink: 0; } [data-theme="dark"] .avatar-small { background: linear-gradient(145deg, #2a4550, #1e2a33); } .lang-trigger { align-items: center; gap: 0.6rem; } .lang-trigger .lang-trigger-flag { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; border: 1px solid var(--hairline); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); } .lang-trigger .lang-trigger-flag svg { width: 100%; height: 100%; display: block; } .lang-trigger .lang-trigger-label { flex: 1 1 auto; min-width: 0; color: var(--text); } .lang-trigger .lang-trigger-value { font-family: var(--font); font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; } .lang-trigger .lang-trigger-caret { flex-shrink: 0; opacity: 0.55; transition: transform var(--transition); } .lang-trigger.is-open .lang-trigger-caret { transform: rotate(90deg); } .lang-options { display: grid; gap: 0.35rem; padding: 0.3rem 0.75rem 0.5rem; } .lang-options[hidden] { display: none; } .lang-option { width: 100%; min-height: 2.25rem; padding: 0.45rem 0.65rem; border-radius: 8px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 78%, transparent); cursor: pointer; overflow: hidden; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.6rem; text-align: left; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .lang-option:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); } .lang-option:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); } .lang-option.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } .lang-option .lang-flag { width: 22px; height: 22px; display: inline-flex; flex-shrink: 0; overflow: hidden; border-radius: 50%; } .lang-option .lang-flag svg { width: 100%; height: 100%; display: block; } .lang-option-label { min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text); line-height: 1.2; } /* ═════════════════════════════════════════════ Visual Effects (Petir / Api / Air / Angin) ═════════════════════════════════════════════ */ .fx-trigger { align-items: center; gap: 0.6rem; } .fx-trigger .fx-trigger-icon { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; border: 1px solid var(--hairline); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text); } .fx-trigger .fx-trigger-icon svg { width: 14px; height: 14px; display: block; } .fx-trigger .fx-trigger-label { flex: 1 1 auto; min-width: 0; color: var(--text); } .fx-trigger .fx-trigger-value { font-family: var(--font); font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; } .fx-trigger .fx-trigger-caret { flex-shrink: 0; opacity: 0.55; transition: transform var(--transition); } .fx-trigger.is-open .fx-trigger-caret { transform: rotate(90deg); } .fx-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 0.35rem; padding: 0.3rem 0.75rem 0.55rem 2.25rem; } .fx-options[hidden] { display: none; } .fx-option { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.55rem; border-radius: 8px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 78%, transparent); color: var(--text); font-family: var(--font); font-size: 0.76rem; cursor: pointer; overflow: hidden; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.2s ease; } .fx-option:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); } .fx-option:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); } .fx-option.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent); } .fx-option-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .fx-option-icon svg { width: 14px; height: 14px; display: block; } .fx-option-petir .fx-option-icon { background: linear-gradient(135deg, #fde68a, #f59e0b 60%, #7c3aed); color: #1f1d28; } .fx-option-api .fx-option-icon { background: linear-gradient(135deg, #fde68a, #f97316, #dc2626); color: #1f1010; } .fx-option-air .fx-option-icon { background: linear-gradient(135deg, #bae6fd, #38bdf8, #1d4ed8); color: #09243a; } .fx-option-angin .fx-option-icon { background: linear-gradient(135deg, #d1fae5, #34d399, #0ea5e9); color: #053029; } .fx-option-none .fx-option-icon { background: color-mix(in srgb, var(--surface-2) 60%, transparent); color: var(--muted); } /* Animated hint on each option */ .fx-option-petir.is-active .fx-option-icon { animation: fxPulsePetir 2.2s ease-in-out infinite; } .fx-option-api.is-active .fx-option-icon { animation: fxPulseApi 1.6s ease-in-out infinite; } .fx-option-air.is-active .fx-option-icon { animation: fxPulseAir 3.2s ease-in-out infinite; } .fx-option-angin.is-active .fx-option-icon { animation: fxPulseAngin 2.6s ease-in-out infinite; } @keyframes fxPulsePetir { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); } } @keyframes fxPulseApi { 0%, 100% { transform: scale(1); filter: hue-rotate(0deg); } 50% { transform: scale(1.08); filter: hue-rotate(-10deg); } } @keyframes fxPulseAir { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } @keyframes fxPulseAngin { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } } /* ═════════════════════════════════════════════ FX Overlay: animated ambient layer behind UI ═════════════════════════════════════════════ */ #fx-overlay { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; mix-blend-mode: normal; } #fx-overlay .fx-layer { position: absolute; inset: -20% -20% -20% -20%; opacity: 0; transition: opacity 0.6s ease; will-change: transform, opacity, filter; } #fx-overlay .fx-flash { position: absolute; inset: 0; background: radial-gradient( ellipse at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60% ); opacity: 0; pointer-events: none; } /* Keep the main app surfaces above the decorative #fx-overlay (which is fixed at z-index: 0). NOTE: do NOT include .sidebar, .topbar, .user-dropdown, or .notif-dropdown here — they each manage their own stacking + positioning. For the sidebar this is especially important on mobile, where it must remain `position: fixed` so it does not push `.main` off-screen. */ .app-shell, .content, .login-shell, .login-card, .toast { position: relative; z-index: 1; } /* ——— Tema: Petir ——— */ :root[data-fx="petir"] #fx-overlay .fx-layer-a { opacity: 0.55; background: radial-gradient(circle at 20% 15%, rgba(124, 58, 237, 0.22) 0%, transparent 45%), radial-gradient(circle at 80% 85%, rgba(245, 158, 11, 0.18) 0%, transparent 45%); animation: fxPetirDrift 18s ease-in-out infinite; } :root[data-fx="petir"] #fx-overlay .fx-layer-b { opacity: 0.35; background: repeating-linear-gradient( 120deg, rgba(255, 235, 150, 0) 0px, rgba(255, 235, 150, 0) 40px, rgba(255, 235, 150, 0.08) 40px, rgba(255, 235, 150, 0.08) 42px ); animation: fxPetirStreaks 9s linear infinite; } :root[data-fx="petir"] #fx-overlay .fx-layer-c { opacity: 0.2; background: radial-gradient(circle at 50% -10%, rgba(124, 58, 237, 0.35) 0%, transparent 55%); animation: fxPetirBreathe 6s ease-in-out infinite; } :root[data-fx="petir"] #fx-overlay .fx-flash.is-firing { animation: fxPetirFlash 0.9s ease-out 1; } @keyframes fxPetirDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-1%, 1.5%, 0); } } @keyframes fxPetirStreaks { 0% { transform: translateX(0); } 100% { transform: translateX(60px); } } @keyframes fxPetirBreathe { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.32; } } @keyframes fxPetirFlash { 0% { opacity: 0; } 6% { opacity: 0.85; } 12% { opacity: 0.15; } 18% { opacity: 0.7; } 30% { opacity: 0; } 100% { opacity: 0; } } /* Accent override for Petir */ :root[data-fx="petir"] { --accent-ring: color-mix(in srgb, #7c3aed 24%, transparent); } /* ——— Tema: Api ——— */ :root[data-fx="api"] #fx-overlay .fx-layer-a { opacity: 0.6; background: radial-gradient(circle at 15% 100%, rgba(220, 38, 38, 0.28) 0%, transparent 45%), radial-gradient(circle at 85% 100%, rgba(249, 115, 22, 0.28) 0%, transparent 45%); animation: fxApiFlicker 2.6s ease-in-out infinite; filter: blur(10px); } :root[data-fx="api"] #fx-overlay .fx-layer-b { opacity: 0.45; background: radial-gradient( ellipse at 50% 120%, rgba(253, 186, 116, 0.25) 0%, transparent 55% ); animation: fxApiRise 7s ease-in-out infinite; filter: blur(6px); } :root[data-fx="api"] #fx-overlay .fx-layer-c { opacity: 0.2; background: radial-gradient(circle at 30% 80%, rgba(254, 240, 138, 0.3) 0%, transparent 30%), radial-gradient(circle at 70% 90%, rgba(254, 215, 170, 0.3) 0%, transparent 35%); animation: fxApiEmbers 4.2s ease-in-out infinite; } @keyframes fxApiFlicker { 0%, 100% { opacity: 0.55; transform: translateY(0) scale(1); } 25% { opacity: 0.7; transform: translateY(-0.5%) scale(1.02); } 55% { opacity: 0.5; transform: translateY(0.3%) scale(1); } 75% { opacity: 0.68; transform: translateY(-0.3%) scale(1.015); } } @keyframes fxApiRise { 0% { transform: translateY(2%) scale(1); opacity: 0.35; } 50% { transform: translateY(-2%) scale(1.04); opacity: 0.5; } 100% { transform: translateY(2%) scale(1); opacity: 0.35; } } @keyframes fxApiEmbers { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.18; } 50% { transform: translate3d(1%, -2%, 0); opacity: 0.28; } } :root[data-fx="api"] { --accent-ring: color-mix(in srgb, #f97316 28%, transparent); } /* ——— Tema: Air ——— */ :root[data-fx="air"] #fx-overlay .fx-layer-a { opacity: 0.55; background: radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.22) 0%, transparent 50%), radial-gradient(circle at 80% 60%, rgba(29, 78, 216, 0.18) 0%, transparent 55%); animation: fxAirDrift 14s ease-in-out infinite; } :root[data-fx="air"] #fx-overlay .fx-layer-b { opacity: 0.35; background: repeating-radial-gradient( circle at 10% 20%, rgba(186, 230, 253, 0) 0px, rgba(186, 230, 253, 0) 24px, rgba(186, 230, 253, 0.06) 24px, rgba(186, 230, 253, 0.06) 25px ); animation: fxAirRipple 10s linear infinite; } :root[data-fx="air"] #fx-overlay .fx-layer-c { opacity: 0.28; background: linear-gradient( 100deg, transparent 0%, rgba(125, 211, 252, 0.22) 50%, transparent 100% ); background-size: 220% 100%; animation: fxAirShimmer 11s linear infinite; } @keyframes fxAirDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(1%, -1%, 0); } } @keyframes fxAirRipple { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } @keyframes fxAirShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } :root[data-fx="air"] { --accent-ring: color-mix(in srgb, #38bdf8 28%, transparent); } /* ——— Tema: Angin ——— */ :root[data-fx="angin"] #fx-overlay .fx-layer-a { opacity: 0.45; background: radial-gradient(circle at 15% 25%, rgba(52, 211, 153, 0.18) 0%, transparent 50%), radial-gradient(circle at 85% 75%, rgba(14, 165, 233, 0.18) 0%, transparent 50%); animation: fxAnginDrift 16s ease-in-out infinite; } :root[data-fx="angin"] #fx-overlay .fx-layer-b { opacity: 0.35; background: repeating-linear-gradient( 92deg, rgba(134, 239, 172, 0) 0px, rgba(134, 239, 172, 0) 60px, rgba(134, 239, 172, 0.1) 60px, rgba(134, 239, 172, 0.1) 62px, rgba(134, 239, 172, 0) 64px ); animation: fxAnginStreaks 14s linear infinite; } :root[data-fx="angin"] #fx-overlay .fx-layer-c { opacity: 0.22; background: linear-gradient( 90deg, transparent 0%, rgba(167, 243, 208, 0.2) 50%, transparent 100% ); background-size: 240% 100%; animation: fxAnginShimmer 18s linear infinite; } @keyframes fxAnginDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(1.5%, 0.5%, 0); } } @keyframes fxAnginStreaks { 0% { transform: translateX(0); } 100% { transform: translateX(240px); } } @keyframes fxAnginShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } :root[data-fx="angin"] { --accent-ring: color-mix(in srgb, #34d399 26%, transparent); } /* None: no layers visible */ :root[data-fx="none"] #fx-overlay .fx-layer { opacity: 0; } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce) { #fx-overlay .fx-layer, #fx-overlay .fx-flash { animation: none !important; } .fx-option-icon { animation: none !important; } } /* ——— Content ——— The one and only scroll port of the dashboard. With .main being `overflow: hidden` and topbar being a shrink-0 row above, this element occupies whatever vertical space is left. `min-height: 0` + `overflow-y: auto` allows it to shrink below its content height and expose an internal scrollbar. Horizontal overflow is clipped to protect the shell from rogue-wide children. `overscroll-behavior: contain` prevents any residual scroll chaining to the document (which, because of html/body overflow: hidden, wouldn't scroll anyway — belt & suspenders). */ .content { flex: 1 1 auto; min-width: 0; min-height: 0; max-width: 100%; width: 100%; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: smooth; padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1rem, 1.8vw, 2rem); padding-left: max(clamp(1rem, 1.8vw, 2rem), env(safe-area-inset-left)); padding-right: max(clamp(1rem, 1.8vw, 2rem), env(safe-area-inset-right)); padding-bottom: calc(1.75rem + env(safe-area-inset-bottom)); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted-2) 28%, transparent) transparent; } .content::-webkit-scrollbar { width: 10px; } .content::-webkit-scrollbar-track { background: transparent; } .content::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted-2) 22%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } .content::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted-2) 42%, transparent); background-clip: content-box; } @media (max-width: 900px) { .content { padding-left: clamp(0.85rem, 3vw, 1.15rem); padding-right: clamp(0.85rem, 3vw, 1.15rem); padding-bottom: calc( var(--mobile-nav-h) + 1.5rem + env(safe-area-inset-bottom) ); } } .content-inner { width: 100%; min-width: 0; max-width: 100%; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; } .page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.9rem 1.25rem; } .greeting h1 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: 0; line-height: 1.2; color: var(--text); } .greeting p { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.95rem; max-width: 58ch; line-height: 1.55; } .head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; } .overview-role-chip, .bok-hero-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 1.7rem; padding: 0.18rem 0.62rem; border-radius: 999px; border: 1px solid color-mix(in srgb, #2563eb 18%, transparent); background: color-mix(in srgb, var(--surface) 84%, #dbeafe 16%); color: #1d4ed8; font-size: 0.74rem; font-weight: 700; white-space: nowrap; } .overview-role-chip { min-height: 1.55rem; padding-inline: 0.56rem; font-size: 0.7rem; align-self: center; } .menu-page-head { margin-bottom: 1rem; } .menu-dashboard { display: grid; gap: 1rem; } .menu-hero, .menu-quick-wrap, .menu-filter-shell { border: 1px solid var(--border); border-radius: 8px; background: linear-gradient( 180deg, color-mix(in srgb, var(--surface-2) 88%, transparent), color-mix(in srgb, var(--surface) 100%, transparent) ); padding: 1rem; } .menu-quick-wrap { display: grid; gap: 1rem; padding: 1.15rem 1.2rem 1.25rem; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.05); } .menu-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; } .menu-hero-main { display: grid; gap: 0.55rem; align-content: start; } .menu-role-pill { display: inline-flex; align-items: center; width: fit-content; padding: 0.32rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--accent-strong); font-size: 0.8rem; font-weight: 700; } .menu-hero-main h2 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.1; } .menu-hero-main p { margin: 0; max-width: 64ch; color: var(--muted); line-height: 1.55; } .menu-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .menu-summary-card { display: grid; gap: 0.3rem; padding: 0.95rem 1rem; border-radius: 8px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); } .menu-summary-label { color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0; } .menu-summary-value { font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1; color: var(--text); } .menu-summary-foot { color: var(--muted); font-size: 0.82rem; } .menu-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0; } .menu-section-head h2 { margin: 0 0 0.35rem; font-size: 1.04rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } .menu-section-head p { margin: 0; color: var(--muted); font-size: 0.87rem; line-height: 1.6; max-width: 68ch; } .menu-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; } .menu-quick-action { --menu-quick-accent: var(--accent); position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0.95rem; min-height: 12.75rem; padding: 1rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); background: linear-gradient( 180deg, color-mix(in srgb, var(--surface) 98%, transparent) 0%, color-mix(in srgb, var(--surface-2) 78%, transparent) 100% ); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.05); color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease; } .menu-quick-action::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 145deg, color-mix(in srgb, var(--menu-quick-accent) 8%, transparent), transparent 52% ); opacity: 0.95; } .menu-quick-action > * { position: relative; z-index: 1; } .menu-quick-action:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--menu-quick-accent) 22%, var(--border)); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 36px rgba(15, 23, 42, 0.1); background: linear-gradient( 180deg, color-mix(in srgb, var(--surface) 100%, transparent) 0%, color-mix(in srgb, var(--surface-2) 92%, transparent) 100% ); } .menu-quick-action:focus-visible, .menu-category-tab:focus-visible, .menu-panel-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .menu-quick-action:active { transform: translateY(-1px) scale(0.995); } .menu-panel-tile:active { transform: scale(0.99); } .menu-quick-head, .menu-quick-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .menu-quick-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.7rem; min-width: 2.7rem; height: 2.7rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--menu-quick-accent) 24%, var(--border)); background: color-mix(in srgb, var(--menu-quick-accent) 10%, var(--surface)); color: color-mix(in srgb, var(--menu-quick-accent) 72%, var(--text)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); font-size: 0.84rem; font-weight: 800; letter-spacing: 0.01em; flex-shrink: 0; } .menu-panel-tile-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 2.55rem; height: 2.55rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); color: var(--accent-strong); font-size: 0.82rem; font-weight: 800; } .menu-quick-icon.has-svg svg { width: 1.05rem; height: 1.05rem; display: block; } .menu-panel-tile-icon.has-svg svg { width: 1.25rem; height: 1.25rem; display: block; } .menu-quick-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.42rem; min-width: 0; } .menu-quick-title { font-size: 1.02rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); } .menu-quick-desc { display: -webkit-box; overflow: hidden; min-height: calc(1.56em * 2); font-size: 0.84rem; line-height: 1.56; color: var(--muted); text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .menu-quick-foot { align-items: center; margin-top: auto; padding-top: 0.1rem; } .menu-quick-link { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.01em; } .menu-quick-arrow { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--menu-quick-accent) 16%, var(--border)); background: color-mix(in srgb, var(--menu-quick-accent) 7%, var(--surface)); color: color-mix(in srgb, var(--menu-quick-accent) 70%, var(--text)); flex-shrink: 0; transition: transform 220ms ease, border-color 220ms ease, background 220ms ease; } .menu-quick-arrow svg { width: 0.95rem; height: 0.95rem; display: block; } .menu-quick-action:hover .menu-quick-link { color: color-mix(in srgb, var(--menu-quick-accent) 58%, var(--text)); } .menu-quick-action:hover .menu-quick-arrow { transform: translate(2px, -2px); border-color: color-mix(in srgb, var(--menu-quick-accent) 28%, var(--border)); background: color-mix(in srgb, var(--menu-quick-accent) 11%, var(--surface)); } .menu-filter-shell { display: grid; gap: 0.8rem; } .menu-toolbar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0.85rem; align-items: start; } .menu-search { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0 0.95rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); } .menu-search svg { width: 1.15rem; height: 1.15rem; fill: var(--muted); flex-shrink: 0; } .menu-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; padding: 0; } .menu-category-tabs { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-end; } .menu-category-tab { min-height: 2.65rem; padding: 0.55rem 0.9rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); } .menu-category-tab.active, .menu-category-tab:hover { background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--text); } .menu-filter-meta { color: var(--muted); font-size: 0.88rem; line-height: 1.45; } .menu-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; } .menu-panel-tile { display: grid; gap: 0.52rem; align-content: start; min-height: 14.25rem; padding: 1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), transform 0.12s ease; } .menu-panel-tile:hover { border-color: var(--border-strong); background: var(--surface-2); box-shadow: var(--shadow-sm); } .menu-panel-tile-top, .menu-panel-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; } .menu-quick-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 1.65rem; padding: 0.16rem 0.58rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.72rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; } .menu-panel-tile-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 1.95rem; padding: 0.2rem 0.65rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.76rem; font-weight: 700; white-space: nowrap; } .menu-panel-tile-kicker { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0; } .menu-panel-tile-title { font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--text); } .menu-panel-tile-desc { font-size: 0.84rem; line-height: 1.55; color: var(--muted); } .menu-panel-tile-foot { margin-top: auto; padding-top: 0.2rem; color: var(--muted); font-size: 0.78rem; } .menu-panel-tile-link { color: var(--text); font-weight: 700; } .menu-empty-state { padding: 1rem 1.05rem; border-radius: 8px; border: 1px dashed var(--border); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--muted); font-size: 0.9rem; line-height: 1.5; } .menu-panel-tile-badge.tone-ok, .menu-quick-badge.tone-ok { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.25); color: #86efac; } .menu-panel-tile-badge.tone-warn, .menu-quick-badge.tone-warn { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.24); color: #fcd34d; } .menu-panel-tile-badge.tone-accent, .menu-quick-badge.tone-accent { background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); color: var(--accent-strong); } .menu-panel-tile-badge.tone-muted, .menu-quick-badge.tone-muted { background: color-mix(in srgb, var(--surface-2) 88%, transparent); border-color: var(--border); color: var(--muted); } [data-theme="dark"] .menu-quick-wrap { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 30px rgba(0, 0, 0, 0.18); } [data-theme="dark"] .menu-quick-action { background: linear-gradient( 180deg, color-mix(in srgb, var(--surface) 96%, transparent) 0%, color-mix(in srgb, var(--surface-2) 84%, transparent) 100% ); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.18); } [data-theme="dark"] .menu-quick-action:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 18px 34px rgba(0, 0, 0, 0.24); } [data-theme="dark"] .menu-quick-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .menu-quick-action[data-menu-panel="overview"] { --menu-quick-accent: #2563eb; } .menu-quick-action[data-menu-panel="orders"] { --menu-quick-accent: #0ea5e9; } .menu-quick-action[data-menu-panel="new-order"] { --menu-quick-accent: #f59e0b; } .menu-quick-action[data-menu-panel="balance"] { --menu-quick-accent: #10b981; } .menu-quick-action[data-menu-panel="products"] { --menu-quick-accent: #14b8a6; } .menu-quick-action[data-menu-panel="vendor"] { --menu-quick-accent: #64748b; } @media (max-width: 1120px) { .menu-hero, .menu-toolbar { grid-template-columns: 1fr; } .menu-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .menu-category-tabs { justify-content: flex-start; } } @media (max-width: 720px) { .menu-summary-grid, .menu-panel-grid { grid-template-columns: 1fr; } .menu-quick-wrap { padding: 1rem; } .menu-quick-actions { grid-template-columns: 1fr; } .menu-panel-tile { min-height: auto; } .menu-quick-action { min-height: 0; padding: 0.95rem; } } .users-subtabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .users-subtab { padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); } .users-subtab:hover { border-color: var(--border-strong); color: var(--text); } .users-subtab.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--text); } .users-subpanel.hidden { display: none !important; } /* ——— Buttons ——— */ .btn { padding: 0.68rem 1rem; border-radius: var(--radius); font-weight: 600; font-size: 0.8125rem; border: none; cursor: pointer; font-family: inherit; letter-spacing: 0; transition: transform 0.12s ease, filter var(--transition), box-shadow var(--transition), background var(--transition); } .btn:active { transform: scale(0.98); } .btn-spinner { display: inline-block; width: 0.85em; height: 0.85em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 0.5s linear infinite; vertical-align: -0.1em; margin-right: 0.4em; } @keyframes btn-spin { to { transform: rotate(360deg); } } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } [data-theme="dark"] .btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 2px 10px rgba(0, 0, 0, 0.35); } .btn-primary:hover { filter: brightness(1.05); background: var(--accent-hover); } .btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn-ghost { background: color-mix(in srgb, var(--surface) 75%, var(--surface-2)); border: 1px solid var(--border); color: var(--text-secondary); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); } .btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface); border-color: var(--border-strong); } .btn-sm { padding: 0.38rem 0.75rem; font-size: 0.75rem; border-radius: 999px; } .btn-danger { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 22%, transparent); } .btn-danger:hover { background: color-mix(in srgb, var(--red) 16%, transparent); } /* ——— Cards & metrics ——— */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.95rem; margin-bottom: 1.5rem; } @media (max-width: 1100px) { .metrics { grid-template-columns: repeat(2, 1fr); } .metric-card.hero { grid-column: span 2; } } @media (max-width: 520px) { .metrics { grid-template-columns: 1fr; } .metric-card.hero { grid-column: span 1; } } .trend { font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); } .trend.down { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); } .grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; } @media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } } .panel { background: var(--surface); border-radius: var(--radius); padding: 1.35rem 1.4rem; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } [data-theme="dark"] .panel { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, var(--shadow-sm); } html:not([data-theme="dark"]) .panel { box-shadow: var(--panel-elev); border-color: rgba(15, 23, 42, 0.06); } html:not([data-theme="dark"]) .table-wrap { border-color: rgba(15, 23, 42, 0.06); box-shadow: var(--shadow-sm); } .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; } .panel-title { font-weight: 600; font-size: 1rem; margin: 0; letter-spacing: 0; color: var(--text); } .panel-sub { font-size: 0.8125rem; color: var(--muted); margin: 0.25rem 0 0; line-height: 1.4; } .section-stack { display: flex; flex-direction: column; gap: 1rem; } .section-block + .section-block { padding-top: 1rem; border-top: 1px solid var(--hairline); } /* ——— Charts ——— */ .bar-chart { height: 208px; display: flex; align-items: stretch; gap: 8px; padding-top: 0.5rem; padding-inline: 0.15rem; } .bar-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; min-width: 0; } .bar { width: 100%; max-width: 44px; border-radius: 8px 8px 5px 5px; background: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 32%, #d9f4ed), var(--accent) ); min-height: 4px; transition: height 0.45s var(--ease); } .bar-label { font-size: 0.625rem; color: var(--muted); font-weight: 600; } .donut-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; min-height: 220px; } .donut-svg { width: 168px; height: 168px; flex-shrink: 0; } .donut-empty { fill: var(--muted-2); } .donut-legend { flex: 1; min-width: 160px; } .legend-item { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8125rem; margin-bottom: 0.6rem; color: var(--text-secondary); } .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } /* ── Overview upgrades ── */ .ov-headline { display: flex; align-items: baseline; gap: 6px; margin-left: auto; } .ov-hl-num { font-size: 1.5rem; font-weight: 800; line-height: 1; } .ov-hl-label { font-size: 11px; color: var(--text-muted, #64748b); font-weight: 500; } .ov-hl-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .ov-hl-up { background: rgba(22,163,74,0.1); color: var(--success, #16a34a); } .ov-hl-down { background: rgba(220,38,38,0.1); color: var(--danger, #dc2626); } .ov-hl-flat { background: var(--surface-muted, rgba(100,116,139,0.1)); color: var(--text-muted, #64748b); } .bar-count { font-size: 10px; font-weight: 700; color: var(--text-muted, #64748b); min-height: 14px; } .bar-today { background: linear-gradient(180deg, rgba(99,102,241,0.2), var(--accent, #6366f1)) !important; box-shadow: 0 2px 8px rgba(99,102,241,0.3); } .bar-peak { background: linear-gradient(180deg, rgba(245,158,11,0.15), var(--warning, #f59e0b)) !important; } .bar-tag { font-size: 9px; font-weight: 700; color: var(--accent, #6366f1); text-transform: uppercase; letter-spacing: 0.04em; } .ov-insight-row { display: flex; gap: 1rem; padding: 0.5rem 0 0; flex-wrap: wrap; } .ov-insight-item { font-size: 11px; color: var(--text-muted, #64748b); } .ov-product-bars { padding: 0.35rem 0; } .ov-pbar-row { display: flex; align-items: center; gap: 0.5rem; padding: 6px 0; } .ov-pbar-name { width: 100px; flex-shrink: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-pbar-track { flex: 1; height: 18px; background: var(--surface-muted, rgba(100,116,139,0.08)); border-radius: 6px; overflow: hidden; } .ov-pbar-fill { height: 100%; border-radius: 6px; transition: width 0.4s ease; min-width: 4px; } .ov-pbar-val { font-size: 13px; font-weight: 700; min-width: 28px; text-align: right; } .ov-pbar-pct { font-size: 11px; min-width: 32px; text-align: right; } .ov-panel-idle { opacity: 0.7; } .leaderboard-panel { margin-top: 1.15rem; } .leaderboard-head { align-items: flex-start; gap: 0.9rem; } .leaderboard-kicker { display: inline-flex; align-items: center; padding: 0.26rem 0.62rem; border-radius: 999px; background: rgba(79, 70, 229, 0.08); color: var(--accent, #4f46e5); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .leaderboard-period { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0.55rem 0.9rem; border: 1px solid var(--line, rgba(148, 163, 184, 0.22)); border-radius: 8px; background: var(--surface, rgba(255, 255, 255, 0.7)); color: var(--text-secondary); font-size: 0.84rem; font-weight: 700; white-space: nowrap; } .leaderboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .leaderboard-card { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; padding: 1rem; border: 1px solid var(--line, rgba(148, 163, 184, 0.18)); border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); } .leaderboard-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; } .leaderboard-card-head span { color: var(--text-secondary); font-size: 0.88rem; font-weight: 700; } .leaderboard-card-head strong { color: var(--text-primary); font-size: 0.82rem; font-weight: 800; white-space: nowrap; } .leaderboard-list { display: flex; flex-direction: column; gap: 0.7rem; } .leaderboard-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; min-width: 0; padding: 0.85rem 0.9rem; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 8px; background: rgba(248, 250, 252, 0.9); } .leaderboard-rank { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 8px; background: rgba(79, 70, 229, 0.08); color: var(--accent, #4f46e5); font-size: 0.8rem; font-weight: 800; } .leaderboard-main, .leaderboard-score { min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; } .leaderboard-main strong, .leaderboard-main span, .leaderboard-main small, .leaderboard-score strong, .leaderboard-score span { min-width: 0; overflow-wrap: anywhere; } .leaderboard-main strong { color: var(--text-primary); font-size: 0.96rem; font-weight: 800; line-height: 1.2; } .leaderboard-main span { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.35; } .leaderboard-main small, .leaderboard-score span { color: var(--text-muted, #64748b); font-size: 0.75rem; line-height: 1.3; } .leaderboard-score { align-items: flex-end; text-align: right; } .leaderboard-score strong { color: var(--text-primary); font-size: 0.92rem; font-weight: 800; line-height: 1.1; } .leaderboard-progress { grid-column: 2 / 4; display: block; width: 100%; height: 6px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); overflow: hidden; } .leaderboard-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4f46e5, #22c55e); } .leaderboard-empty { margin: 0; padding: 1rem; border: 1px dashed rgba(148, 163, 184, 0.26); border-radius: 8px; color: var(--text-secondary); font-size: 0.88rem; text-align: center; background: rgba(248, 250, 252, 0.7); } .leaderboard-analytics-panel { display: grid; gap: 1rem; } .leaderboard-head-actions { justify-content: flex-end; } .leaderboard-live-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0.58rem 0.95rem; border-radius: 999px; border: 1px dashed var(--border-strong); background: transparent; color: var(--muted); font-size: 0.84rem; font-weight: 700; } .leaderboard-live-pill.is-good { color: var(--success, #22c55e); border-color: color-mix(in srgb, var(--success, #22c55e) 28%, var(--border)); } .leaderboard-live-pill.is-warn { color: var(--warning, #f59e0b); border-color: color-mix(in srgb, var(--warning, #f59e0b) 30%, var(--border)); } .leaderboard-live-pill.is-bad { color: var(--danger, #ef4444); border-color: color-mix(in srgb, var(--danger, #ef4444) 30%, var(--border)); } .leaderboard-filter-panel { padding: 1rem 1.05rem; } .leaderboard-filter-stack { display: grid; gap: 1rem; } .leaderboard-preset-group { display: flex; flex-wrap: wrap; gap: 0.55rem; } .leaderboard-preset-btn { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); border-radius: 8px; padding: 0.72rem 0.95rem; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: border-color var(--transition), background var(--transition), transform 220ms ease, box-shadow 220ms ease; } .leaderboard-preset-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .leaderboard-preset-btn.active { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 14%, transparent); } .leaderboard-filter-grid, .leaderboard-date-grid { display: grid; gap: 0.85rem; } .leaderboard-filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .leaderboard-date-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } .leaderboard-filter-panel .field { min-width: 0; } .leaderboard-filter-panel .field > span { display: block; margin-bottom: 0.42rem; color: var(--muted); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .leaderboard-filter-panel .field select, .leaderboard-filter-panel .field input { width: 100%; } .leaderboard-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem; flex-wrap: wrap; } .leaderboard-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; } .leaderboard-kpi-card { border: 1px solid var(--border); border-radius: 8px; background: linear-gradient( 180deg, color-mix(in srgb, var(--surface-2) 82%, transparent), color-mix(in srgb, var(--surface) 100%, transparent) ); padding: 1rem; display: grid; gap: 0.42rem; min-width: 0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.05); } .leaderboard-kpi-label { color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .leaderboard-kpi-card strong { color: var(--text); font-size: clamp(1.05rem, 1.7vw, 1.24rem); line-height: 1.2; font-weight: 800; } .leaderboard-kpi-sub { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.45; } .leaderboard-table-grid { display: grid; gap: 1rem; } .leaderboard-panel-head { align-items: flex-start; gap: 0.8rem; } .leaderboard-table-note { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0.5rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; white-space: nowrap; } .leaderboard-table-wrap table { min-width: 860px; table-layout: fixed; } .leaderboard-table-wrap th, .leaderboard-table-wrap td { padding: 0.72rem 0.9rem; vertical-align: middle; } .leaderboard-table-wrap th { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.04em; white-space: nowrap; } .leaderboard-table-wrap td:last-child { color: var(--text-secondary); white-space: nowrap; } .leaderboard-main-cell { display: grid; gap: 0.18rem; } .leaderboard-main-cell strong { color: var(--text); font-weight: 800; line-height: 1.25; font-size: 0.93rem; } .leaderboard-main-cell span { color: var(--muted); font-size: 0.78rem; line-height: 1.35; } .lb-rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); font-size: 0.82rem; font-weight: 800; } .lb-rank-badge.is-top-1 { color: #f59e0b; background: rgba(245, 158, 11, 0.12); } .lb-rank-badge.is-top-2 { color: var(--text-secondary); background: rgba(148, 163, 184, 0.14); } .lb-rank-badge.is-top-3 { color: #c2410c; background: rgba(194, 65, 12, 0.12); } .leaderboard-rank-cell { width: 64px; } .leaderboard-empty-row td { text-align: center; color: var(--muted); font-weight: 600; padding: 1rem 1.1rem; } @media (max-width: 1100px) { .leaderboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .leaderboard-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .leaderboard-date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .leaderboard-filter-actions { grid-column: 1 / -1; justify-content: flex-start; } .leaderboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .leaderboard-head { flex-direction: column; align-items: stretch; } .leaderboard-period { width: 100%; justify-content: flex-start; } .leaderboard-grid { grid-template-columns: 1fr; } .leaderboard-head-actions { justify-content: stretch; width: 100%; } .leaderboard-live-pill, .leaderboard-head-actions .btn { width: 100%; } .leaderboard-filter-grid, .leaderboard-date-grid, .leaderboard-kpi-grid { grid-template-columns: 1fr; } .leaderboard-filter-actions { width: 100%; } .leaderboard-filter-actions .btn { width: 100%; } .leaderboard-table-note { width: 100%; justify-content: flex-start; } .leaderboard-table-wrap table { min-width: 0; } .leaderboard-table-wrap thead { display: none; } .leaderboard-table-wrap, .leaderboard-table-wrap table, .leaderboard-table-wrap tbody, .leaderboard-table-wrap tr, .leaderboard-table-wrap td { display: block; width: 100%; } .leaderboard-table-wrap tbody { display: grid; gap: 0.85rem; padding: 0.9rem; } .leaderboard-table-wrap tr { padding: 0.95rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); } .leaderboard-table-wrap td { padding: 0.48rem 0; border: 0; } .leaderboard-table-wrap td::before { content: attr(data-label); display: block; margin-bottom: 0.28rem; color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .leaderboard-table-wrap td.leaderboard-rank-cell::before, .leaderboard-table-wrap td.leaderboard-main-td::before { display: none; } .leaderboard-table-wrap .leaderboard-rank-cell { width: auto; padding-bottom: 0.2rem; } } /* ── Leaderboard: new elements (v2 tab layout) ─────────── */ .leaderboard-tabs-panel { padding: 0; overflow: hidden; } .leaderboard-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--surface-2); overflow-x: auto; -webkit-overflow-scrolling: touch; } .leaderboard-tab { display: inline-flex; align-items: center; gap: 0.38rem; padding: 0.62rem 0.95rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: color var(--transition), border-color var(--transition), background var(--transition); } .leaderboard-tab:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 5%, transparent); } .leaderboard-tab.active, .leaderboard-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } .leaderboard-tab .leaderboard-table-note { min-height: 20px; padding: 0.14rem 0.46rem; font-size: 0.68rem; border-radius: 999px; color: var(--text-secondary); white-space: nowrap; } .leaderboard-tab .leaderboard-table-note:empty { display: none; } .leaderboard-tabpanel { padding: 0; } .leaderboard-tabpanel .leaderboard-table-wrap { border-top: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; } .leaderboard-partial-banner { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 35%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--warning, #f59e0b) 8%, var(--surface)); color: var(--text-secondary); font-size: 0.83rem; } .leaderboard-partial-retry { -webkit-appearance: none; appearance: none; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; } .leaderboard-filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 0; } .lb-filter-chip { display: inline-flex; align-items: center; padding: 0.22rem 0.6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--accent); font-size: 0.72rem; font-weight: 700; } .leaderboard-advanced-details { border-top: 1px solid var(--border); margin-top: 0.25rem; padding-top: 0; } .leaderboard-advanced-summary { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; -webkit-user-select: none; user-select: none; list-style: none; } .leaderboard-advanced-summary::-webkit-details-marker { display: none; } .leaderboard-advanced-details[open] .leaderboard-advanced-summary { color: var(--accent); } .leaderboard-advanced-details .leaderboard-filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 0.65rem; } .leaderboard-kpi-main { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .leaderboard-kpi-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Compact filter panel (replaces double grid) */ .leaderboard-filter-panel { display: grid; gap: 0.65rem; } .leaderboard-filter-stack { display: contents; } @media (max-width: 1100px) { .leaderboard-advanced-details .leaderboard-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .leaderboard-advanced-details .leaderboard-filter-grid { grid-template-columns: 1fr; } .leaderboard-tab .leaderboard-table-note { display: none; } .leaderboard-kpi-main, .leaderboard-kpi-sub { white-space: normal; overflow: visible; text-overflow: clip; } } .current-order-empty { text-align: center; padding: 1.5rem 1rem; } .current-empty-icon { font-size: 2rem; line-height: 1; color: var(--success, #16a34a); background: rgba(22,163,74,0.1); width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .current-empty-text { font-weight: 600; margin: 0 0 0.25rem; } .current-order-active { border-left: 3px solid var(--accent, #6366f1); padding-left: 0.75rem; } .current-stage { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: rgba(99,102,241,0.08); color: var(--accent, #6366f1); text-transform: uppercase; letter-spacing: 0.03em; } .current-elapsed { font-size: 11px; margin-left: auto; } /* ——— Status chips ——— */ .status-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } @media (max-width: 700px) { .status-row { gap: 0.4rem; } .status-chip { min-width: 80px; max-width: none; flex: 1 1 calc(50% - 0.4rem); } } .status-chip { border-radius: var(--radius-md); padding: 0.65rem 0.85rem; cursor: pointer; text-align: left; border: 1px solid transparent; flex: 1 1 0; min-width: 100px; max-width: 180px; transition: transform 0.15s ease, box-shadow var(--transition), border-color var(--transition), background var(--transition); background: var(--surface); box-shadow: var(--shadow-sm); font: inherit; color: inherit; } .status-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .status-chip.active { border-color: currentColor; box-shadow: var(--shadow); background: var(--surface-2); } .status-chip .n { font-size: 1.15rem; font-weight: 700; letter-spacing: 0; } .status-chip .l { font-size: 0.75rem; font-weight: 600; opacity: 0.88; margin-top: 0.15rem; } .chip-blue { color: var(--blue); } .chip-amber { color: var(--amber); } .chip-orange { color: var(--orange); } .chip-green { color: var(--green); } .chip-red { color: var(--red); } .chip-slate { color: var(--muted); } /* ——— Tables ——— */ .table-toolbar { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; margin-bottom: 1rem; } .table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); -webkit-overflow-scrolling: touch; background: var(--surface); } [data-theme="dark"] .table-wrap { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, var(--shadow-sm); } table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.875rem; background: var(--surface); } th { text-align: left; padding: 0.75rem 1.1rem; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.045em; color: var(--muted-2); border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); } td { padding: 0.82rem 1.1rem; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--text-secondary); } tr:last-child td { border-bottom: none; } tbody tr { transition: background var(--transition); } tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); } tr.vendor-higgs-row { cursor: pointer; } tr.vendor-higgs-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } tr.vendor-higgs-row:hover td { background: color-mix(in srgb, var(--accent) 10%, transparent); } .mono { font-family: var(--mono); font-size: 0.78rem; color: var(--text-secondary); } .th-sort-icon { margin-left: 0.25rem; opacity: 0.75; font-size: 0.65rem; } .pill-status { display: inline-flex; padding: 0.28rem 0.65rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; text-transform: capitalize; letter-spacing: 0; } .pill-status.queued { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); } .pill-status.processing { background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); } .pill-status.completed { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); } .pill-status.failed { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); } .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .system-mini-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; } @media (max-width: 520px) { .mini-grid { grid-template-columns: 1fr; } } .mini { position: relative; overflow: hidden; border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 72%, transparent); } .mini h4 { margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .mini p { margin: 0; font-size: 0.8125rem; color: var(--muted); } .system-mini-grid .mini p { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; color: var(--text); line-height: 1.2; word-break: break-word; } .mini-sub { display: block; margin-top: 0.28rem; font-size: 0.7rem; color: var(--muted); line-height: 1.4; } .system-panel-head { align-items: flex-start; justify-content: space-between; gap: 0.9rem; } .system-health-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 80%, transparent); color: var(--muted); } .system-health-pill.is-good { color: var(--green); border-color: color-mix(in srgb, var(--green) 26%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); } .system-health-pill.is-warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 26%, transparent); background: color-mix(in srgb, var(--amber) 12%, transparent); } .system-health-pill.is-bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 26%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); } .system-health-pill.is-neutral { color: var(--muted); } .system-health-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem; margin-top: 0; } .system-insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; margin-top: 0; } .system-insight-card { position: relative; overflow: hidden; display: grid; gap: 0.22rem; min-width: 0; padding: 0.7rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 72%, transparent); } .system-insight-card.is-good { border-color: color-mix(in srgb, var(--green) 20%, var(--hairline)); } .system-insight-card.is-warn { border-color: color-mix(in srgb, var(--amber) 20%, var(--hairline)); } .system-insight-card.is-bad { border-color: color-mix(in srgb, var(--red) 20%, var(--hairline)); } .system-insight-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .system-insight-value { font-family: var(--font); font-size: clamp(0.95rem, 1.5vw, 1.2rem); font-weight: 700; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; } .system-insight-sub { font-size: 0.72rem; line-height: 1.4; color: var(--muted); } .system-health-check { position: relative; overflow: hidden; padding: 0.7rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 72%, transparent); } .mini.is-loading > *, .system-insight-card.is-loading > *, .system-health-check.is-loading > * { opacity: 0; } .mini.is-loading::after, .system-insight-card.is-loading::after, .system-health-check.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--surface) 78%, transparent) 50%, transparent 100% ), color-mix(in srgb, var(--surface-2) 88%, transparent); transform: translateX(-100%); animation: serverStatusShimmer 1.3s ease-in-out infinite; } .system-health-check.is-good { border-color: color-mix(in srgb, var(--green) 20%, var(--hairline)); } .system-health-check.is-warn { border-color: color-mix(in srgb, var(--amber) 20%, var(--hairline)); } .system-health-check.is-bad { border-color: color-mix(in srgb, var(--red) 20%, var(--hairline)); } .system-health-check-top { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; margin-bottom: 0.3rem; } .system-health-check-label { font-size: 0.75rem; font-weight: 700; color: var(--text); } .system-health-check-status { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0.12rem 0.42rem; border-radius: 999px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 80%, transparent); } .system-health-check.is-good .system-health-check-status { color: var(--green); border-color: color-mix(in srgb, var(--green) 26%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); } .system-health-check.is-warn .system-health-check-status { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 26%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); } .system-health-check.is-bad .system-health-check-status { color: var(--red); border-color: color-mix(in srgb, var(--red) 26%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); } .system-health-check-value { display: block; font-family: var(--font); font-size: clamp(0.95rem, 1.4vw, 1.1rem); font-weight: 700; line-height: 1.2; color: var(--text); } .system-health-check-detail { margin-top: 0.28rem; font-size: 0.72rem; line-height: 1.4; color: var(--muted); } #current-slot { min-height: 112px; } .current-order { display: flex; flex-direction: column; gap: 0.9rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-2) 72%, var(--surface)); } .current-order-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; } .current-order-id { font-size: 1rem; font-weight: 600; color: var(--text); } .current-order-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .current-order-stat { padding: 0.8rem 0.9rem; border-radius: var(--radius-xs); border: 1px solid var(--hairline); background: var(--surface); } .current-order-stat-label { display: block; margin-bottom: 0.35rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .current-order-empty { display: flex; align-items: center; justify-content: center; min-height: 112px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-2) 60%, transparent); } @media (max-width: 640px) { .system-mini-grid { grid-template-columns: 1fr 1fr; } .system-panel-head { flex-direction: column; align-items: flex-start; } .server-status-head { flex-direction: column; align-items: flex-start; } .server-status-actions { width: 100%; justify-content: space-between; } .current-order-details { grid-template-columns: 1fr; } } @media (max-width: 520px) { .system-mini-grid { grid-template-columns: 1fr; } .server-status-section { padding: 0.8rem 0.85rem 0.9rem; } } /* ——— Toast ——— */ /* toast styles moved to ENHANCED section */ @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .toast.toast-ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 28%, transparent); } /* ——— Drawer ——— */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 90; opacity: 0; pointer-events: none; transition: opacity var(--transition); backdrop-filter: blur(3px); } .drawer-overlay.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; width: min(400px, 100%); height: 100%; height: 100dvh; background: var(--surface); z-index: 91; transform: translateX(100%); transition: transform var(--transition); border-left: 1px solid var(--border); padding: 1.35rem 1.25rem; padding-top: max(1.35rem, env(safe-area-inset-top)); box-shadow: var(--shadow-modal); overflow-y: auto; } .drawer.open { transform: translateX(0); } .drawer h3 { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; letter-spacing: 0; } /* ——— Forms ——— */ .field { margin-bottom: 1rem; } .field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.35rem; letter-spacing: 0; } .field input, .field select, .field textarea, .form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: 0.58rem 0.85rem; border-radius: var(--radius-xs); border: 1px solid var(--border); font: inherit; font-size: 0.875rem; color: var(--text); background: var(--surface); outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .field input[type="checkbox"], .field input[type="radio"], .form-grid input[type="checkbox"], .form-grid input[type="radio"] { width: auto; padding: 0; } .field input:focus, .field select:focus, .field textarea:focus, .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .field select, .form-grid select, .inline-meta-select, .tx-filter-select, .ai-margin-select, .ai-margin-type-select, .announcement-filter-row select { color-scheme: light; } .field select option, .form-grid select option, .inline-meta-select option, .tx-filter-select option, .ai-margin-select option, .ai-margin-type-select option, .announcement-filter-row select option { background: var(--surface); color: var(--text); } .field select option:disabled, .form-grid select option:disabled, .inline-meta-select option:disabled, .tx-filter-select option:disabled, .ai-margin-select option:disabled, .ai-margin-type-select option:disabled, .announcement-filter-row select option:disabled { color: var(--muted); } .select-search-wrap { display: grid; gap: 0.4rem; min-width: 0; } .select-search-input { width: 100%; min-width: 0; padding: 0.52rem 0.8rem; border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 0.8125rem; outline: none; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); } .select-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .select-search-input:disabled { background: color-mix(in srgb, var(--surface-2) 92%, transparent); color: var(--muted); cursor: not-allowed; } [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea, [data-theme="dark"] .form-grid input, [data-theme="dark"] .form-grid select, [data-theme="dark"] .form-grid textarea { background: var(--surface-2); border-color: var(--border-strong); } [data-theme="dark"] .field input:focus, [data-theme="dark"] .field select:focus, [data-theme="dark"] .field textarea:focus, [data-theme="dark"] .form-grid input:focus, [data-theme="dark"] .form-grid select:focus, [data-theme="dark"] .form-grid textarea:focus { background: var(--surface); } [data-theme="dark"] .field select, [data-theme="dark"] .form-grid select, [data-theme="dark"] .inline-meta-select, [data-theme="dark"] .tx-filter-select, [data-theme="dark"] .ai-margin-select, [data-theme="dark"] .ai-margin-type-select, [data-theme="dark"] .announcement-filter-row select { color-scheme: dark; } [data-theme="dark"] .field select option, [data-theme="dark"] .form-grid select option, [data-theme="dark"] .inline-meta-select option, [data-theme="dark"] .tx-filter-select option, [data-theme="dark"] .ai-margin-select option, [data-theme="dark"] .ai-margin-type-select option, [data-theme="dark"] .announcement-filter-row select option { background: var(--surface-2); color: var(--text); } [data-theme="dark"] .field select option:checked, [data-theme="dark"] .form-grid select option:checked, [data-theme="dark"] .inline-meta-select option:checked, [data-theme="dark"] .tx-filter-select option:checked, [data-theme="dark"] .ai-margin-select option:checked, [data-theme="dark"] .ai-margin-type-select option:checked, [data-theme="dark"] .announcement-filter-row select option:checked { background: #93c5fd; color: #0f172a; } .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 1rem 1.1rem; margin-bottom: 1rem; align-items: end; } .form-grid .field { margin: 0; } .form-grid .field.field-span-full { grid-column: 1 / -1; } .team-permission-widget { display: grid; gap: 0.7rem; min-width: 0; } .team-permission-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .team-permission-master { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 86%, transparent); color: var(--text); font-size: 0.875rem; font-weight: 700; cursor: pointer; } .team-permission-master input { width: 1rem; height: 1rem; margin: 0; } .team-permission-counter { font-size: 0.8125rem; color: var(--muted); } .team-permissions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.5rem; } .team-permission-sections { display: grid; gap: 0.85rem; } .team-permission-section { display: grid; gap: 0.65rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 58%, transparent); } .team-permission-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; padding-bottom: 0.6rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .team-permission-section-head > div { display: grid; gap: 0.15rem; min-width: 0; } .team-permission-section-head strong { color: var(--text); font-size: 0.9rem; line-height: 1.25; } .team-permission-section-head span { color: var(--muted); font-size: 0.76rem; line-height: 1.4; } .team-permission-section-head em { flex: 0 0 auto; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.7rem; font-style: normal; font-weight: 800; white-space: nowrap; } .team-permission-section .team-permissions-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .team-permission-item { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); cursor: pointer; min-height: auto; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } .team-permission-item:hover { border-color: var(--border-strong); } .team-permission-item.is-checked { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); } .team-permission-item input { width: 1rem; height: 1rem; margin: 0.08rem 0 0; flex: 0 0 auto; } .team-permission-copy { min-width: 0; } .team-permission-title { display: block; font-size: 0.875rem; font-weight: 700; color: var(--text); line-height: 1.35; } .team-permission-note { display: block; margin-top: 0.18rem; font-size: 0.775rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; } .team-permission-summary { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .team-permission-summary .cell-tag.tag-count { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--text); font-weight: 700; } .team-permission-summary .cell-tag.tag-all { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); font-weight: 700; } .team-permission-summary .cell-tag.tag-more { font-style: italic; color: var(--muted); } /* === Team list: card layout always (not just mobile) === */ .users-cards-always table { min-width: 0 !important; table-layout: auto; } .users-cards-always thead { display: none; } .users-cards-always, .users-cards-always table, .users-cards-always tbody, .users-cards-always tr, .users-cards-always td { display: block; width: 100%; } .users-cards-always tbody { display: grid; gap: 0.45rem; } .users-cards-always tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: visible; } .users-cards-always td { padding: 0; border: 0; width: auto !important; white-space: normal !important; } .users-cards-always td + td { border-top: 0; margin-top: 0; padding-top: 0; } .users-cards-always td::before { display: none; } .users-cards-always .row-actions-user { justify-content: flex-end; justify-items: end; flex-wrap: nowrap; } .users-cards-always .role-pill, .users-cards-always .user-inline-copy, .users-cards-always .user-meta-chip { font-size: 0.72rem; } .users-team-list-panel .users-list-head { margin-bottom: 0.7rem; } .users-team-list-panel .users-list-note { display: none; } .users-permission-open { width: fit-content; min-width: 8.5rem; } .users-permission-compact-note, .users-permission-dialog-note { display: block; margin-top: 0.45rem; font-size: 0.78rem; line-height: 1.45; } .team-permission-empty { font-size: 0.8125rem; } .modal-balance-reauth { max-width: 460px; } @media (max-width: 640px) { .balance-page-head { margin-bottom: 1rem; } .balance-stats-grid { grid-template-columns: 1fr; } .balance-tracking-grid { grid-template-columns: 1fr; } .balance-stat-card, .balance-history-panel, .balance-topup-panel { padding: 1rem; } .balance-history-toolbar { grid-template-columns: 1fr; } .balance-history-search, .balance-history-filter, .balance-date-filter, .balance-history-actions { grid-column: auto; } .balance-user-picker-inputs { grid-template-columns: 1fr; } .balance-form-actions .btn, .balance-page-head .head-actions .btn, .balance-history-actions .btn { width: 100%; justify-content: center; } .balance-page-head .head-actions { width: 100%; } .team-permissions-grid { grid-template-columns: 1fr; } .team-permission-section-head { align-items: stretch; flex-direction: column; } .team-permission-section-head em { width: max-content; } } .products-filter-search .tx-search-input { width: 100%; } #products-filter-category, #products-filter-subcategory, #products-filter-vendor, #products-filter-price, #products-filter-profit, #products-filter-sort { grid-column: span 2; min-width: 0; } @media (min-width: 960px) { .form-inline-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(11.5rem, 14rem) auto; } .form-inline-3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; } .form-inline-2 { grid-template-columns: minmax(0, 1fr) auto; max-width: 32rem; } .product-create-grid { grid-template-columns: minmax(13rem, 1fr) minmax(15rem, 1.2fr) minmax(11rem, 13rem) minmax(11rem, 13rem) 7rem; } } @media (max-width: 959px) { .form-inline-4, .form-inline-3, .form-inline-2 { grid-template-columns: 1fr; } .form-inline-2 { max-width: none; } .settings-card-head { flex-direction: column; } } .row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .edit-section { border: 1px solid var(--border, rgba(148, 163, 184, 0.3)); border-radius: 10px; padding: 0.75rem 1rem 1rem; margin: 0; } .edit-section legend { font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #64748b); padding: 0 0.35rem; } /* ── Vendor Mapping Modal ── */ .modal-vendor-mapping { max-width: 1120px; width: 95vw; } .field-hint { display: block; font-size: 10px; color: var(--text-muted, #94a3b8); margin-top: 2px; line-height: 1.3; } .seagm-products-catalog-wrap table { min-width: 760px; } .row-actions .btn { min-height: 2rem; } .inline-price-cell { min-width: 168px; width: 168px; } .inline-price-field, .inline-meta-field { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 42px; padding: 0 0.72rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast); } .inline-meta-cell-sku { min-width: 180px; width: 180px; } .inline-meta-cell-name { min-width: 280px; } .inline-price-prefix { flex: 0 0 auto; font-size: 0.74rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; } .inline-price-input, .inline-meta-input, .inline-meta-select { width: 100%; min-width: 0; padding: 0.58rem 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-family: var(--mono); font-size: 0.82rem; font-weight: 600; line-height: 1.3; text-align: right; transition: color var(--transition-fast), opacity var(--transition-fast); } .inline-meta-input, .inline-meta-select { font-size: 0.92rem; font-weight: 600; text-align: left; } .inline-meta-input { letter-spacing: 0; } .inline-meta-input.mono { font-family: var(--mono); font-size: 0.84rem; } .inline-meta-select { appearance: none; cursor: pointer; } .inline-vendor-product-field .inline-meta-select, .inline-vendor-field .inline-meta-select { padding-right: 1.15rem; } .inline-price-input::placeholder { color: var(--muted-2); opacity: 1; } .inline-price-input::placeholder, .inline-meta-input::placeholder { color: var(--muted-2); opacity: 1; } .inline-price-field:hover, .inline-meta-field:hover { border-color: var(--border-strong); } .inline-price-field:focus-within, .inline-meta-field:focus-within { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .inline-price-input:focus, .inline-meta-input:focus, .inline-meta-select:focus { outline: none; box-shadow: none; } .inline-price-field.is-saving, .inline-meta-field.is-saving { opacity: 0.72; background: var(--surface-2); } .inline-price-field.is-saved, .inline-meta-field.is-saved { border-color: #16a34a; background: color-mix(in srgb, #16a34a 7%, var(--surface)); } .inline-price-field.is-error, .inline-meta-field.is-error { border-color: var(--red); background: color-mix(in srgb, var(--red) 6%, var(--surface)); } @media (max-width: 1200px) { .products-filter-head { grid-template-columns: 1fr; } .products-filter-count { justify-self: start; text-align: left; } .products-bulk-toolbar { align-items: flex-start; } .products-bulk-actions { justify-content: flex-start; } .products-filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .products-filter-search, .products-filter-actions { grid-column: 1 / -1; } #products-filter-category, #products-filter-subcategory, #products-filter-vendor, #products-filter-price, #products-filter-profit, #products-filter-sort { grid-column: span 2; } .product-table-wrap table { min-width: 980px; } .product-table-wrap td[data-label="Nama"] { min-width: 12.5rem; } .seagm-products-catalog-wrap table { min-width: 680px; } } @media (max-width: 900px) { .products-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-select-search-row { grid-template-columns: 1fr; } .product-select-search-btn { width: 100%; } .products-filter-search, #products-filter-category, #products-filter-subcategory, #products-filter-vendor, #products-filter-price, #products-filter-profit, #products-filter-sort, .products-filter-actions { grid-column: 1 / -1; } .product-table-wrap table { min-width: 0; } .inline-price-cell { min-width: 148px; width: 148px; } .inline-price-field, .inline-meta-field { min-height: 40px; padding: 0 0.64rem; gap: 0.42rem; } .inline-price-input, .inline-meta-input, .inline-meta-select { font-size: 0.78rem; } .inline-meta-cell-sku { min-width: 156px; width: 156px; } .inline-meta-cell-name { min-width: 220px; } .inline-vendor-map { min-width: 14rem; } } @media (max-width: 720px) { .ai-prompt-textarea { min-width: 0; flex-basis: 100%; min-height: 4.5rem; } .ai-prompt-btn { width: 100%; margin-left: 0; justify-content: center; } .ai-margin-row { align-items: stretch; } .ai-margin-label, .ai-margin-hint { flex-basis: 100%; } .ai-margin-select, .ai-margin-input-group, #btn-ai-margin { width: 100%; flex-basis: 100%; } #btn-ai-margin { justify-content: center; } .product-table-wrap table { min-width: 0; } .product-table-wrap thead { display: none; } .product-table-wrap tbody tr { display: grid; grid-template-columns: 1fr; gap: 0.65rem; padding: 1rem; border-bottom: 1px solid var(--border); } .product-table-wrap tbody tr:last-child { border-bottom: none; } .product-table-wrap tbody td { display: block; padding: 0; border: none; min-width: 0; } .product-table-wrap tbody td::before { content: attr(data-label); display: block; margin-bottom: 0.22rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .product-table-wrap td[data-label="Nama"] { min-width: 0; } .product-table-wrap .inline-price-cell { min-width: 0; width: 100%; } .product-table-wrap tbody td.product-select-cell::before { display: none; } .product-table-wrap tbody td.product-select-cell { display: flex; align-items: center; justify-content: flex-start; } .product-select-box-text { display: inline; } .product-table-wrap .row-actions { width: 100%; } .product-table-wrap .row-actions .btn { flex: 1 1 0; justify-content: center; } .seagm-products-catalog-wrap table { min-width: 0; } .seagm-products-catalog-wrap thead { display: none; } .seagm-products-catalog-wrap tbody tr { display: grid; grid-template-columns: 1fr; gap: 0.6rem; padding: 1rem; border-bottom: 1px solid var(--border); } .seagm-products-catalog-wrap tbody tr:last-child { border-bottom: none; } .seagm-products-catalog-wrap tbody td { display: block; padding: 0; border: none; min-width: 0; } .seagm-products-catalog-wrap tbody td::before { content: attr(data-label); display: block; margin-bottom: 0.22rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } } @media (max-width: 640px) { .products-bulk-toolbar, .products-bulk-summary, .products-bulk-actions { flex-direction: column; align-items: stretch; } .products-bulk-actions { width: 100%; } .products-bulk-actions .btn { width: 100%; } .products-filter-grid { grid-template-columns: 1fr; } .products-filter-search, #products-filter-category, #products-filter-vendor, #products-filter-price, #products-filter-profit, #products-filter-sort, .products-filter-actions { grid-column: auto; } .products-filter-actions { flex-direction: column; } .products-filter-actions .btn { width: 100%; } .inline-price-cell { min-width: 136px; width: 136px; } .inline-price-field, .inline-meta-field { min-height: 38px; padding: 0 0.58rem; } .inline-price-prefix { font-size: 0.7rem; } .inline-price-input, .inline-meta-input, .inline-meta-select { font-size: 0.74rem; } .inline-meta-cell-sku { min-width: 144px; width: 144px; } .inline-meta-cell-name { min-width: 200px; } .inline-vendor-map { min-width: 12.5rem; } } [data-theme="dark"] .row-actions .btn-ghost { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.12); color: var(--text-secondary); } [data-theme="dark"] .row-actions .btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); color: var(--text); } [data-theme="dark"] .row-actions .btn-danger { background: color-mix(in srgb, var(--red) 14%, transparent); border-color: color-mix(in srgb, var(--red) 38%, transparent); color: #f0b4b0; } [data-theme="dark"] .row-actions .btn-danger:hover { background: color-mix(in srgb, var(--red) 22%, transparent); } .hidden { display: none !important; } .muted { color: var(--muted); font-size: 0.875rem; line-height: 1.45; } .role-pill { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.22rem 0.5rem; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: inline-block; } .cell-tag { display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 500; padding: 0.2rem 0.55rem; border-radius: 8px; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); letter-spacing: 0; line-height: 1.25; max-width: 100%; } .sku-text { display: inline-block; font-size: 0.875rem; font-weight: 600; color: var(--text); line-height: 1.35; } .seagm-product-meta { margin-top: 0.28rem; font-size: 0.74rem; color: var(--muted); line-height: 1.35; } .seagm-map-id { margin-top: 0.28rem; font-size: 0.74rem; color: var(--muted); } .seagm-map-ok { background: #dcfce7; color: #166534; border-color: #bbf7d0; } .seagm-map-pending { background: #fef3c7; color: #92400e; border-color: #fde68a; } [data-theme="dark"] .seagm-map-ok { background: #14532d; color: #86efac; border-color: #166534; } [data-theme="dark"] .seagm-map-pending { background: #78350f; color: #fde68a; border-color: #92400e; } .category-row-meta, .category-summary { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-top: 0.45rem; } .category-row-type { font-size: 0.75rem; font-weight: 600; color: var(--muted); } .category-row-id { font-size: 0.7rem; opacity: 0.72; } .vendor-tag { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); } .vendor-product-tag { background: color-mix(in srgb, var(--blue) 14%, var(--surface-2)); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 24%, var(--border)); } .vendor-product-pending { background: color-mix(in srgb, var(--amber) 10%, var(--surface-2)); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 24%, var(--border)); } .vendor-page-head { align-items: flex-start; gap: 0.65rem 1rem; } .vendor-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.55rem; flex-shrink: 0; } .vendor-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0.85rem; margin-bottom: 1rem; } @media (min-width: 960px) { .vendor-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .vendor-stat-card { display: grid; gap: 0.4rem; padding: 1rem 1.05rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); } .vendor-stat-card strong { font-size: 1.5rem; line-height: 1.1; } .vendor-stat-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .vendor-stat-note { font-size: 0.8rem; color: var(--muted); } .vendor-list-panel { display: grid; gap: 1rem; } .vendor-list-head { align-items: flex-start; gap: 0.75rem 1rem; } .vendor-list-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem; min-width: 0; } .vendor-board-summary { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.8rem; padding: 0.2rem 0.72rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); background: color-mix(in srgb, var(--surface-2) 86%, transparent); color: var(--muted); font-size: 0.76rem; font-weight: 700; } .vendor-monitor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.85rem; } .vendor-monitor-card, .vendor-monitor-empty { display: grid; gap: 0.72rem; min-width: 0; min-height: 220px; padding: 1rem 1.05rem; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 90%, transparent), var(--surface)); box-shadow: var(--shadow-sm); } .vendor-monitor-card { cursor: pointer; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .vendor-monitor-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); box-shadow: var(--shadow); } .vendor-monitor-empty { place-items: start; } .vendor-monitor-head, .vendor-monitor-footer, .vendor-monitor-metrics, .vendor-health-indicator, .vendor-monitor-actions { display: flex; align-items: center; } .vendor-monitor-head, .vendor-monitor-footer { justify-content: space-between; gap: 0.7rem; } .vendor-monitor-head { align-items: flex-start; } .vendor-monitor-title { display: grid; gap: 0.35rem; min-width: 0; } .vendor-monitor-title strong { font-size: 1rem; line-height: 1.32; color: var(--text); } .vendor-monitor-title span { color: var(--muted); font-size: 0.78rem; } .vendor-monitor-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.42rem; } .vendor-health-indicator { gap: 0.42rem; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); } .vendor-health-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--muted-2); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); flex: 0 0 auto; } .vendor-health-good { color: #16a34a; } .vendor-health-good .vendor-health-dot { background: #22c55e; } .vendor-health-warn { color: #d97706; } .vendor-health-warn .vendor-health-dot { background: #f59e0b; } .vendor-health-bad { color: #dc2626; } .vendor-health-bad .vendor-health-dot { background: #ef4444; } .vendor-monitor-copy { display: grid; gap: 0.38rem; color: var(--muted); font-size: 0.82rem; line-height: 1.55; } .vendor-monitor-copy .vendor-monitor-endpoint { color: var(--text-secondary); font-weight: 700; overflow-wrap: anywhere; } .vendor-monitor-copy .vendor-monitor-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vendor-monitor-metrics { flex-wrap: wrap; gap: 0.45rem; } .vendor-monitor-metric { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.8rem; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); background: color-mix(in srgb, var(--surface-2) 92%, transparent); font-size: 0.76rem; color: var(--text-secondary); } .vendor-monitor-metric strong { color: var(--text); font-size: 0.82rem; } .vendor-monitor-actions { flex-wrap: wrap; gap: 0.45rem; } .vendor-data-section { display: grid; gap: 0.85rem; padding-top: 0.1rem; border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); } .vendor-data-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem 1rem; } .vendor-data-title { margin: 0 0 0.2rem; font-size: 1rem; line-height: 1.35; color: var(--text); } .vendor-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; align-items: start; } .vendor-field-wide { grid-column: 1 / -1; } .vendor-field-submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin: 0; } .vendor-field-submit .btn-primary { min-width: min(100%, 10.5rem); min-height: 2.55rem; } .vendor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.6rem; margin-bottom: 0.85rem; } .vendor-toolbar > select { flex: 1 1 140px; min-width: 0; max-width: 100%; width: auto; min-height: 46px; padding: 0.48rem 0.65rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.875rem; cursor: pointer; box-sizing: border-box; } .vendor-toolbar > select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .vendor-toolbar .btn { flex: 0 0 auto; align-self: center; min-height: 46px; padding-left: 0.85rem; padding-right: 0.85rem; } .vendor-search-field { display: flex; align-items: center; gap: 0.65rem; flex: 1 1 220px; min-width: min(100%, 200px); padding: 0 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); min-height: 46px; box-sizing: border-box; } .vendor-search-field svg { flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.78; } .vendor-search-field input { border: 0; background: transparent; box-shadow: none; padding: 0; min-width: 0; } .vendor-search-field input:focus { outline: 0; } .vendor-table { min-width: 1020px; } #vendor-body tr[data-vendor-id] { cursor: pointer; } #vendor-body tr[data-vendor-id] .vendor-row-actions { cursor: default; } .vendor-table td { vertical-align: top; } .vendor-main-cell, .vendor-main-meta, .vendor-detail-cell, .vendor-detail-badges, .vendor-katalog-cell, .vendor-relasi-cell, .vendor-row-actions, .vendor-detail-hero-actions { display: flex; flex-wrap: wrap; } .vendor-main-cell, .vendor-detail-cell { min-width: 0; flex-direction: column; gap: 0.45rem; } .vendor-main-name { font-size: 0.98rem; line-height: 1.35; } .vendor-main-meta, .vendor-detail-badges, .vendor-katalog-cell, .vendor-relasi-cell, .vendor-row-actions, .vendor-detail-hero-actions { gap: 0.45rem; align-items: center; } .vendor-main-id { font-size: 0.72rem; color: var(--muted); word-break: break-all; } .vendor-source-tag.vendor-source-system { background: color-mix(in srgb, var(--blue) 14%, transparent); border-color: color-mix(in srgb, var(--blue) 26%, transparent); color: var(--blue); } .vendor-source-tag.vendor-source-custom { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent); } .vendor-status-tag.vendor-status-active { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: color-mix(in srgb, var(--green) 24%, transparent); color: var(--green); } .vendor-status-tag.vendor-status-maintenance { background: color-mix(in srgb, var(--yellow) 16%, transparent); border-color: color-mix(in srgb, var(--yellow) 28%, transparent); color: color-mix(in srgb, var(--yellow) 82%, #7c4700); } .vendor-status-tag.vendor-status-testing { background: color-mix(in srgb, var(--blue) 14%, transparent); border-color: color-mix(in srgb, var(--blue) 26%, transparent); color: var(--blue); } .vendor-status-tag.vendor-status-inactive { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 24%, transparent); color: var(--red); } .vendor-detail-copy { display: grid; gap: 0.28rem; color: var(--muted); font-size: 0.82rem; min-width: 0; } .vendor-note-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .vendor-katalog-metric { display: inline-flex; align-items: center; gap: 0.22rem; padding: 0.18rem 0.52rem; border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 92%, transparent); border: 1px solid var(--hairline); font-size: 0.78rem; color: var(--text); } .vendor-mini-user, .vendor-mini-more { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; border-radius: 999px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 92%, transparent); font-size: 0.74rem; } .vendor-updated-cell { display: grid; gap: 0.22rem; min-width: 0; } .vendor-updated-cell strong { font-size: 0.84rem; } .vendor-updated-cell span { font-size: 0.76rem; color: var(--muted); word-break: break-word; } .modal-vendor-edit { max-width: 640px; } .modal-vendor-create { max-width: 640px; } .modal-vendor-detail { max-width: 780px; } .vendor-detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; margin-bottom: 1rem; } .vendor-detail-hero-copy { min-width: 0; display: grid; gap: 0.35rem; } .vendor-detail-hero-copy h4 { margin: 0; font-size: 1.18rem; line-height: 1.2; } @media (max-width: 1180px) { .vendor-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vendor-monitor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .vendor-form-grid { grid-template-columns: 1fr; } .vendor-field-wide { grid-column: auto; } .vendor-toolbar > select { flex: 1 1 calc(50% - 0.35rem); max-width: none; } .vendor-search-field { flex: 1 1 100%; min-width: 0; } .vendor-toolbar .btn { flex: 1 1 auto; justify-content: center; } .vendor-list-head, .vendor-data-head, .vendor-monitor-head, .vendor-monitor-footer { flex-direction: column; align-items: flex-start; } .vendor-list-actions { width: 100%; justify-content: flex-start; } .vendor-board-summary { max-width: 100%; white-space: normal; justify-content: flex-start; } .vendor-monitor-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .vendor-detail-hero { flex-direction: column; } } .seagm-category-note { font-size: 0.75rem; color: var(--muted); } /* ——— Modal ——— */ dialog.modal { border: none; border-radius: var(--radius); padding: 1.5rem 1.65rem; max-width: 440px; width: calc(100% - 2rem); background: var(--surface); color: var(--text); box-shadow: var(--shadow-modal); } dialog.modal::backdrop { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); } dialog.modal h3 { margin: 0 0 1.1rem; font-size: 1.125rem; font-weight: 600; letter-spacing: 0; } .modal-gamepoint-otp { max-width: 430px; padding: 0; overflow: hidden; border: 1px solid var(--border); } .gamepoint-otp-form { padding: 1.15rem; } .gamepoint-otp-head { display: grid; gap: 0.35rem; margin-bottom: 1rem; } .gamepoint-otp-kicker { width: fit-content; padding: 0.18rem 0.5rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 0.78rem; font-weight: 700; } .modal-gamepoint-otp h3 { margin: 0; } .gamepoint-otp-head p { margin: 0; } .gamepoint-otp-field { display: grid; gap: 0.45rem; font-weight: 700; } .gamepoint-otp-input { width: 100%; height: 3.4rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.45rem; font-weight: 800; letter-spacing: 0.35em; text-align: center; } .gamepoint-otp-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .gamepoint-otp-error { margin-top: 0.7rem; padding: 0.55rem 0.65rem; border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 38%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent); color: var(--danger, #ef4444); font-size: 0.86rem; font-weight: 700; } .gamepoint-otp-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; } @media (max-width: 560px) { .gamepoint-otp-actions { display: grid; grid-template-columns: 1fr 1fr; } .gamepoint-otp-actions .btn { width: 100%; } } /* empty-state styles moved to ENHANCED section */ /* ——— Mobile bottom nav ——— */ .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-top: 1px solid var(--border); padding: 0.35rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); justify-content: space-around; align-items: stretch; gap: 0.25rem; } @media (max-width: 900px) { .mobile-nav { display: flex; } } .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.45rem 0.25rem; border: none; background: none; font: inherit; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); cursor: pointer; border-radius: var(--radius-xs); max-width: 88px; transition: color var(--transition), background var(--transition); } .mobile-nav-item svg { width: 22px; height: 22px; opacity: 0.65; } .mobile-nav-item:hover, .mobile-nav-item:focus-visible { color: var(--text); background: var(--surface-2); } .mobile-nav-item.active { color: var(--accent); } .mobile-nav-item.active svg { opacity: 1; } .mobile-nav-item.hidden { display: none !important; } /* ——— Code inline ——— */ code { font-family: var(--mono); font-size: 0.8em; padding: 0.12rem 0.35rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); } /* ——— Auth page (login) ——— */ body.auth-page { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--font); background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 2.5vw, 2rem); padding: max(clamp(1rem, 2.5vw, 2rem), env(safe-area-inset-top)) max(clamp(1rem, 2.5vw, 2rem), env(safe-area-inset-right)) max(clamp(1rem, 2.5vw, 2rem), env(safe-area-inset-bottom)) max(clamp(1rem, 2.5vw, 2rem), env(safe-area-inset-left)); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .auth-page .auth-bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .auth-bg-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; will-change: transform; animation: authBlobFloat 22s ease-in-out infinite alternate; } .auth-bg-blob-1 { width: 560px; height: 560px; left: -180px; top: -180px; background: radial-gradient( circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70% ); } .auth-bg-blob-2 { width: 520px; height: 520px; right: -160px; bottom: -160px; background: radial-gradient( circle, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70% ); animation-duration: 28s; animation-delay: -6s; } .auth-bg-blob-3 { width: 360px; height: 360px; left: 55%; top: 8%; background: radial-gradient( circle, color-mix(in srgb, #8b5cf6 40%, transparent), transparent 70% ); opacity: 0.32; animation-duration: 34s; animation-delay: -12s; } [data-theme="dark"] .auth-bg-blob { opacity: 0.42; } [data-theme="dark"] .auth-bg-blob-3 { opacity: 0.22; } .auth-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%); opacity: 0.5; } [data-theme="dark"] .auth-bg-grid { opacity: 0.35; } @keyframes authBlobFloat { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(40px, -30px, 0) scale(1.08); } 100% { transform: translate3d(-30px, 40px, 0) scale(0.95); } } /* Layout shell */ .auth-shell { position: relative; z-index: 1; width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: stretch; } @media (min-width: 960px) { .auth-shell { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; } } /* Hero panel */ .auth-hero { display: none; padding: 2rem 0.5rem 2rem 0.25rem; color: var(--text); } @media (min-width: 960px) { .auth-hero { display: flex; flex-direction: column; justify-content: center; gap: 1.35rem; } } .auth-hero-brand { display: inline-flex; text-decoration: none; color: inherit; } .auth-hero-logo { display: block; height: 44px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; } .auth-hero-title { margin: 0; font-size: clamp(1.55rem, 2.2vw, 1.95rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .auth-hero-title em { font-style: normal; background: linear-gradient( 135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8b5cf6) ); -webkit-background-clip: text; background-clip: text; color: transparent; } .auth-hero-desc { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; max-width: 38ch; } .auth-hero-list { list-style: none; padding: 0; margin: 0.35rem 0 0; display: grid; gap: 0.7rem; font-size: 0.9rem; color: var(--text); } .auth-hero-list li { display: flex; align-items: center; gap: 0.7rem; line-height: 1.35; } .auth-hero-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); flex-shrink: 0; } /* Card */ .auth-card { position: relative; width: 100%; max-width: 460px; margin: 0 auto; background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px; padding: clamp(1.5rem, 3.5vw, 2.35rem); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 40px -12px rgba(15, 23, 42, 0.18), 0 2px 8px -2px rgba(15, 23, 42, 0.06); overflow: hidden; } [data-theme="dark"] .auth-card { background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 48px -12px rgba(0, 0, 0, 0.55), 0 2px 8px -2px rgba(0, 0, 0, 0.3); } @media (min-width: 960px) { .auth-card { margin: 0; } } .auth-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8b5cf6), var(--accent) ); background-size: 200% 100%; animation: authAccentShift 12s linear infinite; } @keyframes authAccentShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .auth-brand { margin-bottom: 1.1rem; } .auth-brand-logo-img { display: block; height: 44px; width: auto; max-width: min(240px, 100%); object-fit: contain; object-position: left center; } @media (min-width: 960px) { .auth-card .auth-brand { display: none; } } .auth-card h1 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1.3; } .auth-card .sub { margin: 0.35rem 0 1.4rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; } /* Notes */ .auth-note { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0 0 0.9rem; padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 0.8125rem; line-height: 1.5; } .auth-note[hidden] { display: none; } .auth-note::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; background: currentColor; color: var(--muted); -webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,"); mask: no-repeat center / contain url("data:image/svg+xml;utf8,"); } .auth-note strong { font-weight: 600; margin-right: 0.25rem; } .auth-note a { color: var(--accent); text-decoration: none; font-weight: 500; } .auth-note a:hover { text-decoration: underline; } .auth-note-warning { border-color: color-mix(in srgb, var(--amber, #f59e0b) 45%, var(--border)); background: color-mix(in srgb, var(--amber, #f59e0b) 10%, var(--surface)); color: color-mix(in srgb, var(--amber, #f59e0b) 85%, var(--text)); } .auth-note-warning::before { color: var(--amber, #f59e0b); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Portal chooser */ .auth-portal-links { display: flex; gap: 0.55rem; margin: 0 0 1rem; flex-wrap: wrap; } .auth-portal-links[hidden] { display: none; } .auth-portal-link { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); background: var(--surface-2); font-size: 0.8875rem; font-weight: 500; transition: border-color var(--transition), background var(--transition), transform 0.12s ease; } .auth-portal-link:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--accent); } .auth-portal-link:active { transform: scale(0.98); } .auth-portal-link-icon { display: inline-grid; place-items: center; color: var(--accent); flex-shrink: 0; } /* Form layout */ .auth-card #form { display: flex; flex-direction: column; gap: 0.95rem; } .auth-step[hidden] { display: none; } .auth-step-desc { margin: 0 0 0.35rem; font-size: 0.875rem; color: var(--muted); line-height: 1.5; } .auth-field { display: flex; flex-direction: column; gap: 0.4rem; } .auth-card label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text); margin: 0; letter-spacing: 0; } /* Input group */ .auth-input { position: relative; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } [data-theme="dark"] .auth-input { background: color-mix(in srgb, var(--surface) 80%, var(--bg)); } .auth-input:hover:not(:focus-within) { border-color: color-mix(in srgb, var(--text) 14%, var(--border)); } .auth-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); } .auth-input-icon { display: grid; place-items: center; width: 42px; flex-shrink: 0; color: var(--muted); transition: color var(--transition); } .auth-input:focus-within .auth-input-icon { color: var(--accent); } .auth-card .auth-input input { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; padding: 0.85rem 0.95rem 0.85rem 0; border: none; background: transparent; font: inherit; font-size: 0.9375rem; color: var(--text); outline: none; margin: 0; } .auth-card .auth-input input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); } .auth-card .auth-input input:-webkit-autofill, .auth-card .auth-input input:-webkit-autofill:hover, .auth-card .auth-input input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 5000s ease-in-out 0s; } [data-theme="dark"] .auth-card .auth-input input:-webkit-autofill, [data-theme="dark"] .auth-card .auth-input input:-webkit-autofill:hover, [data-theme="dark"] .auth-card .auth-input input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--surface) 80%, var(--bg)) inset; } /* Action button inside input (eye toggle) */ .auth-card .auth-input.auth-input-has-action input { padding-right: 0; } .auth-input-action { display: grid; place-items: center; width: 42px; height: 42px; margin-right: 2px; border: none; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; transition: color var(--transition), background var(--transition); flex-shrink: 0; } .auth-input-action:hover { color: var(--text); background: var(--surface-2); } .auth-input-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .auth-input-action .icon-eye-off { display: none; } .auth-input-action[aria-pressed="true"] .icon-eye { display: none; } .auth-input-action[aria-pressed="true"] .icon-eye-off { display: block; } /* OTP input */ .auth-input-otp { letter-spacing: 0.5em; font-size: 1.25rem !important; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; } /* Field hint (caps lock, helper) */ .auth-field-hint { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.75rem; color: var(--amber, #f59e0b); line-height: 1.3; } .auth-field-hint[hidden] { display: none; } /* Submit button */ .auth-submit { position: relative; width: 100%; padding: 0.9rem 1rem; border: none; border-radius: 12px; background: linear-gradient( 135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #8b5cf6) ); color: #fff; font-weight: 600; font-size: 0.9375rem; cursor: pointer; font-family: inherit; margin-top: 0.2rem; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: filter var(--transition), transform 0.12s ease, box-shadow var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; } .auth-submit:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .auth-submit:active:not(:disabled) { transform: scale(0.985); } .auth-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .auth-submit:disabled { opacity: 0.7; cursor: not-allowed; } .auth-submit-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: authSpin 0.7s linear infinite; display: none; } .auth-submit.is-loading .auth-submit-spinner { display: inline-block; } .auth-submit.is-loading .auth-submit-label { opacity: 0.75; } @keyframes authSpin { to { transform: rotate(360deg); } } /* Ghost (back) button */ .auth-ghost-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: none; padding: 0.35rem 0.25rem; margin-top: -0.2rem; color: var(--muted); font-size: 0.8125rem; font-weight: 500; cursor: pointer; border-radius: 6px; align-self: flex-start; transition: color var(--transition); } .auth-ghost-btn:hover { color: var(--accent); } .auth-ghost-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .auth-link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; } .auth-link-btn:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; } .auth-link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* Error banner */ .auth-err { display: none; align-items: flex-start; gap: 0.5rem; padding: 0.7rem 0.85rem; background: color-mix(in srgb, var(--red) 10%, transparent); border: 1px solid color-mix(in srgb, var(--red) 28%, transparent); color: var(--red); border-radius: 10px; font-size: 0.875rem; line-height: 1.4; margin: 0 0 0.95rem; animation: authErrIn 0.25s ease-out; } .auth-err.show { display: flex; } .auth-err-icon { flex-shrink: 0; margin-top: 2px; } .auth-err-text { flex: 1; min-width: 0; word-break: break-word; } @keyframes authErrIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Footer */ .auth-footer { margin: 1.35rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--muted); text-align: center; line-height: 1.4; } .auth-footer a { color: var(--muted); text-decoration: none; transition: color var(--transition); } .auth-footer a:hover { color: var(--accent); } .auth-footer-sep { margin: 0 0.35rem; opacity: 0.65; } /* Theme toggle button (floating, top-right) */ .auth-theme-btn { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 10; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; display: grid; place-items: center; color: var(--muted); transition: color var(--transition), border-color var(--transition), transform var(--transition); } .auth-theme-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); transform: rotate(-10deg); } .auth-theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .auth-theme-btn .icon-sun { display: none; } [data-theme="dark"] .auth-theme-btn .icon-moon { display: none; } [data-theme="dark"] .auth-theme-btn .icon-sun { display: block; } /* Responsive tweaks */ @media (max-width: 640px) { body.auth-page { align-items: flex-start; padding-top: max(clamp(3.5rem, 10vw, 5rem), env(safe-area-inset-top)); } .auth-card { padding: 1.5rem 1.25rem 1.35rem; border-radius: 16px; } .auth-card h1 { font-size: 1.25rem; } .auth-card .sub { font-size: 0.875rem; margin-bottom: 1.1rem; } .auth-submit { min-height: 52px; font-size: 1rem; } .auth-card .auth-input input { font-size: 16px; padding-top: 0.9rem; padding-bottom: 0.9rem; } .auth-theme-btn { top: 0.75rem; right: 0.75rem; } } @media (max-width: 360px) { .auth-portal-links { flex-direction: column; } .auth-portal-link { width: 100%; } } @media (prefers-reduced-motion: reduce) { .auth-bg-blob, .auth-card-accent { animation: none !important; } .auth-err { animation: none !important; } } @media (max-width: 640px) { .search-wrap { max-width: none; } .user-dropdown-wrap { flex: 0 0 auto; min-width: 0; } .user-trigger { max-width: none; } } ::selection { background: var(--accent-soft); color: var(--text); } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .form-order-grid { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); } @media (min-width: 960px) { .form-order-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 5.5rem auto; } } /* ── Higgs Domino panel ── */ .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; } #panel-seagm { width: min(100%, 1180px); min-width: 0; margin-inline: auto; } .seagm-page-head { align-items: flex-start; gap: 0.75rem 1rem; margin-bottom: 0.75rem; } .seagm-page-head .greeting p { max-width: 48rem; } .seagm-head-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; flex-shrink: 0; } .seagm-head-actions .btn { min-width: 0; min-height: 36px; padding: 0.45rem 0.75rem; } .seagm-overview-grid { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.25fr); gap: 0.8rem; margin-bottom: 0.8rem; align-items: stretch; } [data-theme="dark"] .seagm-overview-grid .panel { background: linear-gradient( 180deg, color-mix(in srgb, var(--surface-2) 72%, transparent), var(--surface) ); } .seagm-balance-meta { margin: 0; font-size: 0.72rem; line-height: 1.35; color: var(--text-muted, #64748b); } .seagm-config-panel, .seagm-products-panel, .seagm-order-panel { border-radius: var(--radius-lg); } .seagm-conn-pill { text-transform: none; white-space: nowrap; } .seagm-credit-value { font-weight: 700; color: var(--green); } .seagm-balance-item { display: flex; flex-direction: column; gap: 0.35rem; } .seagm-balance-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .seagm-balance-refresh { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid var(--border, rgba(148, 163, 184, 0.3)); background: var(--bg-elev, transparent); color: var(--text-secondary, #64748b); cursor: pointer; flex-shrink: 0; transition: background 0.12s ease, color 0.12s ease, transform 0.4s ease; } .seagm-balance-refresh:hover { color: var(--primary, #6366f1); border-color: var(--primary, #6366f1); background: var(--bg-hover, rgba(99, 102, 241, 0.08)); } .seagm-balance-refresh:disabled { opacity: 0.5; cursor: not-allowed; } .seagm-balance-refresh.is-spinning svg { animation: seagm-spin 0.9s linear infinite; } @keyframes seagm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .seagm-balance-badge { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; } .seagm-balance-badge[hidden] { display: none; } .seagm-balance-badge.is-warn { background: rgba(234, 179, 8, 0.12); color: #b45309; border-color: rgba(234, 179, 8, 0.35); } [data-theme="dark"] .seagm-balance-badge.is-warn { color: #fde68a; background: rgba(234, 179, 8, 0.18); } .seagm-balance-badge.is-stale { background: rgba(239, 68, 68, 0.12); color: #b91c1c; border-color: rgba(239, 68, 68, 0.32); } [data-theme="dark"] .seagm-balance-badge.is-stale { color: #fecaca; background: rgba(239, 68, 68, 0.2); } .seagm-balance-badge.is-ok { background: rgba(16, 185, 129, 0.12); color: #047857; border-color: rgba(16, 185, 129, 0.32); } [data-theme="dark"] .seagm-balance-badge.is-ok { color: #6ee7b7; background: rgba(16, 185, 129, 0.18); } .seagm-balance-updated { font-size: 0.7rem; color: var(--text-muted, #94a3b8); font-variant-numeric: tabular-nums; } .seagm-balance-updated[hidden] { display: none; } .seagm-config-note { margin: 0.7rem 0 0; font-size: 0.74rem; line-height: 1.45; } .seagm-config-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .seagm-close-btn { color: var(--red); } .seagm-products-list { min-height: 100%; font-size: 0.8rem; } .seagm-products-panel .panel-head { margin-bottom: 0.65rem; } .seagm-products-panel .muted, .seagm-order-result, #seagm-products-list p { line-height: 1.6; } .seagm-products-status { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center; margin-bottom: 0.6rem; font-size: 0.72rem; color: var(--muted); } .seagm-products-badge, .seagm-products-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0.18rem 0.55rem; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 88%, transparent); color: var(--text); font-weight: 600; } .seagm-products-badge { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 42%, var(--border)); } .seagm-products-chip.ready { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, var(--border)); } .seagm-products-chip.syncing { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 35%, var(--border)); } .seagm-products-chip.warning { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, var(--border)); } .seagm-products-note { margin-top: 0.8rem; } .seagm-products-empty { padding: 1rem 0; } .seagm-order-panel { margin-bottom: 0.8rem; } .seagm-order-grid { grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.72fr) 78px 150px; gap: 0.65rem; margin-bottom: 0; } .seagm-order-grid .field { align-self: end; } .seagm-order-qty input { text-align: center; } .seagm-order-submit .btn { width: 100%; min-height: 38px; } .seagm-order-result { margin-top: 0.65rem; font-size: 0.8rem; min-height: 1.4em; } .seagm-history-panel { border-radius: var(--radius-lg); } .seagm-history-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.42fr) 128px auto; align-items: end; gap: 0.55rem; } .seagm-history-toolbar .field { margin-bottom: 0; } .seagm-history-search { min-width: 0; } .seagm-history-filter { min-width: 0; } .seagm-history-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: flex-end; align-items: center; } .seagm-history-meta { display: flex; justify-content: flex-start; gap: 0.4rem 0.8rem; align-items: center; flex-wrap: wrap; margin: 0.75rem 0 0.6rem; font-size: 0.78rem; } .seagm-history-table-wrap { margin-top: 0; } .seagm-history-table { width: 100%; min-width: 0; table-layout: fixed; } .seagm-orders-empty { text-align: center; padding: 1.4rem; } .seagm-history-table th, .seagm-history-table td { padding: 0.55rem 0.65rem; vertical-align: top; } .seagm-history-table th { font-size: 0.68rem; } .seagm-history-table td { font-size: 0.78rem; line-height: 1.35; } .seagm-history-table th:nth-child(1), .seagm-history-table td:nth-child(1) { width: 14%; } .seagm-history-table th:nth-child(2), .seagm-history-table td:nth-child(2) { width: 34%; } .seagm-history-table th:nth-child(3), .seagm-history-table td:nth-child(3) { width: 13%; } .seagm-history-table th:nth-child(4), .seagm-history-table td:nth-child(4) { width: 12%; } .seagm-history-table th:nth-child(5), .seagm-history-table td:nth-child(5) { width: 13%; } .seagm-history-table th:nth-child(6), .seagm-history-table td:nth-child(6) { width: 14%; } .seagm-order-code { display: inline-flex; max-width: 100%; padding: 0.22rem 0.45rem; border-radius: 6px; background: color-mix(in srgb, var(--surface-2) 75%, transparent); border: 1px solid var(--border); font-size: 0.72rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seagm-order-summary { display: grid; gap: 0.18rem; min-width: 0; } .seagm-order-title { font-weight: 600; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; } .seagm-order-raw { color: var(--muted); font-size: 0.72rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seagm-amount { font-weight: 700; color: var(--text); white-space: nowrap; } .seagm-userid { font-weight: 600; color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seagm-pill { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; padding: 0.22rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: capitalize; letter-spacing: 0.01em; white-space: nowrap; } .seagm-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .seagm-pill.success { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); } .seagm-pill.processing { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); } .seagm-pill.stale { background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); } .seagm-pill.refunded { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); } .seagm-pill.failed { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } .seagm-pill.unknown { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); } .seagm-products-list table { width: 100%; min-width: 0; table-layout: fixed; } .seagm-products-table th, .seagm-products-table td { padding: 0.5rem 0.6rem; vertical-align: top; } .seagm-products-table th { font-size: 0.68rem; } .seagm-products-table td { font-size: 0.78rem; line-height: 1.35; } .seagm-products-table th:nth-child(1), .seagm-products-table td:nth-child(1) { width: 18%; } .seagm-products-table th:nth-child(2), .seagm-products-table td:nth-child(2) { width: 40%; } .seagm-products-table th:nth-child(3), .seagm-products-table td:nth-child(3) { width: 24%; } .seagm-products-table th:nth-child(4), .seagm-products-table td:nth-child(4) { width: 18%; } .seagm-products-table .sku-text, .seagm-product-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seagm-products-list .table-wrap, .seagm-products-panel .table-wrap { margin-top: 0.5rem; } @media (max-width: 1200px) { .seagm-order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .higgs-app-login-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seagm-order-submit { grid-column: 1 / -1; } .seagm-products-status { gap: 0.45rem 0.55rem; } .seagm-history-toolbar { grid-template-columns: minmax(0, 1fr) minmax(150px, 0.5fr) 128px; } .seagm-history-actions { grid-column: 1 / -1; width: auto; justify-content: flex-start; } } @media (max-width: 1080px) { .seagm-overview-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .seagm-head-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .seagm-head-actions .btn { width: 100%; justify-content: center; } .higgs-config-grid { grid-template-columns: 1fr; } .seagm-order-grid { grid-template-columns: 1fr; } .higgs-app-login-form { grid-template-columns: 1fr; } .higgs-app-auth-grid, .higgs-app-session-meta { grid-template-columns: 1fr; } .higgs-app-session-status { grid-column: auto; } .higgs-app-quick-stock-grid, .higgs-app-limit-grid { grid-template-columns: 1fr; } .higgs-config-item { min-height: 0; } .seagm-order-submit, .seagm-order-submit .btn { width: 100%; } .seagm-history-search, .seagm-history-filter { max-width: none; } .seagm-history-toolbar { grid-template-columns: 1fr; } .seagm-history-actions { justify-content: stretch; } .seagm-history-actions .btn { flex: 1 1 auto; justify-content: center; } .higgs-app-password-wrap { flex-direction: column; align-items: stretch; } .higgs-app-password-wrap .btn, .higgs-app-field-actions .btn { width: 100%; justify-content: center; } .higgs-app-accounts-controls { display: grid; grid-template-columns: 1fr; } .higgs-app-account-manager, .higgs-app-single-form { grid-template-columns: 1fr; } .higgs-app-accounts-controls .btn, .higgs-app-single-form .btn, .higgs-app-import-actions .btn, .higgs-app-realtime-toggle, .higgs-app-interval-wrap { width: 100%; justify-content: center; } } @media (max-width: 520px) { .seagm-head-actions { grid-template-columns: 1fr; } .higgs-status-bar { align-items: flex-start; padding: 0.75rem 0.9rem; } .seagm-config-actions { flex-direction: column; } .seagm-config-actions .btn { width: 100%; justify-content: center; } } .speed-badge { display: inline-flex; align-items: center; gap: 2px; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .speed-fast { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); } .speed-mid { background: color-mix(in srgb, var(--yellow) 15%, transparent); color: var(--yellow); } .speed-slow { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } /* ══════════════════════════════════════════════════════ ENHANCED: Panel transitions & animations ══════════════════════════════════════════════════════ */ .content-inner > section { animation: panel-enter 0.3s var(--ease) both; } .content-inner > section.hidden { display: none !important; animation: none; } @keyframes panel-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════ ENHANCED: Skeleton loading ══════════════════════════════════════════════════════ */ .skeleton { background: linear-gradient( 90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-xs); } .skeleton-line { height: 14px; margin-bottom: 8px; border-radius: 4px; } .skeleton-line.w75 { width: 75%; } .skeleton-line.w50 { width: 50%; } .skeleton-line.w25 { width: 25%; } .skeleton-card { height: 156px; border-radius: var(--radius); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ══════════════════════════════════════════════════════ ENHANCED: Notification bell ══════════════════════════════════════════════════════ */ .notif-wrap { position: relative; } .notif-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; transform: scale(0); transition: transform 0.2s var(--ease); box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4); z-index: 2; } .notif-badge.visible { transform: scale(1); } .notif-badge.pulse { animation: notif-pulse 2s ease-in-out infinite; } @keyframes notif-pulse { 0%, 100% { box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 2px 12px rgba(220, 38, 38, 0.6); } } .notif-dropdown { position: absolute; top: calc(100% + 10px); right: -40px; width: 380px; max-height: 480px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); z-index: 55; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(0.98); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .notif-dropdown.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .notif-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; } .notif-header-title { font-weight: 700; font-size: 0.9375rem; } .notif-mark-read { font-size: 0.75rem; color: var(--accent); cursor: pointer; border: none; background: none; font: inherit; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: var(--radius-xs); transition: background var(--transition-fast); } .notif-mark-read:hover { background: var(--accent-soft); } .notif-item { display: flex; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--hairline); transition: background var(--transition-fast); cursor: default; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--surface-2); } .notif-item.unread { background: color-mix(in srgb, var(--accent) 4%, transparent); } .notif-item--sensitive-permission { background: color-mix(in srgb, var(--amber) 9%, transparent); } .notif-item--sensitive-permission.unread::before { background: var(--amber); } .notif-item.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: 0 2px 2px 0; } .notif-item { position: relative; } .notif-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; } .notif-icon.success { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); } .notif-icon.error { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } .notif-icon.warning { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); } .notif-icon.info { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); } .notif-body { flex: 1; min-width: 0; } .notif-label { display: inline-flex; width: fit-content; margin-bottom: 0.26rem; padding: 0.12rem 0.42rem; border: 1px solid var(--border); border-radius: 7px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase; } .notif-label--sensitive { border-color: color-mix(in srgb, var(--amber) 34%, transparent); background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); } .notif-text { font-size: 0.8125rem; line-height: 1.45; color: var(--text); } .notif-text strong { font-weight: 600; } .notif-time { font-size: 0.6875rem; color: var(--muted-2); margin-top: 0.2rem; } .notif-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: 0.875rem; } .notif-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5; } @media (max-width: 480px) { .notif-dropdown { right: -10px; width: calc(100vw - 1.5rem); max-width: 380px; } } /* ══════════════════════════════════════════════════════ ENHANCED: Activity / Audit Log ══════════════════════════════════════════════════════ */ .activity-feed { display: flex; flex-direction: column; } .activity-item { display: flex; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); position: relative; } .activity-item:last-child { border-bottom: none; } .activity-dot-col { display: flex; flex-direction: column; align-items: center; gap: 0; flex-shrink: 0; width: 24px; } .activity-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .activity-dot.green { background: var(--green); box-shadow: 0 0 6px color-mix(in srgb, var(--green) 50%, transparent); } .activity-dot.red { background: var(--red); box-shadow: 0 0 6px color-mix(in srgb, var(--red) 50%, transparent); } .activity-dot.blue { background: var(--blue); box-shadow: 0 0 6px color-mix(in srgb, var(--blue) 50%, transparent); } .activity-dot.amber { background: var(--amber); box-shadow: 0 0 6px color-mix(in srgb, var(--amber) 50%, transparent); } .activity-dot.purple { background: var(--purple); box-shadow: 0 0 6px color-mix(in srgb, var(--purple) 50%, transparent); } .activity-line { flex: 1; width: 2px; background: var(--border); margin-top: 4px; } .activity-content { flex: 1; min-width: 0; } .activity-title { font-size: 0.8125rem; font-weight: 500; color: var(--text); line-height: 1.45; } .activity-title strong { font-weight: 600; } .activity-meta { display: flex; gap: 0.65rem; align-items: center; margin-top: 0.2rem; flex-wrap: wrap; } .activity-time { font-size: 0.6875rem; color: var(--muted-2); } .activity-tag { font-size: 0.625rem; font-weight: 600; padding: 0.12rem 0.4rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; } .activity-tag.order { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); } .activity-tag.product { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); } .activity-tag.user { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); } .activity-tag.system { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); } .activity-tag.error { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } /* ══════════════════════════════════════════════════════ ENHANCED: Better empty states ══════════════════════════════════════════════════════ */ .empty-state { text-align: center; padding: 3rem 1.5rem !important; color: var(--muted) !important; } .empty-state-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 16px; background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); display: grid; place-items: center; color: var(--muted-2); font-size: 1.5rem; } .empty-state-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.35rem; } .empty-state-desc { font-size: 0.8125rem; line-height: 1.5; max-width: 36ch; margin: 0 auto; } /* ══════════════════════════════════════════════════════ ENHANCED: Better toast notifications ══════════════════════════════════════════════════════ */ .toast { position: fixed; bottom: max(1.25rem, env(safe-area-inset-bottom)); right: max(1.25rem, env(safe-area-inset-right)); left: auto; max-width: min(400px, calc(100vw - 2rem)); padding: 0.85rem 1.15rem; background: var(--surface); border: 1px solid var(--border-strong); color: var(--red); border-radius: var(--radius-md); font-size: 0.875rem; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); z-index: 2147483000; display: none; line-height: 1.4; backdrop-filter: none; -webkit-backdrop-filter: none; } .toast.show { display: flex; align-items: center; gap: 0.65rem; animation: toast-in 0.35s var(--ease); } .toast.toast-ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 28%, transparent); } /* ══════════════════════════════════════════════════════ ENHANCED: Welcome / greeting ══════════════════════════════════════════════════════ */ .greeting h1 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); } .greeting p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.9375rem; max-width: 58ch; line-height: 1.55; } /* ══════════════════════════════════════════════════════ ENHANCED: Better panels ══════════════════════════════════════════════════════ */ .panel { background: var(--surface); border-radius: var(--radius-md); padding: 1.35rem 1.4rem; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), border-color var(--transition); } .panel:hover { box-shadow: var(--shadow); } /* ══════════════════════════════════════════════════════ ENHANCED: Better buttons ══════════════════════════════════════════════════════ */ .btn-primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 1px 3px rgba(13, 148, 136, 0.2), 0 1px 2px rgba(13, 148, 136, 0.12); } [data-theme="dark"] .btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 2px 10px rgba(0, 0, 0, 0.35); } .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25); } /* ══════════════════════════════════════════════════════ ENHANCED: Better search ══════════════════════════════════════════════════════ */ .search-wrap input { width: 100%; padding: 0.72rem 1rem 0.72rem 2.65rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font: inherit; font-size: 0.875rem; color: var(--text); outline: none; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); } /* ══════════════════════════════════════════════════════ ENHANCED: Better table styling ══════════════════════════════════════════════════════ */ .table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); -webkit-overflow-scrolling: touch; background: var(--surface); } th { text-align: left; padding: 0.75rem 1.1rem; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); } tbody tr { transition: background var(--transition-fast); } tbody tr:hover td { background: color-mix(in srgb, var(--accent) 3%, transparent); } /* ══════════════════════════════════════════════════════ ENHANCED: Quick stats bar on overview ══════════════════════════════════════════════════════ */ .quick-stats { display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; } .quick-stat { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8125rem; min-width: 120px; } .quick-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .quick-stat-value { font-weight: 700; color: var(--text); } .quick-stat-label { color: var(--muted); font-size: 0.75rem; } /* ══════════════════════════════════════════════════════ ENHANCED: Badge/pill improvements ══════════════════════════════════════════════════════ */ .role-pill { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.22rem 0.55rem; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: inline-block; } .pill-status { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; text-transform: capitalize; letter-spacing: 0; } .pill-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ══════════════════════════════════════════════════════ ENHANCED: Status chip improvements ══════════════════════════════════════════════════════ */ .status-chip { border-radius: var(--radius-md); padding: 0.65rem 0.85rem; cursor: pointer; text-align: left; border: 1px solid var(--border); transition: transform 0.15s ease, box-shadow var(--transition), border-color var(--transition), background var(--transition); background: var(--surface); box-shadow: var(--shadow-sm); font: inherit; color: inherit; position: relative; overflow: hidden; } .status-chip::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: currentColor; opacity: 0; transition: opacity var(--transition); } .status-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .status-chip.active { border-color: currentColor; box-shadow: var(--shadow); background: var(--surface-2); } .status-chip.active::after { opacity: 1; } /* ══════════════════════════════════════════════════════ ENHANCED: Better dialog/modal ══════════════════════════════════════════════════════ */ dialog.modal { border: none; border-radius: var(--radius-lg); padding: 1.75rem; max-width: 480px; width: calc(100% - 2rem); background: var(--surface); color: var(--text); box-shadow: var(--shadow-modal); } dialog.modal::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); } dialog.modal h3 { margin: 0 0 1.25rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; } /* ══════════════════════════════════════════════════════ ENHANCED: Better bar chart ══════════════════════════════════════════════════════ */ .bar { width: 100%; max-width: 44px; border-radius: 8px 8px 5px 5px; background: var(--accent-gradient); min-height: 4px; transition: height 0.5s var(--ease); position: relative; } .bar:hover { filter: brightness(1.1); } /* ══════════════════════════════════════════════════════ ENHANCED: Improved drawer ══════════════════════════════════════════════════════ */ .drawer { position: fixed; top: 0; right: 0; width: min(420px, 100%); height: 100%; height: 100dvh; background: var(--surface); z-index: 91; transform: translateX(100%); transition: transform 0.3s var(--ease); border-left: 1px solid var(--border); padding: 1.5rem 1.35rem; padding-top: max(1.5rem, env(safe-area-inset-top)); box-shadow: var(--shadow-modal); overflow-y: auto; } /* ══════════════════════════════════════════════════════ ENHANCED: Responsive table mobile ══════════════════════════════════════════════════════ */ @media (max-width: 640px) { .topbar { height: auto; min-height: 0; padding: 0.55rem 0.85rem; gap: 0.4rem; justify-content: space-between; } .topbar-mobile-brand-group { display: flex; gap: 0.5rem; margin-right: 0; justify-content: flex-start; align-items: center; min-width: 0; flex: 1 1 auto; overflow: hidden; } .topbar-brand .brand-mark { width: 26px; height: 26px; } .topbar-brand .brand-mark svg { width: 22px; height: 22px; } .topbar-brand .brand-wordmark { max-width: min(6.5rem, 28vw); } .system-status-trigger--inline .system-status-dots { gap: 0.3rem; } .system-status-trigger--inline .system-status-dot { width: 5px; height: 5px; } .topbar-actions { gap: 0.35rem; justify-content: flex-end; } .user-dropdown { right: 0; left: auto; min-width: 0; width: min(280px, calc(100vw - 1rem)); max-width: calc(100vw - 1rem); } .content { padding-left: clamp(0.8rem, 3vw, 1.1rem); padding-right: clamp(0.8rem, 3vw, 1.1rem); } } /* ══════════════════════════════════════════════════════ ENHANCED: Mobile bottom nav ══════════════════════════════════════════════════════ */ .mobile-nav-item.active { color: var(--accent); position: relative; } .mobile-nav-item.active::after { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--accent); border-radius: 0 0 2px 2px; } .mobile-nav-item.active svg { opacity: 1; } /* ══════════════════════════════════════════════════════ ENHANCED: Panel transitions & animations ══════════════════════════════════════════════════════ */ .content-inner > section { animation: panel-enter 0.3s var(--ease) both; } .content-inner > section.hidden { display: none !important; animation: none; } @keyframes panel-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════ ENHANCED: Skeleton loading ══════════════════════════════════════════════════════ */ .skeleton { background: linear-gradient( 90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-xs); } .skeleton-line { height: 14px; margin-bottom: 8px; border-radius: 4px; } .skeleton-line.w75 { width: 75%; } .skeleton-line.w50 { width: 50%; } .skeleton-line.w25 { width: 25%; } .skeleton-card { height: 156px; border-radius: var(--radius); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ══════════════════════════════════════════════════════ ENHANCED: Notification bell ══════════════════════════════════════════════════════ */ .notif-wrap { position: relative; } .notif-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; transform: scale(0); transition: transform 0.2s var(--ease); box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4); z-index: 2; } .notif-badge.visible { transform: scale(1); } .notif-badge.pulse { animation: notif-pulse 2s ease-in-out infinite; } @keyframes notif-pulse { 0%, 100% { box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 2px 12px rgba(220, 38, 38, 0.6); } } .notif-dropdown { position: absolute; top: calc(100% + 10px); right: -40px; width: 380px; max-height: 480px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); z-index: 55; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(0.98); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .notif-dropdown.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .notif-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; } .notif-header-title { font-weight: 700; font-size: 0.9375rem; } .notif-mark-read { font-size: 0.75rem; color: var(--accent); cursor: pointer; border: none; background: none; font: inherit; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: var(--radius-xs); transition: background var(--transition-fast); } .notif-mark-read:hover { background: var(--accent-soft); } .notif-item { display: flex; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--hairline); transition: background var(--transition-fast); cursor: default; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--surface-2); } .notif-item.unread { background: color-mix(in srgb, var(--accent) 4%, transparent); } .notif-item.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: 0 2px 2px 0; } .notif-item { position: relative; } .notif-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; } .notif-icon.success { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); } .notif-icon.error { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } .notif-icon.warning { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); } .notif-icon.info { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); } .notif-body { flex: 1; min-width: 0; } .notif-text { font-size: 0.8125rem; line-height: 1.45; color: var(--text); } .notif-text strong { font-weight: 600; } .notif-time { font-size: 0.6875rem; color: var(--muted-2); margin-top: 0.2rem; } .notif-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: 0.875rem; } .notif-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5; } @media (max-width: 480px) { .notif-dropdown { right: -10px; width: calc(100vw - 1.5rem); max-width: 380px; } } /* ══════════════════════════════════════════════════════ ENHANCED: Activity / Audit Log ══════════════════════════════════════════════════════ */ .activity-feed { display: flex; flex-direction: column; } .activity-item { display: flex; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); position: relative; } .activity-item:last-child { border-bottom: none; } .activity-dot-col { display: flex; flex-direction: column; align-items: center; gap: 0; flex-shrink: 0; width: 24px; } .activity-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .activity-dot.green { background: var(--green); box-shadow: 0 0 6px color-mix(in srgb, var(--green) 50%, transparent); } .activity-dot.red { background: var(--red); box-shadow: 0 0 6px color-mix(in srgb, var(--red) 50%, transparent); } .activity-dot.blue { background: var(--blue); box-shadow: 0 0 6px color-mix(in srgb, var(--blue) 50%, transparent); } .activity-dot.amber { background: var(--amber); box-shadow: 0 0 6px color-mix(in srgb, var(--amber) 50%, transparent); } .activity-dot.purple { background: var(--purple); box-shadow: 0 0 6px color-mix(in srgb, var(--purple) 50%, transparent); } .activity-line { flex: 1; width: 2px; background: var(--border); margin-top: 4px; } .activity-content { flex: 1; min-width: 0; } .activity-title { font-size: 0.8125rem; font-weight: 500; color: var(--text); line-height: 1.45; } .activity-title strong { font-weight: 600; } .activity-meta { display: flex; gap: 0.65rem; align-items: center; margin-top: 0.2rem; flex-wrap: wrap; } .activity-time { font-size: 0.6875rem; color: var(--muted-2); } .activity-tag { font-size: 0.625rem; font-weight: 600; padding: 0.12rem 0.4rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; } .activity-tag.order { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); } .activity-tag.product { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); } .activity-tag.user { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); } .activity-tag.system { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); } .activity-tag.error { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } /* ══════════════════════════════════════════════════════ ENHANCED: Better empty states ══════════════════════════════════════════════════════ */ .empty-state { text-align: center; padding: 3rem 1.5rem !important; color: var(--muted) !important; } .empty-state-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 16px; background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); display: grid; place-items: center; color: var(--muted-2); font-size: 1.5rem; } .empty-state-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.35rem; } .empty-state-desc { font-size: 0.8125rem; line-height: 1.5; max-width: 36ch; margin: 0 auto; } /* ══════════════════════════════════════════════════════ ENHANCED: Better toast notifications ══════════════════════════════════════════════════════ */ .toast { position: fixed; bottom: max(1.25rem, env(safe-area-inset-bottom)); right: max(1.25rem, env(safe-area-inset-right)); left: auto; max-width: min(400px, calc(100vw - 2rem)); padding: 0.85rem 1.15rem; background: var(--surface); border: 1px solid var(--border-strong); color: var(--red); border-radius: var(--radius-md); font-size: 0.875rem; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); z-index: 2147483000; display: none; line-height: 1.4; backdrop-filter: none; -webkit-backdrop-filter: none; } .toast.show { display: flex; align-items: center; gap: 0.65rem; animation: toast-in 0.35s var(--ease); } .toast.toast-ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 28%, transparent); } /* ══════════════════════════════════════════════════════ ENHANCED: Welcome / greeting ══════════════════════════════════════════════════════ */ .greeting h1 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); } .greeting p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.9375rem; max-width: 58ch; line-height: 1.55; } /* ══════════════════════════════════════════════════════ ENHANCED: Better panels ══════════════════════════════════════════════════════ */ .panel { background: var(--surface); border-radius: var(--radius-md); padding: 1.35rem 1.4rem; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), border-color var(--transition); } .panel:hover { box-shadow: var(--shadow); } /* ══════════════════════════════════════════════════════ ENHANCED: Better buttons ══════════════════════════════════════════════════════ */ .btn-primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 1px 3px rgba(13, 148, 136, 0.2), 0 1px 2px rgba(13, 148, 136, 0.12); } [data-theme="dark"] .btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 2px 10px rgba(0, 0, 0, 0.35); } .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25); } /* ══════════════════════════════════════════════════════ ENHANCED: Better search ══════════════════════════════════════════════════════ */ .search-wrap input { width: 100%; padding: 0.72rem 1rem 0.72rem 2.65rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font: inherit; font-size: 0.875rem; color: var(--text); outline: none; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); } /* ══════════════════════════════════════════════════════ ENHANCED: Better table styling ══════════════════════════════════════════════════════ */ .table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); -webkit-overflow-scrolling: touch; background: var(--surface); } th { text-align: left; padding: 0.75rem 1.1rem; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); } tbody tr { transition: background var(--transition-fast); } tbody tr:hover td { background: color-mix(in srgb, var(--accent) 3%, transparent); } /* ══════════════════════════════════════════════════════ ENHANCED: Quick stats bar on overview ══════════════════════════════════════════════════════ */ .quick-stats { display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; } .quick-stat { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8125rem; min-width: 120px; } .quick-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .quick-stat-value { font-weight: 700; color: var(--text); } .quick-stat-label { color: var(--muted); font-size: 0.75rem; } /* ══════════════════════════════════════════════════════ ENHANCED: Badge/pill improvements ══════════════════════════════════════════════════════ */ .role-pill { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.22rem 0.55rem; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: inline-block; } .pill-status { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; text-transform: capitalize; letter-spacing: 0; } .pill-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ══════════════════════════════════════════════════════ ENHANCED: Status chip improvements ══════════════════════════════════════════════════════ */ .status-chip { border-radius: var(--radius-md); padding: 0.65rem 0.85rem; cursor: pointer; text-align: left; border: 1px solid var(--border); transition: transform 0.15s ease, box-shadow var(--transition), border-color var(--transition), background var(--transition); background: var(--surface); box-shadow: var(--shadow-sm); font: inherit; color: inherit; position: relative; overflow: hidden; } .status-chip::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: currentColor; opacity: 0; transition: opacity var(--transition); } .status-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .status-chip.active { border-color: currentColor; box-shadow: var(--shadow); background: var(--surface-2); } .status-chip.active::after { opacity: 1; } /* ══════════════════════════════════════════════════════ ENHANCED: Better dialog/modal ══════════════════════════════════════════════════════ */ dialog.modal { border: none; border-radius: var(--radius-lg); padding: 1.75rem; max-width: 480px; width: calc(100% - 2rem); background: var(--surface); color: var(--text); box-shadow: var(--shadow-modal); } dialog.modal::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); } dialog.modal h3 { margin: 0 0 1.25rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; } /* ══════════════════════════════════════════════════════ ENHANCED: Better bar chart ══════════════════════════════════════════════════════ */ .bar { width: 100%; max-width: 44px; border-radius: 8px 8px 5px 5px; background: var(--accent-gradient); min-height: 4px; transition: height 0.5s var(--ease); position: relative; } .bar:hover { filter: brightness(1.1); } /* ══════════════════════════════════════════════════════ ENHANCED: Improved drawer ══════════════════════════════════════════════════════ */ .drawer { position: fixed; top: 0; right: 0; width: min(420px, 100%); height: 100%; height: 100dvh; background: var(--surface); z-index: 91; transform: translateX(100%); transition: transform 0.3s var(--ease); border-left: 1px solid var(--border); padding: 1.5rem 1.35rem; padding-top: max(1.5rem, env(safe-area-inset-top)); box-shadow: var(--shadow-modal); overflow-y: auto; } /* ═══════════════════════════════════════════════ Analytics Overview Cards ═══════════════════════════════════════════════ */ .ov-period-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; flex: 0 1 auto; min-width: 0; font-family: var(--font); } .ov-period-tabs[data-loading="true"] { opacity: 0.9; } .ov-period-tab { flex: 0 0 auto; min-height: 2.2rem; min-width: 0; padding: 0.4rem 0.85rem; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface) 72%, transparent); font-family: var(--font); font-size: 0.8rem; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 8px; transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; } .ov-period-tab:focus { outline: none; } .ov-period-tab:hover { color: var(--text); background: color-mix(in srgb, var(--surface-3) 88%, white 12%); border-color: color-mix(in srgb, var(--primary) 18%, var(--hairline)); } .ov-period-tab:focus-visible { color: var(--text); background: color-mix(in srgb, var(--surface-3) 88%, white 12%); border-color: color-mix(in srgb, var(--primary) 48%, var(--hairline)); box-shadow: 0 0 0 3px var(--accent-ring); } .ov-period-tab.active { color: #fff; background: var(--primary); font-weight: 600; border-color: color-mix(in srgb, var(--primary) 80%, white 20%); box-shadow: inset 0 0 0 1px color-mix(in srgb, white 18%, transparent); } .ov-period-tab.active:focus-visible { color: #fff; background: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, white 18%, transparent), 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); } .ov-period-tab:disabled { cursor: wait; } .ov-period-meta { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; min-height: 0; font-family: var(--font); font-size: 0.78rem; color: var(--muted); } #ov-period-label { min-width: 0; white-space: normal; overflow-wrap: anywhere; } #ov-period-loading { flex: 0 0 auto; color: var(--text); font-weight: 600; } .ov-date-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.4rem 0.5rem; min-width: 0; padding: 0.45rem 0.55rem; border: 1px solid var(--hairline); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); } .ov-date-range.is-active { border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--hairline)); background: color-mix(in srgb, var(--surface-2) 92%, transparent); } .ov-date-range.is-draft { border-color: color-mix(in srgb, var(--primary) 22%, var(--hairline)); } .ov-date-range.is-ready { border-color: color-mix(in srgb, var(--accent) 42%, var(--hairline)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ring) 72%, transparent); } .ov-date-field { display: grid; gap: 0.22rem; min-width: 0; flex: 0 1 158px; max-width: 170px; } .ov-date-field span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); } .ov-date-field input { width: 100%; min-height: 2.15rem; padding: 0.4rem 0.55rem; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text); font-family: var(--font); font-size: 0.82rem; outline: none; transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); } .ov-date-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); } .ov-date-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: flex-end; justify-content: flex-start; flex: 0 0 auto; min-width: 0; } .ov-date-actions .btn { min-height: 2.15rem; padding: 0.42rem 0.7rem; border-radius: 8px; font-size: 0.8rem; } .page-head.overview-head { align-items: center; gap: 0.55rem 1rem; } .overview-head { align-items: center; } .overview-head .overview-greeting { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; min-width: 0; flex: 1 1 auto; } .overview-head .overview-title { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.2; color: var(--text); letter-spacing: 0; font-family: var(--font); white-space: nowrap; } .overview-tagline { font-family: var(--font); font-size: 0.75rem; font-weight: 500; line-height: 1.2; color: var(--muted); padding: 0.16rem 0.48rem; border-radius: 999px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 72%, transparent); white-space: nowrap; } .overview-head .overview-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin: 0; max-width: none; } .overview-meta > span { display: inline-flex; align-items: center; gap: 0.28rem; min-height: 1.55rem; padding: 0.14rem 0.48rem; border-radius: 999px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 74%, transparent); font-family: var(--font); font-size: 0.72rem; font-weight: 500; color: var(--muted); } .overview-meta strong { color: var(--text); font-weight: 600; } .overview-meta-updated { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.45rem; } .overview-meta-updated-time { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .overview-meta-updated-sep { color: var(--muted-2); font-weight: 700; user-select: none; } .overview-meta-ws { display: inline-flex; align-items: center; gap: 0.28rem; white-space: nowrap; } .overview-actions { display: flex; flex-direction: column; gap: 0.65rem; width: 100%; max-width: 100%; margin: 0; align-items: stretch; padding: 0.8rem 0.9rem; border: 1px solid var(--hairline); border-radius: 12px; background: linear-gradient( 180deg, color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--surface) 96%, transparent) ); } .overview-actions-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.5rem 0.85rem; min-width: 0; } .overview-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.35rem; flex: 0 0 auto; } .overview-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: auto; min-width: 0; min-height: 2.2rem; padding: 0.45rem 0.8rem; line-height: 1.15; white-space: nowrap; border-radius: 8px; } .overview-action-icon { display: block; width: 0.95rem; height: 0.95rem; flex: 0 0 0.95rem; } .ov-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 2px; } .ov-status-online { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); } .analytics-cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1rem; } @media (min-width: 560px) { .analytics-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; } } @media (min-width: 900px) { .analytics-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; } } .ai-insight-panel { margin-bottom: 1.25rem; display: grid; gap: 1.1rem; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #3b82f6 4%), var(--surface)), var(--surface); } .ai-insight-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.95fr); gap: 1rem; align-items: stretch; } .ai-insight-hero-main { display: grid; gap: 0.9rem; min-width: 0; } .ai-insight-kicker, .ai-insight-section-kicker, .ai-insight-target-kicker, .ai-summary-label, .ai-insight-card-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .ai-insight-hero-copy { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .ai-insight-hero-copy .panel-title { font-size: clamp(1.35rem, 2vw, 1.85rem); } .ai-insight-hero-copy .panel-sub { max-width: 44rem; line-height: 1.6; } .ai-insight-hero-badge, .ai-insight-section-note, .ai-insight-pill, .ai-insight-item-badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 1.7rem; padding: 0.18rem 0.65rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; } .ai-insight-hero-badge, .ai-insight-section-note { border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); background: color-mix(in srgb, var(--surface) 85%, #3b82f6 15%); color: var(--text-secondary); } .ai-insight-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .ai-summary-card { display: grid; gap: 0.55rem; min-width: 0; padding: 1rem 1.05rem; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 84%, transparent); box-shadow: var(--shadow-sm); } .ai-summary-card strong { font-size: clamp(1.1rem, 1.8vw, 1.55rem); line-height: 1.15; color: var(--text); overflow-wrap: anywhere; } .ai-summary-sub { font-size: 0.84rem; color: var(--muted); line-height: 1.45; } .ai-summary-card--revenue strong { color: #2563eb; } .ai-summary-card--profit strong { color: #16a34a; } .ai-insight-target-box { display: grid; gap: 0.9rem; align-content: start; min-width: 0; padding: 1rem 1.05rem; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, #6366f1 12%), var(--surface)); box-shadow: var(--shadow); } .ai-insight-target-box-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; } .ai-insight-target-box-head strong { display: block; margin-top: 0.2rem; color: var(--text); font-size: 1rem; line-height: 1.4; } .ai-insight-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; align-items: end; } .ai-insight-field { display: grid; gap: 0.38rem; min-width: 0; } .ai-insight-field input { width: 100%; min-height: 2.9rem; padding: 0.72rem 0.82rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text); font: inherit; outline: none; transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); } .ai-insight-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); } .ai-insight-target-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 0.85rem; min-width: 0; } .ai-insight-target-actions .btn { min-height: 2.9rem; } #ai-target-status { font-size: 0.84rem; line-height: 1.55; max-width: 26rem; } .ai-insight-section { display: grid; gap: 0.8rem; } .ai-insight-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem 1rem; } .ai-insight-section-title { margin: 0.12rem 0 0; font-size: 1rem; line-height: 1.35; color: var(--text); } .ai-insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; } .ai-insight-kpi-wrap { display: flex; flex-direction: column; gap: 0.75rem; } .ai-kpi-row--achievement { width: 100%; } .ai-insight-grid--achievement { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .ai-kpi-row--gap-row { width: 100%; } .ai-insight-grid--gap-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } @media (max-width: 720px) { .ai-insight-grid--achievement, .ai-insight-grid--gap-row { grid-template-columns: 1fr; } } .ai-forecast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .ai-insight-card { display: grid; gap: 0.65rem; min-width: 0; min-height: 196px; padding: 1rem 1.05rem; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 88%, transparent); box-shadow: var(--shadow-sm); } .ai-insight-card-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .ai-insight-card strong { font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.05; color: var(--text); overflow-wrap: anywhere; } .ai-insight-card strong.ai-kpi-hero-value { font-size: clamp(1.5rem, 2.9vw, 2.35rem); line-height: 1.08; letter-spacing: -0.02em; } .ai-insight-card strong.ai-kpi-gap-value { font-size: clamp(0.98rem, 1.55vw, 1.2rem); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; overflow-wrap: normal; } .ai-insight-sub { font-size: 0.84rem; color: var(--muted); line-height: 1.5; } .ai-insight-emphasis { font-size: 0.88rem; line-height: 1.45; color: var(--text-secondary); } .ai-progress-track { position: relative; height: 0.62rem; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--surface) 55%, var(--hairline)); } .ai-progress-track--mini { height: 0.42rem; } .ai-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: inherit; transition: width 0.28s ease; } .ai-progress-fill--revenue { background: linear-gradient(90deg, #2563eb, #60a5fa); } .ai-progress-fill--profit { background: linear-gradient(90deg, #16a34a, #4ade80); } .ai-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; font-size: 0.78rem; color: var(--muted); } .ai-progress-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ai-progress-meta span:last-child { text-align: right; } .ai-gap-meter-track { margin-top: 0.05rem; } .ai-gap-meter-fill { border-radius: inherit; transition: width 0.28s ease, background-color 0.22s ease; } .ai-gap-meter-fill--neutral { background: color-mix(in srgb, var(--muted) 38%, var(--surface-3)); } .ai-gap-meter-fill--good { background: linear-gradient(90deg, #15803d, #4ade80); } .ai-gap-meter-fill--warn { background: linear-gradient(90deg, #b45309, #fbbf24); } .ai-gap-meter-fill--bad { background: linear-gradient(90deg, #b91c1c, #f87171); } .ai-insight-pill { border: 1px solid transparent; color: var(--text-secondary); background: color-mix(in srgb, var(--surface) 88%, transparent); } .ai-insight-pill--good { color: #15803d; background: color-mix(in srgb, #22c55e 14%, var(--surface)); border-color: color-mix(in srgb, #22c55e 26%, transparent); } .ai-insight-pill--warn { color: #b45309; background: color-mix(in srgb, #f59e0b 16%, var(--surface)); border-color: color-mix(in srgb, #f59e0b 26%, transparent); } .ai-insight-pill--bad { color: #b91c1c; background: color-mix(in srgb, #ef4444 14%, var(--surface)); border-color: color-mix(in srgb, #ef4444 24%, transparent); } .ai-insight-pill--neutral { color: var(--muted); background: color-mix(in srgb, var(--surface) 88%, transparent); border-color: color-mix(in srgb, var(--border) 72%, transparent); } .ai-insight-card--progress { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #dbeafe 6%), var(--surface)); } .ai-insight-card--profit { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #dcfce7 6%), var(--surface)); } .ai-insight-card--gap { min-height: 0; padding: 0.82rem 0.95rem; gap: 0.48rem; background: color-mix(in srgb, var(--surface-2) 92%, transparent); } .ai-insight-card--gap.ai-insight-neutral { border-color: color-mix(in srgb, var(--border) 80%, transparent); } .ai-insight-card--gap.ai-insight-good { border-color: color-mix(in srgb, #22c55e 22%, var(--border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--surface) 93%, #dcfce7 7%), var(--surface-2) ); } .ai-insight-card--gap.ai-insight-warn { border-color: color-mix(in srgb, #f59e0b 24%, var(--border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--surface) 93%, #fef3c7 8%), var(--surface-2) ); } .ai-insight-card--gap.ai-insight-bad { border-color: color-mix(in srgb, #ef4444 22%, var(--border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--surface) 92%, #fee2e2 8%), var(--surface-2) ); } .ai-insight-card--gap.ai-insight-bad strong.ai-kpi-gap-value { color: #dc2626; } .ai-insight-card--gap.ai-insight-warn strong.ai-kpi-gap-value { color: #b45309; } .ai-insight-card--gap.ai-insight-good strong.ai-kpi-gap-value { color: #15803d; } .ai-insight-grid--achievement .ai-insight-card--progress { min-height: 208px; padding: 1.05rem 1.1rem; } .ai-insight-card--forecast { min-height: 180px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #d1fae5 7%), var(--surface)); } .ai-insight-card.ai-insight-good { border-color: color-mix(in srgb, #22c55e 24%, var(--border)); } .ai-insight-card.ai-insight-good strong { color: #16a34a; } .ai-insight-card.ai-insight-bad { border-color: color-mix(in srgb, #ef4444 26%, var(--border)); } .ai-insight-card.ai-insight-bad strong { color: #dc2626; } .ai-insight-card.ai-insight-warn { border-color: color-mix(in srgb, #f59e0b 28%, var(--border)); } .ai-insight-card.ai-insight-warn strong { color: #d97706; } .ai-insight-card.ai-insight-neutral strong { color: var(--text); } .ai-insight-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; } .ai-insight-item { display: grid; gap: 0.35rem; min-width: 0; padding: 1rem 1.05rem; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 88%, transparent); box-shadow: var(--shadow-sm); } .ai-insight-item-badge { justify-self: start; min-height: 1.55rem; padding-inline: 0.58rem; } .ai-insight-item strong { color: var(--text); font-size: 0.98rem; line-height: 1.4; } .ai-insight-item-lead { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.52; } .ai-insight-item-sub { color: var(--muted); font-size: 0.79rem; line-height: 1.5; } .ai-insight-item--good { border-color: color-mix(in srgb, #22c55e 24%, var(--border)); } .ai-insight-item--good .ai-insight-item-badge { color: #15803d; background: color-mix(in srgb, #22c55e 14%, var(--surface)); } .ai-insight-item--warn { border-color: color-mix(in srgb, #f59e0b 24%, var(--border)); } .ai-insight-item--warn .ai-insight-item-badge { color: #b45309; background: color-mix(in srgb, #f59e0b 16%, var(--surface)); } .ai-insight-item--bad { border-color: color-mix(in srgb, #ef4444 24%, var(--border)); } .ai-insight-item--bad .ai-insight-item-badge { color: #b91c1c; background: color-mix(in srgb, #ef4444 14%, var(--surface)); } .ai-insight-item--neutral .ai-insight-item-badge { color: var(--muted); background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); } .a-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem 1rem 0.55rem; display: flex; flex-direction: column; position: relative; overflow: hidden; min-height: 168px; transition: transform 0.15s, box-shadow 0.15s; } .a-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); } [data-theme="dark"] .a-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); } .a-card-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; gap: 0.65rem 0.65rem; padding-right: 4.15rem; min-width: 0; margin-bottom: 0.7rem; } .a-card-top > :first-child { display: grid; align-content: start; gap: 0.2rem; min-width: 0; } .a-card-label { font-family: var(--font); font-size: clamp(0.65rem, 1.15vw, 0.75rem); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25; margin-bottom: 0.3rem; text-wrap: balance; } .a-card-value { font-family: var(--font); font-size: clamp(1.2rem, 2.1vw, 1.75rem); font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: normal; max-width: none; min-width: 0; } .a-card-badge { position: static; font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap; align-self: flex-start; justify-self: end; } .a-badge-up { background: rgba(34, 197, 94, 0.15); color: #16a34a; } .a-badge-down { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .a-badge-flat { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); } [data-theme="dark"] .a-badge-up { background: rgba(34, 197, 94, 0.2); color: #4ade80; } [data-theme="dark"] .a-badge-down { background: rgba(239, 68, 68, 0.2); color: #f87171; } [data-theme="dark"] .a-badge-flat { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--text-secondary); } .a-card-icon { position: absolute; top: 0; right: 0; width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ic) 15%, transparent); color: var(--ic, var(--primary)); flex-shrink: 0; } [data-theme="dark"] .a-card-icon { background: color-mix(in srgb, var(--ic) 20%, transparent); } .money-value-group { display: inline-flex; align-items: baseline; gap: 0.34rem; flex-wrap: nowrap; min-width: 0; max-width: 100%; white-space: nowrap; } .money-currency { flex: 0 0 auto; font-size: 0.84em; font-weight: 700; line-height: 1; } .money-amount { min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; } .a-card-spark { width: 100%; height: 32px; margin-top: auto; padding-top: 0.9rem; display: block; } .a-card-live { display: flex; align-items: center; gap: 0.3rem; font-size: 0.6875rem; font-weight: 500; color: var(--muted); padding-top: 0.45rem; } .a-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: livePulse 2s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } #ac-transactions .a-card-spark path { stroke: #a78bfa; } #ac-transactions .a-card-spark .spark-fill { fill: url(#grad-purple); } #ac-users .a-card-spark path { stroke: #34d399; } #ac-users .a-card-spark .spark-fill { fill: url(#grad-green); } #ac-revenue .a-card-spark path { stroke: #fb923c; } #ac-revenue .a-card-spark .spark-fill { fill: url(#grad-orange); } #ac-success .a-card-spark path { stroke: #60a5fa; } #ac-success .a-card-spark .spark-fill { fill: url(#grad-blue); } #ac-profit .a-card-spark path { stroke: #4ade80; } #ac-profit .a-card-spark .spark-fill { fill: url(#grad-lime); } @media (max-width: 1080px) { .overview-action-buttons { justify-content: flex-start; } .ai-insight-hero { grid-template-columns: 1fr; } .ai-insight-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-insight-target-actions { grid-column: 1 / -1; } } @media (max-width: 768px) { .ov-period-tab { min-height: 2.6rem; padding: 0.45rem 0.35rem; font-size: 0.76rem; flex-basis: calc(50% - 0.225rem); } .ov-date-range { flex-direction: column; align-items: stretch; } .ov-date-field { flex: 1 1 auto; max-width: none; } .ov-date-actions { margin-left: 0; justify-content: stretch; width: 100%; } .ov-date-actions .btn { flex: 1 1 auto; justify-content: center; } .overview-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .overview-action-btn { width: 100%; min-width: 0; justify-content: center; } .ai-insight-hero-copy, .ai-insight-section-head, .ai-insight-target-box-head { flex-direction: column; align-items: flex-start; } .ai-insight-summary-grid, .ai-insight-targets { grid-template-columns: 1fr; } .ai-insight-grid--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-forecast-grid, .ai-insight-list { grid-template-columns: 1fr; } .ai-insight-target-actions .btn { width: 100%; justify-content: center; } } @media (max-width: 560px) { .ai-insight-summary-grid, .ai-insight-grid--kpi, .ai-forecast-grid, .ai-insight-list { grid-template-columns: 1fr; } .overview-head .overview-greeting { gap: 0.32rem 0.42rem; } .overview-head .overview-title { white-space: normal; } .overview-tagline { white-space: normal; } .overview-head .overview-meta > span { max-width: 100%; } .ov-period-meta { flex-direction: column; align-items: flex-start; gap: 0.2rem; } .ov-period-tab { flex-basis: 100%; } .ov-date-actions { width: 100%; } .ov-date-actions .btn { flex: 1 1 100%; } .overview-action-buttons { grid-template-columns: 1fr; } .a-card { min-height: 0; } .a-card-top { grid-template-columns: minmax(0, 1fr) auto; } .a-card-badge { grid-column: 1; justify-self: start; } .a-card-icon { grid-column: 2; grid-row: 1 / span 2; } .ai-insight-grid { grid-template-columns: 1fr; } } @media (max-width: 420px) { .overview-actions { padding: 0.8rem; } .a-card-value { font-size: 1.35rem; } } /* ═══════════════════════════════════════════════ Transaction Search & Filter Toolbar ═══════════════════════════════════════════════ */ .table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; } .table-toolbar--orders { justify-content: flex-start; align-items: center; gap: 0.5rem 0.55rem; } .table-toolbar--orders .table-toolbar-count { flex: 0 0 auto; font-weight: 600; font-size: 0.8125rem; white-space: nowrap; } @media (max-width: 768px) { .table-toolbar--orders { flex-direction: column; align-items: stretch; } .table-toolbar--orders .table-toolbar-count { align-self: flex-start; } .tx-toolbar-right { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0.5rem; } .tx-search-wrap { grid-column: 1 / -1; width: 100%; } .tx-search-input { width: 100%; flex: 1; } .tx-filter-select { width: 100%; max-width: none; } .tx-filter-date-preset { flex: 1 1 auto; min-width: 0; } .tx-date-range { width: 100%; grid-column: 1 / -1; flex-wrap: wrap; box-sizing: border-box; } .tx-date-filter-group { grid-column: 1 / -1; flex: none; max-width: none; } .tx-date-filter-main { flex-direction: column; align-items: stretch; } .tx-date-field { flex: 1 1 140px; min-width: 0; } .tx-export-csv { grid-column: 1 / -1; justify-self: stretch; width: auto; } } .table-toolbar--orders { display: grid; grid-template-columns: 1fr; gap: 0.85rem; align-items: start; margin-bottom: 0.9rem; } .table-toolbar--orders .table-toolbar-count { font-size: 0.8rem; } @media (min-width: 769px) { .orders-panel { padding-bottom: 0; } .orders-page-head { display: flex; align-items: flex-start; justify-content: space-between; } .orders-page-actions { width: auto; } .orders-page-actions .btn { width: auto; } .orders-panel .form-order-grid .field:last-child .btn { width: auto; } .table-toolbar--orders { grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem 1rem; } .orders-filter-grid, .tx-toolbar-right { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .orders-filter-item-search, .orders-filter-item-date, .orders-filter-item-export { grid-column: 1 / -1; } .tx-date-range { flex-direction: row; align-items: flex-end; } .orders-mobile-list { display: none; } } #step-2fa label { display: block; margin-bottom: 0.35rem; } /* ═══════════════════════════════════════════════ Activity Audit Log v2 ═══════════════════════════════════════════════ */ .activity-feed { display: flex; flex-direction: column; gap: 0; } .activity-item { display: flex; gap: 0.85rem; padding: 1rem 0; border-bottom: 1px solid var(--hairline); cursor: pointer; border-radius: 8px; transition: background var(--transition-fast), box-shadow var(--transition-fast); } .activity-item:hover { background: color-mix(in srgb, var(--surface-2) 82%, transparent); } .activity-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); } .activity-item--sensitive-permission { border-color: color-mix(in srgb, var(--amber) 32%, transparent); background: color-mix(in srgb, var(--amber) 7%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--amber) 78%, transparent); } .activity-item--sensitive-permission:hover, .activity-item--sensitive-permission.activity-item--flash { background: color-mix(in srgb, var(--amber) 12%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--amber) 86%, transparent), 0 0 0 1px color-mix(in srgb, var(--amber) 28%, transparent); } .activity-item:last-child { border-bottom: none; } .activity-dot-col { width: 24px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .activity-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 0.35rem; } .activity-dot.green { background: var(--green); } .activity-dot.red { background: var(--red); } .activity-dot.blue { background: var(--blue); } .activity-dot.amber { background: var(--amber); } .activity-dot.purple { background: var(--purple); } .activity-line { flex: 1; width: 2px; background: var(--hairline); margin-top: 0.35rem; } .activity-content { flex: 1; min-width: 0; } .activity-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; } .activity-title-wrap { min-width: 0; flex: 1; } .activity-title { font-size: 0.95rem; line-height: 1.45; color: var(--text); font-weight: 700; word-break: break-word; } .activity-time { margin-top: 0.28rem; font-size: 0.74rem; line-height: 1.45; color: var(--muted-2); } .activity-pill-row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; } .activity-tag, .activity-result { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0.25rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; border: 1px solid transparent; } .activity-tag.auth { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); border-color: color-mix(in srgb, var(--purple) 28%, transparent); } .activity-tag.order { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 28%, transparent); } .activity-tag.product { background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 28%, transparent); } .activity-tag.balance { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); } .activity-tag.user { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 26%, transparent); } .activity-tag.permissions { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 34%, transparent); } .activity-tag.sensitive-permission { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 32%, transparent); } .activity-tag.error { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 28%, transparent); } .activity-tag.system { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); } .activity-result.success { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 28%, transparent); } .activity-result.failed { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 28%, transparent); } .activity-result.processing, .activity-result.warning { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); } .activity-result.info { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 24%, transparent); } .activity-audit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.8rem; } .activity-audit-card { min-width: 0; padding: 0.78rem 0.85rem; border-radius: 8px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 90%, transparent); } .activity-audit-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.5rem; } .activity-audit-main { font-size: 0.9rem; font-weight: 700; color: var(--text); line-height: 1.4; word-break: break-word; } .activity-audit-sub { margin-top: 0.28rem; font-size: 0.78rem; line-height: 1.45; color: var(--muted); word-break: break-word; } .activity-audit-row { display: grid; grid-template-columns: minmax(7.5rem, 10.5rem) minmax(0, 1fr); align-items: flex-start; gap: 0.8rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted); } .activity-audit-row + .activity-audit-row { margin-top: 0.35rem; } .activity-audit-key { min-width: 0; } .activity-audit-row strong { min-width: 0; max-width: 100%; color: var(--text); font-weight: 600; text-align: right; justify-self: end; overflow-wrap: anywhere; word-break: break-word; } .activity-audit-break { overflow-wrap: anywhere; word-break: break-word; } .activity-audit-value { min-width: 0; } .activity-audit-value-long { font-size: 0.75rem; line-height: 1.55; } .activity-details { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.75rem; } .activity-detail-chip { display: inline-flex; align-items: flex-start; gap: 0.45rem; padding: 0.42rem 0.6rem; border-radius: 8px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 92%, transparent); max-width: 100%; } .activity-detail-label { font-size: 0.72rem; font-weight: 700; color: var(--muted-2); white-space: nowrap; } .activity-detail-value { font-size: 0.78rem; color: var(--text); word-break: break-word; } .modal-activity-detail { max-width: 820px; } .activity-detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; margin-bottom: 1rem; } .activity-detail-title-wrap { min-width: 0; flex: 1; } .activity-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; } .activity-detail-card { display: grid; gap: 0.55rem; padding: 0.95rem 1rem; border-radius: 8px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-2) 86%, transparent); min-width: 0; } .activity-detail-card-wide { grid-column: 1 / -1; } .activity-detail-card-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } @media (max-width: 1100px) { .activity-audit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .activity-head-row { flex-direction: column; } .activity-pill-row { justify-content: flex-start; } .activity-audit-grid { grid-template-columns: 1fr; } .activity-audit-row { grid-template-columns: 1fr; gap: 0.15rem; } .activity-audit-row strong { text-align: left; justify-self: start; } .activity-detail-chip { width: 100%; justify-content: space-between; } .activity-detail-hero { flex-direction: column; } .activity-detail-grid { grid-template-columns: 1fr; } } /* Activity Audit Log v3 — compact, scannable, detail-first */ .activity-panel { display: grid; gap: 0.75rem; } .activity-page-head { align-items: center; } .activity-page-head .greeting p { max-width: 68ch; } .activity-head-actions .btn, .activity-toolbar .btn { min-height: 2.15rem; padding: 0.42rem 0.72rem; border-radius: 8px; font-size: 0.78rem; } .activity-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(150px, 180px) auto auto; align-items: end; gap: 0.55rem; padding: 0.68rem 0.75rem; border-radius: 10px; } .activity-toolbar-field { display: grid; gap: 0.28rem; min-width: 0; } .activity-toolbar-field > span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; color: var(--muted-2); } .activity-toolbar input, .activity-toolbar select { width: 100%; min-height: 2.15rem; padding: 0.42rem 0.62rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.8rem; outline: none; } .activity-toolbar input:focus, .activity-toolbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .activity-count-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 2.15rem; padding: 0.36rem 0.62rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 76%, transparent); color: var(--muted); font-size: 0.72rem; font-weight: 800; white-space: nowrap; } .activity-list-panel { padding: 0; overflow: hidden; border-radius: 10px; } .activity-feed { display: grid; gap: 0; } .activity-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 0.55rem; padding: 0.58rem 0.72rem; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent; } .activity-item:hover { background: color-mix(in srgb, var(--surface-2) 72%, transparent); } .activity-item:focus-visible { outline-offset: -2px; } .activity-dot-col { width: 10px; padding-top: 0.35rem; } .activity-dot { width: 7px; height: 7px; margin-top: 0; box-shadow: none; } .activity-line { display: none; } .activity-content { display: grid; gap: 0.32rem; } .activity-head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.65rem; } .activity-title { display: -webkit-box; overflow: hidden; font-size: 0.88rem; font-weight: 800; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .activity-time { margin-top: 0; font-size: 0.7rem; line-height: 1.3; } .activity-pill-row { gap: 0.32rem; } .activity-tag, .activity-result { min-height: 1.42rem; padding: 0.16rem 0.42rem; border-radius: 7px; font-size: 0.62rem; line-height: 1; } .activity-meta-strip { display: flex; flex-wrap: wrap; gap: 0.28rem; } .activity-meta-chip { display: inline-flex; align-items: center; gap: 0.32rem; min-width: 0; max-width: 100%; min-height: 1.38rem; padding: 0.14rem 0.38rem; border: 1px solid var(--hairline); border-radius: 7px; background: color-mix(in srgb, var(--surface-2) 64%, transparent); color: var(--muted); font-size: 0.75rem; } .activity-meta-chip span { flex: 0 0 auto; font-weight: 800; color: var(--muted-2); } .activity-meta-chip strong { min-width: 0; overflow: hidden; color: var(--text); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .activity-compact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.36rem; } .activity-kv { min-width: 0; padding: 0.34rem 0.42rem; border: 1px solid var(--hairline); border-radius: 7px; background: color-mix(in srgb, var(--surface-2) 52%, transparent); } .activity-kv span { display: block; margin-bottom: 0.16rem; color: var(--muted-2); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .activity-kv strong { display: block; overflow: hidden; color: var(--text); font-size: 0.75rem; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .activity-details-preview { margin-top: 0; gap: 0.26rem; } .activity-details-preview .activity-detail-chip { width: auto; justify-content: flex-start; padding: 0.2rem 0.32rem; border-radius: 7px; background: color-mix(in srgb, var(--surface-2) 58%, transparent); } .activity-details-preview .activity-detail-label { font-size: 0.72rem; } .activity-details-preview .activity-detail-value { max-width: 18rem; overflow: hidden; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; } dialog.modal.modal-activity-detail { max-width: min(920px, calc(100vw - 2rem)); width: min(920px, calc(100vw - 2rem)); max-height: min(82vh, 900px); overflow-y: auto; } .activity-detail-hero { margin-bottom: 0.72rem; padding: 0.68rem 0.75rem; border: 1px solid var(--hairline); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 62%, transparent); } .activity-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .activity-detail-card { gap: 0.42rem; padding: 0.72rem 0.78rem; border-radius: 8px; } .activity-detail-card-title { font-size: 0.66rem; } .activity-audit-row { grid-template-columns: minmax(6rem, 8.2rem) minmax(0, 1fr); gap: 0.42rem; font-size: 0.76rem; line-height: 1.35; } .modal-activity-detail .activity-audit-row > span { min-width: 0; color: var(--muted); } .modal-activity-detail .activity-audit-row strong { justify-self: stretch; min-width: 0; text-align: left; overflow-wrap: anywhere; word-break: normal; } .modal-activity-detail .activity-audit-row-wide { grid-template-columns: 1fr; gap: 0.16rem; } .modal-activity-detail .activity-audit-row-wide strong { padding: 0.42rem 0.48rem; border: 1px solid var(--hairline); border-radius: 7px; background: color-mix(in srgb, var(--surface) 42%, transparent); font-size: 0.74rem; line-height: 1.42; } .activity-audit-row + .activity-audit-row { margin-top: 0.24rem; } @media (max-width: 980px) { .activity-toolbar { grid-template-columns: 1fr 180px; } .activity-count-pill, .activity-toolbar .btn { justify-content: center; } .activity-compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .activity-toolbar, .activity-head-row, .activity-compact-grid, .activity-detail-grid { grid-template-columns: 1fr; } .activity-pill-row { justify-content: flex-start; } .activity-item { padding: 0.7rem; } .activity-meta-chip, .activity-details-preview .activity-detail-chip { width: 100%; justify-content: space-between; } .activity-details-preview .activity-detail-value { max-width: 100%; } .activity-audit-row { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════ User management — profile detail, avatar, responsive ══════════════════════════════════════════════════════ */ .avatar-small, .user-avatar { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--text); font-weight: 700; letter-spacing: 0; } .avatar-small span, .user-avatar span { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .avatar-small img, .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-small { font-size: 0.78rem; } .users-create-head, .users-list-head { align-items: flex-start; gap: 0.65rem 1rem; } .users-panel { border-radius: var(--users-card-radius); } .users-create-note, .users-list-note { margin: 0.25rem 0 0; font-size: 0.82rem; line-height: 1.55; } .users-create-stack { display: grid; gap: 0.85rem; } .users-form-section { border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); padding: 0.95rem 1rem; } .users-form-section-head { display: grid; gap: 0.2rem; margin-bottom: 0.8rem; } .users-form-section-head strong { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .users-form-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem 1rem; } .users-team-form-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); } .users-team-form-grid .field-span-full { grid-column: 1 / -1; } .users-submit-field { align-self: end; } .users-submit-field .btn { width: 100%; } .users-advanced { border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface) 92%, transparent); } .users-advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1rem; cursor: pointer; list-style: none; font-size: 0.84rem; font-weight: 700; color: var(--text); } .users-advanced summary::-webkit-details-marker { display: none; } .users-advanced summary::after { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); color: var(--muted); font-weight: 700; } .users-advanced[open] summary { border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent); } .users-advanced[open] summary::after { content: "−"; } .users-advanced > div { padding: 0.95rem 1rem 1rem; } .users-advanced .users-form-section { padding: 0; border: 0; background: transparent; } .users-list-toolbar { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 0.9rem; } .users-search-field { display: flex; align-items: center; gap: 0.65rem; flex: 1 1 280px; min-width: min(100%, 240px); min-height: 46px; padding: 0 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); box-sizing: border-box; } .users-search-field svg { flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.78; } .users-search-field input { min-width: 0; border: 0; padding: 0; background: transparent; box-shadow: none; } .users-search-field input:focus { outline: none; } .users-list-toolbar > select { flex: 0 1 200px; min-width: 0; min-height: 46px; padding: 0.48rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 78%, transparent); color: var(--text); font: inherit; } .users-table-wrap table { width: 100%; min-width: 720px; table-layout: fixed; } .users-table-wrap { overflow-x: auto; } .users-table-wrap th:first-child, .users-table-wrap td.user-main-cell { width: 38%; } .users-table-wrap th:last-child, .users-table-wrap td:last-child { width: 1%; white-space: nowrap; } .user-profile-cell, .user-cell-stack, .user-contact-line, .user-security-flags, .user-detail-pill-row, .modal-user-detail-actions { display: flex; align-items: center; } .user-contact-line, .user-security-flags, .user-detail-pill-row, .modal-user-detail-actions { gap: 0.45rem; flex-wrap: wrap; } .modal-user-edit { max-width: 640px; } .modal-user-detail { max-width: 760px; } .modal-user-detail-actions { justify-content: flex-end; margin-top: 1.1rem; } .row-actions-user { display: grid; justify-items: end; justify-content: flex-end; gap: 0.42rem; min-width: 0; } .modal-team-permissions { max-width: 760px; } .team-permission-popup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .team-permission-popup-head > div { display: grid; gap: 0.18rem; } .team-permission-popup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.5rem; max-height: min(58vh, 520px); overflow: auto; padding-right: 0.15rem; } .team-permission-popup-sections { max-height: min(58vh, 520px); overflow: auto; padding-right: 0.15rem; } .team-permission-popup-sections .team-permission-section { padding: 0.65rem; } .team-permission-popup-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem; padding: 0.65rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 74%, transparent); } .team-permission-popup-item.is-active { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); } .team-permission-popup-check { display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 1.45rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; } .team-permission-popup-item.is-active .team-permission-popup-check { border-color: color-mix(in srgb, var(--green) 34%, var(--border)); background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); } @media (max-width: 880px) { .users-panel { padding: 1rem; } .users-create-head, .users-list-head { flex-direction: column; } .users-form-grid, .users-team-form-grid { grid-template-columns: 1fr; } .users-list-toolbar { flex-direction: column; } .users-search-field, .users-list-toolbar > select { width: 100%; flex: 1 1 auto; } .user-avatar-editor { align-items: flex-start; } .users-table-wrap table { min-width: 0; } .users-table-wrap thead { display: none; } .users-table-wrap, .users-table-wrap table, .users-table-wrap tbody, .users-table-wrap tr, .users-table-wrap td { display: block; width: 100%; } .users-table-wrap tbody { display: grid; gap: 0.85rem; } .users-table-wrap tr { padding: 0.9rem 0.95rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); } .users-table-wrap td { padding: 0.48rem 0; border: 0; } .users-table-wrap td::before { content: attr(data-label); display: block; margin-bottom: 0.28rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .users-table-wrap td.user-main-cell::before { display: none; } .user-summary-primary { flex-direction: column; align-items: flex-start; } .user-summary-balance { justify-items: start; min-width: 0; } .users-table-wrap .row-actions-user { justify-content: flex-start; justify-items: stretch; align-items: stretch; } .user-actions-primary-row, .user-actions-balance-row { justify-content: flex-start; } .user-actions-primary-row { align-items: stretch; } .row-actions-user .btn, .row-actions-user .user-actions-more { width: 100%; } .users-cards-always tr { display: grid; grid-template-columns: 1fr; gap: 0.65rem; padding: 0.8rem; } .users-cards-always td { padding: 0; } .users-cards-always td::before { display: none; } .users-cards-always .user-summary-cell { grid-template-columns: 1fr; grid-template-areas: "main" "sub" "meta"; } .users-cards-always .user-summary-meta { justify-content: flex-start; } .users-cards-always .row-actions-user, .users-cards-always .user-actions-primary-row { justify-content: flex-start; justify-items: start; } .users-cards-always .row-actions-user .btn, .users-cards-always .row-actions-user .user-actions-more { width: auto; } .users-cards-always .user-actions-primary-row { flex-wrap: wrap; } .user-actions-balance-row { border-radius: 14px; } .user-actions-balance-note { text-align: left; } .user-actions-menu { position: static; min-width: 0; margin-top: 0.35rem; box-shadow: none; } } @media (max-width: 640px) { .users-subtabs { width: 100%; } .users-subtab { flex: 1 1 0; justify-content: center; } .users-form-section, .users-advanced > div { padding: 0.85rem; } #panel-users .user-avatar-editor { align-items: flex-start; flex-direction: column; } #panel-users .user-avatar-editor-fields { width: 100%; } .team-permission-toolbar { align-items: stretch; } .team-permission-master, .team-permission-counter { width: 100%; } .team-permission-counter { display: block; } .team-permissions-grid { grid-template-columns: 1fr; } .users-cards-always tr { padding: 0.9rem; } .users-cards-always .user-summary-primary { flex-direction: column; align-items: flex-start; } .team-permission-popup-head { flex-direction: column; } .team-permission-popup-grid { grid-template-columns: 1fr; } .user-detail-hero { align-items: flex-start; flex-direction: column; } .user-detail-grid { grid-template-columns: 1fr; } .modal-user-detail-actions { justify-content: stretch; } .modal-user-detail-actions .btn { flex: 1 1 0; } } /* ═══════════════════════════════════════════════════ Announcements ═══════════════════════════════════════════════════ */ .announcement-banner { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient( 135deg, rgba(88, 208, 192, 0.12), rgba(88, 208, 192, 0.04) ); } .announcement-banner-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.875rem; } .announcement-banner-sub { display: block; margin-top: 0.2rem; font-size: 0.8125rem; color: var(--muted); } .announcement-banner-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .announcement-banner-item { appearance: none; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); padding: 0.875rem 0.95rem; cursor: pointer; transition: border-color 0.18s ease, transform 0.18s ease; } .announcement-banner-item:hover, .announcement-banner-item:focus-visible { border-color: rgba(88, 208, 192, 0.55); transform: translateY(-1px); outline: none; } .announcement-banner-item-title { display: block; font-weight: 700; margin-bottom: 0.35rem; } .announcement-banner-item-meta { display: block; font-size: 0.8125rem; color: var(--muted); } .announcement-feed, .announcement-manage-list { display: grid; gap: 0.9rem; } .announcement-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; } .announcement-form-note { margin: 0 0 0.9rem; font-size: 0.8125rem; } .announcement-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .announcement-card:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); box-shadow: var(--shadow); transform: translateY(-1px); } /* Rail aksen kiri per prioritas / pin (inset shadow → tanpa geser konten) */ .announcement-card--p-important { box-shadow: inset 3px 0 0 #d97706, var(--shadow-sm); } .announcement-card--p-critical { box-shadow: inset 3px 0 0 var(--red, #dc2626), var(--shadow-sm); } .announcement-card--pinned { box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); } .announcement-card--p-important:hover { box-shadow: inset 3px 0 0 #d97706, var(--shadow); } .announcement-card--p-critical:hover { box-shadow: inset 3px 0 0 var(--red, #dc2626), var(--shadow); } .announcement-card--pinned:hover { box-shadow: inset 3px 0 0 var(--accent), var(--shadow); } .announcement-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; } .announcement-card-title { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--text); } .announcement-card-meta { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted); } .announcement-pill-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.7rem; } .announcement-card-body { color: var(--text); font-size: 0.9375rem; line-height: 1.65; word-break: break-word; } .announcement-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; } .announcement-delete-btn { color: var(--red); } .announcement-status-live { color: #10b981; border-color: rgba(16, 185, 129, 0.34); background: rgba(16, 185, 129, 0.12); } .announcement-tag-critical { color: var(--red, #dc2626); border-color: color-mix(in srgb, var(--red, #dc2626) 34%, transparent); background: color-mix(in srgb, var(--red, #dc2626) 12%, transparent); } .announcement-status-scheduled { color: #3b82f6; border-color: rgba(59, 130, 246, 0.32); background: rgba(59, 130, 246, 0.1); } .announcement-tag-important { color: #d97706; border-color: rgba(217, 119, 6, 0.34); background: rgba(217, 119, 6, 0.13); } .announcement-status-inactive, .announcement-status-expired, .announcement-tag-normal { color: var(--muted); } .announcement-pin-tag { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .announcement-form-grid textarea { min-height: 132px; resize: vertical; } .announcement-form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .announcement-check { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; color: var(--text); } .announcement-check input { width: 16px; height: 16px; } .announcement-filter-row { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(180px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .announcement-filter-row input, .announcement-filter-row select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); padding: 0.75rem 0.9rem; } .announcement-count { font-size: 0.76rem; font-weight: 600; padding: 0.18rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); } @media (max-width: 1180px) { .announcement-banner-list { grid-template-columns: 1fr; } .announcement-admin-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .announcement-banner { padding: 0.875rem; } .announcement-banner-head, .announcement-card-head { flex-direction: column; align-items: stretch; } .announcement-card-actions { justify-content: flex-start; } .announcement-filter-row { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════ DASHBOARD LAYOUT — TOPBAR (desktop) The `.topbar` base already sets row/flex-end at all sizes. The legacy `@media (max-width: 640px)` rule switches it to a column on phones. Below are only the compactness tweaks for intermediate viewports. ══════════════════════════════════════════════════════ */ /* Keep the topbar-actions row tight and non-wrapping at ≥ 641px so the balance/theme/notif/user menu always sit on one line. */ @media (min-width: 641px) { .topbar-actions { flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; max-width: 100%; } .topbar-balance, .topbar .system-status-trigger, .topbar .icon-btn, .topbar .theme-toggle, .topbar .notif-wrap, .topbar .user-dropdown-wrap { flex-shrink: 0; } .topbar .topbar-balance { white-space: nowrap; } .topbar .user-trigger { max-width: 240px; height: 40px; } .topbar .user-dropdown-wrap { flex: 0 0 auto; width: auto; } /* Dropdowns always float out of the layout flow. */ .topbar .notif-dropdown, .topbar .user-dropdown { position: absolute; } } @media (max-width: 860px) { .topbar .topbar-balance { width: 40px; min-width: 40px; height: 40px; justify-content: center; gap: 0; padding: 0; font-size: 0.78125rem; } .topbar .topbar-balance svg { width: 20px; height: 20px; } .topbar .topbar-balance #topbar-balance-amount { display: none; } .topbar .system-status-trigger--desktop:not(.system-status-trigger--inline) { min-width: 40px; width: 40px; padding: 0; } .topbar .topbar-actions .system-status-tooltip { right: -1.5rem; } } @media (max-width: 1024px) { .topbar { justify-content: space-between; } .topbar-left { gap: 0.625rem; } .topbar-mobile-brand-group { display: flex; margin-right: 0; justify-content: flex-start; align-items: center; min-width: 0; flex: 1 1 auto; overflow: hidden; } .topbar-brand .brand-mark { width: 28px; height: 28px; } .topbar-brand .brand-mark svg { width: 24px; height: 24px; } .topbar .system-status-trigger--desktop { display: none; } } @media (min-width: 1025px) { .topbar-mobile-brand-group, .topbar .system-status-trigger--mobile { display: none; } } /* Page head rhythm — consistent vertical spacing between the topbar and the first section. */ .page-head { gap: 0.5rem 1.25rem; padding-bottom: 0; margin-bottom: 0; } .page-head.overview-head { gap: 0.4rem 1rem; } #panel-overview > .overview-head { padding: 0; } .greeting h1 { font-size: clamp(1.3rem, 1.8vw + 0.5rem, 1.7rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.22; } .greeting p { margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.55; max-width: min(100%, 78ch); } /* Ensure hidden sections never push layout. */ .content-inner > section[class*="hidden"], .content-inner > section.hidden { display: none !important; } @media (max-width: 560px) { .content { padding-left: 0.95rem; padding-right: 0.95rem; } #panel-settings .settings-summary-grid { grid-template-columns: 1fr; } #panel-settings .settings-card { padding: 1rem; } #panel-settings .settings-form-actions { flex-direction: column; align-items: stretch; } #panel-settings .settings-form-actions .btn { width: 100%; justify-content: center; } } /* ══════════════════════════════════════════════════════ DASHBOARD LAYOUT SYSTEM (v20260419L — app-shell scroll) Single consolidated layout block. Covers: full-width content, overview toolbar polish, all section grids (analytics, AI insight, charts, settings), and every responsive breakpoint. No more layered overrides. Scroll model: document is locked (html/body overflow: hidden). Only `.content` scrolls. See the top of this file for the full shell architecture explanation. */ /* -------- shell safety — box-sizing + min-width guards to keep wide children (wide tables, charts) from blowing the flex tracks out. DO NOT set overflow on .shell or .main here — that's already defined on the base rules at the top of the file in terms of the app-shell model. */ .shell, .main, .content, .content-inner { box-sizing: border-box; } .content, .content-inner { min-width: 0; } /* -------- analytics cards grid (overview summary) */ .analytics-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; margin-bottom: 0; } .a-card { min-height: 150px; padding: 0.95rem 1rem 0.7rem; border-radius: 12px; } /* -------- overview toolbar (period tabs + actions + date range). Kept tight with no big empty gaps. */ .overview-actions { padding: 0.85rem 0.95rem; border-radius: 12px; gap: 0.65rem; } .overview-actions-top { justify-content: flex-start; gap: 0.5rem 0.85rem; } .overview-action-buttons { justify-content: flex-start; gap: 0.35rem; flex: 0 0 auto; } .overview-action-btn { min-height: 2.2rem; padding: 0.45rem 0.8rem; font-size: 0.8rem; border-radius: 8px; } .ov-period-meta { min-height: 0; padding: 0; font-size: 0.78rem; color: var(--muted); gap: 0.35rem 0.55rem; flex-wrap: wrap; } .ov-date-range { padding: 0.55rem 0.7rem; border-radius: 10px; gap: 0.45rem 0.55rem; width: 100%; min-width: 0; } .ov-date-field { flex: 0 1 170px; min-width: 140px; max-width: 180px; } .ov-date-field input { min-height: 2.2rem; padding: 0.42rem 0.6rem; font-size: 0.82rem; } .ov-date-actions { gap: 0.35rem; align-items: flex-end; } .ov-date-actions .btn { min-height: 2.2rem; padding: 0.45rem 0.9rem; font-size: 0.8rem; border-radius: 8px; } /* -------- ai insights: compact, flexible grid */ .ai-insight-panel { margin-bottom: 0; } .ai-insight-hero { gap: 0.9rem; } .ai-insight-targets { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem 0.85rem; align-items: end; } .ai-insight-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 0.85rem; } .ai-insight-list { gap: 0.6rem; margin-top: 0.85rem; } .ai-forecast-grid { gap: 0.75rem; } /* -------- grid-2 (bar chart + donut) row keeps its proportion on desktop but stacks on tablets. */ .grid-2 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; } .grid-2 > .panel { min-width: 0; } .bar-chart { min-width: 0; width: 100%; } .donut-row { min-width: 0; } /* -------- widen grids gracefully on large monitors */ @media (min-width: 1400px) { .analytics-cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .ai-insight-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } @media (min-width: 1600px) { .content-inner { gap: 1.4rem; } .analytics-cards { gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } #panel-settings .settings-summary-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } #panel-settings .settings-config-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } } @media (min-width: 1920px) { .content { padding-left: clamp(1.4rem, 2vw, 2.75rem); padding-right: clamp(1.4rem, 2vw, 2.75rem); } .analytics-cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } @media (min-width: 2200px) { .content { padding-left: clamp(1.75rem, 2.2vw, 3.25rem); padding-right: clamp(1.75rem, 2.2vw, 3.25rem); } .analytics-cards { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } } /* -------- tablet / small laptop: stack grid-2 */ @media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } .ai-insight-hero { grid-template-columns: 1fr; } .ai-insight-targets { grid-template-columns: 1fr; } .ai-forecast-grid, .ai-insight-list { grid-template-columns: 1fr; } } /* -------- mobile: phone-friendly toolbar and date range */ @media (max-width: 640px) { .overview-actions { padding: 0.7rem 0.8rem; } .overview-actions-top { gap: 0.4rem 0.6rem; } .overview-action-buttons { width: 100%; justify-content: stretch; } .overview-action-buttons .overview-action-btn { flex: 1 1 auto; } .analytics-cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem; } .a-card { min-height: 130px; padding: 0.8rem 0.9rem 0.55rem; } .panel { padding: 1rem 1.05rem; } .bar-chart { height: 180px; } .donut-svg { width: 140px; height: 140px; } } /* -------- phone: stack date range fully */ @media (max-width: 560px) { .ov-date-range { flex-direction: column; align-items: stretch; } .ov-date-field { max-width: none; flex: 1 1 auto; width: 100%; } .ov-date-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; } .ov-date-actions .btn { justify-content: center; width: 100%; } .analytics-cards { grid-template-columns: 1fr; } } /* -------- mobile hard reset: shell + overview layout */ @media (max-width: 900px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; } .shell { display: block; width: 100%; max-width: 100vw; min-width: 0; overflow-x: hidden; } .shell > .sidebar { flex: none; width: min(82vw, 320px); max-width: 320px; } .main, .topbar, .content, .content-inner, .content-inner > section { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .main { flex: 1 1 100%; min-height: 100dvh; } .topbar { padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); } .content { padding-top: 0.85rem; padding-right: max(0.85rem, env(safe-area-inset-right)); padding-bottom: calc(var(--mobile-nav-h) + 1rem + env(safe-area-inset-bottom)); padding-left: max(0.85rem, env(safe-area-inset-left)); } .content-inner { gap: 1rem; } .page-head, #panel-overview > .overview-head { display: grid; grid-template-columns: 1fr; align-items: start; justify-content: stretch; gap: 0.9rem; width: 100%; } .overview-head .overview-greeting { display: grid; grid-template-columns: 1fr; align-items: start; gap: 0.55rem; width: 100%; } .overview-head .overview-title { font-size: clamp(1.45rem, 4.5vw, 1.8rem); white-space: normal; } .overview-tagline { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; white-space: normal; line-height: 1.35; padding: 0.3rem 0.7rem; } .overview-head .overview-meta { display: grid; justify-items: start; gap: 0.45rem; width: 100%; } .overview-meta > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-height: 0; max-width: 100%; width: fit-content; padding: 0.32rem 0.7rem; } .overview-meta-updated-time, .overview-meta-ws { white-space: normal; } .overview-actions { width: 100%; max-width: 100%; padding: 0.85rem; gap: 0.85rem; } .overview-actions-top { display: grid; grid-template-columns: 1fr; gap: 0.7rem; width: 100%; } .ov-period-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%; } .ov-period-tab { width: 100%; min-height: 2.85rem; padding: 0.55rem 0.6rem; white-space: normal; line-height: 1.2; } .overview-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%; } .overview-action-btn { width: 100%; min-height: 2.85rem; padding: 0.6rem 0.8rem; } .ov-period-meta { display: grid; gap: 0.25rem; width: 100%; } .ov-date-range { display: grid; grid-template-columns: 1fr; gap: 0.65rem; width: 100%; padding: 0.75rem; } .ov-date-field { width: 100%; max-width: none; flex: none; } .ov-date-field input { min-height: 2.65rem; } .ov-date-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%; } .ov-date-actions .btn { width: 100%; min-height: 2.65rem; justify-content: center; } .analytics-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .a-card, .panel, .grid-2, .ai-insight-panel, .ai-insight-targets, .ai-insight-grid, .ai-forecast-grid, .ai-insight-list, .ai-insight-summary-grid { min-width: 0; max-width: 100%; } .grid-2, .ai-insight-targets, .ai-forecast-grid, .ai-insight-summary-grid, .ai-insight-list { grid-template-columns: 1fr; } .ai-insight-grid--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .ov-period-tabs, .overview-action-buttons, .ov-date-actions, .analytics-cards, .ai-insight-grid--kpi { grid-template-columns: 1fr; } } @media (max-width: 900px) { .notif-wrap { position: static; } .topbar .notif-dropdown, .notif-dropdown { position: fixed; top: calc(var(--topbar-h) + 0.55rem); left: max(0.75rem, env(safe-area-inset-left)); right: max(0.75rem, env(safe-area-inset-right)); width: auto; max-width: none; max-height: calc( 100dvh - var(--topbar-h) - var(--mobile-nav-h) - 1.75rem - env(safe-area-inset-bottom) ); overflow-x: hidden; overflow-y: auto; border-radius: 8px; z-index: 70; } .notif-header { align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0.95rem; } .notif-header-title { min-width: 0; overflow-wrap: anywhere; } .notif-mark-read { flex: 0 0 auto; max-width: 52%; line-height: 1.2; text-align: right; } .notif-item { gap: 0.65rem; padding: 0.8rem 0.9rem; } .notif-icon { width: 34px; height: 34px; border-radius: 8px; } .notif-text { overflow-wrap: anywhere; } } @media (max-width: 420px) { .notif-header { display: grid; grid-template-columns: 1fr; } .notif-mark-read { max-width: 100%; justify-self: start; text-align: left; padding-inline: 0; } } /* ── Panel Kategori (Kelola Kategori) ── */ .cat-shell { max-width: var(--content-max); margin: 0 auto; padding: 0 0 1.5rem; } .cat-panel { padding: 1.1rem 1.25rem 1.25rem; border-radius: var(--radius-md); } .cat-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); } .cat-panel-title { margin: 0 0 0.25rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .cat-panel-desc { margin: 0; font-size: 0.875rem; color: var(--muted); line-height: 1.45; max-width: 42rem; } .cat-forms { margin-bottom: 1rem; } .cat-forms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.25rem; } @media (max-width: 820px) { .cat-forms-grid { grid-template-columns: 1fr; } } .cat-form-block { padding: 0.75rem 0.85rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); } .cat-form-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.45rem; } .cat-form-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .cat-form-row--sub .cat-select { flex: 0 1 11rem; min-width: 9rem; } .cat-input, .cat-select { flex: 1 1 10rem; min-width: 0; padding: 0.5rem 0.65rem; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 0.875rem; } .cat-input:focus, .cat-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); } .cat-tree-section { margin-top: 0.25rem; } .cat-tree-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin-bottom: 0.6rem; } .cat-tree-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); } .cat-tree-hint { font-size: 0.75rem; } .cat-tree { display: grid; gap: 0.8rem; padding: 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); } .cat-tree-loading, .cat-tree-error { padding: 1.25rem 1rem; text-align: center; } .cat-empty { padding: 2rem 1.25rem 2.25rem; text-align: center; color: var(--text-secondary); } .cat-empty-icon { width: 3rem; height: 3rem; margin: 0 auto 0.65rem; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px dashed var(--border-strong); opacity: 0.9; } .cat-empty-hint { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.5; max-width: 22rem; margin-inline: auto; } .cat-tree-group { border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: var(--radius-sm); background: linear-gradient( 180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-2) 82%, transparent) ); box-shadow: var(--shadow-sm); overflow: hidden; } .cat-node { position: relative; } .cat-tree-group > .cat-node--root { border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent); } .cat-tree-group > .cat-node--root:last-child { border-bottom: none; } .cat-node-children { position: relative; display: grid; gap: 0.28rem; padding: 0.45rem 0.9rem 0.6rem 1.35rem; background: color-mix(in srgb, var(--surface-2) 78%, transparent); } .cat-node-children::before { content: ""; position: absolute; left: 1.5rem; top: 0.7rem; bottom: 0.8rem; width: 1px; background: color-mix(in srgb, var(--border) 72%, transparent); } .cat-node-row { display: flex; align-items: stretch; gap: 0.45rem; min-height: 3.15rem; } .cat-branch { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 1rem; width: 1rem; background: transparent; } .cat-branch-dot { display: block; flex: 0 0 auto; } .cat-branch--root .cat-branch-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 84%, white 16%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .cat-branch--sub { flex: 0 0 1.55rem; width: 1.55rem; } .cat-branch--sub::before { content: ""; position: absolute; left: 0; top: 50%; width: 1rem; height: 1px; background: color-mix(in srgb, var(--border) 72%, transparent); } .cat-branch--sub .cat-branch-dot { width: 0.48rem; height: 0.48rem; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--accent) 60%, var(--border)); background: var(--surface); } .cat-node-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(7rem, auto) minmax( 10rem, auto ); gap: 0.5rem 0.75rem; align-items: center; min-width: 0; } .cat-node--root .cat-node-body { padding: 0.75rem 0.9rem 0.75rem 0.2rem; } .cat-node--sub .cat-node-body { padding: 0.65rem 0.75rem 0.65rem 0.2rem; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); background: color-mix(in srgb, var(--surface) 92%, transparent); } @media (max-width: 720px) { .cat-tree { padding: 0.75rem; gap: 0.65rem; } .cat-node-children { padding: 0.38rem 0.65rem 0.55rem 1rem; } .cat-node-children::before { left: 1.15rem; } .cat-node-body { grid-template-columns: 1fr; gap: 0.35rem; } .cat-node-meta, .cat-node-actions { justify-self: start; } .cat-node--root .cat-node-body, .cat-node--sub .cat-node-body { padding-right: 0.7rem; } } .cat-node-title { min-width: 0; } .cat-name-trigger { display: inline-block; max-width: 100%; padding: 0.15rem 0.25rem; margin: -0.15rem -0.25rem; border: none; border-radius: var(--radius-xs); background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; transition: background var(--transition-fast); } .cat-node--root .cat-name-trigger, .cat-node--root .cat-name-readonly { font-size: 0.95rem; font-weight: 700; } .cat-node--sub .cat-name-trigger, .cat-node--sub .cat-name-readonly { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); } .cat-name-trigger:hover { background: var(--accent-soft); color: var(--accent); } .cat-name-readonly { font-weight: 600; color: var(--text); } .cat-node-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .cat-meta-pill { font-size: 0.7rem; padding: 0.2rem 0.45rem; border-radius: 999px; background: var(--surface-3); color: var(--muted); white-space: nowrap; } .cat-meta-pill--sub { background: rgba(var(--primary-rgb), 0.14); color: var(--text-secondary); } .cat-node-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem; } .cat-reorder { display: inline-flex; gap: 0.1rem; } .btn-icon.cat-reorder-btn { min-width: 2rem; padding: 0.25rem 0.35rem; font-size: 0.85rem; line-height: 1; } .cat-node-actions .cat-del { color: var(--red); } .cat-node-actions .cat-del:hover:not(:disabled) { background: rgba(220, 38, 38, 0.12); } .cat-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; width: 100%; } .cat-inline-input { flex: 1 1 8rem; min-width: 0; padding: 0.35rem 0.5rem; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 0.875rem; } .cat-inline-input:focus { outline: none; border-color: var(--accent); } /* ── Vendor Notification Config Section ────────────────────────────── */ .vendor-notif-config { border-top: 1px solid var(--border); margin-top: 0.5rem; } .vendor-notif-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; background: none; border: none; cursor: pointer; font-size: 0.8rem; color: var(--text-muted); text-align: left; } .vendor-notif-toggle:hover { color: var(--text); background: var(--surface-hover, rgba(0,0,0,0.04)); } .vendor-notif-fields { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; background: var(--surface-subtle, rgba(0,0,0,0.02)); } .vendor-notif-fields .field { margin: 0; } .vendor-notif-fields .field label { font-size: 0.75rem; color: var(--text-muted); display: block; margin-bottom: 0.2rem; } .vendor-notif-fields .field input { width: 100%; padding: 0.35rem 0.5rem; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 0.8rem; box-sizing: border-box; } .vendor-notif-fields .field input:focus { outline: none; border-color: var(--accent); } .vendor-notif-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; } /* ═══════════════════════════════════════════════════ API Documentation Panel ═══════════════════════════════════════════════════ */ .api-docs-panel { max-width: 1400px; } .api-docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; } .api-docs-toc { position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.75rem; max-height: calc(100vh - 2rem); overflow-y: auto; } .api-docs-search-wrap { position: relative; margin-bottom: 0.75rem; } .api-docs-search-icon { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .api-docs-search-input { width: 100%; padding: 0.55rem 0.65rem 0.55rem 2rem; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--text); font-size: 0.875rem; outline: none; } .api-docs-search-input:focus { border-color: var(--blue); } .api-docs-toc-list { display: flex; flex-direction: column; gap: 0.15rem; } .api-docs-toc-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: 0.8125rem; cursor: pointer; border: none; background: transparent; text-align: left; width: 100%; } .api-docs-toc-link:hover { background: var(--surface-2); color: var(--text); } .api-docs-toc-link.active { background: var(--surface-2); color: var(--blue); font-weight: 600; } .api-docs-toc-section { font-size: 0.72rem; text-transform: uppercase; color: var(--muted); padding: 0.5rem 0.65rem 0.25rem; margin-top: 0.5rem; font-weight: 700; letter-spacing: 0.05em; } .api-docs-toc-method { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 3px; min-width: 38px; text-align: center; flex-shrink: 0; } .api-docs-toc-method.m-get { background: #0284c7; color: #fff; } .api-docs-toc-method.m-post { background: #16a34a; color: #fff; } .api-docs-toc-method.m-patch { background: #ea580c; color: #fff; } .api-docs-toc-method.m-delete { background: #dc2626; color: #fff; } .api-docs-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .api-docs-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.5rem; scroll-margin-top: 1rem; } .api-docs-section-title { margin: 0 0 1rem; font-size: 1.25rem; display: flex; align-items: center; gap: 0.65rem; } .api-docs-section-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 0.8125rem; font-weight: 700; } .api-docs-callout { background: var(--surface-2); border-left: 3px solid var(--blue); padding: 0.85rem 1rem; border-radius: var(--radius-sm); margin: 0.75rem 0; font-size: 0.9375rem; line-height: 1.6; } .api-docs-callout-warn { border-left-color: #ea580c; background: rgba(234, 88, 12, 0.08); } .api-docs-flow { display: flex; align-items: stretch; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0; } .api-docs-flow-step { flex: 1; min-width: 180px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0.85rem; display: flex; align-items: flex-start; gap: 0.65rem; } .api-docs-flow-num { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 0.8125rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .api-docs-flow-text { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8125rem; } .api-docs-flow-text strong { color: var(--text); } .api-docs-flow-text span { color: var(--muted); font-size: 0.75rem; } .api-docs-flow-arrow { align-self: center; color: var(--muted); font-size: 1.5rem; font-weight: 700; } .api-docs-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; } .api-docs-info-card { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0.85rem 1rem; } .api-docs-info-label { font-size: 0.72rem; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.35rem; } .api-docs-info-value { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .api-docs-info-value code { background: var(--surface-3); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8125rem; } .api-docs-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; } .api-docs-endpoints { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; } .api-docs-endpoint { border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); } .api-docs-endpoint-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; cursor: pointer; background: var(--surface-2); border: none; width: 100%; text-align: left; color: var(--text); font-family: inherit; } .api-docs-endpoint-head:hover { background: var(--surface-3); } .api-docs-endpoint-method { font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 4px; min-width: 52px; text-align: center; flex-shrink: 0; } .api-docs-endpoint-method.m-get { background: #0284c7; color: #fff; } .api-docs-endpoint-method.m-post { background: #16a34a; color: #fff; } .api-docs-endpoint-method.m-patch { background: #ea580c; color: #fff; } .api-docs-endpoint-method.m-delete { background: #dc2626; color: #fff; } .api-docs-endpoint-path { font-family: ui-monospace, monospace; font-size: 0.875rem; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .api-docs-endpoint-title { color: var(--muted); font-size: 0.875rem; flex-shrink: 0; } .api-docs-endpoint-chevron { color: var(--muted); font-size: 0.875rem; transition: transform 0.15s; flex-shrink: 0; } .api-docs-endpoint.expanded .api-docs-endpoint-chevron { transform: rotate(90deg); } .api-docs-endpoint-body { padding: 1.25rem; border-top: 1px solid var(--hairline); display: none; } .api-docs-endpoint.expanded .api-docs-endpoint-body { display: block; } .api-docs-endpoint-desc { margin: 0 0 1rem; color: var(--text-secondary); line-height: 1.6; } .api-docs-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--hairline); margin-bottom: 0.75rem; flex-wrap: wrap; } .api-docs-tab { padding: 0.5rem 0.85rem; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 0.8125rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; } .api-docs-tab:hover { color: var(--text); } .api-docs-tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; } .api-docs-tab-panel { display: none; } .api-docs-tab-panel.active { display: block; } .api-docs-code-block { position: relative; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; margin: 0.5rem 0; } .api-docs-code-block pre { margin: 0; padding: 1rem; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8125rem; line-height: 1.6; color: var(--text); } .api-docs-code-block code { background: transparent; padding: 0; color: inherit; font-family: inherit; font-size: inherit; } .api-docs-code-copy, .api-docs-copy { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.65rem !important; font-size: 0.72rem !important; z-index: 1; } .api-docs-copy { position: static; } .api-docs-fields { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.8125rem; } .api-docs-fields th, .api-docs-fields td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--hairline); } .api-docs-fields th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; } .api-docs-fields code { background: var(--surface-2); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.78rem; } .api-docs-fields .required { color: #dc2626; font-size: 0.7rem; margin-left: 0.25rem; } .api-docs-subhead { font-size: 0.72rem; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.05em; margin: 1rem 0 0.5rem; } .api-docs-steps { padding-left: 1.25rem; line-height: 1.8; } .api-docs-list { padding-left: 1.25rem; line-height: 1.8; } .api-docs-faq-item { border: 1px solid var(--hairline); border-radius: var(--radius-sm); margin-bottom: 0.5rem; overflow: hidden; } .api-docs-faq-q { padding: 0.85rem 1rem; background: var(--surface-2); cursor: pointer; font-weight: 500; display: flex; align-items: center; justify-content: space-between; border: none; width: 100%; text-align: left; color: var(--text); font-family: inherit; font-size: 0.9375rem; } .api-docs-faq-q:hover { background: var(--surface-3); } .api-docs-faq-a { padding: 0 1rem; max-height: 0; overflow: hidden; transition: padding 0.15s, max-height 0.2s; color: var(--text-secondary); line-height: 1.6; } .api-docs-faq-item.open .api-docs-faq-a { padding: 0.85rem 1rem; max-height: 500px; } .api-docs-faq-chevron { color: var(--muted); transition: transform 0.15s; } .api-docs-faq-item.open .api-docs-faq-chevron { transform: rotate(180deg); } @media (max-width: 960px) { .api-docs-layout { grid-template-columns: 1fr; } .api-docs-toc { position: static; max-height: none; } .api-docs-flow-arrow { transform: rotate(90deg); width: 100%; text-align: center; } } /* ═══════════════════════════════════════════════════ API Docs — Hero (stats + key picker) + Try It ═══════════════════════════════════════════════════ */ .api-docs-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } @media (max-width: 960px) { .api-docs-hero { grid-template-columns: 1fr; } } .api-docs-stats { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; align-items: center; } .api-docs-stat { display: flex; flex-direction: column; gap: 0.15rem; } .api-docs-stat-label { font-size: 0.7rem; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.05em; } .api-docs-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--text); line-height: 1.2; } .api-docs-stat-value .small { font-size: 0.75rem; color: var(--muted); font-weight: 400; margin-left: 0.25rem; } .api-docs-stat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; vertical-align: middle; } .api-docs-stat-dot.on { background: #16a34a; } .api-docs-stat-dot.off { background: #9ca3af; } .api-docs-stat-dot.warn { background: #ea580c; } .api-docs-keybar { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; } .api-docs-keybar-title { font-size: 0.7rem; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.05em; } .api-docs-keybar-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .api-docs-keybar select { flex: 1; min-width: 160px; padding: 0.5rem 0.65rem; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--text); font-size: 0.875rem; } .api-docs-keybar code { background: var(--surface-2); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8125rem; color: var(--text-secondary); flex: 1; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .api-docs-keybar-hint { font-size: 0.75rem; color: var(--muted); } /* ── Try It ───────────────────────────────────────── */ .api-docs-tryit { margin-top: 1rem; border: 1px dashed var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); } .api-docs-tryit-header { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0.85rem; background: var(--surface-3); border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; border: none; width: 100%; font-family: inherit; color: var(--text); font-weight: 600; font-size: 0.875rem; } .api-docs-tryit-body { padding: 0.85rem; display: none; } .api-docs-tryit.open .api-docs-tryit-body { display: block; } .api-docs-tryit.open .api-docs-tryit-chevron { transform: rotate(90deg); } .api-docs-tryit-chevron { transition: transform 0.15s; } .api-docs-tryit-form label { display: block; font-size: 0.72rem; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.25rem; } .api-docs-tryit-form .field { margin-bottom: 0.65rem; } .api-docs-tryit-form input, .api-docs-tryit-form textarea { width: 100%; padding: 0.5rem 0.65rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--text); font-family: ui-monospace, monospace; font-size: 0.8125rem; } .api-docs-tryit-form textarea { min-height: 100px; resize: vertical; } .api-docs-tryit-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center; flex-wrap: wrap; } .api-docs-tryit-warn { background: rgba(234, 88, 12, 0.1); border-left: 3px solid #ea580c; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.8125rem; margin-bottom: 0.5rem; color: var(--text); } .api-docs-tryit-response { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); display: none; } .api-docs-tryit.has-response .api-docs-tryit-response { display: block; } .api-docs-tryit-status { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; } .api-docs-tryit-status-badge { font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 4px; color: #fff; } .api-docs-tryit-status-badge.ok { background: #16a34a; } .api-docs-tryit-status-badge.err { background: #dc2626; } .api-docs-tryit-status-badge.warn { background: #ea580c; } .api-docs-tryit-timing { font-size: 0.75rem; color: var(--muted); } /* ── BukaOlshop Panel (panel-bukaolshop) ── */ .bukaolshop-page-head { margin-bottom: 0.9rem; } .btn-danger-soft { color: var(--red, #dc2626); border-color: transparent; } .btn-danger-soft:hover { background: rgba(220, 38, 38, 0.08); border-color: var(--red, #dc2626); } .bukaolshop-page-head { align-items: stretch; gap: 1rem 1.2rem; } .bukaolshop-page-head .greeting { flex: 1 1 540px; max-width: 60rem; } @media (max-width: 1080px) { .bukaolshop-page-head { flex-direction: column; } .bok-hero-rail { width: 100%; flex-basis: auto; } .bok-credentials-card .bok-credentials-grid, .bok-mapping-source-grid { grid-template-columns: 1fr; } } #ri-form-msg { margin: 0; min-height: 1.3rem; font-size: 0.875rem; } .btn-xs { padding: 0.3rem 0.55rem !important; font-size: 0.72rem !important; } /* === Users page: compact + powerful + responsive === */ .users-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.55rem; margin: 0.5rem 0 0.85rem; } .users-stat-chip { display: flex; flex-direction: column; gap: 0.18rem; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); } .users-stat-chip-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .users-stat-chip strong { font-size: 1.08rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .users-stat-chip--accent { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } /* Compact toolbar */ .users-list-toolbar { gap: 0.55rem; } .users-list-toolbar select, .users-list-toolbar input { font-size: 0.85rem; padding: 0.45rem 0.6rem; } /* Compact user row card */ .users-table-wrap table { min-width: 0 !important; table-layout: auto; } .row-actions-user .btn { padding: 0.32rem 0.6rem !important; font-size: 0.72rem !important; } /* Card-mode at ≤900px (cleaner phones/tablets) */ @media (max-width: 900px) { .users-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .users-stat-chip--accent { grid-column: 1 / -1; } .users-table-wrap table, .users-table-wrap tbody { display: block; width: 100%; } .users-table-wrap thead { display: none; } .users-table-wrap tbody { display: grid; gap: 0.7rem; } .users-table-wrap tr { display: grid; gap: 0.55rem; padding: 0.85rem 0.95rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); } .users-table-wrap td { display: block; padding: 0; border: 0; width: 100%; } .users-table-wrap td::before { display: none; } .row-actions-user { flex-wrap: wrap; } .row-actions-user .btn { flex: 1 1 calc(50% - 0.4rem); justify-content: center; } } @media (max-width: 480px) { .users-stat-strip { grid-template-columns: 1fr 1fr; } .row-actions-user .btn { flex: 1 1 100%; } } /* === Users: powerful compact card layout (override v3) === */ .users-cards-always tbody { gap: 0.4rem; } .users-cards-always tr { padding: 0.55rem 0.8rem; gap: 0.75rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 10px; } /* Chips compact */ .users-cards-always .role-pill, .users-cards-always .user-inline-copy, .users-cards-always .user-meta-chip { font-size: 0.68rem; padding: 0.16rem 0.5rem; line-height: 1.25; white-space: nowrap; max-width: none; } /* Actions: one horizontal row, compact buttons */ .users-cards-always .row-actions-user { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.35rem; justify-content: flex-end; justify-items: end; } /* Hide redundant "AKUN | AKSI" header strip on cards mode */ .users-cards-always thead { display: none; } /* Mobile: stack actions below user info */ @media (max-width: 720px) { .users-cards-always tr { grid-template-columns: 1fr; gap: 0.55rem; padding: 0.65rem 0.7rem; } .users-cards-always .row-actions-user { flex-wrap: wrap; justify-content: flex-start; } .users-cards-always .user-summary-balance { margin-left: 0; } } /* Daftar user (kartu): lebih padat satu baris */ .users-cards-always tbody { gap: 0.3rem; } .users-cards-always tr { padding: 0.45rem 0.65rem; gap: 0.55rem; border-radius: 8px; } .users-cards-always .role-pill, .users-cards-always .user-inline-copy, .users-cards-always .user-meta-chip { font-size: 0.64rem; padding: 0.12rem 0.45rem; min-height: 1.4rem; line-height: 1.2; } @media (max-width: 540px) { #panel-users .greeting p { display: none; } #panel-users .users-create-note, #panel-users .users-list-note { display: none; } #panel-users .users-stat-strip { grid-template-columns: repeat(2, 1fr); } #panel-users .users-stat-chip--accent { grid-column: 1 / -1; } .users-cards-always tr { grid-template-columns: 1fr; gap: 0.5rem; } .users-cards-always .row-actions-user { flex-wrap: wrap; justify-content: flex-start; } .users-cards-always .user-summary-balance { margin-left: 0; } .users-cards-always .user-summary-secondary .user-inline-copy { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ═══════════════════════════════════════════════════════════ User Profile Extras (UPX) — Detail modal expanded content ═══════════════════════════════════════════════════════════ */ /* ── Root ── */ .upx-root { display: grid; gap: 1rem; margin-top: 0.85rem; } /* ── KPI strip ── */ .upx-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.55rem; } .upx-kpi { display: grid; gap: 0.15rem; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); } .upx-kpi-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .upx-kpi-value { font-size: 1.05rem; line-height: 1.2; color: var(--text); } .upx-kpi-sub { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Health flags ── */ .upx-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .upx-flag { display: inline-flex; align-items: center; padding: 0.22rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; border: 1px solid transparent; } .upx-flag.is-danger { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 24%, transparent); } .upx-flag.is-warning { background: rgba(251, 191, 36, 0.14); color: #fbbf24; border-color: rgba(251, 191, 36, 0.24); } .upx-flag.is-info { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); } /* ── Scorecard + Trend row ── */ .upx-row-mix { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; } .upx-scorecard { display: grid; gap: 0.45rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); } .upx-segment { display: inline-flex; align-items: center; width: fit-content; padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .upx-seg-whale { color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.12); } .upx-seg-steady { color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); } .upx-seg-at-risk, .upx-seg-churned { color: var(--red); border-color: color-mix(in srgb, var(--red) 28%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); } .upx-scorecard-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.78rem; color: var(--muted); } .upx-scorecard-meta strong { color: var(--text); } /* ── Spend trend chart ── */ .upx-section-trend { min-width: 0; } .upx-spark { display: block; width: 100%; height: 64px; border-radius: 8px; overflow: hidden; } .upx-bar { fill: var(--accent); opacity: 0.65; transition: opacity 0.2s ease; } .upx-bar:hover { opacity: 1; } /* ── Main layout: tabs + sidebar ── */ .upx-main { display: grid; grid-template-columns: 1fr 260px; gap: 0.85rem; align-items: start; } /* ── Tabs ── */ .upx-tabs-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; overflow-x: auto; } .upx-tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.85rem; border: none; background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s ease, border-color 0.15s ease; } .upx-tab:hover { color: var(--text); } .upx-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); } .upx-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.32rem; border-radius: 999px; background: color-mix(in srgb, var(--border) 72%, transparent); font-size: 0.66rem; font-weight: 700; color: var(--muted); } .upx-tab.is-active .upx-tab-badge { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .upx-tab-body { display: none; } .upx-tab-body.is-active { display: block; } /* ── Side cards ── */ .upx-side { display: grid; gap: 0.65rem; } .upx-side-card { padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); } .upx-side-card h6 { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .upx-side-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.8rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); } .upx-side-row:last-child { border-bottom: none; } .upx-side-row > span:first-child { color: var(--muted); flex-shrink: 0; } .upx-side-row strong { color: var(--text); text-align: right; word-break: break-word; } .upx-side-keyrow { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .upx-side-keyrow > div { display: grid; gap: 0.12rem; min-width: 0; width: 100%; } .upx-side-keystats { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } /* ── Sections inside tabs ── */ .upx-section { margin-bottom: 0.85rem; } .upx-section:last-child { margin-bottom: 0; } .upx-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; } .upx-section-head h5 { margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--text); } .upx-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } /* ── Generic list ── */ .upx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .upx-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.42rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); font-size: 0.8rem; } .upx-list li:last-child { border-bottom: none; } .upx-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .upx-row-meta { flex-shrink: 0; font-size: 0.74rem; color: var(--muted); white-space: nowrap; } /* ── Badge (used throughout) ── */ .upx-badge { display: inline-flex; align-items: center; padding: 0.14rem 0.5rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; border: 1px solid transparent; } .upx-badge.is-success { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 24%, transparent); } .upx-badge.is-danger { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 22%, transparent); } .upx-badge.is-warning { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border-color: rgba(251, 191, 36, 0.22); } .upx-badge.is-info { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); } /* ── Device grid ── */ .upx-device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.55rem; } .upx-device { display: flex; gap: 0.55rem; padding: 0.55rem 0.65rem; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 50%, transparent); } .upx-device-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; } .upx-device-meta { display: grid; gap: 0.12rem; min-width: 0; font-size: 0.78rem; } .upx-device-meta strong { font-size: 0.82rem; color: var(--text); } .upx-device-stats, .upx-device-when { font-size: 0.7rem; } /* ── IP list ── */ .upx-ip-row { flex-direction: column; align-items: flex-start !important; gap: 0.25rem !important; } .upx-ip-main { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .upx-ip-stats { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .upx-ip-last { font-size: 0.7rem; } /* ── Event timeline ── */ .upx-event { flex-direction: row !important; gap: 0.5rem !important; align-items: flex-start !important; padding: 0.5rem 0 !important; } .upx-event-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 0.35rem; background: var(--muted); } .upx-event.is-success .upx-event-dot { background: var(--green); } .upx-event.is-danger .upx-event-dot { background: var(--red); } .upx-event.is-info .upx-event-dot { background: var(--accent); } .upx-event-body { display: grid; gap: 0.12rem; min-width: 0; font-size: 0.8rem; } /* ── Mutation list ── */ .upx-mutation { flex-direction: column !important; align-items: flex-start !important; gap: 0.2rem !important; } .upx-mutation-main { display: grid; gap: 0.08rem; min-width: 0; font-size: 0.8rem; } .upx-mutation-side { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .upx-amount { font-weight: 700; font-size: 0.82rem; } .upx-amount.is-success { color: var(--green); } .upx-amount.is-danger { color: var(--red); } .upx-mutation-meta { font-size: 0.7rem; } /* ── Activity list ── */ .upx-activity { flex-direction: row !important; gap: 0.5rem !important; align-items: flex-start !important; } .upx-activity-type { display: inline-flex; align-items: center; padding: 0.12rem 0.4rem; border-radius: 4px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; background: color-mix(in srgb, var(--border) 60%, transparent); color: var(--muted); flex-shrink: 0; } .upx-activity.is-success .upx-activity-type { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); } .upx-activity.is-danger .upx-activity-type { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } .upx-activity-body { display: grid; gap: 0.12rem; min-width: 0; font-size: 0.8rem; } /* ── Balance summary ── */ .upx-balance-summary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.65rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); font-size: 0.8rem; color: var(--muted); } .upx-balance-summary strong { color: var(--text); } /* ── Table ── */ .upx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .upx-table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 0.78rem; } .upx-table th { text-align: left; padding: 0.42rem 0.5rem; font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; } .upx-table td { padding: 0.42rem 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); color: var(--text); vertical-align: top; } .upx-table .num { text-align: right; white-space: nowrap; } .upx-cell-time { white-space: nowrap; font-size: 0.72rem; } /* ── Truncate utility ── */ .upx-truncate { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Empty state ── */ .upx-empty { padding: 1rem 0; text-align: center; } @keyframes upx-spin { to { transform: rotate(360deg); } } /* ── UPX responsive ── */ @media (max-width: 720px) { .upx-main { grid-template-columns: 1fr; } .upx-twocol { grid-template-columns: 1fr; } .upx-row-mix { grid-template-columns: 1fr; } .upx-kpi-strip { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .upx-kpi-strip { grid-template-columns: repeat(2, 1fr); } } #panel-products .products-filter-search .tx-search-input { width: 100%; min-height: 34px; padding: 0.32rem 0.7rem 0.32rem 2rem; font-size: 0.82rem; border-radius: 8px; } #panel-products .products-filter-search .tx-search-icon { left: 0.55rem; } #panel-products .products-filter-grid .tx-filter-select { width: 100%; max-width: none; min-height: 34px; padding: 0.32rem 1.8rem 0.32rem 0.6rem; font-size: 0.8rem; border-radius: 8px; } #ha-otp-code { font-size: 1.4rem; letter-spacing: 0.5em; text-align: center; font-family: ui-monospace, monospace; } #monitoring-aju82-card .card-body { padding: 0; } @media (max-width: 980px) { .monitoring-vendors { grid-template-columns: 1fr; } .monitoring-report-controls { grid-template-columns: 1fr; } #monitoring-aju82-card .card-body { overflow-x: auto; } } #monitoring-aju82-card .card-body { max-height: 29rem; overflow: auto; } #monitoring-report-schedule-every, #monitoring-report-schedule-heartbeat { max-width: 5.8rem; } #btn-monitoring-report-schedule-save { margin-left: auto; } @media (max-width: 860px) { .monitoring-report-target-chip { grid-template-columns: minmax(0, 1fr) auto; } #btn-monitoring-report-schedule-save { margin-left: 0; } } #monitoring-report-schedule-every, #monitoring-report-schedule-heartbeat { max-width: none; text-align: left; } #btn-monitoring-report-schedule-save { width: 100%; min-height: 3.45rem; margin-left: 0; align-self: end; } #monitoring-report-schedule-status { grid-column: 1 / -1; min-width: 0; margin: 0.05rem 0 0; overflow-wrap: anywhere; text-align: left; } .form-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .form-grid-2col { grid-template-columns: 1fr; } } .form-section { border: 1px solid var(--border, #e5e7eb); padding: 10px 14px; border-radius: 8px; } .form-section legend { padding: 0 6px; font-weight: 600; font-size: 0.85rem; } .form-section label { display: block; margin: 6px 0; font-size: 0.85rem; } .form-section .input { width: 100%; max-width: 320px; } #dlg-monitoring-config { width: min(1080px, calc(100vw - 32px)); max-height: min(820px, calc(100dvh - 40px)); padding: 0; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-modal); } #dlg-monitoring-config::backdrop { background: rgba(0, 0, 0, 0.56); backdrop-filter: blur(3px); } #dlg-monitoring-config .dlg-form { display: flex; flex-direction: column; max-height: inherit; gap: 0.55rem; padding: 0.9rem; overflow: hidden; } #dlg-monitoring-config h2 { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.2; } #dlg-monitoring-config .form-grid-2col, #dlg-monitoring-config .monitoring-config-columns { display: grid; grid-template-columns: minmax(270px, 0.72fr) minmax(440px, 1.28fr); align-items: start; gap: 0.65rem; min-height: 0; overflow: auto; padding: 0.1rem 0.2rem 0.15rem 0; } #dlg-monitoring-config .form-section { min-width: 0; padding: 0.55rem 0.65rem 0.62rem; border-color: var(--hairline); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 34%, transparent); } #dlg-monitoring-config .form-section legend { padding: 0 0.35rem; color: var(--text); font-size: 0.78rem; font-weight: 800; } #dlg-monitoring-config .form-section > label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(98px, 148px); align-items: center; gap: 0.5rem; margin: 0.4rem 0; color: var(--text-secondary); font-size: 0.76rem; font-weight: 650; line-height: 1.25; } #dlg-monitoring-config .form-section > label:has(> input[type="checkbox"]) { display: inline-flex; min-height: 1.55rem; align-items: center; gap: 0.42rem; margin-right: 0.7rem; color: var(--text); } #dlg-monitoring-config input[type="checkbox"] { width: 0.95rem; height: 0.95rem; margin: 0; accent-color: var(--accent); } #dlg-monitoring-config .form-section .input { width: 100%; max-width: none; min-height: 1.9rem; padding: 0.38rem 0.52rem; border-color: var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 0.78rem; } #dlg-monitoring-config .form-section select.input { min-width: 0; } #dlg-monitoring-config .form-section p.small { margin: 0.25rem 0 0.45rem; font-size: 0.72rem; line-height: 1.35; } #cfg-aju82-perSku-wrap { max-height: 260px; overflow: auto; border: 1px solid var(--hairline); border-radius: 8px; background: color-mix(in srgb, var(--surface) 72%, transparent); } #cfg-aju82-perSku-wrap input[data-sku] { width: 4.8rem; max-width: 4.8rem; min-height: 1.65rem; padding: 0.24rem 0.42rem; font-size: 0.74rem; } #cfg-aju82-perSku-wrap .chk-inline { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--text-secondary); font-size: 0.72rem; white-space: nowrap; cursor: pointer; } #dlg-monitoring-config .dlg-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 0.45rem; padding-top: 0.55rem; border-top: 1px solid var(--hairline); background: var(--surface); } #dlg-monitoring-config .dlg-actions .btn { min-height: 2rem; padding: 0.42rem 0.8rem; border-radius: 8px; font-size: 0.76rem; } @media (max-width: 860px) { #dlg-monitoring-config { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); } #dlg-monitoring-config .form-grid-2col, #dlg-monitoring-config .monitoring-config-columns { grid-template-columns: 1fr; } #cfg-aju82-perSku-wrap { max-height: 220px; } } @media (max-width: 520px) { #dlg-monitoring-config .dlg-form { padding: 0.75rem; } #dlg-monitoring-config .form-section > label { grid-template-columns: 1fr; gap: 0.28rem; } } .nav-badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px; background: #dc2626; color: #fff; border-radius: 999px; font-size: 0.65rem; font-weight: 600; text-align: center; line-height: 1.4; } .nav-badge.hidden { display: none; } /* Overview cockpit v1: compact, high-density dashboard landing page. */ #panel-overview.overview-cockpit { display: grid; gap: 0.72rem; min-width: 0; } #panel-overview .overview-head { display: grid; grid-template-columns: minmax(260px, 0.82fr) minmax(520px, 1.18fr); align-items: start; gap: 0.65rem; padding: 0; margin: 0; } #panel-overview .overview-greeting { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.36rem 0.48rem; min-width: 0; } #panel-overview .overview-title { grid-column: 1 / -1; font-size: clamp(1.08rem, 1.15vw, 1.34rem); font-weight: 750; line-height: 1.12; white-space: normal; } #panel-overview .overview-tagline { width: fit-content; min-height: 1.55rem; padding: 0.15rem 0.46rem; border-radius: 7px; font-size: 0.71rem; letter-spacing: 0; } #panel-overview .overview-meta { grid-column: 1 / -1; gap: 0.28rem; } #panel-overview .overview-meta > span { min-height: 1.5rem; padding: 0.12rem 0.44rem; border-radius: 7px; font-size: 0.7rem; letter-spacing: 0; } #panel-overview .overview-actions { padding: 0.56rem; gap: 0.42rem; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 82%, transparent), color-mix(in srgb, var(--surface) 94%, transparent)); } #panel-overview .overview-actions-top { display: flex; align-items: center; gap: 0.38rem; } #panel-overview .ov-period-tabs { flex: 1 1 auto; gap: 0.22rem; min-width: 0; } #panel-overview .ov-period-tab { min-height: 1.76rem; padding: 0.25rem 0.52rem; border-radius: 7px; font-size: 0.7rem; letter-spacing: 0; } #panel-overview .overview-action-buttons { gap: 0.28rem; } #panel-overview .overview-action-btn { min-height: 1.78rem; padding: 0.3rem 0.52rem; border-radius: 7px; font-size: 0.72rem; } #panel-overview .overview-action-icon { width: 0.82rem; height: 0.82rem; flex-basis: 0.82rem; } #panel-overview .ov-period-meta { font-size: 0.69rem; line-height: 1.25; } #panel-overview .ov-date-range { padding: 0.4rem; gap: 0.34rem; border-radius: 8px; } #panel-overview .ov-date-field { flex: 0 1 136px; min-width: 118px; max-width: 148px; } #panel-overview .ov-date-field span { font-size: 0.6rem; letter-spacing: 0; } #panel-overview .ov-date-field input, #panel-overview .ov-date-actions .btn { min-height: 1.86rem; padding: 0.32rem 0.48rem; border-radius: 7px; font-size: 0.72rem; } #panel-overview .ov-date-actions { gap: 0.28rem; } #panel-overview .analytics-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.52rem; margin: 0; } #panel-overview .a-card { min-height: 104px; padding: 0.62rem 0.68rem 0.48rem; border-radius: 10px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ic, var(--primary)) 12%, transparent), transparent 34%), var(--card); } #panel-overview .a-card:hover { transform: translateY(-1px); } #panel-overview .a-card-top { gap: 0.42rem; margin-bottom: 0.28rem; padding-right: 2.7rem; } #panel-overview .a-card-label { margin: 0; font-size: 0.62rem; line-height: 1.16; letter-spacing: 0; } #panel-overview .a-card-value { font-size: clamp(1.02rem, 1.2vw, 1.32rem); line-height: 1.05; letter-spacing: 0; } #panel-overview .a-card-badge { padding: 0.12rem 0.36rem; border-radius: 7px; font-size: 0.62rem; } #panel-overview .a-card-icon { width: 28px; height: 28px; border-radius: 7px; } #panel-overview .a-card-icon svg { width: 16px; height: 16px; } #panel-overview .a-card-spark { height: 22px; padding-top: 0.25rem; } #panel-overview .a-card-live { padding-top: 0.18rem; font-size: 0.62rem; } #panel-overview .ai-insight-panel { display: grid; gap: 0.62rem; padding: 0.68rem; margin: 0; border-radius: 10px; } #panel-overview .ai-insight-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr); gap: 0.58rem; } #panel-overview .ai-insight-hero-main, #panel-overview .ai-insight-section { gap: 0.52rem; } #panel-overview .ai-insight-kicker, #panel-overview .ai-insight-section-kicker, #panel-overview .ai-insight-target-kicker, #panel-overview .ai-summary-label, #panel-overview .ai-insight-card-label { font-size: 0.62rem; letter-spacing: 0; } #panel-overview .ai-insight-hero-copy { gap: 0.55rem; } #panel-overview .ai-insight-hero-copy .panel-title { font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.15; } #panel-overview .ai-insight-hero-copy .panel-sub { max-width: 52ch; margin-top: 0.18rem; font-size: 0.72rem; line-height: 1.35; } #panel-overview .ai-insight-hero-badge, #panel-overview .ai-insight-section-note, #panel-overview .ai-insight-pill, #panel-overview .ai-insight-item-badge { min-height: 1.42rem; padding: 0.12rem 0.46rem; border-radius: 7px; font-size: 0.64rem; letter-spacing: 0; } #panel-overview .ai-insight-summary-grid { gap: 0.46rem; } #panel-overview .ai-summary-card { min-height: 72px; gap: 0.3rem; padding: 0.48rem 0.52rem; border-radius: 8px; } #panel-overview .ai-summary-card strong { font-size: clamp(0.86rem, 1vw, 1.08rem); line-height: 1.12; letter-spacing: 0; } #panel-overview .ai-summary-sub, #panel-overview .ai-insight-sub, #panel-overview .ai-insight-emphasis, #panel-overview #ai-target-status { font-size: 0.68rem; line-height: 1.34; } #panel-overview .ai-insight-target-box { gap: 0.52rem; padding: 0.58rem; border-radius: 9px; } #panel-overview .ai-insight-target-box-head { gap: 0.45rem; } #panel-overview .ai-insight-target-box-head strong { margin-top: 0.1rem; font-size: 0.84rem; line-height: 1.22; } #panel-overview .ai-insight-target-box .btn, #panel-overview .ai-insight-target-actions .btn { min-height: 1.9rem; padding: 0.34rem 0.56rem; border-radius: 7px; font-size: 0.72rem; } #panel-overview .ai-insight-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; } #panel-overview .ai-insight-field { gap: 0.24rem; } #panel-overview .ai-insight-field span { font-size: 0.64rem; line-height: 1.2; } #panel-overview .ai-insight-field input { min-height: 1.94rem; padding: 0.34rem 0.46rem; border-radius: 7px; font-size: 0.74rem; } #panel-overview .ai-insight-target-actions { gap: 0.38rem; } #panel-overview .ai-insight-section { padding-top: 0.58rem; border-top: 1px solid var(--hairline); } #panel-overview .ai-insight-section-head { align-items: center; gap: 0.45rem; } #panel-overview .ai-insight-section-title { margin-top: 0.06rem; font-size: 0.86rem; line-height: 1.18; } #panel-overview .ai-insight-kpi-wrap, #panel-overview .ai-insight-grid, #panel-overview .ai-insight-grid--achievement, #panel-overview .ai-insight-grid--gap-row, #panel-overview .ai-forecast-grid, #panel-overview .ai-insight-list { gap: 0.46rem; margin-top: 0; } #panel-overview .ai-insight-grid--achievement, #panel-overview .ai-insight-grid--gap-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } #panel-overview .ai-insight-card, #panel-overview .ai-insight-grid--achievement .ai-insight-card--progress, #panel-overview .ai-insight-card--forecast { min-height: 102px; gap: 0.36rem; padding: 0.52rem 0.58rem; border-radius: 8px; } #panel-overview .ai-insight-card--gap { min-height: 82px; padding: 0.46rem 0.54rem; } #panel-overview .ai-insight-card-topline { gap: 0.38rem; } #panel-overview .ai-insight-card strong, #panel-overview .ai-insight-card strong.ai-kpi-hero-value, #panel-overview .ai-insight-card strong.ai-kpi-gap-value, #panel-overview #ai-forecast-revenue, #panel-overview #ai-forecast-profit { font-size: clamp(0.98rem, 1.25vw, 1.28rem); line-height: 1.08; letter-spacing: 0; } #panel-overview .ai-progress-track { height: 0.38rem; } #panel-overview .ai-progress-track--mini { height: 0.32rem; } #panel-overview .ai-progress-meta { gap: 0.42rem; font-size: 0.64rem; } #panel-overview .ai-insight-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.45rem; padding: 0.5rem 0.55rem; border-radius: 8px; } #panel-overview .ai-insight-item strong, #panel-overview .ai-insight-item-lead, #panel-overview .ai-insight-item-sub { min-width: 0; font-size: 0.7rem; line-height: 1.3; } #panel-overview .ai-insight-item-badge { grid-row: span 3; align-self: start; } #panel-overview .grid-2 { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: 0.58rem; } #panel-overview .grid-2 > .panel, #panel-overview #panel-current-processing, #panel-overview #panel-profit-erosion, #panel-overview #panel-stock-watch, #panel-overview #panel-margin-insight, #panel-overview #panel-invoice-ledger { padding: 0.68rem; border-radius: 10px; } #panel-overview .panel-head { gap: 0.42rem; margin-bottom: 0.44rem; } #panel-overview .panel-title { font-size: 0.86rem; line-height: 1.18; } #panel-overview .panel-sub { font-size: 0.68rem; line-height: 1.3; } #panel-overview .bar-chart { height: 168px; gap: 6px; padding-top: 0.2rem; } #panel-overview .bar { max-width: 34px; border-radius: 6px 6px 4px 4px; } #panel-overview .ov-insight-row { gap: 0.42rem; padding-top: 0.34rem; } #panel-overview .ov-insight-item, #panel-overview .bar-count, #panel-overview .bar-label, #panel-overview .bar-tag { font-size: 0.62rem; letter-spacing: 0; } #panel-overview .ov-product-bars { padding: 0.08rem 0; } #panel-overview .ov-pbar-row { gap: 0.42rem; padding: 0.3rem 0; } #panel-overview .ov-pbar-name { width: 92px; font-size: 0.68rem; } @media (max-width: 1320px) { #panel-overview .overview-head { grid-template-columns: 1fr; } #panel-overview .analytics-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } #panel-overview .ai-insight-hero, #panel-overview .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 900px) { #panel-overview.overview-cockpit { gap: 0.62rem; } #panel-overview .overview-greeting, #panel-overview .overview-actions-top, #panel-overview .overview-action-buttons, #panel-overview .ov-date-range, #panel-overview .ov-date-actions { display: flex; flex-wrap: wrap; align-items: center; } #panel-overview .overview-actions { padding: 0.56rem; gap: 0.48rem; } #panel-overview .ov-period-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; } #panel-overview .ov-period-tab, #panel-overview .overview-action-btn, #panel-overview .ov-date-actions .btn { width: auto; min-height: 1.9rem; padding: 0.32rem 0.52rem; } #panel-overview .analytics-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } #panel-overview .ai-insight-summary-grid, #panel-overview .ai-insight-targets, #panel-overview .ai-insight-grid--achievement, #panel-overview .ai-insight-grid--gap-row, #panel-overview .ai-forecast-grid { grid-template-columns: 1fr; } #panel-overview .ai-insight-section-head, #panel-overview .ai-insight-target-box-head { align-items: flex-start; } } @media (max-width: 560px) { #panel-overview .ai-chip-bar { margin-inline: -0.1rem; } #panel-overview .overview-title { font-size: 1.18rem; } #panel-overview .analytics-cards { grid-template-columns: 1fr; } #panel-overview .a-card { min-height: 96px; } #panel-overview .overview-action-buttons, #panel-overview .ov-date-actions, #panel-overview .ov-date-field { width: 100%; } #panel-overview .overview-action-btn, #panel-overview .ov-date-actions .btn, #panel-overview .ov-date-field { flex: 1 1 100%; } } /* Overview cockpit v2: tighter command center composition. */ #panel-overview.overview-cockpit { gap: 0.55rem; margin-top: -0.15rem; } #panel-overview .overview-head { grid-template-columns: minmax(360px, 0.78fr) minmax(560px, 1.22fr); align-items: center; gap: 0.62rem; padding: 0.52rem 0.58rem; border: 1px solid var(--hairline); border-radius: 11px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 64%, transparent), color-mix(in srgb, var(--surface) 94%, transparent)); } #panel-overview .overview-greeting { display: flex; flex-wrap: wrap; align-items: center; gap: 0.28rem; } #panel-overview .overview-title { flex: 1 1 100%; font-size: clamp(1rem, 1.05vw, 1.22rem); line-height: 1.05; } #panel-overview .overview-tagline, #panel-overview .overview-meta > span { min-height: 1.34rem; padding: 0.09rem 0.42rem; border-radius: 6px; font-size: 0.66rem; } #panel-overview .overview-meta { display: inline-flex; flex: 1 1 auto; gap: 0.25rem; width: auto; } #panel-overview .overview-actions { padding: 0; gap: 0.28rem; border: 0; background: transparent; } #panel-overview .overview-actions-top { justify-content: flex-end; gap: 0.28rem; } #panel-overview .ov-period-tabs { flex: 0 1 auto; padding: 0.15rem; border: 1px solid var(--hairline); border-radius: 8px; background: color-mix(in srgb, var(--surface) 64%, transparent); } #panel-overview .ov-period-tab, #panel-overview .overview-action-btn { min-height: 1.62rem; padding: 0.2rem 0.46rem; font-size: 0.66rem; } #panel-overview .overview-action-buttons { flex-wrap: nowrap; } #panel-overview .ov-period-meta { justify-content: flex-end; min-height: 0; font-size: 0.66rem; } #panel-overview .ov-date-range { justify-content: flex-end; width: auto; padding: 0; border: 0; background: transparent; } #panel-overview .ov-date-field { position: relative; flex: 0 1 126px; min-width: 112px; max-width: 132px; } #panel-overview .ov-date-field span { position: static; width: auto; height: auto; margin: 0 0 2px 0; overflow: visible; clip: auto; display: block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } #panel-overview .ov-date-field input, #panel-overview .ov-date-actions .btn { min-height: 1.68rem; padding: 0.24rem 0.44rem; font-size: 0.68rem; } #panel-overview .analytics-cards { gap: 0.46rem; } #panel-overview .a-card { min-height: 86px; padding: 0.52rem 0.58rem 0.4rem; border-radius: 9px; } #panel-overview .a-card-top { gap: 0.34rem; padding-right: 2.35rem; margin-bottom: 0.08rem; } #panel-overview .a-card-label { font-size: 0.58rem; } #panel-overview .a-card-value { font-size: clamp(0.96rem, 1vw, 1.18rem); } #panel-overview .a-card-badge { padding: 0.08rem 0.3rem; font-size: 0.58rem; } #panel-overview .a-card-icon { width: 24px; height: 24px; } #panel-overview .a-card-icon svg { width: 14px; height: 14px; } #panel-overview .a-card-spark { height: 15px; padding-top: 0.08rem; } #panel-overview .a-card-live { padding-top: 0.1rem; font-size: 0.58rem; } #panel-overview .ai-insight-panel { gap: 0.46rem; padding: 0.58rem; border-radius: 11px; } #panel-overview .ai-insight-hero { grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.58fr); gap: 0.5rem; } #panel-overview .ai-insight-hero-main, #panel-overview .ai-insight-target-box, #panel-overview .ai-summary-card, #panel-overview .ai-insight-card { min-width: 0; } #panel-overview .ai-insight-hero-copy { align-items: center; gap: 0.42rem; } #panel-overview .ai-insight-hero-copy .panel-title { font-size: clamp(0.98rem, 1.05vw, 1.16rem); } #panel-overview .ai-insight-hero-copy .panel-sub { max-width: none; font-size: 0.68rem; line-height: 1.28; } #panel-overview .ai-insight-hero-badge { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; } #panel-overview .ai-insight-summary-grid { gap: 0.38rem; } #panel-overview .ai-summary-card { min-height: 58px; padding: 0.42rem 0.48rem; } #panel-overview .ai-summary-card strong { font-size: clamp(0.82rem, 0.9vw, 1rem); overflow-wrap: anywhere; } #panel-overview .ai-summary-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel-overview .ai-insight-target-box { gap: 0.42rem; padding: 0.48rem; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 92%, #60a5fa 8%), color-mix(in srgb, var(--surface) 94%, transparent)); } #panel-overview .ai-insight-target-box-head strong { font-size: 0.78rem; } #panel-overview .ai-insight-target-box .btn, #panel-overview .ai-insight-target-actions .btn { min-height: 1.7rem; padding: 0.26rem 0.48rem; font-size: 0.68rem; } #panel-overview .ai-insight-field input { min-height: 1.76rem; padding: 0.28rem 0.42rem; font-size: 0.7rem; } #panel-overview #ai-target-status { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel-overview .ai-insight-section { gap: 0.38rem; padding-top: 0.46rem; } #panel-overview .ai-insight-section-head { min-height: 1.6rem; } #panel-overview .ai-insight-section-title { font-size: 0.8rem; } #panel-overview .ai-insight-card, #panel-overview .ai-insight-grid--achievement .ai-insight-card--progress, #panel-overview .ai-insight-card--forecast { min-height: 78px; padding: 0.42rem 0.5rem; } #panel-overview .ai-insight-card--gap { min-height: 68px; } #panel-overview .ai-insight-card strong, #panel-overview .ai-insight-card strong.ai-kpi-hero-value, #panel-overview .ai-insight-card strong.ai-kpi-gap-value, #panel-overview #ai-forecast-revenue, #panel-overview #ai-forecast-profit { font-size: clamp(0.9rem, 1vw, 1.1rem); } #panel-overview .ai-insight-card.ai-insight-bad, #panel-overview .ai-insight-item--bad { border-color: color-mix(in srgb, #ef4444 26%, var(--hairline)); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #ef4444 4%), color-mix(in srgb, var(--surface-2) 95%, transparent)); } #panel-overview .ai-insight-card.ai-insight-warn { border-color: color-mix(in srgb, #f59e0b 28%, var(--hairline)); } #panel-overview .ai-insight-card.ai-insight-good { border-color: color-mix(in srgb, #22c55e 28%, var(--hairline)); } #panel-overview .ai-progress-track { height: 0.3rem; } #panel-overview .grid-2 > .panel, #panel-overview #panel-current-processing, #panel-overview #panel-profit-erosion, #panel-overview #panel-stock-watch, #panel-overview #panel-margin-insight, #panel-overview #panel-invoice-ledger { padding: 0.56rem; } #panel-overview .bar-chart { height: 148px; } /* Ops widgets: follow active dashboard theme. */ :where(#panel-overview, #panel-vendor) .ops-empty-state { padding: 0.75rem; border: 1px dashed var(--border-strong); border-radius: 8px; background: color-mix(in srgb, var(--surface) 72%, var(--surface-2)); color: var(--muted); } :where(#panel-overview, #panel-vendor) .ops-alert-card { padding: 0.75rem; border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: 8px; margin-bottom: 0.5rem; background: color-mix(in srgb, var(--surface) 70%, var(--surface-2)); color: var(--text); } :where(#panel-overview, #panel-vendor) .ops-profit-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; } :where(#panel-overview, #panel-vendor) .ops-vendor-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center; } :where(#panel-overview, #panel-vendor) .ops-alert-title { color: var(--text); font-weight: 700; } :where(#panel-overview, #panel-vendor) .ops-alert-meta, :where(#panel-overview, #panel-vendor) .ops-alert-muted { color: var(--muted); } :where(#panel-overview, #panel-vendor) .ops-alert-meta { font-size: 0.75rem; } :where(#panel-overview, #panel-vendor) .ops-alert-detail { margin-top: 0.25rem; color: var(--text-secondary); font-size: 0.75rem; } :where(#panel-overview, #panel-vendor) .ops-alert-detail.is-danger { color: var(--red); } :where(#panel-overview, #panel-vendor) .ops-section-title { margin-bottom: 0.4rem; color: var(--amber); font-size: 0.8rem; font-weight: 700; } :where(#panel-overview, #panel-vendor) .ops-mini-row { margin-bottom: 0.25rem; padding: 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-secondary); font-size: 0.75rem; } :where(#panel-overview, #panel-vendor) .ops-pill { display: inline-flex; gap: 0.35rem; align-items: center; padding: 0.25rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); } :where(#panel-overview, #panel-vendor) .ops-pill-label { color: var(--muted); } :where(#panel-overview, #panel-vendor) .ops-pill-value { color: var(--text); } #panel-overview .intel-tab-btn { margin: 0 0.3rem 0.3rem 0; padding: 0.4rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } #panel-overview .intel-tab-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); } #panel-overview .intel-tab-btn.is-active { border-color: var(--accent); background: var(--accent); color: #fff; } html:not([data-theme="dark"]) #panel-overview #panel-intel [style*="background:#0f172a"], html:not([data-theme="dark"]) #panel-overview #panel-intel [style*="background:#1e293b"] { background: var(--surface-2) !important; color: var(--text) !important; } html:not([data-theme="dark"]) #panel-overview #panel-intel [style*="color:#e2e8f0"], html:not([data-theme="dark"]) #panel-overview #panel-intel [style*="color:#cbd5e1"] { color: var(--text) !important; } html:not([data-theme="dark"]) #panel-overview #panel-intel [style*="color:#94a3b8"], html:not([data-theme="dark"]) #panel-overview #panel-intel [style*="color:#64748b"] { color: var(--muted) !important; } @media (max-width: 1320px) { #panel-overview .overview-head { grid-template-columns: 1fr; } #panel-overview .overview-actions-top, #panel-overview .ov-period-meta, #panel-overview .ov-date-range { justify-content: flex-start; } } @media (max-width: 900px) { #panel-overview .overview-head { padding: 0.56rem; } #panel-overview .overview-title { flex-basis: 100%; } #panel-overview .overview-actions-top, #panel-overview .ov-date-range { align-items: flex-start; } #panel-overview .ov-date-field span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } } @media (max-width: 560px) { #panel-overview .ai-insight-hero-main { overflow: hidden; } #panel-overview .ai-insight-hero-copy, #panel-overview .ai-insight-target-box-head, #panel-overview .ai-insight-section-head { flex-direction: column; align-items: flex-start; } } /* KPI accent colors */ #wa-live-status::before { background: #22c55e; } #wa-live-queue::before { background: #f59e0b; } #wa-live-7d::before { background: #3b82f6; } #wa-live-rates::before { background: #8b5cf6; } #wa-live-quality::before { background: #ef4444; } #wa-live-assets::before { background: #06b6d4; } /* Overview mobile filter cleanup: keep date controls compact on narrow screens. */ @media (max-width: 760px) { #panel-overview .overview-actions { width: 100%; padding: 0.56rem; gap: 0.48rem; border: 1px solid var(--hairline); border-radius: 10px; background: color-mix(in srgb, var(--surface) 94%, transparent); } #panel-overview .overview-actions-top { display: grid; grid-template-columns: 1fr; gap: 0.46rem; width: 100%; } #panel-overview .ov-period-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); width: 100%; gap: 0.34rem; padding: 0.24rem; } #panel-overview .ov-period-tab { width: 100%; min-height: 2.05rem; padding: 0.36rem 0.28rem; font-size: 0.72rem; flex: 1 1 auto; } #panel-overview .overview-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.46rem; width: 100%; } #panel-overview .overview-action-btn { width: 100%; min-height: 2.18rem; justify-content: center; } #panel-overview .ov-period-meta { width: 100%; justify-content: flex-start; font-size: 0.72rem; line-height: 1.28; } #panel-overview .ov-date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0.5rem; align-items: end; padding: 0.56rem; border: 1px solid var(--hairline); border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); } #panel-overview .ov-date-field { display: grid; width: 100%; min-width: 0; max-width: none; flex: 1 1 auto; gap: 0.24rem; } #panel-overview .ov-date-field span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 0.62rem; line-height: 1.2; letter-spacing: 0.04em; } #panel-overview .ov-date-field input { width: 100%; height: 2.55rem; min-height: 2.55rem; max-height: 2.55rem; padding: 0.42rem 0.58rem; font-size: 0.82rem; line-height: 1.2; } #panel-overview .ov-date-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0.5rem; margin: 0; } #panel-overview .ov-date-actions .btn { width: 100%; min-height: 2.45rem; padding: 0.45rem 0.62rem; justify-content: center; flex: 1 1 auto; } } @media (max-width: 420px) { #panel-overview .ov-period-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 340px) { #panel-overview .ov-date-range { grid-template-columns: 1fr; } #panel-overview .ov-date-actions { grid-template-columns: 1fr; } } /* Overview AI Ops mobile cleanup: stack the target editor instead of squeezing columns. */ @media (max-width: 900px) { #panel-overview .ai-insight-hero { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; gap: 0.6rem; align-items: start; } #panel-overview .ai-insight-hero-main, #panel-overview .ai-insight-target-box { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } #panel-overview .ai-insight-hero-main { overflow: visible; } #panel-overview .ai-insight-target-box { justify-self: stretch; } #panel-overview .ai-insight-targets-form, #panel-overview .ai-insight-targets, #panel-overview .ai-insight-field, #panel-overview .ai-insight-field input, #panel-overview .ai-insight-target-actions, #panel-overview #ai-target-status { max-width: 100%; min-width: 0; } #panel-overview #ai-target-status { white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; } } @media (max-width: 560px) { #panel-overview .ai-insight-panel { padding: 0.56rem; } #panel-overview .ai-insight-target-box-head { display: grid; grid-template-columns: 1fr; } #panel-overview .ai-insight-target-box-head .btn, #panel-overview .ai-insight-target-actions .btn { width: 100%; justify-content: center; } } /* Menu mobile cleanup: convert oversized cards into compact, scannable rows. */ @media (max-width: 900px) { #panel-menu { padding-bottom: calc(var(--mobile-nav-h) + 2rem + env(safe-area-inset-bottom)); } #panel-menu .menu-page-head { margin-bottom: 0.62rem; } #panel-menu .menu-page-head h1 { font-size: 1.12rem; line-height: 1.15; } #panel-menu .menu-page-head p { display: none; } #panel-menu .menu-dashboard { gap: 0.7rem; } #panel-menu .menu-hero, #panel-menu .menu-quick-wrap, #panel-menu .menu-filter-shell { padding: 0.72rem; border-radius: 10px; } #panel-menu .menu-hero { grid-template-columns: minmax(0, 1fr); gap: 0.58rem; } #panel-menu .menu-hero-main { gap: 0.34rem; } #panel-menu .menu-role-pill { min-height: 1.45rem; padding: 0.18rem 0.48rem; border-radius: 7px; font-size: 0.68rem; } #panel-menu .menu-hero-main h2 { font-size: 1.12rem; } #panel-menu .menu-hero-main p { font-size: 0.76rem; line-height: 1.34; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #panel-menu .menu-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.46rem; } #panel-menu .menu-summary-card { min-height: 0; gap: 0.14rem; padding: 0.54rem; border-radius: 8px; } #panel-menu .menu-summary-label { font-size: 0.6rem; line-height: 1.18; } #panel-menu .menu-summary-value { font-size: 1.06rem; } #panel-menu .menu-summary-foot { font-size: 0.66rem; line-height: 1.22; } #panel-menu .menu-quick-wrap { gap: 0.6rem; } #panel-menu .menu-section-head { display: grid; grid-template-columns: 1fr; gap: 0.24rem; } #panel-menu .menu-section-head h2 { margin-bottom: 0.18rem; font-size: 0.94rem; } #panel-menu .menu-section-head p { font-size: 0.72rem; line-height: 1.36; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } #panel-menu .menu-quick-actions { grid-template-columns: minmax(0, 1fr); gap: 0.52rem; } #panel-menu .menu-quick-action { display: grid; grid-template-columns: 2.32rem minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0.16rem 0.62rem; align-items: center; min-height: 0; padding: 0.68rem; border-radius: 10px; } #panel-menu .menu-quick-action::before { opacity: 0.58; } #panel-menu .menu-quick-head { display: contents; } #panel-menu .menu-quick-icon { grid-column: 1; grid-row: 1 / span 2; width: 2.24rem; min-width: 2.24rem; height: 2.24rem; border-radius: 8px; font-size: 0.72rem; align-self: center; } #panel-menu .menu-quick-badge { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; max-width: 7.1rem; min-height: 1.44rem; padding: 0.12rem 0.46rem; border-radius: 999px; font-size: 0.66rem; overflow: hidden; text-overflow: ellipsis; } #panel-menu .menu-quick-body { grid-column: 2; grid-row: 1 / span 2; gap: 0.16rem; } #panel-menu .menu-quick-title { font-size: 0.92rem; line-height: 1.18; } #panel-menu .menu-quick-desc { min-height: 0; font-size: 0.72rem; line-height: 1.34; -webkit-line-clamp: 2; } #panel-menu .menu-quick-foot { grid-column: 3; grid-row: 2; justify-self: end; align-self: end; gap: 0; margin: 0; padding: 0; } #panel-menu .menu-quick-link { display: none; } #panel-menu .menu-quick-arrow { width: 1.86rem; height: 1.86rem; border-radius: 7px; } #panel-menu .menu-filter-shell { gap: 0.54rem; } #panel-menu .menu-toolbar { grid-template-columns: minmax(0, 1fr); gap: 0.54rem; } #panel-menu .menu-search { min-height: 2.38rem; gap: 0.52rem; padding-inline: 0.68rem; border-radius: 8px; } #panel-menu .menu-search input { font-size: 0.78rem; } #panel-menu .menu-category-tabs { flex-wrap: nowrap; justify-content: flex-start; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.12rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #panel-menu .menu-category-tabs::-webkit-scrollbar { display: none; } #panel-menu .menu-category-tab { flex: 0 0 auto; min-height: 2.12rem; padding: 0.38rem 0.62rem; border-radius: 7px; font-size: 0.72rem; } #panel-menu .menu-filter-meta { font-size: 0.72rem; line-height: 1.34; } #panel-menu .menu-panel-grid { grid-template-columns: minmax(0, 1fr); gap: 0.52rem; } #panel-menu .menu-panel-tile { display: grid; grid-template-columns: 2.28rem minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 0.12rem 0.58rem; align-items: center; min-height: 0; padding: 0.66rem; border-radius: 10px; } #panel-menu .menu-panel-tile-top, #panel-menu .menu-panel-tile-foot { display: contents; } #panel-menu .menu-panel-tile-icon { grid-column: 1; grid-row: 1 / span 3; width: 2.2rem; min-width: 2.2rem; height: 2.2rem; border-radius: 8px; font-size: 0.7rem; align-self: center; } #panel-menu .menu-panel-tile-badge { grid-column: 3; grid-row: 1; justify-self: end; max-width: 7rem; min-height: 1.42rem; padding: 0.1rem 0.44rem; font-size: 0.64rem; overflow: hidden; text-overflow: ellipsis; } #panel-menu .menu-panel-tile-kicker { grid-column: 2; grid-row: 1; min-width: 0; font-size: 0.6rem; line-height: 1.18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel-menu .menu-panel-tile-title { grid-column: 2; grid-row: 2; min-width: 0; font-size: 0.9rem; line-height: 1.18; overflow-wrap: anywhere; } #panel-menu .menu-panel-tile-desc { grid-column: 2; grid-row: 3; display: -webkit-box; min-width: 0; font-size: 0.72rem; line-height: 1.3; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } #panel-menu .menu-panel-tile-foot > span:not(.menu-panel-tile-link) { display: none; } #panel-menu .menu-panel-tile-link { grid-column: 3; grid-row: 2 / span 2; display: inline-flex; align-items: center; justify-content: center; justify-self: end; align-self: center; min-height: 1.76rem; padding: 0 0.46rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 7px; background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface)); color: var(--accent-strong); font-size: 0.66rem; white-space: nowrap; } } @media (max-width: 380px) { #panel-menu .menu-quick-badge, #panel-menu .menu-panel-tile-badge { max-width: 5.8rem; } #panel-menu .menu-panel-tile-link { padding-inline: 0.38rem; font-size: 0.62rem; } } /* ══════════════════════════════════════════════════════════════════════ UI/UX Audit Patches — 2026-05-08 Step 1: Margin column color badges Step 2: Pencil icon hover-only Step 3: Compact icon-only action buttons ══════════════════════════════════════════════════════════════════════ */ /* ── Step 1: Margin column badges ── */ .margin-cell { text-align: center; } .margin-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; } .margin-ok .margin-badge { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); } .margin-warn .margin-badge { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); } .margin-danger .margin-badge { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.3); } /* ── Profit column badges ── */ .profit-cell { text-align: center; } .profit-value { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; } .profit-positive .profit-value { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); } .profit-negative .profit-value { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.3); } .profit-zero .profit-value { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); } /* ── Fix 1: Profit badge nowrap ── */ .profit-value { white-space: nowrap; min-width: 4.5rem; text-align: center; } /* ── Fix 2: Margin badge nowrap ── */ .margin-badge { white-space: nowrap; } .pie-row:hover .rpc-edit-icon { opacity: 0.6; } /* ── Step 3: Icon-only action buttons ── */ .btn-icon-only { min-width: unset !important; padding: 4px 8px !important; font-size: 1rem !important; line-height: 1 !important; } .btn-icon-only + .btn-icon-only { margin-left: 2px; } /* ── Step 6: Collapsible filter grid ── */ .products-filter-grid.filter-collapsed .tx-filter-select { display: none; } #btn-products-toggle-adv-filter { font-size: 0.75rem; opacity: 0.7; transition: opacity 0.2s; } #btn-products-toggle-adv-filter:hover { opacity: 1; } /* Skeleton Loader */ .skeleton-loader { display: inline-block; background-color: var(--color-surface-hover, #334155); border-radius: var(--radius-sm, 4px); animation: skeleton-pulse 1.5s infinite ease-in-out; min-height: 1.2em; vertical-align: middle; } .skeleton-loader.skeleton-short { width: 50px; } .skeleton-loader.skeleton-medium { width: 120px; } .skeleton-loader.skeleton-long { width: 100%; } @keyframes skeleton-pulse { 0% { opacity: 0.6; } 50% { opacity: 0.2; } 100% { opacity: 0.6; } } /* Micro-Animations: Fade in up for cards */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .card, .dashboard-card, .metric-card, .ai-summary-card, .wa-card, .ai-kpi-card { animation: fadeInUp 0.4s ease forwards; } /* Smooth Theme Transitions */ body, .card, .dashboard-card, .metric-card, .ai-summary-card, .wa-card, .sidebar, .topbar { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Vendor panels that use the shared `.card` markup but do not have a panel-specific stylesheet. Keep these aligned with the active theme. */ #panel-seagmapi .card, #panel-darkvyn .card, #panel-topbos .card { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } html:not([data-theme="dark"]) #panel-seagmapi .card, html:not([data-theme="dark"]) #panel-darkvyn .card, html:not([data-theme="dark"]) #panel-topbos .card { border-color: rgba(15, 23, 42, 0.06); box-shadow: var(--panel-elev); } #panel-seagmapi .card-head, #panel-darkvyn .card-head, #panel-topbos .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } #panel-seagmapi .card-head h2, #panel-seagmapi .card-head h3, #panel-darkvyn .card-head h2, #panel-darkvyn .card-head h3, #panel-topbos .card-head h2, #panel-topbos .card-head h3 { margin: 0; color: var(--text); } #panel-seagmapi .table, #panel-darkvyn .table, #panel-topbos .table { min-width: 0; background: var(--surface); } #panel-seagmapi label > span, #panel-darkvyn label > span, #panel-topbos label > span { color: var(--text-secondary); font-weight: 600; } #panel-seagmapi input:not([type="checkbox"]):not([type="radio"]), #panel-seagmapi select, #panel-seagmapi textarea, #panel-darkvyn input:not([type="checkbox"]):not([type="radio"]), #panel-darkvyn select, #panel-darkvyn textarea, #panel-topbos input:not([type="checkbox"]):not([type="radio"]), #panel-topbos select, #panel-topbos textarea { min-height: 2.4rem; padding: 0.56rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--text); outline: none; } #panel-seagmapi input:not([type="checkbox"]):not([type="radio"]):focus, #panel-seagmapi select:focus, #panel-seagmapi textarea:focus, #panel-darkvyn input:not([type="checkbox"]):not([type="radio"]):focus, #panel-darkvyn select:focus, #panel-darkvyn textarea:focus, #panel-topbos input:not([type="checkbox"]):not([type="radio"]):focus, #panel-topbos select:focus, #panel-topbos textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } [data-theme="dark"] #panel-seagmapi input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] #panel-seagmapi select, [data-theme="dark"] #panel-seagmapi textarea, [data-theme="dark"] #panel-darkvyn input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] #panel-darkvyn select, [data-theme="dark"] #panel-darkvyn textarea, [data-theme="dark"] #panel-topbos input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] #panel-topbos select, [data-theme="dark"] #panel-topbos textarea { border-color: var(--border-strong); background: var(--surface-2); } #panel-seagmapi pre, #panel-darkvyn pre, #panel-topbos pre { border: 1px solid var(--hairline); background: var(--surface-2) !important; color: var(--text); } #panel-darkvyn .darkvyn-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; } #panel-darkvyn .darkvyn-summary-card { min-width: 0; padding: 0.95rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); } html:not([data-theme="dark"]) #panel-darkvyn .darkvyn-summary-card { border-color: rgba(15, 23, 42, 0.06); box-shadow: var(--panel-elev); } #panel-darkvyn .darkvyn-summary-card span, #panel-darkvyn .darkvyn-summary-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #panel-darkvyn .darkvyn-summary-card span { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } #panel-darkvyn .darkvyn-summary-card strong { display: block; margin-top: 0.35rem; color: var(--text); font-size: 1.45rem; line-height: 1.15; } #panel-darkvyn .darkvyn-summary-card small { margin-top: 0.35rem; color: var(--text-secondary); font-size: 0.78rem; } #panel-darkvyn .darkvyn-table-wrap { max-height: 430px; overflow: auto; } #panel-darkvyn .darkvyn-order-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; align-items: end; } #panel-darkvyn .darkvyn-order-form label:not(.darkvyn-order-callback) { display: flex; min-width: 0; flex-direction: column; gap: 0.28rem; font-size: 0.85em; } #panel-darkvyn .darkvyn-order-callback { grid-column: span 2; display: flex; align-items: center; gap: 0.5rem; min-height: 2.4rem; padding: 0.56rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-xs); background: color-mix(in srgb, var(--surface-2) 50%, transparent); color: var(--text-secondary); font-size: 0.85em; font-weight: 700; } #panel-darkvyn .darkvyn-order-callback input { width: 1rem; height: 1rem; accent-color: var(--accent); } #panel-darkvyn .darkvyn-order-preview { grid-column: 1 / -1; min-height: 2.35rem; padding: 0.64rem 0.75rem; border: 1px solid var(--hairline); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text-secondary); font-size: 0.84rem; font-weight: 700; } #panel-darkvyn .darkvyn-order-preview.is-warn { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.1); color: #b45309; } [data-theme="dark"] #panel-darkvyn .darkvyn-order-preview.is-warn { color: #fbbf24; } #panel-darkvyn .darkvyn-order-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; } #panel-darkvyn .darkvyn-recent-table { width: 100%; min-width: 880px; font-size: 0.88em; } #panel-darkvyn .darkvyn-order-time { white-space: nowrap; } #panel-darkvyn .darkvyn-order-main { max-width: 360px; overflow: hidden; color: var(--text); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } #panel-darkvyn .darkvyn-order-sub, #panel-darkvyn .darkvyn-order-error { max-width: 360px; margin-top: 0.2rem; overflow: hidden; color: var(--muted); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; } #panel-darkvyn .darkvyn-order-error { color: #ef4444; } #panel-darkvyn .darkvyn-status-pill { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0.22rem 0.62rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; line-height: 1; } #panel-darkvyn .darkvyn-status-pill.is-success { background: rgba(34, 197, 94, 0.14); color: #16a34a; } #panel-darkvyn .darkvyn-status-pill.is-danger { background: rgba(239, 68, 68, 0.14); color: #ef4444; } #panel-darkvyn .darkvyn-status-pill.is-warn { background: rgba(245, 158, 11, 0.16); color: #d97706; } #panel-darkvyn .darkvyn-status-pill.is-info { background: rgba(59, 130, 246, 0.14); color: #2563eb; } #panel-darkvyn .darkvyn-status-pill.is-muted { background: var(--surface-2); color: var(--text-secondary); } @media (max-width: 1100px) { #panel-darkvyn .darkvyn-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #panel-darkvyn .darkvyn-order-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #panel-darkvyn .darkvyn-summary-grid { grid-template-columns: 1fr; } #panel-darkvyn .darkvyn-order-form { grid-template-columns: 1fr; } #panel-darkvyn .darkvyn-order-callback, #panel-darkvyn .darkvyn-order-actions { grid-column: 1; } #panel-darkvyn .darkvyn-order-actions .btn { width: 100%; } } .higgs-status-dot.connected, .higgs-status-dot.ok { background: #22c55e; box-shadow: 0 0 6px #22c55e80; } .higgs-status-dot.warn { background: #f59e0b; box-shadow: 0 0 6px #f59e0b80; } .higgs-status-dot.disconnected, .higgs-status-dot.err { background: #ef4444; box-shadow: 0 0 6px #ef444480; } /* Ensure body wrapper doesn't stretch or hide text */ #wa-recipients-body { width: 100% !important; max-width: 100% !important; height: auto !important; overflow: visible !important; } #tx-load-more-btn { font-size: 0.78rem; padding: 0.35rem 0.9rem; } #tx-load-more-info { font-size: 0.78rem !important; } /* Dashboard shell light canvas sync (20260511). */ html:not([data-theme="dark"]), html:not([data-theme="dark"]) body, html:not([data-theme="dark"]) .shell, html:not([data-theme="dark"]) .main, html:not([data-theme="dark"]) .content, html:not([data-theme="dark"]) .content-inner { background: #f8fafc; } /* ═══ Asset Manager ═══ */ /* Panel card alignment */ #panel-assets .card { margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } html:not([data-theme="dark"]) #panel-assets .card { border-color: rgba(15, 23, 42, 0.06); box-shadow: var(--panel-elev); } #panel-assets .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } #panel-assets .card-head h2 { margin: 0; color: var(--text); font-size: 1rem; } /* Upload form layout */ #assets-upload-form { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; } /* Dropzone */ .assets-dropzone { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: all 0.25s ease; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 90%, var(--accent) 10%), var(--surface-2)); } .assets-dropzone:hover, .assets-dropzone-active { border-color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 82%, var(--accent) 18%), var(--surface-2)); transform: scale(1.005); } .assets-dropzone #assets-drop-text { font-size: 0.95em; font-weight: 600; color: var(--text); } /* Form fields */ #panel-assets input:not([type="checkbox"]):not([type="radio"]), #panel-assets select, #panel-assets textarea { min-height: 2.4rem; padding: 0.56rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--text); outline: none; font-size: 0.88em; width: 100%; box-sizing: border-box; } #panel-assets input:focus, #panel-assets select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } [data-theme="dark"] #panel-assets input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] #panel-assets select { border-color: var(--border-strong); background: var(--surface-2); } #panel-assets label > span { color: var(--text-secondary); font-weight: 600; font-size: 0.85em; } /* Gallery grid */ .assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } /* Gallery card */ .asset-card { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s; background: var(--surface); } html:not([data-theme="dark"]) .asset-card { border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .asset-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); border-color: var(--accent); } [data-theme="dark"] .asset-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4); } /* Asset preview thumbnail */ .asset-preview { height: 140px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-bottom: 1px solid var(--hairline); } .asset-preview img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; } .asset-preview-video { position: relative; } .asset-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); border-radius: 50%; font-size: 1.2em; color: #fff; pointer-events: none; backdrop-filter: blur(4px); } /* Asset info */ .asset-info { padding: 0.65rem 0.75rem 0.5rem; } .asset-name { font-weight: 700; font-size: 0.84em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.25rem; } .asset-meta { font-size: 0.76em; margin-bottom: 0.5rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } /* Type badge */ .asset-type-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 0.7em; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .asset-type-image { background: rgba(34,197,94,0.12); color: #22c55e; } .asset-type-gif { background: rgba(245,158,11,0.12); color: #f59e0b; } .asset-type-svg { background: rgba(139,92,246,0.12); color: #8b5cf6; } .asset-type-video { background: rgba(239,68,68,0.12); color: #ef4444; } /* Action buttons */ .asset-actions { display: flex; gap: 0.35rem; } .asset-actions .btn { font-size: 0.75em; padding: 3px 10px; border-radius: var(--radius-xs); min-height: 1.6rem; } /* Preview overlay */ .assets-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; } .assets-preview-modal { position: relative; max-width: 90vw; text-align: center; animation: fadeInUp 0.25s ease; } .assets-preview-close { position: absolute; top: -44px; right: -4px; font-size: 1.3em; cursor: pointer; color: rgba(255,255,255,0.7); padding: 6px 14px; z-index: 10; border-radius: var(--radius-xs); transition: color 0.15s, background 0.15s; } .assets-preview-close:hover { color: #fff; background: rgba(255,255,255,0.1); } .assets-preview-info { margin-top: 1.25rem; color: #fff; } .assets-preview-info h3 { margin: 0 0 0.3rem; font-size: 1.15em; font-weight: 700; } .assets-preview-link { display: flex; gap: 0.5rem; margin-top: 0.75rem; max-width: 600px; margin-left: auto; margin-right: auto; } .assets-preview-link input { flex: 1; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #fff !important; padding: 8px 12px; border-radius: var(--radius-xs); font-size: 0.85em; } /* Responsive */ @media (max-width: 768px) { .assets-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } #assets-upload-form { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .assets-grid { grid-template-columns: 1fr 1fr; gap: 0.65rem; } .asset-preview { height: 100px; } } /* Overview mobile polish: keep Beranda dense enough for real operations. */ @media (max-width: 760px) { #panel-overview.overview-cockpit { gap: 0.5rem; padding-bottom: calc(var(--mobile-nav-h) + 1.5rem + env(safe-area-inset-bottom)); } #panel-overview > .overview-head { gap: 0.46rem; padding: 0.48rem; border-radius: 10px; } #panel-overview .overview-greeting { display: grid; grid-template-columns: 1fr; gap: 0.28rem; } #panel-overview .overview-title { font-size: 1.04rem; line-height: 1.1; } #panel-overview .overview-tagline { width: fit-content; min-height: 1.38rem; padding: 0.12rem 0.44rem; border-radius: 7px; font-size: 0.66rem; line-height: 1.15; } #panel-overview .overview-meta { display: flex; flex-wrap: nowrap; gap: 0.28rem; width: 100%; overflow-x: auto; scrollbar-width: none; } #panel-overview .overview-meta::-webkit-scrollbar { display: none; } #panel-overview .overview-meta > span { flex: 0 0 auto; min-height: 1.42rem; padding: 0.12rem 0.42rem; border-radius: 7px; font-size: 0.66rem; white-space: nowrap; } #panel-overview .overview-actions { gap: 0.36rem; padding: 0.44rem; border: 1px solid var(--hairline); border-radius: 10px; background: color-mix(in srgb, var(--surface) 94%, transparent); } #panel-overview .overview-actions-top { display: grid; grid-template-columns: 1fr; gap: 0.34rem; width: 100%; } #panel-overview .ov-period-tabs { display: flex; flex-wrap: nowrap; gap: 0.3rem; width: 100%; padding: 0.22rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #panel-overview .ov-period-tabs::-webkit-scrollbar { display: none; } #panel-overview .ov-period-tab { flex: 0 0 auto; min-width: 5.35rem; width: auto; min-height: 2rem; padding: 0.35rem 0.56rem; border-radius: 8px; font-size: 0.72rem; white-space: nowrap; } #panel-overview .overview-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.38rem; width: 100%; } #panel-overview .overview-action-btn { width: 100%; min-height: 2.08rem; padding: 0.42rem 0.5rem; border-radius: 8px; justify-content: center; font-size: 0.72rem; } #panel-overview .overview-action-icon { width: 0.85rem; height: 0.85rem; flex-basis: 0.85rem; } #panel-overview .ov-period-meta { display: block; width: 100%; min-height: 0; font-size: 0.7rem; line-height: 1.2; } #panel-overview .ov-date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.38rem; width: 100%; padding: 0.42rem; border: 1px solid var(--hairline); border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); } #panel-overview .ov-date-field { position: relative; display: grid; width: 100%; min-width: 0; max-width: none; flex: none; gap: 0; } #panel-overview .ov-date-field span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); } #panel-overview .ov-date-field input { width: 100%; height: 2.2rem; min-height: 2.2rem; max-height: 2.2rem; padding: 0.34rem 0.54rem; border-radius: 8px; font-size: 0.78rem; line-height: 1.15; } #panel-overview .ov-date-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.38rem; width: 100%; margin: 0; } #panel-overview .ov-date-actions .btn { width: 100%; min-height: 2.08rem; padding: 0.36rem 0.5rem; border-radius: 8px; justify-content: center; font-size: 0.72rem; } #panel-overview .analytics-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } #panel-overview .a-card { min-height: 5.25rem; padding: 0.54rem 0.58rem 0.44rem; border-radius: 10px; } #panel-overview .a-card-top { gap: 0.3rem; margin-bottom: 0.1rem; padding-right: 2rem; } #panel-overview .a-card-label { font-size: 0.58rem; line-height: 1.15; } #panel-overview .a-card-value { font-size: clamp(0.86rem, 4vw, 1.06rem); line-height: 1.08; overflow-wrap: anywhere; } #panel-overview .a-card-icon { width: 2rem; height: 2rem; border-radius: 8px; } #panel-overview .a-card-spark { height: 1.05rem; } } @media (max-width: 360px) { #panel-overview .overview-action-buttons, #panel-overview .ov-date-range, #panel-overview .ov-date-actions, #panel-overview .analytics-cards { grid-template-columns: 1fr; } #panel-overview .ov-period-tab { min-width: 4.9rem; } } @media (max-width: 760px) { #panel-overview .overview-tagline { display: none; } #panel-overview .overview-greeting { gap: 0.24rem; } } @media (min-width: 400px) and (max-width: 760px) { #panel-overview .ov-date-range { grid-template-columns: minmax(0, 5.7rem) minmax(0, 5.7rem) 3.8rem 6rem; align-items: center; justify-content: space-between; } #panel-overview .ov-date-actions { display: contents; } #panel-overview .ov-date-field input, #panel-overview .ov-date-actions .btn { height: 2.05rem; min-height: 2.05rem; max-height: 2.05rem; font-size: 0.68rem; } #panel-overview .ov-date-actions .btn { padding: 0.18rem 0.28rem; line-height: 1.05; white-space: nowrap; } } /* Queue Health polish: readable ops dashboard on desktop and mobile. */ #panel-queue-health.queue-health-panel { --qh-surface: color-mix(in srgb, var(--surface) 94%, transparent); --qh-surface-2: color-mix(in srgb, var(--surface-2) 88%, transparent); --qh-border: var(--border, rgba(148, 163, 184, 0.2)); --qh-text: var(--text, #0f172a); --qh-muted: var(--muted, #64748b); display: grid; gap: 0.85rem; color: var(--qh-text); } #panel-queue-health .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 0; } #panel-queue-health .page-head h1 { margin: 0; font-size: clamp(1.28rem, 2vw, 1.75rem); line-height: 1.12; letter-spacing: 0; } #panel-queue-health #qh-sub { margin-top: 0.34rem; font-size: 0.86rem; line-height: 1.35; color: var(--qh-muted); } #panel-queue-health .head-actions { flex: 0 0 auto; } #panel-queue-health #btn-qh-refresh { min-height: 2.25rem; padding: 0.45rem 0.78rem; border-radius: 9px; } #panel-queue-health #queue-health-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.72rem; min-width: 0; } #panel-queue-health #qh-header-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.62rem; margin: 0; min-width: 0; } #panel-queue-health .qh-stat-card { position: relative; display: grid; align-content: space-between; gap: 0.34rem; min-height: 5.6rem; min-width: 0; padding: 0.68rem 0.72rem; overflow: hidden; text-align: left; color: var(--qh-text); border: 1px solid var(--qh-border); border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--qh-surface-2) 92%, transparent), var(--qh-surface)); box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08)); } #panel-queue-health .qh-stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: color-mix(in srgb, var(--accent, #3b82f6) 72%, transparent); opacity: 0.72; } #panel-queue-health .qh-stat-label { position: relative; z-index: 1; margin: 0; overflow: hidden; color: var(--qh-muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.04em; line-height: 1.18; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; } #panel-queue-health .qh-stat-value { position: relative; z-index: 1; min-width: 0; overflow: hidden; color: var(--qh-text); font-size: clamp(1rem, 1.65vw, 1.42rem); font-weight: 800; line-height: 1.12; text-overflow: ellipsis; } #panel-queue-health .qh-stat-value[style] { font-size: 0.82rem !important; font-weight: 800; white-space: normal; } #panel-queue-health .qh-num { font-variant-numeric: tabular-nums; } #panel-queue-health .qh-bad { color: var(--red, #ef4444); } #panel-queue-health .qh-warn { color: var(--orange, #f59e0b); } #panel-queue-health .pill { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 1.55rem; padding: 0.16rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; line-height: 1.1; white-space: nowrap; } #panel-queue-health .pill.is-success { color: #16a34a; background: rgba(34, 197, 94, 0.14); border: 1px solid rgba(34, 197, 94, 0.22); } #panel-queue-health .pill.is-warning { color: #d97706; background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.24); } #panel-queue-health .pill.is-danger { color: #dc2626; background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.22); } #panel-queue-health #queue-health-body > .card { grid-column: span 6; min-width: 0; overflow: hidden; color: var(--qh-text); border: 1px solid var(--qh-border); border-radius: 11px; background: var(--qh-surface); box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08)); } #panel-queue-health #queue-health-body > .card:nth-child(4) { grid-column: 1 / -1; } #panel-queue-health #queue-health-body > .card:nth-child(5) { grid-column: span 4; } #panel-queue-health #queue-health-body > .card:nth-child(6) { grid-column: span 8; } #panel-queue-health .card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.68rem 0.78rem; border-bottom: 1px solid var(--qh-border); background: color-mix(in srgb, var(--qh-surface-2) 76%, transparent); } #panel-queue-health .card-head h3 { margin: 0; color: var(--qh-text); font-size: 0.86rem; line-height: 1.2; letter-spacing: 0; } #panel-queue-health .card-body { min-width: 0; padding: 0.72rem 0.78rem; overflow-x: auto; color: var(--qh-text); } #panel-queue-health .tbl { width: 100%; min-width: 100%; border-collapse: separate; border-spacing: 0; color: var(--qh-text); font-size: 0.78rem; } #panel-queue-health .tbl th, #panel-queue-health .tbl td { padding: 0.48rem 0.55rem; border-bottom: 1px solid color-mix(in srgb, var(--qh-border) 74%, transparent); text-align: left; vertical-align: middle; white-space: nowrap; } #panel-queue-health .tbl th { color: var(--qh-muted); background: color-mix(in srgb, var(--qh-surface-2) 70%, transparent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } #panel-queue-health .tbl td { color: var(--qh-text); } #panel-queue-health .tbl tr:last-child td { border-bottom: 0; } #panel-queue-health .tbl strong, #panel-queue-health .mono { color: var(--qh-text); } #panel-queue-health .small { font-size: 0.72rem; } #panel-queue-health .muted { color: var(--qh-muted) !important; } #panel-queue-health .qh-row-stale, #panel-queue-health .qh-row-stale td { background: color-mix(in srgb, var(--orange, #f59e0b) 14%, var(--qh-surface)) !important; } #panel-queue-health .qh-warning-list { display: grid; gap: 0.45rem; padding: 0; margin: 0; list-style: none; } #panel-queue-health .qh-warning-item { display: flex; align-items: center; gap: 0.45rem; padding: 0.58rem 0.62rem; border: 1px solid rgba(245, 158, 11, 0.24); border-radius: 9px; background: rgba(245, 158, 11, 0.1); color: var(--qh-text); } @media (max-width: 1180px) { #panel-queue-health #qh-header-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { #panel-queue-health #queue-health-body > .card, #panel-queue-health #queue-health-body > .card:nth-child(4), #panel-queue-health #queue-health-body > .card:nth-child(5), #panel-queue-health #queue-health-body > .card:nth-child(6) { grid-column: 1 / -1; } } @media (max-width: 760px) { #panel-queue-health.queue-health-panel { gap: 0.68rem; padding-bottom: calc(var(--mobile-nav-h) + 1.6rem + env(safe-area-inset-bottom)); } #panel-queue-health .page-head { display: grid; grid-template-columns: 1fr; gap: 0.54rem; } #panel-queue-health .page-head h1 { font-size: 1.18rem; } #panel-queue-health #qh-sub { margin-top: 0.24rem; font-size: 0.78rem; } #panel-queue-health .head-actions, #panel-queue-health #btn-qh-refresh { width: 100%; } #panel-queue-health #btn-qh-refresh { min-height: 2.2rem; justify-content: center; } #panel-queue-health #queue-health-body { gap: 0.58rem; } #panel-queue-health #qh-header-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } #panel-queue-health .qh-stat-card { min-height: 4.65rem; padding: 0.56rem 0.62rem; border-radius: 10px; } #panel-queue-health .qh-stat-label { font-size: 0.62rem; } #panel-queue-health .qh-stat-value { font-size: 1rem; } #panel-queue-health .qh-stat-value[style] { font-size: 0.7rem !important; } #panel-queue-health .pill { min-height: 1.42rem; padding: 0.12rem 0.42rem; font-size: 0.64rem; } #panel-queue-health .card-head { padding: 0.58rem 0.64rem; } #panel-queue-health .card-head h3 { font-size: 0.8rem; } #panel-queue-health .card-body { padding: 0.62rem 0.64rem; } #panel-queue-health .tbl { min-width: 38rem; font-size: 0.74rem; } #panel-queue-health #qh-claim-detail .tbl { min-width: 0; } } @media (max-width: 360px) { #panel-queue-health #qh-header-cards { grid-template-columns: 1fr; } } /* ═══ Finance / Keuangan Panel ═══ */ /* ── Tab bar ── */ .fin-tabs { display: flex; gap: 0.25rem; padding: 0.3rem; background: color-mix(in srgb, var(--surface-2) 60%, transparent); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--border) 50%, transparent); } .fin-tab { flex: 1; padding: 0.55rem 0.75rem; border: none; border-radius: 8px; background: transparent; color: var(--muted); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; text-align: center; } .fin-tab:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 80%, transparent); } .fin-tab.active { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px color-mix(in srgb, var(--border) 40%, transparent); } [data-theme="dark"] .fin-tab.active { box-shadow: 0 1px 8px rgba(0,0,0,0.25), 0 0 0 1px color-mix(in srgb, var(--border) 50%, transparent); } /* ── KPI stat cards row ── */ .fin-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .fin-stat-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius, 10px); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; } .fin-stat-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); } [data-theme="dark"] .fin-stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.25); } .fin-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--fin-accent, var(--primary, #6366f1)); border-radius: 3px 3px 0 0; opacity: 0.7; } .fin-stat-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .fin-stat-value { font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.2; } .fin-stat-sub { font-size: 0.72rem; color: var(--muted); } .fin-stat-card--expense { --fin-accent: #ef4444; } .fin-stat-card--count { --fin-accent: #6366f1; } .fin-stat-card--cat { --fin-accent: #f59e0b; } .fin-stat-card--payroll { --fin-accent: #22c55e; } .fin-stat-card--paid { --fin-accent: #3b82f6; } /* ── Form card ── */ .fin-form-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius, 10px); padding: 1.15rem; margin-bottom: 0.85rem; } .fin-form-card .fin-form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; } .fin-form-title { font-size: 0.88rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 0.4rem; } .fin-form-title-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; background: color-mix(in srgb, var(--primary, #6366f1) 12%, transparent); flex-shrink: 0; } .fin-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; } .fin-form-group { display: flex; flex-direction: column; gap: 0.18rem; } .fin-form-group--full { grid-column: 1 / -1; } .fin-form-label { font-size: 0.76rem; font-weight: 600; color: var(--text-secondary, var(--muted)); letter-spacing: 0.01em; } .fin-form-label .req { color: #ef4444; } .fin-form-input, .fin-form-select { padding: 0.48rem 0.6rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 0.84rem; transition: border-color 0.15s, box-shadow 0.15s; } .fin-form-input:focus, .fin-form-select:focus { outline: none; border-color: var(--primary, #6366f1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #6366f1) 12%, transparent); } .fin-form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.35rem; } .fin-form-actions label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; } .fin-btn-save { padding: 0.5rem 1.25rem; border: none; border-radius: 8px; background: linear-gradient(135deg, var(--primary, #6366f1), color-mix(in srgb, var(--primary, #6366f1) 80%, #a855f7)); color: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: transform 0.12s, box-shadow 0.15s; } .fin-btn-save:hover { transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, #6366f1) 30%, transparent); } .fin-btn-save:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* ── Data table ── */ .fin-table-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius, 10px); overflow: hidden; } .fin-table-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--hairline); } .fin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .fin-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .fin-table th { padding: 0.55rem 0.85rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: color-mix(in srgb, var(--surface-2) 50%, transparent); border-bottom: 1px solid var(--hairline); text-align: left; white-space: nowrap; } .fin-table td { padding: 0.6rem 0.85rem; border-bottom: 1px solid color-mix(in srgb, var(--hairline) 50%, transparent); color: var(--text); vertical-align: middle; } .fin-table tbody tr { transition: background 0.12s; } .fin-table tbody tr:hover { background: color-mix(in srgb, var(--primary, #6366f1) 4%, transparent); } .fin-table .fin-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); } .fin-cat-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; background: color-mix(in srgb, var(--primary, #6366f1) 10%, transparent); color: var(--text-secondary); white-space: nowrap; } .fin-status-pill { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; } .fin-status-pill--success { background: rgba(34,197,94,0.12); color: #16a34a; } .fin-status-pill--warning { background: rgba(245,158,11,0.12); color: #d97706; } .fin-status-pill--info { background: rgba(59,130,246,0.12); color: #3b82f6; } [data-theme="dark"] .fin-status-pill--success { background: rgba(34,197,94,0.18); color: #4ade80; } [data-theme="dark"] .fin-status-pill--warning { background: rgba(245,158,11,0.18); color: #fbbf24; } .fin-btn-action { padding: 0.22rem 0.55rem; border: 1px solid var(--border); border-radius: 6px; background: transparent; font-size: 0.75rem; cursor: pointer; color: var(--text-secondary); transition: all 0.12s; } .fin-btn-action:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: var(--primary); color: var(--primary); } .fin-btn-action--danger:hover { background: rgba(239,68,68,0.08); border-color: #ef4444; color: #ef4444; } .fin-btn-action--pay { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border-color: transparent; font-weight: 600; } .fin-btn-action--pay:hover { box-shadow: 0 2px 8px rgba(34,197,94,0.3); transform: translateY(-1px); } /* ── Report ── */ .fin-report { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius, 10px); padding: 1.25rem; } .fin-report-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 1rem; color: var(--text); } .fin-report-row { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid color-mix(in srgb, var(--hairline) 50%, transparent); font-size: 0.84rem; } .fin-report-row--total { border-top: 2px solid var(--border); border-bottom: none; font-weight: 700; font-size: 0.95rem; padding-top: 0.65rem; margin-top: 0.35rem; } .fin-report-row--total .fin-report-val { color: #ef4444; } .fin-report-row .fin-report-label { color: var(--text-secondary); display: flex; align-items: center; gap: 0.35rem; } .fin-report-row .fin-report-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); } .fin-report-row .fin-report-count { font-size: 0.72rem; color: var(--muted); } /* ── Empty state ── */ .fin-empty { padding: 2rem 1rem; text-align: center; color: var(--muted); } .fin-empty-title { color: var(--text); font-size: 0.9rem; font-weight: 800; } .fin-empty-icon { display: none; } .fin-empty-text { font-size: 0.88rem; } /* ── Responsive ── */ @media (max-width: 768px) { .fin-form-grid { grid-template-columns: 1fr; } .fin-stats-row { grid-template-columns: repeat(2, 1fr); } .fin-tabs { flex-wrap: wrap; } } @media (max-width: 480px) { .fin-stats-row { grid-template-columns: 1fr; } } /* ── P&L Statement ── */ .fin-pnl-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius, 10px); padding: 1.25rem; margin-bottom: 1rem; } .fin-pnl-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.45rem; } .fin-pnl-period { display: inline-flex; align-items: center; min-height: 1.55rem; padding: 0.14rem 0.55rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: color-mix(in srgb, var(--accent) 82%, var(--text)); font-size: 0.72rem; font-weight: 800; } .fin-pnl-section { margin-bottom: 0.65rem; } .fin-pnl-section-head { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding-bottom: 0.3rem; margin-bottom: 0.25rem; border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent); } .fin-pnl-row { display: flex; justify-content: space-between; align-items: center; padding: 0.38rem 0; font-size: 0.84rem; } .fin-pnl-row-label { color: var(--text-secondary); display: flex; align-items: center; gap: 0.3rem; } .fin-pnl-row-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .fin-pnl-row--sub { padding-left: 1rem; font-size: 0.8rem; } .fin-pnl-row--sub .fin-pnl-row-label { color: var(--muted); } .fin-pnl-divider { border: none; border-top: 1px dashed color-mix(in srgb, var(--border) 60%, transparent); margin: 0.45rem 0; } .fin-pnl-row--result { padding: 0.55rem 0 0.35rem; border-top: 2px solid var(--border); margin-top: 0.3rem; font-size: 0.9rem; } .fin-pnl-row--result .fin-pnl-row-label { font-weight: 700; color: var(--text); } .fin-pnl-row--result .fin-pnl-row-val { font-size: 1.05rem; font-weight: 700; } .fin-pnl-row--grand { padding: 0.65rem 0 0.35rem; border-top: 3px double var(--border); margin-top: 0.5rem; font-size: 1rem; } .fin-pnl-row--grand .fin-pnl-row-label { font-weight: 800; color: var(--text); font-size: 0.95rem; } .fin-pnl-row--grand .fin-pnl-row-val { font-size: 1.15rem; font-weight: 800; } .fin-val-positive { color: #16a34a !important; } .fin-val-negative { color: #ef4444 !important; } [data-theme="dark"] .fin-val-positive { color: #4ade80 !important; } [data-theme="dark"] .fin-val-negative { color: #f87171 !important; } .fin-pnl-note { font-size: 0.72rem; color: var(--muted); margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; } .fin-mom-badge { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.25rem; padding: 0.08rem 0.36rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800; vertical-align: middle; white-space: nowrap; } .fin-mom-badge--good { background: rgba(34, 197, 94, 0.12); color: #16a34a; } .fin-mom-badge--bad { background: rgba(239, 68, 68, 0.12); color: #dc2626; } .fin-mom-badge--flat { background: color-mix(in srgb, var(--surface-2) 82%, transparent); color: var(--muted); } .fin-mom-cell { text-align: right; font-weight: 800; } .fin-mom-cell--good { color: #16a34a; } .fin-mom-cell--bad { color: #dc2626; } .fin-mom-cell--flat { color: var(--muted); } /* ── Finance Charts ── */ .fin-charts-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; margin-bottom: 1rem; } @media (max-width: 900px) { .fin-charts-grid { grid-template-columns: 1fr; } } .fin-chart-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius, 10px); padding: 1rem 1rem 0.75rem; position: relative; overflow: hidden; } .fin-chart-title { font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; } .fin-chart-svg-wrap { position: relative; width: 100%; min-height: 220px; } .fin-chart-svg-wrap svg { width: 100%; height: auto; display: block; } .fin-chart-tooltip { position: absolute; display: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.65rem; font-size: 0.75rem; line-height: 1.5; color: var(--text); pointer-events: none; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 130px; } .fin-chart-legend { display: flex; gap: 0.8rem; flex-wrap: wrap; padding: 0.5rem 0 0; font-size: 0.72rem; color: var(--muted); } .fin-chart-legend-item { display: flex; align-items: center; gap: 0.3rem; } .fin-chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Donut */ .fin-donut-wrap { display: flex; flex-direction: column; align-items: center; } .fin-donut-svg { width: 180px; height: 180px; } .fin-donut-legend { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; margin-top: 0.6rem; } .fin-donut-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--text-secondary); } .fin-donut-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .fin-donut-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fin-donut-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .fin-donut-pct { font-size: 0.68rem; color: var(--muted); min-width: 2.4rem; text-align: right; } /* ── Finance Dialog ── */ .fin-dialog-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 1rem; } .fin-dialog-overlay.hidden { display: none; } .fin-dialog { background: var(--card); border: 1px solid var(--border); border-radius: 12px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.25); animation: fin-dialog-in 0.2s ease-out; } @keyframes fin-dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .fin-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--hairline); } .fin-cat-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--hairline); font-size: 0.82rem; } .fin-cat-row:last-child { border-bottom: none; } .fin-cat-row-icon { font-size: 1rem; width: 1.5rem; text-align: center; } .fin-cat-row-label { flex: 1; color: var(--text); } .fin-cat-row-key { font-size: 0.72rem; color: var(--muted); font-family: monospace; } .fin-cat-row-badge { font-size: 0.65rem; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; } /* ── Account Page ── */ #panel-account.account-page { display: flex; flex-direction: column; gap: 1rem; } #panel-account.account-page.hidden { display: none; } .account-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 1rem; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 46%), color-mix(in srgb, var(--surface) 92%, var(--surface-2)); box-shadow: var(--shadow-sm); } .account-hero-main { display: flex; min-width: 0; gap: 0.95rem; align-items: center; } .account-avatar { width: 4rem; height: 4rem; border-radius: 8px; display: inline-grid; place-items: center; flex: 0 0 auto; color: #dbeafe; font-size: 1.45rem; font-weight: 800; background: linear-gradient(145deg, rgba(37, 99, 235, 0.94), rgba(14, 165, 233, 0.72)), var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 14px 32px rgba(37, 99, 235, 0.22); } .account-hero-copy { min-width: 0; } .account-eyebrow, .account-card-kicker { display: block; margin: 0 0 0.25rem; color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0; } .account-hero h1 { margin: 0; color: var(--text); font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.16; letter-spacing: 0; } .account-hero p { max-width: 58ch; margin: 0.38rem 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; } .account-identity-line { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; color: var(--text-secondary); font-size: 0.8rem; } .account-identity-line span { min-width: 0; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-hero-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.65rem; } .account-chip, .account-soft-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 1.7rem; padding: 0.18rem 0.62rem; border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: color-mix(in srgb, var(--accent) 82%, var(--text)); font-size: 0.73rem; font-weight: 700; white-space: nowrap; } .account-chip-ok { border-color: color-mix(in srgb, var(--green) 24%, transparent); background: color-mix(in srgb, var(--green) 10%, var(--surface)); color: color-mix(in srgb, var(--green) 82%, var(--text)); } .account-balance-card { display: flex; flex-direction: column; justify-content: center; gap: 0.65rem; min-width: 0; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 8px; padding: 1rem; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 5%); } .account-balance-card strong { color: var(--text); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; word-break: break-word; } .account-balance-link { width: fit-content; } .account-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); gap: 1rem; align-items: start; } .account-main-stack, .account-side-stack { display: grid; gap: 1rem; min-width: 0; } .account-card { min-width: 0; } .account-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; margin-bottom: 1rem; } .account-card-title { margin: 0; color: var(--text); font-size: 1rem; font-weight: 700; letter-spacing: 0; } .account-card-sub { margin: 0.28rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; } .account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .account-form-grid .field { margin-bottom: 0; min-width: 0; } .account-field-wide { grid-column: 1 / -1; } .account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-top: 1rem; } .account-inline-msg { min-height: 1.25rem; margin: 0; font-size: 0.8rem; } .account-security-card .pill-status { flex-shrink: 0; } .account-twofa-block { display: grid; gap: 0.75rem; } .account-twofa-note { margin-top: 0.8rem; } .twofa-qr-wrap { display: inline-flex; width: fit-content; padding: 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .twofa-qr-wrap img { display: block; border-radius: 6px; background: #fff; } .twofa-secret-code { display: block; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); color: var(--text); font-size: 0.78rem; line-height: 1.45; word-break: break-all; } .account-twofa-code { grid-template-columns: minmax(0, 1fr); } #twofa-verify-code { font-size: 1.05rem; text-align: center; letter-spacing: 0.22em; font-variant-numeric: tabular-nums; } .account-success-note { margin: 0; color: var(--green); font-size: 0.84rem; font-weight: 700; line-height: 1.45; } .account-danger-btn { color: var(--red); } .account-session-list { display: grid; gap: 0.6rem; margin-bottom: 1rem; } .account-session-list > div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 72%, transparent); } .account-session-list span { color: var(--muted); font-size: 0.78rem; } .account-session-list strong { color: var(--text); font-size: 0.82rem; font-weight: 700; text-align: right; } /* ── Finance Layout Refresh ── */ #panel-finance.finance-page { display: flex; flex-direction: column; gap: 1rem; } #panel-finance.finance-page.hidden { display: none; } #panel-finance .finance-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 1rem; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--green) 8%, transparent), transparent 48%), color-mix(in srgb, var(--surface) 92%, var(--surface-2)); box-shadow: var(--shadow-sm); } #panel-finance .finance-hero-copy { min-width: 0; } #panel-finance .finance-eyebrow { display: block; margin: 0 0 0.3rem; color: var(--text-secondary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } #panel-finance .finance-hero h1 { margin: 0; color: var(--text); font-size: clamp(1.55rem, 2.2vw, 2.05rem); line-height: 1.14; letter-spacing: 0; } #panel-finance .finance-hero p { margin: 0.42rem 0 0; max-width: 62ch; color: var(--muted); font-size: 0.92rem; line-height: 1.55; } #panel-finance .finance-hero-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; } #panel-finance .finance-hero-tags span { display: inline-flex; align-items: center; min-height: 1.65rem; padding: 0.16rem 0.6rem; border: 1px solid color-mix(in srgb, var(--green) 22%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--green) 9%, var(--surface)); color: color-mix(in srgb, var(--green) 82%, var(--text)); font-size: 0.72rem; font-weight: 800; white-space: nowrap; } #panel-finance .finance-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 0.7rem !important; align-content: center; padding: 0.85rem; border: 1px solid color-mix(in srgb, var(--green) 20%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, var(--green) 4%); } #panel-finance .finance-month-control { display: grid !important; gap: 0.32rem !important; font-size: 0.8rem !important; color: var(--text-secondary); } #panel-finance .finance-month-control span { font-weight: 800; } #panel-finance .finance-month-control input { width: 100%; min-height: 2.45rem; padding: 0.55rem 0.7rem !important; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; } #panel-finance .finance-tabs-shell { padding: 0.35rem !important; margin-bottom: 0 !important; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); box-shadow: none; } #panel-finance .finance-tabs-shell .fin-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem !important; padding: 0; border: 0; background: transparent; } #panel-finance .fin-tab { min-height: 2.5rem; border-radius: 8px; letter-spacing: 0; } #panel-finance .finance-tab-panel { display: grid; gap: 1rem; } #panel-finance .finance-tab-panel.hidden { display: none; } #panel-finance #fin-expenses-summary, #panel-finance #fin-payroll-summary { margin-bottom: 0 !important; } #panel-finance .finance-workspace { display: grid; grid-template-columns: minmax(340px, 0.72fr) minmax(0, 1fr); gap: 1rem; align-items: start; } #panel-finance .finance-form-panel, #panel-finance .finance-list-panel, #panel-finance .finance-recurring-panel, #panel-finance .finance-report-panel { border-radius: 8px; border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-sm); } #panel-finance .finance-form-panel { margin-bottom: 0 !important; } #panel-finance .finance-form-panel .card-head, #panel-finance .finance-form-panel .fin-form-head, #panel-finance .finance-list-panel .card-head, #panel-finance .finance-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; padding: 0; border: 0; } #panel-finance .finance-form-sub { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; } #panel-finance .finance-legacy-form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; } #panel-finance .finance-legacy-form .fin-form-group { display: grid !important; gap: 0.28rem !important; margin: 0; min-width: 0; font-size: 0.84rem !important; } #panel-finance .finance-legacy-form .fin-form-group > span:first-child, #panel-finance .finance-legacy-form .fin-form-label { color: var(--text-secondary); font-size: 0.76rem; font-weight: 700; } #panel-finance .finance-legacy-form input, #panel-finance .finance-legacy-form select, #panel-finance .finance-category-form input { width: 100% !important; min-height: 2.35rem; border-radius: 8px; font-size: 0.84rem !important; } #panel-finance .finance-money-input { display: grid !important; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.4rem !important; align-items: stretch !important; } #panel-finance .finance-currency-preview { display: none; color: var(--muted); font-size: 0.76rem; margin-top: 0.1rem; } #panel-finance .finance-recurring-row { grid-column: 1 / -1; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; padding-top: 0.35rem; } #panel-finance .finance-recurring-row label { margin: 0; } #panel-finance input[type="checkbox"].finance-checkbox, #panel-finance .finance-recurring-row input[type="checkbox"] { width: 1rem !important; height: 1rem !important; min-width: 1rem !important; min-height: 1rem !important; padding: 0 !important; margin: 0 !important; flex: 0 0 auto; accent-color: var(--primary); border-radius: 4px; } #panel-finance .finance-recurring-toggle { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; width: auto !important; min-height: 2.25rem; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 60%, transparent); color: var(--text-secondary); font-size: 0.82rem !important; font-weight: 700; } #panel-finance .finance-legacy-form .finance-recurring-row .finance-recurring-toggle { display: inline-flex !important; grid-template-columns: none !important; flex-direction: row !important; align-items: center !important; width: fit-content !important; } #panel-finance .finance-recurring-day { display: none; grid-template-columns: auto 4.6rem; align-items: center; gap: 0.45rem !important; width: auto !important; color: var(--text-secondary); font-size: 0.8rem !important; font-weight: 700; } #panel-finance .finance-recurring-day input { min-height: 2rem; text-align: center; } #panel-finance .finance-loading-copy { margin: 0; padding: 1rem; } #panel-finance .finance-list-panel .fin-table-wrap, #panel-finance .finance-list-panel #fin-expenses-list > .fin-table-wrap, #panel-finance .finance-list-panel #fin-payroll-list > .fin-table-wrap { border-top: 1px solid var(--hairline); } #panel-finance .finance-export-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; } #panel-finance .finance-category-dialog { width: min(680px, calc(100vw - 2rem)); max-width: 680px !important; border-radius: 8px; } #panel-finance .finance-category-dialog .fin-dialog-head h3 { margin: 0; font-size: 1rem; color: var(--text); } #panel-finance .finance-category-body { padding: 1rem; } #panel-finance .finance-category-form { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 0.55rem !important; margin-bottom: 0.9rem !important; } #panel-finance .finance-category-icon-input { display: none !important; } #panel-finance .finance-category-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 36%, transparent); } #panel-finance .finance-category-note { margin: 0.55rem 0 0; font-size: 0.74rem; } #panel-finance .finance-category-list .fin-cat-row { min-height: 3rem; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--hairline); } #panel-finance .finance-category-list .fin-cat-row:last-child { border-bottom: 0; } #panel-finance .finance-category-list .fin-cat-row-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 7px; background: color-mix(in srgb, var(--primary) 13%, transparent); color: color-mix(in srgb, var(--primary) 78%, var(--text)); font-size: 0.72rem; font-weight: 900; letter-spacing: 0; } #panel-finance .finance-category-list .fin-cat-row-label { font-size: 0.86rem; font-weight: 800; } #panel-finance .finance-category-list .fin-cat-row-key { justify-self: end; color: var(--muted); } #panel-finance .finance-category-list .fin-cat-row-badge { text-transform: capitalize; } #panel-finance .finance-recurring-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; padding: 0.85rem 1rem; } #panel-finance .finance-recurring-chip { display: grid; gap: 0.16rem; min-height: 3.1rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 46%, transparent); } #panel-finance .finance-recurring-chip span { color: var(--muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; } #panel-finance .finance-recurring-chip strong { color: var(--text); font-size: 0.84rem; font-weight: 800; line-height: 1.25; } #panel-finance .finance-recurring-chip.is-active { border-color: color-mix(in srgb, var(--green) 32%, var(--border)); background: color-mix(in srgb, var(--green) 9%, var(--surface)); } #panel-finance .finance-recurring-chip.is-muted { opacity: 0.75; } #panel-finance .finance-recurring-empty { margin: 0; padding: 0 1rem 1rem; color: var(--muted); font-size: 0.82rem; } @media (max-width: 1180px) { #panel-finance .finance-hero, #panel-finance .finance-workspace { grid-template-columns: 1fr; } } @media (max-width: 720px) { #panel-finance .finance-hero, #panel-finance .finance-toolbar, #panel-finance .finance-form-panel, #panel-finance .finance-list-panel, #panel-finance .finance-recurring-panel, #panel-finance .finance-report-panel { padding: 0.95rem; } #panel-finance .finance-tabs-shell .fin-tabs, #panel-finance .finance-legacy-form, #panel-finance .finance-category-form { grid-template-columns: 1fr !important; } #panel-finance .finance-money-input { grid-template-columns: 1fr; } #panel-finance .finance-recurring-row { align-items: stretch !important; flex-direction: column; } #panel-finance .finance-recurring-row .btn { width: 100%; } #panel-finance .finance-recurring-summary { grid-template-columns: 1fr; } } @media (max-width: 1120px) { .account-hero, .account-layout { grid-template-columns: 1fr; } } @media (max-width: 700px) { .account-hero, .account-balance-card, .account-card { padding: 0.95rem; } .account-hero-main { align-items: flex-start; } .account-avatar { width: 3.25rem; height: 3.25rem; font-size: 1.15rem; } .account-card-head { flex-direction: column; } .account-form-grid { grid-template-columns: 1fr; } .account-actions .btn { width: 100%; } } /* === COMPACT DATE FILTER BAR (Round 2025-05-21) === */ #panel-overview .ov-period-meta { font-size: 0.66rem; color: var(--muted); text-align: right; margin: 0; padding: 0 4px 2px 0; line-height: 1.3; } #panel-overview .ov-date-range { flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.4rem; padding: 0.32rem 0.4rem; } #panel-overview .ov-date-field { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 0.3rem; flex: 0 0 auto; min-width: 0; max-width: none; } #panel-overview .ov-date-field span { font-size: 0.62rem; margin: 0 !important; white-space: nowrap; flex-shrink: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline-block; } #panel-overview .ov-date-field input { min-height: 1.6rem; width: 116px; padding: 0.18rem 0.4rem; font-size: 0.72rem; border-radius: 6px; } #panel-overview .ov-date-actions { gap: 0.3rem; flex-shrink: 0; } #panel-overview .ov-date-actions .btn { min-height: 1.6rem; padding: 0.2rem 0.65rem; font-size: 0.72rem; border-radius: 6px; } /* === END COMPACT === */ /* === COLLAPSIBLE DATE FILTER (Round 3 — minimalist) === */ /* Hide period-meta label entirely — period tab already shows current selection */ #panel-overview .ov-period-meta { display: none !important; } /* Hide date filter by default */ #panel-overview .ov-date-range { display: none !important; } /* Show when explicitly toggled OR custom period active */ #panel-overview.show-date-filter .ov-date-range, #panel-overview[data-period=custom] .ov-date-range { display: flex !important; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-top: 0.4rem; } /* Toggle date button (injected by JS, styled here) */ .ov-date-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; margin-left: 0.3rem; padding: 0; background: transparent; border: 1px solid var(--hairline); border-radius: 7px; color: var(--text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ov-date-toggle-btn:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, var(--hairline)); color: var(--accent); } .ov-date-toggle-btn.active { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); color: var(--accent); } .ov-date-toggle-btn svg { width: 14px; height: 14px; } /* === END COLLAPSIBLE === */ /* -- Monitoring Tabs --------------------------------------------------- */ .monitoring-tabs{display:flex;gap:2px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:1.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .monitoring-tabs::-webkit-scrollbar{display:none} .monitoring-tab{padding:.6rem 1rem;font-size:.82rem;font-weight:600;background:transparent;border:none;border-bottom:2px solid transparent;color:inherit;opacity:.5;cursor:pointer;white-space:nowrap;transition:opacity .15s,border-color .15s;font-family:inherit} .monitoring-tab:hover{opacity:.8} .monitoring-tab.is-active{opacity:1;border-bottom-color:var(--accent,#3b82f6)} .monitoring-tab-badge{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:700;text-align:center;margin-left:4px;vertical-align:middle;line-height:1.4} .monitoring-tab-panel.hidden{display:none} [data-theme="light"] .monitoring-tabs{border-bottom-color:rgba(0,0,0,.1)} /* =========================================================== MONITORING UI REDESIGN — 2026-05-24 Append-only override block. Do not edit code above this line if you only want to tweak monitoring visuals. =========================================================== */ /* --- Page header polish --- */ .monitoring-panel .page-head { margin-bottom: 1.5rem; align-items: flex-start; } .monitoring-panel .page-head .greeting h1 { margin: 0 0 0.3rem; letter-spacing: -0.015em; } .monitoring-panel .page-head .greeting p.muted { margin: 0; font-size: 0.88rem; line-height: 1.45; } .monitoring-panel .head-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; } .monitoring-panel .head-actions .btn { font-size: 0.82rem; } /* --- Stat Summary Cards --- */ .monitoring-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; margin-bottom: 1.25rem; } .monitoring-summary .stat-card { position: relative; display: flex; flex-direction: column; gap: 0.35rem; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.78rem 0.95rem 0.85rem; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; min-height: 72px; } .monitoring-summary .stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .monitoring-summary .stat-card.is-danger { border-left-color: #ef4444; background: color-mix(in srgb, #ef4444 7%, var(--surface-2)); } .monitoring-summary .stat-card.is-warning { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 7%, var(--surface-2)); } .monitoring-summary .stat-card.is-info { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); } .monitoring-summary .stat-card.is-success { border-left-color: #22c55e; background: color-mix(in srgb, #22c55e 7%, var(--surface-2)); } .monitoring-summary .stat-card.is-neutral { border-left-color: var(--border-strong); } .monitoring-summary .stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; line-height: 1.1; } .monitoring-summary .stat-value { font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: var(--text); letter-spacing: -0.01em; word-break: break-word; } .monitoring-summary .stat-card.is-danger .stat-value { color: #ef4444; } .monitoring-summary .stat-card.is-warning .stat-value { color: #f59e0b; } .monitoring-summary .stat-card.is-info .stat-value { color: var(--accent); } @media (max-width: 640px) { .monitoring-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; } .monitoring-summary .stat-card { padding: 0.6rem 0.75rem 0.65rem; min-height: 60px; } .monitoring-summary .stat-value { font-size: 1.15rem; } .monitoring-summary .stat-label { font-size: 0.62rem; } } /* --- Monitoring tabs (override existing minified line) --- */ .monitoring-tabs { gap: 4px !important; padding: 4px; background: color-mix(in srgb, var(--surface-2) 55%, transparent); border-radius: var(--radius-md); border: 1px solid var(--border); border-bottom: 1px solid var(--border) !important; margin-bottom: 1.25rem; } .monitoring-tab { padding: 0.55rem 0.95rem !important; border-radius: var(--radius-sm) !important; border: none !important; border-bottom: none !important; opacity: 1 !important; color: var(--muted) !important; background: transparent !important; transition: color .15s, background .15s !important; } .monitoring-tab:hover { color: var(--text) !important; background: color-mix(in srgb, var(--surface-3) 45%, transparent) !important; opacity: 1 !important; } .monitoring-tab.is-active { background: var(--surface) !important; color: var(--accent) !important; box-shadow: var(--shadow-sm); border-bottom-color: transparent !important; } .monitoring-tab-badge { padding: 1px 7px !important; min-width: 18px !important; font-size: 0.66rem !important; font-weight: 700 !important; vertical-align: 1px !important; } .monitoring-tab .monitoring-tab-badge:not(.hidden) { animation: monBadgePulse 1.8s ease-in-out infinite; } @keyframes monBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); } 50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); } } .monitoring-tab-panel { animation: monPanelFade .22s ease-out; } @keyframes monPanelFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* --- Saldo GamePoint card (balance prominent layout) --- */ .saldo-card { display: flex; flex-direction: column; gap: 1rem; } .saldo-balance-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .saldo-balance-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .saldo-balance-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; } .saldo-balance-value { font-size: 2rem; font-weight: 700; line-height: 1.05; color: var(--accent); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } .saldo-balance-row .saldo-status-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .saldo-balance-row .saldo-status-wrap .saldo-balance-label { text-align: right; } .saldo-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1.2rem; } .saldo-detail-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .saldo-detail-key { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; } .saldo-detail-val { font-size: 0.92rem; font-weight: 600; color: var(--text); line-height: 1.3; word-break: break-word; } .saldo-detail-val.pill-wrap { display: inline-flex; align-self: flex-start; } @media (max-width: 520px) { .saldo-balance-value { font-size: 1.6rem; } .saldo-detail-grid { grid-template-columns: 1fr; gap: 0.55rem; } .saldo-balance-row .saldo-status-wrap { align-items: flex-start; } .saldo-balance-row .saldo-status-wrap .saldo-balance-label { text-align: left; } } /* --- Aju82 stok table polish --- */ #monitoring-aju82-body { overflow-x: auto; max-height: 480px; } #monitoring-aju82-body .table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } #monitoring-aju82-body .table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); padding: 0.55rem 0.7rem; text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border); font-weight: 700; } #monitoring-aju82-body .table thead th.text-right { text-align: right; } #monitoring-aju82-body .table tbody tr { transition: background .12s ease; } #monitoring-aju82-body .table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 35%, transparent); } #monitoring-aju82-body .table tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } #monitoring-aju82-body .table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); } #monitoring-aju82-body .table .text-right { text-align: right; } #monitoring-aju82-body .table .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } #monitoring-aju82-body .table .pill.is-neutral { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); border-color: transparent; } /* --- Card head polish (within monitoring panel) --- */ .monitoring-panel .card { border-radius: var(--radius-md); } .monitoring-panel .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.7rem; margin-bottom: 0.85rem; border-bottom: 1px solid var(--border); } .monitoring-panel .card-head h3 { font-size: 0.98rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .monitoring-vendors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; } @media (max-width: 900px) { .monitoring-vendors { grid-template-columns: 1fr; } } /* --- Custom confirm dialog (replaces native confirm) --- */ dialog.mon-confirm { border: none; padding: 0; background: transparent; max-width: 460px; width: calc(100% - 32px); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); overflow: visible; color: var(--text); } dialog.mon-confirm::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: monBackdropFade .18s ease-out; } @keyframes monBackdropFade { from { opacity: 0; } to { opacity: 1; } } dialog.mon-confirm[open] { animation: monConfirmIn .22s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes monConfirmIn { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .mon-confirm-inner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem 1.2rem; } .mon-confirm-title { font-size: 1.02rem; font-weight: 700; color: var(--text); margin: 0 0 0.5rem; line-height: 1.3; letter-spacing: -0.01em; } .mon-confirm-msg { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; margin: 0 0 1.2rem; white-space: pre-line; word-break: break-word; } .mon-confirm-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; } .mon-confirm-actions .btn { min-width: 92px; } .mon-confirm-actions .btn.btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; } .mon-confirm-actions .btn.btn-danger:hover { background: #dc2626; border-color: #dc2626; } /* Light mode tweaks */ [data-theme="light"] .monitoring-tabs { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); } [data-theme="light"] .monitoring-tab.is-active { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } [data-theme="light"] dialog.mon-confirm::backdrop { background: rgba(15, 23, 42, 0.45); } /* --- Custom alert dialog (replaces native alert) --- */ dialog.mon-alert { border: none; padding: 0; background: transparent; max-width: 520px; width: calc(100% - 32px); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); overflow: visible; color: var(--text); } dialog.mon-alert::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: monBackdropFade .18s ease-out; } dialog.mon-alert[open] { animation: monConfirmIn .22s cubic-bezier(0.16, 1, 0.3, 1); } .mon-alert-inner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; } .mon-alert-title { font-size: 1.02rem; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3; letter-spacing: -0.01em; } .mon-alert-title.is-error { color: #ef4444; } .mon-alert-msg { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.5; margin: 0; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow-y: auto; padding: 0.7rem 0.85rem; background: color-mix(in srgb, var(--surface-2) 55%, transparent); border: 1px solid var(--border); border-radius: var(--radius-sm); } .mon-alert-msg.is-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.45; } .mon-alert-actions { display: flex; justify-content: center; margin-top: 0.55rem; } .mon-alert-actions .btn { min-width: 120px; } [data-theme="light"] dialog.mon-alert::backdrop { background: rgba(15, 23, 42, 0.45); } /* ============================================================ REPORT TAB POLISH — 2026-05-24 Visual section separators + schedule wrap + cards + history. CSS-only, no HTML structure change. ============================================================ */ /* Section separators within report card body */ .monitoring-vendor-report-card .monitoring-report-schedule, .monitoring-vendor-report-card #monitoring-report-history, .monitoring-vendor-report-card .monitoring-report-preview-shell { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .monitoring-vendor-report-card #monitoring-report-result { margin-top: 0.75rem; } .monitoring-vendor-report-card #monitoring-report-warnings:empty { display: none; } .monitoring-vendor-report-card #monitoring-report-warnings:not(:empty) { margin-top: 1rem; } /* Nama Laporan group (3 vendor name inputs) */ .monitoring-report-vendor-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.55rem; margin-bottom: 0.6rem; } .monitoring-report-person-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .monitoring-report-person-row > input { flex: 1 1 200px; min-width: 0; } /* Schedule controls — flex wrap (natural 2 rows on desktop) */ .monitoring-report-schedule { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem 0.85rem; padding: 1rem; background: color-mix(in srgb, var(--surface-2) 45%, transparent); border: 1px solid var(--border); border-radius: var(--radius-md); } .monitoring-report-schedule .monitoring-report-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; white-space: nowrap; padding-bottom: 4px; } .monitoring-report-schedule .monitoring-report-field { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; } .monitoring-report-schedule .monitoring-report-field-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted); white-space: nowrap; } .monitoring-report-schedule .monitoring-report-field .input, .monitoring-report-schedule .monitoring-report-field select.input { width: auto; min-width: 0; } .monitoring-report-schedule > #monitoring-report-schedule-status, .monitoring-report-schedule > span.muted.small { flex-basis: 100%; margin: 0.4rem 0 0 !important; padding-top: 0.55rem; border-top: 1px dashed color-mix(in srgb, var(--border) 50%, transparent); font-size: 0.78rem; } @media (max-width: 720px) { .monitoring-report-schedule { flex-direction: column; align-items: stretch; } .monitoring-report-schedule > * { width: 100%; } .monitoring-report-schedule .monitoring-report-toggle, .monitoring-report-schedule .monitoring-report-field { width: 100%; } } /* Penerima Terpilih cards */ .monitoring-report-selected { display: flex; flex-direction: column; gap: 0.45rem; } .monitoring-report-selected > div:not(.monitoring-report-empty) { padding: 0.55rem 0.75rem; background: color-mix(in srgb, var(--surface-2) 50%, transparent); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .12s, background .12s; } .monitoring-report-selected > div:not(.monitoring-report-empty):hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } .monitoring-report-empty { padding: 0.55rem 0.75rem; color: var(--muted); font-size: 0.85rem; font-style: italic; } /* Actions bar */ .monitoring-report-actions { display: flex; justify-content: flex-end; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.9rem; } /* History table polish */ #monitoring-report-history { font-size: 0.83rem; overflow-x: auto; } #monitoring-report-history table { width: 100%; border-collapse: collapse; } #monitoring-report-history th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--border); text-align: left; background: color-mix(in srgb, var(--surface-2) 55%, transparent); } #monitoring-report-history td { padding: 0.45rem 0.65rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); } #monitoring-report-history tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 25%, transparent); } #monitoring-report-history tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } /* Preview shell label + textarea */ .monitoring-report-preview-shell { display: block; } .monitoring-report-preview-shell > span:first-child { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin-bottom: 0.4rem; } .monitoring-report-preview { width: 100%; min-height: 200px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; line-height: 1.5; } /* Light mode */ [data-theme="light"] .monitoring-report-schedule { background: rgba(15, 23, 42, 0.03); } [data-theme="light"] .monitoring-report-selected > div:not(.monitoring-report-empty) { background: rgba(15, 23, 42, 0.02); } [data-theme="light"] #monitoring-report-history th { background: rgba(15, 23, 42, 0.04); } /* === END REPORT TAB POLISH === */ /* ============================================================ ANNOUNCEMENTS PAGE POLISH — 2026-05-24 Scoped to #panel-announcements. CSS-only, no HTML/JS change. ============================================================ */ #panel-announcements .page-head { margin-bottom: 1.5rem; } #panel-announcements .page-head .greeting p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); } /* Empty state — bigger icon, subtle dashed card, less vertical space */ #panel-announcements .empty-state { padding: 2rem 1.25rem !important; background: color-mix(in srgb, var(--surface-2) 35%, transparent); border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent); border-radius: var(--radius-md); } #panel-announcements .empty-state-icon { width: 72px; height: 72px; margin: 0 auto 0.9rem; font-size: 2rem; border-radius: 18px; } /* Panel head separator (all .panel inside the page) */ #panel-announcements .panel-head { padding-bottom: 0.85rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); } /* Admin grid wider gap */ #panel-announcements .announcement-admin-grid { gap: 1.5rem; } /* Form note — subtle accent left-bar */ #panel-announcements .announcement-form-note { margin: 0 0 1rem; padding: 0.6rem 0.85rem; background: color-mix(in srgb, var(--accent) 6%, transparent); border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--radius-xs); font-size: 0.8rem; color: var(--text-secondary); } /* Form labels uppercase muted (exclude checkbox row labels) */ #panel-announcements .announcement-form-grid .field label:not(.announcement-check) { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted); margin-bottom: 0.4rem; } /* Form inputs — lifted background to separate from panel */ #panel-announcements .announcement-form-grid input:not([type="checkbox"]):not([type="radio"]), #panel-announcements .announcement-form-grid select, #panel-announcements .announcement-form-grid textarea { background: color-mix(in srgb, var(--surface-2) 65%, transparent); } #panel-announcements .announcement-form-grid input:focus, #panel-announcements .announcement-form-grid select:focus, #panel-announcements .announcement-form-grid textarea:focus { background: var(--surface); } /* Checkbox row label override (keep natural casing, smaller) */ #panel-announcements .announcement-check { min-height: 36px; font-size: 0.88rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); } /* Form actions — right-align */ #panel-announcements .announcement-form-actions { justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; } /* Filter row — match form input bg, consistent height */ #panel-announcements .announcement-filter-row { margin-bottom: 1.25rem; } #panel-announcements .announcement-filter-row input, #panel-announcements .announcement-filter-row select { background: color-mix(in srgb, var(--surface-2) 65%, transparent); min-height: 40px; padding: 0.55rem 0.8rem; border-radius: var(--radius-xs); } /* Manage list — same empty state treatment */ #panel-announcements .announcement-manage-list .empty-state { /* Inherits the empty-state rule above */ } /* Light mode tweaks */ [data-theme="light"] #panel-announcements .empty-state { background: rgba(15, 23, 42, 0.025); border-color: rgba(15, 23, 42, 0.08); } [data-theme="light"] #panel-announcements .announcement-form-grid input:not([type="checkbox"]):not([type="radio"]), [data-theme="light"] #panel-announcements .announcement-form-grid select, [data-theme="light"] #panel-announcements .announcement-form-grid textarea, [data-theme="light"] #panel-announcements .announcement-filter-row input, [data-theme="light"] #panel-announcements .announcement-filter-row select { background: #fff; } [data-theme="light"] #panel-announcements .announcement-form-grid input:focus, [data-theme="light"] #panel-announcements .announcement-form-grid select:focus, [data-theme="light"] #panel-announcements .announcement-form-grid textarea:focus { background: #f8fafc; } /* === END ANNOUNCEMENTS POLISH === */ /* === END MONITORING REDESIGN === */