/* ============================================================
Doctor Assistant admin panel — theme overlay ported line-for-line from
the reference "Convene" (Midnight) admin project's src/index.css design
tokens. Plain CSS loaded via a render hook (see AdminPanelProvider), not
a compiled Filament theme build -- every selector below targets a real
Filament v3 class, verified against the vendored blade source (grepped,
not guessed). Filament's dark mode toggles a `.dark` class on
(confirmed in vendor/filament/filament/resources/views/components/
layout/base.blade.php) -- that maps directly to the reference's
`[data-theme='light']` vs default(dark) split below.
Values copied verbatim from D:\xampp\htdocs\claude\admin\src\index.css:
- light = that file's [data-theme='light'] block -> our default (:root)
- dark = that file's :root (dark-default) block -> our .dark override
The one deliberate deviation: primary/primary-600/primary-700 use OUR
brand orange (#c2410c family, matched to the marketing site) instead of
the reference's saffron (#e8730e family) -- everything else (shape,
shadow, sidebar shades, spacing) is an exact port.
IMPORTANT: every custom property is prefixed --da- (Doctor Assistant).
An earlier version reused bare names like --primary/--primary-600 --
those are ALSO Filament's own internal color-system variable names
(consumed via rgb(var(--primary-600)) in its compiled CSS), expecting a
space-separated RGB triple. Overwriting them with plain hex strings
silently broke every component that reads them, including button
backgrounds (an "Actions"/"New doctor" button rendering white-text-on
-transparent, invisible against a light page, was the symptom). Never
reuse an unprefixed name here again -- always --da-*.
============================================================ */
:root {
/* ---- light theme (our default) ---- */
--da-primary: #c2410c;
--da-primary-600: #ea580c;
--da-primary-700: #9a3412;
--da-primary-soft: #fdf1e7;
--da-primary-ring: rgba(194, 65, 12, 0.22);
--da-primary-grad-2: #ea580c;
--da-bg: #f4f6fb;
--da-surface: #ffffff;
--da-surface-2: #f8f9fc;
--da-border: #e6e9f0;
--da-text: #17202e;
--da-muted: #667085;
--da-muted-2: #9aa1ad;
/* Sidebar (dark rail in both themes -- reference's signature). */
--da-sidebar-1: #191d2b;
--da-sidebar-2: #0e1017;
--da-sidebar-muted: #9aa3c4;
--da-neutral-bg: #eef1f6;
--da-radius: 16px;
--da-radius-sm: 10px;
--da-shadow: 0 4px 16px rgba(16, 24, 40, 0.07);
}
.dark {
/* ---- dark theme, exact port of the reference's :root (dark-default) block ---- */
--da-primary: #ea580c;
--da-primary-600: #f97316;
--da-primary-700: #c2410c;
--da-primary-soft: rgba(194, 65, 12, 0.14);
--da-primary-ring: rgba(194, 65, 12, 0.32);
--da-primary-grad-2: #f97316;
--da-bg: #0e1117;
--da-surface: #161a22;
--da-surface-2: #1b202a;
--da-border: #262b36;
--da-text: #e6e8ee;
--da-muted: #8b93a7;
--da-muted-2: #6b7280;
--da-sidebar-1: #13161e;
--da-sidebar-2: #0a0c11;
--da-sidebar-muted: #9aa3b8;
--da-neutral-bg: rgba(148, 163, 184, 0.14);
--da-shadow: 0 6px 20px rgba(0, 0, 0, 0.36);
}
/* ---------------------------------------------- Sidebar: always-dark rail */
.fi-sidebar {
background: linear-gradient(180deg, var(--da-sidebar-1), var(--da-sidebar-2)) !important;
display: flex !important;
flex-direction: column !important;
}
.fi-sidebar-header {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.08) !important;
flex-shrink: 0;
}
.fi-logo,
.fi-logo span,
.fi-sidebar-header .fi-logo,
.fi-sidebar-header .fi-logo span {
color: #fff !important;
}
/* The nav list grows to fill the sidebar, pushing the footer render hook
down to sit flush at the bottom instead of directly under the last nav
item -- without this, .fi-sidebar-footer only pushes down as far as the
nav content, which looks "wrong"/floating on any viewport taller than
the nav list itself. */
.fi-sidebar-nav {
flex: 1 1 auto;
}
.fi-sidebar-nav-groups {
padding-top: 0.5rem;
}
.fi-sidebar-group-label {
color: var(--da-sidebar-muted) !important;
opacity: 0.75;
font-weight: 700 !important;
letter-spacing: 0.06em;
}
/* The label/icon spans set their OWN explicit Tailwind text-color classes
(text-gray-700, text-primary-600, etc. -- tuned for a light sidebar),
which override any color set on the parent .fi-sidebar-item-button via
inheritance. Every rule below targets those inner elements directly,
or the override silently does nothing. */
.fi-sidebar-item-button,
.fi-sidebar-item-label,
.fi-sidebar-item-icon {
color: var(--da-sidebar-muted) !important;
}
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
color: #fff !important;
}
.fi-sidebar-item-button:hover {
background: rgba(255, 255, 255, 0.07) !important;
}
/* Active nav item: solid gradient pill + colored shadow, matching the
reference's `.nav-link.active` rule exactly. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
background: linear-gradient(135deg, var(--da-primary), var(--da-primary-grad-2)) !important;
box-shadow: 0 8px 18px var(--da-primary-ring);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
color: #fff !important;
}
.fi-sidebar-footer {
flex-shrink: 0;
}
/* ---------------------------------------------- Page content: full width */
/* Filament caps page content at a max-width (fi-simple-layout/6xl-ish) on
wide viewports, leaving dead whitespace on the right -- the reference
page container has no such cap (`.page { width: 100% }`). */
.fi-main {
max-width: none !important;
}
/* ---------------------------------------------- Cards, sections, widgets */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-modal-window:not(.fi-modal-slide-over-window) {
background: var(--da-surface) !important;
border-color: var(--da-border) !important;
border-radius: var(--da-radius) !important;
box-shadow: var(--da-shadow) !important;
}
/* ---------------------------------------------- Page header typography */
/* Reference: .page-title { font-size: 23px; font-weight: 700 }
.page-subtitle { font-size: 14px; color: muted } */
.fi-header-heading {
font-size: 23px !important;
font-weight: 700 !important;
color: var(--da-primary) !important;
}
.fi-header-subheading {
font-size: 14px !important;
color: var(--da-muted) !important;
}
/* ---------------------------------------------- Stat tiles: icon badge */
.fi-wi-stats-overview-stat-icon {
background: var(--da-primary-soft);
color: var(--da-primary) !important;
border-radius: var(--da-radius-sm);
padding: 8px;
width: 2.25rem !important;
height: 2.25rem !important;
box-sizing: border-box;
}
.fi-wi-stats-overview-stat-value {
font-weight: 800 !important;
color: var(--da-text) !important;
}
.fi-wi-stats-overview-stat-label {
color: var(--da-muted) !important;
}
/* Wide tables scroll horizontally inside their own container instead of
clipping content on narrower windows (same guard as the reference). */
.fi-ta-ctn {
overflow-x: auto !important;
}
/* ---------------------------------------------- Table header: peach tint */
/* Reference scopes this to its light theme only ("Light theme only, per
request" in its own CSS) -- dark theme keeps a plain neutral header. */
.fi-ta-header-cell {
background: var(--da-primary-soft) !important;
}
.fi-ta-header-cell-label {
color: var(--da-primary-700) !important;
}
.dark .fi-ta-header-cell {
background: var(--da-surface-2) !important;
}
.dark .fi-ta-header-cell-label {
color: var(--da-muted) !important;
}
.fi-ta-row:hover {
background: var(--da-primary-soft) !important;
}
.dark .fi-ta-row:hover {
background: var(--da-surface-2) !important;
}
/* ---------------------------------------------- Slide-over panels (View/Edit/Create) */
.fi-modal-slide-over-window {
background: var(--da-surface) !important;
border-radius: 0 !important;
}
/* Same light-only tint rule as the table header above. */
.fi-modal-slide-over-window .fi-modal-header {
background: var(--da-primary-soft) !important;
border-color: var(--da-primary-ring) !important;
}
.fi-modal-slide-over-window .fi-modal-heading {
color: var(--da-primary-700) !important;
font-size: 1.2rem !important;
}
.dark .fi-modal-slide-over-window .fi-modal-header {
background: var(--da-surface) !important;
border-color: var(--da-border) !important;
}
.dark .fi-modal-slide-over-window .fi-modal-heading {
color: var(--da-text) !important;
}
/* ---------------------------------------------- Buttons: rounded to match */
.fi-btn {
border-radius: var(--da-radius-sm) !important;
}
/* ---------------------------------------------- Badges */
.fi-badge {
border-radius: 999px !important;
font-weight: 600 !important;
}
/* ---------------------------------------------- Topbar: theme switcher + user info */
.fi-topbar nav {
background: var(--da-surface) !important;
border-color: var(--da-border) !important;
}
/* Always-visible, matching the reference's bordered icon-square toggle,
instead of Filament's default (buried inside the avatar dropdown). */
.fi-theme-switcher {
border: 1px solid var(--da-border);
border-radius: var(--da-radius-sm);
padding: 2px;
}
.da-topbar-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.da-topbar-user-id {
display: flex;
flex-direction: column;
line-height: 1.2;
text-align: right;
}
.da-topbar-name {
font-size: 0.8rem;
font-weight: 600;
color: var(--da-text);
}
.da-topbar-role {
font-size: 0.7rem;
color: var(--da-muted);
}
/* Avatar + name/role grouped as one clickable trigger (user-menu.blade.php
override) instead of a bare avatar circle with the name hidden until
opened -- matches the reference's combined topbar-user block. */
.da-topbar-user {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.25rem 0.5rem;
border-radius: var(--da-radius-sm);
transition: background-color 0.15s;
}
.da-topbar-user:hover {
background: var(--da-neutral-bg);
}
/* Super Admin's crown avatar tile (avatar/user.blade.php override) --
replaces Filament's default initials-circle fallback. Sized/shaped to
match the fi-avatar it's standing in for (rounded-full, 2rem). */
.da-avatar-crown {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
background: var(--da-primary);
color: #ffffff;
flex-shrink: 0;
}
.da-avatar-crown svg {
width: 60%;
height: 60%;
}
/* Doctor/Medicine listing photo column -- tighter gap to the adjacent name
column than Filament's default cell padding gives two consecutive
columns (reference admin panel keeps avatar and name visually close).
table-auto still gives the header/data cell itself a wide auto-computed
width when the column has no text content to size against -- has to be
capped on the | / | directly (Filament's own generated classes),
not just the inner wrapper div, or the avatar just floats in a wide
empty cell with a big visual gap before the Name column starts. */
.fi-table-header-cell-image-path,
.fi-table-cell-image-path,
.fi-table-header-cell-profile-picture-path,
.fi-table-cell-profile-picture-path {
width: 60px !important;
max-width: 60px !important;
}
.da-photo-cell {
padding-right: 0 !important;
}
.da-name-cell {
padding-left: 0.5rem !important;
}
/* ============================================================
Login page -- two-column split, matching the Electron client's
Activation screen exactly (same gradient, same badge/heading treatment,
same "icon + text" info list pattern) so a doctor/superadmin moving
between the desktop app and this admin console sees one consistent
brand, not two unrelated products.
Rendered through a real custom view (App\Filament\Auth\Login, see that
class's docblock) rather than a CSS/render-hook hack on top of
Filament's stock page.simple/layout.simple chain -- these classes are
ours end-to-end, not vendor overrides.
============================================================ */
.da-login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--da-bg);
}
.da-login-split {
display: flex;
max-width: 880px;
width: 100%;
min-height: 480px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
@media (max-width: 720px) {
.da-login-split {
flex-direction: column;
min-height: 0;
}
}
.da-login-info {
flex: 1 1 45%;
padding: 48px 36px;
background: linear-gradient(160deg, #2a1810 0%, #1a0f0a 50%, #0a0605 100%);
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
}
.da-login-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.da-login-brand img {
width: 36px;
height: 36px;
}
.da-login-brand h2 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
.da-login-lede {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
line-height: 1.6;
margin: 0 0 20px;
}
.da-login-points {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
.da-login-points li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
line-height: 1.5;
}
.da-login-points strong {
color: #ffb088;
font-weight: 600;
}
/* Distinct colors only when a single bullet has more than one highlighted
term (mirrors .activation-steps) -- with just one term per bullet here,
cycling by line looked like an arbitrary rainbow instead of a call-out. */
.da-login-points li strong:nth-of-type(2) { color: #fcd34d; }
.da-login-points li strong:nth-of-type(3) { color: #7dd3fc; }
.da-login-points svg {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 1px;
color: #f97316;
}
.da-login-alert {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 176, 136, 0.35);
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
line-height: 1.5;
}
.da-login-alert strong {
color: #ffb088;
font-weight: 600;
}
.da-login-alert svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #ffb088;
}
/* Right column: tinted panel (matches .activation-form-panel) holding an
elevated white card (matches .activation-form-card). */
.da-login-form-panel {
position: relative;
flex: 1 1 55%;
padding: 48px 40px;
background:
radial-gradient(circle at 100% 0%, rgba(194, 65, 12, 0.1) 0%, rgba(194, 65, 12, 0) 55%),
var(--da-surface-2, var(--da-surface));
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.da-login-form-panel::before {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(194, 65, 12, 0.14) 0%, rgba(194, 65, 12, 0) 70%);
pointer-events: none;
}
.da-login-card {
position: relative;
background: var(--da-surface);
border: 1px solid var(--da-border);
border-radius: 16px;
padding: 32px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.da-login-form-header {
margin-bottom: 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.da-login-badge {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 14px;
border-radius: 50%;
background: linear-gradient(135deg, var(--da-primary), #f97316);
box-shadow: 0 0 0 6px rgba(194, 65, 12, 0.12);
animation: da-login-badge-pulse 2.4s ease-in-out infinite;
}
.da-login-badge svg {
width: 26px;
height: 26px;
color: #ffffff;
}
@keyframes da-login-badge-pulse {
0%, 100% { box-shadow: 0 0 0 6px rgba(194, 65, 12, 0.12); }
50% { box-shadow: 0 0 0 10px rgba(194, 65, 12, 0.05); }
}
.da-login-heading {
margin: 0 0 6px;
font-size: 26px;
font-weight: 700;
background: linear-gradient(90deg, var(--da-primary), #f97316, var(--da-primary));
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: da-login-heading-shimmer 4s linear infinite;
}
@keyframes da-login-heading-shimmer {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.da-login-subheading {
margin: 0;
font-size: 14px;
color: var(--da-muted);
}
.da-login-card .fi-form {
margin-top: 4px;
}
/* ---------------------------------------------- Table header row: last
(actions) column background */
/* The actions column's | (.fi-ta-actions-header-cell) is a bare cell
with no background class of its own -- Filament relies on the parent
| showing through, which normally works, but
this table's border-spacing (from the reference port's rounded-card
look) leaves that one cell showing the table's own background instead
of the row's, breaking the header row's background out of the last
column. Match it explicitly to the SAME tokens .fi-ta-header-cell uses
above (--da-primary-soft light / --da-surface-2 dark) -- an earlier
version of this fix used --da-surface-2 for light mode too, which is a
distinctly different blue-gray, not the peach tint, so the mismatch was
still visible after this rule was "fixed" the first time. */
.fi-ta-actions-header-cell {
background: var(--da-primary-soft) !important;
}
.dark .fi-ta-actions-header-cell {
background: var(--da-surface-2) !important;
}
/* ---------------------------------------------- Icon-only row actions:
gray = disabled-looking */
/* View/Edit row actions are deliberately Tables\Actions\Action instances
with color('gray') (see DoctorResource's comment on why they can't be
real ViewAction/EditAction) -- but Filament's gray token for icon
buttons (text-gray-400, ~#a1a1aa) is faint enough to read as disabled
next to the vibrant orange "Actions" dropdown trigger beside it. Bumped
to a darker, clearly-enabled gray that still reads as secondary/neutral
(not the brand orange, which stays reserved for primary actions). */
.fi-icon-btn.fi-color-gray {
color: var(--da-muted) !important;
}
.fi-icon-btn.fi-color-gray:hover {
color: var(--da-primary) !important;
}