:root { /* Border Radius */ --dok-radius: 12px; --dok-radius-sm: 8px; --dok-radius-lg: 16px; --dok-radius-xl: 20px; --dok-radius-full: 9999px; /* Shadows */ --dok-shadow: 0 14px 34px rgba(15, 23, 42, 0.055); --dok-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --dok-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.075); --dok-shadow-lg: 0 18px 42px rgba(15, 23, 42, 0.11); /* DOK-328 — the chromatic tokens derive from the MudBlazor palette instead of carrying colour of their own. They used to disagree with DokTheme.cs on basic values (#1a1a2e against #0F172A for the same "primary text"), so a MudButton and a hand-rolled div sat side by side in different greys and neither was wrong — there were two truths. Deriving also means the per-tenant theme, which only the MudThemeProvider can apply at runtime, finally reaches the hand-written CSS; before this, changing a tenant's colours moved the MudBlazor components and left everything else behind. The fallbacks are load-bearing, not decoration: DOK.Site loads this stylesheet and has had no MudBlazor since DOK-329, so --mud-palette-* is undefined there. Without a fallback the whole declaration would be discarded and the token would resolve to nothing. */ /* Card Styling */ --dok-card-bg: var(--mud-palette-surface, #ffffff); --dok-card-border: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)); --dok-card-shadow: var(--dok-shadow-md); /* Text Colors */ --dok-text-primary: var(--mud-palette-text-primary, #1a1a2e); --dok-text-secondary: var(--mud-palette-text-secondary, #64748b); /* Transitions */ --dok-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* ===== Design tokens (DOK-154) ===== Additive token layer shared by DOK.App and DOK.Site. Values mirror the existing look so adoption is a visual no-op; components should consume these instead of hardcoding hex/rgba/px. */ /* Spacing scale (4px base) */ --dok-space-2xs: 0.25rem; /* 4px */ --dok-space-xs: 0.5rem; /* 8px */ --dok-space-sm: 0.75rem; /* 12px */ --dok-space-md: 1rem; /* 16px */ --dok-space-lg: 1.5rem; /* 24px */ --dok-space-xl: 2rem; /* 32px */ --dok-space-2xl: 3rem; /* 48px */ /* Typography scale */ --dok-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --dok-font-size-xs: 0.75rem; /* 12px */ --dok-font-size-sm: 0.875rem; /* 14px */ --dok-font-size-base: 1rem; /* 16px */ --dok-font-size-lg: 1.125rem; /* 18px */ --dok-font-size-xl: 1.5rem; /* 24px */ --dok-font-size-2xl: 2rem; /* 32px */ --dok-font-size-3xl: 2.5rem; /* 40px */ --dok-font-weight-regular: 400; --dok-font-weight-medium: 500; --dok-font-weight-semibold: 600; --dok-font-weight-bold: 700; --dok-line-height-tight: 1.2; --dok-line-height-normal: 1.5; --dok-line-height-loose: 1.75; /* Shared brand accent (unify App + Site): marketing AI accent exposed as a token. */ --dok-accent-ai: #7c5cfc; /* Primary-tinted overlays — derive from the MudBlazor primary so they re-tint automatically with the tenant palette instead of being hardcoded. */ --dok-overlay-subtle: rgba(var(--mud-palette-primary-rgb), 0.06); --dok-overlay-soft: rgba(var(--mud-palette-primary-rgb), 0.10); --dok-overlay-strong: rgba(var(--mud-palette-primary-rgb), 0.18); /* Neutral hairline/border used across cards and shells. */ --dok-border-subtle: rgba(148, 163, 184, 0.18); /* Brand dark — the near-black used for brand marks / primary chrome on light surfaces (mirrors the MudTheme dark in DokBaseLayout). Single source of truth for the App shell + auth pages so a brand tweak is one edit. */ --dok-brand-dark: #111827; } /* ===== Dark mode (DOK-801) ===== `data-dok-theme` on is the document's appearance state. DOK.App writes it in App.razor during the server-side render — from the same cookie DOK-663 already reads, so the shell paints dark from the first byte instead of painting light and correcting itself — and PlaygroundLayout keeps it true for the rest of the circuit (the toggle, a login, a logout). It had to be invented because nothing else expresses this. MudThemeProvider changes theme by REWRITING the --mud-palette-* properties; it adds no class and no attribute, so CSS had no way to ask "is this dark?". What stood here instead was five rules keyed on `.mud-theme-dark`, which is not that state: in the stylesheet MudBlazor 9.8.0 actually ships it appears exactly once, as a colour utility — `.mud-theme-dark{color:var(--mud-palette-dark-text)!important;background-color:var(--mud-palette-dark)!important}` — i.e. what Color.Dark paints on one component. Nothing ever put it on the document, so those five rules were dead from the day they merged and dark mode never darkened the design system at all. An attribute rather than a class, on purpose: a class can be confused with a MudBlazor utility, which is precisely the mistake being undone. Written `:root[…]` rather than `[…]` so it outranks the `:root` block above by specificity (0,2,0 against 0,1,0) instead of by source order — this file is long and someone will move a block one day. ONLY the tokens that spell a colour out are here. The chromatic tokens above derive from --mud-palette-* (DOK-328), and MudThemeProvider already darkens those: --dok-card-bg follows Surface to #111827, --dok-text-primary follows TextPrimary to #E2E8F0, and so on. Redefining them here with a literal would look thorough and would silently pin the per-tenant palette back to a fixed hex, which is the exact bug DOK-328 removed. DesignTokenTests enforces both halves of that: every token carrying its own colour needs a dark value, and the derived ones must keep deriving. Geometry is deliberately untouched — same offsets, same blur, same radii. Only the ink changes. */ :root[data-dok-theme="dark"] { /* A shadow made of translucent slate is invisible on a dark surface: the light-mode alphas (0.055 to 0.11 of #0F172A) are near-transparent against #0B1220. Dark UIs need near-black at a much higher alpha for the elevation to read at all. */ --dok-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); --dok-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50); --dok-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.50); --dok-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.60); /* Same slate hairline, raised alpha: 0.18 separates a white card from a #F8FAFC page, but it disappears between #111827 and #0B1220, which is where card edges actually need to be found. */ --dok-border-subtle: rgba(148, 163, 184, 0.28); } .dok-card { border-radius: var(--dok-radius); box-shadow: var(--dok-shadow); } /* DOK-337 — .dok-btn, .dok-avatar and .dok-chip went with DokButton, DokAvatar and DokChip: nothing in the App or the Site ever wrote those classes by hand. .dok-card stays, with 39 hand-written uses that have nothing to do with the deleted DokCard. */ .dok-section { padding: 1.5rem; } .hero-card { border-radius: 16px; background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.1), rgba(var(--mud-palette-info-rgb), 0.05)); border-left: 4px solid var(--mud-palette-primary); } /* ===== Authenticated Application Shell ===== */ .dok-premium-app { min-height: 100vh; background: radial-gradient(circle at 96% 1%, rgba(var(--mud-palette-primary-rgb), 0.075), transparent 22rem), radial-gradient(circle at 4% 92%, rgba(var(--mud-palette-info-rgb), 0.05), transparent 26rem), var(--mud-palette-background); } .dok-premium-app__content { padding: 1.75rem 2rem 2.5rem; } .dok-premium-app .dok-card, .dok-premium-app .profile-card, .dok-premium-app .document-process-form-card, .dok-premium-app .filter-card, .dok-premium-app .table-card { border: 1px solid var(--dok-border-subtle); border-radius: var(--dok-radius-sm); background: rgba(var(--mud-palette-surface-rgb), 0.96); box-shadow: var(--dok-shadow); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .dok-premium-app .dok-card:hover, .dok-premium-app .profile-card:hover, .dok-premium-app .document-process-form-card:hover { border-color: rgba(var(--mud-palette-primary-rgb), 0.24); box-shadow: var(--dok-shadow-md); } /* ===== DokPageHeader Styles ===== */ .dok-page-header { min-width: 0; } .dok-page-header__copy { min-width: 0; } .dok-page-header__title { color: var(--mud-palette-text-primary); letter-spacing: -0.035em; } .dok-page-header__description { max-width: 760px; line-height: 1.55; } .dok-page-header__actions { flex-wrap: wrap; } .dok-filter-bar { padding: .85rem; border: 1px solid rgba(148, 163, 184, .18); border-radius: var(--dok-radius-sm); background: rgba(var(--mud-palette-surface-rgb), .82); box-shadow: 0 12px 34px rgba(15, 23, 42, .04); } /* ===== Shared Premium Controls ===== */ .dok-premium-app .mud-button-root { border-radius: 9px; font-weight: 750; letter-spacing: 0.01em; } .dok-premium-app .mud-input-outlined { border-radius: 10px; background: rgba(var(--mud-palette-surface-rgb), 0.74); } .dok-premium-app .mud-input-outlined-border { border-color: rgba(148, 163, 184, 0.30); } .dok-premium-app .mud-input-control:hover .mud-input-outlined-border { border-color: rgba(var(--mud-palette-primary-rgb), 0.58); } .dok-premium-app .mud-expansion-panel { overflow: hidden; border: 1px solid var(--dok-border-subtle); border-radius: var(--dok-radius-lg) !important; background: rgba(var(--mud-palette-surface-rgb), 0.94); box-shadow: var(--dok-shadow); } .dok-premium-app .mud-expand-panel-header { min-height: 54px; } .dok-premium-app .mud-expand-panel-text { color: var(--mud-palette-text-primary); font-weight: 800; } .dok-premium-app .mud-tabs { border-radius: var(--dok-radius-lg); } .dok-premium-app .mud-tab { min-height: 50px; font-weight: 750; text-transform: none; } .dok-premium-app .mud-table-container { overflow: auto; } .dok-premium-app .mud-table-head .mud-table-cell { border-bottom: 1px solid rgba(148, 163, 184, 0.22); background: rgba(var(--mud-palette-primary-rgb), 0.045); color: var(--mud-palette-text-secondary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; } .dok-premium-app .mud-table-body .mud-table-row { transition: background-color 0.16s ease, box-shadow 0.16s ease; } /* DOK-199: subtle zebra striping + a richer hover with a left accent bar. */ .dok-premium-app .mud-table-body .mud-table-row:nth-of-type(even) { background: rgba(var(--mud-palette-surface-rgb), 0.5); } .dok-premium-app .mud-table-body .mud-table-row:hover { background: rgba(var(--mud-palette-primary-rgb), 0.07); box-shadow: inset 3px 0 0 var(--mud-palette-primary); } .dok-premium-app .mud-table-body .mud-table-cell { border-bottom-color: rgba(148, 163, 184, 0.14); } .dok-premium-app .mud-table-pagination { border-top: 1px solid rgba(148, 163, 184, 0.16); background: rgba(var(--mud-palette-background-rgb), 0.42); } .dok-premium-app .mud-alert { border-radius: 12px; } .dok-premium-app .mud-chip { font-weight: 700; } .mud-dialog { border: 1px solid rgba(148, 163, 184, 0.20); border-radius: var(--dok-radius-lg) !important; box-shadow: var(--dok-shadow-lg) !important; } .mud-dialog .mud-dialog-title { border-bottom: 1px solid rgba(148, 163, 184, 0.15); font-weight: 800; } .mud-dialog .mud-dialog-actions { border-top: 1px solid rgba(148, 163, 184, 0.15); background: rgba(var(--mud-palette-background-rgb), 0.46); } /* Dark mode support — DOK-801: was keyed on `.mud-theme-dark` and therefore matched nothing (see the dark token block near the top of this file). The border is gone from here on purpose: it used to restate a hardcoded hairline, and the base rule already reads --dok-border-subtle, which now has a dark value of its own. All that is genuinely card-specific in dark is the surface opacity — 0.90 instead of 0.96 — so the shell's radial primary/info tints read through the card instead of being flattened by it. */ [data-dok-theme="dark"] .dok-premium-app .dok-card, [data-dok-theme="dark"] .dok-premium-app .profile-card, [data-dok-theme="dark"] .dok-premium-app .document-process-form-card, [data-dok-theme="dark"] .dok-premium-app .filter-card, [data-dok-theme="dark"] .dok-premium-app .table-card { background: rgba(var(--mud-palette-surface-rgb), 0.90); } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } /* ===== DokConfirmDialog Styles ===== */ .dok-confirm-dialog { border-radius: 16px !important; overflow: hidden; } .dok-confirm-dialog .mud-dialog-title { padding: 24px 24px 0 24px; } .dok-confirm-dialog .mud-dialog-content { padding: 16px 24px; } .dok-confirm-dialog .mud-dialog-actions { padding: 16px 24px 24px 24px; } .dok-dialog-header { display: flex; align-items: center; gap: 12px; } .dok-dialog-icon { flex-shrink: 0; } .dok-dialog-title { font-weight: 600; color: var(--mud-palette-text-primary); } .dok-dialog-content { padding-top: 8px; } .dok-dialog-message { color: var(--mud-palette-text-secondary); line-height: 1.6; } .dok-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; width: 100%; } .dok-dialog-btn-cancel { font-weight: 500; } .dok-dialog-btn-confirm { font-weight: 600 !important; border-radius: 8px !important; padding: 8px 20px !important; } /* ===== Navigation Styles ===== */ .dok-nav { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; } .dok-nav-section { display: flex; flex-direction: column; gap: 4px; } .dok-nav-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mud-palette-text-secondary); padding: 12px 12px 6px 12px; opacity: 0.7; } .dok-nav-menu { padding: 0 !important; } .dok-nav-item { border-radius: 10px !important; margin: 2px 0 !important; padding: 10px 14px !important; font-weight: 500 !important; font-size: 14px !important; transition: all 0.15s ease !important; } .dok-nav-item:hover { background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important; } .dok-nav-item.active, .dok-nav-item.mud-nav-link-active { background-color: rgba(var(--mud-palette-primary-rgb), 0.12) !important; color: var(--mud-palette-primary) !important; } .dok-nav-item .mud-nav-link-icon { margin-right: 12px; opacity: 0.8; } .dok-nav-item:hover .mud-nav-link-icon, .dok-nav-item.active .mud-nav-link-icon, .dok-nav-item.mud-nav-link-active .mud-nav-link-icon { opacity: 1; color: var(--mud-palette-primary); } /* Drawer header styling */ #nav-drawer .mud-drawer-header { min-height: 64px; padding: 0 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } /* Drawer styling */ #nav-drawer { display: block !important; left: 0 !important; width: 244px !important; min-width: 244px !important; max-width: 244px !important; border-right: 1px solid rgba(0, 0, 0, 0.06) !important; transition: width 0.18s ease; transform: none !important; visibility: visible !important; overflow: hidden !important; } #nav-drawer .mud-drawer-content { height: 100%; overflow: hidden; } #nav-drawer ~ .mud-main-content { margin-left: 244px !important; } #nav-drawer.dok-drawer-collapsed { width: 70px !important; min-width: 70px !important; max-width: 70px !important; } #nav-drawer.dok-drawer-collapsed ~ .mud-main-content { margin-left: 70px !important; } @media (max-width: 720px) { .dok-premium-app__content { padding: 1rem; } .dok-page-header { padding: 1.15rem !important; } .dok-page-header__actions { width: 100%; } } /* DokStatCard styles are in the component's scoped CSS */ /* ===== Loading skeletons (DOK-199) ===== Round the corners and warm the shimmer so loading blocks read as placeholder surfaces rather than grey bars. MudBlazor keeps its wave animation. */ .dok-premium-app .mud-skeleton { border-radius: var(--dok-radius-sm); background-color: rgba(var(--mud-palette-primary-rgb), 0.07); } .dok-premium-app .mud-skeleton-text { border-radius: 6px; } /* ===== Empty states (DOK-199) ===== Shared, richer empty-state look used by DokEmptyState (and adoptable inline). Tinted gradient icon ring + clear title + muted supporting line. */ .dok-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 2.75rem 1.5rem; } .dok-empty-state__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: var(--dok-radius-full); color: var(--mud-palette-primary); background: radial-gradient(circle at 50% 35%, rgba(var(--mud-palette-primary-rgb), 0.18), rgba(var(--mud-palette-primary-rgb), 0.06)); box-shadow: 0 0 0 8px rgba(var(--mud-palette-primary-rgb), 0.05); } .dok-empty-state--success .dok-empty-state__icon { color: var(--mud-palette-success); background: radial-gradient(circle at 50% 35%, rgba(var(--mud-palette-success-rgb), 0.18), rgba(var(--mud-palette-success-rgb), 0.06)); box-shadow: 0 0 0 8px rgba(var(--mud-palette-success-rgb), 0.05); } .dok-empty-state__title { color: var(--mud-palette-text-primary); font-size: 1.05rem; font-weight: 800; } .dok-empty-state__description { max-width: 34rem; color: var(--mud-palette-text-secondary); font-size: 0.9rem; font-weight: 600; line-height: 1.5; } .dok-empty-state__actions { margin-top: 0.5rem; } /* ===== Date range / "Período" (DOK-678) ===== Styles for DokDateRangePicker — the single date-range control of the application. Read the header of DokDateRangePicker.razor for the whole story; the short version is that MudDateRangePicker copies its Class onto div.mud-input as well as onto the picker root, and div.mud-input lives inside a `flex-direction: column` container, so a flex-basis meant as a width was applied as a HEIGHT. The Segurança and Registos de Auditoria filter bars shipped a 352x352 square where a 40px control belonged. Everything below therefore sizes the WRAPPER, which is a plain div and a well-behaved flex item. The two custom properties are the supported way for a page to change the width without writing another `flex` rule that could drift back into MudBlazor's internals. */ .dok-daterange { --dok-daterange-width: 22rem; --dok-daterange-min-width: 16rem; display: flex; flex: 0 1 var(--dok-daterange-width); min-width: var(--dok-daterange-min-width); max-width: 100%; } .dok-daterange > .mud-picker { flex: 1 1 auto; min-width: 0; } /* Belt and braces: whatever a page does to the wrapper, the input box keeps MudBlazor's own flex behaviour, so its height can never again be driven by a basis meant for a width. */ .dok-daterange .mud-input-control-input-container > .mud-input { flex: 0 1 auto; } /* MudBlazor lets both range s ask for width:100%, which squeezes the 24px calendar icon and clips the dates mid-year at narrow widths. Pinning the adornment to its content hands that space back. (Reaching into .mud-* from a global sheet is deliberate: those nodes carry no scope attribute, so a .razor.css can never see them.) */ .dok-daterange .mud-input-adornment-start { flex: 0 0 auto; } /* ===== Keyboard focus parity (DOK-199) ===== The Site has a crisp focus-visible ring; give the App shell the same on its custom interactive chrome (links, buttons, nav, account trigger). MudBlazor inputs keep their own focus treatment — we don't override those. */ .dok-premium-app a:focus-visible, .dok-premium-app button:focus-visible, .dok-nav-item:focus-visible, .dok-nav-rail-button:focus-visible, .dok-account-trigger:focus-visible { /* DOK-341 — 0.85, not 0.65. Composited over a white surface the ring was rgb(113,154,242) and 2.76:1, under the 3:1 that SC 1.4.11 asks of a focus indicator: visible to most people, and not to the person who has nothing else telling them where they are. 0.85 gives 3.98:1; 0.70 would have cleared it by 0.02, which is no margin at all. Dark mode already passed (4.19:1) and gets slightly crisper. Measured by ContrastTokenTests, which reads this number. */ outline: 2px solid rgba(var(--mud-palette-primary-rgb), 0.85); outline-offset: 2px; border-radius: var(--dok-radius-sm); } /* ===== Accessibility: honor prefers-reduced-motion (DOK-199) ===== Users who ask for reduced motion get near-instant transitions/animations and no lift on hover, without changing the static look for everyone else. */ @media (prefers-reduced-motion: reduce) { .dok-premium-app *, .dok-premium-app *::before, .dok-premium-app *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .dok-premium-app .dok-card:hover, .dok-premium-app .profile-card:hover, .dok-premium-app .document-process-form-card:hover, .dok-nav-rail-expand:hover, .dok-nav-collapse-icon-button:hover { transform: none !important; } }