/* ============================================================ PHPRay Console — design system Light + dark via prefers-color-scheme and [data-theme] override. ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Type scale */ --fs-xs: 10px; --fs-sm: 11px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 24px; --fs-3xl: 32px; /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* Light theme (default) */ --bg: #f5f6f8; --bg-elevated: #ffffff; --bg-inset: #eef0f4; --card: #ffffff; --card-hover: #f9fafb; --border: #dcdfe6; --border-soft: #e6e9ef; --text: #1d2333; --text-dim: #6b7280; --text-faint: #9aa1b2; --accent: #6c5ce7; --accent-contrast: #ffffff; --accent-soft: rgba(108, 92, 231, 0.10); --green: #0d9488; --green-soft: rgba(13, 148, 136, 0.12); --red: #dc3d43; --red-soft: rgba(220, 61, 67, 0.10); --yellow: #b45309; --yellow-soft: rgba(180, 83, 9, 0.12); --blue: #2563eb; --blue-soft: rgba(37, 99, 235, 0.10); --orange: #c2410c; --orange-soft: rgba(194, 65, 12, 0.10); --shadow-sm: 0 1px 2px rgba(15, 17, 23, 0.06); --shadow-md: 0 4px 16px rgba(15, 17, 23, 0.10); --shadow-lg: 0 12px 40px rgba(15, 17, 23, 0.18); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } /* Automatic dark mode */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1117; --bg-elevated: #151821; --bg-inset: #1a1d27; --card: #1a1d27; --card-hover: #202431; --border: #2a2d3a; --border-soft: #23262f; --text: #e1e4eb; --text-dim: #8b8fa3; --text-faint: #5f6478; --accent: #8e7cff; --accent-contrast: #ffffff; --accent-soft: rgba(142, 124, 255, 0.14); --green: #2dd4bf; --green-soft: rgba(45, 212, 191, 0.12); --red: #ff6b6b; --red-soft: rgba(255, 107, 107, 0.12); --yellow: #feca57; --yellow-soft: rgba(254, 202, 87, 0.12); --blue: #54a0ff; --blue-soft: rgba(84, 160, 255, 0.12); --orange: #ff9f43; --orange-soft: rgba(255, 159, 67, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); } } /* Manual overrides: [data-theme="dark"] / [data-theme="light"] on */ :root[data-theme="dark"] { --bg: #0f1117; --bg-elevated: #151821; --bg-inset: #1a1d27; --card: #1a1d27; --card-hover: #202431; --border: #2a2d3a; --border-soft: #23262f; --text: #e1e4eb; --text-dim: #8b8fa3; --text-faint: #5f6478; --accent: #8e7cff; --accent-contrast: #ffffff; --accent-soft: rgba(142, 124, 255, 0.14); --green: #2dd4bf; --green-soft: rgba(45, 212, 191, 0.12); --red: #ff6b6b; --red-soft: rgba(255, 107, 107, 0.12); --yellow: #feca57; --yellow-soft: rgba(254, 202, 87, 0.12); --blue: #54a0ff; --blue-soft: rgba(84, 160, 255, 0.12); --orange: #ff9f43; --orange-soft: rgba(255, 159, 67, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); } :root[data-theme="light"] { --bg: #f5f6f8; --bg-elevated: #ffffff; --bg-inset: #eef0f4; --card: #ffffff; --card-hover: #f9fafb; --border: #dcdfe6; --border-soft: #e6e9ef; --text: #1d2333; --text-dim: #6b7280; --text-faint: #9aa1b2; --accent: #6c5ce7; --accent-contrast: #ffffff; --accent-soft: rgba(108, 92, 231, 0.10); --green: #0d9488; --green-soft: rgba(13, 148, 136, 0.12); --red: #dc3d43; --red-soft: rgba(220, 61, 67, 0.10); --yellow: #b45309; --yellow-soft: rgba(180, 83, 9, 0.12); --blue: #2563eb; --blue-soft: rgba(37, 99, 235, 0.10); --orange: #c2410c; --orange-soft: rgba(194, 65, 12, 0.10); --shadow-sm: 0 1px 2px rgba(15, 17, 23, 0.06); --shadow-md: 0 4px 16px rgba(15, 17, 23, 0.10); --shadow-lg: 0 12px 40px rgba(15, 17, 23, 0.18); } /* ---------- Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--fs-md); line-height: 1.45; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } .mono, code, kbd, pre { font-family: "SF Mono", "Fira Code", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Visible keyboard focus everywhere */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } ::selection { background: var(--accent-soft); } .dim { color: var(--text-dim); } .tnum, .num { font-variant-numeric: tabular-nums; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: var(--fs-sm); font-weight: 600; font-family: inherit; padding: 6px 12px; border-radius: var(--radius-md); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s; white-space: nowrap; } .btn:hover { background: var(--card-hover); border-color: var(--text-faint); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); } .btn-ghost:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent); } .btn-ghost.active { background: var(--accent-soft); color: var(--accent); } .btn-danger { background: transparent; border-color: var(--red); color: var(--red); } .btn-danger:hover { background: var(--red-soft); } .btn-sm { padding: 3px 9px; font-size: var(--fs-xs); } .btn-block { width: 100%; justify-content: center; padding-top: 9px; padding-bottom: 9px; } .icon-btn { padding: 4px 8px; font-size: var(--fs-lg); line-height: 1; } /* ---------- Forms ---------- */ .field { display: block; margin-bottom: var(--sp-3); } .field-label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: var(--fs-md); color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 7px 10px; } .field input::placeholder { color: var(--text-faint); } .field-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; } .field-inline input { font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 7px; } input[type="checkbox"] { accent-color: var(--accent); } /* ---------- Top bar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); height: 52px; padding: 0 var(--sp-4); background: var(--bg-elevated); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .topbar-left, .topbar-right { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .logo { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.2px; color: var(--text); white-space: nowrap; } .logo .dim { font-weight: 400; } .account-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-dim); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu { display: inline-flex; align-items: center; gap: 8px; } .account-name { font-size: var(--fs-sm); font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-pill { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; } /* Range bar */ .range-bar { display: flex; align-items: center; gap: 2px; background: var(--bg-inset); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 2px; flex-wrap: wrap; } .range-bar .btn-ghost { border-radius: var(--radius-sm); } .range-label { font-size: var(--fs-xs); color: var(--text-dim); font-variant-numeric: tabular-nums; padding: 0 8px; white-space: nowrap; } .range-custom { display: flex; align-items: center; gap: var(--sp-2); padding: 2px 6px; border-left: 1px solid var(--border); margin-left: 4px; } /* ---------- Body layout ---------- */ .body { display: flex; align-items: stretch; min-height: calc(100vh - 52px); } .sidenav { width: 168px; flex: 0 0 168px; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-2); background: var(--bg-elevated); border-right: 1px solid var(--border); position: sticky; top: 52px; align-self: flex-start; height: calc(100vh - 52px); overflow-y: auto; } .nav-item { display: block; padding: 7px 12px; border-radius: var(--radius-md); color: var(--text-dim); font-size: var(--fs-md); font-weight: 500; } .nav-item:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-item .nav-count { float: right; margin-left: 6px; min-width: 16px; text-align: center; padding: 0 4px; border-radius: var(--radius-pill); background: var(--red-soft); color: var(--red); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .sidenav-foot { margin-top: auto; border-top: 1px solid var(--border-soft); padding-top: var(--sp-2); } .main { flex: 1; min-width: 0; padding: var(--sp-5); } /* ---------- View states ---------- */ .view-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 200px; color: var(--text-dim); font-size: var(--fs-md); } .spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .view-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 200px; color: var(--text-dim); text-align: center; } .view-error .msg { font-size: var(--fs-md); } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 180px; padding: var(--sp-6) var(--sp-4); color: var(--text-dim); text-align: center; } .empty-state .big { font-size: var(--fs-xl); font-weight: 700; color: var(--text); } .empty-state p { font-size: var(--fs-md); } .empty-state code { background: var(--bg-inset); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 1px 6px; font-size: var(--fs-sm); } /* ---------- Cards ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4); overflow: hidden; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 14px; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); font-weight: 700; } .card-head .hint { font-weight: 400; color: var(--text-dim); font-size: var(--fs-xs); } .card-body { padding: 14px; } /* Stat cards */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: var(--shadow-sm); min-width: 0; } .stat-card .label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); } .stat-card .value { font-size: var(--fs-2xl); font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-card .sub { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 2px; font-variant-numeric: tabular-nums; } .stat-card.good .value { color: var(--green); } .stat-card.warn .value { color: var(--yellow); } .stat-card.bad .value { color: var(--red); } .stat-card.accent .value { color: var(--accent); } /* Two-column layout for charts */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; overflow-y: auto; max-height: 640px; } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .table th { position: sticky; top: 0; z-index: 2; background: var(--card); text-align: left; padding: 7px 10px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; } .table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; } .table th.sortable { cursor: pointer; user-select: none; } .table th.sortable:hover { color: var(--accent); } .table th .sort-ind { opacity: 0.5; margin-left: 3px; } .table td { padding: 6px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .table tr.row-click { cursor: pointer; } .table tbody tr:hover td { background: var(--accent-soft); } .table td .sub { font-size: var(--fs-xs); color: var(--text-dim); } .table .mono { font-size: var(--fs-xs); } .table .sql-cell { font-size: var(--fs-xs); word-break: break-all; max-width: 420px; color: var(--text-dim); white-space: pre-wrap; } .table .sql-cell.expanded { white-space: pre-wrap; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; } /* Trace levels */ .badge-level-summary { background: var(--bg-inset); color: var(--text-dim); } .badge-level-normal { background: var(--blue-soft); color: var(--blue); } .badge-level-full { background: var(--yellow-soft); color: var(--yellow); } .badge-level-alert { background: var(--red-soft); color: var(--red); } /* HTTP status codes */ .badge-status-2xx { background: var(--green-soft); color: var(--green); } .badge-status-3xx { background: var(--blue-soft); color: var(--blue); } .badge-status-4xx { background: var(--yellow-soft); color: var(--yellow); } .badge-status-5xx { background: var(--red-soft); color: var(--red); } .badge-status-0 { background: var(--bg-inset); color: var(--text-faint); } /* Generic state badges */ .badge-green { background: var(--green-soft); color: var(--green); } .badge-yellow { background: var(--yellow-soft); color: var(--yellow); } .badge-red { background: var(--red-soft); color: var(--red); } .badge-blue { background: var(--blue-soft); color: var(--blue); } .badge-accent { background: var(--accent-soft); color: var(--accent); } .badge-muted { background: var(--bg-inset); color: var(--text-dim); } /* Delta badge (compare view) */ .delta { display: inline-block; padding: 1px 6px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .delta.good { background: var(--green-soft); color: var(--green); } .delta.bad { background: var(--red-soft); color: var(--red); } .delta.flat { background: var(--bg-inset); color: var(--text-dim); } /* Small flag chips (n1, profiled) */ .flag { display: inline-block; padding: 0 5px; margin-left: 3px; border-radius: 3px; font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; } .flag-n1 { background: var(--red-soft); color: var(--red); } .flag-profiled{ background: var(--accent-soft); color: var(--accent); } .flag-http { background: var(--orange-soft); color: var(--orange); } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: var(--sp-4); overflow-x: auto; } .tab { padding: 8px 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-family: inherit; white-space: nowrap; } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab .badge { margin-left: 6px; } /* ---------- Details drawer ---------- */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(10, 12, 18, 0.45); z-index: 100; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 92vw); background: var(--bg-elevated); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 101; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.22s ease; } .drawer.open { transform: translateX(0); } .drawer[hidden], .drawer-backdrop[hidden] { display: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .drawer-title { font-size: var(--fs-lg); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-4); } .drawer-section { margin-bottom: var(--sp-5); } .drawer-section h3 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--sp-2); } /* ---------- Usage / quota bar ---------- */ .usage-bar { height: 8px; background: var(--bg-inset); border-radius: var(--radius-pill); overflow: hidden; margin-top: 6px; } .usage-bar .fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 0.3s; } .usage-bar .fill.warn { background: var(--yellow); } .usage-bar .fill.bad { background: var(--red); } /* ---------- Code blocks (settings) ---------- */ .code-block { background: var(--bg-inset); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--sp-3); font-family: "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-sm); line-height: 1.6; overflow-x: auto; white-space: pre; color: var(--text); } .code-block .cmt { color: var(--text-faint); } .code-block .key { color: var(--accent); } /* ---------- Stacked level bar ---------- */ .level-stack { display: flex; height: 14px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-inset); } .level-stack .seg { height: 100%; } .level-stack .seg-summary { background: var(--text-faint); opacity: 0.5; } .level-stack .seg-normal { background: var(--blue); } .level-stack .seg-full { background: var(--yellow); } .level-stack .seg-alert { background: var(--red); } .level-legend { display: flex; gap: var(--sp-3); margin-top: 6px; font-size: var(--fs-xs); color: var(--text-dim); flex-wrap: wrap; } .level-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: -1px; } /* ---------- Toasts ---------- */ .toasts { position: fixed; bottom: var(--sp-4); right: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 200; max-width: 380px; } .toast { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--fs-sm); box-shadow: var(--shadow-md); animation: toast-in 0.18s ease; } .toast.error { border-left-color: var(--red); } .toast.success { border-left-color: var(--green); } .toast.leaving { opacity: 0; transform: translateY(6px); transition: all 0.2s; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Login screen ---------- */ .login-overlay { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 300; padding: var(--sp-4); } .login-overlay[hidden] { display: none; } .login-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--sp-6); width: 100%; max-width: 380px; } .login-logo { font-size: var(--fs-2xl); font-weight: 800; margin-bottom: 4px; } .login-sub { color: var(--text-dim); font-size: var(--fs-md); margin-bottom: var(--sp-4); } .login-error { color: var(--red); font-size: var(--fs-sm); min-height: 18px; margin: 6px 0; } .login-error:not(:empty) { display: block; } /* ---------- Page header (site views) ---------- */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; } .page-head h1 { font-size: var(--fs-xl); font-weight: 700; overflow-wrap: anywhere; } .page-head .crumbs { font-size: var(--fs-xs); color: var(--text-dim); margin-bottom: 4px; } .page-head .crumbs a { color: var(--text-dim); } .page-head .crumbs a:hover { color: var(--accent); } .page-head .meta { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 4px; } .page-head .actions { display: flex; gap: var(--sp-2); align-items: center; } /* ---------- Filter bar ---------- */ .filter-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); } .filter-bar .field-inline input, .filter-bar .field-inline select { min-width: 90px; } .filter-bar select { font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 7px; } /* ---------- Charts (SVG) ---------- */ .chart { width: 100%; display: block; } .chart .axis-line { stroke: var(--border); stroke-width: 1; } .chart .grid-line { stroke: var(--border-soft); stroke-width: 1; } .chart .axis-text { fill: var(--text-dim); font-size: 10px; font-family: inherit; } .chart .series-line { fill: none; stroke-width: 1.5; } .chart .series-area { opacity: 0.08; } .chart .bar-label { fill: var(--text-dim); font-size: 10px; } .chart .bar-value { fill: var(--text); font-size: 10px; font-variant-numeric: tabular-nums; } .chart-tooltip { position: absolute; pointer-events: none; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 6px 10px; font-size: var(--fs-xs); z-index: 60; white-space: nowrap; font-variant-numeric: tabular-nums; } .chart-tooltip .tt-title { font-weight: 700; margin-bottom: 2px; } .chart-tooltip .tt-row { display: flex; align-items: center; gap: 6px; } .chart-tooltip .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } .chart-host { position: relative; } /* ---------- Responsive (down to 900 px) ---------- */ @media (max-width: 1100px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .topbar { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; } .topbar-left, .topbar-right { flex-wrap: wrap; } } @media (max-width: 900px) { .sidenav { position: static; width: 100%; flex: 1 1 100%; height: auto; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); padding: var(--sp-2); } .nav-item { white-space: nowrap; } .sidenav-foot { margin-top: 0; margin-left: auto; border-top: none; padding-top: 0; } .body { flex-direction: column; min-height: auto; } .main { padding: var(--sp-3); } .stat-grid { grid-template-columns: repeat(2, 1fr); } .account-menu .account-name { display: none; } .page-head h1 { font-size: var(--fs-lg); } } /* ---------- Utility ---------- */ .row-flex { display: flex; align-items: center; gap: var(--sp-2); } .spread { justify-content: space-between; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mb-0 { margin-bottom: 0; } .hidden { display: none !important; } .nowrap { white-space: nowrap; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hr { border: none; border-top: 1px solid var(--border-soft); margin: var(--sp-3) 0; }