/* ============================================================================ ISP MANAGEMENT SYSTEM — THEME TOKENS Captured from the reference UI (PayNetre demo, demo.paynetre.com) on 2026-08-29. shadcn/ui + Tailwind style token system. Values are HSL triplets ("H S% L%") so they compose with hsl(var(--token) / ). Usage in a Blazor app: wwwroot/index.html -> Toggle dark mode by adding/removing class "dark" on . Fonts: add the Google Fonts below to index.html . ============================================================================ */ /* */ :root { /* ---- surfaces & text ---- */ --background: 210 17% 98%; /* #F9FAFB page background */ --foreground: 220 43% 11%; /* #101828 primary text */ --card: 0 0% 100%; /* #FFFFFF card surface */ --card-foreground: 220 43% 11%; --card-border: 220 13% 93%; --popover: 0 0% 100%; --popover-foreground: 220 43% 11%; --popover-border: 220 13% 91%; --border: 220 13% 91%; /* #E5E7EB hairline */ --input: 220 13% 82%; /* input border */ /* ---- brand / semantic ---- */ --primary: 221 83% 53%; /* #2563EB action blue */ --primary-foreground: 0 0% 100%; --secondary: 210 17% 95%; --secondary-foreground: 220 20% 20%; --muted: 210 17% 95%; --muted-foreground: 220 9% 46%; /* #6B7280 secondary text */ --accent: 214 20% 94%; --accent-foreground: 220 43% 11%; --destructive: 0 84% 60%; /* #EF4444 danger / dues */ --destructive-foreground: 0 0% 100%; --ring: 221 83% 53%; /* focus ring */ /* ---- sidebar (its own scale) ---- */ --sidebar: 0 0% 100%; --sidebar-foreground: 222 47% 18%; --sidebar-border: 214 32% 91%; --sidebar-primary: 221 83% 53%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 214 95% 96%; /* #EFF6FF active nav pill bg */ --sidebar-accent-foreground: 222 47% 18%; --sidebar-ring: 221 83% 53%; /* ---- chart / KPI accent palette (blue, teal, violet, amber, red) ---- */ --chart-1: 221 83% 53%; /* #2563EB */ --chart-2: 173 80% 40%; /* #14B8A6 */ --chart-3: 262 83% 58%; /* #8B5CF6 */ --chart-4: 38 92% 50%; /* #F59E0B */ --chart-5: 0 84% 60%; /* #EF4444 */ /* ---- typography ---- */ --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", Menlo, monospace; --tracking-normal: 0em; /* ---- shape ---- */ --radius: 0.625rem; /* 10px base; cards use ~1rem, inputs ~1rem */ /* ---- elevation ---- */ --shadow-2xs: 0 1px 2px 0 rgba(0,0,0,.03); --shadow-xs: 0 1px 3px 0 rgba(0,0,0,.04); --shadow-sm: 0 2px 6px 0 rgba(0,0,0,.05), 0 1px 2px -1px rgba(0,0,0,.04); --shadow: 0 4px 12px 0 rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px 0 rgba(0,0,0,.07), 0 2px 6px -2px rgba(0,0,0,.05); --shadow-lg: 0 10px 24px -3px rgba(0,0,0,.08), 0 4px 8px -4px rgba(0,0,0,.05); --shadow-xl: 0 20px 32px -5px rgba(0,0,0,.09), 0 8px 12px -6px rgba(0,0,0,.05); --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.14); } .dark { --background: 222 47% 11%; /* #0F172A slate-900 */ --foreground: 220 13% 91%; --card: 217 33% 17%; /* #1E293B slate-800 */ --card-foreground: 220 13% 91%; --card-border: 222 18% 20%; --popover: 217 33% 15%; --popover-foreground: 220 13% 91%; --popover-border: 222 18% 22%; --border: 222 18% 18%; --input: 222 18% 28%; --primary: 221 83% 58%; --primary-foreground: 0 0% 100%; --secondary: 217 25% 22%; --secondary-foreground: 210 20% 88%; --muted: 217 22% 20%; --muted-foreground: 215 12% 58%; --accent: 217 22% 19%; --accent-foreground: 220 13% 91%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --ring: 221 83% 58%; --sidebar: 220 47% 8%; /* #0A0F1E */ --sidebar-foreground: 210 20% 88%; --sidebar-border: 220 35% 14%; --sidebar-primary: 221 83% 58%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 220 35% 14%; --sidebar-accent-foreground: 210 20% 88%; --sidebar-ring: 221 83% 58%; --chart-1: 221 83% 62%; --chart-2: 173 80% 50%; --chart-3: 262 83% 68%; --chart-4: 38 92% 60%; --chart-5: 0 84% 65%; --shadow-2xs: 0 1px 2px 0 rgba(0,0,0,.18); --shadow-xs: 0 1px 3px 0 rgba(0,0,0,.22); --shadow-sm: 0 2px 6px 0 rgba(0,0,0,.28), 0 1px 2px -1px rgba(0,0,0,.22); --shadow: 0 4px 12px 0 rgba(0,0,0,.30), 0 2px 4px -2px rgba(0,0,0,.22); --shadow-md: 0 4px 12px 0 rgba(0,0,0,.36), 0 2px 6px -2px rgba(0,0,0,.25); --shadow-lg: 0 10px 24px -3px rgba(0,0,0,.38), 0 4px 8px -4px rgba(0,0,0,.25); --shadow-xl: 0 20px 32px -5px rgba(0,0,0,.40), 0 8px 12px -6px rgba(0,0,0,.28); --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.55); } /* ---- base ---- */ html, body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-sans); font-size: 16px; -webkit-font-smoothing: antialiased; } /* ---- reusable helpers matching the reference UI ---- */ /* Frosted-glass sticky top bar */ .glass-header { position: sticky; top: 0; z-index: 50; min-height: 52px; padding: 8px 16px; background: hsl(var(--card) / 0.72); backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8); border-bottom: 1px solid hsl(var(--border)); } /* KPI / stat card: white surface, coloured top accent, soft shadow */ .stat-card { position: relative; background: hsl(var(--card)); border: 1px solid hsl(var(--card-border)); border-radius: 1rem; /* 16px */ padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); overflow: hidden; } .stat-card::before { /* the coloured strip along the top */ content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: hsl(var(--stat-accent, var(--chart-1))); } .stat-card__label { font-size: 0.6875rem; /* 11px */ font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } .stat-card__value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: hsl(var(--foreground)); } .stat-card__icon { /* gradient rounded-square badge */ width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, hsl(var(--stat-accent, var(--chart-1))), hsl(var(--stat-accent, var(--chart-1)) / 0.75)); } /* Buttons */ .btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 9999px; /* pill */ background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 13px; font-weight: 600; border: none; } .btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius); background: hsl(var(--card)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); font-size: 11px; font-weight: 600; } .btn-outline:hover { color: hsl(var(--foreground)); border-color: hsl(var(--input)); } /* Segmented / pill tab (active state) */ .pill-tab { padding: 6px 12px; border-radius: var(--radius); font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); background: transparent; border: none; } .pill-tab[aria-selected="true"], .pill-tab.active { background: hsl(var(--sidebar-accent)); color: hsl(var(--primary)); box-shadow: var(--shadow-2xs); } /* Inputs */ .field { border-radius: 1rem; padding: 8px 12px; background: hsl(var(--muted) / 0.4); border: 1px solid hsl(var(--border) / 0.6); font-size: 14px; color: hsl(var(--foreground)); } .field:focus { outline: 2px solid hsl(var(--ring) / 0.4); outline-offset: 1px; } /* Sidebar nav item */ .nav-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius); font-size: 13px; font-weight: 500; color: hsl(var(--sidebar-foreground)); } .nav-item:hover { background: hsl(var(--sidebar-accent) / 0.6); } .nav-item.active { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-primary)); }