/* ============================================================================ shadcn/ui base theme (CSS variables / design tokens) — no React. Standard shadcn v4 token set (oklch) for light + dark, mapped onto the existing Bootstrap 5.3 + ds-* frontend served by document_dashboard. Dark mode is driven by the `data-theme="dark"` attribute on (set by component/layout.js / app.js, persisted in localStorage). The `.dark` class is also supported for shadcn-standard usage. ==========================================================================*/ /* ---------------------------------------------------------------------------- * Design tokens (light is the default :root) * -------------------------------------------------------------------------- */ :root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); /* Backwards-compatible aliases used by the existing ds-* frontend. */ --ds-primary: var(--primary); --ds-secondary: var(--secondary); --ds-success: oklch(0.596 0.145 163.225); --ds-warning: oklch(0.769 0.188 70.08); --ds-danger: var(--destructive); --ds-info: oklch(0.72 0.11 231.331); --ds-bg: var(--background); --ds-surface: var(--card); --ds-border: var(--border); --ds-text: var(--foreground); --ds-text-muted: var(--muted-foreground); } /* ---------------------------------------------------------------------------- * Dark theme tokens (shadcn default) * -------------------------------------------------------------------------- */ [data-theme="dark"], .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.371 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); --ds-primary: var(--primary); --ds-secondary: var(--secondary); --ds-success: oklch(0.696 0.17 162.48); --ds-warning: oklch(0.828 0.189 84.429); --ds-danger: var(--destructive); --ds-info: oklch(0.72 0.11 231.331); --ds-bg: var(--background); --ds-surface: var(--card); --ds-border: var(--border); --ds-text: var(--foreground); --ds-text-muted: var(--muted-foreground); } /* ---------------------------------------------------------------------------- * Base document / typography * -------------------------------------------------------------------------- */ * { border-color: var(--border); } .ds-body { background-color: var(--background); color: var(--foreground); font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } /* Map Bootstrap base colors onto shadcn tokens. */ body { background-color: var(--background); color: var(--foreground); } :root { --bs-body-bg: var(--background); --bs-body-color: var(--foreground); --bs-body-color-rgb: 255 255 255; --bs-border-color: var(--border); --bs-secondary-color: var(--muted-foreground); --bs-focus-ring-width: 2px; --bs-focus-ring-color: rgba(128, 128, 128, 0.35); } /* ---------------------------------------------------------------------------- * shadcn token utility classes * -------------------------------------------------------------------------- */ .bg-background { background-color: var(--background); } .bg-card { background-color: var(--card); } .bg-popover { background-color: var(--popover); } .bg-primary { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .bg-muted { background-color: var(--muted); } .bg-accent { background-color: var(--accent); } .bg-destructive { background-color: var(--destructive); } .text-foreground { color: var(--foreground) !important; } .text-card-foreground { color: var(--card-foreground) !important; } .text-primary { color: var(--primary) !important; } .text-primary-foreground { color: var(--primary-foreground) !important; } .text-secondary-foreground { color: var(--secondary-foreground) !important; } .text-muted { color: var(--muted-foreground) !important; } .text-accent-foreground { color: var(--accent-foreground) !important; } .text-destructive { color: var(--destructive) !important; } .border-border { border-color: var(--border) !important; } .border-input { border-color: var(--input) !important; } .rounded-token { border-radius: var(--radius); } .shadow-token { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); } .ring-token:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); } /* ---------------------------------------------------------------------------- * Existing ds-* component classes (mapped onto shadcn tokens) * -------------------------------------------------------------------------- */ .ds-navbar, .ds-sidebar, .ds-card { background-color: var(--card) !important; border-color: var(--border) !important; } .ds-sidebar { min-height: calc(100vh - 56px); } .ds-text-muted { color: var(--muted-foreground) !important; } .ds-page-title { letter-spacing: -0.01em; } .ds-kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .ds-card { border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } /* ---------------------------------------------------------------------------- * Bootstrap component overrides -> shadcn look * -------------------------------------------------------------------------- */ /* Cards */ .card { background-color: var(--card); color: var(--card-foreground); border-color: var(--border); border-radius: var(--radius); } .card-header, .card-footer { background-color: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); } /* Buttons */ .btn { border-radius: calc(var(--radius) - 2px); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .btn:focus-visible, .form-control:focus, .form-select:focus { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); } .btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: color-mix(in oklab, var(--primary) 90%, transparent); border-color: color-mix(in oklab, var(--primary) 90%, transparent); color: var(--primary-foreground); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); background-color: transparent; } .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .btn-outline-secondary { color: var(--foreground); border-color: var(--border); background-color: transparent; } .btn-outline-secondary:hover { background-color: var(--secondary); border-color: var(--border); color: var(--foreground); } .btn-outline-danger { color: var(--destructive); border-color: var(--destructive); background-color: transparent; } .btn-outline-danger:hover { background-color: var(--destructive); border-color: var(--destructive); color: var(--destructive-foreground); } .btn-danger { background-color: var(--destructive); border-color: var(--destructive); color: var(--destructive-foreground); } /* Badges */ .badge { font-weight: 600; border-radius: calc(var(--radius) - 2px); } .text-bg-primary { background-color: var(--primary) !important; color: var(--primary-foreground) !important; } .text-bg-success { background-color: var(--ds-success) !important; color: var(--foreground) !important; } .text-bg-warning { background-color: var(--ds-warning) !important; color: var(--foreground) !important; } .text-bg-danger { background-color: var(--destructive) !important; color: var(--destructive-foreground) !important; } .text-bg-secondary { background-color: var(--secondary) !important; color: var(--secondary-foreground) !important; } .text-bg-light { background-color: var(--muted) !important; color: var(--muted-foreground) !important; } /* Tables */ .table { --bs-table-bg: transparent; --bs-table-color: var(--foreground); --bs-table-border-color: var(--border); color: var(--foreground); background-color: transparent; } .table td, .table th { border-color: var(--border); background-color: transparent; } .table > :not(caption) > * > * { background-color: transparent; color: var(--foreground); border-bottom-color: var(--border); } .table thead th { color: var(--muted-foreground); font-weight: 600; border-bottom-color: var(--border); } .table-hover > tbody > tr:hover > * { background-color: var(--muted); color: var(--foreground); } /* Forms */ .form-control, .form-select { background-color: var(--card); border-color: var(--input); color: var(--foreground); border-radius: calc(var(--radius) - 2px); } .form-control:focus, .form-select:focus { background-color: var(--card); border-color: var(--ring); color: var(--foreground); } .form-control::placeholder { color: var(--muted-foreground); } .form-text { color: var(--muted-foreground); } .form-label, .form-check-label { color: var(--foreground); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } /* Inputs group */ .input-group-text { background-color: var(--secondary); border-color: var(--border); color: var(--muted-foreground); } /* Navbar / dropdown / offcanvas / modal */ .navbar { background-color: var(--card); border-color: var(--border); } .dropdown-menu { background-color: var(--popover); color: var(--popover-foreground); border-color: var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05); } .dropdown-item { color: var(--popover-foreground); border-radius: calc(var(--radius) - 4px); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--muted); color: var(--foreground); } .offcanvas { background-color: var(--card); color: var(--card-foreground); } .modal-content { background-color: var(--card); color: var(--card-foreground); border-color: var(--border); border-radius: var(--radius); } /* Navs */ .nav-pills .nav-link { color: var(--muted-foreground); border-radius: calc(var(--radius) - 2px); } .nav-pills .nav-link.active { background-color: var(--primary); color: var(--primary-foreground); } .nav-pills .nav-link:hover:not(.active) { background-color: var(--muted); color: var(--foreground); } /* List group / accordion / progress */ .list-group-item { background-color: var(--card); color: var(--card-foreground); border-color: var(--border); } .accordion-button { background-color: var(--card); color: var(--card-foreground); } .accordion-body { background-color: var(--card); color: var(--card-foreground); } .progress { background-color: var(--muted); } /* Alerts */ .alert { border-radius: var(--radius); } .alert-info { background-color: var(--muted); color: var(--foreground); border-color: var(--border); } .alert-success { background-color: color-mix(in oklab, var(--ds-success) 12%, transparent); color: var(--foreground); } .alert-danger { background-color: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--foreground); } .alert-warning { background-color: color-mix(in oklab, var(--ds-warning) 14%, transparent); color: var(--foreground); } /* Code / pre */ pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } /* Focus ring (shadcn style) */ :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }