@import "tailwindcss"; /* next-themes uses class="dark" on ; Tailwind v4 defaults to prefers-color-scheme */ @custom-variant dark (&:where(.dark, .dark *)); @theme { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-active: var(--sidebar-active); --color-success: var(--success); --color-warning: var(--warning); --color-info: var(--info); --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; } #main-content { min-width: 0; } #main-content > * { min-width: 0; max-width: 100%; } @layer components { .crm-radius-card { border-radius: 5px; } .crm-radius-control { border-radius: 6px; } .crm-radius-toggle { border-radius: 4px; } .crm-radius-icon { border-radius: 8px; } .crm-radius-none { border-radius: 0 !important; } .crm-radius-section { border-radius: 5px; } .crm-radius-badge { border-radius: 5px; } .crm-data-table { width: 100%; text-align: left; border-collapse: collapse; } .crm-data-table th, .crm-data-table td { white-space: nowrap; vertical-align: middle; font-size: 12px !important; } .crm-data-table td[colspan] { white-space: normal; } .crm-data-table td.whitespace-normal, .crm-data-table .whitespace-normal { white-space: normal; } .crm-data-table th { font-weight: 600; } .crm-data-table td .crm-cell-clip, .crm-data-table .crm-cell-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; } .crm-data-table .crm-cell-clip.max-w-\[140px\] { max-width: 140px; } .crm-data-table .crm-cell-clip.max-w-\[180px\] { max-width: 180px; } .crm-data-table .crm-cell-clip.max-w-\[200px\] { max-width: 200px; } .crm-data-table .crm-cell-clip.max-w-\[220px\] { max-width: 220px; } } /* ===== CRMS-Matched Light Theme ===== */ :root { --background: #f4f7fe; --foreground: #1b2559; --card: #ffffff; --card-foreground: #1b2559; --primary: #5BA4C7; --primary-foreground: #ffffff; --secondary: #f4f7fe; --secondary-foreground: #1b2559; --muted: #f0f3f9; --muted-foreground: #707eae; --accent: #f4f7fe; --accent-foreground: #1b2559; --destructive: #e31a1a; --border: #e9edf4; --input: #e9edf4; --ring: #5BA4C7; --sidebar: #1b2559; --sidebar-foreground: #d7def5; --sidebar-active: #5BA4C7; --success: #01b574; --warning: #5BA4C7; --info: #4318ff; } /* ===== Dark Theme ===== */ .dark { --background: #0b1437; --foreground: #e0e5f2; --card: #111c44; --card-foreground: #e0e5f2; --primary: #5BA4C7; --primary-foreground: #ffffff; --secondary: #1b254b; --secondary-foreground: #e0e5f2; --muted: #1b254b; --muted-foreground: #a3aed0; --accent: #1b254b; --accent-foreground: #e0e5f2; --destructive: #e31a1a; --border: #1f2c5c; --input: #1f2c5c; --ring: #5BA4C7; --sidebar: #0b1437; --sidebar-foreground: #e8eefc; --sidebar-active: #5BA4C7; --success: #01b574; --warning: #5BA4C7; --info: #7551ff; } @layer base { * { border-color: var(--border); } html { color-scheme: light; } html.dark { color-scheme: dark; } body { background-color: var(--background); color: var(--foreground); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select { color: var(--foreground); background-color: var(--muted); } input::placeholder, textarea::placeholder { color: var(--muted-foreground); } option { color: var(--foreground); background-color: var(--card); } *:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #a3aed050; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #a3aed080; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Keyboard skip link */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--primary); color: var(--primary-foreground); padding: 8px; z-index: 100; transition: top 0.2s ease; } .skip-link:focus { top: 0; } /* ═══════════════════════════════════════════════════════════════════════════ DARK MODE OVERRIDES Pages that use hardcoded Tailwind light-palette classes (slate, gray, white) instead of design-system CSS vars are fixed here so the dark theme works without touching every JSX file individually. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Text color overrides ────────────────────────────────────────────────── */ .dark .text-slate-900, .dark .text-slate-800, .dark .text-slate-700, .dark .text-slate-650, .dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700, .dark .text-gray-200, .dark .text-gray-450 { color: var(--foreground); } .dark .text-slate-600, .dark .text-slate-500, .dark .text-slate-450, .dark .text-slate-400, .dark .text-slate-300, .dark .text-slate-200, .dark .text-gray-600, .dark .text-gray-500, .dark .text-gray-400, .dark .text-gray-300 { color: var(--muted-foreground); } /* Specific design-system hex that shows up in some pages */ .dark .text-\[\#1b2559\] { color: var(--foreground); } /* indigo accent text → use info variable */ .dark .text-indigo-600, .dark .text-indigo-500 { color: var(--info); } /* ── Background overrides ─────────────────────────────────────────────────── */ /* White → card */ .dark .bg-white { background-color: var(--card) !important; } /* Slate backgrounds → muted */ .dark .bg-slate-50, .dark .bg-slate-100, .dark [class*="bg-slate-50"], .dark [class*="bg-slate-100"] { background-color: color-mix(in srgb, var(--muted) 60%, transparent); } .dark .bg-slate-200 { background-color: var(--muted); } .dark .bg-slate-800, .dark .bg-slate-700 { background-color: var(--muted); } .dark .bg-slate-900 { background-color: var(--background); } /* Gray backgrounds */ .dark .bg-gray-50, .dark .bg-gray-100 { background-color: color-mix(in srgb, var(--muted) 60%, transparent); } /* Rose/red tinted backgrounds */ .dark .bg-rose-50 { background-color: color-mix(in srgb, #e31a1a 8%, var(--card)); } /* Indigo tinted backgrounds */ .dark .bg-indigo-50, .dark [class*="bg-indigo-50"] { background-color: color-mix(in srgb, var(--info) 12%, var(--card)); } /* ring utilities using indigo */ .dark .ring-indigo-500, .dark [class*="ring-indigo-500"] { --tw-ring-color: var(--info); } /* ── Border overrides ────────────────────────────────────────────────────── */ .dark .border-slate-200, .dark .border-slate-300, .dark .border-slate-100 { border-color: var(--border); } .dark .border-slate-800 { border-color: color-mix(in srgb, var(--border) 60%, transparent); } .dark .border-gray-200, .dark .border-gray-300 { border-color: var(--border); } /* Rose border */ .dark .border-rose-200, .dark .border-rose-300 { border-color: color-mix(in srgb, #e31a1a 40%, var(--border)); } /* Indigo border */ .dark .border-indigo-600, .dark .border-indigo-500 { border-color: var(--info); } /* ── Hover overrides ─────────────────────────────────────────────────────── */ .dark .hover\:bg-slate-100:hover, .dark .hover\:bg-slate-200:hover { background-color: var(--muted); } .dark .hover\:bg-slate-300:hover { background-color: color-mix(in srgb, var(--muted) 150%, transparent); } .dark .hover\:bg-white:hover { background-color: color-mix(in srgb, var(--card) 120%, transparent); } .dark .hover\:bg-rose-50:hover { background-color: color-mix(in srgb, #e31a1a 8%, var(--card)); } .dark .hover\:border-slate-300:hover { border-color: color-mix(in srgb, var(--border) 150%, transparent); } /* ── Divide (table separators) ───────────────────────────────────────────── */ .dark .divide-slate-100 > * + *, .dark .divide-slate-200 > * + * { border-color: var(--border); } /* ── Purple / violet overrides (used in storefront file upload cards) ────── */ .dark .hover\:border-purple-500\/50:hover { border-color: color-mix(in srgb, #8b5cf6 50%, transparent); } /* ── Storefront section card: bg-white → bg-card, bg-slate-50 → bg-muted ── */ .dark .rounded-2xl.bg-white { background-color: var(--card) !important; } /* ── Scrollbar in dark panels ────────────────────────────────────────────── */ .dark ::-webkit-scrollbar-thumb { background: #1f2c5c; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE SHELL Phone / tablet / desktop rules applied to every admin page via #main-content so list toolbars, tables, drawers, and headers scale without per-page CSS. Breakpoints: 479px (small phone), 639px (phone), 767px (large phone), 1023px (tablet), 1279px (laptop). ═══════════════════════════════════════════════════════════════════════════ */ html { overflow-x: hidden; } #main-content img { max-width: 100%; } @media (max-width: 1279px) { #main-content .xl\:grid-cols-4 { min-width: 0; } } @media (max-width: 1023px) { #main-content .md\:flex-nowrap { flex-wrap: wrap !important; } #main-content .absolute.z-50, #main-content .absolute[class*="z-50"] { max-width: min(100vw - 1.5rem, 360px); } } @media (max-width: 767px) { #main-content > .flex.flex-col > .flex.items-start.justify-between, #main-content > .flex.flex-col > .flex.items-center.justify-between { flex-wrap: wrap; row-gap: 10px; } #main-content .crm-radius-section .flex.items-center.justify-between, #main-content .crm-radius-section .flex.items-start.justify-between { flex-wrap: wrap; row-gap: 10px; } #main-content .max-w-\[480px\] { max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; width: 100%; } #main-content .min-w-\[180px\], #main-content .min-w-\[160px\], #main-content .min-w-\[220px\] { min-width: 0 !important; } #main-content .overflow-x-auto { -webkit-overflow-scrolling: touch; } .crm-data-table th, .crm-data-table td { padding-left: 12px; padding-right: 12px; } } @media (max-width: 639px) { #main-content .max-w-\[480px\] + button, #main-content .max-w-\[480px\] ~ button { margin-left: auto; } } @media (max-width: 479px) { #main-content { padding-left: 10px; padding-right: 10px; } }