/* ============================================================================= admin-theme.css — Claude Design token foundation for HACC.Administration Phase 1 (foundation): design tokens + helpers only. Loaded LAST in so its CSS variables win. Variable values copied EXACTLY from the redesign mock (Hacc Admin.dc.html). Base body styling is SCOPED so it does not fight existing Bootstrap / MudBlazor / Radzen / Tailwind pages. ========================================================================== */ /* ---- Light (default) design tokens ------------------------------------- */ :root { --bg:#eaeef2; --surface:#ffffff; --surface-2:#f5f8fa; --surface-3:#eef2f6; --border:#e4e9ee; --border-strong:#d2dae1; --text:#11181f; --text-2:#576470; --text-3:#8d99a4; --primary:#0e7e92; --primary-strong:#0b687a; --primary-soft:#e1f1f4; --coral:#d9603f; --coral-soft:#fae9e2; --success:#1f9d6b; --success-soft:#e3f5ec; --amber:#b07d12; --amber-soft:#f7eed5; --shadow:0 1px 2px rgba(17,24,31,.05), 0 8px 24px -12px rgba(17,24,31,.12); --shadow-lg:0 24px 60px -20px rgba(17,24,31,.30); } /* ---- Dark theme overrides ---------------------------------------------- */ [data-theme="dark"] { --bg:#0a0f14; --surface:#121a21; --surface-2:#19232b; --surface-3:#1f2b34; --border:#243039; --border-strong:#324250; --text:#e9eff4; --text-2:#9aa8b4; --text-3:#697682; --primary:#2bb6cf; --primary-strong:#46c4da; --primary-soft:#0f343d; --coral:#ef8164; --coral-soft:#3a221b; --success:#3fc088; --success-soft:#11332a; --amber:#d8a83a; --amber-soft:#352b14; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -20px rgba(0,0,0,.7); } /* ---- Animations (copied from mock) ------------------------------------- */ @keyframes pop { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } } @keyframes fade { from { opacity:0; } to { opacity:1; } } @keyframes menu { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } } /* ---- Material Symbols Rounded helper class (copied from mock) ---------- */ .mi { font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; } /* ---- Custom scrollbar (copied from mock) ------------------------------- */ ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:8px; border:2px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-track { background:transparent; } /* ---- Scoped base styling ---------------------------------------------- NOTE: deliberately NOT a blanket `body { ... }` override — existing pages still depend on Bootstrap / MudBlazor / Radzen / Tailwind typography. The new look (Hanken Grotesk @ 13px, antialiased, themed bg/text) is applied to opt-in shell containers. Add `class="admin-shell"` to a redesigned shell wrapper in later phases to activate it; nothing changes until then. ----------------------------------------------------------------------- */ .admin-shell { font-family:'Hanken Grotesk', system-ui, sans-serif; font-size:13px; -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--text); } /* Form controls inside the redesigned shell inherit the UI font. */ .admin-shell input, .admin-shell select, .admin-shell textarea, .admin-shell button { font-family:inherit; } /* ============================================================================= PHASE 2 — Admin component styling (Claude Design mock) ----------------------------------------------------------------------------- EVERYTHING below is scoped under .admin-shell so it can never leak into the shared HACC.User app, even where components (ServerDataTable / GroupWiseServerSideDataTable) are reused there. The data-table components are rendered with Tailwind/Bootstrap utility markup. The card-wrapped-table rules therefore target the *structural* markup those components emit: - ServerDataTable :
> - GroupWiseServerSideDataTable:
with .card-header / .card-body, then the same bordered wrapper >
plus reusable opt-in helper classes (.pill, .admin-avatar, .admin-toolbar*, .admin-card-grid, .admin-form-*, .admin-modal-*) that redesigned pages apply directly to match the mock 1:1. ============================================================================= */ /* ---- Card-wrapped data tables ----------------------------------------------- The components wrap their
in `div.overflow-x-auto.rounded-[0.9rem].border`. We restyle that wrapper into the mock's surface card (14px radius, --shadow) and theme the table itself. Tailwind escaped class names need the leading backslash on the period inside the bracket value. */ .admin-shell .overflow-x-auto.rounded-\[0\.9rem\].border { background:var(--surface); border:1px solid var(--border) !important; border-radius:14px; box-shadow:var(--shadow); /* overflow:hidden clipped wide grids on tablets with NO way to reach the Actions column. Horizontal scroll instead; rounded corners still clip because overflow is non-visible. */ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; } .admin-shell .overflow-x-auto.rounded-\[0\.9rem\].border > table { width:100%; border-collapse:collapse; background:transparent; } /* thead — tinted bar, 11px uppercase muted headings */ .admin-shell .overflow-x-auto.rounded-\[0\.9rem\].border > table > thead { background:var(--surface-2); } .admin-shell .overflow-x-auto.rounded-\[0\.9rem\].border > table > thead > tr > th { text-align:left; padding:10px 16px; font-size:11px; line-height:1.4; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); font-weight:700; border:none; white-space:nowrap; } /* tbody rows — 1px separators, 12.5–13px cells, hover tint */ .admin-shell .overflow-x-auto.rounded-\[0\.9rem\].border > table > tbody > tr { border-top:1px solid var(--border); transition:background .12s ease; } .admin-shell .overflow-x-auto.rounded-\[0\.9rem\].border > table > tbody > tr:hover { background:var(--surface-2); } .admin-shell .overflow-x-auto.rounded-\[0\.9rem\].border > table > tbody > td, .admin-shell .overflow-x-auto.rounded-\[0\.9rem\].border > table > tbody > tr > td { padding:11px 16px; font-size:13px; color:var(--text-2); vertical-align:middle; } /* the loading / empty-state row should not show a hover highlight or odd padding */ .admin-shell .overflow-x-auto.rounded-\[0\.9rem\].border > table > tbody > tr:hover:has(> td[colspan]) { background:transparent; } /* group sub-headers (ServerDataTable GroupBy rows) */ .admin-shell .overflow-x-auto.rounded-\[0\.9rem\].border > table .sdt-group-header > td { background:var(--surface-3); color:var(--text); font-weight:700; font-size:12px; letter-spacing:.02em; padding:8px 16px; } /* ---- GroupWise card shell (Bootstrap .card / .card-header / .card-body) ----- Restyle the per-organisation Bootstrap cards into the mock's surface cards. */ .admin-shell .card { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; } .admin-shell .card > .card-header { background:var(--surface-2); border-bottom:1px solid var(--border); padding:13px 18px; color:var(--text); } .admin-shell .card > .card-header label { font-size:14px; font-weight:700; color:var(--text); letter-spacing:-.01em; } .admin-shell .card > .card-header .bi { color:var(--text-2); cursor:pointer; } .admin-shell .card > .card-body { padding:16px 18px 18px; background:var(--surface); } /* nested table inside a GroupWise card body sits flush — drop the extra shadow */ .admin-shell .card > .card-body .overflow-x-auto.rounded-\[0\.9rem\].border { box-shadow:none; } /* ---- Status pills ----------------------------------------------------------- .pill = base; colour modifiers use the *-soft background + solid colour. Add .pill-dot for the little leading status dot (mock's Active/Frozen). */ .admin-shell .pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; line-height:1; padding:4px 10px; border-radius:20px; white-space:nowrap; background:var(--surface-3); color:var(--text-2); } .admin-shell .pill-success { background:var(--success-soft); color:var(--success); } .admin-shell .pill-amber { background:var(--amber-soft); color:var(--amber); } .admin-shell .pill-coral { background:var(--coral-soft); color:var(--coral); } .admin-shell .pill-primary { background:var(--primary-soft); color:var(--primary); } /* leading dot — inherits the pill's text colour */ .admin-shell .pill.pill-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; } /* squared "tag" variant (mock's Role chip / email-type chip): 6px radius, no dot */ .admin-shell .pill-tag { border-radius:6px; padding:3px 10px; } /* ---- Avatars / initials ----------------------------------------------------- .admin-avatar = rounded-square (orgs / emails / releases), add .admin-avatar-circle for the circular user avatar, size modifiers .admin-avatar-sm (28px) / default 28px / .admin-avatar-lg (60px). */ .admin-shell .admin-avatar { width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; flex:none; background:var(--primary-soft); color:var(--primary); line-height:1; } .admin-shell .admin-avatar-circle { border-radius:50%; } .admin-shell .admin-avatar-lg { width:60px; height:60px; border-radius:14px; font-size:21px; background:var(--primary); color:#fff; } /* coloured icon-tile variants used for the leading cell glyphs */ .admin-shell .admin-avatar-coral { background:var(--coral-soft); color:var(--coral); } .admin-shell .admin-avatar-success { background:var(--success-soft); color:var(--success); } .admin-shell .admin-avatar-amber { background:var(--amber-soft); color:var(--amber); } /* ---- Toolbar: search input, filter selects, Show-Frozen toggle ------------- Opt-in via .admin-toolbar on a page's filter row; the children pick up the mock styling. Also restyles the ServerDataTable built-in search box / status select markup (the Tailwind border boxes) when inside .admin-shell. */ .admin-shell .admin-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* search box (mock: 38px, 10px radius, leading search icon handled by markup) */ .admin-shell .admin-search { position:relative; display:inline-flex; align-items:center; } .admin-shell .admin-search > .mi { position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:19px; color:var(--text-3); pointer-events:none; } .admin-shell .admin-search > input { height:38px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-size:12.5px; padding:0 14px 0 40px; outline:none; width:300px; max-width:100%; } .admin-shell .admin-search > input::placeholder { color:var(--text-3); font-size:12.5px; } .admin-shell .admin-search > input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } /* filter is an InputSelect. */ .admin-shell .focus-within\:ring-2.rounded-lg { border:1px solid var(--border) !important; border-radius:10px; background:var(--surface) !important; padding:0 14px; height:38px; } .admin-shell .focus-within\:ring-2.rounded-lg:focus-within { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-soft); } .admin-shell .focus-within\:ring-2.rounded-lg input { color:var(--text); font-size:12.5px; } /* Show-Frozen / Show-inactive pill toggle (mock's track + knob switch). Apply .admin-toggle to the