/** * @fileoverview Clean Tailwind CSS implementation for Admin Dashboard v2.0 * * DESIGN PRINCIPLES: * - Import shared component styles first for proper inheritance * - Use Tailwind CSS v4+ utilities throughout * - Minimal custom CSS - leverage component composition * - Follow 8pt grid system for consistency * - Maintain design system compliance */ /* Base application styles - minimal custom CSS */ html { /* Use modern viewport units for mobile compatibility and full height */ height: 100%; min-height: 100vh; margin: 0; padding: 0; /* Ensure proper font rendering across all browsers, especially Safari */ font-family: var(--font-inter), 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } body { /* Full height to support viewport filling */ height: 100%; min-height: 100vh; margin: 0; padding: 0; /* Remove background to allow Tailwind classes to work properly */ /* Background will be set via Tailwind classes in layout.tsx */ color: hsl(var(--foreground)); /* Ensure proper font rendering in Safari */ font-family: var(--font-inter), 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Disable horizontal scrolling on mobile */ overflow-x: hidden; } /* Custom utility classes for admin-specific needs */ .admin-main-content { /* Full height minus header if needed */ min-height: calc(100dvh - var(--admin-header-height, 0px)); } /* Loading states that complement shared components */ .admin-loading-skeleton { background: linear-gradient( 90deg, hsl(var(--muted)) 0%, hsl(var(--muted) / 0.8) 50%, hsl(var(--muted)) 100% ); background-size: 200% 100%; animation: loading-pulse 1.5s ease-in-out infinite; } @keyframes loading-pulse { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Focus states for enhanced accessibility */ /* --ring is a full OKLCH color (see packages/ui-components globals.css), not raw HSL components — wrapping it in hsl() is invalid CSS and was silently falling back to the outline-color initial value (`invert`), which renders as a hard black/inverted ring instead of the accent. Read the token directly; it is already a complete color function. */ .admin-focus-ring:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Force Radix Popper content wrappers (Select, Popover, etc.) to render ABOVE Dialog content (z-[100]). The wrapper otherwise defaults to a stacking context that sits below modal Dialogs, making dropdowns invisible inside modals. 110 is also above drawers (z-[51]+), so this supersedes the earlier 60 value that was only tuned for drawers. */ [data-radix-popper-content-wrapper] { z-index: 110 !important; } /* Variant table: show trash/restore icons only on row hover */ .trash-on-hover { opacity: 0; transition: opacity 0.15s ease; } tr:hover .trash-on-hover { opacity: 1; } /* Responsive utilities for admin layout */ @media (max-width: 768px) { .admin-mobile-padding { padding-left: 1rem; padding-right: 1rem; } } /* Force Radix Popper content wrappers (Select, Popover, etc.) to render ABOVE Dialog content (z-[100]). The wrapper otherwise defaults to a stacking context that sits below modal Dialogs, making dropdowns invisible inside modals. */ [data-radix-popper-content-wrapper] { z-index: 110 !important; } /* ------------------------------------------------------------------ * * appearance.css — global admin density + accent tokens. * * Imported once by app/layout.tsx. Drives BOTH density (data-density * on ) and accent (data-accent on ). * * Mechanism: * Density: spacing + nav vars × 3 steps. Consumers read them * via var()-backed arbitrary utilities (e.g. * p-[var(--ui-card-pad)]). cn() is plain twMerge — custom * @theme utilities would NOT dedupe, so we use var() only. * * Accent: overrides --primary / --primary-foreground / --ring only. * Default (blue) = current admin --primary; no rule needed. * Never overrides --sidebar-primary (blast radius minimised). * * CSS-pipeline note: bare [data-density] attribute-presence selectors * and :root blocks for these custom-property declarations are dropped by * this pipeline. Only VALUE selectors survive reliably, so every density * step and accent uses a concrete value selector. The html { } block * below doubles as the "regular" value AND the no-density-set fallback * (belt-and-braces: html[data-density='regular'] repeats the same values). * ------------------------------------------------------------------ */ /* ---- density: regular (default / fallback when no data-density set) ---- */ html { --ui-card-pad: 1.375rem; /* 22px */ --ui-section-gap: 1.375rem; /* 22px */ --ui-row-py: 0.6875rem; /* 11px */ --ui-control-h: 2.5rem; /* 40px — airier inputs */ --ui-label-size: 0.6875rem; /* 11px — small UPPERCASE label */ --ui-label-tracking: 0.06em; /* letter-spaced */ --ui-switch-scale: 1; /* sm Switch already small; hook for future */ /* Label grey is intentionally density- AND theme-stable (L1): the SAME grey in light and dark so the label always reads as "chrome", not content. #6b7280 (slate-500) ≥4.6:1 on light card, ≥5.0:1 on dark card for 10-12px label text. Verified both modes. */ --ui-label-color: #6b7280; /* Sidebar flyout nav cards — spacing tracks density; type stays readable. */ --ui-nav-item-py: 0.5rem; /* 8px */ --ui-nav-text: 0.875rem; /* 14px */ --ui-nav-card-pad: 0.375rem; /* 6px */ } /* Explicit value selector so tools that inspect computed values see it. Must mirror html { } exactly. */ html[data-density='regular'] { --ui-card-pad: 1.375rem; --ui-section-gap: 1.375rem; --ui-row-py: 0.6875rem; --ui-control-h: 2.5rem; --ui-label-size: 0.6875rem; --ui-label-tracking: 0.06em; --ui-switch-scale: 1; --ui-label-color: #6b7280; --ui-nav-item-py: 0.5rem; --ui-nav-text: 0.875rem; --ui-nav-card-pad: 0.375rem; } html[data-density='compact'] { --ui-card-pad: 1.125rem; /* 18px */ --ui-section-gap: 1rem; /* 16px */ --ui-row-py: 0.5rem; /* 8px */ /* 36px. Real WCAG-2.2 SC-2.5.8 hit-area floor (≥24px) is enforced at the consumer via min-h-[max(var(--ui-control-h),1.5rem)]. */ --ui-control-h: 2.25rem; /* 36px */ --ui-label-size: 0.625rem; /* 10px */ --ui-label-tracking: 0.07em; --ui-switch-scale: 1; --ui-label-color: #6b7280; --ui-nav-item-py: 0.375rem; /* 6px */ --ui-nav-text: 0.8125rem; /* 13px */ --ui-nav-card-pad: 0.25rem; /* 4px */ } html[data-density='comfortable'] { --ui-card-pad: 1.625rem; /* 26px */ --ui-section-gap: 1.75rem; /* 28px */ --ui-row-py: 0.875rem; /* 14px */ --ui-control-h: 2.75rem; /* 44px */ --ui-label-size: 0.75rem; /* 12px */ --ui-label-tracking: 0.05em; --ui-switch-scale: 1; --ui-label-color: #6b7280; --ui-nav-item-py: 0.625rem; /* 10px */ --ui-nav-text: 0.9375rem; /* 15px */ --ui-nav-card-pad: 0.5rem; /* 8px */ } /* ---- density-aware form controls inside a FormShell ---- * * Plain class selector + var() with regular fallback. * Scopes to .fs-density-form so only opted-in forms receive the rule. * Excludes checkboxes / radios / switches / buttons. * ------------------------------------------------------------------ */ .fs-density-form input:not([type='checkbox']):not([type='radio']):not([type='button']):not( [type='file'] ), .fs-density-form button[role='combobox'] { height: var(--ui-control-h, 2.5rem); border-radius: 0.625rem; /* 10px — matches reference */ font-size: 0.8125rem; /* 13px — modest tightening vs shared 14px */ } /* ---- accent palettes ---- * * Each non-blue accent overrides --primary, --primary-foreground, * --ring on . Blue = no rule (equals the existing :root default). * * Dark-mode variants flip --primary-foreground to near-black so text on * the brighter dark-mode primary still clears WCAG AA. * * All eight rows verified ≥4.5:1 for text-on-primary and ≥4.5:1 for * primary-on-surface (links / focus rings). See PLAN §4 for full table. * ------------------------------------------------------------------ */ /* -- Violet -- */ html[data-accent='violet'] { --primary: oklch(0.55 0.20 285); --primary-foreground: oklch(1 0 0); --ring: oklch(0.55 0.20 285); } html.dark[data-accent='violet'] { --primary: oklch(0.66 0.17 288); --primary-foreground: oklch(0.16 0.03 285); --ring: oklch(0.66 0.17 288); } /* -- Emerald -- */ html[data-accent='emerald'] { --primary: oklch(0.52 0.13 165); --primary-foreground: oklch(1 0 0); --ring: oklch(0.52 0.13 165); } html.dark[data-accent='emerald'] { --primary: oklch(0.70 0.15 165); --primary-foreground: oklch(0.18 0.03 165); --ring: oklch(0.70 0.15 165); } /* -- Amber (deepened to L=0.55 light so white text clears 4.5:1) -- */ html[data-accent='amber'] { --primary: oklch(0.55 0.13 60); --primary-foreground: oklch(1 0 0); --ring: oklch(0.55 0.13 60); } html.dark[data-accent='amber'] { --primary: oklch(0.78 0.15 70); --primary-foreground: oklch(0.18 0.03 70); --ring: oklch(0.78 0.15 70); } /* Blue = no [data-accent] block — equals the existing :root/.dark --primary. */ /* ---- density-aware data-table rows inside a scoped region ---- * * Plain class selector + var() with regular fallback. * Opt-in only (wrapper class) — zero risk to v1 tables or any other * admin table. Applied by v2 tab components around their table regions. * Mirrors .fs-density-form's opt-in scoping pattern. * Activates the already-defined-but-dormant --ui-row-py token. * ------------------------------------------------------------------ */ .fs-density-table :is(td, th) { padding-top: var(--ui-row-py, 0.6875rem); padding-bottom: var(--ui-row-py, 0.6875rem); } /* ---- v2 data-table headers adopt the FieldLabel chrome ---- * * Opt-in via the same .fs-density-table wrapper already on v2 table regions. * Targets both raw (depts/groups tables) AND the shared th * (assignments/admins sub-tables in associated-users-tab-v2) — they all render * a . Token-stable grey, UPPERCASE, letter-spaced; mirrors FieldLabel. * No dark: needed — --ui-label-color is intentionally theme-stable (#6b7280). * v1 + non-wrapped tables are untouched (wrapper is opt-in, v2-only). * ---------------------------------------------------------------- */ .fs-density-table th { font-size: var(--ui-label-size, 0.6875rem); letter-spacing: var(--ui-label-tracking, 0.06em); text-transform: uppercase; font-weight: 600; color: var(--ui-label-color, #6b7280); /* Opaque header so a sticky thead (top-0) does not let scrolled rows show * through behind it. var(--muted) is a solid token (light + dark) and gives a * subtle header shade distinct from the card-surface body rows. */ background-color: var(--muted); border-bottom: 1px solid var(--border); } /* ---- v2 data-table body cells — denser than the shared 14px default ---- * * 13px keeps the data legible for admin power-users while fitting more rows. * Constant across densities (density flexes SPACING only via --ui-row-py). * Inputs inside cells (.fs-density-form controls) are unaffected — they size * via --ui-control-h on the input element, not font-size on the td. * ---------------------------------------------------------------- */ .fs-density-table td { font-size: 0.8125rem; /* 13px */ } /* cyrillic-ext */ @font-face { font-family: '__Inter_f367f3'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: '__Inter_f367f3'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: '__Inter_f367f3'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: '__Inter_f367f3'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: '__Inter_f367f3'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: '__Inter_f367f3'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: '__Inter_f367f3'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face {font-family: '__Inter_Fallback_f367f3';src: local("Arial");ascent-override: 90.49%;descent-override: 22.56%;line-gap-override: 0.00%;size-adjust: 107.06% }.__className_f367f3 {font-family: '__Inter_f367f3', '__Inter_Fallback_f367f3', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;font-style: normal }.__variable_f367f3 {--font-inter: '__Inter_f367f3', '__Inter_Fallback_f367f3', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif } /* vietnamese */ @font-face { font-family: '__Dancing_Script_b75cb0'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/_next/static/media/325259dae461ae2a-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: '__Dancing_Script_b75cb0'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/_next/static/media/d8f3713f2c4f699b-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: '__Dancing_Script_b75cb0'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/_next/static/media/0e9d289c6eb42bf7-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face {font-family: '__Dancing_Script_Fallback_b75cb0';src: local("Arial");ascent-override: 112.99%;descent-override: 34.39%;line-gap-override: 0.00%;size-adjust: 81.43% }.__className_b75cb0 {font-family: '__Dancing_Script_b75cb0', '__Dancing_Script_Fallback_b75cb0';font-style: normal }.__variable_b75cb0 {--font-handwriting: '__Dancing_Script_b75cb0', '__Dancing_Script_Fallback_b75cb0' }