/* ===================================================================== IT-RANKS DMP — shadcn/ui-styled design system Light by default · slate palette · Inter font · subtle shadows ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* shadcn tokens — light slate */ --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 72.2% 50.6%; --destructive-foreground: 210 40% 98%; --success: 142.1 70.6% 45.3%; --success-foreground: 0 0% 100%; --warning: 32.1 94.6% 43.7%; --warning-foreground: 0 0% 100%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; /* Chart palette */ --chart-1: 221.2 83.2% 53.3%; --chart-2: 212 95% 68%; --chart-3: 216 92% 60%; --chart-4: 210 98% 78%; --chart-5: 212 97% 87%; /* === Backwards-compat aliases for legacy class names === */ --ink: hsl(var(--background)); --ink-2: hsl(var(--background)); --ink-3: hsl(var(--muted)); --surface: hsl(var(--card)); --surface-2: hsl(var(--secondary)); --border-color: hsl(var(--border)); --border-strong: hsl(214.3 31.8% 84%); --border-visible: hsl(var(--border)); --text: hsl(var(--foreground)); --text-2: hsl(217 19% 27%); --text-3: hsl(var(--muted-foreground)); --text-4: hsl(215 16% 65%); --text-display: hsl(var(--foreground)); --dark-bg: hsl(222 47% 11%); --dark-surface: hsl(217 33% 17%); --dark-border: hsl(217 33% 22%); --dark-text: hsl(0 0% 100%); --dark-text-2: hsl(214 20% 75%); --dark-text-3: hsl(215 16% 55%); /* Brand accent */ --blue: hsl(var(--primary)); --blue-2: hsl(221.2 83.2% 47%); --blue-3: hsl(221.2 83.2% 40%); --blue-soft: hsl(var(--primary) / 0.08); --blue-border: hsl(var(--primary) / 0.30); /* Semantic aliases */ --accent-soft: hsl(var(--destructive) / 0.10); --danger: hsl(var(--destructive)); --info: hsl(var(--primary)); /* Type */ --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Radius variants */ --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-pill: 999px; /* Shadows — shadcn elevation */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10); --shadow-blue: 0 0 0 3px hsl(var(--ring) / 0.18); --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* Optional .dark theme — toggle by adding class="dark" to */ .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } /* ---------- Reset ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: hsl(var(--foreground)); background: hsl(var(--background)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; } ::selection { background: hsl(var(--primary) / 0.18); color: hsl(var(--foreground)); } /* ========================================================= TYPOGRAPHY ========================================================= */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: hsl(var(--primary)); text-transform: none; } .eyebrow::before { content: ''; width: 18px; height: 1px; background: hsl(var(--primary)); } .h-display { font-weight: 700; font-size: 48px; line-height: 1.05; letter-spacing: -0.025em; color: hsl(var(--foreground)); } .h-1 { font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; color: hsl(var(--foreground)); } .h-2 { font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: hsl(var(--foreground)); } .h-3 { font-weight: 600; font-size: 18px; line-height: 1.3; color: hsl(var(--foreground)); } .h-4 { font-weight: 600; font-size: 14px; line-height: 1.4; color: hsl(var(--foreground)); } /* ========================================================= BUTTONS — shadcn variants ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; height: 36px; font-weight: 500; font-size: 14px; border-radius: var(--radius-md); transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); white-space: nowrap; border: 1px solid transparent; cursor: pointer; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); } .btn:disabled { opacity: 0.5; pointer-events: none; } .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-primary:hover { background: hsl(var(--primary) / 0.9); } .btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .btn-secondary:hover { background: hsl(var(--secondary) / 0.8); } .btn-outline { background: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); } .btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .btn-ghost { background: transparent; color: hsl(var(--foreground)); } .btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn-destructive:hover { background: hsl(var(--destructive) / 0.9); } .btn-link { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 4px; } .btn-link:hover { text-decoration-thickness: 2px; } .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; } .btn-lg { height: 40px; padding: 0 24px; font-size: 15px; } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-icon.btn-sm { width: 32px; height: 32px; } /* ========================================================= CARDS ========================================================= */ .card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); } .card-flat { background: transparent; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: 24px; } .card-light { background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); } /* ========================================================= BADGES ========================================================= */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); border: 1px solid transparent; line-height: 1.5; } .badge-blue { background: hsl(var(--primary) / 0.10); color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.30); } .badge-success { background: hsl(var(--success) / 0.10); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.30); } .badge-warning { background: hsl(var(--warning) / 0.10); color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.30); } .badge-danger { background: hsl(var(--destructive) / 0.10); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.30); } .badge-neutral { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); } .badge-outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); } /* Inline status text */ .status-text { font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); } .status-text.ok { color: hsl(var(--success)); } .status-text.warn { color: hsl(var(--warning)); } .status-text.error { color: hsl(var(--destructive)); } /* Status dot — small indicator */ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-dot-green { background: hsl(var(--success)); box-shadow: 0 0 0 3px hsl(var(--success) / 0.18); } .status-dot-amber { background: hsl(var(--warning)); box-shadow: 0 0 0 3px hsl(var(--warning) / 0.18); } .status-dot-red { background: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.18); animation: pulse-soft 2s ease-in-out infinite; } @keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } /* ========================================================= FORMS — shadcn input style ========================================================= */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); margin-bottom: 8px; } .form-input, .form-select, .form-textarea { width: 100%; height: 36px; padding: 0 12px; background: hsl(var(--background)); border: 1px solid hsl(var(--input)); border-radius: var(--radius-md); color: hsl(var(--foreground)); font-size: 14px; transition: border-color var(--transition), box-shadow var(--transition); } .form-textarea { height: auto; padding: 8px 12px; min-height: 80px; resize: vertical; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18); } .form-input::placeholder { color: hsl(var(--muted-foreground)); } .form-input:disabled { background: hsl(var(--muted)); cursor: not-allowed; opacity: 0.7; } .form-input.error, .form-select.error { border-color: hsl(var(--destructive)); } /* ========================================================= TABLES ========================================================= */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-weight: 500; font-size: 12px; color: hsl(var(--muted-foreground)); padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.4); } .table td { padding: 14px 16px; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); } .table tbody tr { transition: background-color var(--transition); } .table tbody tr:hover { background: hsl(var(--muted) / 0.5); } /* ========================================================= TOPBAR ========================================================= */ .topbar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 24px; background: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); position: sticky; top: 0; z-index: 100; } .topbar-brand { display: flex; align-items: center; gap: 12px; } .topbar-logo { width: 32px; height: 32px; border-radius: var(--radius-md); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; letter-spacing: -0.01em; flex-shrink: 0; } .topbar-logo svg { width: 16px; height: 16px; } .topbar-title { font-weight: 600; font-size: 14px; color: hsl(var(--foreground)); } .topbar-portal { font-size: 12px; color: hsl(var(--muted-foreground)); margin-left: 4px; padding-left: 12px; border-left: 1px solid hsl(var(--border)); } .topbar-nav { display: flex; gap: 4px; align-items: center; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .topbar-user { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; background: transparent; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--transition); } .topbar-user:hover { background: hsl(var(--accent)); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: hsl(var(--muted)); color: hsl(var(--foreground)); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex-shrink: 0; } .avatar-lg { width: 40px; height: 40px; font-size: 14px; } .avatar-sm { width: 22px; height: 22px; font-size: 10px; } /* ========================================================= SIDEBAR ========================================================= */ .sidebar { background: hsl(var(--background)); border-right: 1px solid hsl(var(--border)); padding: 16px 12px; overflow-y: auto; } .sidebar-section { margin-bottom: 24px; } .sidebar-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--muted-foreground)); padding: 0 12px; margin-bottom: 8px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; border-radius: var(--radius-md); margin: 1px 0; transition: background-color var(--transition), color var(--transition); } .sidebar-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .sidebar-item.active { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .sidebar-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; } .sidebar-count { margin-left: auto; font-size: 11px; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); padding: 1px 8px; border-radius: var(--radius-pill); font-weight: 500; font-variant-numeric: tabular-nums; } /* ========================================================= PAGE LAYOUT ========================================================= */ .page { padding: 28px 32px 64px; max-width: 1400px; margin: 0 auto; } .page-header { margin-bottom: 28px; padding-bottom: 0; border-bottom: 0; } .page-title { font-weight: 700; font-size: 28px; color: hsl(var(--foreground)); margin-bottom: 6px; letter-spacing: -0.02em; } .page-sub { color: hsl(var(--muted-foreground)); font-size: 14px; } /* ========================================================= KPI cards ========================================================= */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; border: 0; border-radius: 0; overflow: visible; } .kpi { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-sm); } .kpi-label { font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); margin-bottom: 8px; } .kpi-value { font-weight: 700; font-size: 28px; line-height: 1.1; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-bottom: 6px; } .kpi-trend { font-size: 12px; color: hsl(var(--success)); font-weight: 500; } .kpi-trend.down { color: hsl(var(--destructive)); } /* ========================================================= TABS — shadcn underline-style ========================================================= */ .tabs { display: flex; gap: 0; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 24px; } .tab { padding: 10px 16px; font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--transition), border-color var(--transition); cursor: pointer; } .tab:hover { color: hsl(var(--foreground)); } .tab.active { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); } /* ========================================================= SEGMENTED PROGRESS — used by management dashboard ========================================================= */ .segbar { display: flex; gap: 2px; height: 8px; } .segbar-cell { flex: 1; background: hsl(var(--muted)); border-radius: 1px; } .segbar-cell.on { background: hsl(var(--primary)); } .segbar-cell.warn { background: hsl(var(--warning)); } .segbar-cell.error { background: hsl(var(--destructive)); } /* ========================================================= UTILITY ========================================================= */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .text-sm { font-size: 13px; } .text-xs { font-size: 12px; } .text-muted { color: hsl(var(--muted-foreground)); } .text-bright { color: hsl(var(--foreground)); } .font-mono { font-family: var(--font-mono); } .font-body { font-family: var(--font-body); } .uppercase { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; font-weight: 600; } .w-full { width: 100%; } .tabular { font-variant-numeric: tabular-nums; } /* ========================================================= SCROLLBARS ========================================================= */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 6px; border: 2px solid hsl(var(--background)); } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.6); } /* ========================================================= USER MENU (rendered by session.js) ========================================================= */ #dmp-user-menu { background: hsl(var(--popover)) !important; color: hsl(var(--popover-foreground)); border: 1px solid hsl(var(--border)) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-md) !important; padding: 6px !important; } #dmp-user-menu button { font-size: 14px; font-weight: 500; padding: 8px 12px !important; border-radius: var(--radius-sm) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; } #dmp-user-menu button:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } #dmp-user-menu button[onclick*="logout"] { color: hsl(var(--destructive)); } #dmp-user-menu button[onclick*="logout"]:hover { background: hsl(var(--destructive) / 0.10); color: hsl(var(--destructive)); } /* ========================================================= TOAST — bottom-right notification ========================================================= */ #dmp-toast { position: fixed; bottom: 24px; right: 24px; background: hsl(var(--popover)) !important; color: hsl(var(--popover-foreground)) !important; border: 1px solid hsl(var(--border)) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; padding: 12px 18px !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; z-index: 500; } /* ========================================================= DOT-MATRIX (no-op for shadcn — keep selector to avoid breakage) ========================================================= */ .dot-bg { background-image: none; }