/* ========================================================================== * upway_design_system.css * -------------------------------------------------------------------------- * Neutral, white-label, Stripe/Plaid/Notion-grade reskin of the Upway UI. * * This file is loaded LAST in the . That position is intentional: it * means CSS cascade rules let us override any color, radius, or border from * tabler, admin_tabler_bridge.css, or upway_product_ui.css without rewriting * those files. If you ever want to revert, remove the tag — nothing * else needs to change. * * Design philosophy: * - White or near-white backgrounds, soft hairline borders. * - Single accent color (refined indigo) used sparingly. * - Status conveyed by a colored DOT, not a colored pill background. * - Inter for all text, JetBrains-style mono for numeric metrics. * - Shadows are barely-there; depth comes from borders, not blur. * - Generous whitespace; data still dense where it matters. * * Token naming uses --ds-* so it never collides with Bootstrap's --bs-* * or the legacy --gt-* tokens. * ========================================================================== */ /* -------------------------------------------------------------------------- * 1. DESIGN TOKENS * -------------------------------------------------------------------------- */ :root { /* Neutral palette */ --ds-neutral-0: #ffffff; --ds-neutral-25: #fcfcfd; --ds-neutral-50: #f9fafb; --ds-neutral-100:#f2f4f7; --ds-neutral-150:#eaecf0; --ds-neutral-200:#e4e7ec; --ds-neutral-300:#d0d5dd; --ds-neutral-400:#98a2b3; --ds-neutral-500:#667085; --ds-neutral-600:#475467; --ds-neutral-700:#344054; --ds-neutral-800:#1d2939; --ds-neutral-900:#101828; --ds-neutral-950:#0c111d; /* Single accent — refined indigo, used for primary actions, links, and active states. */ --ds-accent-50: #eef2ff; --ds-accent-100: #e0e7ff; --ds-accent-200: #c7d2fe; --ds-accent-300: #a5b4fc; --ds-accent-400: #818cf8; --ds-accent-500: #6366f1; --ds-accent-600: #4f46e5; --ds-accent-700: #4338ca; --ds-accent-800: #3730a3; /* Semantic — quiet, only used for status conveyance */ --ds-success-50: #ecfdf5; --ds-success-500:#10b981; --ds-success-600:#059669; --ds-success-700:#047857; --ds-warning-50: #fffbeb; --ds-warning-500:#f59e0b; --ds-warning-600:#d97706; --ds-warning-700:#b45309; --ds-danger-50: #fef2f2; --ds-danger-500: #ef4444; --ds-danger-600: #dc2626; --ds-danger-700: #b91c1c; --ds-info-50: #eff6ff; --ds-info-500: #3b82f6; --ds-info-600: #2563eb; --ds-info-700: #1d4ed8; /* Semantic surface tokens (light theme) */ --ds-bg: var(--ds-neutral-50); --ds-surface: var(--ds-neutral-0); --ds-surface-raised: var(--ds-neutral-0); --ds-surface-sunken: var(--ds-neutral-100); --ds-surface-hover: var(--ds-neutral-50); --ds-border: var(--ds-neutral-200); --ds-border-strong: var(--ds-neutral-300); --ds-border-subtle: var(--ds-neutral-150); --ds-text: var(--ds-neutral-900); --ds-text-strong: var(--ds-neutral-950); --ds-text-muted: var(--ds-neutral-600); --ds-text-subtle: var(--ds-neutral-500); --ds-text-disabled: var(--ds-neutral-400); --ds-text-on-accent: var(--ds-neutral-0); /* Typography */ --ds-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; --ds-fs-xs: 11px; --ds-fs-sm: 12px; --ds-fs-base: 14px; --ds-fs-md: 15px; --ds-fs-lg: 17px; --ds-fs-xl: 20px; --ds-fs-2xl: 24px; --ds-fs-3xl: 30px; --ds-fs-4xl: 36px; --ds-fs-5xl: 48px; --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-semibold: 600; --ds-fw-bold: 700; --ds-lh-tight: 1.2; --ds-lh-snug: 1.35; --ds-lh-normal: 1.5; --ds-lh-relaxed:1.65; --ds-tracking-tight: -0.01em; --ds-tracking-snug: -0.005em; --ds-tracking-wide: 0.04em; /* Spacing scale (4-pt grid) */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; /* Radii — Stripe/Plaid use very subtle rounding */ --ds-radius-xs: 4px; --ds-radius-sm: 6px; --ds-radius-md: 8px; --ds-radius-lg: 10px; --ds-radius-xl: 14px; --ds-radius-2xl: 20px; --ds-radius-full: 9999px; /* Shadows — almost imperceptible, depth from borders */ --ds-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.04); --ds-shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 1px 3px 0 rgba(16, 24, 40, 0.04); --ds-shadow-md: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.04); --ds-shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, 0.06), 0 12px 16px -4px rgba(16, 24, 40, 0.08); --ds-shadow-ring: 0 0 0 1px var(--ds-border); --ds-shadow-ring-accent: 0 0 0 3px rgba(99, 102, 241, 0.18); /* Layout dimensions */ --ds-rail-width: 240px; --ds-rail-collapsed-width: 64px; --ds-topbar-height: 64px; --ds-content-max-width: 1440px; /* Bridge: alias the legacy --gt-* tokens that chart code reads at runtime. */ --gt-text-muted: var(--ds-text-muted); --gt-border: var(--ds-border); --gt-text: var(--ds-text); } [data-bs-theme="dark"] { --ds-bg: var(--ds-neutral-950); --ds-surface: var(--ds-neutral-900); --ds-surface-raised: #161b26; --ds-surface-sunken: var(--ds-neutral-950); --ds-surface-hover: #1a2030; --ds-border: #232b3a; --ds-border-strong: #2d3648; --ds-border-subtle: #1c2331; --ds-text: #f5f7fa; --ds-text-strong: #ffffff; --ds-text-muted: #98a2b3; --ds-text-subtle: #667085; --ds-text-disabled: #475467; --ds-text-on-accent: #ffffff; --ds-accent-50: #1e1b4b; --ds-accent-100: #312e81; --ds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35), 0 1px 3px 0 rgba(0, 0, 0, 0.25); --ds-shadow-md: 0 2px 4px -2px rgba(0, 0, 0, 0.4), 0 4px 8px -2px rgba(0, 0, 0, 0.3); --ds-shadow-lg: 0 4px 6px -2px rgba(0, 0, 0, 0.4), 0 12px 16px -4px rgba(0, 0, 0, 0.5); --ds-shadow-ring: 0 0 0 1px var(--ds-border); --gt-text-muted: var(--ds-text-muted); --gt-border: var(--ds-border); --gt-text: var(--ds-text); } /* -------------------------------------------------------------------------- * 2. TYPOGRAPHY RESET * -------------------------------------------------------------------------- */ html, body { font-family: var(--ds-font-sans); font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--ds-bg); color: var(--ds-text); font-size: var(--ds-fs-base); line-height: var(--ds-lh-normal); } h1, h2, h3, h4, h5, h6, .page-title, .gt-screen-title { font-family: var(--ds-font-sans); font-weight: var(--ds-fw-semibold); color: var(--ds-text-strong); letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-lh-tight); margin: 0; } h1, .gt-screen-title { font-size: var(--ds-fs-3xl); font-weight: var(--ds-fw-semibold); } h2 { font-size: var(--ds-fs-xl); } h3 { font-size: var(--ds-fs-lg); } a { color: var(--ds-accent-600); text-decoration: none; } a:hover { color: var(--ds-accent-700); } code, pre, .ds-mono { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; } ::selection { background: var(--ds-accent-100); color: var(--ds-accent-800); } [data-bs-theme="dark"] ::selection { background: var(--ds-accent-700); color: #fff; } /* Numbers in metric cards use tabular nums so columns align */ .gt-metric-card strong, .gt-metric-card .gt-metric-value, .ds-num { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- * 3. SHELL — RAIL, TOPBAR, CONTENT * -------------------------------------------------------------------------- */ body.gt-tabler-body { background: var(--ds-bg); } .gt-shell { background: var(--ds-bg); min-height: 100vh; } /* The left navigation rail. Cleaner: white background, thin border, no glow. Active links use an accent bar on the left, not a colored background. */ .gt-rail { width: var(--ds-rail-width); background: var(--ds-surface); border-right: 1px solid var(--ds-border); box-shadow: none; padding: 0; } .gt-rail-inner { padding: var(--ds-space-5) var(--ds-space-3); display: flex; flex-direction: column; height: 100%; gap: var(--ds-space-3); } /* Brand block — small, restrained */ .gt-brand { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-3); margin-bottom: var(--ds-space-3); } .gt-brand-mark, .gt-brand-mark-command { width: 32px; height: 32px; border-radius: var(--ds-radius-md); background: var(--ds-neutral-900); color: #fff; font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-base); display: inline-flex; align-items: center; justify-content: center; letter-spacing: -0.02em; box-shadow: none; } [data-bs-theme="dark"] .gt-brand-mark, [data-bs-theme="dark"] .gt-brand-mark-command { background: var(--ds-neutral-0); color: var(--ds-neutral-900); } .gt-brand-title { font-size: var(--ds-fs-base); font-weight: var(--ds-fw-semibold); color: var(--ds-text-strong); letter-spacing: var(--ds-tracking-tight); } .gt-brand-subtitle { font-size: var(--ds-fs-xs); color: var(--ds-text-subtle); margin-top: 2px; } .gt-rail-group-title { font-size: 10px; font-weight: var(--ds-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-subtle); padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-1); margin-top: var(--ds-space-2); } .gt-rail-spacer { flex: 1 1 auto; } /* Nav links — flat, no colored icon tiles */ .gt-destination-list { display: flex; flex-direction: column; gap: 2px; } .gt-destination-tile { display: flex; align-items: center; gap: var(--ds-space-3); padding: 8px var(--ds-space-3); border-radius: var(--ds-radius-sm); color: var(--ds-text-muted); background: transparent; border: none; box-shadow: none; text-decoration: none; transition: background-color 120ms ease, color 120ms ease; position: relative; } .gt-destination-tile:hover { background: var(--ds-surface-hover); color: var(--ds-text-strong); } .gt-destination-tile.active, .gt-destination-tile[aria-current="page"] { background: var(--ds-accent-50); color: var(--ds-accent-700); font-weight: var(--ds-fw-medium); } [data-bs-theme="dark"] .gt-destination-tile.active, [data-bs-theme="dark"] .gt-destination-tile[aria-current="page"] { background: rgba(99, 102, 241, 0.12); color: var(--ds-accent-300); } .gt-destination-tile.active::before, .gt-destination-tile[aria-current="page"]::before { display: none; /* drop the legacy left bar — background highlight is enough */ } /* Icon tile — neutral, monochrome, no per-item color */ .gt-icon-tile, .gt-destination-tile .nav-link-icon { width: 20px; height: 20px; background: transparent !important; border: none; color: currentColor !important; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .gt-icon-tile svg, .gt-destination-tile .nav-link-icon svg { width: 18px; height: 18px; stroke-width: 1.75; color: currentColor; } .gt-icon-tile.gt-blue, .gt-icon-tile.gt-indigo, .gt-icon-tile.gt-purple, .gt-icon-tile.gt-cyan, .gt-icon-tile.gt-orange, .gt-icon-tile.gt-green, .gt-icon-tile.gt-teal, .gt-icon-tile.gt-red, .gt-icon-tile.gt-gray, .gt-icon-tile.gt-amber, .gt-icon-tile.gt-yellow, .gt-icon-tile.gt-checker { background: transparent !important; color: currentColor !important; } .gt-destination-copy { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; } .gt-destination-copy strong { font-size: var(--ds-fs-base); font-weight: inherit; color: inherit; letter-spacing: var(--ds-tracking-snug); } .gt-destination-copy small { display: none; /* drop secondary nav text — too noisy for a clean look */ } .gt-destination-list.compact small { display: none; } /* Topbar — minimal, white */ .gt-topbar { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); padding: 0; height: var(--ds-topbar-height); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(8px); } .gt-topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--ds-space-8); height: 100%; max-width: var(--ds-content-max-width); margin: 0 auto; gap: var(--ds-space-4); } .gt-topbar-title-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gt-kicker, .page-pretitle { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-text-subtle); } .gt-screen-title, .page-title { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-semibold); } .gt-screen-subtitle { display: none; } /* subtitle moves into the page body for cleaner topbar */ .gt-topbar-actions { display: flex; align-items: center; gap: var(--ds-space-2); } .gt-topbar-pill { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); padding: 3px 8px; border-radius: var(--ds-radius-sm); background: var(--ds-neutral-100); color: var(--ds-text-muted); border: 1px solid var(--ds-border-subtle); } [data-bs-theme="dark"] .gt-topbar-pill { background: var(--ds-surface-raised); color: var(--ds-text-muted); border-color: var(--ds-border); } /* Main content area */ .gt-screen { background: var(--ds-bg); } .gt-page-body { padding: var(--ds-space-8) 0; } .gt-content-container { max-width: var(--ds-content-max-width); padding: 0 var(--ds-space-8); margin: 0 auto; } .gt-page-grid { display: flex; flex-direction: column; gap: var(--ds-space-6); } /* Page subtitle banner — small intro under the section header */ .gt-page-intro { font-size: var(--ds-fs-md); color: var(--ds-text-muted); max-width: 64ch; line-height: var(--ds-lh-relaxed); } /* -------------------------------------------------------------------------- * 4. PANELS / CARDS * -------------------------------------------------------------------------- */ .gt-panel-frame { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-xs); overflow: hidden; padding: 0; } .gt-panel-header { padding: var(--ds-space-5) var(--ds-space-6); border-bottom: 1px solid var(--ds-border-subtle); display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); background: transparent; } .gt-panel-header h2 { font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-semibold); letter-spacing: var(--ds-tracking-snug); } .gt-panel-kicker { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-text-subtle); margin-bottom: 2px; } .gt-panel-body { padding: var(--ds-space-5) var(--ds-space-6); background: transparent; } .gt-panel-body.gt-card-stack { display: flex; flex-direction: column; gap: var(--ds-space-3); } .gt-panel-body.gt-list-grid { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-3); } .gt-panel-body.gt-list-grid.compact { gap: var(--ds-space-1); } .gt-panel-footer { padding: var(--ds-space-3) var(--ds-space-6); border-top: 1px solid var(--ds-border-subtle); font-size: var(--ds-fs-xs); color: var(--ds-text-subtle); background: var(--ds-surface-sunken); } /* -------------------------------------------------------------------------- * 5. METRIC CARDS — restrained, large number, single accent stripe * -------------------------------------------------------------------------- */ .gt-metric-grid { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .gt-metric-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gt-metric-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 960px) { .gt-metric-grid-4, .gt-metric-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 576px) { .gt-metric-grid-4, .gt-metric-grid-5 { grid-template-columns: 1fr; } } .gt-metric-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-xl); padding: var(--ds-space-5); box-shadow: var(--ds-shadow-xs); display: flex; flex-direction: column; gap: var(--ds-space-1); position: relative; overflow: hidden; border-left-color: var(--ds-border) !important; /* override legacy color stripes */ } .gt-metric-card::after { display: none; } .gt-metric-card .gt-metric-label { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-subtle); margin-bottom: var(--ds-space-1); } .gt-metric-card strong { font-size: var(--ds-fs-3xl); font-weight: var(--ds-fw-semibold); color: var(--ds-text-strong); letter-spacing: var(--ds-tracking-tight); line-height: 1.1; font-variant-numeric: tabular-nums; } .gt-metric-card small { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); font-weight: var(--ds-fw-regular); line-height: var(--ds-lh-snug); margin-top: var(--ds-space-1); } /* Tonal variants — only a subtle 2px top accent, no border-left coloring */ .gt-metric-card.attention { box-shadow: var(--ds-shadow-xs), inset 0 2px 0 0 var(--ds-warning-500); } .gt-metric-card.alert, .gt-metric-card.danger { box-shadow: var(--ds-shadow-xs), inset 0 2px 0 0 var(--ds-danger-500); } .gt-metric-card.warning { box-shadow: var(--ds-shadow-xs), inset 0 2px 0 0 var(--ds-warning-500); } .gt-metric-card.info { box-shadow: var(--ds-shadow-xs), inset 0 2px 0 0 var(--ds-info-500); } .gt-metric-card.handoff { box-shadow: var(--ds-shadow-xs), inset 0 2px 0 0 var(--ds-accent-500); } .gt-metric-card.success { box-shadow: var(--ds-shadow-xs), inset 0 2px 0 0 var(--ds-success-500); } .gt-metric-card.muted { box-shadow: var(--ds-shadow-xs); } .gt-metric-card.hero { /* hero is just a layout flag, no extra style */ } /* -------------------------------------------------------------------------- * 6. PROTOCOL / DIRECTORY CARDS * -------------------------------------------------------------------------- */ .gt-card-stack { display: flex; flex-direction: column; gap: var(--ds-space-3); } .gt-protocol-card, .gt-protocol-row, .gt-directory-row { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: var(--ds-space-4) var(--ds-space-5); display: flex; flex-direction: column; gap: var(--ds-space-3); text-decoration: none; color: inherit; box-shadow: none; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .gt-protocol-card:hover, .gt-protocol-row:hover, .gt-directory-row:hover { border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-sm); color: inherit; } .gt-protocol-card.urgent, .gt-protocol-card.attention, .gt-protocol-row.priority { /* Subtle left accent — not a glow */ border-left: 3px solid var(--ds-accent-500); } .gt-protocol-card.urgent { border-left-color: var(--ds-danger-500); } .gt-protocol-card.attention { border-left-color: var(--ds-warning-500); } .gt-card-topline, .gt-protocol-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); } .gt-card-topline > div:first-child, .gt-protocol-header > div:first-child { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } .gt-card-topline strong, .gt-protocol-title { font-size: var(--ds-fs-md); font-weight: var(--ds-fw-semibold); color: var(--ds-text-strong); letter-spacing: var(--ds-tracking-snug); line-height: var(--ds-lh-snug); } .gt-card-topline span, .gt-protocol-meta { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); } .gt-meta-inline { font-size: var(--ds-fs-sm); color: var(--ds-text-subtle); flex-shrink: 0; font-variant-numeric: tabular-nums; } .gt-card-meta-strip { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); font-size: var(--ds-fs-sm); color: var(--ds-text-muted); padding: 0; } .gt-card-meta-strip span { display: inline-flex; align-items: center; gap: var(--ds-space-1); } .gt-card-meta-strip span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--ds-neutral-300); display: inline-block; margin-right: var(--ds-space-1); } .gt-card-meta-strip span:first-child::before { display: none; } .gt-card-preview { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); line-height: var(--ds-lh-relaxed); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Directory row — used by customer_list */ .gt-directory-row { display: grid; grid-template-columns: 2fr repeat(5, 1fr) auto; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-4) var(--ds-space-5); } @media (max-width: 1100px) { .gt-directory-row { grid-template-columns: 1fr; gap: var(--ds-space-2); } } .gt-directory-primary { display: flex; flex-direction: column; gap: 2px; } .gt-directory-primary strong { font-weight: var(--ds-fw-semibold); color: var(--ds-text-strong); } .gt-directory-primary span { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); } .gt-directory-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gt-directory-cell strong { font-size: var(--ds-fs-base); font-weight: var(--ds-fw-medium); color: var(--ds-text); font-variant-numeric: tabular-nums; } .gt-card-kicker { font-size: 10px; font-weight: var(--ds-fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-text-subtle); } /* -------------------------------------------------------------------------- * 7. STATUS BADGES & INLINE CHIPS — colored DOT style, white-label feel * -------------------------------------------------------------------------- */ .gt-status-badge { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 2px 8px; border-radius: var(--ds-radius-sm); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); letter-spacing: 0; text-transform: none; background: var(--ds-neutral-100); color: var(--ds-text-muted); border: 1px solid var(--ds-border-subtle); line-height: 1.4; } .gt-status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-neutral-400); display: inline-block; } [data-bs-theme="dark"] .gt-status-badge { background: var(--ds-surface-raised); } .gt-status-badge.open, .gt-status-badge.aberto, .gt-status-badge.bot-active { color: var(--ds-success-700); background: var(--ds-success-50); border-color: rgba(16, 185, 129, 0.2); } .gt-status-badge.open::before, .gt-status-badge.aberto::before, .gt-status-badge.bot-active::before { background: var(--ds-success-500); } .gt-status-badge.closed, .gt-status-badge.encerrado, .gt-status-badge.muted { color: var(--ds-text-muted); background: var(--ds-neutral-100); border-color: var(--ds-border-subtle); } .gt-status-badge.closed::before, .gt-status-badge.encerrado::before, .gt-status-badge.muted::before { background: var(--ds-neutral-400); } .gt-status-badge.unread, .gt-status-badge.info { color: var(--ds-info-700); background: var(--ds-info-50); border-color: rgba(59, 130, 246, 0.2); } .gt-status-badge.unread::before, .gt-status-badge.info::before { background: var(--ds-info-500); } .gt-status-badge.handoff { color: var(--ds-accent-700); background: var(--ds-accent-50); border-color: rgba(99, 102, 241, 0.2); } .gt-status-badge.handoff::before { background: var(--ds-accent-500); } .gt-status-badge.os-open, .gt-status-badge.warning, .gt-status-badge[class*="waiting-"] { color: var(--ds-warning-700); background: var(--ds-warning-50); border-color: rgba(245, 158, 11, 0.25); } .gt-status-badge.os-open::before, .gt-status-badge.warning::before, .gt-status-badge[class*="waiting-"]::before { background: var(--ds-warning-500); } .gt-status-badge.reopened, .gt-status-badge.priority, .gt-status-badge.danger { color: var(--ds-danger-700); background: var(--ds-danger-50); border-color: rgba(239, 68, 68, 0.25); } .gt-status-badge.reopened::before, .gt-status-badge.priority::before, .gt-status-badge.danger::before { background: var(--ds-danger-500); } [data-bs-theme="dark"] .gt-status-badge.open { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; } [data-bs-theme="dark"] .gt-status-badge.unread, [data-bs-theme="dark"] .gt-status-badge.info { background: rgba(59, 130, 246, 0.12); color: #93c5fd; } [data-bs-theme="dark"] .gt-status-badge.handoff { background: rgba(99, 102, 241, 0.12); color: #c7d2fe; } [data-bs-theme="dark"] .gt-status-badge.warning, [data-bs-theme="dark"] .gt-status-badge.os-open, [data-bs-theme="dark"] .gt-status-badge[class*="waiting-"] { background: rgba(245, 158, 11, 0.12); color: #fcd34d; } [data-bs-theme="dark"] .gt-status-badge.danger, [data-bs-theme="dark"] .gt-status-badge.reopened, [data-bs-theme="dark"] .gt-status-badge.priority { background: rgba(239, 68, 68, 0.12); color: #fca5a5; } .gt-badge-row { display: flex; gap: var(--ds-space-1); flex-wrap: wrap; } /* Inline chips — even quieter than badges, used inside toolbars */ .gt-inline-chip, .gt-inline-chip-strip > * { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 4px 10px; border-radius: var(--ds-radius-full); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); background: var(--ds-surface); color: var(--ds-text-muted); border: 1px solid var(--ds-border); text-decoration: none; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .gt-inline-chip:hover { background: var(--ds-surface-hover); color: var(--ds-text-strong); } .gt-inline-chip.active { background: var(--ds-neutral-900); color: var(--ds-neutral-0); border-color: var(--ds-neutral-900); } [data-bs-theme="dark"] .gt-inline-chip.active { background: var(--ds-neutral-0); color: var(--ds-neutral-900); border-color: var(--ds-neutral-0); } .gt-inline-chip-strip { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); } /* -------------------------------------------------------------------------- * 8. TOOLBARS, FORMS, INPUTS, BUTTONS * -------------------------------------------------------------------------- */ .gt-toolbar { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-xl); padding: var(--ds-space-4) var(--ds-space-5); display: flex; flex-wrap: wrap; gap: var(--ds-space-4); align-items: center; justify-content: space-between; box-shadow: var(--ds-shadow-xs); } .gt-toolbar-inline { padding: var(--ds-space-3) var(--ds-space-4); } .gt-toolbar-main { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); flex: 1 1 auto; align-items: center; min-width: 0; } .gt-toolbar-main-wide { flex: 1; } .gt-toolbar-note { font-size: var(--ds-fs-sm); color: var(--ds-text-subtle); font-variant-numeric: tabular-nums; } .form-control.gt-input, .form-select.gt-input, .gt-input { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 7px var(--ds-space-3); font-size: var(--ds-fs-base); color: var(--ds-text); height: 36px; box-shadow: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .form-control.gt-input:focus, .form-select.gt-input:focus, .gt-input:focus, .form-control.gt-input:focus-visible, .form-select.gt-input:focus-visible { border-color: var(--ds-accent-500); box-shadow: var(--ds-shadow-ring-accent); outline: none; } .form-control.gt-input::placeholder { color: var(--ds-text-subtle); } /* Buttons — Notion/Stripe style: solid dark for primary, ghost for secondary */ .btn { font-family: var(--ds-font-sans); font-weight: var(--ds-fw-medium); border-radius: var(--ds-radius-md); transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease; } .btn-primary.gt-button-primary, .gt-button-primary { background: var(--ds-neutral-900); color: var(--ds-neutral-0); border: 1px solid var(--ds-neutral-900); padding: 7px var(--ds-space-4); font-size: var(--ds-fs-base); height: 36px; box-shadow: var(--ds-shadow-xs); } .btn-primary.gt-button-primary:hover, .gt-button-primary:hover { background: var(--ds-neutral-800); border-color: var(--ds-neutral-800); color: var(--ds-neutral-0); } [data-bs-theme="dark"] .btn-primary.gt-button-primary, [data-bs-theme="dark"] .gt-button-primary { background: var(--ds-neutral-0); color: var(--ds-neutral-900); border-color: var(--ds-neutral-0); } [data-bs-theme="dark"] .btn-primary.gt-button-primary:hover, [data-bs-theme="dark"] .gt-button-primary:hover { background: var(--ds-neutral-100); border-color: var(--ds-neutral-100); color: var(--ds-neutral-900); } .btn-outline-light.gt-button-secondary, .btn-outline-secondary.gt-button-secondary, .gt-button-secondary { background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border); padding: 7px var(--ds-space-4); font-size: var(--ds-fs-base); height: 36px; box-shadow: var(--ds-shadow-xs); } .btn-outline-light.gt-button-secondary:hover, .btn-outline-secondary.gt-button-secondary:hover, .gt-button-secondary:hover { background: var(--ds-surface-hover); border-color: var(--ds-border-strong); color: var(--ds-text-strong); } .btn-danger.gt-button-danger { background: var(--ds-danger-600); border-color: var(--ds-danger-600); color: #fff; height: 36px; } .btn-danger.gt-button-danger:hover { background: var(--ds-danger-700); border-color: var(--ds-danger-700); } .gt-theme-toggle { border-radius: var(--ds-radius-md); padding: 7px var(--ds-space-3); height: 36px; font-size: var(--ds-fs-sm); display: inline-flex; align-items: center; gap: var(--ds-space-2); } /* Form grids — used by superadmin_users and others */ .gt-form-grid { display: grid; gap: var(--ds-space-3); } .gt-form-grid.compact-form { grid-template-columns: 1fr auto auto; align-items: center; gap: var(--ds-space-2); } /* -------------------------------------------------------------------------- * 9. LISTS & ROWS * -------------------------------------------------------------------------- */ .gt-list-grid { display: flex; flex-direction: column; gap: var(--ds-space-2); } .gt-list-grid.compact { gap: var(--ds-space-1); } .gt-list-item { display: flex; flex-direction: column; gap: 2px; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); background: transparent; color: inherit; text-decoration: none; border: 1px solid transparent; transition: background-color 120ms ease, border-color 120ms ease; } .gt-list-item:hover { background: var(--ds-surface-hover); border-color: var(--ds-border); } .gt-list-item.static { background: transparent; } .gt-list-item strong { font-size: var(--ds-fs-base); font-weight: var(--ds-fw-medium); color: var(--ds-text-strong); } .gt-list-item span { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); } .gt-list-item small { font-size: var(--ds-fs-xs); color: var(--ds-text-subtle); } .gt-density-row, .gt-operator-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-3); } /* -------------------------------------------------------------------------- * 10. EMPTY / LOADING / ERROR STATES (polished) * -------------------------------------------------------------------------- */ .gt-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--ds-space-2); padding: var(--ds-space-10) var(--ds-space-6); border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-radius-lg); background: var(--ds-surface-sunken); color: var(--ds-text-muted); min-height: auto; } .gt-empty-state.compact { flex-direction: row; padding: var(--ds-space-3) var(--ds-space-4); text-align: left; justify-content: flex-start; border-style: solid; border-color: var(--ds-border-subtle); background: transparent; } .gt-empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ds-radius-full); background: var(--ds-surface); color: var(--ds-text-subtle); border: 1px solid var(--ds-border); margin-bottom: var(--ds-space-2); } .gt-empty-state-icon svg { width: 18px; height: 18px; } .gt-empty-state-title { font-size: var(--ds-fs-md); font-weight: var(--ds-fw-semibold); color: var(--ds-text-strong); letter-spacing: var(--ds-tracking-snug); } .gt-empty-state-description { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); max-width: 36ch; line-height: var(--ds-lh-relaxed); } .gt-empty-state-cta { margin-top: var(--ds-space-3); } .gt-loading-spinner { color: var(--ds-text-muted); } /* -------------------------------------------------------------------------- * 11. TABLES * -------------------------------------------------------------------------- */ .table { font-size: var(--ds-fs-sm); color: var(--ds-text); border-color: var(--ds-border-subtle); background: transparent; margin: 0; } .table thead th { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-subtle); border-bottom: 1px solid var(--ds-border); background: var(--ds-surface-sunken); padding: var(--ds-space-3) var(--ds-space-4); } .table tbody td { padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-border-subtle); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover td { background: var(--ds-surface-hover); } .table-dark { --bs-table-bg: transparent; --bs-table-color: var(--ds-text); background: transparent; } /* -------------------------------------------------------------------------- * 12. TWO-COLUMN AND GRID UTILITIES * -------------------------------------------------------------------------- */ .gt-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-6); } .gt-two-column.equal { grid-template-columns: 1fr 1fr; } .gt-span-8 { grid-column: span 1; } .gt-span-4 { grid-column: span 1; } @media (min-width: 1100px) { .gt-two-column { grid-template-columns: 2fr 1fr; } .gt-two-column.equal { grid-template-columns: 1fr 1fr; } .gt-span-8 { grid-column: span 1; } .gt-span-4 { grid-column: span 1; } } @media (max-width: 900px) { .gt-two-column, .gt-two-column.equal { grid-template-columns: 1fr; } } .gt-destination-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ds-space-3); } .gt-destination-block { display: flex; flex-direction: column; gap: var(--ds-space-1); padding: var(--ds-space-5); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); text-decoration: none; color: inherit; transition: border-color 120ms ease, box-shadow 120ms ease; box-shadow: var(--ds-shadow-xs); } .gt-destination-block:hover { border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-sm); color: inherit; } .gt-destination-block strong { font-size: var(--ds-fs-md); font-weight: var(--ds-fw-semibold); color: var(--ds-text-strong); } .gt-destination-block small { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); } .gt-destination-block .gt-icon-tile { background: var(--ds-surface-sunken) !important; color: var(--ds-text-muted) !important; width: 32px; height: 32px; border-radius: var(--ds-radius-md); margin-bottom: var(--ds-space-2); } .gt-kv-stack { display: flex; flex-direction: column; gap: var(--ds-space-1); } .gt-kv { display: flex; justify-content: space-between; align-items: center; padding: var(--ds-space-2) 0; border-bottom: 1px solid var(--ds-border-subtle); font-size: var(--ds-fs-sm); } .gt-kv:last-child { border-bottom: none; } .gt-kv span { color: var(--ds-text-muted); } .gt-kv strong { color: var(--ds-text-strong); font-weight: var(--ds-fw-medium); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- * 13. FLASH MESSAGES * -------------------------------------------------------------------------- */ .gt-flash-stack { display: flex; flex-direction: column; gap: var(--ds-space-2); margin-bottom: var(--ds-space-5); } .alert.gt-flash { border-radius: var(--ds-radius-md); border: 1px solid var(--ds-border); background: var(--ds-surface); padding: var(--ds-space-3) var(--ds-space-4); font-size: var(--ds-fs-sm); color: var(--ds-text); box-shadow: var(--ds-shadow-xs); } .alert.gt-flash.success { border-color: rgba(16, 185, 129, 0.3); background: var(--ds-success-50); color: var(--ds-success-700); } .alert.gt-flash.danger, .alert.gt-flash.error { border-color: rgba(239, 68, 68, 0.3); background: var(--ds-danger-50); color: var(--ds-danger-700); } .alert.gt-flash.info { border-color: rgba(59, 130, 246, 0.3); background: var(--ds-info-50); color: var(--ds-info-700); } .alert.gt-flash.warning { border-color: rgba(245, 158, 11, 0.3); background: var(--ds-warning-50); color: var(--ds-warning-700); } /* -------------------------------------------------------------------------- * 14. INLINE-ACTIONS / BUTTON ROWS * -------------------------------------------------------------------------- */ .gt-inline-actions { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; } .gt-inline-actions.compact { gap: var(--ds-space-2); } /* -------------------------------------------------------------------------- * 15. CHART CANVAS * -------------------------------------------------------------------------- */ .gt-chart-canvas { max-height: 320px; } /* -------------------------------------------------------------------------- * 16. LEGACY admin_layout — keep it usable until admin_chat is rewritten. * -------------------------------------------------------------------------- */ body.legacy-admin-body { background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font-sans); } .legacy-admin-body .sidebar { background: var(--ds-surface); border-right: 1px solid var(--ds-border); width: var(--ds-rail-width); } .legacy-admin-body .brand-mark { background: var(--ds-neutral-900); color: #fff; width: 32px; height: 32px; font-size: var(--ds-fs-base); } [data-bs-theme="dark"] .legacy-admin-body .brand-mark { background: var(--ds-neutral-0); color: var(--ds-neutral-900); } .legacy-admin-body .brand-title { font-size: var(--ds-fs-base); font-weight: var(--ds-fw-semibold); color: var(--ds-text-strong); } .legacy-admin-body .brand-subtitle { font-size: var(--ds-fs-xs); color: var(--ds-text-subtle); } .legacy-admin-body .nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-text-subtle); font-weight: var(--ds-fw-semibold); padding: var(--ds-space-2) var(--ds-space-3); } .legacy-admin-body .nav-link-card { display: flex; align-items: center; gap: var(--ds-space-3); padding: 8px var(--ds-space-3); border-radius: var(--ds-radius-sm); color: var(--ds-text-muted); text-decoration: none; font-weight: var(--ds-fw-medium); transition: background-color 120ms ease, color 120ms ease; background: transparent; border: none; } .legacy-admin-body .nav-link-card:hover { background: var(--ds-surface-hover); color: var(--ds-text-strong); } .legacy-admin-body .nav-link-card.active { background: var(--ds-accent-50); color: var(--ds-accent-700); } [data-bs-theme="dark"] .legacy-admin-body .nav-link-card.active { background: rgba(99, 102, 241, 0.12); color: var(--ds-accent-300); } .legacy-admin-body .nav-link-card .nav-icon svg { width: 18px; height: 18px; stroke-width: 1.75; } .legacy-admin-body .topbar { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); padding: 0 var(--ds-space-8); height: var(--ds-topbar-height); } .legacy-admin-body .page-title { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-semibold); color: var(--ds-text-strong); } .legacy-admin-body .page-subtitle { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); } .legacy-admin-body .sidebar-note { display: none; } .legacy-admin-body .flash-stack { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-4) var(--ds-space-8); } .legacy-admin-body .flash-message { border-radius: var(--ds-radius-md); padding: var(--ds-space-3) var(--ds-space-4); font-size: var(--ds-fs-sm); border: 1px solid var(--ds-border); background: var(--ds-surface); } .legacy-admin-body .flash-message.success { color: var(--ds-success-700); background: var(--ds-success-50); border-color: rgba(16, 185, 129, 0.3); } .legacy-admin-body .flash-message.danger { color: var(--ds-danger-700); background: var(--ds-danger-50); border-color: rgba(239, 68, 68, 0.3); } .legacy-admin-body .flash-message.info { color: var(--ds-info-700); background: var(--ds-info-50); border-color: rgba(59, 130, 246, 0.3); } /* -------------------------------------------------------------------------- * 17. UTILITIES — visually-hidden (a11y) and other helpers * -------------------------------------------------------------------------- */ .visually-hidden, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Mobile rail */ @media (max-width: 992px) { .gt-rail { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); transition: transform 200ms ease; z-index: 100; box-shadow: var(--ds-shadow-lg); } .gt-rail.mobile-open { transform: translateX(0); } .gt-mobile-toggle { position: fixed; top: var(--ds-space-3); left: var(--ds-space-3); z-index: 90; width: 40px; height: 40px; display: inline-flex; } .gt-topbar-inner { padding-left: 64px; } .gt-content-container { padding: 0 var(--ds-space-4); } } @media (min-width: 993px) { .gt-mobile-toggle { display: none; } } /* Page subtitle moved into body */ .gt-screen-subtitle.gt-screen-subtitle--shown { display: block; } /* -------------------------------------------------------------------------- * 18. PAGE INTRO BLOCK — title + subtitle moved out of the topbar * -------------------------------------------------------------------------- */ .gt-page-intro-block { display: flex; flex-direction: column; gap: var(--ds-space-1); margin-bottom: var(--ds-space-6); } .gt-page-intro-block .gt-kicker { margin-bottom: var(--ds-space-1); } .gt-page-intro-title { font-size: var(--ds-fs-3xl); font-weight: var(--ds-fw-semibold); letter-spacing: var(--ds-tracking-tight); color: var(--ds-text-strong); } .gt-page-intro { font-size: var(--ds-fs-md); color: var(--ds-text-muted); max-width: 64ch; line-height: var(--ds-lh-relaxed); margin: var(--ds-space-1) 0 0; } /* When the topbar still renders a title (legacy templates), keep it tidy. */ .gt-topbar .gt-screen-title { font-size: var(--ds-fs-lg); margin: 0; } /* The brand pill in the topbar */ .badge.gt-topbar-pill { background: var(--ds-surface-sunken) !important; color: var(--ds-text-muted) !important; border: 1px solid var(--ds-border) !important; font-weight: var(--ds-fw-medium); border-radius: var(--ds-radius-sm); letter-spacing: 0.02em; }