/* =========================================================================== Design tokens — Finance/Enterprise "Data-Dense Dashboard" (ui-ux-pro-max). Source of truth: design-system/finance-kreasi/MASTER.md. Dual-theme: LIGHT is the default (:root); DARK overrides via :root[data-theme="dark"]. An inline head script sets data-theme pre-paint from localStorage('fk-theme') or prefers-color-scheme, so the cascade never depends on the media query. Variable NAMES are unchanged from the previous (Sentry) system so existing component rules keep working; only the values and a handful of on-accent text colours change. =========================================================================== */ :root { color-scheme: light; /* surfaces — light */ --canvas: #f8fafc; --surface: #ffffff; --surface-card: #ffffff; --surface-elevated: #e2e8f0; /* doubles as the subtle border colour */ /* text */ --ink: #0f172a; --body: #334155; --muted: #5b677b; /* brand / interactive — trust navy */ --primary: #1e3a5f; --primary-dim: #15293f; --primary-soft: rgba(30, 58, 95, 0.08); --on-primary: #ffffff; /* text/icon on a --primary fill */ --on-status: #ffffff; /* text on a saturated status fill (dot, tag) */ /* semantic status — dark-700 tints read AA on light surfaces + on pale fills */ --ok: #15803d; --warn: #b45309; --err: #b91c1c; --info: #1d4ed8; /* lines / interaction */ --border: #cbd5e1; --hover: rgba(15, 23, 42, 0.04); --focus-ring: rgba(30, 58, 95, 0.30); /* elevation (MASTER shadow scale) */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 20px rgba(15, 23, 42, 0.12); --shadow-xl: 0 20px 30px rgba(15, 23, 42, 0.16); /* spacing */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --radius: 12px; /* type — Lexend (display) + Source Sans 3 (body) + JetBrains Mono (data) */ --font-display: "Lexend", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } :root[data-theme="dark"] { color-scheme: dark; /* surfaces — dark (slate, tuned to the navy brand; not pure black) */ --canvas: #0f172a; --surface: #1e293b; --surface-card: #1e293b; --surface-elevated: #334155; /* text */ --ink: #f8fafc; --body: #cbd5e1; --muted: #94a3b8; /* brand / interactive — lighter tonal variant so it reads on dark */ --primary: #3b82f6; --primary-dim: #2563eb; --primary-soft: rgba(59, 130, 246, 0.16); --on-primary: #0b1220; /* dark text on bright-blue fill (AA) */ --on-status: #0b1220; /* dark text on bright status fill */ /* semantic status — bright variants for on-dark legibility */ --ok: #22c55e; --warn: #fbbf24; --err: #f87171; --info: #60a5fa; /* lines / interaction */ --border: #334155; --hover: rgba(255, 255, 255, 0.04); --focus-ring: rgba(59, 130, 246, 0.45); /* elevation — deeper on dark */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 36px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--body); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { color: var(--ink); margin-top: 0; font-family: var(--font-display); letter-spacing: -0.01em; } code { font-family: var(--font-mono); background: var(--surface-elevated); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; } main { max-width: 1480px; margin: 0 auto; padding: var(--space-xl) var(--space-xl); width: 100%; } .hero h1 { font-size: 40px; letter-spacing: -0.02em; } .lede { font-size: 18px; } .muted { color: var(--muted); font-size: 14px; } .status-grid { list-style: none; padding: 0; margin: var(--space-xl) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); } .status-grid li { background: var(--surface-card); padding: var(--space-md); border-radius: var(--radius); border: 1px solid var(--surface-elevated); } .status-grid .ok { color: var(--ok); margin-right: var(--space-xs); } .status-grid .pending { color: var(--muted); margin-right: var(--space-xs); } .logout-form { display: inline; margin: 0; } .btn-link { background: none; border: none; color: var(--body); padding: 0; font: inherit; cursor: pointer; } .btn-link:hover { color: var(--primary); } /* =========================================================================== App shell (nav redesign) — collapsible left sidebar + slim top bar. All navigation lives in the sidebar; the top bar carries only the notification bell and the account dropdown. Three layout states: - default : sidebar expanded (240px) - .nav-collapsed : icon-only rail (64px) — desktop, persisted - .nav-open : drawer slid in over content — mobile only The state classes live on (documentElement); restored pre-paint by an inline head script and toggled by navScript(). =========================================================================== */ .app-shell { display: flex; min-height: 100vh; align-items: stretch; } .app-main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* main is centred within the main column; cancel the global auto-centring so wide content tracks the sidebar instead of the viewport. */ .app-main-col > main { width: 100%; } /* ---- Sidebar ---- */ .sidebar { flex: 0 0 240px; width: 240px; background: var(--surface); border-right: 1px solid var(--surface-elevated); position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; transition: flex-basis 160ms ease, width 160ms ease; } .sidebar-head { display: flex; align-items: center; height: 56px; padding: 0 var(--space-md); border-bottom: 1px solid var(--surface-elevated); } .sidebar .brand { display: flex; align-items: center; gap: var(--space-sm); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; } .sidebar .brand-mark { color: var(--primary); font-size: 18px; line-height: 1; } .sidebar .brand:hover .brand-text { color: var(--primary); } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-sm); } .nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: var(--space-md) var(--space-sm) var(--space-xxs); } .nav-section:first-child { padding-top: var(--space-xs); } .nav-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 8px; color: var(--body); text-decoration: none; font-size: 14px; white-space: nowrap; } .nav-item:hover { background: var(--surface-card); color: var(--ink); } .nav-item.active { background: var(--surface-elevated); color: var(--ink); box-shadow: inset 2px 0 0 var(--primary); } .nav-ico { flex: 0 0 24px; width: 24px; text-align: center; font-size: 15px; line-height: 1; } .nav-label { overflow: hidden; text-overflow: ellipsis; } /* ---- Collapsed icon-rail (desktop) ---- */ .nav-collapsed .sidebar { flex-basis: 64px; width: 64px; } .nav-collapsed .brand-text, .nav-collapsed .nav-label, .nav-collapsed .nav-section { display: none; } .nav-collapsed .sidebar-head { justify-content: center; padding: 0; } .nav-collapsed .nav-item { justify-content: center; padding: var(--space-sm) 0; } /* ---- Top bar ---- */ .topbar { display: flex; align-items: center; gap: var(--space-sm); height: 56px; padding: 0 var(--space-lg); background: var(--surface); border-bottom: 1px solid var(--surface-elevated); position: sticky; top: 0; z-index: 8; } .topbar-spacer { flex: 1 1 auto; } .nav-burger { background: none; border: none; color: var(--body); font-size: 20px; line-height: 1; cursor: pointer; padding: var(--space-xs); border-radius: 8px; } .nav-burger:hover { color: var(--primary); background: var(--surface-elevated); } /* ---- Theme toggle (light/dark) ---- */ .topbar-theme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: none; border: none; color: var(--body); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .topbar-theme:hover { background: var(--surface-elevated); color: var(--primary); } .theme-ico { display: none; line-height: 0; } :root[data-theme="light"] .theme-ico--dark { display: inline-flex; } :root[data-theme="dark"] .theme-ico--light { display: inline-flex; } /* ---- Notification bell ---- */ .topbar-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; text-decoration: none; color: var(--body); } .topbar-bell:hover { background: var(--surface-elevated); } .bell-ico { font-size: 18px; line-height: 1; } .bell-count { position: absolute; top: 4px; right: 2px; } .bell-count--on { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--err); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface); } /* ---- Account dropdown (
) ---- */ .account { position: relative; } .account-trigger { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xxs) var(--space-xs); border-radius: 8px; cursor: pointer; list-style: none; color: var(--body); max-width: 220px; } .account-trigger::-webkit-details-marker { display: none; } .account-trigger:hover { background: var(--surface-elevated); } .account-avatar { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 999px; background: var(--surface-elevated); color: var(--ink); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .account-name { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-caret { color: var(--muted); font-size: 11px; } .account[open] .account-caret { transform: rotate(180deg); } .account-panel { position: absolute; right: 0; top: calc(100% + var(--space-xs)); width: 240px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md); z-index: 20; box-shadow: var(--shadow-lg); } .account-id-name { color: var(--ink); font-weight: 600; font-size: 14px; } .account-id-email { font-size: 12px; word-break: break-all; } .account-roles { display: flex; flex-wrap: wrap; gap: var(--space-xxs); margin: var(--space-sm) 0; } .account-logout { margin: 0; } .btn-block { display: block; width: 100%; height: 40px; background: var(--surface-elevated); color: var(--ink); border: 1px solid var(--surface-elevated); border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; } .btn-block:hover { border-color: var(--err); color: var(--err); } /* ---- Mobile drawer (≤880px) ---- */ .sidebar-backdrop { display: none; } @media (max-width: 880px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; flex-basis: 260px; width: 260px; z-index: 40; transform: translateX(-100%); transition: transform 200ms ease; } .nav-open .sidebar { transform: translateX(0); } /* the collapsed-rail state is desktop-only — the mobile drawer is always full-label */ .nav-collapsed .sidebar { flex-basis: 260px; width: 260px; } .nav-collapsed .brand-text, .nav-collapsed .nav-label, .nav-collapsed .nav-section { display: revert; } .nav-collapsed .nav-item { justify-content: flex-start; padding: var(--space-xs) var(--space-sm); } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 39; } .nav-open .sidebar-backdrop { display: block; } .topbar { padding: 0 var(--space-md); } } /* ---- forms (BOD spec: input height >= 44 px) ---- */ .auth-shell { max-width: 420px; margin: var(--space-xxl) auto 0; } .auth-shell h1 { font-size: 28px; margin-bottom: var(--space-xs); } .auth-form { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); background: var(--surface-card); padding: var(--space-lg); border-radius: var(--radius); border: 1px solid var(--surface-elevated); } .form-field { display: flex; flex-direction: column; gap: var(--space-xxs); color: var(--body); font-size: 14px; } .form-field input { height: 44px; padding: 0 var(--space-md); background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: 8px; color: var(--ink); font: inherit; outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .form-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .btn-primary { height: 44px; background: var(--primary); color: var(--on-primary); border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 120ms ease; } .btn-primary:hover { background: var(--primary-dim); } .form-error { background: rgba(239, 68, 68, 0.12); border: 1px solid var(--err); color: var(--err); padding: var(--space-sm) var(--space-md); border-radius: 8px; font-size: 14px; } /* ---- clients module: list, table, detail, form ---- */ .list-shell, .detail-shell, .form-shell { display: flex; flex-direction: column; gap: var(--space-lg); } .list-header, .detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); } .list-header h1, .detail-header h1 { margin-bottom: var(--space-xs); } .page-nav { font-size: 14px; } .page-nav a { color: var(--muted); text-decoration: none; } .page-nav a:hover { color: var(--primary); } .list-filter input[type="search"] { width: 100%; max-width: 360px; height: 40px; padding: 0 var(--space-md); background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: 8px; color: var(--ink); font: inherit; outline: none; } .list-filter input[type="search"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .empty-state { background: var(--surface-card); border: 1px dashed var(--surface-elevated); border-radius: var(--radius); padding: var(--space-xl); text-align: center; color: var(--muted); } .empty-state a, .empty-state .muted a { color: var(--primary); text-decoration: none; } .table, .data-table { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius); overflow: hidden; } .table th, .table td, .data-table th, .data-table td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--surface-elevated); font-size: 14px; } .table th { background: var(--surface-elevated); color: var(--ink); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; } .data-table th { background: var(--surface); color: var(--muted); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; } .table tbody tr:last-child td, .data-table tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--hover); } .table a, .data-table a { color: var(--primary); text-decoration: none; } .table a:hover, .data-table a:hover { text-decoration: underline; } .table-actions { text-align: right; } .table-actions a { color: var(--body); } .table-actions a:hover { color: var(--primary); } /* PT code badge (static, small, mono) — used in client tables/details */ .pt-chip { display: inline-block; padding: 2px 8px; background: var(--surface-elevated); color: var(--ink); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; } .detail-grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-sm) var(--space-lg); background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius); padding: var(--space-lg); margin: 0; } .detail-grid dt { color: var(--muted); font-size: 14px; } .detail-grid dd { margin: 0; color: var(--ink); } .detail-grid dd.prewrap { white-space: pre-wrap; } .client-form select, .client-form textarea { height: 44px; padding: 0 var(--space-md); background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: 8px; color: var(--ink); font: inherit; outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .client-form textarea { height: auto; min-height: 80px; padding: var(--space-sm) var(--space-md); resize: vertical; } .client-form select:focus, .client-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .client-form input[disabled] { color: var(--muted); cursor: not-allowed; } .form-field--inline { flex-direction: row; align-items: center; gap: var(--space-sm); } .form-field--inline input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); } .field-error { color: var(--err); font-size: 13px; } .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); margin-top: var(--space-sm); } .btn-inline { display: inline-flex; align-items: center; padding: 0 var(--space-md); text-decoration: none; } /* ---- projects: list + filter chips + form + detail ---- */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); } .page-header h1 { font-size: 28px; margin: 0; } .page-header .header-actions { display: flex; gap: var(--space-md); align-items: center; } .page-header .btn-primary { height: 40px; padding: 0 var(--space-md); text-decoration: none; display: inline-flex; align-items: center; } /* Filter chips (clickable, e.g. status filters on /projects) — distinct from .pt-chip */ .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); } .chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--surface-card); border: 1px solid var(--surface-elevated); color: var(--body); font-size: 13px; text-decoration: none; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .chip:hover { border-color: var(--primary); } .chip-active { background: var(--surface-elevated); color: var(--ink); border-color: var(--primary); } .mono { font-family: var(--font-mono); font-size: 13px; } /* Status badges (driven by domain.ProjectStatus.BadgeClass). Long Indonesian status labels (e.g. "Invoice mendekati jatuh tempo", "Cash-out lama tanpa invoice") used to either stretch their table column or wrap mid-pill because the badge forced a single uppercase line. The badge now caps its width and wraps cleanly into a rounded multi-line tag: max-width keeps it from blowing out a cell, white-space:normal + overflow-wrap let it break on word boundaries, and the softened radius keeps a 2-line badge tidy. Pair with `.badge--inline` (below) when the label must stay on one line. Typography is sentence-case (the domain labels are already properly cased, e.g. "CE Disetujui", "Belum dibayar") — the old uppercase + letter-spacing made long labels read heavy and widened them needlessly. */ .badge { display: inline-block; max-width: 100%; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.35; border: 1px solid transparent; white-space: nowrap; vertical-align: middle; text-align: center; align-self: flex-start; } /* Single-line variant for tight, known-short codes (e.g. PT chips, kanban). */ .badge--inline { white-space: nowrap; border-radius: 999px; } .badge.muted { background: rgba(136, 136, 136, 0.15); color: var(--muted); border-color: rgba(136, 136, 136, 0.35); } .badge.warn { background: rgba(245, 158, 11, 0.15); color: var(--warn); border-color: rgba(245, 158, 11, 0.45); } .badge.ok { background: rgba(34, 197, 94, 0.15); color: var(--ok); border-color: rgba(34, 197, 94, 0.45); } .badge.err { background: rgba(239, 68, 68, 0.15); color: var(--err); border-color: rgba(239, 68, 68, 0.45); } .badge.info { background: rgba(59, 130, 246, 0.15); color: var(--info); border-color: rgba(59, 130, 246, 0.45); } /* Project detail key/value grid + next-steps hints */ .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius); padding: var(--space-lg); margin-bottom: var(--space-lg); } .kv-grid > div { display: flex; flex-direction: column; gap: var(--space-xxs); } .kv-key { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .hint-block { background: var(--surface); border-left: 3px solid var(--primary); padding: var(--space-md) var(--space-lg); border-radius: 8px; } .hint-block h2 { font-size: 16px; margin: 0 0 var(--space-sm) 0; } .hint-block ul { margin: 0; padding-left: var(--space-md); color: var(--body); font-size: 14px; } .hint-block li { margin-bottom: var(--space-xs); } .hint-block code { font-size: 12px; } /* Project form (wider entity form with grid rows + checkbox rows) */ .entity-form { display: flex; flex-direction: column; gap: var(--space-md); background: var(--surface-card); padding: var(--space-lg); border-radius: var(--radius); border: 1px solid var(--surface-elevated); max-width: 720px; } .entity-form input[type=text], .entity-form input[type=date], .entity-form select { height: 44px; padding: 0 var(--space-md); background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: 8px; color: var(--ink); font: inherit; outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .entity-form input:focus, .entity-form select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .entity-form input[readonly] { color: var(--muted); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .form-check { display: flex; gap: var(--space-sm); align-items: center; color: var(--body); font-size: 14px; } .form-check input { width: 18px; height: 18px; accent-color: var(--primary); } .req { color: var(--err); } .cost-lines { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-sm); } .cost-line { display: grid; grid-template-columns: 1fr 200px auto; gap: var(--space-sm); align-items: center; } .cost-line .cost-line-remove { color: var(--muted); font-size: 18px; line-height: 1; } .cost-line .cost-line-remove:hover { color: var(--err); } @media (max-width: 640px) { .cost-line { grid-template-columns: 1fr auto; } .cost-line input[name="cost_amount[]"] { grid-column: 1; } } .form-advanced { border-top: 1px solid var(--surface-elevated); padding-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); } .form-advanced > summary { cursor: pointer; user-select: none; } .form-advanced[open] > summary { margin-bottom: var(--space-xs); } /* ---- PO module ---- */ .entity-form textarea { padding: var(--space-sm) var(--space-md); background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: 8px; color: var(--ink); font: inherit; outline: none; resize: vertical; min-height: 96px; transition: border-color 120ms ease, box-shadow 120ms ease; } .entity-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .po-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0; } .po-actions .inline-form { margin: 0; } .po-actions button { white-space: nowrap; } /* ---- Flash family (Batch A polish) — four variants matching .badge palette tints. Backwards-compat aliases: .form-error → .flash.flash-err, .form-flash → .flash.flash-ok, .flash-info → .flash.flash-info, all kept so existing call sites don't break mid-migration. */ .flash, .form-error, .form-flash, .flash-info { padding: var(--space-sm) var(--space-md); border-radius: 8px; font-size: 14px; margin-bottom: var(--space-md); border: 1px solid transparent; } .flash-err, .form-error { background: rgba(239, 68, 68, 0.12); border-color: var(--err); color: var(--err); } .flash-ok, .form-flash { background: rgba(34, 197, 94, 0.12); border-color: var(--ok); color: var(--ok); } .flash-warn { background: rgba(245, 158, 11, 0.12); border-color: var(--warn); color: var(--warn); } .flash-info-v, .flash-info { background: rgba(59, 130, 246, 0.12); border-color: var(--info); color: var(--info); } /* .flash-info-v exists only because .flash-info is already taken as the legacy class name; new code should call view.Flash("info", msg) which renders class="flash flash-info-v". */ .detail-header .header-actions { display: flex; gap: var(--space-md); align-items: center; } .inline-form { display: inline-flex; } /* ---- Sticky action bar (Batch A polish) — top-of-detail band that keeps the primary CTA reachable above the fold. Wraps the existing page-nav + entity number + primary action on invoices_detail.templ, budgetrequests_detail.templ, changeevents_detail.templ. */ .detail-actionbar { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--surface-elevated); padding: var(--space-sm) var(--space-md); display: flex; align-items: center; gap: var(--space-md); margin: 0 calc(-1 * var(--space-xl)) var(--space-md); } .detail-actionbar .nav { color: var(--muted); text-decoration: none; } .detail-actionbar .nav:hover { color: var(--primary); } .detail-actionbar .ident { font-family: var(--font-mono); font-size: 13px; color: var(--ink); } .detail-actionbar .actions { margin-left: auto; display: flex; gap: var(--space-sm); align-items: center; } /* ---- Empty-state 3-part shape (Batch A polish) — every empty state across queues and lists gets: title (h3), sub (muted body), action link. */ .empty-state { padding: var(--space-xxl) var(--space-xl); text-align: center; background: var(--surface-card); border: 1px dashed var(--surface-elevated); border-radius: var(--radius); } .empty-state h3 { color: var(--ink); margin: 0 0 var(--space-xs); font-size: 18px; } .empty-state p { color: var(--muted); margin: 0 0 var(--space-md); font-size: 14px; } .empty-state a { color: var(--primary); text-decoration: none; font-weight: 500; } .empty-state a:hover { text-decoration: underline; } /* ---- KPI strip (Batch B Module 1) — promoted from sites/prototype/styles.css:258. Sentry palette is the only colour source: --rose→var(--err), --emerald→var(--ok). Used on every role home (view.KPIStrip). 4-up on desktop, collapses to 2-up then 1-up on narrower screens. The colour-coded top border encodes kind. */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); } .kpi { background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius); padding: var(--space-lg); border-top: 3px solid var(--primary); } .kpi.err { border-top-color: var(--err); } .kpi.warn { border-top-color: var(--warn); } .kpi.ok { border-top-color: var(--ok); } .kpi.info { border-top-color: var(--info); } .kpi .kpi-label { display: block; color: var(--muted); font-size: 13px; font-weight: 500; } .kpi .kpi-value { display: block; margin: var(--space-xs) 0 var(--space-xxs); font-family: var(--font-sans); font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -1px; color: var(--primary); } .kpi .kpi-sub { display: block; color: var(--muted); font-size: 12px; } @media (max-width: 960px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr; } } /* ---- Admin links (Batch B Module 3 — AdminHome) — minimal link list. */ .admin-links h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: var(--space-lg) 0 var(--space-sm); } .admin-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); } .admin-links li { background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: 8px; padding: var(--space-sm) var(--space-md); font-size: 14px; } .admin-links li a { color: var(--ink); text-decoration: none; font-weight: 500; } .admin-links li a:hover { color: var(--primary); } /* ---- Ops home action row + Kanban (Batch B Module 3) — promoted from sites/prototype/styles.css:528. Sentry palette only — prototype's --rose and --warning swap to var(--err) / var(--warn). On mobile the 5-lane grid becomes a horizontal-scroll snap container (per plan). */ .ops-action-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; } .ops-picker { display: flex; align-items: center; gap: var(--space-sm); } .ops-picker select { height: 40px; padding: 0 var(--space-md); background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: 8px; color: var(--ink); font: inherit; } .ops-quick-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .ops-quick-actions .btn-primary { height: 40px; padding: 0 var(--space-md); text-decoration: none; display: inline-flex; align-items: center; } .kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); } .kanban .lane { background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: var(--radius); padding: var(--space-md); min-height: 360px; min-width: 0; } .kanban .lane h3 { margin: 0 0 var(--space-sm); font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; font-weight: 600; } .kanban-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface-card); border: 1px solid var(--surface-elevated); border-left: 3px solid var(--surface-elevated); border-radius: 8px; padding: var(--space-sm); margin-bottom: var(--space-xs); text-decoration: none; color: var(--body); } .kanban-card:hover { border-color: var(--primary); } .kanban-card-number { font-size: 11px; color: var(--muted); } .kanban-card-name { font-size: 13px; color: var(--ink); font-weight: 600; } .kanban-card-hint { color: var(--muted); font-size: 11px; } .lane-empty { color: var(--muted); font-size: 12px; text-align: center; padding: var(--space-lg) 0; margin: 0; } @media (max-width: 1100px) { .kanban { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .kanban { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-sm); } .kanban > section { flex: 0 0 280px; scroll-snap-align: start; } } /* ---- Tab strip (Batch B Module 3 — FinanceHome) — HTMX-driven hx-get swap. The .active class is moved by client-side toggling at the swap; until C2 ships hx-trigger glue, the active style is just a static initial render. */ .tab-strip { display: flex; gap: var(--space-md); border-bottom: 1px solid var(--surface-elevated); margin: var(--space-lg) 0 var(--space-md); } .tab-link { color: var(--muted); text-decoration: none; padding: var(--space-sm) var(--space-md); border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; } .tab-link:hover { color: var(--body); } .tab-link.active { color: var(--ink); border-bottom-color: var(--primary); } .tab-panel-host { min-height: 120px; } /* ---- Role-home layout (Batch B Modules 3) — 2-column area used by BOD + Finance. Stacks to a single column on tablets / mobile. The lists inside are flat ul → li with a strong/sub/meta breakdown. */ .role-home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-lg); } @media (max-width: 960px) { .role-home-grid { grid-template-columns: 1fr; } } .role-home-col { background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius); padding: var(--space-lg); } .role-home-col h2 { font-size: 16px; margin: 0 0 var(--space-md); } .role-home-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .role-home-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--surface-elevated); } .role-home-list li:last-child { border-bottom: none; } .role-home-list a { color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .role-home-list a:hover strong { color: var(--primary); } .role-home-list strong { font-size: 14px; font-weight: 600; } .role-home-sub { color: var(--muted); font-size: 12px; } .role-home-meta { color: var(--body); font-size: 13px; white-space: nowrap; } .role-home-more { display: inline-block; margin-top: var(--space-md); color: var(--primary); text-decoration: none; font-size: 13px; } .role-home-more:hover { text-decoration: underline; } /* ---- Mobile bottom nav (Batch C1) — sticky 4-tab band for Ops on small viewports. Hidden globally; only displays at ≤640 px AND when carries data-role containing the "ops" token (CSS attribute selector `~=`). Bottom padding is added to
in the same query so the nav never overlaps detail-actionbar or form-actions. The centred Aksi+ tab is ~10% larger via flex: 1.1 to draw the eye + match the spec. */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: var(--surface); border-top: 1px solid var(--surface-elevated); z-index: 10; padding: 4px 0; } .mobile-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); text-decoration: none; min-height: 44px; font-size: 12px; } .mobile-bottom-nav a.aksi { flex: 1.1; color: var(--primary); font-size: 13px; } .mobile-bottom-nav a:hover, .mobile-bottom-nav a.active { color: var(--primary); } .mobile-bottom-nav .mbn-label { font-size: 12px; line-height: 1; } @media (max-width: 640px) { body[data-role~="ops"] .mobile-bottom-nav { display: flex; } body[data-role~="ops"] main { padding-bottom: 80px; } } /* ---- Aksi+ sheet (Batch C1) — HTMX-driven slide-up modal for Ops mobile shell. z-index 20 sits above the bottom nav (10) and the sticky detail-actionbar (5). Backdrop is opaque enough (50% black) to dim the page; click anywhere outside the .aksi-sheet triggers the hx-get close handler bound to the backdrop. Buttons are ≥56 px tall to satisfy the thumb-zone target. */ .aksi-sheet-root { position: fixed; inset: 0; z-index: 20; } .aksi-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); cursor: pointer; } .aksi-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--surface-elevated); padding: var(--space-lg); border-radius: var(--radius) var(--radius) 0 0; } .aksi-sheet h2 { margin: 0 0 var(--space-md); font-size: 20px; } .aksi-sheet a.aksi-btn { display: block; padding: var(--space-md) var(--space-lg); background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: 16px; min-height: 56px; margin-bottom: var(--space-sm); } .aksi-sheet a.aksi-btn:hover { border-color: var(--primary); } .aksi-sheet .aksi-cancel { display: block; width: 100%; margin-top: var(--space-md); padding: var(--space-sm); text-align: center; } /* ---- Single-column form collapse (Batch C1) — ≤480 px viewport. Every .entity-form .form-row stacks; form-actions reverses direction so the primary CTA lands above the cancel link (thumb zone). Buttons + cancel link grow full-width with ≥44 px tap target. !important on grid-template is required because some pages set inline grid-template-columns on .form-row to control desktop alignment. */ @media (max-width: 480px) { .entity-form { padding: var(--space-md); } .form-row { grid-template-columns: 1fr !important; } .form-actions { flex-direction: column-reverse; gap: var(--space-sm); } .form-actions > a, .form-actions > button { width: 100%; min-height: 44px; } .form-actions > a.btn-link { min-height: 44px; padding: var(--space-sm); border-radius: 8px; border: 1px solid var(--surface-elevated); text-align: center; } } /* ---- BR module: CE-usage bar (G3 thresholds) ---- */ .usage-bar { position: relative; width: 100%; height: 18px; background: var(--surface-elevated); border-radius: 999px; overflow: hidden; margin: var(--space-sm) 0; --usage-pct: 0%; } .usage-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--usage-pct); background: var(--muted); border-radius: 999px; transition: width 240ms ease; } .usage-bar.safe .usage-bar-fill { background: var(--ok); } .usage-bar.warn .usage-bar-fill { background: var(--warn); } .usage-bar.block .usage-bar-fill { background: var(--err); } .usage-bar-meta { position: relative; display: flex; gap: var(--space-md); align-items: center; justify-content: space-between; padding: 0 var(--space-md); height: 18px; font-size: 12px; color: var(--ink); mix-blend-mode: difference; } .usage-bar-meta strong { font-variant-numeric: tabular-nums; } /* =========================================================================== UI overhaul (Heroicons + mobile + filters + charts) — additive only. =========================================================================== */ /* ---- Inline Heroicons (view.Icon) ---- */ .ico { display: inline-block; vertical-align: -0.125em; flex: 0 0 auto; } /* Nav rail keeps its 24px icon box; the SVG fills it. */ .nav-ico .ico { width: 100%; height: 100%; } .nav-ico { display: inline-flex; align-items: center; justify-content: center; } /* ---- Status dot (replaces ● bullets) ---- */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--muted); margin-right: var(--space-xxs); vertical-align: middle; } .status-dot--ok { background: var(--ok); } .status-dot--warn { background: var(--warn); } .status-dot--err { background: var(--err); } .status-dot--info { background: var(--info); } /* ---- Secondary / icon buttons (real buttons, ≥44px tap target) ---- */ .btn-secondary { display: inline-flex; align-items: center; gap: var(--space-xxs); min-height: 40px; padding: 0 var(--space-md); background: var(--surface-card); color: var(--body); border: 1px solid var(--surface-elevated); border-radius: 8px; font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .btn-secondary:hover { border-color: var(--primary); color: var(--ink); } .btn-secondary.is-disabled, a.btn-secondary[aria-disabled="true"] { opacity: 0.5; pointer-events: none; cursor: default; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: 1px solid var(--surface-elevated); border-radius: 8px; color: var(--body); cursor: pointer; } .btn-icon:hover { border-color: var(--primary); color: var(--primary); } /* Table-action button: compact, right-aligned, with icon. */ .table-actions .btn-secondary { min-height: 36px; padding: 0 var(--space-sm); font-size: 13px; } @media (max-width: 640px) { .btn-secondary, .btn-icon { min-height: 44px; } .table-actions .btn-secondary { min-height: 44px; } } /* ---- Filter bar + dropdowns (sit beside the existing .chip-row) ---- */ .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm); margin-bottom: var(--space-md); } .filter-field { display: flex; flex-direction: column; gap: 2px; } .filter-field > label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .filter-select, .filter-bar input[type="date"], .filter-bar input[type="search"] { height: 40px; padding: 0 var(--space-sm); background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: 8px; color: var(--ink); font: inherit; font-size: 14px; outline: none; } .filter-select:focus, .filter-bar input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } @media (max-width: 640px) { .filter-bar { flex-direction: column; align-items: stretch; } .filter-field { width: 100%; } .filter-select, .filter-bar input { width: 100%; } } /* ---- Mobile: horizontal-scroll wrapper for wide tables ---- */ .table-scroll { position: relative; } @media (max-width: 760px) { .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll > table { min-width: 640px; } /* Edge-fade cue that more columns exist to the right. */ .table-scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; background: linear-gradient(to right, transparent, var(--surface)); } } /* ---- Mobile: card-stack transform for high-traffic lists ---- */ /* Opt-in via class .data-table--cards on the ; each
carries data-label="
". At ≤640px the table reflows to label:value cards. */ @media (max-width: 640px) { .data-table--cards thead { display: none; } .data-table--cards, .data-table--cards tbody { display: block; } .data-table--cards tr { display: block; background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius); padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-sm); } .data-table--cards td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xxs) 0; border: none; text-align: right; font-size: 14px; } .data-table--cards td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; flex: 0 0 auto; } .data-table--cards td[data-label=""]::before { content: none; } .data-table--cards .table-actions { justify-content: flex-end; } } /* ---- Chart cards (Chart.js host) ---- */ .chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); } @media (max-width: 760px) { .chart-grid { grid-template-columns: 1fr; } } .chart-card { background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius); padding: var(--space-md); } .chart-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: var(--space-sm); } .chart-canvas-wrap { position: relative; height: 240px; } .chart-canvas-wrap > canvas { max-width: 100%; } .chart-caption { color: var(--muted); font-size: 12px; margin-top: var(--space-xs); } /* ---- Config viewer (/settings) ---- */ .config-section { margin-bottom: var(--space-lg); } .config-section h2 { font-size: 15px; margin: var(--space-lg) 0 var(--space-sm); color: var(--ink); } .config-table td:last-child { color: var(--ink); } .flash .ico { vertical-align: -0.15em; margin-right: var(--space-xxs); } /* =========================================================================== UX1 (appended): section-rhythm token, semantic colour helpers, and the responsive fixes flagged in the FE audit (table scroll, detail-grid 1-col, inline-field stacking). Kept at the end so the cascade lets these win. =========================================================================== */ :root { --space-section: 96px; } .text-err { color: var(--err); } .text-warn { color: var(--warn); } @media (max-width: 760px) { /* Non-card data tables scroll horizontally rather than overflow the page. */ .data-table:not(.data-table--cards) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 640px) { .detail-grid, .kv-grid { grid-template-columns: 1fr; } .form-field--inline { flex-direction: column; align-items: stretch; } } /* =========================================================================== Prototype design port (revamp) — CE stepper, signature badge, role chips, header PT context, inline guidance banners. Uses existing app tokens. =========================================================================== */ /* (CE lifecycle .stepper CSS removed — replaced by the Fate-driven .wf-rail diagram; the CEStepper component no longer exists.) */ /* Signature threshold badge */ .sig-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-xs); padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid; vertical-align: middle; } .sig-badge.single { color: var(--ok); border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); } .sig-badge.double { color: var(--warn); border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.08); } /* Role chips (admin users) */ .role-chip { display: inline-block; padding: 2px 9px; margin: 0 4px 4px 0; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-elevated); color: var(--body); } .role-chip--bod { color: var(--primary); } .role-chip--finance { color: var(--info); } .role-chip--ops { color: var(--ok); } .role-chip--admin { color: var(--warn); } /* Header PT context chip — distinct from the table .pt-chip */ .pt-context { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; margin-right: var(--space-sm); border-radius: 999px; background: var(--surface-card); border: 1px solid var(--surface-elevated); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; } .pt-context-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; } /* Inline guidance banners (richer than .form-error) */ .inline-banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 8px; margin: 0 0 var(--space-md); font-size: 13px; line-height: 1.5; border: 1px solid transparent; color: var(--ink); } .inline-banner .ib-ico { flex: none; } .inline-banner b { color: var(--ink); font-weight: 600; } .inline-banner.warn { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.35); } .inline-banner.error { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.35); } .inline-banner.info { background: var(--primary-soft); border-color: var(--focus-ring); } /* Tabular numerals for money columns */ .num, .mono { font-variant-numeric: tabular-nums; } /* Add threshold ticks to the existing BR usage bar (80% warn / 95% block) */ .usage-bar::before, .usage-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; z-index: 2; } .usage-bar::before { left: 80%; background: rgba(245, 158, 11, 0.7); } .usage-bar::after { left: 95%; background: rgba(239, 68, 68, 0.7); } /* =========================================================================== Prototype convergence — design system port (panels, grids, tags, bars, alert cards, doc timeline). Uses app tokens. Build: converge-1. =========================================================================== */ /* Panel card */ .panel { background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius); padding: var(--space-lg); margin-bottom: var(--space-lg); min-width: 0; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); } .panel-head h2, .panel > h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0; } .panel-body { color: var(--body); margin: 0 0 var(--space-md); line-height: 1.55; font-size: 14px; } .panel-body strong { color: var(--ink); font-weight: 600; } .panel-note { color: var(--muted); margin: var(--space-md) 0 0; font-size: 13px; line-height: 1.55; } .panel-note em { color: var(--primary); font-style: italic; } /* Tag badge (panel headers) */ .tag { display: inline-flex; align-items: center; height: 24px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface-elevated); color: var(--body); border: 1px solid var(--surface-elevated); white-space: nowrap; } .tag.green { color: var(--ok); border-color: var(--ok); } .tag.amber { color: var(--warn); border-color: var(--warn); } .tag.red { color: var(--err); border-color: var(--err); } .tag.blue { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } /* Multi-column panel grids */ .grid { display: grid; gap: var(--space-lg); margin-bottom: var(--space-lg); } .grid.two { grid-template-columns: 1.15fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } .grid > .panel { margin-bottom: 0; } @media (max-width: 1000px) { .grid.two, .grid.three { grid-template-columns: 1fr; } } /* Weekly cashflow bars */ .bars { display: grid; gap: var(--space-sm); } .bar-row { display: grid; grid-template-columns: 48px 1fr 110px; gap: var(--space-md); align-items: center; font-size: 13px; color: var(--body); } .bar-row > span { color: var(--muted); } .bar-row > b { height: 14px; border-radius: 999px; background: var(--surface-elevated); position: relative; overflow: hidden; } .bar-row > b i { display: block; height: 100%; width: var(--v, 0%); background: var(--primary); border-radius: 999px; } .bar-row > strong { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--primary); font-variant-numeric: tabular-nums; } /* PT totals split */ .pt-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .pt-totals > div { padding: var(--space-lg); background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: var(--radius); } .pt-totals span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .pt-totals strong { display: block; margin: 10px 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--primary); font-variant-numeric: tabular-nums; } .pt-totals small { color: var(--muted); font-size: 12px; } @media (max-width: 760px) { .pt-totals { grid-template-columns: 1fr; } } /* Alert Center — 3 columns of bordered cards */ .alert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .alert-col-head { display: flex; align-items: center; gap: var(--space-xs); font-size: 12px; font-weight: 600; margin: 0 0 var(--space-md); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); } .alert-col-head .sev-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); } .alert-col-head .sev-dot.red { background: var(--err); } .alert-col-head .sev-dot.amber { background: var(--warn); } .alert-col-head .sev-dot.blue { background: var(--info); } .alert-col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); } .alert-card { display: grid; gap: 4px; padding: var(--space-md); border: 1px solid var(--surface-elevated); border-radius: var(--radius); background: var(--surface); border-left: 3px solid var(--primary); } .alert-card.kritis { border-left-color: var(--err); } .alert-card.peringatan { border-left-color: var(--warn); } .alert-card.info { border-left-color: var(--info); } .alert-card b { font-size: 14px; color: var(--ink); font-weight: 600; } .alert-card .ac-msg { color: var(--body); font-size: 13px; } .alert-card .ac-meta { color: var(--muted); font-size: 12px; } .alert-card .ac-link { color: var(--primary); font-size: 12px; text-decoration: none; } .alert-card .ac-link:hover { text-decoration: underline; } .alert-card .ac-ack { justify-self: start; margin-top: 4px; background: none; border: none; padding: 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; } .alert-card .ac-ack:hover { color: var(--ink); } @media (max-width: 1000px) { .alert-grid { grid-template-columns: 1fr; } } /* Document detail — timeline + linked docs (Stage 2 docs) */ .doc-timeline { list-style: none; margin: 0; padding-left: 22px; border-left: 2px solid var(--surface-elevated); display: grid; gap: var(--space-md); } .doc-timeline li { position: relative; font-size: 13px; display: grid; grid-template-columns: 92px 1fr; gap: var(--space-sm); color: var(--body); } .doc-timeline li::before { content: ""; position: absolute; left: -27px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); border: 2px solid var(--surface-card); } .doc-timeline li.strong { font-weight: 600; color: var(--ink); } .doc-timeline li.strong::before { background: var(--primary); } .doc-timeline .t-date { color: var(--muted); font-family: var(--font-mono); font-size: 12px; } .doc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); } .doc-links li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: var(--radius); font-size: 13px; color: var(--body); } .doc-links strong { color: var(--primary); font-weight: 600; } /* convergence fix: kanban lanes must not stretch to a tall sibling */ .kanban { align-items: start; } /* kanban lane count badge + overflow link */ .lane h3 .lane-count { float: right; color: var(--muted); background: var(--surface-elevated); border-radius: 999px; padding: 0 7px; font-size: 11px; } .lane-more { display: block; margin-top: var(--space-xs); color: var(--primary); font-size: 12px; text-decoration: none; } .lane-more:hover { text-decoration: underline; } /* convergence: header action buttons must not wrap */ .header-actions .btn-primary, .btn-inline { white-space: nowrap; } /* convergence: card the metadata grid on detail pages not yet panelized (scoped to direct children so the CE detail's in-panel grid isn't double-carded) */ .detail-shell > .detail-grid { background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius); padding: var(--space-lg); } .detail-shell > h2 { font-size: 18px; margin-top: var(--space-sm); } /* Basis selector (invoice) + carry-over reconcile card — ported from prototype */ .basis-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-top: var(--space-sm); } .basis-opt { text-align: left; padding: var(--space-md); border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--surface-elevated); color: var(--body); display: grid; gap: 5px; } .basis-opt strong { color: var(--ink); font-size: 14px; font-weight: 600; } .basis-opt small { color: var(--muted); font-size: 12px; line-height: 1.45; } .basis-opt .basis-flag { font-size: 11px; color: var(--muted); } .basis-opt.active { border-color: var(--primary); background: var(--primary-soft); } .basis-opt.active strong { color: var(--primary); } .basis-opt.active .basis-flag { color: var(--primary); } .basis-opt.disabled { opacity: 0.5; } @media (max-width: 760px) { .basis-select { grid-template-columns: 1fr; } } .reconcile-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius); margin-bottom: var(--space-md); background: rgba(59,130,246,0.07); border: 1px solid rgba(59,130,246,0.3); } .reconcile-card .rc-amount { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; } .reconcile-card .rc-body { display: grid; gap: 2px; } .reconcile-card .rc-body strong { color: var(--ink); font-size: 14px; } .reconcile-card .rc-body span { color: var(--muted); font-size: 12px; } .reconcile-card .rc-cta { margin-left: auto; } /* =========================================================================== Revamp layer (ui-ux-pro-max / Finance enterprise) — appended last so it wins the cascade. Adds light-mode card depth, a global keyboard focus ring, and reduced-motion support. Uses the dual-theme tokens defined at the top. =========================================================================== */ /* Card depth — the "data-dense dashboard" look reads as elevated white cards on a slate canvas in light mode; the shadow is near-invisible (but harmless) on dark, where the border carries separation. */ .panel, .kpi, .chart-card, .role-home-col, .kv-grid, .detail-grid, .alert-card, .empty-state, .role-home-list, .table, .data-table { box-shadow: var(--shadow-sm); } /* Keyboard focus ring on every interactive element (a11y §1). Mouse clicks use :focus-visible so the ring only shows for keyboard/AT users. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; } /* Fate-driven workflow diagram rail (view.WorkflowDiagram) — states from the statechart rendered as connected chips, current ringed, terminals dimmed. */ .wf-panel .wf-rail { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; } .wf-node { display: inline-flex; } .wf-node .badge { opacity: 0.82; } .wf-node.current .badge { opacity: 1; font-weight: 700; outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 4px var(--primary-soft); } .wf-node.terminal .badge { opacity: 0.5; } .wf-sep { display: inline-flex; align-items: center; color: var(--muted); } /* Legal-next hints (view.WorkflowActions) — "where can this go next", from the statechart. */ .wf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--surface); border: 1px solid var(--surface-elevated); border-radius: 8px; } .wf-actions-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; } .wf-actions-chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs); } .wf-actions .badge { display: inline-flex; align-items: center; gap: 4px; } /* Respect the user's reduced-motion preference (a11y §7). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* =========================================================================== PREMIUM REVAMP LAYER (Stripe-grade finance analytics) — appended last so it wins the cascade. Adds: a validated chart palette (dataviz skill — run through scripts/validate_palette.js on this app's real card surfaces), an indigo accent, layered card elevation, and the hero-stat / delta / segmented / legend-chip components the cashflow revamp uses. Dark values are a *selected* set (own steps, re-validated on the dark card surface), not an auto-flip. =========================================================================== */ :root { --radius-lg: 16px; /* Indigo accent — the premium signature (validated ≥3:1 on #fff). Used for the cashflow hero, active controls, deltas, focus emphasis. */ --accent: #635bff; --accent-dim: #4f46e5; --accent-soft: rgba(99, 91, 255, 0.10); --on-accent: #ffffff; /* Validated categorical chart palette (light, surface #fff). Order is the CVD-safety mechanism — do not reshuffle without re-running the validator. */ --chart-1: #635bff; /* indigo */ --chart-2: #0d9488; /* teal */ --chart-3: #f59e0b; /* amber */ --chart-4: #16a34a; /* green */ --chart-5: #db2777; /* pink */ --chart-6: #dc2626; /* red */ /* Stripe-style layered card elevation (hairline ring + soft stacked shadow). */ --shadow-card: 0 0 0 1px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03), 0 4px 8px rgba(15,23,42,0.04), 0 12px 28px rgba(15,23,42,0.06); --shadow-hover: 0 0 0 1px rgba(99,91,255,0.20), 0 2px 4px rgba(15,23,42,0.05), 0 12px 32px rgba(15,23,42,0.10); } :root[data-theme="dark"] { --accent: #7c74ff; --accent-dim: #635bff; --accent-soft: rgba(124, 116, 255, 0.16); --on-accent: #0b1220; /* Validated categorical chart palette (dark, surface #1e293b). */ --chart-1: #7c74ff; --chart-2: #0d9488; --chart-3: #d97706; --chart-4: #16a34a; --chart-5: #db2777; --chart-6: #ef4444; --shadow-card: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.55); --shadow-hover: 0 0 0 1px rgba(124,116,255,0.35), 0 12px 36px rgba(0,0,0,0.6); } /* ---- Elevated card treatment (Stripe premium) — richer than the flat shadow-sm the base layer applies. Panels lift on hover; the hero panel wears an accent top-edge + faint wash. ---- */ .panel, .kpi, .chart-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: box-shadow 160ms ease, transform 160ms ease; } .panel { position: relative; } .panel--hero { overflow: hidden; border-color: transparent; background: linear-gradient(180deg, var(--accent-soft), transparent 120px), var(--surface-card); } .panel--hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), #db2777); } /* ---- KPI value adopts the indigo accent + proportional figures ---- */ .kpi .kpi-value { color: var(--ink); font-variant-numeric: normal; } .kpi.info .kpi-value { color: var(--accent); } /* ---- Hero stat (the one big number a panel leads with) ---- */ .stat-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-lg); margin: var(--space-xs) 0 var(--space-md); } .stat-hero .sh-value { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ink); } .stat-hero .sh-unit { font-size: 22px; font-weight: 600; color: var(--muted); margin-right: 2px; letter-spacing: -0.01em; } .stat-hero .sh-sub { display: flex; flex-direction: column; gap: 2px; } .stat-hero .sh-sub b { font-family: var(--font-mono); font-size: 15px; color: var(--body); font-variant-numeric: tabular-nums; } .stat-hero .sh-sub span { font-size: 12px; color: var(--muted); } /* ---- Delta pill (signed change; colour = direction, icon carries meaning too) ---- */ .delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; } .delta::before { font-size: 11px; line-height: 1; } .delta.up { background: rgba(12,163,12,0.12); color: var(--ok); } .delta.up::before { content: "\2197"; } .delta.down { background: rgba(208,59,59,0.12); color: var(--err); } .delta.down::before { content: "\2198"; } .delta.flat { background: var(--surface-elevated); color: var(--muted); } .delta.flat::before { content: "\2192"; } /* ---- Segmented control (period toggle 4/8/13 minggu) ---- */ .segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-elevated); border-radius: 999px; } .segmented a, .segmented button { appearance: none; border: none; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 5px 14px; border-radius: 999px; line-height: 1; transition: background 120ms ease, color 120ms ease; } .segmented a:hover, .segmented button:hover { color: var(--ink); } .segmented a.active, .segmented button.active { background: var(--surface-card); color: var(--accent); box-shadow: var(--shadow-sm); font-weight: 600; } /* header controls cluster (segmented toggle + PT tag) on the cashflow hero */ .cf-controls { display: flex; gap: var(--space-sm); align-items: center; } /* ---- Ops "Tindakan Cepat" — field-friendly quick actions. Step 1: a prominent project picker; Step 2: icon action cards that light up once a project is chosen. Bigger tap targets + icons for on-site use. ---- */ .qa-picker { position: relative; margin-bottom: var(--space-md); } .qa-picker-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: inline-flex; } .qa-select { width: 100%; height: 48px; padding: 0 40px 0 42px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--ink); font: inherit; font-size: 15px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color 120ms ease, box-shadow 120ms ease; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; } .qa-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: var(--space-sm); } .qa-action { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); min-height: 66px; background: var(--surface-card); border: 1px solid var(--surface-elevated); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .qa-action:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-1px); } .qa-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .qa-ico .ico { width: 20px; height: 20px; } .qa-picker-ico .ico { width: 18px; height: 18px; } .qa-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .qa-body b { font-size: 14px; font-weight: 600; color: var(--ink); } .qa-body small { font-size: 12px; color: var(--muted); line-height: 1.35; } .qa-action.qa-primary { border-color: var(--accent); background: var(--accent-soft); } .qa-action.qa-primary .qa-ico { background: var(--accent); color: var(--on-accent); } .qa-action.is-disabled { opacity: 0.5; pointer-events: none; box-shadow: none; } .qa-action.is-disabled .qa-ico { background: var(--surface-elevated); color: var(--muted); } .qa-hint { margin: var(--space-md) 0 0; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .qa-hint.hidden { display: none; } .qa-hint .qa-hint-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--warn); flex: none; } /* ---- Input Kit: file upload (fk-upload) — dropzone + camera/gallery + preview + client-side compression. Progressive enhancement over a native : fk-inputs.js adds `.js` to and hides the native input. ---- */ .fk-upload { display: flex; flex-direction: column; gap: var(--space-sm); } .js .fk-upload .fk-native { display: none; } .fk-dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-lg); border: 2px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: center; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; } .fk-dropzone:hover, .fk-dropzone:focus-visible { border-color: var(--accent); outline: none; } .fk-dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); } .fk-dz-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .fk-dz-ico .ico { width: 22px; height: 22px; } .fk-dz-text b { display: block; font-size: 14px; color: var(--ink); } .fk-dz-text small { color: var(--muted); font-size: 12px; } .fk-dz-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; margin-top: var(--space-xs); } .fk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .fk-btn:hover { border-color: var(--accent); color: var(--accent); } .fk-btn .ico { width: 18px; height: 18px; } .fk-previews { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .fk-previews:empty { display: none; } .fk-thumb { position: relative; width: 96px; } .fk-thumb img, .fk-thumb .fk-doc { width: 96px; height: 96px; border-radius: 10px; border: 1px solid var(--surface-elevated); display: block; object-fit: cover; } .fk-thumb .fk-doc { display: flex; align-items: center; justify-content: center; background: var(--surface-elevated); color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; } .fk-thumb .fk-rm { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--surface-card); background: var(--err); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .fk-thumb .fk-meta { font-size: 10px; color: var(--muted); margin-top: 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fk-thumb .fk-bar { height: 3px; border-radius: 999px; background: var(--surface-elevated); margin-top: 3px; overflow: hidden; } .fk-thumb .fk-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 140ms ease; } .fk-thumb.err img, .fk-thumb.err .fk-doc { border-color: var(--err); } .fk-thumb.err .fk-meta { color: var(--err); } .fk-link { font-size: 13px; margin-top: 2px; } .fk-link > summary { cursor: pointer; color: var(--muted); list-style: none; } .fk-link > summary::-webkit-details-marker { display: none; } .fk-link > summary:hover { color: var(--accent); } .fk-link input { margin-top: var(--space-xs); width: 100%; height: 44px; padding: 0 var(--space-md); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font: inherit; } /* ---- Input Kit: money field ([data-money]) ---- */ input[data-money] { font-variant-numeric: tabular-nums; } /* ---- Input Kit: searchable select ([data-search]) → filter box over a hidden native